feat: add references and volunteer community sections with detailed content

app/about/references/page.tsx

@@ -0,0 +1,5 @@
+import { ReferencesDetailContent } from "@/components/references-detail-content";
+
+export default function AboutReferencesPage() {
+  return <ReferencesDetailContent />;
+}

app/about/volunteer-community/page.tsx

@@ -0,0 +1,5 @@
+import { VolunteerCommunityContent } from "@/components/volunteer-community-content";
+
+export default function AboutVolunteerCommunityPage() {
+  return <VolunteerCommunityContent />;
+}

components/about-content.tsx

@@ -1,8 +1,10 @@
 "use client";
 
 import Image from "next/image";
-import { Card, Typography } from "poyraz-ui/atoms";
+import Link from "next/link";
+import { Badge, Card, Typography } from "poyraz-ui/atoms";
 import { Sheet, SheetContent, SheetTitle, SheetTrigger } from "poyraz-ui/molecules";
+import { BOOKMARKS } from "@/data/bookmarks";
 import { certificates } from "@/data/certificates";
 import { EDUCATION } from "@/data/education";
 import { EXPERIENCE } from "@/data/experience";
@@ -118,6 +120,78 @@ export function AboutContent() {
           </div>
         </div>
       </div>
+
+      <div className="grid gap-3 md:grid-cols-3">
+        <Link href="/about/references" className="block">
+          <Card className="h-full rounded-sm border-border p-4 transition-colors hover:border-zinc-700">
+            <Typography variant="large" className="text-base leading-tight">
+              References
+            </Typography>
+            <Typography variant="small" className="mt-1 text-muted-foreground">
+              Open the full reference list in a dedicated detail page.
+            </Typography>
+          </Card>
+        </Link>
+
+        <Link href="/about/volunteer-community" className="block">
+          <Card className="h-full rounded-sm border-border p-4 transition-colors hover:border-zinc-700">
+            <Typography variant="large" className="text-base leading-tight">
+              Volunteer & Community
+            </Typography>
+            <Typography variant="small" className="mt-1 text-muted-foreground">
+              Timeline and contribution details in a separate detail page.
+            </Typography>
+          </Card>
+        </Link>
+
+        <Sheet>
+          <SheetTrigger asChild>
+            <button
+              type="button"
+              className="cursor-pointer text-left"
+              aria-label="Open bookmarks"
+            >
+              <Card className="h-full rounded-sm border-border p-4 transition-colors hover:border-zinc-700">
+                <Typography variant="large" className="text-base leading-tight">
+                  Bookmark
+                </Typography>
+                <Typography variant="small" className="mt-1 text-muted-foreground">
+                  Quick access links in a sheet panel.
+                </Typography>
+              </Card>
+            </button>
+          </SheetTrigger>
+
+          <SheetContent side="right" className="w-full max-w-xl p-4">
+            <SheetTitle>Bookmarks</SheetTitle>
+            <div className="mt-4 grid max-h-[90dvh] gap-3 overflow-y-auto pr-1">
+              {BOOKMARKS.map((item) => (
+                <Card key={item.id} className="rounded-sm border-border p-3">
+                  <div className="flex flex-wrap items-center gap-2">
+                    <Typography variant="large" className="leading-tight">
+                      {item.title}
+                    </Typography>
+                    <Badge variant="outline" className="rounded-sm">
+                      {item.tag}
+                    </Badge>
+                  </div>
+                  <Typography variant="small" className="mt-1 text-muted-foreground">
+                    {item.description}
+                  </Typography>
+                  <Link
+                    href={item.href}
+                    target="_blank"
+                    rel="noreferrer"
+                    className="mt-2 inline-flex text-sm text-red-600 hover:underline"
+                  >
+                    {item.href.replace("https://", "")}
+                  </Link>
+                </Card>
+              ))}
+            </div>
+          </SheetContent>
+        </Sheet>
+      </div>
     </section>
   );
 }

components/reference-cards.tsx

