# kekanath/about_me architecture

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

- Interactive diagram: https://gitdiagram.com/kekanath/about_me
- Repository: https://github.com/kekanath/about_me

## Overview

#### Purpose and delivery model
This repository is a static personal portfolio single-page application. It presents profile, projects, media, blog, skills, and contact content without a backend or server-side API. The HTML shell is `index.html`; the React application is bundled by Vite and deployed as static files, intended for GitHub Pages.

#### Runtime entry and composition
`src/main.jsx` is the browser entry point that mounts the React tree. `src/App.jsx` is the page composer: it assembles the persistent navigation and ordered portfolio sections into one scrolling experience. `src/styles/global.css` establishes global/Tailwind styling behavior.
- `src/main.jsx`
- `src/App.jsx`
- `src/styles/global.css`

#### Navigation and theme boundary
The navigation component provides section navigation and owns the user-facing dark/light theme control described by the repository documentation. Theme behavior depends on browser capabilities (system preference) and persists manual preference in `localStorage`; this is the main browser-state boundary rather than application data persistence.
- `src/components/Navbar.jsx`
- `src/App.jsx`
- `src/styles/global.css`

#### Portfolio content stages
The central page flow is a sequence of independently rendered display sections: introductory identity, biography, project showcase, gallery, blog, skills, and contact details. These are presentation components with content embedded/configured in the frontend, not fetched from a CMS or API.
- `src/components/Hero.jsx`
- `src/components/About.jsx`
- `src/components/Projects.jsx`

Additional content endpoints continue the same scroll-based flow:
- `src/components/Gallery.jsx`
- `src/components/Blog.jsx`
- `src/components/Skills.jsx`
- `src/components/Contact.jsx`

#### Media and interaction layer
Assets are centralized under the source tree, with `src/assets/assetsConfig.js` serving as the likely asset-reference/configuration boundary for image or media consumers. Gallery/media interaction is isolated in a popup component, keeping overlay behavior separate from page-section rendering. The footer closes the global layout and likely hosts external/social destinations.
- `src/assets/assetsConfig.js`
- `src/components/Gallery.jsx`
- `src/components/VideoPopup.jsx`
- `src/components/Footer.jsx`

#### Build, styling, and deployment infrastructure
The material runtime is React 18 in the browser; Vite 5 handles development, production bundling, and preview. Tailwind CSS/PostCSS provide the styling pipeline, with project-specific design tokens/configuration in Tailwind. Vite’s base-path configuration is important for GitHub Pages asset resolution under the repository subpath.
- `package.json`
- `vite.config.js`
- `tailwind.config.js`
- `postcss.config.js`

Production output is a `dist/` static site. Deployment targets GitHub Pages, either through the package deployment script/`gh-pages` flow or manual branch publication. GitHub Actions automation is present for static-site workflow support.
- `.github/workflows/static.yml`
- `DEPLOYMENT.md`
- `package.json`

