# Structure

**Analysis Date:** 2026-04-10

## Directory Layout

```
portfolio/
├── app/                              # Nuxt 4 app directory (srcDir)
│   ├── app.vue                       # Root component (UApp wrapper)
│   ├── error.vue                     # Error/404 page
│   ├── assets/css/main.css           # Global CSS (Tailwind imports)
│   ├── components/
│   │   ├── layout/
│   │   │   ├── AppHeader.vue         # Sticky header with nav, locale/theme toggles
│   │   │   └── AppFooter.vue         # Footer with social links, copyright
│   │   ├── sections/
│   │   │   ├── HeroSection.vue       # Landing hero with CTA
│   │   │   ├── FeaturedProjectsSection.vue
│   │   │   ├── ServicesSection.vue
│   │   │   ├── TestimonialsSection.vue
│   │   │   ├── FAQSection.vue
│   │   │   └── CTASection.vue
│   │   ├── ContactForm.vue           # Form with Zod validation + honeypot
│   │   ├── ProjectCard.vue           # Project display card
│   │   ├── ProjectGallery.vue        # Image gallery modal
│   │   └── TechBadge.vue             # Technology badge with icon
│   ├── composables/
│   │   └── useProjects.ts            # Project data access + i18n + filtering
│   ├── data/                         # Static typed data
│   │   ├── projects.ts               # 7 projects (Omit translatable fields)
│   │   ├── testimonials.ts           # Client testimonials
│   │   ├── techstack.ts              # Technology categories
│   │   ├── faq.ts                    # FAQ entries (i18n keys)
│   │   └── site.ts                   # Site config (SEO, contact, social)
│   ├── layouts/
│   │   └── default.vue               # Main layout (header + slot + footer)
│   └── pages/                        # File-based routing
│       ├── index.vue                 # Homepage
│       ├── about.vue                 # About page
│       ├── contact.vue               # Contact form page
│       ├── projects.vue              # Project listing with filters
│       ├── fiverr.vue                # Fiverr services page
│       └── project/[id].vue          # Dynamic project detail
├── i18n/locales/                     # Translation files
│   ├── fr.json                       # French (default locale)
│   └── en.json                       # English
├── server/api/
│   └── contact.post.ts               # Contact form POST handler (nodemailer)
├── shared/types/
│   └── index.ts                      # All TypeScript interfaces
├── public/images/                    # Static images (WebP)
├── nuxt.config.ts                    # Nuxt configuration
├── app.config.ts                     # Nuxt UI theme tokens
├── Dockerfile                        # Multi-stage SSR build (node:22-alpine)
├── docker-compose.yml                # Docker compose with Traefik
├── package.json                      # Dependencies (pnpm)
└── pnpm-lock.yaml                    # pnpm lockfile
```

## Page Inventory

| Route | File | Description |
|-------|------|-------------|
| `/` | `index.vue` | Homepage with 6 sections (hero, projects, services, testimonials, FAQ, CTA) |
| `/about` | `about.vue` | About page with tech stack badges |
| `/projects` | `projects.vue` | Project listing with search + category filters |
| `/project/:id` | `project/[id].vue` | Dynamic project detail with gallery |
| `/contact` | `contact.vue` | Contact form page |
| `/fiverr` | `fiverr.vue` | Fiverr services page |
| `/en/*` | (same files) | English prefix routes via i18n |

## Component Hierarchy

- **Layout components** (`layout/`): AppHeader, AppFooter — used in `default.vue` layout
- **Section components** (`sections/`): 6 homepage sections — composed in `index.vue`
- **Shared components** (root): ContactForm, ProjectCard, ProjectGallery, TechBadge — reused across pages

All components auto-imported with `pathPrefix: false` — use `AppHeader` not `LayoutAppHeader`.

## Where to Add Things

| To add... | Location |
|-----------|----------|
| New page | `app/pages/newpage.vue` (auto-routed) |
| New component | `app/components/` (auto-imported) |
| New section | `app/components/sections/` |
| New API route | `server/api/name.method.ts` |
| New data file | `app/data/name.ts` |
| New type | `shared/types/index.ts` |
| New i18n keys | `i18n/locales/fr.json` + `en.json` |

---

*Structure analysis: 2026-04-10*