# ryharjr/portofoliov2 architecture

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

- Interactive diagram: https://gitdiagram.com/ryharjr/portofoliov2
- Repository: https://github.com/ryharjr/portofoliov2

## Overview

RyHar Portfolio is a personal portfolio site: visitors browse profile, experience, skills, and projects, then reach the contact section, which also provides a chat interface. The home page composes the sections; chat handling uses session history stored in SQLite and an OpenAI-compatible service. The README also documents responsive layouts, animations, and project links. Some route-to-client wiring and email delivery details are not shown in the excerpts, so those links are marked unverified.

Main entry points: [`app/page.tsx`](https://github.com/ryharjr/portofoliov2/blob/master/app/page.tsx) (Home composition), [`app/contact.tsx`](https://github.com/ryharjr/portofoliov2/blob/master/app/contact.tsx) (Contact and chat UI), [`components/animations/FadeDown.tsx`](https://github.com/ryharjr/portofoliov2/blob/master/components/animations/FadeDown.tsx) (Fade down), [`app/about.tsx`](https://github.com/ryharjr/portofoliov2/blob/master/app/about.tsx) (About section)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_site["Portfolio experience"]
  node_home["Home composition<br/>[page.tsx]"]
  node_hero["Hero section<br/>[hero.tsx]"]
  node_about["About section<br/>[about.tsx]"]
  node_experience["Experience section<br/>[experience.tsx]"]
  node_skills["Tech stack<br/>[tech-stack.tsx]"]
  node_projects["Project showcase<br/>[project.tsx]"]
  node_contact["Contact and chat UI<br/>[contact.tsx]"]
end

subgraph group_ui["Reusable interface"]
  node_header["Navigation<br/>[Header.tsx]"]
  node_footer["Footer<br/>[Footer.tsx]"]
  node_page_loader["Page loader<br/>[PageLoader.tsx]"]
  node_alert["Alert message<br/>[Alert.tsx]"]
  node_glare["Glare hover<br/>[GlareHover.tsx]"]
  node_scroll_velocity["Scroll velocity<br/>[ScrollVelocity.tsx]"]
  node_fade_down["Fade down<br/>[FadeDown.tsx]"]
  node_fade_left["Fade left<br/>[FadeLeft.tsx]"]
  node_fade_up["Fade up<br/>[FadeUp.tsx]"]
end

subgraph group_chat["Chat services"]
  node_chat_api["Chat endpoint<br/>[route.ts]"]
  node_messages_api["Message history endpoint<br/>[route.ts]"]
  node_chat_db[("Chat history store<br/>[db.ts]")]
  node_email_api["Email endpoint<br/>[route.ts]"]
end

subgraph group_integrations["External services"]
  node_ai_service{{"OpenAI-compatible service"}}
  node_mail_service{{"Mail service"}}
end

node_visitor(("Visitor"))

node_visitor -->|"visits"| node_home
node_home -->|"renders"| node_header
node_home -->|"renders"| node_hero
node_home -->|"renders"| node_about
node_home -->|"renders"| node_experience
node_home -->|"renders"| node_skills
node_home -->|"renders"| node_projects
node_home -->|"renders"| node_contact
node_home -->|"renders"| node_footer
node_home -->|"includes"| node_page_loader
node_about -->|"renders"| node_scroll_velocity
node_about -->|"uses"| node_fade_down
node_about -->|"uses"| node_fade_left
node_experience -->|"uses"| node_fade_down
node_skills -->|"uses"| node_fade_down
node_skills -->|"uses"| node_fade_up
node_projects -->|"uses"| node_fade_down
node_projects -->|"uses"| node_fade_up
node_projects -->|"renders"| node_glare
node_contact -->|"renders"| node_alert
node_contact -->|"uses"| node_fade_down
node_contact -.->|"submits chat"| node_chat_api
node_contact -.->|"loads history"| node_messages_api
node_contact -.->|"submits contact"| node_email_api
node_chat_api -->|"reads and writes"| node_chat_db
node_messages_api -->|"reads and writes"| node_chat_db
node_chat_api -->|"requests completion"| node_ai_service
node_email_api -.->|"sends email"| node_mail_service

click node_home "https://github.com/ryharjr/portofoliov2/blob/master/app/page.tsx"
click node_header "https://github.com/ryharjr/portofoliov2/blob/master/components/Header.tsx"
click node_hero "https://github.com/ryharjr/portofoliov2/blob/master/app/hero.tsx"
click node_about "https://github.com/ryharjr/portofoliov2/blob/master/app/about.tsx"
click node_experience "https://github.com/ryharjr/portofoliov2/blob/master/app/experience.tsx"
click node_skills "https://github.com/ryharjr/portofoliov2/blob/master/app/tech-stack.tsx"
click node_projects "https://github.com/ryharjr/portofoliov2/blob/master/app/project.tsx"
click node_contact "https://github.com/ryharjr/portofoliov2/blob/master/app/contact.tsx"
click node_footer "https://github.com/ryharjr/portofoliov2/blob/master/components/Footer.tsx"
click node_page_loader "https://github.com/ryharjr/portofoliov2/blob/master/components/PageLoader.tsx"
click node_alert "https://github.com/ryharjr/portofoliov2/blob/master/components/Alert.tsx"
click node_glare "https://github.com/ryharjr/portofoliov2/blob/master/components/GlareHover.tsx"
click node_scroll_velocity "https://github.com/ryharjr/portofoliov2/blob/master/components/ScrollVelocity.tsx"
click node_fade_down "https://github.com/ryharjr/portofoliov2/blob/master/components/animations/FadeDown.tsx"
click node_fade_left "https://github.com/ryharjr/portofoliov2/blob/master/components/animations/FadeLeft.tsx"
click node_fade_up "https://github.com/ryharjr/portofoliov2/blob/master/components/animations/FadeUp.tsx"
click node_chat_api "https://github.com/ryharjr/portofoliov2/blob/master/app/api/chat/route.ts"
click node_messages_api "https://github.com/ryharjr/portofoliov2/blob/master/app/api/chat/messages/route.ts"
click node_chat_db "https://github.com/ryharjr/portofoliov2/blob/master/lib/db.ts"
click node_email_api "https://github.com/ryharjr/portofoliov2/blob/master/app/api/send-email/route.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_home,node_hero,node_about,node_experience,node_skills,node_projects,node_contact toneBlue
class node_header,node_footer,node_page_loader,node_alert,node_glare,node_scroll_velocity,node_fade_down,node_fade_left,node_fade_up toneAmber
class node_chat_api,node_messages_api,node_chat_db,node_email_api toneMint
class node_ai_service,node_mail_service toneRose
class node_visitor toneIndigo
```

## Components

### Portfolio experience

- [Home composition](https://github.com/ryharjr/portofoliov2/blob/master/app/page.tsx): `app/page.tsx`
- [Hero section](https://github.com/ryharjr/portofoliov2/blob/master/app/hero.tsx): `app/hero.tsx`
- [About section](https://github.com/ryharjr/portofoliov2/blob/master/app/about.tsx): `app/about.tsx`
- [Experience section](https://github.com/ryharjr/portofoliov2/blob/master/app/experience.tsx): `app/experience.tsx`
- [Tech stack](https://github.com/ryharjr/portofoliov2/blob/master/app/tech-stack.tsx): `app/tech-stack.tsx`
- [Project showcase](https://github.com/ryharjr/portofoliov2/blob/master/app/project.tsx): `app/project.tsx`
- [Contact and chat UI](https://github.com/ryharjr/portofoliov2/blob/master/app/contact.tsx): `app/contact.tsx`

### Reusable interface

- [Navigation](https://github.com/ryharjr/portofoliov2/blob/master/components/Header.tsx): `components/Header.tsx`
- [Footer](https://github.com/ryharjr/portofoliov2/blob/master/components/Footer.tsx): `components/Footer.tsx`
- [Page loader](https://github.com/ryharjr/portofoliov2/blob/master/components/PageLoader.tsx): `components/PageLoader.tsx`
- [Alert message](https://github.com/ryharjr/portofoliov2/blob/master/components/Alert.tsx): `components/Alert.tsx`
- [Glare hover](https://github.com/ryharjr/portofoliov2/blob/master/components/GlareHover.tsx): `components/GlareHover.tsx`
- [Scroll velocity](https://github.com/ryharjr/portofoliov2/blob/master/components/ScrollVelocity.tsx): `components/ScrollVelocity.tsx`
- [Fade down](https://github.com/ryharjr/portofoliov2/blob/master/components/animations/FadeDown.tsx): `components/animations/FadeDown.tsx`
- [Fade left](https://github.com/ryharjr/portofoliov2/blob/master/components/animations/FadeLeft.tsx): `components/animations/FadeLeft.tsx`
- [Fade up](https://github.com/ryharjr/portofoliov2/blob/master/components/animations/FadeUp.tsx): `components/animations/FadeUp.tsx`

### Chat services

- [Chat endpoint](https://github.com/ryharjr/portofoliov2/blob/master/app/api/chat/route.ts): `app/api/chat/route.ts`
- [Message history endpoint](https://github.com/ryharjr/portofoliov2/blob/master/app/api/chat/messages/route.ts): `app/api/chat/messages/route.ts`
- [Chat history store](https://github.com/ryharjr/portofoliov2/blob/master/lib/db.ts): `lib/db.ts`
- [Email endpoint](https://github.com/ryharjr/portofoliov2/blob/master/app/api/send-email/route.ts): `app/api/send-email/route.ts`

### External services

- **OpenAI-compatible service**
- **Mail service**

### Other components

- **Visitor**

## Connections

- Visitor → Home composition: visits (evidence: `README.md`)
- Home composition → Navigation: renders (evidence: `app/page.tsx`)
- Home composition → Hero section: renders (evidence: `app/page.tsx`)
- Home composition → About section: renders (evidence: `app/page.tsx`)
- Home composition → Experience section: renders (evidence: `app/page.tsx`)
- Home composition → Tech stack: renders (evidence: `app/page.tsx`)
- Home composition → Project showcase: renders (evidence: `app/page.tsx`)
- Home composition → Contact and chat UI: renders (evidence: `app/page.tsx`)
- Home composition → Footer: renders (evidence: `app/page.tsx`)
- Home composition → Page loader: includes
- About section → Scroll velocity: renders (evidence: `app/about.tsx`)
- About section → Fade down: uses (evidence: `app/about.tsx`)
- About section → Fade left: uses (evidence: `app/about.tsx`)
- Experience section → Fade down: uses (evidence: `app/experience.tsx`)
- Tech stack → Fade down: uses (evidence: `app/tech-stack.tsx`)
- Tech stack → Fade up: uses (evidence: `app/tech-stack.tsx`)
- Project showcase → Fade down: uses (evidence: `app/project.tsx`)
- Project showcase → Fade up: uses (evidence: `app/project.tsx`)
- Project showcase → Glare hover: renders (evidence: `app/project.tsx`)
- Contact and chat UI → Alert message: renders (evidence: `app/contact.tsx`)
- Contact and chat UI → Fade down: uses (evidence: `app/contact.tsx`)
- Contact and chat UI → Chat endpoint: submits chat
- Contact and chat UI → Message history endpoint: loads history
- Contact and chat UI → Email endpoint: submits contact
- Chat endpoint → Chat history store: reads and writes (evidence: `app/api/chat/route.ts`)
- Message history endpoint → Chat history store: reads and writes (evidence: `app/api/chat/messages/route.ts`)
- Chat endpoint → OpenAI-compatible service: requests completion (evidence: `app/api/chat/route.ts`)
- Email endpoint → Mail service: sends email