Issue 5 about us/committee page

client/src/hooks/useCommittee.ts

@@ -0,0 +1,28 @@
+import { useQuery } from "@tanstack/react-query";
+import { AxiosError } from "axios";
+
+import api from "@/lib/api";
+
+export type ApiMember = {
+  name: string;
+  profile_picture: string;
+  pronouns: string;
+  about: string;
+};
+
+export function useCommittee() {
+  return useQuery<ApiMember[], AxiosError>({
+    queryKey: ["role"],
+    queryFn: async () => {
+      const response = await api.get<ApiMember[]>("/about/");
+      console.log(response.data);
+      return response.data;
+    },
+    retry: (failureCount, error) => {
+      if (error?.response?.status === 404) {
+        return false;
+      }
+      return failureCount < 3;
+    },
+  });
+}

client/src/pages/about.tsx

@@ -0,0 +1,185 @@
+import Image from "next/image";
+
+import { ApiMember, useCommittee } from "@/hooks/useCommittee";
+
+export default function AboutPage() {
+  //const router = useRouter();
+  //const { id } = router.query;
+  // don't know if necessary
+
+  const { data: committee, isPending, error, isError } = useCommittee();
+
+  const topRow: ApiMember[] = [];
+  const bottomRow: ApiMember[] = [];
+  //lists that will be populated with member objects in the committee
+  const roleOrder = [
+    "President",
+    "Vice President",
+    "Secretary",
+    "Treasurer",
+    "Marketing",
+    "Events OCM",
+    "Projects OCM",
+    "Fresher Rep",
+  ];
+
+  const about = (
+    <>
+      <div className="mx-auto max-w-6xl space-y-20 px-6 py-16 md:px-20">
+        <section className="flex flex-col justify-between gap-12 md:flex-row md:gap-20">
+          <div className="flex-1">
+            <h1 className="mb-4 font-jersey10 text-5xl text-primary md:text-6xl">
+              About Us
+            </h1>
+            <div className="mb-6 w-full border-t" aria-hidden="true" />
+            <div className="space-y-4 font-sans text-base leading-relaxed text-white md:text-lg">
+              <p>
+                Description of the clubs aims, why it exists, its mission, etc
+                etc. Second paragraph here, a second paragraph would be pretty
+                cool. The more info the better yippee!!
+              </p>
+              <p>
+                Lorem ipsum dolor such and such I can&apos;t remember the rest.
+              </p>
+            </div>
+          </div>
+          <div className="relative aspect-[4/3] w-full flex-shrink-0 overflow-hidden rounded-2xl bg-light_2 md:w-96 lg:w-[32rem]">
+            <div className="flex h-full w-full items-center justify-center">
+              <Image
+                src="/landing_placeholder.png"
+                alt="/landing_placeholder.png"
+                width={128}
+                height={128}
+                className="h-[90%] w-[90%]"
+              />
+            </div>
+          </div>
+        </section>
+      </div>
+      {/* Our Committee Title Section - LIGHT - Full Width */}
+      <section className="w-full bg-card px-6 py-6 md:px-10 md:py-6">
+        <div className="mx-auto max-w-6xl">
+          <h2 className="font-jersey10 text-3xl text-light_2">Our Committee</h2>
+        </div>
+      </section>
+    </>
+  );
+
+  if (isPending) {
+    for (let i = 0; i < 8; i++) {
+      if (i < 4) {
+        topRow.push({
+          name: "Loading...",
+          pronouns: "",
+          profile_picture: "/landing_placeholder.png",
+          about: "",
+        });
+      } else {
+        bottomRow.push({
+          name: "Loading...",
+          pronouns: "",
+          profile_picture: "/landing_placeholder.png",
+          about: "",
+        });
+      }
+    }
+  } else if (isError) {
+    const errorMessage =
+      error?.response?.status === 404
+        ? "Committee Members not found."
+        : "Failed to load Committee Members.";
+
+    return (
+      <>
+        {about}
+        <main className="mx-auto min-h-screen max-w-6xl px-6 py-16 md:px-20">
+          <p className="text-red-500" role="alert">
+            {errorMessage}
+          </p>
+        </main>
+      </>
+    );
+  } else {
+    for (let i = 0; i < 8; i++) {
+      if (i < 4) {
+        topRow.push(committee[i]);
+      } else {
+        bottomRow.push(committee[i]);
+      }
+    }
+  }
+
+  return (
+    <main className="min-h-screen bg-background">
+      {about}
+      {/* Portraits Section - DARK - Full Width */}
+      <section className="w-full bg-background px-6 py-10 pt-16 md:px-10">
+        <div className="mx-auto max-w-6xl">
+          {/* Top row - 4 Presidents */}
+          <div className="flex flex-wrap justify-center gap-6 md:gap-10">
+            {topRow.map((member, idx) => (
+              <div
+                key={`top-${idx}`}
+                className="flex flex-col items-start gap-0"
+              >
+                <div className="relative flex h-[11.5625rem] w-[11.25rem] items-center justify-center bg-[url('/frame.png')] bg-contain bg-center bg-no-repeat">
+                  <Image
+                    src={
+                      member.profile_picture === null
+                        ? "/landing_placeholder.png"
+                        : member.profile_picture
+                    }
+                    alt="/landing_placeholder.png"
+                    width={106}
+                    height={106}
+                    className="mb-3 h-[6.625rem] w-[6.625rem]"
+                  />
+                </div>
+                <div className="w-[11.25rem] pl-3 text-left font-firaCode text-[0.5rem] leading-tight">
+                  <p className="inline-block bg-card px-2 py-1 text-white">
+                    {member.name} {member.pronouns}
+                  </p>
+                  <p className="inline-block bg-card px-2 py-1 text-primary">
+                    {roleOrder[idx]}
+                  </p>
+                </div>
+              </div>
+            ))}
+          </div>
+
+          {/* Bottom row - 4 other roles */}
+          <div className="mt-10 flex flex-wrap justify-center gap-6 md:gap-10">
+            {bottomRow.map((member, idx) => (
+              <div
+                key={`bottom-${idx}`}
+                className="flex flex-col items-start gap-0"
+              >
+                <div className="relative flex h-[11.5625rem] w-[11.25rem] items-center justify-center bg-[url('/frame.png')] bg-contain bg-center bg-no-repeat">
+                  <Image
+                    src={
+                      member.profile_picture === null
+                        ? "/landing_placeholder.png"
+                        : member.profile_picture
+                    }
+                    alt="/landing_placeholder.png"
+                    width={106}
+                    height={106}
+                    className="mb-3 h-[6.625rem] w-[6.625rem] pl-[0.03125rem]"
+                  />
+                </div>
+                <div className="w-[11.25rem] pl-3 text-left font-firaCode text-[0.5rem] leading-tight">
+                  <p className="inline-block bg-card px-2 py-1 text-white">
+                    {member.name} {member.pronouns}
+                  </p>
+                  <p className="inline-block bg-card px-2 py-1 text-primary">
+                    {roleOrder[4 + idx]}
+                  </p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+    </main>
+  );
+}

server/game_dev/admin.py

@@ -1,5 +1,5 @@
 from django.contrib import admin
-from .models import Member, Event
+from .models import Member, Event, Committee
 
 
 class MemberAdmin(admin.ModelAdmin):
@@ -10,5 +10,10 @@ class EventAdmin(admin.ModelAdmin):
     list_display = ("name", "date", "location", "publicationDate")
 
 
+class CommitteeAdmin(admin.ModelAdmin):
+    pass
+
+
 admin.site.register(Member, MemberAdmin)
 admin.site.register(Event, EventAdmin)
+admin.site.register(Committee, CommitteeAdmin)

server/game_dev/migrations/0005_committee.py

@@ -0,0 +1,20 @@
+# Generated by Django 5.1.15 on 2026-01-09 09:46
+
+import django.db.models.deletion
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('game_dev', '0004_alter_event_date'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='Committee',
+            fields=[
+                ('id', models.OneToOneField(on_delete=django.db.models.deletion.DO_NOTHING, primary_key=True, serialize=False, to='game_dev.member')),
+            ],
+        ),
+    ]

server/game_dev/migrations/0006_committee_role.py

@@ -0,0 +1,20 @@
+# Generated by Django 5.1.15 on 2026-01-09 09:59
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('game_dev', '0005_committee'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='committee',
+            name='role',
+            field=models.CharField(choices=[('P', 'President'), ('VP', 'Vice-President'), ('SEC', 'Secretary'),
+                                            ('TRE', 'Treasurer'), ('MARK', 'Marketing'), ('EV', 'Events OCM'),
+                                            ('PRO', 'Projects OCM'), ('FRE', 'Fresher Rep')], default='FRE', max_length=9),
+        ),
+    ]

server/game_dev/migrations/0007_alter_committee_id.py

@@ -0,0 +1,19 @@
+# Generated by Django 5.1.15 on 2026-01-21 07:59
+
+import django.db.models.deletion
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('game_dev', '0006_committee_role'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='committee',
+            name='id',
+            field=models.OneToOneField(on_delete=django.db.models.deletion.CASCADE, primary_key=True, serialize=False, to='game_dev.member'),
+        ),
+    ]

