# florianbouchart/portfolio architecture

> Architecture diagram of the GitHub repository florianbouchart/portfolio, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-28). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/florianbouchart/portfolio
- Repository: https://github.com/florianbouchart/portfolio

## Overview

This is a bilingual personal portfolio site that complements, rather than downloads or duplicates, the author’s CV. A visitor enters through the home page or shared navigation, then explores case studies, projects, education, credentials, recommendations, profile, and contact information. React Router in `src/App.tsx` selects the page; internal links use the transition layer. Editorial content is kept in typed TypeScript data files. The README documents several page capabilities whose implementation was not sampled, so those branches are shown at the documented page and content-directory level.

Main entry points: [`src/App.tsx`](https://github.com/florianbouchart/portfolio/blob/main/src/App.tsx) (App and routes), [`src/pages/Home.tsx`](https://github.com/florianbouchart/portfolio/blob/main/src/pages/Home.tsx) (Home), [`src/sections/Education.tsx`](https://github.com/florianbouchart/portfolio/blob/main/src/sections/Education.tsx) (Education), [`src/lib/transition.tsx`](https://github.com/florianbouchart/portfolio/blob/main/src/lib/transition.tsx) (Page transitions)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_navigation["Routing and shell"]
  node_app["App and routes<br/>[App.tsx]"]
  node_nav["Navigation<br/>[Nav.tsx]"]
  node_transitions["Page transitions<br/>[transition.tsx]"]
end

subgraph group_pages["Portfolio pages"]
  node_home["Home<br/>[Home.tsx]"]
  node_realisations["Case studies<br/>[Realisations.tsx]"]
  node_projects["Projects<br/>[Projets.tsx]"]
  node_education["Education<br/>[Education.tsx]"]
  node_certifications["Certifications<br/>[Certifications.tsx]"]
  node_recommendations["Recommendations"]
  node_profile["Profile<br/>[Profil.tsx]"]
  node_contact["Contact and FAQ<br/>[Contact.tsx]"]
  node_notfound["Not found<br/>[NotFound.tsx]"]
end

subgraph group_content["Editorial content"]
  node_profiledata["Profile content<br/>[profile.ts]"]
  node_projectdata["Project content<br/>[projects.ts]"]
  node_casedata["Case study content<br/>[cases.ts]"]
  node_educationdata["Course content<br/>[education.ts]"]
  node_certdata["Certification content<br/>[certifications.ts]"]
  node_recommendationdata["Recommendation content<br/>[recommendations.ts]"]
  node_faqdata["FAQ content<br/>[faq.ts]"]
end

subgraph group_experience["Interaction and motion"]
  node_i18n["Locale provider<br/>[i18n.tsx]"]
  node_motion["Motion utilities<br/>[motion.ts]"]
  node_preloader["Preloader<br/>[Preloader.tsx]"]
  node_hero["Hero canvas<br/>[HeroCanvas.tsx]"]
end

node_visitor(("Visitor"))

node_visitor -->|"opens site"| node_app
node_app -->|"renders shell"| node_nav
node_app -->|"provides transitions"| node_transitions
node_app -->|"routes to"| node_home
node_app -->|"routes to"| node_realisations
node_app -->|"routes to"| node_projects
node_app -->|"routes to"| node_education
node_app -->|"routes to"| node_certifications
node_app -->|"routes to"| node_recommendations
node_app -->|"routes to"| node_profile
node_app -->|"routes to"| node_contact
node_app -->|"fallback route"| node_notfound
node_nav -->|"links through"| node_transitions
node_transitions -->|"navigates routes"| node_app
node_home -->|"reads"| node_profiledata
node_home -->|"reads"| node_projectdata
node_realisations -->|"presents cases"| node_casedata
node_projects -->|"presents projects"| node_projectdata
node_education -->|"searches and filters"| node_educationdata
node_certifications -->|"displays credentials"| node_certdata
node_recommendations -->|"presents references"| node_recommendationdata
node_contact -->|"presents FAQ"| node_faqdata
node_app -->|"wraps application"| node_i18n
node_home -->|"uses animations"| node_motion
node_education -->|"uses reveals"| node_motion
node_app -->|"renders at startup"| node_preloader
node_home -->|"renders hero scene"| node_hero
node_hero -->|"checks motion preferences"| node_motion

click node_app "https://github.com/florianbouchart/portfolio/blob/main/src/App.tsx"
click node_nav "https://github.com/florianbouchart/portfolio/blob/main/src/components/Nav.tsx"
click node_transitions "https://github.com/florianbouchart/portfolio/blob/main/src/lib/transition.tsx"
click node_home "https://github.com/florianbouchart/portfolio/blob/main/src/pages/Home.tsx"
click node_realisations "https://github.com/florianbouchart/portfolio/blob/main/src/pages/Realisations.tsx"
click node_projects "https://github.com/florianbouchart/portfolio/blob/main/src/pages/Projets.tsx"
click node_education "https://github.com/florianbouchart/portfolio/blob/main/src/sections/Education.tsx"
click node_certifications "https://github.com/florianbouchart/portfolio/blob/main/src/sections/Certifications.tsx"
click node_recommendations "https://github.com/florianbouchart/portfolio/blob/main/src/pages/Recommandations.tsx"
click node_profile "https://github.com/florianbouchart/portfolio/blob/main/src/sections/Profil.tsx"
click node_contact "https://github.com/florianbouchart/portfolio/blob/main/src/sections/Contact.tsx"
click node_notfound "https://github.com/florianbouchart/portfolio/blob/main/src/pages/NotFound.tsx"
click node_profiledata "https://github.com/florianbouchart/portfolio/blob/main/src/content/profile.ts"
click node_projectdata "https://github.com/florianbouchart/portfolio/blob/main/src/content/projects.ts"
click node_casedata "https://github.com/florianbouchart/portfolio/blob/main/src/content/cases.ts"
click node_educationdata "https://github.com/florianbouchart/portfolio/blob/main/src/content/education.ts"
click node_certdata "https://github.com/florianbouchart/portfolio/blob/main/src/content/certifications.ts"
click node_recommendationdata "https://github.com/florianbouchart/portfolio/blob/main/src/content/recommendations.ts"
click node_faqdata "https://github.com/florianbouchart/portfolio/blob/main/src/content/faq.ts"
click node_i18n "https://github.com/florianbouchart/portfolio/blob/main/src/lib/i18n.tsx"
click node_motion "https://github.com/florianbouchart/portfolio/blob/main/src/lib/motion.ts"
click node_preloader "https://github.com/florianbouchart/portfolio/blob/main/src/components/Preloader.tsx"
click node_hero "https://github.com/florianbouchart/portfolio/blob/main/src/components/HeroCanvas.tsx"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_app,node_nav,node_transitions toneBlue
class node_home,node_realisations,node_projects,node_education,node_certifications,node_recommendations,node_profile,node_contact,node_notfound toneAmber
class node_profiledata,node_projectdata,node_casedata,node_educationdata,node_certdata,node_recommendationdata,node_faqdata toneMint
class node_i18n,node_motion,node_preloader,node_hero toneRose
class node_visitor toneIndigo
```

## Components

### Routing and shell

- [App and routes](https://github.com/florianbouchart/portfolio/blob/main/src/App.tsx): `src/App.tsx`
- [Navigation](https://github.com/florianbouchart/portfolio/blob/main/src/components/Nav.tsx): `src/components/Nav.tsx`
- [Page transitions](https://github.com/florianbouchart/portfolio/blob/main/src/lib/transition.tsx): `src/lib/transition.tsx`

### Portfolio pages

- [Home](https://github.com/florianbouchart/portfolio/blob/main/src/pages/Home.tsx): `src/pages/Home.tsx`
- [Case studies](https://github.com/florianbouchart/portfolio/blob/main/src/pages/Realisations.tsx): `src/pages/Realisations.tsx`
- [Projects](https://github.com/florianbouchart/portfolio/blob/main/src/pages/Projets.tsx): `src/pages/Projets.tsx`
- [Education](https://github.com/florianbouchart/portfolio/blob/main/src/sections/Education.tsx): `src/sections/Education.tsx`
- [Certifications](https://github.com/florianbouchart/portfolio/blob/main/src/sections/Certifications.tsx): `src/sections/Certifications.tsx`
- [Recommendations](https://github.com/florianbouchart/portfolio/blob/main/src/pages/Recommandations.tsx): `src/pages/Recommandations.tsx`
- [Profile](https://github.com/florianbouchart/portfolio/blob/main/src/sections/Profil.tsx): `src/sections/Profil.tsx`
- [Contact and FAQ](https://github.com/florianbouchart/portfolio/blob/main/src/sections/Contact.tsx): `src/sections/Contact.tsx`
- [Not found](https://github.com/florianbouchart/portfolio/blob/main/src/pages/NotFound.tsx): `src/pages/NotFound.tsx`

### Editorial content

- [Profile content](https://github.com/florianbouchart/portfolio/blob/main/src/content/profile.ts): `src/content/profile.ts`
- [Project content](https://github.com/florianbouchart/portfolio/blob/main/src/content/projects.ts): `src/content/projects.ts`
- [Case study content](https://github.com/florianbouchart/portfolio/blob/main/src/content/cases.ts): `src/content/cases.ts`
- [Course content](https://github.com/florianbouchart/portfolio/blob/main/src/content/education.ts): `src/content/education.ts`
- [Certification content](https://github.com/florianbouchart/portfolio/blob/main/src/content/certifications.ts): `src/content/certifications.ts`
- [Recommendation content](https://github.com/florianbouchart/portfolio/blob/main/src/content/recommendations.ts): `src/content/recommendations.ts`
- [FAQ content](https://github.com/florianbouchart/portfolio/blob/main/src/content/faq.ts): `src/content/faq.ts`

### Interaction and motion

- [Locale provider](https://github.com/florianbouchart/portfolio/blob/main/src/lib/i18n.tsx): `src/lib/i18n.tsx`
- [Motion utilities](https://github.com/florianbouchart/portfolio/blob/main/src/lib/motion.ts): `src/lib/motion.ts`
- [Preloader](https://github.com/florianbouchart/portfolio/blob/main/src/components/Preloader.tsx): `src/components/Preloader.tsx`
- [Hero canvas](https://github.com/florianbouchart/portfolio/blob/main/src/components/HeroCanvas.tsx): `src/components/HeroCanvas.tsx`

### Other components

- **Visitor**

## Connections

- Visitor → App and routes: opens site
- App and routes → Navigation: renders shell
- App and routes → Page transitions: provides transitions
- App and routes → Home: routes to
- App and routes → Case studies: routes to
- App and routes → Projects: routes to
- App and routes → Education: routes to
- App and routes → Certifications: routes to
- App and routes → Recommendations: routes to
- App and routes → Profile: routes to
- App and routes → Contact and FAQ: routes to
- App and routes → Not found: fallback route
- Navigation → Page transitions: links through
- Page transitions → App and routes: navigates routes
- Home → Profile content: reads
- Home → Project content: reads
- Case studies → Case study content: presents cases
- Projects → Project content: presents projects
- Education → Course content: searches and filters
- Certifications → Certification content: displays credentials
- Recommendations → Recommendation content: presents references
- Contact and FAQ → FAQ content: presents FAQ
- App and routes → Locale provider: wraps application
- Home → Motion utilities: uses animations
- Education → Motion utilities: uses reveals
- App and routes → Preloader: renders at startup
- Home → Hero canvas: renders hero scene
- Hero canvas → Motion utilities: checks motion preferences