# firat-o/portfolio architecture

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

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

## Overview

This repository is a personal portfolio website with a contact-form email endpoint. Visitors enter through the React app, browse portfolio and profile content, and can submit a message that the API validates and sends through Resend. The tree and sampled source support the routes, contact flow, and notification plumbing; Home’s internal composition was not sampled, so its section connections reflect the component structure indicated by filenames rather than inspected imports.

Main entry points: [`src/pages/Home.jsx`](https://github.com/firat-o/portfolio/blob/master/src/pages/Home.jsx) (Portfolio home), [`src/App.jsx`](https://github.com/firat-o/portfolio/blob/master/src/App.jsx) (React application), [`src/components/ContactSection.jsx`](https://github.com/firat-o/portfolio/blob/master/src/components/ContactSection.jsx) (Contact form), [`src/components/ui/toaster.jsx`](https://github.com/firat-o/portfolio/blob/master/src/components/ui/toaster.jsx) (Toast container)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application and routes"]
  node_app["React application<br/>[App.jsx]"]
  node_home["Portfolio home<br/>[Home.jsx]"]
  node_impressum["Impressum page<br/>[Impressum.jsx]"]
  node_privacy["Privacy page<br/>[Privacy.jsx]"]
  node_notfound["Not found page<br/>[NotFound.jsx]"]
end

subgraph group_portfolio["Portfolio content"]
  node_about["About section<br/>[AboutSection.jsx]"]
  node_dev["Developer section<br/>[DevSection.jsx]"]
  node_skills["Skills section<br/>[SkillsSection.jsx]"]
  node_projects["Projects section"]
  node_cv["CV document<br/>[Firato_CV.pdf]"]
end

subgraph group_contact["Contact and messaging"]
  node_contact["Contact form<br/>[ContactSection.jsx]"]
  node_send["Email endpoint<br/>[send.js]"]
  node_hook["Toast state hook<br/>[use-toast.js]"]
  node_toaster["Toast container<br/>[toaster.jsx]"]
  node_toastui["Toast primitives<br/>[toast.jsx]"]
end

subgraph group_presentation["Shared presentation"]
  node_navbar["Navigation bar<br/>[Navbar.jsx]"]
  node_footer["Site footer<br/>[Footer.jsx]"]
  node_effects["Visual effects<br/>[StarBackground.jsx]"]
  node_cursor["Custom cursor<br/>[CustomCursor.jsx]"]
  node_theme["Theme toggle<br/>[ThemeToggle.jsx]"]
end

node_visitor(("Site visitor"))
node_resend["Resend email service"]

node_visitor -->|"opens"| node_app
node_app -->|"routes to"| node_home
node_app -->|"routes to"| node_impressum
node_app -->|"routes to"| node_privacy
node_app -->|"routes to"| node_notfound
node_home -->|"presents"| node_about
node_home -->|"presents"| node_dev
node_home -->|"presents"| node_skills
node_home -->|"presents"| node_projects
node_home -->|"presents"| node_contact
node_projects -->|"links to"| node_cv
node_contact -->|"POSTs form"| node_send
node_send -->|"sends email"| node_resend
node_contact -->|"raises notifications"| node_hook
node_toaster -->|"reads toast state"| node_hook
node_toaster -->|"renders"| node_toastui
node_app -->|"mounts"| node_toaster
node_app -->|"mounts"| node_cursor
node_home -->|"presents"| node_navbar
node_home -->|"presents"| node_footer
node_home -->|"presents"| node_effects
node_home -->|"presents"| node_theme

click node_app "https://github.com/firat-o/portfolio/blob/master/src/App.jsx"
click node_home "https://github.com/firat-o/portfolio/blob/master/src/pages/Home.jsx"
click node_impressum "https://github.com/firat-o/portfolio/blob/master/src/pages/Impressum.jsx"
click node_privacy "https://github.com/firat-o/portfolio/blob/master/src/pages/Privacy.jsx"
click node_notfound "https://github.com/firat-o/portfolio/blob/master/src/pages/NotFound.jsx"
click node_about "https://github.com/firat-o/portfolio/blob/master/src/components/AboutSection.jsx"
click node_dev "https://github.com/firat-o/portfolio/blob/master/src/components/DevSection.jsx"
click node_skills "https://github.com/firat-o/portfolio/blob/master/src/components/SkillsSection.jsx"
click node_projects "https://github.com/firat-o/portfolio/blob/master/src/components/ProjectsSection.jsx"
click node_cv "https://github.com/firat-o/portfolio/blob/master/public/projects/Firato_CV.pdf"
click node_contact "https://github.com/firat-o/portfolio/blob/master/src/components/ContactSection.jsx"
click node_send "https://github.com/firat-o/portfolio/blob/master/api/send.js"
click node_navbar "https://github.com/firat-o/portfolio/blob/master/src/components/Navbar.jsx"
click node_footer "https://github.com/firat-o/portfolio/blob/master/src/components/Footer.jsx"
click node_effects "https://github.com/firat-o/portfolio/blob/master/src/components/StarBackground.jsx"
click node_cursor "https://github.com/firat-o/portfolio/blob/master/src/components/CustomCursor.jsx"
click node_theme "https://github.com/firat-o/portfolio/blob/master/src/components/ThemeToggle.jsx"
click node_hook "https://github.com/firat-o/portfolio/blob/master/src/hooks/use-toast.js"
click node_toaster "https://github.com/firat-o/portfolio/blob/master/src/components/ui/toaster.jsx"
click node_toastui "https://github.com/firat-o/portfolio/blob/master/src/components/ui/toast.jsx"

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_home,node_impressum,node_privacy,node_notfound toneBlue
class node_about,node_dev,node_skills,node_projects,node_cv toneAmber
class node_contact,node_send,node_hook,node_toaster,node_toastui toneMint
class node_navbar,node_footer,node_effects,node_cursor,node_theme toneRose
class node_visitor,node_resend toneIndigo
```

## Components

### Application and routes

- [React application](https://github.com/firat-o/portfolio/blob/master/src/App.jsx): `src/App.jsx`
- [Portfolio home](https://github.com/firat-o/portfolio/blob/master/src/pages/Home.jsx): `src/pages/Home.jsx`
- [Impressum page](https://github.com/firat-o/portfolio/blob/master/src/pages/Impressum.jsx): `src/pages/Impressum.jsx`
- [Privacy page](https://github.com/firat-o/portfolio/blob/master/src/pages/Privacy.jsx): `src/pages/Privacy.jsx`
- [Not found page](https://github.com/firat-o/portfolio/blob/master/src/pages/NotFound.jsx): `src/pages/NotFound.jsx`

### Portfolio content

- [About section](https://github.com/firat-o/portfolio/blob/master/src/components/AboutSection.jsx): `src/components/AboutSection.jsx`
- [Developer section](https://github.com/firat-o/portfolio/blob/master/src/components/DevSection.jsx): `src/components/DevSection.jsx`
- [Skills section](https://github.com/firat-o/portfolio/blob/master/src/components/SkillsSection.jsx): `src/components/SkillsSection.jsx`
- [Projects section](https://github.com/firat-o/portfolio/blob/master/src/components/ProjectsSection.jsx): `src/components/ProjectsSection.jsx`
- [CV document](https://github.com/firat-o/portfolio/blob/master/public/projects/Firato_CV.pdf): `public/projects/Firato_CV.pdf`

### Contact and messaging

- [Contact form](https://github.com/firat-o/portfolio/blob/master/src/components/ContactSection.jsx): `src/components/ContactSection.jsx`
- [Email endpoint](https://github.com/firat-o/portfolio/blob/master/api/send.js): `api/send.js`
- [Toast state hook](https://github.com/firat-o/portfolio/blob/master/src/hooks/use-toast.js): `src/hooks/use-toast.js`
- [Toast container](https://github.com/firat-o/portfolio/blob/master/src/components/ui/toaster.jsx): `src/components/ui/toaster.jsx`
- [Toast primitives](https://github.com/firat-o/portfolio/blob/master/src/components/ui/toast.jsx): `src/components/ui/toast.jsx`

### Shared presentation

- [Navigation bar](https://github.com/firat-o/portfolio/blob/master/src/components/Navbar.jsx): `src/components/Navbar.jsx`
- [Site footer](https://github.com/firat-o/portfolio/blob/master/src/components/Footer.jsx): `src/components/Footer.jsx`
- [Visual effects](https://github.com/firat-o/portfolio/blob/master/src/components/StarBackground.jsx): `src/components/StarBackground.jsx`
- [Custom cursor](https://github.com/firat-o/portfolio/blob/master/src/components/CustomCursor.jsx): `src/components/CustomCursor.jsx`
- [Theme toggle](https://github.com/firat-o/portfolio/blob/master/src/components/ThemeToggle.jsx): `src/components/ThemeToggle.jsx`

### Other components

- **Site visitor**
- **Resend email service**

## Connections

- Site visitor → React application: opens
- React application → Portfolio home: routes to
- React application → Impressum page: routes to
- React application → Privacy page: routes to
- React application → Not found page: routes to
- Portfolio home → About section: presents
- Portfolio home → Developer section: presents
- Portfolio home → Skills section: presents
- Portfolio home → Projects section: presents
- Portfolio home → Contact form: presents
- Projects section → CV document: links to
- Contact form → Email endpoint: POSTs form
- Email endpoint → Resend email service: sends email
- Contact form → Toast state hook: raises notifications
- Toast container → Toast state hook: reads toast state
- Toast container → Toast primitives: renders
- React application → Toast container: mounts
- React application → Custom cursor: mounts
- Portfolio home → Navigation bar: presents
- Portfolio home → Site footer: presents
- Portfolio home → Visual effects: presents
- Portfolio home → Theme toggle: presents