# patriciasegantine/portfolio architecture

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

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

## Overview

This is a personal engineering portfolio: visitors browse selected work and detailed case studies, explore the engineer’s background and skills, and can send a contact message. Project content is fetched from an external content source for server-rendered routes or through a projects API for client-side browsing; contact submissions are validated and emailed to both the portfolio owner and sender. README capabilities such as responsive presentation, theme selection, and reveal effects are represented at the page/component level. Detailed project-route wiring was not sampled, so its internal transitions are intentionally not inferred.

Main entry points: [`src/app/page.tsx`](https://github.com/patriciasegantine/portfolio/blob/main/src/app/page.tsx) (Home page), [`src/app/api/sendEmail/route.ts`](https://github.com/patriciasegantine/portfolio/blob/main/src/app/api/sendEmail/route.ts) (Email API), [`src/app/projects/[slug]/page.tsx`](https://github.com/patriciasegantine/portfolio/blob/main/src/app/projects/%5Bslug%5D/page.tsx) (Case study route), [`src/app/layout.tsx`](https://github.com/patriciasegantine/portfolio/blob/main/src/app/layout.tsx) (Shared layout)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_presentation["Portfolio presentation"]
  node_layout["Shared layout<br/>[layout.tsx]"]
  node_home["Home page<br/>[page.tsx]"]
  node_about["About section<br/>[About.tsx]"]
  node_skills["Skills section<br/>[Skills.tsx]"]
  node_beyond["Beyond-code section<br/>[BeyondCode.tsx]"]
  node_theme["Theme controls"]
end

subgraph group_projects["Project discovery"]
  node_projects_section["Featured projects<br/>[Projects.tsx]"]
  node_all_projects_page["All projects page<br/>[page.tsx]"]
  node_all_projects["Project listing<br/>[AllProjects.tsx]"]
  node_project_card["Project card<br/>[ProjectCard.tsx]"]
  node_project_details["Case study route<br/>[page.tsx]"]
  node_case_study["Case study content"]
end

subgraph group_content["Content access"]
  node_project_api["Projects API<br/>[route.ts]"]
  node_server_content["Server content fetch"]
  node_client_content["Client content service"]
  node_remote_hook["Remote content hook"]
end

subgraph group_contact["Contact workflow"]
  node_contact_section["Contact section<br/>[Contact.tsx]"]
  node_contact_form["Contact form<br/>[ContactForm.tsx]"]
  node_send_hook["Email submission hook<br/>[useSendEmail.ts]"]
  node_email_api["Email API<br/>[route.ts]"]
  node_mail_service["SMTP service"]
  node_email_templates["Email templates"]
  node_confirmation_template["Confirmation template"]
end

node_visitor(("Visitor"))
node_external_content[("External project content")]
node_owner(("Portfolio owner"))

node_visitor -->|"opens"| node_layout
node_layout -->|"renders"| node_home
node_home -->|"presents"| node_about
node_home -->|"presents"| node_skills
node_home -->|"presents"| node_beyond
node_home -->|"presents"| node_projects_section
node_home -->|"presents"| node_contact_section
node_layout -->|"provides"| node_theme
node_visitor -->|"opens"| node_all_projects_page
node_all_projects_page -->|"renders"| node_all_projects
node_projects_section -->|"displays"| node_project_card
node_all_projects -->|"displays"| node_project_card
node_project_card -->|"opens case study"| node_project_details
node_visitor -->|"opens"| node_project_details
node_project_details -->|"renders"| node_case_study
node_all_projects -->|"loads content"| node_remote_hook
node_remote_hook -->|"invokes"| node_client_content
node_client_content -->|"requests"| node_project_api
node_project_api -->|"fetches"| node_server_content
node_server_content -->|"reads"| node_external_content
node_project_details -->|"fetches content"| node_server_content
node_visitor -->|"submits message"| node_contact_form
node_contact_section -->|"renders"| node_contact_form
node_contact_form -->|"submits"| node_send_hook
node_send_hook -->|"posts"| node_email_api
node_email_api -->|"renders owner email"| node_email_templates
node_email_api -->|"renders reply"| node_confirmation_template
node_email_api -->|"sends mail"| node_mail_service
node_mail_service -->|"delivers message"| node_owner
node_mail_service -->|"delivers confirmation"| node_visitor

click node_layout "https://github.com/patriciasegantine/portfolio/blob/main/src/app/layout.tsx"
click node_home "https://github.com/patriciasegantine/portfolio/blob/main/src/app/page.tsx"
click node_about "https://github.com/patriciasegantine/portfolio/blob/main/src/components/section/About/About.tsx"
click node_skills "https://github.com/patriciasegantine/portfolio/blob/main/src/components/section/Skills/Skills.tsx"
click node_beyond "https://github.com/patriciasegantine/portfolio/blob/main/src/components/section/BeyondCode/BeyondCode.tsx"
click node_theme "https://github.com/patriciasegantine/portfolio/blob/main/src/components/ui/ToggleThemeButton/ToggleThemeButton.tsx"
click node_projects_section "https://github.com/patriciasegantine/portfolio/blob/main/src/components/section/Projects/Projects.tsx"
click node_all_projects_page "https://github.com/patriciasegantine/portfolio/blob/main/src/app/all-projects/page.tsx"
click node_all_projects "https://github.com/patriciasegantine/portfolio/blob/main/src/app/projects/AllProjects.tsx"
click node_project_card "https://github.com/patriciasegantine/portfolio/blob/main/src/components/ui/ProjectCard/ProjectCard.tsx"
click node_project_details "https://github.com/patriciasegantine/portfolio/blob/main/src/app/projects/%5Bslug%5D/page.tsx"
click node_case_study "https://github.com/patriciasegantine/portfolio/blob/main/src/app/projects/%5Bslug%5D/components/ProjectDetailsSection.tsx"
click node_project_api "https://github.com/patriciasegantine/portfolio/blob/main/src/app/api/projects/route.ts"
click node_server_content "https://github.com/patriciasegantine/portfolio/blob/main/src/services/content/contentServerService.ts"
click node_client_content "https://github.com/patriciasegantine/portfolio/blob/main/src/services/content/contentClientService.ts"
click node_remote_hook "https://github.com/patriciasegantine/portfolio/blob/main/src/hook/useRemoteContent.ts"
click node_contact_section "https://github.com/patriciasegantine/portfolio/blob/main/src/components/section/Contact/Contact.tsx"
click node_contact_form "https://github.com/patriciasegantine/portfolio/blob/main/src/components/ui/ContactForm/ContactForm.tsx"
click node_send_hook "https://github.com/patriciasegantine/portfolio/blob/main/src/hook/useSendEmail.ts"
click node_email_api "https://github.com/patriciasegantine/portfolio/blob/main/src/app/api/sendEmail/route.ts"
click node_email_templates "https://github.com/patriciasegantine/portfolio/blob/main/src/utils/personalInboxTemplate.ts"
click node_confirmation_template "https://github.com/patriciasegantine/portfolio/blob/main/src/utils/confirmationTemplate.ts"

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_layout,node_home,node_about,node_skills,node_beyond,node_theme toneBlue
class node_projects_section,node_all_projects_page,node_all_projects,node_project_card,node_project_details,node_case_study,node_external_content toneAmber
class node_project_api,node_server_content,node_client_content,node_remote_hook toneMint
class node_contact_section,node_contact_form,node_send_hook,node_email_api,node_mail_service,node_email_templates,node_confirmation_template toneRose
class node_visitor,node_owner toneIndigo
```

## Components

### Portfolio presentation

- [Shared layout](https://github.com/patriciasegantine/portfolio/blob/main/src/app/layout.tsx): `src/app/layout.tsx`
- [Home page](https://github.com/patriciasegantine/portfolio/blob/main/src/app/page.tsx): `src/app/page.tsx`
- [About section](https://github.com/patriciasegantine/portfolio/blob/main/src/components/section/About/About.tsx): `src/components/section/About/About.tsx`
- [Skills section](https://github.com/patriciasegantine/portfolio/blob/main/src/components/section/Skills/Skills.tsx): `src/components/section/Skills/Skills.tsx`
- [Beyond-code section](https://github.com/patriciasegantine/portfolio/blob/main/src/components/section/BeyondCode/BeyondCode.tsx): `src/components/section/BeyondCode/BeyondCode.tsx`
- [Theme controls](https://github.com/patriciasegantine/portfolio/blob/main/src/components/ui/ToggleThemeButton/ToggleThemeButton.tsx): `src/components/ui/ToggleThemeButton/ToggleThemeButton.tsx`

### Project discovery

- [Featured projects](https://github.com/patriciasegantine/portfolio/blob/main/src/components/section/Projects/Projects.tsx): `src/components/section/Projects/Projects.tsx`
- [All projects page](https://github.com/patriciasegantine/portfolio/blob/main/src/app/all-projects/page.tsx): `src/app/all-projects/page.tsx`
- [Project listing](https://github.com/patriciasegantine/portfolio/blob/main/src/app/projects/AllProjects.tsx): `src/app/projects/AllProjects.tsx`
- [Project card](https://github.com/patriciasegantine/portfolio/blob/main/src/components/ui/ProjectCard/ProjectCard.tsx): `src/components/ui/ProjectCard/ProjectCard.tsx`
- [Case study route](https://github.com/patriciasegantine/portfolio/blob/main/src/app/projects/%5Bslug%5D/page.tsx): `src/app/projects/[slug]/page.tsx`
- [Case study content](https://github.com/patriciasegantine/portfolio/blob/main/src/app/projects/%5Bslug%5D/components/ProjectDetailsSection.tsx): `src/app/projects/[slug]/components/ProjectDetailsSection.tsx`

### Content access

- [Projects API](https://github.com/patriciasegantine/portfolio/blob/main/src/app/api/projects/route.ts): `src/app/api/projects/route.ts`
- [Server content fetch](https://github.com/patriciasegantine/portfolio/blob/main/src/services/content/contentServerService.ts): `src/services/content/contentServerService.ts`
- [Client content service](https://github.com/patriciasegantine/portfolio/blob/main/src/services/content/contentClientService.ts): `src/services/content/contentClientService.ts`
- [Remote content hook](https://github.com/patriciasegantine/portfolio/blob/main/src/hook/useRemoteContent.ts): `src/hook/useRemoteContent.ts`

### Contact workflow

- [Contact section](https://github.com/patriciasegantine/portfolio/blob/main/src/components/section/Contact/Contact.tsx): `src/components/section/Contact/Contact.tsx`
- [Contact form](https://github.com/patriciasegantine/portfolio/blob/main/src/components/ui/ContactForm/ContactForm.tsx): `src/components/ui/ContactForm/ContactForm.tsx`
- [Email submission hook](https://github.com/patriciasegantine/portfolio/blob/main/src/hook/useSendEmail.ts): `src/hook/useSendEmail.ts`
- [Email API](https://github.com/patriciasegantine/portfolio/blob/main/src/app/api/sendEmail/route.ts): `src/app/api/sendEmail/route.ts`
- **SMTP service**
- [Email templates](https://github.com/patriciasegantine/portfolio/blob/main/src/utils/personalInboxTemplate.ts): `src/utils/personalInboxTemplate.ts`
- [Confirmation template](https://github.com/patriciasegantine/portfolio/blob/main/src/utils/confirmationTemplate.ts): `src/utils/confirmationTemplate.ts`

### Other components

- **Visitor**
- **External project content**
- **Portfolio owner**

## Connections

- Visitor → Shared layout: opens
- Shared layout → Home page: renders
- Home page → About section: presents
- Home page → Skills section: presents
- Home page → Beyond-code section: presents
- Home page → Featured projects: presents
- Home page → Contact section: presents
- Shared layout → Theme controls: provides
- Visitor → All projects page: opens
- All projects page → Project listing: renders
- Featured projects → Project card: displays
- Project listing → Project card: displays
- Project card → Case study route: opens case study
- Visitor → Case study route: opens
- Case study route → Case study content: renders
- Project listing → Remote content hook: loads content
- Remote content hook → Client content service: invokes
- Client content service → Projects API: requests
- Projects API → Server content fetch: fetches
- Server content fetch → External project content: reads
- Case study route → Server content fetch: fetches content
- Visitor → Contact form: submits message
- Contact section → Contact form: renders
- Contact form → Email submission hook: submits
- Email submission hook → Email API: posts
- Email API → Email templates: renders owner email
- Email API → Confirmation template: renders reply
- Email API → SMTP service: sends mail
- SMTP service → Portfolio owner: delivers message
- SMTP service → Visitor: delivers confirmation