# p-limbo1996/portfolio architecture

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

- Interactive diagram: https://gitdiagram.com/p-limbo1996/portfolio
- Repository: https://github.com/p-limbo1996/portfolio

## Overview

This is a bilingual personal portfolio site. Visitors land on the home page, browse profile, skills, experience and project sections, and can open project details or contact the owner. The source index supports the home-page composition and several component dependencies; other core components are included as distinct portfolio features, but their internal links are omitted where the excerpts do not establish them.

Main entry points: [`src/pages/Home/Home.jsx`](https://github.com/p-limbo1996/portfolio/blob/main/src/pages/Home/Home.jsx) (Home Page), [`src/main.jsx`](https://github.com/p-limbo1996/portfolio/blob/main/src/main.jsx) (React Entry), [`src/App.jsx`](https://github.com/p-limbo1996/portfolio/blob/main/src/App.jsx) (App Routes), [`src/components/Hero.jsx`](https://github.com/p-limbo1996/portfolio/blob/main/src/components/Hero.jsx) (Hero Introduction)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application Shell"]
  node_entry["React Entry<br/>[main.jsx]"]
  node_router["App Routes<br/>[App.jsx]"]
  node_home["Home Page<br/>[Home.jsx]"]
end

subgraph group_portfolio["Portfolio Content"]
  node_hero["Hero Introduction<br/>[Hero.jsx]"]
  node_about["About Me<br/>[AboutMe.jsx]"]
  node_skills["Skills<br/>[Skill.jsx]"]
  node_experience["Experience<br/>[Experience.jsx]"]
  node_projects["Project Gallery<br/>[Projects.jsx]"]
  node_detail["Project Details<br/>[ProjectDetail.jsx]"]
  node_typewriter["Typewriter Loop<br/>[TypewriterLoop.jsx]"]
end

subgraph group_engagement["Visitor Engagement"]
  node_navbar["Navigation<br/>[Navbar.jsx]"]
  node_contact["Contact Section<br/>[Contact.jsx]"]
  node_contactmodal["Contact Modal<br/>[ContactModal.jsx]"]
  node_social["Social Support Widget<br/>[SocialSupport.jsx]"]
  node_clickoutside["Outside Click Hook"]
  node_music["Music Player<br/>[MusicPlayer.jsx]"]
  node_cursor["Cursor Trail<br/>[CursorTrail.jsx]"]
end

subgraph group_shared["Shared Data and Language"]
  node_projectdata["Project Catalog<br/>[project.js]"]
  node_i18n["Language Setup<br/>[index.js]"]
end

node_visitor(("Visitor"))

node_visitor -->|"opens site"| node_entry
node_entry -->|"renders"| node_router
node_entry -->|"initializes language"| node_i18n
node_router -->|"routes home"| node_home
node_router -->|"routes project"| node_detail
node_home -->|"renders"| node_navbar
node_home -->|"renders"| node_hero
node_home -->|"renders"| node_projects
node_home -->|"renders"| node_about
node_home -->|"renders"| node_skills
node_home -->|"renders"| node_experience
node_home -->|"renders"| node_contact
node_home -->|"renders"| node_music
node_home -->|"renders"| node_social
node_home -->|"renders"| node_cursor
node_projects -->|"filters projects"| node_projectdata
node_projects -->|"links details"| node_detail
node_detail -->|"reads project"| node_projectdata
node_navbar -->|"imports player"| node_music
node_hero -->|"uses modal"| node_contactmodal
node_hero -->|"renders"| node_typewriter
node_social -->|"closes on outside click"| node_clickoutside

click node_entry "https://github.com/p-limbo1996/portfolio/blob/main/src/main.jsx"
click node_router "https://github.com/p-limbo1996/portfolio/blob/main/src/App.jsx"
click node_home "https://github.com/p-limbo1996/portfolio/blob/main/src/pages/Home/Home.jsx"
click node_navbar "https://github.com/p-limbo1996/portfolio/blob/main/src/components/Navbar.jsx"
click node_hero "https://github.com/p-limbo1996/portfolio/blob/main/src/components/Hero.jsx"
click node_about "https://github.com/p-limbo1996/portfolio/blob/main/src/components/AboutMe.jsx"
click node_skills "https://github.com/p-limbo1996/portfolio/blob/main/src/components/Skill.jsx"
click node_experience "https://github.com/p-limbo1996/portfolio/blob/main/src/components/Experience.jsx"
click node_projects "https://github.com/p-limbo1996/portfolio/blob/main/src/components/Projects.jsx"
click node_projectdata "https://github.com/p-limbo1996/portfolio/blob/main/src/data/project.js"
click node_detail "https://github.com/p-limbo1996/portfolio/blob/main/src/components/ProjectDetail.jsx"
click node_contact "https://github.com/p-limbo1996/portfolio/blob/main/src/components/Contact.jsx"
click node_contactmodal "https://github.com/p-limbo1996/portfolio/blob/main/src/components/ContactModal.jsx"
click node_social "https://github.com/p-limbo1996/portfolio/blob/main/src/components/SocialSupport.jsx"
click node_clickoutside "https://github.com/p-limbo1996/portfolio/blob/main/src/hooks/useClickOutside.jsx"
click node_music "https://github.com/p-limbo1996/portfolio/blob/main/src/components/MusicPlayer.jsx"
click node_cursor "https://github.com/p-limbo1996/portfolio/blob/main/src/components/CursorTrail.jsx"
click node_i18n "https://github.com/p-limbo1996/portfolio/blob/main/src/i18n/index.js"
click node_typewriter "https://github.com/p-limbo1996/portfolio/blob/main/src/components/TypewriterLoop.jsx"

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_entry,node_router,node_home toneBlue
class node_hero,node_about,node_skills,node_experience,node_projects,node_detail,node_typewriter toneAmber
class node_navbar,node_contact,node_contactmodal,node_social,node_clickoutside,node_music,node_cursor toneMint
class node_projectdata,node_i18n toneRose
class node_visitor toneIndigo
```

## Components

### Application Shell

- [React Entry](https://github.com/p-limbo1996/portfolio/blob/main/src/main.jsx): `src/main.jsx`
- [App Routes](https://github.com/p-limbo1996/portfolio/blob/main/src/App.jsx): `src/App.jsx`
- [Home Page](https://github.com/p-limbo1996/portfolio/blob/main/src/pages/Home/Home.jsx): `src/pages/Home/Home.jsx`

### Portfolio Content

- [Hero Introduction](https://github.com/p-limbo1996/portfolio/blob/main/src/components/Hero.jsx): `src/components/Hero.jsx`
- [About Me](https://github.com/p-limbo1996/portfolio/blob/main/src/components/AboutMe.jsx): `src/components/AboutMe.jsx`
- [Skills](https://github.com/p-limbo1996/portfolio/blob/main/src/components/Skill.jsx): `src/components/Skill.jsx`
- [Experience](https://github.com/p-limbo1996/portfolio/blob/main/src/components/Experience.jsx): `src/components/Experience.jsx`
- [Project Gallery](https://github.com/p-limbo1996/portfolio/blob/main/src/components/Projects.jsx): `src/components/Projects.jsx`
- [Project Details](https://github.com/p-limbo1996/portfolio/blob/main/src/components/ProjectDetail.jsx): `src/components/ProjectDetail.jsx`
- [Typewriter Loop](https://github.com/p-limbo1996/portfolio/blob/main/src/components/TypewriterLoop.jsx): `src/components/TypewriterLoop.jsx`

### Visitor Engagement

- [Navigation](https://github.com/p-limbo1996/portfolio/blob/main/src/components/Navbar.jsx): `src/components/Navbar.jsx`
- [Contact Section](https://github.com/p-limbo1996/portfolio/blob/main/src/components/Contact.jsx): `src/components/Contact.jsx`
- [Contact Modal](https://github.com/p-limbo1996/portfolio/blob/main/src/components/ContactModal.jsx): `src/components/ContactModal.jsx`
- [Social Support Widget](https://github.com/p-limbo1996/portfolio/blob/main/src/components/SocialSupport.jsx): `src/components/SocialSupport.jsx`
- [Outside Click Hook](https://github.com/p-limbo1996/portfolio/blob/main/src/hooks/useClickOutside.jsx): `src/hooks/useClickOutside.jsx`
- [Music Player](https://github.com/p-limbo1996/portfolio/blob/main/src/components/MusicPlayer.jsx): `src/components/MusicPlayer.jsx`
- [Cursor Trail](https://github.com/p-limbo1996/portfolio/blob/main/src/components/CursorTrail.jsx): `src/components/CursorTrail.jsx`

### Shared Data and Language

- [Project Catalog](https://github.com/p-limbo1996/portfolio/blob/main/src/data/project.js): `src/data/project.js`
- [Language Setup](https://github.com/p-limbo1996/portfolio/blob/main/src/i18n/index.js): `src/i18n/index.js`

### Other components

- **Visitor**

## Connections

- Visitor → React Entry: opens site (evidence: `src/main.jsx`)
- React Entry → App Routes: renders (evidence: `src/main.jsx`)
- React Entry → Language Setup: initializes language (evidence: `src/main.jsx`)
- App Routes → Home Page: routes home (evidence: `src/App.jsx`)
- App Routes → Project Details: routes project (evidence: `src/App.jsx`)
- Home Page → Navigation: renders (evidence: `src/pages/Home/Home.jsx`)
- Home Page → Hero Introduction: renders (evidence: `src/pages/Home/Home.jsx`)
- Home Page → Project Gallery: renders (evidence: `src/pages/Home/Home.jsx`)
- Home Page → About Me: renders (evidence: `src/pages/Home/Home.jsx`)
- Home Page → Skills: renders (evidence: `src/pages/Home/Home.jsx`)
- Home Page → Experience: renders (evidence: `src/pages/Home/Home.jsx`)
- Home Page → Contact Section: renders (evidence: `src/pages/Home/Home.jsx`)
- Home Page → Music Player: renders (evidence: `src/pages/Home/Home.jsx`)
- Home Page → Social Support Widget: renders (evidence: `src/pages/Home/Home.jsx`)
- Home Page → Cursor Trail: renders (evidence: `src/pages/Home/Home.jsx`)
- Project Gallery → Project Catalog: filters projects (evidence: `src/components/Projects.jsx`)
- Project Gallery → Project Details: links details (evidence: `src/components/Projects.jsx`)
- Project Details → Project Catalog: reads project (evidence: `src/components/ProjectDetail.jsx`)
- Navigation → Music Player: imports player (evidence: `src/components/Navbar.jsx`)
- Hero Introduction → Contact Modal: uses modal (evidence: `src/components/Hero.jsx`)
- Hero Introduction → Typewriter Loop: renders (evidence: `src/components/Hero.jsx`)
- Social Support Widget → Outside Click Hook: closes on outside click (evidence: `src/components/SocialSupport.jsx`)