# 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`