How holosion/akena-profolio works
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: App.tsx Page assembly · Navbar.tsx Navigation · Projects.tsx Project listing · ProjectModal.tsx Project details modal
Components 24
Site shell
- Page assembly
src/App.tsx - Navigation
src/components/Navbar.tsx - Navigation items
src/data/navigation.ts - Footer
src/components/Footer.tsx
Portfolio content
- Profile content
src/data/profile.ts - About
src/sections/About.tsx - Hero
src/sections/Hero.tsx - Engineering focus
src/sections/EngineeringFocus.tsx - Engineering domains
src/data/engineering.ts - Tech stack
src/sections/TechStack.tsx - Tech content
src/data/tech.ts - AI/ML knowledge
src/sections/AIMLSection.tsx - AI/ML content
src/data/aiml.ts - Career timeline
src/sections/Timeline.tsx - Timeline content
src/data/timeline.ts
Project showcase
- Project listing
src/sections/Projects.tsx - Project details
src/data/projects.ts - Project card
src/components/ProjectCard.tsx - Project details modal
src/components/ProjectModal.tsx - Lumora diagram
src/components/LumoraDiagram.tsx
Activity and contact
- GitHub activity
src/sections/GitHubActivity.tsx - Contact
src/sections/Contact.tsx - Social links
src/config/socials.ts
Other components
- Visitor
Connections 25
- 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