Merge branch 'main' into issue-47-Add_explosions_to_committee_page

Author: Oliverr48

client/package-lock.json

@@ -22,13 +22,13 @@
     "@tanstack/react-query": "^5.80.7",
     "@tanstack/react-query-devtools": "^5.80.7",
     "autoprefixer": "^10.4.21",
-    "axios": "^1.12.0",
+    "axios": "^1.13.5",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "framer-motion": "^12.29.0",
     "is-inside-container": "^1.0.0",
     "lucide-react": "^0.516.0",
-    "next": "15.4.11",
+    "next": "15.5.10",
     "react": "19.1.0",
     "react-dom": "19.1.0",
     "react-social-icons": "^6.25.0",

client/package.json

@@ -1,6 +1,7 @@
 "use client";
 
 import Image from "next/image";
+import { SocialIcon } from "react-social-icons";
 
 // unused atm, as the member isnt linked a project on the backend
 /* export type MemberProfileProject = {
@@ -15,6 +16,10 @@ export type MemberProfileData = {
   about: string;
   pronouns?: string;
   profile_picture?: string;
+  social_media?: {
+    link: string;
+    socialMediaUserName: string;
+  }[];
 };
 
 type MemberProfileProps = {
@@ -54,19 +59,49 @@ export function MemberProfile({ member }: MemberProfileProps) {
               )}
             </div>
             <Image
-              src="/frame.svg"
+              src="/pixel-art-frame.svg"
               alt="golden pixel art frame around profile picture"
-              width={176}
-              height={192}
-              className="z-0 h-48 w-44"
+              width={200}
+              height={200}
+              className="z-10"
             />
           </div>
           <div className="flex w-4/5 flex-col gap-2 rounded-md p-2.5 font-firaCode">
             <div className="flex">
               <p className="min-w-fit font-jersey10 text-4xl">{member.name}</p>
               <hr className="ml-5 hidden w-full self-center border-light_2 lg:flex" />
             </div>
-            <p className="text-lg">{member.pronouns}</p>
+            <div className="flex items-center gap-2">
+              {member.social_media && member.social_media.length > 0 && (
+                <div className="w-full">
+                  <div className="mt-2 flex flex-wrap items-center gap-2">
+                    {member.social_media.map((sm) => (
+                      <span
+                        key={sm.link}
+                        className="ml-2 flex items-center gap-1"
+                      >
+                        <SocialIcon
+                          url={sm.link}
+                          style={{ height: 24, width: 24 }}
+                        />
+                        <a
+                          href={sm.link}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="font-firaCode text-base underline hover:text-primary"
+                        >
+                          {sm.socialMediaUserName}
+                        </a>
+                      </span>
+                    ))}
+                  </div>
+                </div>
+              )}
+            </div>
+            <div className="flex items-center gap-2">
+              <p className="text-lg">{member.pronouns}</p>
+            </div>
+
             <p>{member.about}</p>
           </div>
         </div>