# emman-likha/portpolyoniemman architecture

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

- Interactive diagram: https://gitdiagram.com/emman-likha/portpolyoniemman
- Repository: https://github.com/emman-likha/portpolyoniemman

## Overview

This repository is a personal portfolio website. Visitors browse the home page’s profile, project, experience, and contact sections, or open a full project archive; the contact form uses CAPTCHA verification before submitting a message to Web3Forms. The graph also shows shared presentation layers and layout effects. The contact API route is present in the tree, but its behavior and any connections are not established by the supplied excerpts.

Main entry points: [`app/page.tsx`](https://github.com/emman-likha/portpolyoniemman/blob/main/app/page.tsx) (Home Page), [`app/components/sections/Projects.tsx`](https://github.com/emman-likha/portpolyoniemman/blob/main/app/components/sections/Projects.tsx) (Featured Projects), [`app/components/sections/Contact.tsx`](https://github.com/emman-likha/portpolyoniemman/blob/main/app/components/sections/Contact.tsx) (Contact Form), [`app/components/Section.tsx`](https://github.com/emman-likha/portpolyoniemman/blob/main/app/components/Section.tsx) (Section Wrapper)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_web["Portfolio Pages"]
  node_home["Home Page<br/>[page.tsx]"]
  node_archive["Project Archive<br/>[page.tsx]"]
end

subgraph group_content["Portfolio Content"]
  node_hero["Hero<br/>[Hero.tsx]"]
  node_about["About<br/>[About.tsx]"]
  node_projects["Featured Projects<br/>[Projects.tsx]"]
  node_experience["Experience<br/>[Experience.tsx]"]
  node_skills["Skills<br/>[Skills.tsx]"]
  node_projectdata["Project Data<br/>[projects.ts]"]
  node_experiencedata["Experience Data<br/>[experience.ts]"]
end

subgraph group_presentation["Shared Presentation"]
  node_navbar["Navigation<br/>[Navbar.tsx]"]
  node_footer["Footer<br/>[Footer.tsx]"]
  node_section["Section Wrapper<br/>[Section.tsx]"]
  node_button["Button<br/>[Button.tsx]"]
  node_classnames["Class Utility<br/>[cn.ts]"]
  node_preview["Project Preview"]
  node_layout["Root Layout<br/>[layout.tsx]"]
  node_spotlight["Cursor Spotlight"]
  node_grain["Grain Overlay<br/>[GrainOverlay.tsx]"]
  node_microlink["Microlink API"]
end

subgraph group_contact["Contact Integrations"]
  node_contactform["Contact Form<br/>[Contact.tsx]"]
  node_captcha["hCaptcha"]
  node_web3forms["Web3Forms"]
end

node_visitor(("Visitor"))

node_visitor -->|"opens"| node_home
node_visitor -.->|"opens"| node_archive
node_home -->|"renders"| node_navbar
node_home -->|"renders"| node_hero
node_home -->|"renders"| node_about
node_home -->|"renders"| node_projects
node_home -->|"renders"| node_experience
node_home -->|"renders"| node_contactform
node_home -->|"renders"| node_footer
node_hero -->|"uses"| node_section
node_hero -->|"uses"| node_button
node_about -->|"uses"| node_section
node_projects -->|"uses"| node_section
node_projects -->|"uses"| node_button
node_projects -->|"reads"| node_projectdata
node_projects -->|"renders"| node_preview
node_experience -->|"reads"| node_experiencedata
node_skills -->|"uses"| node_section
node_contactform -->|"uses"| node_section
node_contactform -->|"uses"| node_button
node_contactform -->|"verifies"| node_captcha
node_contactform -->|"submits"| node_web3forms
node_button -->|"imports"| node_classnames
node_archive -->|"reads"| node_projectdata
node_archive -->|"loads screenshots"| node_microlink
node_preview -->|"loads screenshots"| node_microlink
node_layout -->|"renders"| node_spotlight
node_layout -->|"renders"| node_grain

click node_home "https://github.com/emman-likha/portpolyoniemman/blob/main/app/page.tsx"
click node_archive "https://github.com/emman-likha/portpolyoniemman/blob/main/app/projects/page.tsx"
click node_navbar "https://github.com/emman-likha/portpolyoniemman/blob/main/app/components/Navbar.tsx"
click node_footer "https://github.com/emman-likha/portpolyoniemman/blob/main/app/components/Footer.tsx"
click node_hero "https://github.com/emman-likha/portpolyoniemman/blob/main/app/components/sections/Hero.tsx"
click node_about "https://github.com/emman-likha/portpolyoniemman/blob/main/app/components/sections/About.tsx"
click node_projects "https://github.com/emman-likha/portpolyoniemman/blob/main/app/components/sections/Projects.tsx"
click node_experience "https://github.com/emman-likha/portpolyoniemman/blob/main/app/components/sections/Experience.tsx"
click node_skills "https://github.com/emman-likha/portpolyoniemman/blob/main/app/components/sections/Skills.tsx"
click node_contactform "https://github.com/emman-likha/portpolyoniemman/blob/main/app/components/sections/Contact.tsx"
click node_projectdata "https://github.com/emman-likha/portpolyoniemman/blob/main/app/data/projects.ts"
click node_experiencedata "https://github.com/emman-likha/portpolyoniemman/blob/main/app/data/experience.ts"
click node_section "https://github.com/emman-likha/portpolyoniemman/blob/main/app/components/Section.tsx"
click node_button "https://github.com/emman-likha/portpolyoniemman/blob/main/app/components/ui/Button.tsx"
click node_classnames "https://github.com/emman-likha/portpolyoniemman/blob/main/app/utils/cn.ts"
click node_preview "https://github.com/emman-likha/portpolyoniemman/blob/main/app/components/ui/MicrolinkPreview.tsx"
click node_layout "https://github.com/emman-likha/portpolyoniemman/blob/main/app/layout.tsx"
click node_spotlight "https://github.com/emman-likha/portpolyoniemman/blob/main/app/components/ui/CursorSpotlight.tsx"
click node_grain "https://github.com/emman-likha/portpolyoniemman/blob/main/app/components/ui/GrainOverlay.tsx"

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_archive toneBlue
class node_hero,node_about,node_projects,node_experience,node_skills,node_projectdata,node_experiencedata toneAmber
class node_navbar,node_footer,node_section,node_button,node_classnames,node_preview,node_layout,node_spotlight,node_grain,node_microlink toneMint
class node_contactform,node_captcha,node_web3forms toneRose
class node_visitor toneIndigo
```

## Components

### Portfolio Pages

- [Home Page](https://github.com/emman-likha/portpolyoniemman/blob/main/app/page.tsx): `app/page.tsx`
- [Project Archive](https://github.com/emman-likha/portpolyoniemman/blob/main/app/projects/page.tsx): `app/projects/page.tsx`

### Portfolio Content

- [Hero](https://github.com/emman-likha/portpolyoniemman/blob/main/app/components/sections/Hero.tsx): `app/components/sections/Hero.tsx`
- [About](https://github.com/emman-likha/portpolyoniemman/blob/main/app/components/sections/About.tsx): `app/components/sections/About.tsx`
- [Featured Projects](https://github.com/emman-likha/portpolyoniemman/blob/main/app/components/sections/Projects.tsx): `app/components/sections/Projects.tsx`
- [Experience](https://github.com/emman-likha/portpolyoniemman/blob/main/app/components/sections/Experience.tsx): `app/components/sections/Experience.tsx`
- [Skills](https://github.com/emman-likha/portpolyoniemman/blob/main/app/components/sections/Skills.tsx): `app/components/sections/Skills.tsx`
- [Project Data](https://github.com/emman-likha/portpolyoniemman/blob/main/app/data/projects.ts): `app/data/projects.ts`
- [Experience Data](https://github.com/emman-likha/portpolyoniemman/blob/main/app/data/experience.ts): `app/data/experience.ts`

### Shared Presentation

- [Navigation](https://github.com/emman-likha/portpolyoniemman/blob/main/app/components/Navbar.tsx): `app/components/Navbar.tsx`
- [Footer](https://github.com/emman-likha/portpolyoniemman/blob/main/app/components/Footer.tsx): `app/components/Footer.tsx`
- [Section Wrapper](https://github.com/emman-likha/portpolyoniemman/blob/main/app/components/Section.tsx): `app/components/Section.tsx`
- [Button](https://github.com/emman-likha/portpolyoniemman/blob/main/app/components/ui/Button.tsx): `app/components/ui/Button.tsx`
- [Class Utility](https://github.com/emman-likha/portpolyoniemman/blob/main/app/utils/cn.ts): `app/utils/cn.ts`
- [Project Preview](https://github.com/emman-likha/portpolyoniemman/blob/main/app/components/ui/MicrolinkPreview.tsx): `app/components/ui/MicrolinkPreview.tsx`
- [Root Layout](https://github.com/emman-likha/portpolyoniemman/blob/main/app/layout.tsx): `app/layout.tsx`
- [Cursor Spotlight](https://github.com/emman-likha/portpolyoniemman/blob/main/app/components/ui/CursorSpotlight.tsx): `app/components/ui/CursorSpotlight.tsx`
- [Grain Overlay](https://github.com/emman-likha/portpolyoniemman/blob/main/app/components/ui/GrainOverlay.tsx): `app/components/ui/GrainOverlay.tsx`
- **Microlink API**

### Contact Integrations

- [Contact Form](https://github.com/emman-likha/portpolyoniemman/blob/main/app/components/sections/Contact.tsx): `app/components/sections/Contact.tsx`
- **hCaptcha**
- **Web3Forms**

### Other components

- **Visitor**

## Connections

- Visitor → Home Page: opens (evidence: `app/page.tsx`)
- Visitor → Project Archive: opens (evidence: `app/projects/page.tsx`)
- Home Page → Navigation: renders (evidence: `app/page.tsx`)
- Home Page → Hero: renders (evidence: `app/page.tsx`)
- Home Page → About: renders (evidence: `app/page.tsx`)
- Home Page → Featured Projects: renders (evidence: `app/page.tsx`)
- Home Page → Experience: renders (evidence: `app/page.tsx`)
- Home Page → Contact Form: renders (evidence: `app/page.tsx`)
- Home Page → Footer: renders (evidence: `app/page.tsx`)
- Hero → Section Wrapper: uses (evidence: `app/components/sections/Hero.tsx`)
- Hero → Button: uses (evidence: `app/components/sections/Hero.tsx`)
- About → Section Wrapper: uses (evidence: `app/components/sections/About.tsx`)
- Featured Projects → Section Wrapper: uses (evidence: `app/components/sections/Projects.tsx`)
- Featured Projects → Button: uses (evidence: `app/components/sections/Projects.tsx`)
- Featured Projects → Project Data: reads (evidence: `app/components/sections/Projects.tsx`)
- Featured Projects → Project Preview: renders (evidence: `app/components/sections/Projects.tsx`)
- Experience → Experience Data: reads (evidence: `app/components/sections/Experience.tsx`)
- Skills → Section Wrapper: uses (evidence: `app/components/sections/Skills.tsx`)
- Contact Form → Section Wrapper: uses (evidence: `app/components/sections/Contact.tsx`)
- Contact Form → Button: uses (evidence: `app/components/sections/Contact.tsx`)
- Contact Form → hCaptcha: verifies (evidence: `app/components/sections/Contact.tsx`)
- Contact Form → Web3Forms: submits (evidence: `app/components/sections/Contact.tsx`)
- Button → Class Utility: imports (evidence: `app/components/ui/Button.tsx`)
- Project Archive → Project Data: reads (evidence: `app/projects/page.tsx`)
- Project Archive → Microlink API: loads screenshots (evidence: `app/projects/page.tsx`)
- Project Preview → Microlink API: loads screenshots (evidence: `app/components/ui/MicrolinkPreview.tsx`)
- Root Layout → Cursor Spotlight: renders (evidence: `app/layout.tsx`)
- Root Layout → Grain Overlay: renders (evidence: `app/layout.tsx`)