Main entry points: [`src/App.jsx`](https://github.com/kekanath/about_me/blob/main/src/App.jsx) (Page Composer), [`src/main.jsx`](https://github.com/kekanath/about_me/blob/main/src/main.jsx) (React Entry), [`src/components/Gallery.jsx`](https://github.com/kekanath/about_me/blob/main/src/components/Gallery.jsx) (Gallery), [`vite.config.js`](https://github.com/kekanath/about_me/blob/main/vite.config.js) (Vite Build)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_browser["Browser SPA"]
  node_html["HTML Shell<br/>static entry<br/>[index.html]"]
  node_main["React Entry<br/>browser bootstrap<br/>[main.jsx]"]
  node_app["Page Composer<br/>React root<br/>[App.jsx]"]
  node_navbar["Navigation &amp; Theme<br/>React component<br/>[Navbar.jsx]"]
  node_browser_state[("Browser Theme State<br/>localStorage + system preference")]
  node_global_css["Global Styles<br/>CSS<br/>[global.css]"]
end

subgraph group_content["Portfolio Sections"]
  node_hero["Hero<br/>React section<br/>[Hero.jsx]"]
  node_about["About<br/>React section<br/>[About.jsx]"]
  node_projects["Projects<br/>React section<br/>[Projects.jsx]"]
  node_gallery["Gallery<br/>React section<br/>[Gallery.jsx]"]
  node_video_popup["Media Popup<br/>React overlay<br/>[VideoPopup.jsx]"]
  node_blog["Blog<br/>React section<br/>[Blog.jsx]"]
  node_skills["Skills<br/>React section<br/>[Skills.jsx]"]
  node_contact["Contact<br/>React section<br/>[Contact.jsx]"]
  node_footer["Footer<br/>React layout component<br/>[Footer.jsx]"]
  node_assets["Asset References<br/>media configuration<br/>[assetsConfig.js]"]
end

subgraph group_delivery["Build &amp; Deployment"]
  node_vite{{"Vite Build<br/>bundler<br/>[vite.config.js]"}}
  node_styling["Tailwind / PostCSS<br/>style pipeline<br/>[tailwind.config.js]"]
  node_package["Package Scripts<br/>tooling manifest<br/>[package.json]"]
  node_workflow["GitHub Actions<br/>deployment workflow<br/>[static.yml]"]
  node_dist["Static Site Output<br/>production artifact"]
  node_deployment["Deployment Guide<br/>deployment documentation<br/>[DEPLOYMENT.md]"]
end

node_html -->|"loads"| node_main
node_main -->|"mounts"| node_app
node_main -->|"imports"| node_global_css
node_app -->|"renders"| node_navbar
node_app -->|"renders"| node_hero
node_app -->|"renders"| node_about
node_app -->|"renders"| node_projects
node_app -->|"renders"| node_gallery
node_app -->|"renders"| node_blog
node_app -->|"renders"| node_skills
node_app -->|"renders"| node_contact
node_app -->|"renders"| node_footer
node_navbar -->|"reads and writes theme"| node_browser_state
node_gallery -->|"opens"| node_video_popup
node_projects -->|"uses media references"| node_assets
node_gallery -->|"uses media references"| node_assets
node_package -->|"runs"| node_vite
node_vite -->|"processes styles with"| node_styling
node_vite -->|"bundles to"| node_dist
node_workflow -->|"publishes"| node_dist
node_deployment -.->|"documents"| node_workflow

click node_html "https://github.com/kekanath/about_me/blob/main/index.html"
click node_main "https://github.com/kekanath/about_me/blob/main/src/main.jsx"
click node_app "https://github.com/kekanath/about_me/blob/main/src/App.jsx"
click node_navbar "https://github.com/kekanath/about_me/blob/main/src/components/Navbar.jsx"
click node_global_css "https://github.com/kekanath/about_me/blob/main/src/styles/global.css"
click node_hero "https://github.com/kekanath/about_me/blob/main/src/components/Hero.jsx"
click node_about "https://github.com/kekanath/about_me/blob/main/src/components/About.jsx"
click node_projects "https://github.com/kekanath/about_me/blob/main/src/components/Projects.jsx"
click node_gallery "https://github.com/kekanath/about_me/blob/main/src/components/Gallery.jsx"
click node_video_popup "https://github.com/kekanath/about_me/blob/main/src/components/VideoPopup.jsx"
click node_blog "https://github.com/kekanath/about_me/blob/main/src/components/Blog.jsx"
click node_skills "https://github.com/kekanath/about_me/blob/main/src/components/Skills.jsx"
click node_contact "https://github.com/kekanath/about_me/blob/main/src/components/Contact.jsx"
click node_footer "https://github.com/kekanath/about_me/blob/main/src/components/Footer.jsx"
click node_assets "https://github.com/kekanath/about_me/blob/main/src/assets/assetsConfig.js"
click node_vite "https://github.com/kekanath/about_me/blob/main/vite.config.js"
click node_styling "https://github.com/kekanath/about_me/blob/main/tailwind.config.js"
click node_package "https://github.com/kekanath/about_me/blob/main/package.json"
click node_workflow "https://github.com/kekanath/about_me/blob/main/.github/workflows/static.yml"
click node_deployment "https://github.com/kekanath/about_me/blob/main/DEPLOYMENT.md"

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_html,node_main,node_app,node_navbar,node_browser_state,node_global_css toneBlue
class node_hero,node_about,node_projects,node_gallery,node_video_popup,node_blog,node_skills,node_contact,node_footer,node_assets toneAmber
class node_vite,node_styling,node_package,node_workflow,node_dist,node_deployment toneMint
```

## Components

### Browser SPA

- [HTML Shell](https://github.com/kekanath/about_me/blob/main/index.html): static entry · `index.html`
- [React Entry](https://github.com/kekanath/about_me/blob/main/src/main.jsx): browser bootstrap · `src/main.jsx`
- [Page Composer](https://github.com/kekanath/about_me/blob/main/src/App.jsx): React root · Builds the single scrolling portfolio page. · `src/App.jsx`
- [Navigation & Theme](https://github.com/kekanath/about_me/blob/main/src/components/Navbar.jsx): React component · Persists manual theme preference in browser storage. · `src/components/Navbar.jsx`
- **Browser Theme State**: localStorage + system preference
- [Global Styles](https://github.com/kekanath/about_me/blob/main/src/styles/global.css): CSS · `src/styles/global.css`

### Portfolio Sections

- [Hero](https://github.com/kekanath/about_me/blob/main/src/components/Hero.jsx): React section · `src/components/Hero.jsx`
- [About](https://github.com/kekanath/about_me/blob/main/src/components/About.jsx): React section · `src/components/About.jsx`
- [Projects](https://github.com/kekanath/about_me/blob/main/src/components/Projects.jsx): React section · `src/components/Projects.jsx`
- [Gallery](https://github.com/kekanath/about_me/blob/main/src/components/Gallery.jsx): React section · `src/components/Gallery.jsx`
- [Media Popup](https://github.com/kekanath/about_me/blob/main/src/components/VideoPopup.jsx): React overlay · Isolates gallery media interaction. · `src/components/VideoPopup.jsx`
- [Blog](https://github.com/kekanath/about_me/blob/main/src/components/Blog.jsx): React section · `src/components/Blog.jsx`
- [Skills](https://github.com/kekanath/about_me/blob/main/src/components/Skills.jsx): React section · `src/components/Skills.jsx`
- [Contact](https://github.com/kekanath/about_me/blob/main/src/components/Contact.jsx): React section · `src/components/Contact.jsx`
- [Footer](https://github.com/kekanath/about_me/blob/main/src/components/Footer.jsx): React layout component · `src/components/Footer.jsx`
- [Asset References](https://github.com/kekanath/about_me/blob/main/src/assets/assetsConfig.js): media configuration · `src/assets/assetsConfig.js`

### Build & Deployment

- [Vite Build](https://github.com/kekanath/about_me/blob/main/vite.config.js): bundler · Sets the GitHub Pages repository base path. · `vite.config.js`
- [Tailwind / PostCSS](https://github.com/kekanath/about_me/blob/main/tailwind.config.js): style pipeline · `tailwind.config.js`
- [Package Scripts](https://github.com/kekanath/about_me/blob/main/package.json): tooling manifest · Defines React, Vite, and deployment tooling. · `package.json`
- [GitHub Actions](https://github.com/kekanath/about_me/blob/main/.github/workflows/static.yml): deployment workflow · `.github/workflows/static.yml`
- **Static Site Output**: production artifact · Published to GitHub Pages.
- [Deployment Guide](https://github.com/kekanath/about_me/blob/main/DEPLOYMENT.md): deployment documentation · `DEPLOYMENT.md`

## Connections

- HTML Shell → React Entry: loads
- React Entry → Page Composer: mounts
- React Entry → Global Styles: imports
- Page Composer → Navigation & Theme: renders
- Page Composer → Hero: renders
- Page Composer → About: renders
- Page Composer → Projects: renders
- Page Composer → Gallery: renders
- Page Composer → Blog: renders
- Page Composer → Skills: renders
- Page Composer → Contact: renders
- Page Composer → Footer: renders
- Navigation & Theme → Browser Theme State: reads and writes theme
- Gallery → Media Popup: opens
- Projects → Asset References: uses media references
- Gallery → Asset References: uses media references
- Package Scripts → Vite Build: runs
- Vite Build → Tailwind / PostCSS: processes styles with
- Vite Build → Static Site Output: bundles to
- GitHub Actions → Static Site Output: publishes
- Deployment Guide → GitHub Actions: documents