# eccureuil/portfolio-tsitohaina architecture

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

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

## Overview

This is a personal portfolio website presenting the developer, skills, experience, projects, and contact options. A visitor enters through the routed React app, browses the home, about, and projects pages, then can submit the contact form; the contact page sends submissions through EmailJS. Shared layout and UI components support these pages, while portfolio content is held in a local data module. The projects-page implementation was not sampled, so its internal rendering and data wiring are not asserted.

Main entry points: [`src/pages/acceuil.tsx`](https://github.com/eccureuil/portfolio-tsitohaina/blob/main/src/pages/acceuil.tsx) (Home page), [`src/main.tsx`](https://github.com/eccureuil/portfolio-tsitohaina/blob/main/src/main.tsx) (Router entry), [`src/pages/about.tsx`](https://github.com/eccureuil/portfolio-tsitohaina/blob/main/src/pages/about.tsx) (About page), [`src/pages/contact.tsx`](https://github.com/eccureuil/portfolio-tsitohaina/blob/main/src/pages/contact.tsx) (Contact page)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_routing["App and routing"]
  node_main["Router entry<br/>[main.tsx]"]
  node_app["App shell<br/>[App.tsx]"]
end

subgraph group_content["Portfolio content"]
  node_home["Home page<br/>[acceuil.tsx]"]
  node_about["About page<br/>[about.tsx]"]
  node_projects["Projects page<br/>[mes-projets.tsx]"]
  node_portfolio["Portfolio data<br/>[portfolio.ts]"]
  node_cv["CV document<br/>[cv-tsitohaina.pdf]"]
end

subgraph group_shared["Shared presentation"]
  node_navbar["Navigation bar<br/>[Navbar.tsx]"]
  node_footer["Footer<br/>[Footer.tsx]"]
  node_aurora["Aurora background"]
  node_projectcard["Project card<br/>[ProjectCard.tsx]"]
  node_skillbar["Skill bar<br/>[SkillBar.tsx]"]
  node_sectionheader["Section header<br/>[SectionHeader.tsx]"]
  node_fadein["Fade-in hook<br/>[useFadeIn.ts]"]
  node_social["Social icons<br/>[SocialIcons.tsx]"]
end

subgraph group_contact["Contact"]
  node_contactpage["Contact page<br/>[contact.tsx]"]
end

node_visitor(("Visitor"))
node_browser(("Web browser"))
node_emailjs{{"EmailJS service"}}

node_visitor -->|"opens site"| node_browser
node_browser -->|"loads app"| node_main
node_main -->|"routes shell"| node_app
node_main -->|"routes index"| node_home
node_main -->|"routes about"| node_about
node_main -->|"routes projects"| node_projects
node_main -->|"routes contact"| node_contactpage
node_app -->|"renders"| node_navbar
node_app -->|"renders"| node_footer
node_app -->|"renders"| node_aurora
node_home -->|"reads projects and skills"| node_portfolio
node_about -->|"reads skills and experience"| node_portfolio
node_home -->|"renders cards"| node_projectcard
node_home -->|"renders skills"| node_skillbar
node_about -->|"renders skills"| node_skillbar
node_home -->|"renders headings"| node_sectionheader
node_about -->|"renders headings"| node_sectionheader
node_contactpage -->|"renders heading"| node_sectionheader
node_home -->|"uses animation hook"| node_fadein
node_about -->|"uses animation hook"| node_fadein
node_contactpage -->|"uses animation hook"| node_fadein
node_contactpage -->|"sends form"| node_emailjs
node_contactpage -->|"renders icons"| node_social
node_footer -->|"renders icons"| node_social
node_home -->|"links download"| node_cv

click node_main "https://github.com/eccureuil/portfolio-tsitohaina/blob/main/src/main.tsx"
click node_app "https://github.com/eccureuil/portfolio-tsitohaina/blob/main/src/App.tsx"
click node_home "https://github.com/eccureuil/portfolio-tsitohaina/blob/main/src/pages/acceuil.tsx"
click node_about "https://github.com/eccureuil/portfolio-tsitohaina/blob/main/src/pages/about.tsx"
click node_projects "https://github.com/eccureuil/portfolio-tsitohaina/blob/main/src/pages/mes-projets.tsx"
click node_contactpage "https://github.com/eccureuil/portfolio-tsitohaina/blob/main/src/pages/contact.tsx"
click node_portfolio "https://github.com/eccureuil/portfolio-tsitohaina/blob/main/src/data/portfolio.ts"
click node_navbar "https://github.com/eccureuil/portfolio-tsitohaina/blob/main/src/components/layout/Navbar.tsx"
click node_footer "https://github.com/eccureuil/portfolio-tsitohaina/blob/main/src/components/layout/Footer.tsx"
click node_aurora "https://github.com/eccureuil/portfolio-tsitohaina/blob/main/src/components/layout/Aurorabackground.tsx"
click node_projectcard "https://github.com/eccureuil/portfolio-tsitohaina/blob/main/src/components/ui/ProjectCard.tsx"
click node_skillbar "https://github.com/eccureuil/portfolio-tsitohaina/blob/main/src/components/ui/SkillBar.tsx"
click node_sectionheader "https://github.com/eccureuil/portfolio-tsitohaina/blob/main/src/components/ui/SectionHeader.tsx"
click node_fadein "https://github.com/eccureuil/portfolio-tsitohaina/blob/main/src/hooks/useFadeIn.ts"
click node_social "https://github.com/eccureuil/portfolio-tsitohaina/blob/main/src/components/ui/SocialIcons.tsx"
click node_cv "https://github.com/eccureuil/portfolio-tsitohaina/blob/main/public/cv-tsitohaina.pdf"

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_main,node_app,node_browser toneBlue
class node_home,node_about,node_projects,node_portfolio,node_cv toneAmber
class node_navbar,node_footer,node_aurora,node_projectcard,node_skillbar,node_sectionheader,node_fadein,node_social toneMint
class node_contactpage toneRose
class node_visitor,node_emailjs toneIndigo
```

## Components

### App and routing

- [Router entry](https://github.com/eccureuil/portfolio-tsitohaina/blob/main/src/main.tsx): `src/main.tsx`
- [App shell](https://github.com/eccureuil/portfolio-tsitohaina/blob/main/src/App.tsx): `src/App.tsx`

### Portfolio content

- [Home page](https://github.com/eccureuil/portfolio-tsitohaina/blob/main/src/pages/acceuil.tsx): `src/pages/acceuil.tsx`
- [About page](https://github.com/eccureuil/portfolio-tsitohaina/blob/main/src/pages/about.tsx): `src/pages/about.tsx`
- [Projects page](https://github.com/eccureuil/portfolio-tsitohaina/blob/main/src/pages/mes-projets.tsx): `src/pages/mes-projets.tsx`
- [Portfolio data](https://github.com/eccureuil/portfolio-tsitohaina/blob/main/src/data/portfolio.ts): `src/data/portfolio.ts`
- [CV document](https://github.com/eccureuil/portfolio-tsitohaina/blob/main/public/cv-tsitohaina.pdf): `public/cv-tsitohaina.pdf`

### Shared presentation

- [Navigation bar](https://github.com/eccureuil/portfolio-tsitohaina/blob/main/src/components/layout/Navbar.tsx): `src/components/layout/Navbar.tsx`
- [Footer](https://github.com/eccureuil/portfolio-tsitohaina/blob/main/src/components/layout/Footer.tsx): `src/components/layout/Footer.tsx`
- [Aurora background](https://github.com/eccureuil/portfolio-tsitohaina/blob/main/src/components/layout/Aurorabackground.tsx): `src/components/layout/Aurorabackground.tsx`
- [Project card](https://github.com/eccureuil/portfolio-tsitohaina/blob/main/src/components/ui/ProjectCard.tsx): `src/components/ui/ProjectCard.tsx`
- [Skill bar](https://github.com/eccureuil/portfolio-tsitohaina/blob/main/src/components/ui/SkillBar.tsx): `src/components/ui/SkillBar.tsx`
- [Section header](https://github.com/eccureuil/portfolio-tsitohaina/blob/main/src/components/ui/SectionHeader.tsx): `src/components/ui/SectionHeader.tsx`
- [Fade-in hook](https://github.com/eccureuil/portfolio-tsitohaina/blob/main/src/hooks/useFadeIn.ts): `src/hooks/useFadeIn.ts`
- [Social icons](https://github.com/eccureuil/portfolio-tsitohaina/blob/main/src/components/ui/SocialIcons.tsx): `src/components/ui/SocialIcons.tsx`

### Contact

- [Contact page](https://github.com/eccureuil/portfolio-tsitohaina/blob/main/src/pages/contact.tsx): `src/pages/contact.tsx`

### Other components

- **Visitor**
- **Web browser**
- **EmailJS service**

## Connections

- Visitor → Web browser: opens site
- Web browser → Router entry: loads app
- Router entry → App shell: routes shell
- Router entry → Home page: routes index
- Router entry → About page: routes about
- Router entry → Projects page: routes projects
- Router entry → Contact page: routes contact
- App shell → Navigation bar: renders
- App shell → Footer: renders
- App shell → Aurora background: renders
- Home page → Portfolio data: reads projects and skills
- About page → Portfolio data: reads skills and experience
- Home page → Project card: renders cards
- Home page → Skill bar: renders skills
- About page → Skill bar: renders skills
- Home page → Section header: renders headings
- About page → Section header: renders headings
- Contact page → Section header: renders heading
- Home page → Fade-in hook: uses animation hook
- About page → Fade-in hook: uses animation hook
- Contact page → Fade-in hook: uses animation hook
- Contact page → EmailJS service: sends form
- Contact page → Social icons: renders icons
- Footer → Social icons: renders icons
- Home page → CV document: links download