# holosion/akena-profolio architecture

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

- Interactive diagram: https://gitdiagram.com/holosion/akena-profolio
- Repository: https://github.com/holosion/akena-profolio

## Overview

AKENA is a personal engineering portfolio. Visitors navigate a single-page site to learn about the engineer, explore expertise and projects, follow a career timeline, view GitHub activity, and reach contact or social links. The graph preserves those distinct content areas and the project-detail interaction. README content mappings support the documented data branches; only a sample of component source was provided, so unsampled internal wiring is not expanded.

Main entry points: [`src/App.tsx`](https://github.com/holosion/akena-profolio/blob/main/src/App.tsx) (Page assembly), [`src/components/Navbar.tsx`](https://github.com/holosion/akena-profolio/blob/main/src/components/Navbar.tsx) (Navigation), [`src/sections/Projects.tsx`](https://github.com/holosion/akena-profolio/blob/main/src/sections/Projects.tsx) (Project listing), [`src/components/ProjectModal.tsx`](https://github.com/holosion/akena-profolio/blob/main/src/components/ProjectModal.tsx) (Project details modal)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_site["Site shell"]
  node_app["Page assembly<br/>[App.tsx]"]
  node_nav["Navigation<br/>[Navbar.tsx]"]
  node_navdata["Navigation items<br/>[navigation.ts]"]
  node_footer["Footer<br/>[Footer.tsx]"]
end

subgraph group_content["Portfolio content"]
  node_profile["Profile content<br/>[profile.ts]"]
  node_about["About<br/>[About.tsx]"]
  node_hero["Hero<br/>[Hero.tsx]"]
  node_engineering["Engineering focus"]
  node_engineeringdata["Engineering domains<br/>[engineering.ts]"]
  node_tech["Tech stack<br/>[TechStack.tsx]"]
  node_techdata["Tech content<br/>[tech.ts]"]
  node_aiml["AI/ML knowledge<br/>[AIMLSection.tsx]"]
  node_aimldata["AI/ML content<br/>[aiml.ts]"]
  node_timeline["Career timeline<br/>[Timeline.tsx]"]
  node_timelinedata["Timeline content<br/>[timeline.ts]"]
end

subgraph group_projects["Project showcase"]
  node_projects["Project listing<br/>[Projects.tsx]"]
  node_projectdata["Project details<br/>[projects.ts]"]
  node_projectcard["Project card<br/>[ProjectCard.tsx]"]
  node_modal["Project details modal<br/>[ProjectModal.tsx]"]
  node_diagram["Lumora diagram<br/>[LumoraDiagram.tsx]"]
end

subgraph group_engagement["Activity and contact"]
  node_github["GitHub activity<br/>[GitHubActivity.tsx]"]
  node_contact["Contact<br/>[Contact.tsx]"]
  node_socials["Social links<br/>[socials.ts]"]
end

node_visitor(("Visitor"))

node_visitor -->|"opens site"| node_app
node_app -->|"renders"| node_nav
node_app -->|"renders"| node_hero
node_app -->|"renders"| node_about
node_app -->|"renders"| node_engineering
node_app -->|"renders"| node_projects
node_app -->|"renders"| node_tech
node_app -->|"renders"| node_aiml
node_app -->|"renders"| node_timeline
node_app -->|"renders"| node_github
node_app -->|"renders"| node_contact
node_app -->|"renders"| node_footer
node_nav -->|"reads"| node_navdata
node_nav -->|"reads"| node_profile
node_engineering -->|"reads"| node_engineeringdata
node_projects -->|"shows projects"| node_projectdata
node_projects -->|"displays"| node_projectcard
node_projectcard -->|"opens details"| node_modal
node_modal -->|"reads details"| node_projectdata
node_modal -->|"shows Lumora"| node_diagram
node_tech -->|"reads"| node_techdata
node_aiml -->|"reads"| node_aimldata
node_timeline -->|"reads"| node_timelinedata
node_contact -->|"reads links"| node_socials
node_visitor -->|"navigates"| node_nav

click node_app "https://github.com/holosion/akena-profolio/blob/main/src/App.tsx"
click node_nav "https://github.com/holosion/akena-profolio/blob/main/src/components/Navbar.tsx"
click node_navdata "https://github.com/holosion/akena-profolio/blob/main/src/data/navigation.ts"
click node_profile "https://github.com/holosion/akena-profolio/blob/main/src/data/profile.ts"
click node_about "https://github.com/holosion/akena-profolio/blob/main/src/sections/About.tsx"
click node_hero "https://github.com/holosion/akena-profolio/blob/main/src/sections/Hero.tsx"
click node_engineering "https://github.com/holosion/akena-profolio/blob/main/src/sections/EngineeringFocus.tsx"
click node_engineeringdata "https://github.com/holosion/akena-profolio/blob/main/src/data/engineering.ts"
click node_tech "https://github.com/holosion/akena-profolio/blob/main/src/sections/TechStack.tsx"
click node_techdata "https://github.com/holosion/akena-profolio/blob/main/src/data/tech.ts"
click node_aiml "https://github.com/holosion/akena-profolio/blob/main/src/sections/AIMLSection.tsx"
click node_aimldata "https://github.com/holosion/akena-profolio/blob/main/src/data/aiml.ts"
click node_timeline "https://github.com/holosion/akena-profolio/blob/main/src/sections/Timeline.tsx"
click node_timelinedata "https://github.com/holosion/akena-profolio/blob/main/src/data/timeline.ts"
click node_projects "https://github.com/holosion/akena-profolio/blob/main/src/sections/Projects.tsx"
click node_projectdata "https://github.com/holosion/akena-profolio/blob/main/src/data/projects.ts"
click node_projectcard "https://github.com/holosion/akena-profolio/blob/main/src/components/ProjectCard.tsx"
click node_modal "https://github.com/holosion/akena-profolio/blob/main/src/components/ProjectModal.tsx"
click node_diagram "https://github.com/holosion/akena-profolio/blob/main/src/components/LumoraDiagram.tsx"
click node_github "https://github.com/holosion/akena-profolio/blob/main/src/sections/GitHubActivity.tsx"
click node_contact "https://github.com/holosion/akena-profolio/blob/main/src/sections/Contact.tsx"
click node_socials "https://github.com/holosion/akena-profolio/blob/main/src/config/socials.ts"
click node_footer "https://github.com/holosion/akena-profolio/blob/main/src/components/Footer.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_app,node_nav,node_navdata,node_footer toneBlue
class node_profile,node_about,node_hero,node_engineering,node_engineeringdata,node_tech,node_techdata,node_aiml,node_aimldata,node_timeline,node_timelinedata toneAmber
class node_projects,node_projectdata,node_projectcard,node_modal,node_diagram toneMint
class node_github,node_contact,node_socials toneRose
class node_visitor toneIndigo
```

## Components

### Site shell

- [Page assembly](https://github.com/holosion/akena-profolio/blob/main/src/App.tsx): `src/App.tsx`
- [Navigation](https://github.com/holosion/akena-profolio/blob/main/src/components/Navbar.tsx): `src/components/Navbar.tsx`
- [Navigation items](https://github.com/holosion/akena-profolio/blob/main/src/data/navigation.ts): `src/data/navigation.ts`
- [Footer](https://github.com/holosion/akena-profolio/blob/main/src/components/Footer.tsx): `src/components/Footer.tsx`

### Portfolio content

- [Profile content](https://github.com/holosion/akena-profolio/blob/main/src/data/profile.ts): `src/data/profile.ts`
- [About](https://github.com/holosion/akena-profolio/blob/main/src/sections/About.tsx): `src/sections/About.tsx`
- [Hero](https://github.com/holosion/akena-profolio/blob/main/src/sections/Hero.tsx): `src/sections/Hero.tsx`
- [Engineering focus](https://github.com/holosion/akena-profolio/blob/main/src/sections/EngineeringFocus.tsx): `src/sections/EngineeringFocus.tsx`
- [Engineering domains](https://github.com/holosion/akena-profolio/blob/main/src/data/engineering.ts): `src/data/engineering.ts`
- [Tech stack](https://github.com/holosion/akena-profolio/blob/main/src/sections/TechStack.tsx): `src/sections/TechStack.tsx`
- [Tech content](https://github.com/holosion/akena-profolio/blob/main/src/data/tech.ts): `src/data/tech.ts`
- [AI/ML knowledge](https://github.com/holosion/akena-profolio/blob/main/src/sections/AIMLSection.tsx): `src/sections/AIMLSection.tsx`
- [AI/ML content](https://github.com/holosion/akena-profolio/blob/main/src/data/aiml.ts): `src/data/aiml.ts`
- [Career timeline](https://github.com/holosion/akena-profolio/blob/main/src/sections/Timeline.tsx): `src/sections/Timeline.tsx`
- [Timeline content](https://github.com/holosion/akena-profolio/blob/main/src/data/timeline.ts): `src/data/timeline.ts`

### Project showcase

- [Project listing](https://github.com/holosion/akena-profolio/blob/main/src/sections/Projects.tsx): `src/sections/Projects.tsx`
- [Project details](https://github.com/holosion/akena-profolio/blob/main/src/data/projects.ts): `src/data/projects.ts`
- [Project card](https://github.com/holosion/akena-profolio/blob/main/src/components/ProjectCard.tsx): `src/components/ProjectCard.tsx`
- [Project details modal](https://github.com/holosion/akena-profolio/blob/main/src/components/ProjectModal.tsx): `src/components/ProjectModal.tsx`
- [Lumora diagram](https://github.com/holosion/akena-profolio/blob/main/src/components/LumoraDiagram.tsx): `src/components/LumoraDiagram.tsx`

### Activity and contact

- [GitHub activity](https://github.com/holosion/akena-profolio/blob/main/src/sections/GitHubActivity.tsx): `src/sections/GitHubActivity.tsx`
- [Contact](https://github.com/holosion/akena-profolio/blob/main/src/sections/Contact.tsx): `src/sections/Contact.tsx`
- [Social links](https://github.com/holosion/akena-profolio/blob/main/src/config/socials.ts): `src/config/socials.ts`

### Other components

- **Visitor**

## Connections

- Visitor → Page assembly: opens site
- Page assembly → Navigation: renders
- Page assembly → Hero: renders
- Page assembly → About: renders
- Page assembly → Engineering focus: renders
- Page assembly → Project listing: renders
- Page assembly → Tech stack: renders
- Page assembly → AI/ML knowledge: renders
- Page assembly → Career timeline: renders
- Page assembly → GitHub activity: renders
- Page assembly → Contact: renders
- Page assembly → Footer: renders
- Navigation → Navigation items: reads
- Navigation → Profile content: reads
- Engineering focus → Engineering domains: reads
- Project listing → Project details: shows projects
- Project listing → Project card: displays
- Project card → Project details modal: opens details
- Project details modal → Project details: reads details
- Project details modal → Lumora diagram: shows Lumora
- Tech stack → Tech content: reads
- AI/ML knowledge → AI/ML content: reads
- Career timeline → Timeline content: reads
- Contact → Social links: reads links
- Visitor → Navigation: navigates