# batmanvigilante7/hemanthsai-portfolio architecture

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

- Interactive diagram: https://gitdiagram.com/batmanvigilante7/hemanthsai-portfolio
- Repository: https://github.com/batmanvigilante7/hemanthsai-portfolio

## Overview

1. This is a single-page React front-end built with Vite. The repository is primarily a presentation/portfolio site, not a multi-service or backend-driven application.

2. The runtime boundary is the browser. `index.html` provides the root HTML shell, and `src/main.jsx` boots the React app into that shell. Vite handles local development, hot module reload, and production bundling.

3. `src/App.jsx` is the top-level composition layer. It likely assembles the page from a set of section components rather than doing any heavy business logic or routing.

4. The UI is organized into feature-like sections under `src/components/`. The component names suggest a long-form landing page with distinct blocks such as `Hero`, `Navbar`, `Services`, `Projects`, `Contact`, `Footer`, `Welcome`, `OperatingMethod`, and `IdentityStack`.

5. There is a dedicated portfolio subtree inside the same component folder: `Portfolio`, `PortfolioHero`, `PortfolioIntro`, and `PortfolioImpression`. That suggests a secondary page or a segmented portfolio experience, but still within the same client-side app and component system.

6. Media is part of the product experience. Static video assets live in `public/assets/videos/` and `public/man-typing-builder.mp4`, indicating the app relies on browser-served assets for hero or storytelling sections rather than API-fetched content.

7. Styling is split between `src/App.css` and `src/index.css`, so the visual system is likely centralized at the app level plus global resets/base styles. There is no sign of CSS-in-JS, a design system package, or scoped styling infrastructure.

8. Data flow appears mostly unidirectional and static: components render predefined content and assets, with props/state likely limited to UI behavior such as navigation, section display, or responsive interactions. No state management library, API client, or backend integration is visible in the tree.

9. The main architectural boundary is therefore between the React component tree and static asset delivery. Any dynamic behavior is local UI behavior inside components; the app’s content is probably encoded directly in JSX and imported media.

10. Tooling boundaries are straightforward: `vite.config.js` defines the build/dev configuration, `eslint.config.js` enforces linting, and `package.json`/`package-lock.json` define the JavaScript dependency graph. There is no indication of server-side rendering, routing framework, or database layer.

11. The `.github/workflows/blank.yml` file suggests CI/CD is present only as a placeholder or minimal workflow, so deployment architecture is likely external to this repo or intentionally simple.

12. For an architecture diagram, the key boxes are: browser shell (`index.html`) → Vite/React entry (`main.jsx`) → top-level composition (`App.jsx`) → section components (`Navbar`, `Hero`, `Services`, `Projects`, `Contact`, portfolio subsections) → static media in `public/`. The app is best modeled as a content-driven SPA with static assets and no visible backend dependencies.

