Nicholai/nicholai-work-2026
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
nicholai-work-2026/dev/plan.md

3.1 KiB
Raw Permalink Blame History

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:

<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