126 lines
3.1 KiB
Markdown
126 lines
3.1 KiB
Markdown
# 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`
|