# elbon-asyafa/portfolio-project architecture

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

- Interactive diagram: https://gitdiagram.com/elbon-asyafa/portfolio-project
- Repository: https://github.com/elbon-asyafa/portfolio-project

## Overview

This repository is a personal portfolio website for a network technician. Visitors enter through the hero, browse profile, project, experience and skills sections, then reach contact options; project cards also expose detail imagery, while a fixed dock and AI chat provide supplementary interactions. `App` composes the page and installs scroll behavior. The supplied excerpts document project lightbox and dock behavior, but not the internals of several named sections; those are represented by their exact tree paths without inferred internal wiring.

Main entry points: [`src/App.tsx`](https://github.com/elbon-asyafa/portfolio-project/blob/main/src/App.tsx) (Page Composer), [`public/images`](https://github.com/elbon-asyafa/portfolio-project/tree/main/public/images) (Portfolio Images), [`src/components/Hero.tsx`](https://github.com/elbon-asyafa/portfolio-project/blob/main/src/components/Hero.tsx) (Hero Profile), [`src/components/Projects.tsx`](https://github.com/elbon-asyafa/portfolio-project/blob/main/src/components/Projects.tsx) (Project Portfolio)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_page["Portfolio Page"]
  node_app["Page Composer<br/>[App.tsx]"]
  node_entry["React Entry<br/>[main.tsx]"]
  node_navbar["Navigation<br/>[Navbar.tsx]"]
  node_loading["Loading Screen<br/>[LoadingScreen.tsx]"]
  node_scroll["Inertia Scroll"]
end

subgraph group_content["Portfolio Content"]
  node_hero["Hero Profile<br/>[Hero.tsx]"]
  node_gallery["Photo Gallery<br/>[Hero.tsx]"]
  node_about["About Profile<br/>[About.tsx]"]
  node_projects["Project Portfolio<br/>[Projects.tsx]"]
  node_experience["Experience<br/>[Experience.tsx]"]
  node_skills["Skills<br/>[Skills.tsx]"]
  node_contact["Contact Section<br/>[Contact.tsx]"]
  node_assets["Portfolio Images"]
  node_resume["Resume PDFs"]
end

subgraph group_interactions["Visitor Interactions"]
  node_dock["Window Dock<br/>[WindowPopups.tsx]"]
  node_scrolltop["Back To Top<br/>[ScrollToTop.tsx]"]
  node_chat["AI Chat<br/>[AIButton.tsx]"]
  node_marquee["Marquee Bar<br/>[MarqueeBar.tsx]"]
end

subgraph group_integrations["External Services"]
  node_gemini{{"Gemini AI"}}
end

node_visitor(("Visitor"))

node_visitor -->|"opens site"| node_entry
node_entry -->|"renders"| node_app
node_app -->|"renders"| node_navbar
node_app -->|"renders"| node_loading
node_app -->|"enables scrolling"| node_scroll
node_app -->|"renders"| node_hero
node_app -->|"renders"| node_gallery
node_app -->|"renders"| node_marquee
node_app -->|"renders"| node_about
node_app -->|"renders"| node_projects
node_app -->|"renders"| node_experience
node_app -->|"renders"| node_skills
node_app -->|"renders"| node_contact
node_app -->|"renders"| node_dock
node_app -->|"renders"| node_chat
node_hero -->|"loads photos"| node_assets
node_gallery -->|"loads photos"| node_assets
node_about -->|"loads profile photo"| node_assets
node_hero -->|"links download"| node_resume
node_projects -->|"loads project images"| node_assets
node_projects -->|"shows project details"| node_visitor
node_dock -->|"invokes"| node_scrolltop
node_chat -.->|"requests replies"| node_gemini

click node_app "https://github.com/elbon-asyafa/portfolio-project/blob/main/src/App.tsx"
click node_entry "https://github.com/elbon-asyafa/portfolio-project/blob/main/src/main.tsx"
click node_navbar "https://github.com/elbon-asyafa/portfolio-project/blob/main/src/components/Navbar.tsx"
click node_loading "https://github.com/elbon-asyafa/portfolio-project/blob/main/src/components/LoadingScreen.tsx"
click node_scroll "https://github.com/elbon-asyafa/portfolio-project/blob/main/src/hooks/useInertiaScroll.ts"
click node_hero "https://github.com/elbon-asyafa/portfolio-project/blob/main/src/components/Hero.tsx"
click node_gallery "https://github.com/elbon-asyafa/portfolio-project/blob/main/src/components/Hero.tsx"
click node_about "https://github.com/elbon-asyafa/portfolio-project/blob/main/src/components/About.tsx"
click node_projects "https://github.com/elbon-asyafa/portfolio-project/blob/main/src/components/Projects.tsx"
click node_experience "https://github.com/elbon-asyafa/portfolio-project/blob/main/src/components/Experience.tsx"
click node_skills "https://github.com/elbon-asyafa/portfolio-project/blob/main/src/components/Skills.tsx"
click node_contact "https://github.com/elbon-asyafa/portfolio-project/blob/main/src/components/Contact.tsx"
click node_dock "https://github.com/elbon-asyafa/portfolio-project/blob/main/src/components/WindowPopups.tsx"
click node_scrolltop "https://github.com/elbon-asyafa/portfolio-project/blob/main/src/components/ScrollToTop.tsx"
click node_chat "https://github.com/elbon-asyafa/portfolio-project/blob/main/src/components/AIButton.tsx"
click node_marquee "https://github.com/elbon-asyafa/portfolio-project/blob/main/src/components/MarqueeBar.tsx"
click node_assets "https://github.com/elbon-asyafa/portfolio-project/tree/main/public/images"
click node_resume "https://github.com/elbon-asyafa/portfolio-project/tree/main/public/cv"

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_entry,node_navbar,node_loading,node_scroll toneBlue
class node_hero,node_gallery,node_about,node_projects,node_experience,node_skills,node_contact,node_assets,node_resume toneAmber
class node_dock,node_scrolltop,node_chat,node_marquee toneMint
class node_gemini toneRose
class node_visitor toneIndigo
```

## Components

### Portfolio Page

- [Page Composer](https://github.com/elbon-asyafa/portfolio-project/blob/main/src/App.tsx): `src/App.tsx`
- [React Entry](https://github.com/elbon-asyafa/portfolio-project/blob/main/src/main.tsx): `src/main.tsx`
- [Navigation](https://github.com/elbon-asyafa/portfolio-project/blob/main/src/components/Navbar.tsx): `src/components/Navbar.tsx`
- [Loading Screen](https://github.com/elbon-asyafa/portfolio-project/blob/main/src/components/LoadingScreen.tsx): `src/components/LoadingScreen.tsx`
- [Inertia Scroll](https://github.com/elbon-asyafa/portfolio-project/blob/main/src/hooks/useInertiaScroll.ts): `src/hooks/useInertiaScroll.ts`

### Portfolio Content

- [Hero Profile](https://github.com/elbon-asyafa/portfolio-project/blob/main/src/components/Hero.tsx): `src/components/Hero.tsx`
- [Photo Gallery](https://github.com/elbon-asyafa/portfolio-project/blob/main/src/components/Hero.tsx): `src/components/Hero.tsx`
- [About Profile](https://github.com/elbon-asyafa/portfolio-project/blob/main/src/components/About.tsx): `src/components/About.tsx`
- [Project Portfolio](https://github.com/elbon-asyafa/portfolio-project/blob/main/src/components/Projects.tsx): `src/components/Projects.tsx`
- [Experience](https://github.com/elbon-asyafa/portfolio-project/blob/main/src/components/Experience.tsx): `src/components/Experience.tsx`
- [Skills](https://github.com/elbon-asyafa/portfolio-project/blob/main/src/components/Skills.tsx): `src/components/Skills.tsx`
- [Contact Section](https://github.com/elbon-asyafa/portfolio-project/blob/main/src/components/Contact.tsx): `src/components/Contact.tsx`
- [Portfolio Images](https://github.com/elbon-asyafa/portfolio-project/tree/main/public/images): `public/images`
- [Resume PDFs](https://github.com/elbon-asyafa/portfolio-project/tree/main/public/cv): `public/cv`

### Visitor Interactions

- [Window Dock](https://github.com/elbon-asyafa/portfolio-project/blob/main/src/components/WindowPopups.tsx): `src/components/WindowPopups.tsx`
- [Back To Top](https://github.com/elbon-asyafa/portfolio-project/blob/main/src/components/ScrollToTop.tsx): `src/components/ScrollToTop.tsx`
- [AI Chat](https://github.com/elbon-asyafa/portfolio-project/blob/main/src/components/AIButton.tsx): `src/components/AIButton.tsx`
- [Marquee Bar](https://github.com/elbon-asyafa/portfolio-project/blob/main/src/components/MarqueeBar.tsx): `src/components/MarqueeBar.tsx`

### External Services

- **Gemini AI**

### Other components

- **Visitor**

## Connections

- Visitor → React Entry: opens site
- React Entry → Page Composer: renders
- Page Composer → Navigation: renders
- Page Composer → Loading Screen: renders
- Page Composer → Inertia Scroll: enables scrolling
- Page Composer → Hero Profile: renders
- Page Composer → Photo Gallery: renders
- Page Composer → Marquee Bar: renders
- Page Composer → About Profile: renders
- Page Composer → Project Portfolio: renders
- Page Composer → Experience: renders
- Page Composer → Skills: renders
- Page Composer → Contact Section: renders
- Page Composer → Window Dock: renders
- Page Composer → AI Chat: renders
- Hero Profile → Portfolio Images: loads photos
- Photo Gallery → Portfolio Images: loads photos
- About Profile → Portfolio Images: loads profile photo
- Hero Profile → Resume PDFs: links download
- Project Portfolio → Portfolio Images: loads project images
- Project Portfolio → Visitor: shows project details
- Window Dock → Back To Top: invokes
- AI Chat → Gemini AI: requests replies