Enhance design system with additional components and guidelines

.cursor/worktrees.json

@@ -0,0 +1,7 @@
+{
+  "setup-worktree": [
+    "# fnm use",
+    "# npm install",
+    "# cp $ROOT_WORKTREE_PATH/.env .env"
+  ]
+}

dev/plan.md

@@ -0,0 +1,125 @@
+# Portfolio Site Integration Plan
+
+## Phase 1: Foundation Setup
+
+### Tailwind Configuration
+
+Update `src/styles/global.css` to configure Tailwind v4 with the V7 design system tokens from `design.json`:
+
+- Brand colors (dark: #0B0D11, panel: #151921, accent: #FFB84C, cyan: #22D3EE)
+- Font families (Inter + Space Mono from Google Fonts)
+- Custom utilities (grid-overlay, text-massive, text-stroke, skill-tag, btn-primary, btn-ghost)
+- Scrollbar styling, reveal animations, cursor styles
+
+### Constants Update
+
+Update `src/consts.ts` with Nicholai's site metadata:
+
+- SITE_TITLE, SITE_DESCRIPTION, contact info, social links
+
+## Phase 2: Core Components
+
+### BaseHead.astro
+
+Modify to include:
+
+- Google Fonts preconnect/stylesheet (Inter, Space Mono)
+- Lucide icons CDN script
+- Remove old Atkinson font preloads
+
+### Layout Components (new files in `src/components/`)
+
+Extract from index.html:
+
+| Component | Purpose |
+
+|-----------|---------|
+
+| `GridOverlay.astro` | Fixed background grid + 12-column guide |
+
+| `Navigation.astro` | Fixed nav with logo, status badge, links, contact CTA |
+
+| `Footer.astro` | Replace existing - contact CTA, social links, copyright |
+
+| `CustomCursor.tsx` | React island for cursor dot + outline with mousemove tracking |
+
+### Section Components (new files in `src/components/sections/`)
+
+| Component | Purpose |
+
+|-----------|---------|
+
+| `Hero.astro` | Hero with title, subtitle, description, clock |
+
+| `Experience.astro` | Timeline with Biohazard VFX, Stinkfilms, Freelance |
+
+| `FeaturedProject.astro` | G-Star Raw Olympics full-width showcase |
+
+| `Skills.astro` | Technical arsenal 4-column grid |
+
+## Phase 3: Layouts
+
+### BaseLayout.astro (new)
+
+Create shared layout wrapping:
+
+- BaseHead, GridOverlay, Navigation, main slot, Footer, CustomCursor island
+- Body classes: `antialiased selection:bg-brand-accent selection:text-brand-dark`
+
+### BlogPost.astro
+
+Restyle to match V7 dark theme while keeping content structure.
+
+## Phase 4: Pages
+
+### index.astro
+
+Compose from section components:
+
+```astro
+<BaseLayout>
+  <Hero />
+  <Divider />
+  <Experience />
+  <Divider />
+  <FeaturedProject />
+  <Skills />
+</BaseLayout>
+```
+
+### blog/index.astro
+
+Restyle post grid with dark theme, card hover effects, accent colors.
+
+### blog/[...slug].astro
+
+Uses updated BlogPost layout (no changes needed to routing logic).
+
+### Delete about.astro
+
+Remove the about page entirely.
+
+## Phase 5: Assets
+
+- Add favicon matching brand identity to `public/`
+- Keep existing blog placeholder images
+- Fonts served via Google Fonts CDN (no local files needed)
+
+## Key Files to Modify
+
+- `src/styles/global.css` - Tailwind config + custom CSS
+- `src/consts.ts` - Site metadata
+- `src/components/BaseHead.astro` - Font/icon loading
+- `src/components/Footer.astro` - Complete rewrite
+- `src/layouts/BlogPost.astro` - Restyle for dark theme
+
+## Key Files to Create
+
+- `src/components/GridOverlay.astro`
+- `src/components/Navigation.astro`
+- `src/components/CustomCursor.tsx`
+- `src/components/sections/Hero.astro`
+- `src/components/sections/Experience.astro`
+- `src/components/sections/FeaturedProject.astro`
+- `src/components/sections/Skills.astro`
+- `src/layouts/BaseLayout.astro`