@@ -0,0 +1,43 @@
+import Link from "next/link";
+import { TestimonialCard } from "poyraz-ui/molecules";
+import { REFERENCES } from "@/data/references";
+
+type ReferenceCardsProps = {
+  className?: string;
+};
+
+export function ReferenceCards({ className }: ReferenceCardsProps) {
+  return (
+    <div className={className}>
+      {REFERENCES.map((item) => {
+        const card = (
+          <TestimonialCard
+            quote={item.quote}
+            author={item.author}
+            role={item.role}
+            avatar={item.avatar}
+            rating={item.rating}
+            className="h-full w-70 shrink-0 rounded-sm"
+          />
+        );
+
+        if (!item.profileHref) {
+          return <div key={item.id}>{card}</div>;
+        }
+
+        return (
+          <Link
+            key={item.id}
+            href={item.profileHref}
+            target="_blank"
+            rel="noreferrer"
+            aria-label={`${item.author} LinkedIn profile`}
+            className="block"
+          >
+            {card}
+          </Link>
+        );
+      })}
+    </div>
+  );
+}

components/references-detail-content.tsx

@@ -0,0 +1,17 @@
+import Link from "next/link";
+import { ReferenceCards } from "@/components/reference-cards";
+
+export function ReferencesDetailContent() {
+  return (
+    <section className="flex h-full flex-col gap-4 overflow-y-auto">
+      <Link
+        href="/about"
+        className="inline-flex w-fit items-center rounded-sm border border-border px-3 py-1.5 text-sm text-muted-foreground transition-colors hover:text-foreground"
+      >
+        {"<- Back to about"}
+      </Link>
+
+      <ReferenceCards className="flex flex-wrap gap-3" />
+    </section>
+  );
+}

components/references-section.tsx

@@ -1,45 +1,12 @@
 "use client";
 
