diff --git a/.gitignore b/.gitignore
index 8ee54e8..799cd78 100644
--- a/.gitignore
+++ b/.gitignore
@@ -28,3 +28,4 @@ coverage
 *.sw?
 
 *.tsbuildinfo
+.claude
\ No newline at end of file
diff --git a/.planning/codebase/ARCHITECTURE.md b/.planning/codebase/ARCHITECTURE.md
new file mode 100644
index 0000000..fa6916e
--- /dev/null
+++ b/.planning/codebase/ARCHITECTURE.md
@@ -0,0 +1,197 @@
+# Architecture
+
+**Analysis Date:** 2026-04-07
+
+## Pattern Overview
+
+**Overall:** Vue 3 SPA (Single Page Application) with component-based architecture and SSR-friendly design patterns
+
+**Key Characteristics:**
+- Client-side routing with lazy-loaded views for performance optimization
+- Composition API-based composables for shared logic and state management
+- Global state managed via Pinia stores
+- Multi-language support with vue-i18n
+- Theme switching with localStorage persistence
+- SEO-optimized with dynamic meta tags and structured data
+- Google Analytics and GTM integration for tracking
+
+## Layers
+
+**Presentation Layer (Components):**
+- Purpose: Render UI and handle user interactions
+- Location: `src/components/`
+- Contains: Vue Single File Components organized by domain (layout, sections, shared, testimonials, icons)
+- Depends on: Composables for data access and side effects, Router for navigation
+- Used by: Views and other components
+
+**View Layer (Pages):**
+- Purpose: Page-level component assembly and routing targets
+- Location: `src/views/`
+- Contains: Full page components (HomePage, ProjectsPage, ContactPage, AboutPage, FiverrPage, FormationPage, ProjectDetailPage)
+- Depends on: Composables (useSeo, useI18n, useProjects), components, data stores
+- Used by: Router for navigation
+
+**Business Logic Layer (Composables):**
+- Purpose: Encapsulate reusable logic, data fetching, and side effects
+- Location: `src/composables/`
+- Contains: Vue composables for projects, SEO, i18n, themes, galleries, date formatting, assets, site config
+- Depends on: Types, stores, external libraries (vue-router, vue-i18n)
+- Used by: Components and views
+
+**Data/State Layer (Stores & Data):**
+- Purpose: Global state and static data management
+- Location: `src/stores/`, `src/data/`
+- Contains: Pinia stores, static project data, testimonials, tech stack, FAQs
+- Depends on: Types, composables (useI18n for localized data)
+- Used by: Composables and components
+
+**Configuration Layer:**
+- Purpose: Application-wide settings and configuration
+- Location: `src/config/`, `src/router/`, `src/i18n/`
+- Contains: Site configuration, router setup, i18n initialization, locale messages
+- Depends on: Types, data
+- Used by: Main entry point and throughout app
+
+**Type Definitions:**
+- Purpose: TypeScript interfaces and types
+- Location: `src/types/index.ts`
+- Contains: Project, Technology, TechStack, SocialLink, ContactInfo, FiverrService, SiteConfig interfaces
+
+## Data Flow
+
+**1. Initial Page Load:**
+1. `index.html` loads with embedded Google Analytics and Google AdSense scripts
+2. `src/main.ts` initializes Vue app, Pinia store, router, and i18n
+3. `src/App.vue` applies theme from localStorage and renders AppHeader + RouterView + AppFooter
+4. Router initializes and loads HomePage or requested route
+5. `useTheme()` applies saved theme class to document
+6. `useI18n()` loads saved locale from localStorage
+
+**2. Route Navigation:**
+1. User clicks link or navigates directly
+2. Router's `beforeEach` hook updates document title and meta description from route.meta
+3. Router's `afterEach` hook triggers scroll to top and Google Analytics page view tracking
+4. Target view component mounts and runs `useSeo()` for SEO metadata
+5. View renders child components with fetched data
+6. Components subscribe to composables for reactive data
+
+**3. Data Access Pattern (Example: Projects):**
+1. Component imports `useProjects()` composable
+2. Composable accesses base project data from `src/data/` or static store
+3. Composable uses `useI18n()` to localize strings
+4. Component receives computed reactive `projects` array
+5. Component renders with v-for or passes data to child components
+
+**4. Theme Switching:**
+1. `ThemeToggle` component toggles `isDark` ref in `useTheme()`
+2. Watch handler applies class to document.documentElement
+3. Watch handler saves to localStorage
+4. Browser CSS respects `dark` class on document
+
+**5. Language Switching:**
+1. `LanguageSwitcher` component calls `switchLocale()` from `useI18n()`
+2. vue-i18n locale updates and all `{{ t() }}` expressions re-evaluate
+3. New locale saved to localStorage
+4. Computed properties like `homeFAQs` in HomePage.vue re-evaluate with new translations
+
+**State Management:**
+- **Global:** Pinia stores (currently minimal - `useCounterStore` exists but unused)
+- **Composable State:** Reactive refs in composables (theme, locale, gallery state)
+- **Component State:** Local reactive refs for UI state (menu toggle, form inputs)
+- **Persistence:** localStorage for theme and locale preferences
+- **Server-Side Data:** Static JSON-like data in `src/data/` files, not fetched from API
+
+## Key Abstractions
+
+**useI18n() Composable:**
+- Purpose: Unified i18n access with convenience methods
+- Examples: `src/composables/useI18n.ts`
+- Pattern: Wraps vue-i18n's `useI18n()`, adds locale switching and computed locale state
+- Usage: Available in all components via injection
+
+**useSeo() Composable:**
+- Purpose: Dynamic SEO tag management for SPA
+- Examples: `src/composables/useSeo.ts`
+- Pattern: Lifecycle hooks to create/remove meta tags on mount/unmount, prevents tag duplication
+- Usage: Called in view components with options object for title, description, OG tags, structured data
+
+**useProjects() Composable:**
+- Purpose: Project data access with localization
+- Examples: `src/composables/useProjects.ts`
+- Pattern: Base data stored separately, computed properties merge translations on read
+- Usage: Returns computed `projects` array that updates when language changes
+
+**useTheme() Composable:**
+- Purpose: Centralized theme state and persistence
+- Examples: `src/composables/useTheme.ts`
+- Pattern: Reactive boolean with computed getter, watch for persistence, DOM manipulation
+- Usage: Injected globally in App.vue, consumed by ThemeToggle component
+
+**TechStack Interface:**
+- Purpose: Typed structure for technology categories
+- Examples: `src/types/index.ts`
+- Pattern: Categorized array structure (programming, front, database, devtools, operating_systems, socials)
+- Usage: Imported in `src/data/techstack.ts` and AboutPage.vue
+
+**SiteConfig:**
+- Purpose: Single source of truth for site-wide settings
+- Examples: `src/config/site.ts`
+- Pattern: Exported constant object with typed structure, includes contact info, social links, SEO config
+- Usage: Imported where needed for links, contact info, performance settings
+
+## Entry Points
+
+**HTML Entry Point:**
+- Location: `index.html`
+- Triggers: Browser page load
+- Responsibilities: Define DOM root (`#app`), load analytics/ads scripts, include meta tags, defer main.ts loading
+
+**Application Entry Point:**
+- Location: `src/main.ts`
+- Triggers: After HTML DOM ready
+- Responsibilities: Create Vue app, install plugins (Pinia, Router, i18n), mount to #app
+
+**Router Entry Point:**
+- Location: `src/router/index.ts`
+- Triggers: App.use(router) in main.ts
+- Responsibilities: Define route table, implement beforeEach/afterEach hooks for SEO and analytics
+
+**Root Component:**
+- Location: `src/App.vue`
+- Triggers: After Vue app mounts
+- Responsibilities: Initialize theme, render layout structure (header + router-view + footer), handle route-change scroll behavior
+
+**View Components:**
+- Location: `src/views/*.vue`
+- Triggers: Router navigation to matching path
+- Responsibilities: Page-specific SEO setup via `useSeo()`, compose sections and content, manage page-level state
+
+## Error Handling
+
+**Strategy:** Graceful degradation with fallback content; no explicit error boundaries detected
+
+**Patterns:**
+- Lazy-loaded routes with no 404 component (TODO comment in router) - currently redirects to HomePage
+- SEO composable safely creates/finds meta elements before updating
+- Theme fallback to 'dark' if localStorage empty
+- Locale fallback to 'en' if not in localStorage
+- Gallery modal (GalleryModal.vue) handles missing images gracefully
+- Contact form likely has validation but not visible in read scope
+
+## Cross-Cutting Concerns
+
+**Logging:** Console-based or via external services - no custom logger detected; development uses Vue DevTools plugin
+
+**Validation:** Form validation in components (ContactPage uses validation likely); no centralized validation layer
+
+**Authentication:** No built-in auth system - portfolio is public facing; new auth stores/views added (LoginView, RegisterView, VerifyEmailView, DashboardView, ForgotPasswordView, guards.ts) but not integrated into main router
+
+**SEO:** Centralized via `useSeo()` composable and router hooks; dynamic meta tags, Open Graph, Twitter cards, structured data; Google Analytics via gtag in router afterEach; Umami analytics via deferred script tag in index.html
+
+**Performance:** Code splitting via lazy routes, vendor chunk separation in vite.config.ts, CSS code splitting enabled, Terser minification, webp image support configured, lazy image loading configurable in siteConfig
+
+**Accessibility:** ARIA labels on interactive elements (AppHeader navigation, buttons); semantic HTML (header, nav, main, section roles); focus styles defined in App.vue
+
+---
+
+*Architecture analysis: 2026-04-07*
diff --git a/.planning/codebase/CONCERNS.md b/.planning/codebase/CONCERNS.md
new file mode 100644
index 0000000..a4dbf87
--- /dev/null
+++ b/.planning/codebase/CONCERNS.md
@@ -0,0 +1,212 @@
+# Codebase Concerns
+
+**Analysis Date:** 2026-04-07
+
+## Tech Debt
+
+**Missing 404 Page Implementation:**
+- Issue: 404 catch-all route currently redirects to HomePage instead of a dedicated 404 page
+- Files: `src/router/index.ts` (line 51: TODO comment)
+- Impact: Users encountering invalid routes see the homepage instead of a proper error page, creating confusion and poor UX. SEO also treats all invalid URLs as the homepage.
+- Fix approach: Create a new `NotFoundPage.vue` component in `src/views/` with proper 404 messaging, then update the route in `src/router/index.ts` to point to this component.
+
+**Hardcoded GA Tracking ID:**
+- Issue: Google Analytics tracking ID `G-CDVVNFY6MV` is hardcoded in multiple places
+- Files: `index.html` (line 9), `src/router/index.ts` (line 109)
+- Impact: Cannot change analytics without code updates. Difficult to manage different GA IDs for development vs production environments.
+- Fix approach: Move tracking ID to environment variables (`.env`), access via `import.meta.env.VITE_GA_ID`.
+
+**Hardcoded Site URL and Analytics:**
+- Issue: URLs and site identifiers hardcoded throughout the codebase
+- Files: `src/composables/useSeo.ts` (lines 103, 113, 143, 149), `src/config/site.ts` (line 69), `src/router/index.ts` (line 109)
+- Impact: Difficult to deploy to different environments (staging vs production). Requires code changes for different domains.
+- Fix approach: Move to environment configuration. Create environment-based config: `VITE_SITE_URL`, `VITE_SITE_DOMAIN`, etc.
+
+**External Image Asset Dependency on Placeholder Service:**
+- Issue: Missing images fallback to external placeholder.com service without reliability guarantee
+- Files: `src/composables/useAssets.ts` (lines 18, 42)
+- Impact: If placeholder.com goes down or is rate-limited, missing images break visually. External dependency increases load time.
+- Fix approach: Use local SVG or base64-encoded placeholder image instead of external URL.
+
+## Known Bugs
+
+**Scroll Position Duplication:**
+- Symptoms: Multiple scroll handlers (in router and App.vue) could cause double-scrolling or jank
+- Files: `src/App.vue` (lines 14-18), `src/router/index.ts` (lines 62-82, 118-125)
+- Trigger: Navigation between routes
+- Workaround: Currently works, but behavior is fragile due to redundancy
+
+**FormationPage Billing Toggle State Issue:**
+- Symptoms: Billing toggle (monthly/annual) uses `isAnnual` state but HTML shows `billingType` variable
+- Files: `src/views/FormationPage.vue` (lines 12-20, 41)
+- Trigger: When switching between monthly and annual billing
+- Workaround: Component probably has missing reactive computed for `billingType`
+
+## Security Considerations
+
+**v-html Usage in FAQ Component:**
+- Risk: XSS vulnerability if FAQ answers contain user-generated content or external data
+- Files: `src/components/ServiceFAQ.vue` (line 22: `<p v-html="faq.answer"></p>`)
+- Current mitigation: FAQ content is hardcoded in component props (trusted source), but pattern is risky if content source changes
+- Recommendations: Replace with v-text or plain text content. If HTML is needed, use a sanitization library like `DOMPurify`.
+
+**Personal Information Exposed in Configuration:**
+- Risk: Email, phone number, and social profile IDs hardcoded in public config
+- Files: `src/config/site.ts` (lines 71-100), `index.html` (lines 88, 239-240)
+- Current mitigation: This is intentional (portfolio/contact site), but increases spam/scraping risk
+- Recommendations: Consider using form submission instead of direct email/phone links on sensitive pages. Monitor contact form for abuse.
+
+**Hardcoded Analytics and AdSense IDs:**
+- Risk: Analytics and AdSense IDs in HTML source reveal account information
+- Files: `index.html` (lines 9, 19)
+- Current mitigation: None - IDs are public by design (Google Analytics is meant to be public)
+- Recommendations: Ensure AdSense account is properly secured with password/2FA. Monitor for unauthorized modifications.
+
+**Discord User ID Exposed:**
+- Risk: Discord user ID `370940770225618954` is hardcoded and publicly visible
+- Files: `src/config/site.ts` (line 92)
+- Current mitigation: Discord doesn't allow impersonation via ID alone, but enables targeted attacks
+- Recommendations: Keep Discord contact via link only, without exposing raw user ID. Use Discord username instead.
+
+## Performance Bottlenecks
+
+**Eager Image Loading with import.meta.glob:**
+- Problem: All images under `src/assets/images/**` are eagerly loaded into memory at startup
+- Files: `src/composables/useAssets.ts` (line 6: `eager: true`)
+- Cause: `eager: true` loads all matching modules immediately instead of lazy-loading on-demand
+- Improvement path: Change to lazy loading and implement on-demand imports, or at minimum separate critical images from lazy ones.
+
+**External Script Dependencies Block Rendering:**
+- Problem: Google Analytics, Google AdSense, and Umami scripts are loaded synchronously
+- Files: `index.html` (lines 9, 19, 239-240)
+- Cause: Multiple external scripts without proper `async` loading strategy
+- Improvement path: Ensure all external scripts use `async` or `defer` attributes. Currently Umami and GTM use `defer` (good), but ensure they don't block critical rendering path.
+
+**No Lazy Loading on Images:**
+- Problem: No lazy-loading attributes on images, causing initial page load to fetch all images
+- Files: Multiple components (`src/components/layout/AppFooter.vue` line 35, `src/components/layout/AppHeader.vue` line 33)
+- Cause: `loading="eager"` and `loading="lazy"` not used strategically
+- Improvement path: Set `loading="lazy"` on all below-fold images. Keep only above-fold images with `loading="eager"`.
+
+## Fragile Areas
+
+**GalleryModal Event Listener Management:**
+- Files: `src/components/GalleryModal.vue` (lines 44-50)
+- Why fragile: Global document keydown listener added/removed on mount/unmount. If component unmounts unexpectedly, listener could remain attached or fail to attach.
+- Safe modification: Add try-catch around removeEventListener. Consider using a ref-based approach or delegated events.
+- Test coverage: No test coverage visible for keyboard navigation. Recommend adding unit tests for keyboard shortcuts.
+
+**Image URL Resolution Fallback Chain:**
+- Files: `src/composables/useAssets.ts` (lines 13-44)
+- Why fragile: Multiple fallback layers (module lookup → URL construction → placeholder) make debugging hard. If one fallback path fails, error is silently logged.
+- Safe modification: Add explicit logging for each fallback step. Document expected path formats clearly.
+- Test coverage: Recommend unit tests for edge cases (empty path, missing extensions, malformed paths).
+
+**SEO Composable DOM Manipulation:**
+- Files: `src/composables/useSeo.ts` (lines 35-70)
+- Why fragile: Directly manipulates DOM with `document.querySelector`, `createElement`, `appendChild`. No error handling if DOM structure changes.
+- Safe modification: Use Vue's ref system or a dedicated SEO library (e.g., `@unhead/vue`). Add error boundaries.
+- Test coverage: No test coverage for SSR compatibility or DOM cleanup on route changes.
+
+**Route-based SEO Title Dependency:**
+- Files: `src/composables/useSeo.ts` (lines 75-76)
+- Why fragile: Relies on route being available in useRoute() hook. If used in wrong context (non-routed component), will fail silently.
+- Safe modification: Add null checks. Consider creating a composable specifically for page-level SEO that enforces route dependency.
+- Test coverage: Recommend tests for components used in and outside routing context.
+
+## Scaling Limits
+
+**Single-Page History State:**
+- Current capacity: Router handles typical portfolio page count (6-8 pages)
+- Limit: If projects list grows beyond 50-100 items, ProjectsPage.vue performance degrades (all projects loaded at once)
+- Scaling path: Implement pagination or virtual scrolling in ProjectsPage. Use server-side filtering if projects become dynamic.
+
+**Inline Image Modules:**
+- Current capacity: ~15-20 images loaded eagerly in memory
+- Limit: If image count exceeds 100+, startup time and memory usage increase significantly
+- Scaling path: Migrate to lazy-loading strategy. Consider CDN for image serving in production.
+
+**Localization Key Lookups:**
+- Current capacity: 500+ localization keys across en.ts and fr.ts
+- Limit: If keys exceed 1000+, lookup performance and bundle size become concerns
+- Scaling path: Implement lazy-loaded locale files (load only active language). Consider JSON-based locale format for better optimization.
+
+## Dependencies at Risk
+
+**No Testing Framework:**
+- Risk: Zero test coverage visible in codebase. Refactoring breaks are undetectable.
+- Impact: Security fixes, performance optimizations, and feature additions are risky.
+- Migration plan: Add Jest + Vue Test Utils. Start with critical paths (router guards, composables, SEO).
+
+**Hardcoded Translation Keys:**
+- Risk: If translation key structure changes, UI silently breaks (missing translations show key names)
+- Impact: Refactoring translations is error-prone and breaks are not caught in CI
+- Migration plan: Add TypeScript strict typing for i18n keys using type-safe i18n library.
+
+**External Analytics Dependency:**
+- Risk: If Google Analytics changes API or service, tracking breaks
+- Impact: Loss of analytics data, no visibility into user behavior
+- Migration plan: Already using Umami (self-hosted alternative). Consider making analytics provider pluggable.
+
+## Missing Critical Features
+
+**No Error Boundary:**
+- Problem: No Vue error boundary or fallback component for runtime errors
+- Blocks: Cannot gracefully handle component errors or show error UI
+- Fix approach: Create an error boundary component using Vue 3 error handling hooks (errorCaptured), wrap main app with it.
+
+**No Offline Support:**
+- Problem: No service worker or offline fallback
+- Blocks: Portfolio becomes completely unavailable if user loses connection
+- Fix approach: Implement service worker with offline fallback. Cache critical assets (HTML, CSS, JS).
+
+**No Loading States:**
+- Problem: No skeleton loaders or loading indicators for async operations
+- Blocks: Users don't know if page is loading or broken. Especially impacts image loading.
+- Fix approach: Add skeleton screens for ProjectDetailPage. Add loading indicators for gallery modal.
+
+**No Proper 404 Page:**
+- Problem: 404 redirects to homepage (mentioned in Tech Debt)
+- Blocks: Users cannot identify when they've hit an invalid URL
+- Fix approach: Create NotFoundPage.vue with suggestions for navigation.
+
+**No Analytics Event Tracking:**
+- Problem: Only page views tracked, no event analytics (clicks, form submissions, etc.)
+- Blocks: Cannot understand user behavior beyond page traffic
+- Fix approach: Add event tracking for CTA clicks, social link clicks, gallery interactions.
+
+## Test Coverage Gaps
+
+**No Unit Tests:**
+- What's not tested: Composables (useSeo, useAssets, useProjects, useI18n), utility functions
+- Files: All of `src/composables/` and `src/data/`
+- Risk: Refactoring introduces subtle bugs. Type safety is partial (TypeScript, but no runtime checks).
+- Priority: High - composables are core to the app and impact SEO/styling
+
+**No Component Tests:**
+- What's not tested: Interactive components (GalleryModal, ServiceFAQ, language switcher, theme toggle)
+- Files: `src/components/GalleryModal.vue`, `src/components/ServiceFAQ.vue`, `src/components/ThemeToggle.vue`, `src/components/LanguageSwitcher.vue`
+- Risk: UI behavior breaks silently. Accessibility features (keyboard nav, ARIA) may regress.
+- Priority: High - GalleryModal keyboard navigation and language switching are user-facing
+
+**No Integration Tests:**
+- What's not tested: Router navigation, SEO meta tag updates, i18n language switching across pages
+- Files: `src/router/index.ts`, cross-file composable interactions
+- Risk: Multi-step user flows break. SEO meta tags may not update correctly on navigation.
+- Priority: Medium - can catch cross-cutting issues
+
+**No E2E Tests:**
+- What's not tested: Full user journeys (landing → project detail → gallery → contact)
+- Framework: None (not using Cypress, Playwright, etc.)
+- Risk: Visual regressions, layout issues, navigation bugs in real browser contexts
+- Priority: Medium - would catch integration issues and performance regressions
+
+**No Accessibility Tests:**
+- What's not tested: Keyboard navigation, screen reader compatibility, color contrast, focus management
+- Files: All components with interactive elements
+- Risk: Accessibility fails silently. Users with disabilities cannot navigate.
+- Priority: High - portfolio should be accessible to all users
+
+---
+
+*Concerns audit: 2026-04-07*
diff --git a/.planning/codebase/CONVENTIONS.md b/.planning/codebase/CONVENTIONS.md
new file mode 100644
index 0000000..4782507
--- /dev/null
+++ b/.planning/codebase/CONVENTIONS.md
@@ -0,0 +1,225 @@
+# Coding Conventions
+
+**Analysis Date:** 2026-04-07
+
+## Naming Patterns
+
+**Files:**
+- Vue components: PascalCase (e.g., `AppHeader.vue`, `ProjectCard.vue`)
+- Composables: camelCase with `use` prefix (e.g., `useTheme.ts`, `useProjects.ts`)
+- Utility/config files: camelCase (e.g., `site.ts`, `techstack.ts`)
+- Data files: camelCase (e.g., `testimonials.ts`, `faq.ts`)
+- Type definitions: camelCase in `types/index.ts`
+
+**Functions:**
+- All functions use camelCase (e.g., `toggleTheme`, `openGallery`, `getImageUrl`)
+- Composables are named with `use` prefix: `useTheme()`, `useGallery()`, `useSeo()`
+- Getter functions use `get` prefix: `getTheme()`, `getImageUrl()`
+- Boolean functions/computed use `is`/`has` prefix: `isDark`, `hasNext`, `isOpen`
+- Handler functions use verb + `Handler`: `toggleTheme`, `openGallery`, `closeGallery`
+
+**Variables:**
+- Refs and computed properties: camelCase (e.g., `isDark`, `currentIndex`, `isOpen`)
+- Interfaces and types: PascalCase (e.g., `Props`, `SeoOptions`, `Theme`)
+- Constants: UPPER_SNAKE_CASE for config constants (not extensively used in codebase)
+- Private/module state: camelCase prefixed with `_` if truly private
+
+**Types:**
+- Type aliases: PascalCase (e.g., `type Theme = 'light' | 'dark'`)
+- Interface names: PascalCase (e.g., `interface Props`, `interface SeoOptions`)
+- Props interfaces: Always named `Props` (e.g., in `<script setup lang="ts">` components)
+- Generic types from Vue use their original names (e.g., `Ref<boolean>`, `Computed<string>`)
+
+## Code Style
+
+**Formatting:**
+- Tool: Prettier 3.5.3
+- Semi-colons: **disabled** (`semi: false`)
+- Quotes: **single quotes** (`singleQuote: true`)
+- Print width: **100 characters** (`printWidth: 100`)
+
+**Linting:**
+- Tool: ESLint 9.22.0 with Vue support
+- Config: `eslint.config.ts` using flat config format
+- Plugins: 
+  - `@vue/eslint-config-typescript` - TypeScript support
+  - `eslint-plugin-vue` v10.0.0 - Vue 3 rules
+  - `@vue/eslint-config-prettier/skip-formatting` - Prettier integration (skip-formatting enabled)
+
+## Import Organization
+
+**Order:**
+1. Vue and framework imports (`vue`, `vue-router`, `pinia`, `vue-i18n`)
+2. Type imports (use `import type` for TypeScript types)
+3. Local components (`@/components/...`)
+4. Composables (`@/composables/...`)
+5. Utilities and helpers
+6. Data and configuration files
+7. Styles (scoped CSS imported at end of `<style>`)
+
+**Path Aliases:**
+- `@/` maps to `./src/` (configured in `tsconfig.app.json`)
+- Always use `@/` prefix for imports from src directory
+- Examples:
+  - `import AppHeader from '@/components/layout/AppHeader.vue'`
+  - `import { useTheme } from '@/composables/useTheme'`
+  - `import type { Project } from '@/types'`
+  - `import { techStack } from '@/data/techstack'`
+
+## Error Handling
+
+**Patterns:**
+- Try-catch blocks wrap risky operations (e.g., dynamic imports, DOM manipulation)
+- Fallback values provided when operations fail:
+  - In `useAssets()`: returns placeholder image URL if asset fails to load
+  - In `useSeo()`: gracefully handles missing meta elements by creating them
+- Console warnings for non-critical failures:
+  - `console.warn('message')` for warnings during execution
+  - Error objects logged with context: `console.warn('Failed to load image: ${path}', error)`
+- Silent failures with fallbacks preferred over throwing errors for UI operations
+
+**Examples from codebase:**
+```typescript
+// In useAssets.ts - graceful fallback
+if (!path || path.trim() === '') {
+  console.warn('getImageUrl called with empty or undefined path')
+  return `https://via.placeholder.com/400x300/f3f4f6/9ca3af?text=${encodeURIComponent('No image')}`
+}
+
+// In useSeo.ts - create if missing
+let meta = document.querySelector(`meta[${property ? 'property' : 'name'}="${name}"]`)
+if (!meta) {
+  meta = document.createElement('meta')
+  // ... setup ...
+  document.head.appendChild(meta)
+}
+```
+
+## Logging
+
+**Framework:** `console` object (no dedicated logging library)
+
+**Patterns:**
+- `console.warn()` for warnings (missing assets, invalid input)
+- Logging only in composables for utility functions
+- No console.log() in production code (only development/debugging)
+- Error context included: `console.warn('context', error)`
+
+## Comments
+
+**When to Comment:**
+- JSDoc comments for composable functions (exported functions)
+- Inline comments for non-obvious logic (especially SEO handling in router)
+- Comments explaining why (not what the code does)
+- TODO comments for known issues: `// TODO: page 404` in `src/router/index.ts`
+
+**JSDoc/TSDoc:**
+- Composables include JSDoc for exported functions
+- Example from `useAssets.ts`:
+  ```typescript
+  /**
+   * Get image URL from assets folder
+   * @param path - Path like '@/assets/images/filename.webp' or 'filename.webp'
+   * @returns string - The image URL
+   */
+  const getImageUrl = (path: string | undefined): string => { ... }
+  ```
+- Not consistently applied across all files; use when function signature isn't obvious
+
+## Function Design
+
+**Size:** Composables are typically 50-100 lines; keep focused on single responsibility
+
+**Parameters:** 
+- Props interfaces always named `Props` in components
+- Use destructuring in setup: `const { t } = useI18n()`
+- Optional config objects in composables (e.g., `SeoOptions` with defaults)
+- Explicit typing on all parameters
+
+**Return Values:**
+- Composables return object with all exposed functions and reactive state
+- Always return computed versions of reactive state when exposing refs:
+  ```typescript
+  return {
+    isOpen,           // reactive ref
+    currentImage,     // computed from ref
+    openGallery,      // function
+    closeGallery      // function
+  }
+  ```
+- Functions return early on validation failures with fallbacks
+
+## Module Design
+
+**Exports:**
+- Composables export single named function: `export function useTheme() { ... }`
+- Config files export named constants: `export const siteConfig: SiteConfig = { ... }`
+- Type definitions export interfaces and types: `export interface Project { ... }`
+- Data files export arrays or objects: `export const techStack: TechStack = { ... }`
+
+**Barrel Files:**
+- Not extensively used; direct imports preferred
+- Only `src/types/index.ts` serves as barrel export for type definitions
+- Components use direct imports: `import AppHeader from '@/components/layout/AppHeader.vue'`
+
+**Component Structure (Vue SFC):**
+- `<script setup lang="ts">` for all components (Vue 3 Composition API)
+- Props validated with TypeScript interfaces
+- Composables called at top of setup
+- Computed properties for derived state
+- Functions defined after setup calls
+- `<template>` uses semantic HTML and accessibility attributes
+- Scoped styles at bottom with `@import` for external stylesheets
+
+**Example pattern from `AppHeader.vue`:**
+```typescript
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+// Composables first
+const { getImageUrl } = useAssets()
+const { t } = useI18n()
+// State
+const isMenuOpen = ref(false)
+// Computed
+const navigation = computed(() => [ ... ])
+// Functions
+const toggleMenu = () => { ... }
+</script>
+```
+
+## Type Safety
+
+**TypeScript Configuration:**
+- Version: ~5.8.0
+- DOM-focused (`tsconfig.dom.json` from @vue/tsconfig)
+- Path alias `@/*` points to `./src/*`
+- Type checking enabled in build: `npm run type-check` runs `vue-tsc --build`
+
+**Type Usage Patterns:**
+- All component Props use interface definitions
+- Composable return values typed explicitly
+- Function parameters and return types annotated
+- Type imports use `import type` syntax
+- Avoid `any` type; use proper interfaces/generics
+
+## Vue 3 Specific
+
+**Composition API:**
+- `<script setup>` syntax exclusively used
+- No Options API in codebase
+- Composables follow Composition API patterns
+
+**Lifecycle Hooks:**
+- `onMounted()` for initialization (theme loading, SEO setup)
+- `onUnmounted()` for cleanup (removing DOM elements in useSeo)
+- `watch()` for reactive side effects (theme changes)
+
+**Reactivity:**
+- `ref()` for primitive state
+- `computed()` for derived state
+- Avoid unnecessary reactivity; use constants when possible
+- Return computed versions of refs from composables
+
+---
+
+*Convention analysis: 2026-04-07*
diff --git a/.planning/codebase/INTEGRATIONS.md b/.planning/codebase/INTEGRATIONS.md
new file mode 100644
index 0000000..0b7d08c
--- /dev/null
+++ b/.planning/codebase/INTEGRATIONS.md
@@ -0,0 +1,180 @@
+# External Integrations
+
+**Analysis Date:** 2026-04-07
+
+## APIs & External Services
+
+**Analytics & Tracking:**
+- Google Analytics (GTM)
+  - Measurement ID: `G-CDVVNFY6MV`
+  - Script: Injected in `index.html` lines 8-16
+  - Implementation: Inline gtag.js initialization with window.dataLayer
+  - Page tracking: Configured in `src/router/index.ts` lines 105-136 via `trackPageView()` function
+  - Tracks: Page path, title, and location on route changes
+
+- Umami Analytics
+  - Website ID: `83631152-9b6b-4724-aad1-828459ff36dc`
+  - Hosted at: `umami.killiandalcin.fr`
+  - Script tag: `index.html` line 239
+  - Implementation: Self-hosted privacy-focused alternative to Google Analytics
+
+**Advertising:**
+- Google AdSense
+  - Client ID: `ca-pub-5219367964457248`
+  - Script: Async loaded in `index.html` lines 18-20
+  - Purpose: Display contextual ads on portfolio pages
+
+**Social Integration:**
+Social media links configured in `src/config/site.ts` (no direct API integration):
+- GitHub/Gitea: `https://gitea.kamisama.ovh/kayjaydee`
+- LinkedIn: `https://linkedin.com/in/killian-dal-cin`
+- Discord: `https://discord.com/users/370940770225618954`
+- Fiverr: `https://www.fiverr.com/users/mr_kayjaydee`
+- Twitter: `@killiandalcin`
+
+**Third-Party Services Referenced (Portfolio Content, Not Integrated):**
+- Instagram API - Referenced in `src/components/TechBadge.vue` and `src/composables/useProjects.ts` as portfolio technology (instagram-bot project)
+- Crowdin API - Referenced in `src/composables/useProjects.ts` as portfolio technology (crowdin status bot)
+- Discord.js - Referenced in `src/composables/useProjects.ts` as portfolio technology (Discord bot development)
+- NPM Package Registry - discord-image-generation published at `https://www.npmjs.com/package/discord-image-generation`
+
+## Data Storage
+
+**Databases:**
+- None detected - Portfolio is static content
+- Technologies showcased (not used in this app):
+  - MongoDB - Referenced in `src/data/techstack.ts`
+  - MySQL - Referenced in `src/data/techstack.ts`
+  - PostgreSQL - Referenced in `src/data/techstack.ts`
+  - Redis - Referenced in `src/data/techstack.ts`
+  - SQLite - Referenced in `src/data/techstack.ts`
+
+**File Storage:**
+- Local filesystem only
+  - Images: `src/assets/images/` directory
+  - Compiled assets: `dist/` directory (generated on build)
+  - Public assets: `public/` directory (favicon, manifest, logos, etc.)
+
+**Caching:**
+- Browser caching via content hash in filenames:
+  - Pattern: `assets/[ext]/[name]-[hash].[ext]` (configured in `vite.config.ts` lines 40-42)
+  - CSS: `assets/css/[name]-[hash].css`
+  - JS: `assets/js/[name]-[hash].js`
+- No server-side caching layer detected
+
+## Authentication & Identity
+
+**Auth Provider:**
+- None - Portfolio is fully public
+- No authentication system implemented
+- Fiverr links redirect to external Fiverr service for user authentication
+
+## Monitoring & Observability
+
+**Error Tracking:**
+- None detected
+- Errors not sent to external service
+- Console errors only (JavaScript errors in browser dev tools)
+
+**Logs:**
+- Browser console logging only
+- No server-side logging or aggregation
+- Analytics events sent to Google Analytics and Umami for page views
+
+**Performance Monitoring:**
+- Google Analytics provides basic performance metrics
+- Umami provides engagement metrics
+- No dedicated APM (Application Performance Monitoring) service
+
+## CI/CD & Deployment
+
+**Hosting:**
+- Static hosting environment (implied)
+- Docker containerization available:
+  - Build image: `node:22-alpine` (lines 2-17 in `Dockerfile`)
+  - Runtime image: `nginx:stable-alpine` (lines 20-32 in `Dockerfile`)
+  - Port: 80
+
+**CI Pipeline:**
+- None detected in repository
+- Build commands available:
+  - `npm run build` - Full build with type checking
+  - `npm run build-only` - Build only without type checking
+
+**Deployment Configuration:**
+- `Dockerfile` - Multi-stage Docker build:
+  1. Build stage: Node 22-alpine with npm install + build
+  2. Production stage: nginx serving built files
+  3. Custom nginx config: `nginx.conf`
+- `nginx.conf` - SPA routing configuration:
+  - Listens on port 80 (IPv4 and IPv6)
+  - Document root: `/usr/share/nginx/html`
+  - Fallback: All non-file requests route to `/index.html` (SPA requirement)
+
+## Environment Configuration
+
+**Required for Development:**
+- Node.js 22+
+- npm 10+
+
+**Required at Runtime:**
+- No environment variables required (analytics IDs hardcoded in HTML)
+- Optional (for containerization):
+  - Docker
+  - Docker Compose
+
+**Hardcoded Configuration:**
+- Google Analytics: `G-CDVVNFY6MV` - in `index.html` line 9
+- Google AdSense: `ca-pub-5219367964457248` - in `index.html` line 19
+- Umami Site ID: `83631152-9b6b-4724-aad1-828459ff36dc` - in `index.html` line 240
+- Umami URL: `umami.killiandalcin.fr` - in `index.html` line 239
+- Base URL: `https://killiandalcin.fr` - in multiple config files (`src/config/site.ts`, `index.html`)
+
+**Secrets Location:**
+- No secrets management system
+- All credentials are public analytics/advertising IDs (not sensitive)
+- No API keys, database passwords, or private credentials in codebase
+
+## Webhooks & Callbacks
+
+**Incoming:**
+- None - Portfolio is read-only
+
+**Outgoing:**
+- Google Analytics pageview tracking:
+  - Method: GET requests to Google Analytics endpoint
+  - Triggered: On route navigation
+  - Data: Page path, title, URL
+  - Implementation: `src/router/index.ts` `trackPageView()` function
+
+- Umami analytics events:
+  - Method: Beacon API (automatic page tracking)
+  - Triggered: Page load and navigation
+  - Data: Standard web vitals
+
+## CDN & External Resources
+
+**Fonts:**
+- Preconnected in `index.html`:
+  - `https://fonts.googleapis.com`
+  - `https://fonts.gstatic.com`
+  - Actual fonts: Not loaded (preconnect only, fonts not referenced in CSS)
+
+**Images & Media:**
+- UI Avatar API:
+  - Service: `https://ui-avatars.com/api/`
+  - Usage: Testimonial avatars in `src/data/testimonials.ts` (4 instances)
+  - Pattern: Query-based avatar generation with initials and colors
+
+- Placeholder Images:
+  - Service: `https://via.placeholder.com/`
+  - Usage: Fallback images in `src/composables/useAssets.ts`
+  - Pattern: 400x300 gray placeholders
+
+- Portfolio Preview Image:
+  - Hosted at: `https://killiandalcin.fr/portfolio-preview.webp`
+  - Usage: Open Graph and Twitter meta tags (lines 42, 55 in `index.html`)
+
+---
+
+*Integration audit: 2026-04-07*
diff --git a/.planning/codebase/STACK.md b/.planning/codebase/STACK.md
new file mode 100644
index 0000000..8f32282
--- /dev/null
+++ b/.planning/codebase/STACK.md
@@ -0,0 +1,164 @@
+# Technology Stack
+
+**Analysis Date:** 2026-04-07
+
+## Languages
+
+**Primary:**
+- TypeScript ~5.8.0 - Full application development
+- JavaScript (ES modules) - Frontend runtime
+
+**Secondary:**
+- HTML5 - Document structure (in `index.html`)
+- CSS - Styling with Tailwind CSS
+- Markdown - Documentation (README.md)
+- YAML - Configuration (implied through Dockerfile)
+
+## Runtime
+
+**Environment:**
+- Node.js 22 - Development and build environment
+- Browser environment - Vue 3 SFC runtime
+
+**Package Manager:**
+- npm - Dependency management
+- Lockfile: `package-lock.json` (present and tracked)
+
+## Frameworks
+
+**Core Frontend:**
+- Vue 3.5.13 - Progressive JavaScript framework for UI
+- Vue Router 4.5.0 - Client-side routing with lazy-loaded pages
+- Pinia 3.0.1 - State management (minimal usage - currently only `counter.ts`)
+- Vue I18n 9.14.4 - Internationalization (English and French locale files in `src/locales/`)
+
+**Build & Dev:**
+- Vite 6.2.4 - Build tool and dev server
+  - Config: `vite.config.ts` with Vue plugin, DevTools plugin, chunk splitting optimization
+  - Build output: `dist/` with CSS code splitting, Terser minification
+- Vite Plugin Vue DevTools 7.7.2 - Development utilities
+- @vitejs/plugin-vue 5.2.3 - Vue 3 SFC support
+
+**Styling:**
+- Tailwind CSS 4.1.10 - Utility-first CSS framework
+- @tailwindcss/postcss 4.1.10 - PostCSS plugin for Tailwind
+- PostCSS 8.5.6 - CSS transformation pipeline
+- Autoprefixer 10.4.21 - Vendor prefix handling
+- Terser 5.43.1 - JavaScript minification
+
+**Code Quality:**
+- ESLint 9.22.0 - Linting (config: `eslint.config.ts`)
+  - @vue/eslint-config-typescript 14.5.0
+  - @vue/eslint-config-prettier 10.2.0 - Prettier integration
+  - eslint-plugin-vue ~10.0.0
+- Prettier 3.5.3 - Code formatting (config: `.prettierrc.json`)
+  - Format settings: `semi: false`, `singleQuote: true`, `printWidth: 100`
+
+**Type Checking:**
+- vue-tsc 2.2.8 - Vue component type checking
+- TypeScript compiler with `type-check` npm script
+
+**Head Management:**
+- @vueuse/head 2.0.0 - Dynamic document head management for meta tags and SEO
+
+## Key Dependencies
+
+**Critical:**
+- vue 3.5.13 - Core framework
+- vue-router 4.5.0 - SPA routing with code splitting
+- pinia 3.0.1 - State management store
+- vue-i18n 9.14.4 - Multi-language support
+
+**Infrastructure & Build:**
+- vite 6.2.4 - Next-gen build tool with HMR
+- tailwindcss 4.1.10 - Rapid UI development
+- typescript 5.8.0 - Static typing and compilation
+
+**Developer Tools:**
+- eslint 9.22.0 - Code linting
+- prettier 3.5.3 - Code formatting
+- npm-run-all2 7.0.2 - Parallel script execution (used in build process)
+- @tsconfig/node22 22.0.1 - TSConfig preset for Node 22
+- @types/node 22.14.0 - Node.js type definitions
+- jiti 2.4.2 - CommonJS loader for TypeScript modules
+
+## Configuration
+
+**Environment:**
+- No `.env` files detected in source
+- Google Analytics tracking ID hardcoded: `G-CDVVNFY6MV` (in `index.html`)
+- Umami analytics script loaded from `umami.killiandalcin.fr` (in `index.html`)
+- Google AdSense client ID hardcoded: `ca-pub-5219367964457248` (in `index.html`)
+
+**Build Configuration:**
+- `vite.config.ts` - Build optimizations:
+  - Path alias: `@/` → `./src/`
+  - CSS code splitting enabled
+  - Terser minification with console/debugger removal
+  - Manual chunk splitting: `vue-vendor` and `ui-components`
+  - Content hash in chunk filenames for cache busting
+  - Source maps disabled
+  - Chunk size warning limit: 1000 KB
+
+**Type Configuration:**
+- `tsconfig.json` - References `tsconfig.app.json` and `tsconfig.node.json`
+- `tsconfig.app.json`:
+  - Extends `@vue/tsconfig/dom.json`
+  - Includes `src/**/*` and `*.vue` files
+  - Path alias: `@/*` → `./src/*`
+  - Excludes `src/**/__tests__/*`
+
+**Linting Configuration:**
+- `eslint.config.ts` - Flat config format:
+  - Files: `**/*.{ts,mts,tsx,vue}`
+  - Rules: Vue essential, TypeScript recommended
+  - Skips Prettier formatting enforcement
+
+**Formatting Configuration:**
+- `.prettierrc.json`:
+  - No semicolons
+  - Single quotes for strings
+  - 100 character line width
+
+**PostCSS Configuration:**
+- `postcss.config.js` - Tailwind CSS and Autoprefixer
+
+**Tailwind Configuration:**
+- `tailwind.config.js` - Content scanning for `index.html` and `src/**/*.{vue,js,ts,jsx,tsx}`
+
+## Platform Requirements
+
+**Development:**
+- Node.js 22+ (specified in Dockerfile)
+- npm 10+ (implied by Node 22)
+- TypeScript 5.8+
+- Any Unix-like shell (bash/zsh) or Windows with Node.js
+
+**Production:**
+- Docker - Multi-stage build with Node 22-alpine and nginx stable-alpine
+- Web server: nginx (configured in `nginx.conf`)
+- Deployment target: Static HTML served via nginx
+  - Base image: `nginx:stable-alpine`
+  - Document root: `/usr/share/nginx/html`
+  - Port: 80
+  - SPA fallback: All requests route to `/index.html`
+
+**Browser Support:**
+- JavaScript enabled (noscript fallback message in `index.html`)
+- Modern browsers with ES2020+ support (Vite default targets)
+
+## Scripts & Commands
+
+```bash
+npm run dev              # Start Vite dev server with HMR
+npm run build           # Type check + build (parallel with npm-run-all2)
+npm run type-check      # Run vue-tsc type checking
+npm run build-only      # Build without type checking
+npm run preview         # Preview production build
+npm run lint            # Run ESLint with --fix
+npm run format          # Format src/ with Prettier
+```
+
+---
+
+*Stack analysis: 2026-04-07*
diff --git a/.planning/codebase/STRUCTURE.md b/.planning/codebase/STRUCTURE.md
new file mode 100644
index 0000000..085f093
--- /dev/null
+++ b/.planning/codebase/STRUCTURE.md
@@ -0,0 +1,277 @@
+# Codebase Structure
+
+**Analysis Date:** 2026-04-07
+
+## Directory Layout
+
+```
+portfolio/
+├── .claude/              # Claude editor configuration
+├── .planning/            # GSD planning documents
+│   └── codebase/        # Architecture and analysis docs
+├── .vscode/             # VS Code workspace settings
+├── dist/                # Vite production build output
+├── docs/                # Documentation files
+├── node_modules/        # Dependencies (git-ignored)
+├── old/                 # Archived or deprecated code
+├── public/              # Static assets served at root
+│   └── images/          # Public static images
+├── src/                 # Application source code
+│   ├── assets/          # Static assets imported in code
+│   │   └── images/      # Project and UI images (webp format)
+│   ├── components/      # Vue component library
+│   │   ├── icons/       # Icon SVG components
+│   │   ├── layout/      # Layout components (Header, Footer)
+│   │   ├── sections/    # Page section components
+│   │   ├── shared/      # Reusable UI components
+│   │   ├── styles/      # Component-scoped CSS files
+│   │   └── testimonials/ # Testimonial-related components
+│   ├── composables/     # Vue composables (reusable logic)
+│   ├── config/          # Application configuration
+│   ├── data/            # Static data files (projects, testimonials, FAQ)
+│   ├── i18n/            # Internationalization setup
+│   ├── locales/         # Translation files (en.ts, fr.ts)
+│   ├── plugins/         # Vue plugins
+│   ├── router/          # Vue Router configuration
+│   ├── stores/          # Pinia state stores
+│   ├── types/           # TypeScript type definitions
+│   ├── views/           # Page components (route targets)
+│   │   └── styles/      # Page-level CSS files
+│   ├── App.vue          # Root component
+│   ├── main.ts          # Application entry point
+│   └── style.css        # Global stylesheet
+├── .env*                # Environment variables (git-ignored)
+├── .eslintrc.ts         # ESLint configuration
+├── .gitignore           # Git ignore rules
+├── .prettierrc.json     # Prettier code formatter config
+├── eslint.config.ts     # ESLint flat config
+├── index.html           # HTML entry point
+├── package-lock.json    # Dependency lock file
+├── package.json         # Project metadata and scripts
+├── postcss.config.js    # PostCSS configuration (Tailwind)
+├── tailwind.config.js   # Tailwind CSS configuration
+├── tsconfig.app.json    # TypeScript config for app code
+├── tsconfig.json        # Base TypeScript config
+├── tsconfig.node.json   # TypeScript config for build tools
+├── vite.config.ts       # Vite build configuration
+└── [formation.md]       # Formation page documentation (uncommitted)
+```
+
+## Directory Purposes
+
+**src/components/**
+- Purpose: Vue Single File Components for UI building blocks
+- Contains: Presentational components organized by domain
+- Key files: `AppHeader.vue`, `ProjectCard.vue`, `HeroSection.vue`
+
+**src/components/layout/**
+- Purpose: Layout wrapper components used across pages
+- Contains: `AppHeader.vue`, `AppFooter.vue`
+- Key files: Header navigation, footer with social links
+
+**src/components/sections/**
+- Purpose: Full-width page section components
+- Contains: `HeroSection.vue`, `FeaturedProjectsSection.vue`, `ServicesSection.vue`, `CTASection.vue`
+- Key files: Large reusable page sections with styling
+
+**src/components/shared/**
+- Purpose: Shared utility components
+- Contains: `CTAButtons.vue`, `SectionCTA.vue`
+- Key files: Reusable button groups and CTA patterns
+
+**src/components/testimonials/**
+- Purpose: Testimonial display components
+- Contains: `TestimonialCard.vue`, `TestimonialsCTA.vue`, `TestimonialsStats.vue`
+- Key files: Fiverr review display and stats
+
+**src/composables/**
+- Purpose: Vue 3 Composition API utilities for reusable logic
+- Contains: Custom hooks for i18n, SEO, theme, projects, gallery, date formatting, assets, site config
+- Key files: `useI18n.ts`, `useSeo.ts`, `useTheme.ts`, `useProjects.ts`
+
+**src/stores/**
+- Purpose: Pinia state management
+- Contains: Global reactive state stores
+- Key files: `counter.ts` (minimal unused example), `auth.ts` (new, for authentication)
+
+**src/views/**
+- Purpose: Page-level Vue components matching routes
+- Contains: `HomePage.vue`, `ProjectsPage.vue`, `ProjectDetailPage.vue`, `AboutPage.vue`, `ContactPage.vue`, `FiverrPage.vue`, `FormationPage.vue`
+- Key files: Route target components, each handles own SEO and data fetching
+
+**src/router/**
+- Purpose: Vue Router configuration and navigation logic
+- Contains: Route definitions, navigation guards, analytics tracking
+- Key files: `index.ts` (main router), `guards.ts` (new, for route guards)
+
+**src/types/**
+- Purpose: TypeScript interface definitions
+- Contains: Project, Technology, TechStack, SocialLink, ContactInfo, FiverrService, SiteConfig interfaces
+- Key files: `index.ts`
+
+**src/data/**
+- Purpose: Static data files (non-API)
+- Contains: Project definitions, testimonials, tech stack, FAQ data
+- Key files: `techstack.ts`, `testimonials.ts`, `faq.ts`
+
+**src/config/**
+- Purpose: Application-wide configuration constants
+- Contains: Site configuration with contact info, social links, SEO settings, performance flags
+- Key files: `site.ts` (siteConfig export)
+
+**src/locales/**
+- Purpose: Translation message files
+- Contains: English and French translation objects
+- Key files: `en.ts`, `fr.ts`
+
+**src/i18n/**
+- Purpose: vue-i18n setup and initialization
+- Contains: i18n instance creation and locale loading
+- Key files: `index.ts`
+
+**src/assets/images/**
+- Purpose: Images imported in code (processed by Vite)
+- Contains: Tech stack icons, project images, app images in webp format
+- Subdirs: `fiverr/`, `flowboard/` for project-specific images
+
+**public/images/**
+- Purpose: Static images served at root URL without processing
+- Contains: Logos, favicons, og:image preview images
+
+**dist/**
+- Purpose: Vite production build output
+- Contains: Optimized HTML, JS chunks, CSS, images
+- Generated: Automatically by `npm run build`
+
+## Key File Locations
+
+**Entry Points:**
+- `index.html` - HTML entry point with Google Analytics, AdSense, structured data schemas
+- `src/main.ts` - Vue app initialization, plugin registration (Pinia, Router, i18n)
+- `src/router/index.ts` - Route table and navigation hooks
+
+**Configuration:**
+- `vite.config.ts` - Build optimization, chunk splitting, alias resolution (@)
+- `tsconfig.json` - Base TypeScript settings with references to app and node configs
+- `tailwind.config.js` - Tailwind CSS customization
+- `postcss.config.js` - PostCSS with Tailwind
+- `.eslintrc.ts` - ESLint rules and Vue plugin
+- `.prettierrc.json` - Code formatting rules
+
+**Core Logic:**
+- `src/App.vue` - Root component with theme init, layout structure, scroll on route change
+- `src/composables/useI18n.ts` - i18n convenience wrapper with locale switching
+- `src/composables/useSeo.ts` - Dynamic meta tag management for SPA
+- `src/composables/useTheme.ts` - Theme state and persistence
+- `src/config/site.ts` - Centralized site configuration and constants
+
+**Testing:**
+- No test files detected in committed code (*.test.ts, *.spec.ts not found)
+- Test setup tools not configured (Jest/Vitest not in package.json)
+
+## Naming Conventions
+
+**Files:**
+- Components: PascalCase.vue (e.g., `AppHeader.vue`, `ProjectCard.vue`)
+- Composables: camelCase prefixed with 'use' (e.g., `useProjects.ts`, `useSeo.ts`)
+- Data/Config: camelCase or lowercase (e.g., `techstack.ts`, `site.ts`)
+- Pages/Views: PascalCase with 'Page' suffix (e.g., `HomePage.vue`, `ProjectsPage.vue`)
+- CSS: Matches component name or function (e.g., `AppHeader.css`, `HomePage.css`)
+- Types: camelCase in index.ts (e.g., `Project`, `Technology`, `SiteConfig`)
+
+**Directories:**
+- Feature directories: lowercase plural (e.g., `components/`, `composables/`, `views/`)
+- Subdirectories: lowercase descriptive names (e.g., `layout/`, `sections/`, `shared/`)
+- Asset subdirectories: descriptive lowercase (e.g., `images/`, `fiverr/`, `flowboard/`)
+
+**Vue Components:**
+- Props: camelCase in script, kebab-case in template (Vue standard)
+- Methods: camelCase (e.g., `toggleTheme()`, `setMetaTag()`)
+- Computed: camelCase (e.g., `isDark`, `currentLocale`)
+- Refs: camelCase (e.g., `isMenuOpen`, `galleryIndex`)
+- CSS classes: kebab-case (e.g., `.hero-title`, `.nav-link`, `.btn-primary`)
+
+**Constants:**
+- Global config exports: camelCase (e.g., `siteConfig`)
+- Array constants in data files: camelCase plural (e.g., `testimonials`, `baseProjects`)
+- Type/Interface names: PascalCase (e.g., `Project`, `Testimonial`, `Technology`)
+
+## Where to Add New Code
+
+**New Feature (e.g., New Page):**
+- Primary code: `src/views/FeaturePage.vue`
+- Add route: `src/router/index.ts` (add route object to routes array)
+- Add SEO data: Route meta object with title/description
+- Translations: Add keys to `src/locales/en.ts` and `src/locales/fr.ts`
+- Data files: Create in `src/data/feature.ts` if needed
+- Tests: Would go in `src/views/__tests__/FeaturePage.spec.ts` (not yet configured)
+
+**New Component/Module:**
+- Reusable component: `src/components/FeatureName.vue`
+- Layout component: `src/components/layout/ComponentName.vue`
+- Section component: `src/components/sections/SectionName.vue`
+- Shared/utility component: `src/components/shared/UtilityName.vue`
+- Component CSS: `src/components/styles/ComponentName.css` (imported in component)
+
+**New Composable:**
+- Implementation: `src/composables/useFeatureName.ts`
+- Return: Object with reactive state and methods
+- Pattern: Use `onMounted`/`onUnmounted` for lifecycle, return refs/computed/methods
+- Export: Named export of function (not default)
+
+**Utilities/Services:**
+- Shared helpers: `src/composables/useUtilityName.ts` (if stateful) or create `src/utils/utilityName.ts` (if stateless)
+- Type definitions: Add to `src/types/index.ts`
+- Config constants: Add to `src/config/site.ts` or create new `src/config/featureName.ts`
+
+**Styling:**
+- Global styles: `src/style.css` (imported in main.ts)
+- Component scoped: `<style scoped>` in .vue file or separate `src/components/styles/ComponentName.css`
+- Page styles: `src/views/styles/PageName.css`
+- Tailwind classes: Use directly in templates (no separate CSS needed for basic styling)
+
+**Translations:**
+- English messages: `src/locales/en.ts` (export default object with nested structure)
+- French messages: `src/locales/fr.ts` (same structure as English)
+- Usage in components: `const { t } = useI18n()` then `{{ t('section.key') }}`
+
+**Data/State:**
+- Static data: `src/data/featureName.ts` (export arrays/objects)
+- Global state: `src/stores/featureName.ts` (defineStore with Pinia)
+- Site config: Update `src/config/site.ts` with new configuration
+
+## Special Directories
+
+**dist/:**
+- Purpose: Production build output
+- Generated: Yes (by Vite during `npm run build`)
+- Committed: No (in .gitignore)
+- Content: Optimized HTML, JS chunks with hashes, CSS, images
+
+**node_modules/:**
+- Purpose: Installed npm dependencies
+- Generated: Yes (by npm install)
+- Committed: No (in .gitignore)
+- Content: Third-party packages
+
+**public/:**
+- Purpose: Static files served at root during dev and prod
+- Generated: No (manually maintained)
+- Committed: Yes
+- Content: favicon.ico, favicon.webp, site.webmanifest, static images
+
+**.git/:**
+- Purpose: Git version control metadata
+- Generated: Yes (by git init)
+- Committed: No (in .gitignore)
+- Content: Commit history, branches, objects
+
+**old/:**
+- Purpose: Archived or deprecated code
+- Generated: No (manually maintained)
+- Committed: Yes
+- Content: Previous versions of components or features
+
+---
+
+*Structure analysis: 2026-04-07*
diff --git a/.planning/codebase/TESTING.md b/.planning/codebase/TESTING.md
new file mode 100644
index 0000000..2da4ee2
--- /dev/null
+++ b/.planning/codebase/TESTING.md
@@ -0,0 +1,204 @@
+# Testing Patterns
+
+**Analysis Date:** 2026-04-07
+
+## Test Framework
+
+**Status:** NOT IMPLEMENTED
+
+No testing framework is currently configured in this project. There are:
+- No test files (no `.test.ts`, `.spec.ts`, `.test.vue`, or `.spec.vue` files found)
+- No test runner configured (Jest, Vitest, Cypress, Playwright, etc.)
+- No test configuration files in project root
+
+**Recommendations for Implementation:**
+
+Given this is a Vue 3 + TypeScript portfolio, recommended testing setup would be:
+
+1. **Unit Testing:** Vitest (modern, Vue 3 native, fast)
+   - Lightweight alternative to Jest
+   - Built-in TypeScript support
+   - Fast HMR for test-driven development
+   
+2. **Component Testing:** Vitest + `@vue/test-utils`
+   - Test Vue components in isolation
+   - Mock composables and routing
+   
+3. **E2E Testing:** Playwright or Cypress
+   - Full user journey testing
+   - SEO/routing validation
+   - Analytics tracking verification
+
+## Current Development Practices
+
+**Build Pipeline:**
+```bash
+npm run type-check    # Vue TypeScript compilation check
+npm run build         # Production build with type checking
+npm run lint          # ESLint with --fix flag
+npm run format        # Prettier formatting on src/
+npm run dev           # Vite dev server
+```
+
+**Type Safety as Testing:**
+- Type-checking replaces some unit test coverage
+- `npm run type-check` validates all TypeScript during build
+- ESLint prevents common errors with Vue and TypeScript plugins
+
+## What Should Be Tested (If Framework Were Added)
+
+### Composables (`src/composables/`)
+
+**`useTheme.ts` - Unit Tests Needed:**
+- `toggleTheme()` flips isDark state
+- `setTheme('dark')` / `setTheme('light')` correctly sets theme
+- `getTheme()` returns current theme string
+- `applyTheme()` sets correct class on `document.documentElement`
+- `saveTheme()` persists to localStorage
+- `loadTheme()` reads from localStorage and defaults to 'dark'
+- Watch effect triggers applyTheme and saveTheme on isDark change
+- onMounted initialization sequence
+
+**`useGallery.ts` - Unit Tests Needed:**
+- `openGallery(images, index)` sets state correctly
+- `closeGallery()` resets all state
+- `nextImage()` increments index when available
+- `previousImage()` decrements index when available
+- `goToImage(index)` validates index bounds
+- Computed properties (`currentImage`, `hasNext`, `hasPrevious`) reflect correct values
+- Body scroll overflow is managed correctly
+
+**`useSeo.ts` - Unit Tests Needed:**
+- Meta tags are created and updated correctly
+- `setTitle()` updates document.title and og:title
+- `setMetaTag()` creates new tags if missing
+- `setLinkTag()` manages canonical links
+- `setStructuredData()` adds JSON-LD scripts
+- onUnmounted cleanup removes all added elements (no memory leaks)
+- Structured breadcrumb data is generated for non-home routes
+- Title suffix appended only when needed
+
+**`useI18n.ts` - Unit Tests Needed:**
+- `switchLocale()` changes locale and saves to localStorage
+- `toggleLocale()` switches between en/fr
+- Computed properties reflect current locale
+- Invalid locales rejected
+
+**`useAssets.ts` - Unit Tests Needed:**
+- `getImageUrl()` resolves asset paths correctly
+- Fallback placeholder returned for missing images
+- Handles both `@/assets/images/` and plain filename formats
+- Warns on console for missing/empty paths
+- Graceful error handling with placeholder fallback
+
+**`useProjects.ts` - Unit Tests Needed:**
+- Projects computed array returns correct structure
+- Translations applied to titles, descriptions, buttons
+- Project count matches expected baseline (7 projects)
+- Featured flag correctly identifies featured projects
+
+**`useDateFormat.ts` - Unit Tests Needed:**
+- `formatRelativeTime()` returns correct French/English strings
+- Year boundaries handled correctly (1 year = "1 year ago", 2+ = "X years ago")
+- Month, day granularity works in both locales
+- Date parsing from DD/MM/YYYY format works correctly
+
+### Router (`src/router/index.ts`)
+
+**Navigation Tests:**
+- All routes load their components (lazy-loaded pages)
+- ScrollBehavior resets to top on normal navigation
+- ScrollBehavior restores position on back/forward
+- ScrollBehavior smooth-scrolls to hash anchors
+- Meta tags (title, description) updated on route change
+
+**TODO:** 404 page implementation and testing needed (see comment on line 51)
+
+### Components (if component testing added)
+
+**High-value components to test:**
+- `AppHeader.vue` - Navigation links active state, mobile menu toggle
+- `ProjectCard.vue` - Image loading, translated content, button visibility
+- `ContactMethod.vue` - Props validation, conditional link component rendering
+- `ServiceFAQ.vue` - Q&A toggle state, feature list rendering
+
+## No Mocking Currently Used
+
+Since there are no tests, no mocking framework is configured. When tests are added:
+
+**What to Mock:**
+- Vue Router (`useRouter`, `useRoute`) - use `@vue/test-utils` mocking
+- localStorage - mock in test setup
+- Window/Document APIs - mock in unit tests
+- Dynamic image imports - mock in `useAssets` tests
+- Translation (`useI18n`) - provide test translations
+
+**What NOT to Mock:**
+- Composable logic itself - test composables directly
+- Type validation - let TypeScript handle it
+- Vue reactivity - test against real ref/computed behavior
+- Business logic in utility functions
+
+## Missing Infrastructure
+
+### Configuration Files Needed:
+
+1. **Vitest config** (`vitest.config.ts`):
+   ```typescript
+   import { defineConfig } from 'vitest/config'
+   import vue from '@vitejs/plugin-vue'
+   // ... rest of config
+   ```
+
+2. **Test utilities setup** (`src/__tests__/setup.ts`):
+   - Global test configuration
+   - Mock setup for localStorage, window
+   - Test utilities/helpers
+
+3. **Component test examples** structure:
+   - `src/__tests__/unit/` for unit tests
+   - `src/__tests__/components/` for component tests
+   - Matching file structure to src/
+
+### Package Dependencies Needed:
+
+```json
+{
+  "devDependencies": {
+    "vitest": "^1.x",
+    "@vue/test-utils": "^2.x",
+    "@testing-library/vue": "^8.x",
+    "happy-dom": "^12.x",
+    "playwright": "^1.x"
+  }
+}
+```
+
+## Coverage Targets (If Implemented)
+
+**Recommended targets:**
+- Composables: 85%+ coverage (critical for reliability)
+- Router: 90%+ coverage (navigation is critical)
+- Components: 70%+ coverage (UI changes less frequently)
+- Overall: 75%+ coverage
+
+**High-risk areas needing coverage:**
+- SEO meta tag manipulation (`useSeo`)
+- Theme persistence and DOM manipulation (`useTheme`)
+- Image asset loading with fallbacks (`useAssets`)
+- Locale switching and persistence (`useI18n`)
+
+## Development Testing Approach (Current)
+
+Without automated tests, verification is manual:
+
+1. **Type checking:** `npm run type-check` validates types
+2. **Linting:** `npm run lint` catches code style issues
+3. **Manual testing:** `npm run dev` starts dev server for browser testing
+4. **Build validation:** `npm run build` ensures code compiles
+
+This is appropriate for a portfolio site but would need proper testing for production applications or team projects.
+
+---
+
+*Testing analysis: 2026-04-07*