# inouzen/86-themed-portfolio architecture

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

- Interactive diagram: https://gitdiagram.com/inouzen/86-themed-portfolio
- Repository: https://github.com/inouzen/86-themed-portfolio

## Overview

This is a Next.js personal portfolio. Visitors enter through the shared site shell, navigate the home, about, projects, education, and contact pages, and can browse project and timeline content or initiate contact. A separate chat widget sends messages to the Lena API route. The graph also captures shared visual effects and settings. Edges reflect README statements and source-index references; unsampled implementations and integrations are not inferred beyond that evidence.

Main entry points: [`app/layout.js`](https://github.com/inouzen/86-themed-portfolio/blob/master/app/layout.js) (Site shell), [`lib/content.js`](https://github.com/inouzen/86-themed-portfolio/blob/master/lib/content.js) (Portfolio data), [`components/Jp.jsx`](https://github.com/inouzen/86-themed-portfolio/blob/master/components/Jp.jsx) (Japanese accents), [`components/FxProvider.jsx`](https://github.com/inouzen/86-themed-portfolio/blob/master/components/FxProvider.jsx) (Effects state)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_pages["Portfolio pages"]
  node_home["Home page<br/>[page.js]"]
  node_hero["Hero<br/>[Hero.jsx]"]
  node_about["About page<br/>[page.js]"]
  node_projects["Projects page<br/>[page.js]"]
  node_education["Education page<br/>[page.js]"]
  node_contact["Contact page<br/>[page.js]"]
end

subgraph group_content["Portfolio content"]
  node_contentdata["Portfolio data<br/>[content.js]"]
end

subgraph group_interactive["Interactive features"]
  node_sorties["Project carousel<br/>[Sorties.jsx]"]
  node_timeline["Education timeline<br/>[Timeline.jsx]"]
  node_contactform["Contact form<br/>[ContactForm.jsx]"]
  node_settings["Effects settings<br/>[Settings.jsx]"]
  node_chat["Lena chat<br/>[LenaChat.jsx]"]
  node_lenaapi["Lena API<br/>[route.js]"]
end

subgraph group_shell["Shared experience"]
  node_layout["Site shell<br/>[layout.js]"]
  node_header["Navigation and theme<br/>[Header.jsx]"]
  node_ticker["Ticker<br/>[Ticker.jsx]"]
  node_cursor["Cursor<br/>[Cursor.jsx]"]
  node_fx["Effects state<br/>[FxProvider.jsx]"]
  node_particles["Particle effects<br/>[Particles.jsx]"]
  node_reginleif["Reginleif effect<br/>[Reginleif.jsx]"]
  node_jp["Japanese accents<br/>[Jp.jsx]"]
end

node_visitor(("Visitor"))
node_emailapp(("Visitor email app"))

node_visitor -->|"opens site"| node_home
node_visitor -->|"opens page"| node_about
node_visitor -->|"opens page"| node_projects
node_visitor -->|"opens page"| node_education
node_visitor -->|"opens page"| node_contact
node_layout -->|"renders"| node_header
node_layout -->|"renders"| node_ticker
node_layout -->|"renders"| node_cursor
node_layout -->|"provides state"| node_fx
node_layout -->|"renders"| node_particles
node_layout -->|"renders"| node_reginleif
node_layout -->|"renders"| node_chat
node_layout -->|"renders"| node_settings
node_layout -->|"reads profile"| node_contentdata
node_home -->|"renders"| node_hero
node_hero -->|"reads profile"| node_contentdata
node_about -->|"reads content"| node_contentdata
node_about -->|"uses accents"| node_jp
node_projects -->|"renders"| node_sorties
node_projects -->|"reads quotes"| node_contentdata
node_projects -->|"uses accents"| node_jp
node_sorties -->|"reads projects"| node_contentdata
node_sorties -->|"uses accents"| node_jp
node_education -->|"renders"| node_timeline
node_education -->|"reads education"| node_contentdata
node_education -->|"uses accents"| node_jp
node_contact -->|"renders"| node_contactform
node_contact -->|"reads contact details"| node_contentdata
node_contact -->|"uses accents"| node_jp
node_contactform -->|"reads contact data"| node_contentdata
node_contactform -->|"opens email app"| node_emailapp
node_header -->|"opens settings"| node_fx
node_header -->|"uses accents"| node_jp
node_particles -->|"reads effects state"| node_fx
node_reginleif -->|"reads effects state"| node_fx
node_settings -->|"reads and updates"| node_fx
node_settings -->|"uses accents"| node_jp
node_chat -->|"posts messages"| node_lenaapi
node_chat -->|"uses accents"| node_jp

click node_layout "https://github.com/inouzen/86-themed-portfolio/blob/master/app/layout.js"
click node_home "https://github.com/inouzen/86-themed-portfolio/blob/master/app/page.js"
click node_hero "https://github.com/inouzen/86-themed-portfolio/blob/master/components/Hero.jsx"
click node_about "https://github.com/inouzen/86-themed-portfolio/blob/master/app/about/page.js"
click node_projects "https://github.com/inouzen/86-themed-portfolio/blob/master/app/projects/page.js"
click node_sorties "https://github.com/inouzen/86-themed-portfolio/blob/master/components/Sorties.jsx"
click node_education "https://github.com/inouzen/86-themed-portfolio/blob/master/app/education/page.js"
click node_timeline "https://github.com/inouzen/86-themed-portfolio/blob/master/components/Timeline.jsx"
click node_contact "https://github.com/inouzen/86-themed-portfolio/blob/master/app/contact/page.js"
click node_contactform "https://github.com/inouzen/86-themed-portfolio/blob/master/components/ContactForm.jsx"
click node_contentdata "https://github.com/inouzen/86-themed-portfolio/blob/master/lib/content.js"
click node_header "https://github.com/inouzen/86-themed-portfolio/blob/master/components/Header.jsx"
click node_ticker "https://github.com/inouzen/86-themed-portfolio/blob/master/components/Ticker.jsx"
click node_cursor "https://github.com/inouzen/86-themed-portfolio/blob/master/components/Cursor.jsx"
click node_fx "https://github.com/inouzen/86-themed-portfolio/blob/master/components/FxProvider.jsx"
click node_particles "https://github.com/inouzen/86-themed-portfolio/blob/master/components/Particles.jsx"
click node_reginleif "https://github.com/inouzen/86-themed-portfolio/blob/master/components/Reginleif.jsx"
click node_settings "https://github.com/inouzen/86-themed-portfolio/blob/master/components/Settings.jsx"
click node_chat "https://github.com/inouzen/86-themed-portfolio/blob/master/components/LenaChat.jsx"
click node_lenaapi "https://github.com/inouzen/86-themed-portfolio/blob/master/app/api/lena/route.js"
click node_jp "https://github.com/inouzen/86-themed-portfolio/blob/master/components/Jp.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_home,node_hero,node_about,node_projects,node_education,node_contact toneBlue
class node_contentdata toneAmber
class node_sorties,node_timeline,node_contactform,node_settings,node_chat,node_lenaapi toneMint
class node_layout,node_header,node_ticker,node_cursor,node_fx,node_particles,node_reginleif,node_jp toneRose
class node_visitor,node_emailapp toneIndigo
```

## Components

### Portfolio pages

- [Home page](https://github.com/inouzen/86-themed-portfolio/blob/master/app/page.js): `app/page.js`
- [Hero](https://github.com/inouzen/86-themed-portfolio/blob/master/components/Hero.jsx): `components/Hero.jsx`
- [About page](https://github.com/inouzen/86-themed-portfolio/blob/master/app/about/page.js): `app/about/page.js`
- [Projects page](https://github.com/inouzen/86-themed-portfolio/blob/master/app/projects/page.js): `app/projects/page.js`
- [Education page](https://github.com/inouzen/86-themed-portfolio/blob/master/app/education/page.js): `app/education/page.js`
- [Contact page](https://github.com/inouzen/86-themed-portfolio/blob/master/app/contact/page.js): `app/contact/page.js`

### Portfolio content

- [Portfolio data](https://github.com/inouzen/86-themed-portfolio/blob/master/lib/content.js): `lib/content.js`

### Interactive features

- [Project carousel](https://github.com/inouzen/86-themed-portfolio/blob/master/components/Sorties.jsx): `components/Sorties.jsx`
- [Education timeline](https://github.com/inouzen/86-themed-portfolio/blob/master/components/Timeline.jsx): `components/Timeline.jsx`
- [Contact form](https://github.com/inouzen/86-themed-portfolio/blob/master/components/ContactForm.jsx): `components/ContactForm.jsx`
- [Effects settings](https://github.com/inouzen/86-themed-portfolio/blob/master/components/Settings.jsx): `components/Settings.jsx`
- [Lena chat](https://github.com/inouzen/86-themed-portfolio/blob/master/components/LenaChat.jsx): `components/LenaChat.jsx`
- [Lena API](https://github.com/inouzen/86-themed-portfolio/blob/master/app/api/lena/route.js): `app/api/lena/route.js`

### Shared experience

- [Site shell](https://github.com/inouzen/86-themed-portfolio/blob/master/app/layout.js): `app/layout.js`
- [Navigation and theme](https://github.com/inouzen/86-themed-portfolio/blob/master/components/Header.jsx): `components/Header.jsx`
- [Ticker](https://github.com/inouzen/86-themed-portfolio/blob/master/components/Ticker.jsx): `components/Ticker.jsx`
- [Cursor](https://github.com/inouzen/86-themed-portfolio/blob/master/components/Cursor.jsx): `components/Cursor.jsx`
- [Effects state](https://github.com/inouzen/86-themed-portfolio/blob/master/components/FxProvider.jsx): `components/FxProvider.jsx`
- [Particle effects](https://github.com/inouzen/86-themed-portfolio/blob/master/components/Particles.jsx): `components/Particles.jsx`
- [Reginleif effect](https://github.com/inouzen/86-themed-portfolio/blob/master/components/Reginleif.jsx): `components/Reginleif.jsx`
- [Japanese accents](https://github.com/inouzen/86-themed-portfolio/blob/master/components/Jp.jsx): `components/Jp.jsx`

### Other components

- **Visitor**
- **Visitor email app**

## Connections

- Visitor → Home page: opens site (evidence: `README.md`)
- Visitor → About page: opens page (evidence: `README.md`)
- Visitor → Projects page: opens page (evidence: `README.md`)
- Visitor → Education page: opens page (evidence: `README.md`)
- Visitor → Contact page: opens page (evidence: `README.md`)
- Site shell → Navigation and theme: renders (evidence: `app/layout.js`)
- Site shell → Ticker: renders (evidence: `app/layout.js`)
- Site shell → Cursor: renders (evidence: `app/layout.js`)
- Site shell → Effects state: provides state (evidence: `app/layout.js`)
- Site shell → Particle effects: renders (evidence: `app/layout.js`)
- Site shell → Reginleif effect: renders (evidence: `app/layout.js`)
- Site shell → Lena chat: renders (evidence: `app/layout.js`)
- Site shell → Effects settings: renders (evidence: `app/layout.js`)
- Site shell → Portfolio data: reads profile (evidence: `app/layout.js`)
- Home page → Hero: renders (evidence: `app/page.js`)
- Hero → Portfolio data: reads profile (evidence: `components/Hero.jsx`)
- About page → Portfolio data: reads content (evidence: `app/about/page.js`)
- About page → Japanese accents: uses accents (evidence: `app/about/page.js`)
- Projects page → Project carousel: renders (evidence: `app/projects/page.js`)
- Projects page → Portfolio data: reads quotes (evidence: `app/projects/page.js`)
- Projects page → Japanese accents: uses accents (evidence: `app/projects/page.js`)
- Project carousel → Portfolio data: reads projects (evidence: `components/Sorties.jsx`)
- Project carousel → Japanese accents: uses accents (evidence: `components/Sorties.jsx`)
- Education page → Education timeline: renders (evidence: `app/education/page.js`)
- Education page → Portfolio data: reads education (evidence: `app/education/page.js`)
- Education page → Japanese accents: uses accents (evidence: `app/education/page.js`)
- Contact page → Contact form: renders (evidence: `app/contact/page.js`)
- Contact page → Portfolio data: reads contact details (evidence: `app/contact/page.js`)
- Contact page → Japanese accents: uses accents (evidence: `app/contact/page.js`)
- Contact form → Portfolio data: reads contact data (evidence: `components/ContactForm.jsx`)
- Contact form → Visitor email app: opens email app (evidence: `README.md`)
- Navigation and theme → Effects state: opens settings (evidence: `components/Header.jsx`)
- Navigation and theme → Japanese accents: uses accents (evidence: `components/Header.jsx`)
- Particle effects → Effects state: reads effects state (evidence: `components/Particles.jsx`)
- Reginleif effect → Effects state: reads effects state (evidence: `components/Reginleif.jsx`)
- Effects settings → Effects state: reads and updates (evidence: `components/Settings.jsx`)
- Effects settings → Japanese accents: uses accents (evidence: `components/Settings.jsx`)
- Lena chat → Lena API: posts messages (evidence: `components/LenaChat.jsx`)
- Lena chat → Japanese accents: uses accents (evidence: `components/LenaChat.jsx`)