# xenon110/my_portfolio architecture

> Architecture diagram of the GitHub repository xenon110/my_portfolio, 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/xenon110/my_portfolio
- Repository: https://github.com/xenon110/my_portfolio

## Overview

This is a React-based personal portfolio website. The user-facing flow starts at the app entry, mounts a page orchestrator, and presents configured profile, career, project, research, skills, education, achievement, and contact content. Project cards open a detail modal; theme state is shared through context and persisted in browser local storage. Several important sections are visible in the page orchestrator and portfolio configuration, although their internal implementations were not sampled; edges are limited to relationships shown by those excerpts or the source index.

Main entry points: [`src/containers/Main.js`](https://github.com/xenon110/my_portfolio/blob/main/src/containers/Main.js) (Page orchestrator), [`src/portfolio.js`](https://github.com/xenon110/my_portfolio/blob/main/src/portfolio.js) (Portfolio configuration), [`src/containers/StartupProjects/StartupProject.js`](https://github.com/xenon110/my_portfolio/blob/main/src/containers/StartupProjects/StartupProject.js) (Featured projects), [`src/containers/workExperience/WorkExperience.js`](https://github.com/xenon110/my_portfolio/blob/main/src/containers/workExperience/WorkExperience.js) (Work experience)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Page composition"]
  node_app["React app<br/>[App.js]"]
  node_main["Page orchestrator<br/>[Main.js]"]
  node_splash["Splash screen<br/>[SplashScreen.js]"]
  node_header["Site header<br/>[Header.js]"]
  node_footer["Contact footer<br/>[Footer.js]"]
  node_scrolltop["Scroll control<br/>[Top.js]"]
end

subgraph group_career["Profile and career"]
  node_greeting["Introduction<br/>[Greeting.js]"]
  node_experience["Work experience<br/>[WorkExperience.js]"]
  node_philosophy["Philosophy<br/>[Philosophy.js]"]
  node_experiencecard["Experience card<br/>[ExperienceCard.js]"]
end

subgraph group_projects["Projects and research"]
  node_projects["Featured projects<br/>[StartupProject.js]"]
  node_projectmodal["Project details<br/>[ProjectModal.js]"]
  node_research["Research<br/>[Research.js]"]
end

subgraph group_capabilities["Skills and credentials"]
  node_education["Education<br/>[Education.js]"]
  node_skills["Skills<br/>[Skills.js]"]
  node_technologies["Technology stack<br/>[Technologies.js]"]
  node_achievements["Achievements<br/>[Achievement.js]"]
  node_stats["Portfolio statistics<br/>[StatsBar.js]"]
  node_educationcard["Education card<br/>[EducationCard.js]"]
  node_achievementcard["Achievement card<br/>[AchievementCard.js]"]
end

subgraph group_shared["Shared presentation"]
  node_portfolio["Portfolio configuration<br/>[portfolio.js]"]
  node_theme["Theme context<br/>[StyleContext.js]"]
  node_storage["Theme persistence<br/>[useLocalStorage.js]"]
  node_loading["Loading animation<br/>[Loading.js]"]
  node_lottie["Lottie renderer<br/>[DisplayLottie.js]"]
end

node_visitor(("Site visitor"))

node_visitor -->|"opens"| node_app
node_app -->|"renders"| node_main
node_main -->|"renders"| node_header
node_main -->|"renders"| node_greeting
node_main -->|"renders"| node_philosophy
node_main -->|"renders"| node_experience
node_main -->|"renders"| node_projects
node_main -->|"renders"| node_research
node_main -->|"renders"| node_technologies
node_main -->|"renders"| node_skills
node_main -->|"renders"| node_education
node_main -->|"renders"| node_achievements
node_main -->|"renders"| node_stats
node_main -->|"renders"| node_footer
node_main -->|"renders"| node_scrolltop
node_main -->|"conditionally renders"| node_splash
node_main -->|"persists theme"| node_storage
node_main -->|"provides theme"| node_theme
node_projects -->|"renders"| node_projectmodal
node_projects -->|"reads theme"| node_theme
node_greeting -->|"reads content"| node_portfolio
node_experience -->|"reads content"| node_portfolio
node_experience -->|"renders"| node_experiencecard
node_projects -->|"reads projects"| node_portfolio
node_research -->|"reads content"| node_portfolio
node_education -->|"reads content"| node_portfolio
node_education -->|"renders"| node_educationcard
node_skills -->|"reads content"| node_portfolio
node_technologies -.->|"reads content"| node_portfolio
node_achievements -->|"reads content"| node_portfolio
node_achievements -->|"renders"| node_achievementcard
node_stats -->|"reads content"| node_portfolio
node_splash -->|"renders"| node_lottie
node_loading -->|"renders"| node_lottie
node_header -->|"reads content"| node_portfolio
node_philosophy -->|"reads content"| node_portfolio
node_philosophy -->|"reads theme"| node_theme
node_footer -->|"reads contact data"| node_portfolio

click node_app "https://github.com/xenon110/my_portfolio/blob/main/src/App.js"
click node_main "https://github.com/xenon110/my_portfolio/blob/main/src/containers/Main.js"
click node_portfolio "https://github.com/xenon110/my_portfolio/blob/main/src/portfolio.js"
click node_theme "https://github.com/xenon110/my_portfolio/blob/main/src/contexts/StyleContext.js"
click node_storage "https://github.com/xenon110/my_portfolio/blob/main/src/hooks/useLocalStorage.js"
click node_greeting "https://github.com/xenon110/my_portfolio/blob/main/src/containers/greeting/Greeting.js"
click node_experience "https://github.com/xenon110/my_portfolio/blob/main/src/containers/workExperience/WorkExperience.js"
click node_projects "https://github.com/xenon110/my_portfolio/blob/main/src/containers/StartupProjects/StartupProject.js"
click node_projectmodal "https://github.com/xenon110/my_portfolio/blob/main/src/components/projectModal/ProjectModal.js"
click node_research "https://github.com/xenon110/my_portfolio/blob/main/src/containers/research/Research.js"
click node_education "https://github.com/xenon110/my_portfolio/blob/main/src/containers/education/Education.js"
click node_skills "https://github.com/xenon110/my_portfolio/blob/main/src/containers/skills/Skills.js"
click node_technologies "https://github.com/xenon110/my_portfolio/blob/main/src/components/technologies/Technologies.js"
click node_achievements "https://github.com/xenon110/my_portfolio/blob/main/src/containers/achievement/Achievement.js"
click node_stats "https://github.com/xenon110/my_portfolio/blob/main/src/components/statsBar/StatsBar.js"
click node_splash "https://github.com/xenon110/my_portfolio/blob/main/src/containers/splashScreen/SplashScreen.js"
click node_loading "https://github.com/xenon110/my_portfolio/blob/main/src/containers/loading/Loading.js"
click node_lottie "https://github.com/xenon110/my_portfolio/blob/main/src/components/displayLottie/DisplayLottie.js"
click node_header "https://github.com/xenon110/my_portfolio/blob/main/src/components/header/Header.js"
click node_philosophy "https://github.com/xenon110/my_portfolio/blob/main/src/components/philosophy/Philosophy.js"
click node_footer "https://github.com/xenon110/my_portfolio/blob/main/src/components/footer/Footer.js"
click node_scrolltop "https://github.com/xenon110/my_portfolio/blob/main/src/containers/topbutton/Top.js"
click node_educationcard "https://github.com/xenon110/my_portfolio/blob/main/src/components/educationCard/EducationCard.js"
click node_experiencecard "https://github.com/xenon110/my_portfolio/blob/main/src/components/experienceCard/ExperienceCard.js"
click node_achievementcard "https://github.com/xenon110/my_portfolio/blob/main/src/components/achievementCard/AchievementCard.js"

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_main,node_splash,node_header,node_footer,node_scrolltop toneBlue
class node_greeting,node_experience,node_philosophy,node_experiencecard toneAmber
class node_projects,node_projectmodal,node_research toneMint
class node_education,node_skills,node_technologies,node_achievements,node_stats,node_educationcard,node_achievementcard toneRose
class node_portfolio,node_theme,node_storage,node_loading,node_lottie,node_visitor toneIndigo
```

## Components

### Page composition

- [React app](https://github.com/xenon110/my_portfolio/blob/main/src/App.js): `src/App.js`
- [Page orchestrator](https://github.com/xenon110/my_portfolio/blob/main/src/containers/Main.js): `src/containers/Main.js`
- [Splash screen](https://github.com/xenon110/my_portfolio/blob/main/src/containers/splashScreen/SplashScreen.js): `src/containers/splashScreen/SplashScreen.js`
- [Site header](https://github.com/xenon110/my_portfolio/blob/main/src/components/header/Header.js): `src/components/header/Header.js`
- [Contact footer](https://github.com/xenon110/my_portfolio/blob/main/src/components/footer/Footer.js): `src/components/footer/Footer.js`
- [Scroll control](https://github.com/xenon110/my_portfolio/blob/main/src/containers/topbutton/Top.js): `src/containers/topbutton/Top.js`

### Profile and career

- [Introduction](https://github.com/xenon110/my_portfolio/blob/main/src/containers/greeting/Greeting.js): `src/containers/greeting/Greeting.js`
- [Work experience](https://github.com/xenon110/my_portfolio/blob/main/src/containers/workExperience/WorkExperience.js): `src/containers/workExperience/WorkExperience.js`
- [Philosophy](https://github.com/xenon110/my_portfolio/blob/main/src/components/philosophy/Philosophy.js): `src/components/philosophy/Philosophy.js`
- [Experience card](https://github.com/xenon110/my_portfolio/blob/main/src/components/experienceCard/ExperienceCard.js): `src/components/experienceCard/ExperienceCard.js`

### Projects and research

- [Featured projects](https://github.com/xenon110/my_portfolio/blob/main/src/containers/StartupProjects/StartupProject.js): `src/containers/StartupProjects/StartupProject.js`
- [Project details](https://github.com/xenon110/my_portfolio/blob/main/src/components/projectModal/ProjectModal.js): `src/components/projectModal/ProjectModal.js`
- [Research](https://github.com/xenon110/my_portfolio/blob/main/src/containers/research/Research.js): `src/containers/research/Research.js`

### Skills and credentials

- [Education](https://github.com/xenon110/my_portfolio/blob/main/src/containers/education/Education.js): `src/containers/education/Education.js`
- [Skills](https://github.com/xenon110/my_portfolio/blob/main/src/containers/skills/Skills.js): `src/containers/skills/Skills.js`
- [Technology stack](https://github.com/xenon110/my_portfolio/blob/main/src/components/technologies/Technologies.js): `src/components/technologies/Technologies.js`
- [Achievements](https://github.com/xenon110/my_portfolio/blob/main/src/containers/achievement/Achievement.js): `src/containers/achievement/Achievement.js`
- [Portfolio statistics](https://github.com/xenon110/my_portfolio/blob/main/src/components/statsBar/StatsBar.js): `src/components/statsBar/StatsBar.js`
- [Education card](https://github.com/xenon110/my_portfolio/blob/main/src/components/educationCard/EducationCard.js): `src/components/educationCard/EducationCard.js`
- [Achievement card](https://github.com/xenon110/my_portfolio/blob/main/src/components/achievementCard/AchievementCard.js): `src/components/achievementCard/AchievementCard.js`

### Shared presentation

- [Portfolio configuration](https://github.com/xenon110/my_portfolio/blob/main/src/portfolio.js): `src/portfolio.js`
- [Theme context](https://github.com/xenon110/my_portfolio/blob/main/src/contexts/StyleContext.js): `src/contexts/StyleContext.js`
- [Theme persistence](https://github.com/xenon110/my_portfolio/blob/main/src/hooks/useLocalStorage.js): `src/hooks/useLocalStorage.js`
- [Loading animation](https://github.com/xenon110/my_portfolio/blob/main/src/containers/loading/Loading.js): `src/containers/loading/Loading.js`
- [Lottie renderer](https://github.com/xenon110/my_portfolio/blob/main/src/components/displayLottie/DisplayLottie.js): `src/components/displayLottie/DisplayLottie.js`

### Other components

- **Site visitor**

## Connections

- Site visitor → React app: opens (evidence: `src/App.js`)
- React app → Page orchestrator: renders (evidence: `src/App.js`)
- Page orchestrator → Site header: renders (evidence: `src/containers/Main.js`)
- Page orchestrator → Introduction: renders (evidence: `src/containers/Main.js`)
- Page orchestrator → Philosophy: renders (evidence: `src/containers/Main.js`)
- Page orchestrator → Work experience: renders (evidence: `src/containers/Main.js`)
- Page orchestrator → Featured projects: renders (evidence: `src/containers/Main.js`)
- Page orchestrator → Research: renders (evidence: `src/containers/Main.js`)
- Page orchestrator → Technology stack: renders (evidence: `src/containers/Main.js`)
- Page orchestrator → Skills: renders (evidence: `src/containers/Main.js`)
- Page orchestrator → Education: renders (evidence: `src/containers/Main.js`)
- Page orchestrator → Achievements: renders (evidence: `src/containers/Main.js`)
- Page orchestrator → Portfolio statistics: renders (evidence: `src/containers/Main.js`)
- Page orchestrator → Contact footer: renders (evidence: `src/containers/Main.js`)
- Page orchestrator → Scroll control: renders (evidence: `src/containers/Main.js`)
- Page orchestrator → Splash screen: conditionally renders (evidence: `src/containers/Main.js`)
- Page orchestrator → Theme persistence: persists theme (evidence: `src/containers/Main.js`)
- Page orchestrator → Theme context: provides theme (evidence: `src/containers/Main.js`)
- Featured projects → Project details: renders (evidence: `src/containers/StartupProjects/StartupProject.js`)
- Featured projects → Theme context: reads theme (evidence: `src/containers/StartupProjects/StartupProject.js`)
- Introduction → Portfolio configuration: reads content (evidence: `src/containers/greeting/Greeting.js`)
- Work experience → Portfolio configuration: reads content (evidence: `src/containers/workExperience/WorkExperience.js`)
- Work experience → Experience card: renders (evidence: `src/containers/workExperience/WorkExperience.js`)
- Featured projects → Portfolio configuration: reads projects (evidence: `src/containers/StartupProjects/StartupProject.js`)
- Research → Portfolio configuration: reads content (evidence: `src/containers/research/Research.js`)
- Education → Portfolio configuration: reads content (evidence: `src/containers/education/Education.js`)
- Education → Education card: renders (evidence: `src/containers/education/Education.js`)
- Skills → Portfolio configuration: reads content (evidence: `src/containers/skills/Skills.js`)
- Technology stack → Portfolio configuration: reads content
- Achievements → Portfolio configuration: reads content (evidence: `src/containers/achievement/Achievement.js`)
- Achievements → Achievement card: renders (evidence: `src/containers/achievement/Achievement.js`)
- Portfolio statistics → Portfolio configuration: reads content (evidence: `src/components/statsBar/StatsBar.js`)
- Splash screen → Lottie renderer: renders (evidence: `src/containers/splashScreen/SplashScreen.js`)
- Loading animation → Lottie renderer: renders (evidence: `src/components/displayLottie/DisplayLottie.js`)
- Site header → Portfolio configuration: reads content (evidence: `src/components/header/Header.js`)
- Philosophy → Portfolio configuration: reads content (evidence: `src/components/philosophy/Philosophy.js`)
- Philosophy → Theme context: reads theme (evidence: `src/components/philosophy/Philosophy.js`)
- Contact footer → Portfolio configuration: reads contact data (evidence: `src/components/footer/Footer.js`)