How eccureuil/portfolio-tsitohaina works
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: acceuil.tsx Home page · main.tsx Router entry · about.tsx About page · contact.tsx Contact page
Components 19
App and routing
- Router entry
src/main.tsx - App shell
src/App.tsx
Portfolio content
- Home page
src/pages/acceuil.tsx - About page
src/pages/about.tsx - Projects page
src/pages/mes-projets.tsx - Portfolio data
src/data/portfolio.ts - CV document
public/cv-tsitohaina.pdf
Shared presentation
- Navigation bar
src/components/layout/Navbar.tsx - Footer
src/components/layout/Footer.tsx - Aurora background
src/components/layout/Aurorabackground.tsx - Project card
src/components/ui/ProjectCard.tsx - Skill bar
src/components/ui/SkillBar.tsx - Section header
src/components/ui/SectionHeader.tsx - Fade-in hook
src/hooks/useFadeIn.ts - Social icons
src/components/ui/SocialIcons.tsx
Contact
- Contact page
src/pages/contact.tsx
Other components
- Visitor
- Web browser
- EmailJS service
Connections 25
- 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