Issue 10 member pages

client/src/components/main/MemberProfile.tsx

@@ -0,0 +1,94 @@
+"use client";
+
+import Image from "next/image";
+
+// unused atm, as the member isnt linked a project on the backend
+/* export type MemberProfileProject = {
+  id: string;
+  name: string;
+  description?: string;
+  href?: string;
+}; */
+
+export type MemberProfileData = {
+  name: string;
+  about: string;
+  pronouns?: string;
+  profile_picture?: string;
+};
+
+type MemberProfileProps = {
+  member: MemberProfileData;
+  //projects?: MemberProfileProject[];
+};
+
+function initialsFromName(name: string) {
+  return name
+    .trim()
+    .split(/\s+/)
+    .slice(0, 2)
+    .map((part) => part[0]?.toUpperCase())
+    .join("");
+}
+
+export function MemberProfile({ member }: MemberProfileProps) {
+  const initials = initialsFromName(member.name);
+
+  return (
+    <>
+      <div className="m-auto h-fit bg-card text-light_2">
+        <div className="mx-2 flex flex-wrap items-center justify-center gap-y-5 py-7 lg:mx-10">
+          <div className="grid grid-cols-1 grid-rows-1 items-center justify-items-center lg:mr-6">
+            <div className="absolute size-32 overflow-clip bg-accent text-center">
+              {member.profile_picture ? (
+                <Image
+                  src={member.profile_picture}
+                  alt={`${member.name} profile picture`}
+                  fill
+                  className="object-cover"
+                />
+              ) : (
+                <div className="flex h-full w-full items-center justify-center font-jersey10 text-5xl text-muted-foreground">
+                  {initials}
+                </div>
+              )}
+            </div>
+            <Image
+              src="/frame.svg"
+              alt="golden pixel art frame around profile picture"
+              width={176}
+              height={192}
+              className="z-0 h-48 w-44"
+            />
+          </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>
+            <p>{member.about}</p>
+          </div>
+        </div>
+      </div>
+      {/* Template for Projects section */}
+      <div className="m-auto min-h-80 w-11/12">
+        <h2 className="mt-7 text-center font-jersey10 text-5xl">Projects</h2>
+        <div className="m-auto my-5 flex flex-wrap justify-center gap-8">
+          {/* Div below is a single project card */}
+          <div className="w-fit rounded-md p-5">
+            <div className="mb-2 h-44 w-96 overflow-clip rounded-md p-5 text-neutral_1">
+              {/* Image and/or Link to Project */}
+            </div>
+            <p className="max-w-96 font-firaCode text-xl font-semibold">
+              {/* Project Title */}
+            </p>
+            <p className="line-clamp-1 max-w-96 font-firaCode text-[--light-3]">
+              {/* Project description */}
+            </p>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

client/src/hooks/useMember.ts

@@ -0,0 +1,22 @@
+import { useQuery } from "@tanstack/react-query";
+
+import api from "@/lib/api";
+
+type ApiMember = {
+  name: string;
+  about: string;
+  pronouns?: string;
+  profile_picture?: string;
+};
+
+// return api member, import id number from router, is not enabled if not a number type
+export const useMember = (id?: number) => {
+  return useQuery<ApiMember>({
+    queryKey: ["member", id],
+    queryFn: async () => {
+      const response = await api.get(`/members/${id}/`);
+      return response.data;
+    },
+    enabled: Number.isFinite(id),
+  });
+};

client/src/pages/members/[id].tsx

@@ -0,0 +1,40 @@
+import { useRouter } from "next/router";
+
+import { useMember } from "@/hooks/useMember";
+
+import { MemberProfile } from "../../components/main/MemberProfile";
+
+// hook assumes correct input, page sanitises to correct type
+function normaliseId(id: string | string[] | number | undefined) {
+  if (typeof id === "number" && Number.isFinite(id)) {
+    return id;
+  }
+
+  if (typeof id === "string") {
+    const parsed = Number(id);
+    return Number.isFinite(parsed) ? parsed : undefined;
+  }
+
+  return undefined;
+}
+
+export default function MemberPage() {
+  const router = useRouter();
+  const id = normaliseId(router.query.id);
+
+  const {
+    data: member,
+    isPending,
+    isError,
+  } = useMember(router.isReady ? id : undefined);
+
+  if (isPending) {
+    return null;
+  }
+
+  if (isError || !member) {
+    return <p>Member not found</p>;
+  }
+
+  return <MemberProfile member={member} />;
+}

client/src/styles/globals.css

@@ -16,6 +16,7 @@
 
     --light-1: hsl(0 0% 100%);
     --light-2: hsl(236.25, 96%, 90.2%);
+    --light-3: hsl(235, 96%, 80%);
     --light-alt: hsl(183 100% 79%);
     --logo-blue-1: hsl(236 62% 95%);
 

server/game_dev/migrations/0005_alter_member_profile_picture.py

@@ -0,0 +1,18 @@
+# Generated by Django 5.1.15 on 2026-01-18 15:01
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("game_dev", "0004_alter_event_date"),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name="member",
+            name="profile_picture",
+            field=models.ImageField(blank=True, null=True, upload_to="profiles/"),
+        ),
+    ]

server/game_dev/models.py

@@ -4,7 +4,7 @@
 class Member(models.Model):
     name = models.CharField(max_length=200)
     active = models.BooleanField(default=True)
-    profile_picture = models.ImageField(upload_to="profiles/", null=True)
+    profile_picture = models.ImageField(upload_to="profiles/", null=True, blank=True)
     about = models.CharField(max_length=256, blank=True)
     pronouns = models.CharField(max_length=20, blank=True)
 

server/game_dev/serializers.py

@@ -23,5 +23,5 @@ class Meta:
             "name",
             "profile_picture",
             "about",
-            "pronouns"
+            "pronouns",
         ]

server/game_dev/urls.py

@@ -1,7 +1,8 @@
 from django.urls import path
-from .views import EventListAPIView, EventDetailAPIView
+from .views import EventListAPIView, EventDetailAPIView, MemberAPIView
 
 urlpatterns = [
     path("events/", EventListAPIView.as_view(), name="events-list"),
     path("events/<int:id>/", EventDetailAPIView.as_view()),
+    path('members/<int:id>/', MemberAPIView.as_view())
 ]

server/game_dev/views.py

@@ -2,8 +2,8 @@
 
 # Create your views here.
 from rest_framework import generics
-from .models import Event
-from .serializers import EventSerializer
+from .models import Event, Member
+from .serializers import EventSerializer, MemberSerializer
 from django.utils import timezone
 from rest_framework.exceptions import ValidationError
 from rest_framework.pagination import PageNumberPagination
@@ -51,3 +51,11 @@ class EventDetailAPIView(generics.RetrieveAPIView):
 
     def get_queryset(self):
         return Event.objects.filter(id=self.kwargs["id"])
+
+
+class MemberAPIView(generics.RetrieveAPIView):
+    serializer_class = MemberSerializer
+    lookup_field = "id"
+
+    def get_queryset(self):
+        return Member.objects.filter(active=True)