Main entry points: [`src/App.jsx`](https://github.com/batmanvigilante7/hemanthsai-portfolio/blob/main/src/App.jsx) (App Root), [`src/components/Portfolio.jsx`](https://github.com/batmanvigilante7/hemanthsai-portfolio/blob/main/src/components/Portfolio.jsx) (Portfolio), [`src/main.jsx`](https://github.com/batmanvigilante7/hemanthsai-portfolio/blob/main/src/main.jsx) (App Boot), [`src/components/Hero.jsx`](https://github.com/batmanvigilante7/hemanthsai-portfolio/blob/main/src/components/Hero.jsx) (Hero)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_runtime["Runtime"]
  node_index_html["HTML Shell<br/>entry shell<br/>[index.html]"]
end

subgraph group_ui["React UI"]
  node_main_jsx["App Boot<br/>react entry<br/>[main.jsx]"]
  node_app_jsx["App Root<br/>composition<br/>[App.jsx]"]
  node_navbar["Navbar<br/>section component<br/>[Navbar.jsx]"]
  node_hero["Hero<br/>section component<br/>[Hero.jsx]"]
  node_services["Services<br/>section component<br/>[Services.jsx]"]
  node_projects["Projects<br/>section component<br/>[Projects.jsx]"]
  node_contact["Contact<br/>section component<br/>[Contact.jsx]"]
  node_footer["Footer<br/>section component<br/>[Footer.jsx]"]
  node_welcome["Welcome<br/>section component<br/>[Welcome.jsx]"]
  node_method["Method<br/>section component"]
  node_identity["Identity<br/>section component<br/>[IdentityStack.jsx]"]
  node_portfolio["Portfolio<br/>[Portfolio.jsx]"]
  node_portfolio_hero["Portfolio Hero<br/>portfolio section<br/>[PortfolioHero.jsx]"]
  node_portfolio_intro["Portfolio Intro<br/>portfolio section<br/>[PortfolioIntro.jsx]"]
  node_portfolio_impression["Impression<br/>portfolio section"]
  node_video_hero["Video Hero<br/>media section<br/>[VideoHero.jsx]"]
  node_letter_testimonials["Testimonials<br/>section component"]
  node_app_css["App Styles<br/>css bundle<br/>[App.css]"]
  node_index_css["Global Styles<br/>css base<br/>[index.css]"]
end

subgraph group_assets["Static Assets"]
  node_genesis_video[("Genesis Video<br/>video asset<br/>[genesis.mp4]")]
  node_builder_video[("Builder Video<br/>video asset")]
end

subgraph group_tooling["Tooling"]
  node_vite_config["Vite Config<br/>build config<br/>[vite.config.js]"]
  node_eslint_config["ESLint Config<br/>[eslint.config.js]"]
  node_package_json["Package Manifest<br/>dependencies<br/>[package.json]"]
  node_ci_workflow["CI Workflow<br/>github actions<br/>[blank.yml]"]
end

node_index_html -->|"loads"| node_main_jsx
node_main_jsx -->|"mounts"| node_app_jsx
node_app_jsx -->|"composes"| node_navbar
node_app_jsx -->|"composes"| node_hero
node_app_jsx -->|"composes"| node_services
node_app_jsx -->|"composes"| node_projects
node_app_jsx -->|"composes"| node_contact
node_app_jsx -->|"composes"| node_footer
node_app_jsx -->|"composes"| node_welcome
node_app_jsx -->|"composes"| node_method
node_app_jsx -->|"composes"| node_identity
node_app_jsx -->|"composes"| node_portfolio
node_portfolio -->|"contains"| node_portfolio_hero
node_portfolio -->|"contains"| node_portfolio_intro
node_portfolio -->|"contains"| node_portfolio_impression
node_app_jsx -->|"composes"| node_video_hero
node_app_jsx -->|"composes"| node_letter_testimonials
node_app_jsx -->|"styles"| node_app_css
node_main_jsx -->|"imports"| node_index_css
node_hero -.->|"uses"| node_genesis_video
node_video_hero -.->|"uses"| node_builder_video
node_vite_config -.->|"builds"| node_main_jsx
node_eslint_config -.->|"checks"| node_app_jsx
node_package_json -.->|"scripts"| node_vite_config
node_ci_workflow -.->|"runs"| node_package_json

click node_index_html "https://github.com/batmanvigilante7/hemanthsai-portfolio/blob/main/index.html"
click node_main_jsx "https://github.com/batmanvigilante7/hemanthsai-portfolio/blob/main/src/main.jsx"
click node_app_jsx "https://github.com/batmanvigilante7/hemanthsai-portfolio/blob/main/src/App.jsx"
click node_navbar "https://github.com/batmanvigilante7/hemanthsai-portfolio/blob/main/src/components/Navbar.jsx"
click node_hero "https://github.com/batmanvigilante7/hemanthsai-portfolio/blob/main/src/components/Hero.jsx"
click node_services "https://github.com/batmanvigilante7/hemanthsai-portfolio/blob/main/src/components/Services.jsx"
click node_projects "https://github.com/batmanvigilante7/hemanthsai-portfolio/blob/main/src/components/Projects.jsx"
click node_contact "https://github.com/batmanvigilante7/hemanthsai-portfolio/blob/main/src/components/Contact.jsx"
click node_footer "https://github.com/batmanvigilante7/hemanthsai-portfolio/blob/main/src/components/Footer.jsx"
click node_welcome "https://github.com/batmanvigilante7/hemanthsai-portfolio/blob/main/src/components/Welcome.jsx"
click node_method "https://github.com/batmanvigilante7/hemanthsai-portfolio/blob/main/src/components/OperatingMethod.jsx"
click node_identity "https://github.com/batmanvigilante7/hemanthsai-portfolio/blob/main/src/components/IdentityStack.jsx"
click node_portfolio "https://github.com/batmanvigilante7/hemanthsai-portfolio/blob/main/src/components/Portfolio.jsx"
click node_portfolio_hero "https://github.com/batmanvigilante7/hemanthsai-portfolio/blob/main/src/components/PortfolioHero.jsx"
click node_portfolio_intro "https://github.com/batmanvigilante7/hemanthsai-portfolio/blob/main/src/components/PortfolioIntro.jsx"
click node_portfolio_impression "https://github.com/batmanvigilante7/hemanthsai-portfolio/blob/main/src/components/PortfolioImpression.jsx"
click node_video_hero "https://github.com/batmanvigilante7/hemanthsai-portfolio/blob/main/src/components/VideoHero.jsx"
click node_letter_testimonials "https://github.com/batmanvigilante7/hemanthsai-portfolio/blob/main/src/components/LetterTestimonials.jsx"
click node_app_css "https://github.com/batmanvigilante7/hemanthsai-portfolio/blob/main/src/App.css"
click node_index_css "https://github.com/batmanvigilante7/hemanthsai-portfolio/blob/main/src/index.css"
click node_genesis_video "https://github.com/batmanvigilante7/hemanthsai-portfolio/blob/main/public/assets/videos/genesis.mp4"
click node_builder_video "https://github.com/batmanvigilante7/hemanthsai-portfolio/blob/main/public/man-typing-builder.mp4"
click node_vite_config "https://github.com/batmanvigilante7/hemanthsai-portfolio/blob/main/vite.config.js"
click node_eslint_config "https://github.com/batmanvigilante7/hemanthsai-portfolio/blob/main/eslint.config.js"
click node_package_json "https://github.com/batmanvigilante7/hemanthsai-portfolio/blob/main/package.json"
click node_ci_workflow "https://github.com/batmanvigilante7/hemanthsai-portfolio/blob/main/.github/workflows/blank.yml"

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_index_html toneBlue
class node_main_jsx,node_app_jsx,node_navbar,node_hero,node_services,node_projects,node_contact,node_footer,node_welcome,node_method,node_identity,node_portfolio,node_portfolio_hero,node_portfolio_intro,node_portfolio_impression,node_video_hero,node_letter_testimonials,node_app_css,node_index_css toneAmber
class node_genesis_video,node_builder_video toneMint
class node_vite_config,node_eslint_config,node_package_json,node_ci_workflow toneRose
```

## Components

### Runtime

Browser-delivered application boundary

- [HTML Shell](https://github.com/batmanvigilante7/hemanthsai-portfolio/blob/main/index.html): entry shell · Root document that hosts the app · `index.html`

### React UI

Entry, composition, and section components

- [App Boot](https://github.com/batmanvigilante7/hemanthsai-portfolio/blob/main/src/main.jsx): react entry · Mounts React into the HTML shell · `src/main.jsx`
- [App Root](https://github.com/batmanvigilante7/hemanthsai-portfolio/blob/main/src/App.jsx): composition · Top-level page assembly · `src/App.jsx`
- [Navbar](https://github.com/batmanvigilante7/hemanthsai-portfolio/blob/main/src/components/Navbar.jsx): section component · Top navigation and page framing · `src/components/Navbar.jsx`
- [Hero](https://github.com/batmanvigilante7/hemanthsai-portfolio/blob/main/src/components/Hero.jsx): section component · Primary landing introduction · `src/components/Hero.jsx`
- [Services](https://github.com/batmanvigilante7/hemanthsai-portfolio/blob/main/src/components/Services.jsx): section component · Service or offering summary · `src/components/Services.jsx`
- [Projects](https://github.com/batmanvigilante7/hemanthsai-portfolio/blob/main/src/components/Projects.jsx): section component · Portfolio or work showcase · `src/components/Projects.jsx`
- [Contact](https://github.com/batmanvigilante7/hemanthsai-portfolio/blob/main/src/components/Contact.jsx): section component · Lead capture or contact block · `src/components/Contact.jsx`
- [Footer](https://github.com/batmanvigilante7/hemanthsai-portfolio/blob/main/src/components/Footer.jsx): section component · Bottom page information · `src/components/Footer.jsx`
- [Welcome](https://github.com/batmanvigilante7/hemanthsai-portfolio/blob/main/src/components/Welcome.jsx): section component · Introductory content block · `src/components/Welcome.jsx`
- [Method](https://github.com/batmanvigilante7/hemanthsai-portfolio/blob/main/src/components/OperatingMethod.jsx): section component · Process or operating approach · `src/components/OperatingMethod.jsx`
- [Identity](https://github.com/batmanvigilante7/hemanthsai-portfolio/blob/main/src/components/IdentityStack.jsx): section component · Stack or profile positioning · `src/components/IdentityStack.jsx`
- [Portfolio](https://github.com/batmanvigilante7/hemanthsai-portfolio/blob/main/src/components/Portfolio.jsx): portfolio section · Secondary portfolio experience · `src/components/Portfolio.jsx`
- [Portfolio Hero](https://github.com/batmanvigilante7/hemanthsai-portfolio/blob/main/src/components/PortfolioHero.jsx): portfolio section · Portfolio entry header · `src/components/PortfolioHero.jsx`
- [Portfolio Intro](https://github.com/batmanvigilante7/hemanthsai-portfolio/blob/main/src/components/PortfolioIntro.jsx): portfolio section · Portfolio introduction content · `src/components/PortfolioIntro.jsx`
- [Impression](https://github.com/batmanvigilante7/hemanthsai-portfolio/blob/main/src/components/PortfolioImpression.jsx): portfolio section · Portfolio showcase detail · `src/components/PortfolioImpression.jsx`
- [Video Hero](https://github.com/batmanvigilante7/hemanthsai-portfolio/blob/main/src/components/VideoHero.jsx): media section · Hero section driven by video content · `src/components/VideoHero.jsx`
- [Testimonials](https://github.com/batmanvigilante7/hemanthsai-portfolio/blob/main/src/components/LetterTestimonials.jsx): section component · Social proof or letters block · `src/components/LetterTestimonials.jsx`
- [App Styles](https://github.com/batmanvigilante7/hemanthsai-portfolio/blob/main/src/App.css): css bundle · App-level styling · `src/App.css`
- [Global Styles](https://github.com/batmanvigilante7/hemanthsai-portfolio/blob/main/src/index.css): css base · Global reset and base styles · `src/index.css`

### Static Assets

Public media served directly by the browser

- [Genesis Video](https://github.com/batmanvigilante7/hemanthsai-portfolio/blob/main/public/assets/videos/genesis.mp4): video asset · Public media used by the site · `public/assets/videos/genesis.mp4`
- [Builder Video](https://github.com/batmanvigilante7/hemanthsai-portfolio/blob/main/public/man-typing-builder.mp4): video asset · Public media used by the site · `public/man-typing-builder.mp4`

### Tooling

Build, lint, and CI configuration

- [Vite Config](https://github.com/batmanvigilante7/hemanthsai-portfolio/blob/main/vite.config.js): build config · Development and production bundling setup · `vite.config.js`
- [ESLint Config](https://github.com/batmanvigilante7/hemanthsai-portfolio/blob/main/eslint.config.js): lint config · Code quality rules · `eslint.config.js`
- [Package Manifest](https://github.com/batmanvigilante7/hemanthsai-portfolio/blob/main/package.json): dependencies · Project scripts and dependency graph · `package.json`
- [CI Workflow](https://github.com/batmanvigilante7/hemanthsai-portfolio/blob/main/.github/workflows/blank.yml): github actions · Placeholder or minimal workflow · `.github/workflows/blank.yml`

## Connections

- HTML Shell → App Boot: loads · Browser shell loads the React entry point
- App Boot → App Root: mounts · Bootstraps the app root into the page
- App Root → Navbar: composes · Top-level page includes navigation
- App Root → Hero: composes · Top-level page includes hero section
- App Root → Services: composes · Top-level page includes services section
- App Root → Projects: composes · Top-level page includes projects section
- App Root → Contact: composes · Top-level page includes contact section
- App Root → Footer: composes · Top-level page includes footer
- App Root → Welcome: composes · Top-level page includes welcome block
- App Root → Method: composes · Top-level page includes operating method block
- App Root → Identity: composes · Top-level page includes identity stack block
- App Root → Portfolio: composes · Top-level page includes portfolio experience
- Portfolio → Portfolio Hero: contains · Portfolio experience is broken into sub-sections
- Portfolio → Portfolio Intro: contains · Portfolio experience is broken into sub-sections
- Portfolio → Impression: contains · Portfolio experience is broken into sub-sections
- App Root → Video Hero: composes · Top-level page includes video-led storytelling
- App Root → Testimonials: composes · Top-level page includes testimonials or letters
- App Root → App Styles: styles · App component is styled by local CSS
- App Boot → Global Styles: imports · Entry point applies global base styles
- Hero → Genesis Video: uses · Hero or section content relies on public video asset
- Video Hero → Builder Video: uses · Video hero relies on public video asset
- Vite Config → App Boot: builds · Vite bundles the React entry
- ESLint Config → App Root: checks · Linting applies across source components
- Package Manifest → Vite Config: scripts · Project scripts drive the Vite toolchain
- CI Workflow → Package Manifest: runs · Workflow would execute project scripts if enabled