feat: implement portfolio home page with split layout

app/page.tsx

@@ -1,51 +1,37 @@
-import Image from 'next/image';
+import type { SectionRecord } from '$entities/Section';
+import { getCollection } from '$shared/api';
+import type { NavItem } from '$widgets/Navigation';
+import { MobileNav, SidebarNav } from '$widgets/Navigation';
+import { SectionFactory } from '$widgets/SectionFactory';
+import { SectionsAccordion } from '$widgets/SectionsAccordion';
+
+/**
+ * Portfolio home page.
+ *
+ * Fetches all sections at build time (SSG). Renders a fixed sidebar with
+ * section navigation and a scrollable main column with accordion sections.
+ */
+export default async function Home() {
+  const { items: sections } = await getCollection<SectionRecord>('sections', {
+    sort: 'order',
+  });
+
+  const navItems: NavItem[] = sections.map((s) => ({
+    id: s.slug,
+    label: s.title,
+    number: s.number,
+  }));
 
-export default function Home() {
   return (
-    <div className="flex flex-col flex-1 items-center justify-center bg-zinc-50 font-sans dark:bg-black">
+    <div className="min-h-screen lg:flex">
-      <main className="flex flex-1 w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
+      <SidebarNav items={navItems} />
-        <Image className="dark:invert" src="/next.svg" alt="Next.js logo" width={100} height={20} priority />
+      <main className="flex-1 lg:ml-[33.333%] px-8 py-12 lg:py-16 lg:px-16">
-        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
+        <MobileNav items={navItems} />
-          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
+        <SectionsAccordion sections={sections}>
-            To get started, edit the page.tsx file.
+          {sections.map((s) => (
-          </h1>
+            <SectionFactory key={s.slug} slug={s.slug} />
-          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
+          ))}
-            Looking for a starting point or more instructions? Head over to{' '}
+        </SectionsAccordion>
-            <a
-              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Templates
-            </a>{' '}
-            or the{' '}
-            <a
-              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Learning
-            </a>{' '}
-            center.
-          </p>
-        </div>
-        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
-          <a
-            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image className="dark:invert" src="/vercel.svg" alt="Vercel logomark" width={16} height={16} />
-            Deploy Now
-          </a>
-          <a
-            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Documentation
-          </a>
-        </div>
       </main>
     </div>
   );

src/entities/project/ui/ProjectMetadata.test.tsx

@@ -50,19 +50,19 @@ describe('ProjectMetadata', () => {
 
     it('year section has no brutal-border-top (first section)', () => {
       const { container } = render(<ProjectMetadata {...DEFAULT_PROPS} />);
-      const sections = container.firstChild?.childNodes;
+      const sections = container.firstChild?.childNodes as NodeListOf<Element>;
       expect(sections[0]).not.toHaveClass('brutal-border-top');
     });
 
     it('role section has brutal-border-top and pt-6', () => {
       const { container } = render(<ProjectMetadata {...DEFAULT_PROPS} />);
-      const sections = container.firstChild?.childNodes;
+      const sections = container.firstChild?.childNodes as NodeListOf<Element>;
       expect(sections[1]).toHaveClass('brutal-border-top', 'pt-6');
     });
 
     it('stack section has brutal-border-top and pt-6', () => {
       const { container } = render(<ProjectMetadata {...DEFAULT_PROPS} />);
-      const sections = container.firstChild?.childNodes;
+      const sections = container.firstChild?.childNodes as NodeListOf<Element>;
       expect(sections[2]).toHaveClass('brutal-border-top', 'pt-6');
     });
 

src/shared/lib/utils/groupByKey/groupByKey.test.ts

@@ -22,7 +22,7 @@ describe('groupByKey', () => {
         { category: 'A', order: 1 },
         { category: 'A', order: 2 },
       ];
-      expect(groupByKey(items, 'category')['A']).toEqual([
+      expect(groupByKey(items, 'category').A).toEqual([
         { category: 'A', order: 1 },
         { category: 'A', order: 2 },
       ]);
@@ -41,7 +41,7 @@ describe('groupByKey', () => {
       ];
       const result = groupByKey(items, 'type');
       expect(Object.keys(result)).toHaveLength(1);
-      expect(result['X']).toHaveLength(2);
+      expect(result.X).toHaveLength(2);
     });
 
     it('handles single item', () => {