server/game_dev/migrations/0008_alter_committee_role.py

@@ -0,0 +1,20 @@
+# Generated by Django 5.1.15 on 2026-01-21 08:11
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('game_dev', '0007_alter_committee_id'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='committee',
+            name='role',
+            field=models.CharField(choices=[('P', 'President'), ('VP', 'Vice-President'), ('SEC', 'Secretary'),
+                                            ('TRE', 'Treasurer'), ('MARK', 'Marketing'), ('EV', 'Events OCM'),
+                                            ('PRO', 'Projects OCM'), ('FRE', 'Fresher Rep')], default='FRE', max_length=9, unique=True),
+        ),
+    ]

server/game_dev/migrations/0009_merge_20260129_2104.py

@@ -0,0 +1,14 @@
+# Generated by Django 5.1.15 on 2026-01-29 13:04
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('game_dev', '0005_alter_member_profile_picture'),
+        ('game_dev', '0008_alter_committee_role'),
+    ]
+
+    operations = [
+    ]

server/game_dev/models.py

@@ -22,3 +22,24 @@ class Event(models.Model):
 
     def __str__(self):
         return self.name
+
+
+class Committee(models.Model):
+    id = models.OneToOneField(Member, on_delete=models.CASCADE, primary_key=True)
+    roles = {
+        "P": "President",
+        "VP": "Vice-President",
+        "SEC": "Secretary",
+        "TRE": "Treasurer",
+        "MARK": "Marketing",
+        "EV": "Events OCM",
+        "PRO": "Projects OCM",
+        "FRE": "Fresher Rep"
+    }
+    role = models.CharField(max_length=9, choices=roles, default="FRE", unique=True)
+
+    def get_member(self):
+        return self.id
+
+    def __str__(self):
+        return self.id.name