Issue 69 add landing sparkles and explosions

client/documentation/admin-dashboard/members.md

@@ -0,0 +1,17 @@
+## Member Profiles
+
+Profiles of club members can be added and edited at the row 'Member' of the GAME_DEV section on the main admin page.
+
+### Fields
+
+**Name:** Required field for the member's name. A character field (includes letters, numbers and symbols) of maximum length 200 characters.
+
+**Active:** Checkbox to represent whether a member is an active participant in the club. If the checkbox is not ticked then the member's profile will not be displayed on the website.
+
+**Profile Picture:** Optional field to upload a profile picture. Must be an image file, and will display best if the image is at least 128 by 128 px in size. If no profile picture is provided then the member's initials will be displayed instead.
+
+**About:** Optional field for a bio. A character field of maximum length 256 characters.
+
+**Pronouns:** Optional field for the member's pronouns. A character field of maximum length 20 characters.
+
+**Social media links:** Optional section to display links to the member's social media profiles. Requires a link to the profile (character field of maximum length 2083) and, optionally, the profile username (character field of maximum length 200). If a username is not supplied then only a social media icon will be displayed with the link attached, otherwise the username will be placed next to the relevant icon. The type of icon to be displayed (e.g. instagram, linkedin, generic link) is inferred from the social media link provided.

client/package.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.23.24",
     "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/src/components/main/MemberProfile.tsx

@@ -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,11 @@ export type MemberProfileData = {
   about: string;
   pronouns?: string;
   profile_picture?: string;
+  social_media?: {
+    link: string;
+    socialMediaUserName: string;
+  }[];
+  pk: number;
 };
 
 type MemberProfileProps = {
@@ -54,19 +60,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>

client/src/components/ui/Explosion.tsx

@@ -0,0 +1,57 @@
+import { motion } from "framer-motion";
+
+type ExplosionProps = {
+  colour1: string;
+  colour2: string;
+  // looks better with odd numbers
+  count: number;
+  // can optionally take offsets to adjust exact position
+  yOffset?: number;
+  xOffset?: number;
+};
+
+export function Explosion({
+  colour1,
+  colour2,
+  count,
+  yOffset = 0,
+  xOffset = 0,
+}: ExplosionProps) {
+  const particles = Array.from({ length: count });
+
+  return (
+    <div className="pointer-events-none absolute inset-0 z-0 flex items-center justify-center">
+      {particles.map((_, i) => {
+        const individualSize = Math.random() * 0.1 + 4;
+        const randomDisplacement = Math.random() * 10;
+
+        // for every particle return a particle with a different size
+        return (
+          <motion.div
+            key={i}
+            initial={{
+              x: xOffset,
+              y: yOffset,
+              opacity: 1,
+              scale: individualSize,
+            }}
+            animate={{
+              x: Math.cos(i + randomDisplacement) * 150 + xOffset,
+              y: Math.sin(i + randomDisplacement) * 150 + yOffset,
+              opacity: 0,
+              scale: 0,
+            }}
+            transition={{ duration: 0.6, ease: "easeOut" }}
+            className="absolute h-4 w-4 rounded-none"
+            style={{
+              backgroundColor: i % 2 === 0 ? colour1 : colour2,
+              boxShadow: `0 0 10px ${colour1}`,
+            }}
+          />
+        );
+      })}
+    </div>
+  );
+}
+
+export default Explosion;