kayjaydee
09cfc0aaf3
- useSetLocale → destructured setLocale from useI18n() - addSeoAttributes → seo option for useLocaleHead() - process.env → import.meta.env for Nuxt compatibility - langDir: 'locales/' → 'app/locales/' (Nuxt 4 resolves from project root) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
75 lines
4.2 KiB
Markdown
75 lines
4.2 KiB
Markdown
# Roadmap: Portfolio Killian Dalcin — Nuxt 4 Migration
|
|
|
|
## Overview
|
|
|
|
Three phases following the strict build order from research: first lay the Nuxt 4 project skeleton with all modules configured and data migrated, then implement the SSR-critical cross-cutting concerns (i18n, theme, SEO, header/footer), and finally build all pages and ship to production via Docker. Every page is crawlable by search engines when Phase 3 completes.
|
|
|
|
## Phases
|
|
|
|
**Phase Numbering:**
|
|
- Integer phases (1, 2, 3): Planned milestone work
|
|
- Decimal phases (2.1, 2.2): Urgent insertions (marked with INSERTED)
|
|
|
|
Decimal phases appear between their surrounding integers in numeric order.
|
|
|
|
- [x] **Phase 1: Foundation** - Nuxt 4 project scaffold, all modules configured, static data migrated, composables ported
|
|
- [ ] **Phase 2: SSR Shell** - i18n FR/EN, dark/light theme, SEO per route, header + footer layout
|
|
- [ ] **Phase 3: Pages & Ship** - All 8 pages, interactive components, EmailJS plugin, GA4, Dockerfile
|
|
|
|
## Phase Details
|
|
|
|
### Phase 1: Foundation
|
|
**Goal**: The Nuxt 4 project runs locally with all modules installed, data in `data/`, composables wired, and TypeScript strict mode passing
|
|
**Depends on**: Nothing (first phase)
|
|
**Requirements**: SSR-01, SSR-02, SSR-03, DATA-01, DATA-02, DATA-03, DATA-04, DATA-05, INFRA-02, INFRA-03
|
|
**Success Criteria** (what must be TRUE):
|
|
1. `nuxt dev` starts without errors and serves a blank app at `localhost:3000`
|
|
2. All static data files exist under `data/` and are importable with TypeScript strict — no `any` types
|
|
3. `useProjects()` composable returns typed project list and supports filtering by category and search
|
|
4. `npx nuxi typecheck` and `npx eslint .` exit with 0 errors
|
|
**Plans**: 2 plans
|
|
Plans:
|
|
- [x] 01-01-PLAN.md — Scaffold Nuxt 4, modules, TypeScript strict, interfaces
|
|
- [x] 01-02-PLAN.md — Migration donnees statiques + useProjects()
|
|
|
|
### Phase 2: SSR Shell
|
|
**Goal**: Every route renders the correct language, theme, and SEO metadata on the server — confirmed by `curl` with no JavaScript
|
|
**Depends on**: Phase 1
|
|
**Requirements**: I18N-01, I18N-02, I18N-03, I18N-04, I18N-05, THEME-01, THEME-02, THEME-03, SEO-01, SEO-02, SEO-03, SEO-04, COMP-05, COMP-06
|
|
**Success Criteria** (what must be TRUE):
|
|
1. `curl http://localhost:3000` returns French HTML; `curl http://localhost:3000/en/` returns English HTML — no JS required
|
|
2. Switching language via the header dropdown persists across page reload (cookie, no FOUC)
|
|
3. Toggling dark/light mode in the header persists across page reload with no flash on cold load
|
|
4. `curl http://localhost:3000` response includes `<title>`, `og:title`, `og:description`, and JSON-LD script tag
|
|
5. `http://localhost:3000/sitemap.xml` returns a valid XML sitemap with `hreflang` alternates for FR and EN URLs
|
|
**Plans**: 3 plans
|
|
Plans:
|
|
- [x] 02-01-PLAN.md — Design system, color-mode, i18n translations, sitemap config
|
|
- [x] 02-02-PLAN.md — Header, footer, default layout with nav and toggles
|
|
- [x] 02-03-PLAN.md — Per-route SEO metadata and JSON-LD structured data
|
|
**UI hint**: yes
|
|
|
|
### Phase 3: Pages & Ship
|
|
**Goal**: All portfolio pages are live, forms work, analytics fire in production, and the Docker image builds and runs
|
|
**Depends on**: Phase 2
|
|
**Requirements**: PAGE-01, PAGE-02, PAGE-03, PAGE-04, PAGE-05, PAGE-06, PAGE-07, PAGE-08, COMP-01, COMP-02, COMP-03, COMP-04, INFRA-01, INFRA-04
|
|
**Success Criteria** (what must be TRUE):
|
|
1. All 8 routes (`/`, `/projects`, `/project/[id]`, `/about`, `/contact`, `/fiverr`, `/formation`, 404) return complete HTML when fetched with `curl`
|
|
2. Clicking an image in a project detail page opens a modal carousel with keyboard navigation (arrow keys + Escape closes)
|
|
3. Submitting the contact form with valid data shows a success toast; EmailJS delivers the email
|
|
4. `docker build` completes and `docker run` serves the SSR app on port 3000
|
|
5. Google Analytics 4 events appear in GA4 DebugView when browsing in production mode
|
|
**Plans**: TBD
|
|
**UI hint**: yes
|
|
|
|
## Progress
|
|
|
|
**Execution Order:**
|
|
Phases execute in numeric order: 1 → 2 → 3
|
|
|
|
| Phase | Plans Complete | Status | Completed |
|
|
|-------|----------------|--------|-----------|
|
|
| 1. Foundation | 2/2 | Complete | 2026-04-08 |
|
|
| 2. SSR Shell | 3/3 | Executed | 2026-04-08 |
|
|
| 3. Pages & Ship | 0/TBD | Not started | - |
|