-import Link from "next/link";
+import { ReferenceCards } from "@/components/reference-cards";
-import { TestimonialCard } from "poyraz-ui/molecules";
-import { REFERENCES } from "@/data/references";
 
 export function ReferencesSection() {
   return (
     <section className="space-y-8 md:pt-12">
-
       <div className="relative overflow-hidden rounded-sm">
-        <div className="flex w-max gap-3">
+        <ReferenceCards className="flex w-max gap-3" />
-          {REFERENCES.map((item) => {
-            const card = (
-              <TestimonialCard
-                quote={item.quote}
-                author={item.author}
-                role={item.role}
-                avatar={item.avatar}
-                rating={item.rating}
-                className="h-full w-70 shrink-0 rounded-sm"
-              />
-            );
-
-            if (!item.profileHref) {
-              return <div key={item.id}>{card}</div>;
-            }
-
-            return (
-              <Link
-                key={item.id}
-                href={item.profileHref}
-                target="_blank"
-                rel="noreferrer"
-                aria-label={`${item.author} LinkedIn profile`}
-                className="block"
-              >
-                {card}
-              </Link>
-            );
-          })}
-        </div>
         <div
           aria-hidden="true"
           className="pointer-events-none opacity-95 absolute top-0 right-0 h-full w-48 bg-linear-to-l from-white via-white/80 to-transparent"

components/volunteer-community-content.tsx

@@ -0,0 +1,48 @@
+import Link from "next/link";
+import { Card, Typography } from "poyraz-ui/atoms";
+import { VOLUNTEER_COMMUNITY_ITEMS } from "@/data/volunteer-community";
+
+export function VolunteerCommunityContent() {
+  return (
+    <section className="flex h-full flex-col gap-4 overflow-y-auto">
+      <Link
+        href="/about"
+        className="inline-flex w-fit items-center rounded-sm border border-border px-3 py-1.5 text-sm text-muted-foreground transition-colors hover:text-foreground"
+      >
+        {"<- Back to about"}
+      </Link>
+
+      <div className="grid gap-3">
+        {VOLUNTEER_COMMUNITY_ITEMS.map((item) => (
+          <Card key={item.id} className="rounded-sm border-border p-4">
+            <Typography variant="large" className="text-base leading-tight">
+              {item.title}
+            </Typography>
+
+            <Typography variant="small" className="mt-2 text-muted-foreground">
+              <span className="font-semibold text-foreground">Timeline:</span> {item.timeline}
+            </Typography>
+
+            {item.link ? (
+              <Typography variant="small" className="mt-1 text-muted-foreground">
+                <span className="font-semibold text-foreground">Link:</span>{" "}
+                <Link
+                  href={item.link}
+                  target="_blank"
+                  rel="noreferrer"
+                  className="text-red-600 hover:underline"
+                >
+                  {item.link.replace("https://", "")}
+                </Link>
+              </Typography>
+            ) : null}
+
+            <Typography variant="small" className="mt-1 text-muted-foreground">
+              <span className="font-semibold text-foreground">Focus:</span> {item.focus}
+            </Typography>
+          </Card>
+        ))}
+      </div>
+    </section>
+  );
+}

data/bookmarks.ts

@@ -0,0 +1,52 @@
+export type BookmarkItem = {
+  id: string;
+  title: string;
+  href: string;
+  description: string;
+  tag: string;
+};
+
+export const BOOKMARKS: BookmarkItem[] = [
+  {
+    id: "bookmark-poyraz-ui",
+    title: "Poyraz UI",
+    href: "https://ui.poyrazavsever.com",
+    description: "Component docs and examples for the design system used in this portfolio.",
+    tag: "UI Kit",
+  },
+  {
+    id: "bookmark-reactive-switcher",
+    title: "Reactive Switcher",
+    href: "https://reactive-switcher.vercel.app",
+    description: "Theme switching package docs for scalable light and dark mode setup.",
+    tag: "Theming",
+  },
+  {
+    id: "bookmark-next-docs",
+    title: "Next.js Docs",
+    href: "https://nextjs.org/docs",
+    description: "Official App Router and rendering strategy reference.",
+    tag: "Framework",
+  },
+  {
+    id: "bookmark-tailwind-docs",
+    title: "Tailwind CSS Docs",
+    href: "https://tailwindcss.com/docs",
+    description: "Utility classes and token customization reference.",
+    tag: "CSS",
+  },
+  {
+    id: "bookmark-vercel",
+    title: "Vercel",
+    href: "https://vercel.com/docs",
+    description: "Deployment and performance optimization references.",
+    tag: "Deploy",
+  },
+  {
+    id: "bookmark-github",
+    title: "GitHub",
+    href: "https://github.com/poyrazavsever",
+    description: "Open-source repositories and shipped experiments.",
+    tag: "Profile",
+  },
+];

data/volunteer-community.ts

@@ -0,0 +1,55 @@
+export type VolunteerCommunityItem = {
+  id: string;
+  title: string;
+  timeline: string;
+  link?: string;
+  focus: string;
+};
+
+export const VOLUNTEER_COMMUNITY_ITEMS: VolunteerCommunityItem[] = [
+  {
+    id: "youtube",
+    title: "YouTube",
+    timeline: "2025 - Present",
+    link: "https://youtube.com/@poyrazavsever",
+    focus:
+      "Publishing creator economy breakdowns and tutorials to help new devs ship their first projects.",
+  },
+  {
+    id: "instagram",
+    title: "Instagram",
+    timeline: "2025 - Present",
+    link: "https://instagram.com/poyrazavsever",
+    focus:
+      "Sharing behind-the-scenes workflow notes and short-form content tips for junior creatives.",
+  },
+  {
+    id: "ostim-debate-club",
+    title: "Ostim Debate Club",
+    timeline: "2024 - Present",
+    link: "https://ostimmunazara.com",
+    focus: "Moderating weekly debate sessions and keeping the website content updated.",
+  },
+  {
+    id: "huawei-student-developers",
+    title: "Huawei Student Developers",
+    timeline: "2025 - 2026",
+    link: "https://hsdostim.tech",
+    focus:
+      "Organizing campus events around Huawei's developer tooling and mentoring first-time contributors.",
+  },
+  {
+    id: "google-developer-student-club",
+    title: "Google Developer Student Club",
+    timeline: "2025 - 2025",
+    focus:
+      "Served as an event facilitator for one term, covering Flutter basics and Firebase quickstarts.",
+  },
+  {
+    id: "ottoqa-technology-team",
+    title: "Ottoqa Technology Team",
+    timeline: "2024 - Present",
+    focus:
+      "Supporting robotics and embedded systems experiments with documentation and prototype reviews.",
+  },
+];