# shivanshu-jha/my-portfolio architecture

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

- Interactive diagram: https://gitdiagram.com/shivanshu-jha/my-portfolio
- Repository: https://github.com/shivanshu-jha/my-portfolio

## Overview

1. **Overall shape**
   - This is a **single-page, client-rendered React app** written in **TypeScript**.
   - The app is organized like a **personal portfolio / AI Studio showcase**: a landing page with several content sections plus an interactive terminal-like AI feature.
   - There is **no obvious backend service or database** in the repo tree; most content appears to be local/static and rendered in the browser.

2. **Application entry and composition**
   - `src/main.tsx` is the browser entry point that mounts the app.
   - `src/App.tsx` is the top-level composition layer and likely assembles the page by placing the major sections in order.
   - The architecture is therefore a **component tree** rather than a multi-page or server-centric design.

3. **Major UI subsystems**
   - `Header.tsx` provides top-level navigation/branding.
   - `Hero.tsx` is the landing/intro section.
   - `SkillsGrid.tsx`, `ProjectsShowcase.tsx`, and `EducationTimeline.tsx` render the main portfolio content areas.
   - `ContactForm.tsx` is the user-facing contact boundary.
   - `InteractiveTerminal.tsx` is the most distinct interactive subsystem and likely the only part that behaves differently from the static sections.

4. **Shared content and type boundary**
   - `src/data.ts` centralizes the portfolio content used by multiple sections.
   - `src/types.ts` defines the shared TypeScript models for that content.
   - This creates a clean boundary: **data and schema live separately from presentation**, so the section components render from imported structured data instead of hardcoding everything.

5. **Data flow**
   - The primary data flow is **static content import → typed data objects → presentational section components → rendered page**.
   - Section components appear to be mostly consumer views over the shared data module.
   - This means the app is likely easy to re-theme or re-content without changing layout logic.

6. **Interactive/AI boundary**
   - The README requires `GEMINI_API_KEY`, which strongly suggests the app has an **external Gemini API integration**.
   - `InteractiveTerminal.tsx` is the most likely integration point for that API.
   - Architecturally, this is the only clear external service boundary in the repo: **browser UI ↔ Gemini-powered experience**.

7. **Styling and presentation layer**
   - Global styling lives in `src/index.css`.
   - `postcss.config.mjs` indicates the CSS pipeline is processed, but the repo tree does not show a separate design system or CSS-in-JS layer.
   - The visual architecture is therefore likely **component-driven styling with a shared global stylesheet**.

8. **Static assets and document shell**
   - `public/` contains static assets served as-is.
   - `index.html` is the HTML shell that hosts the React app.
   - These are standard SPA boundaries: the browser loads one shell, then React takes over rendering.

9. **Tooling and build/runtime**
   - The app is built around **Node.js** and uses `npm`.
   - `vite.config.ts`, `eslint.config.mjs`, and `tsconfig.json` define the local build, lint, and typecheck environment.
   - The repo also contains `.next` and `next.config.ts` artifacts, but the visible runtime entrypoints are React/Vite-style (`src/main.tsx`, `vite.config.ts`), so those Next-related files look like scaffold or generated support rather than the primary app structure.

10. **Operational model**
   - Local run flow is simple: install deps, provide `GEMINI_API_KEY`, start dev server.
   - There is no sign of separate services, queues, persistence, or auth infrastructure.
   - From an architecture-diagram perspective, this is best drawn as a **front-end SPA with one external AI API dependency**, plus static asset hosting.

Main entry points: [`src/App.tsx`](https://github.com/shivanshu-jha/my-portfolio/blob/main/src/App.tsx) (App Root), [`src/data.ts`](https://github.com/shivanshu-jha/my-portfolio/blob/main/src/data.ts) (Content Data), [`src/main.tsx`](https://github.com/shivanshu-jha/my-portfolio/blob/main/src/main.tsx) (App Entry), [`vite.config.ts`](https://github.com/shivanshu-jha/my-portfolio/blob/main/vite.config.ts) (Vite Build)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_ui["UI Composition"]
  node_app_tsx["App Root<br/>composition root<br/>[App.tsx]"]
  node_header_tsx["Header<br/>navigation component<br/>[Header.tsx]"]
  node_hero_tsx["Hero<br/>landing section<br/>[Hero.tsx]"]
  node_skills_tsx["Skills Grid<br/>portfolio section<br/>[SkillsGrid.tsx]"]
  node_projects_tsx["Projects<br/>portfolio section"]
  node_education_tsx["Timeline<br/>portfolio section"]
  node_contact_tsx["Contact Form<br/>contact boundary<br/>[ContactForm.tsx]"]
  node_terminal_tsx["Interactive Terminal<br/>ai feature"]
end

subgraph group_shared["Shared Content"]
  node_data_ts["Content Data<br/>typed content source<br/>[data.ts]"]
  node_types_ts["Types<br/>type models<br/>[types.ts]"]
  node_index_css["Global Styles<br/>stylesheet<br/>[index.css]"]
end

subgraph group_infra["Runtime & Tooling"]
  node_index_html["HTML Shell<br/>document shell<br/>[index.html]"]
  node_main_tsx["App Entry<br/>react bootstrap<br/>[main.tsx]"]
  node_public_assets[("Public Assets<br/>static assets")]
  node_vite_config["Vite Build<br/>build tooling<br/>[vite.config.ts]"]
  node_tsconfig["TypeScript Config<br/>typecheck tooling<br/>[tsconfig.json]"]
  node_eslint["ESLint Config<br/>lint tooling<br/>[eslint.config.mjs]"]
end

subgraph group_external["External Service"]
  node_gemini_api(("Gemini API<br/>external ai service"))
end

node_index_html -->|"loads"| node_main_tsx
node_main_tsx -->|"mounts"| node_app_tsx
node_app_tsx -->|"renders"| node_header_tsx
node_app_tsx -->|"renders"| node_hero_tsx
node_app_tsx -->|"renders"| node_skills_tsx
node_app_tsx -->|"renders"| node_projects_tsx
node_app_tsx -->|"renders"| node_education_tsx
node_app_tsx -->|"renders"| node_contact_tsx
node_app_tsx -->|"renders"| node_terminal_tsx
node_skills_tsx -->|"consumes"| node_data_ts
node_projects_tsx -->|"consumes"| node_data_ts
node_education_tsx -->|"consumes"| node_data_ts
node_contact_tsx -->|"uses"| node_data_ts
node_terminal_tsx -.->|"calls"| node_gemini_api
node_app_tsx -->|"styles"| node_index_css
node_main_tsx -->|"imports"| node_index_css
node_data_ts -->|"typed by"| node_types_ts
node_vite_config -->|"builds"| node_main_tsx
node_vite_config -->|"serves"| node_public_assets
node_tsconfig -->|"checks"| node_app_tsx
node_eslint -->|"lints"| node_app_tsx

click node_index_html "https://github.com/shivanshu-jha/my-portfolio/blob/main/index.html"
click node_main_tsx "https://github.com/shivanshu-jha/my-portfolio/blob/main/src/main.tsx"
click node_app_tsx "https://github.com/shivanshu-jha/my-portfolio/blob/main/src/App.tsx"
click node_header_tsx "https://github.com/shivanshu-jha/my-portfolio/blob/main/src/components/Header.tsx"
click node_hero_tsx "https://github.com/shivanshu-jha/my-portfolio/blob/main/src/components/Hero.tsx"
click node_skills_tsx "https://github.com/shivanshu-jha/my-portfolio/blob/main/src/components/SkillsGrid.tsx"
click node_projects_tsx "https://github.com/shivanshu-jha/my-portfolio/blob/main/src/components/ProjectsShowcase.tsx"
click node_education_tsx "https://github.com/shivanshu-jha/my-portfolio/blob/main/src/components/EducationTimeline.tsx"
click node_contact_tsx "https://github.com/shivanshu-jha/my-portfolio/blob/main/src/components/ContactForm.tsx"
click node_terminal_tsx "https://github.com/shivanshu-jha/my-portfolio/blob/main/src/components/InteractiveTerminal.tsx"
click node_data_ts "https://github.com/shivanshu-jha/my-portfolio/blob/main/src/data.ts"
click node_types_ts "https://github.com/shivanshu-jha/my-portfolio/blob/main/src/types.ts"
click node_index_css "https://github.com/shivanshu-jha/my-portfolio/blob/main/src/index.css"
click node_public_assets "https://github.com/shivanshu-jha/my-portfolio/tree/main/public"
click node_vite_config "https://github.com/shivanshu-jha/my-portfolio/blob/main/vite.config.ts"
click node_tsconfig "https://github.com/shivanshu-jha/my-portfolio/blob/main/tsconfig.json"
click node_eslint "https://github.com/shivanshu-jha/my-portfolio/blob/main/eslint.config.mjs"

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_tsx,node_header_tsx,node_hero_tsx,node_skills_tsx,node_projects_tsx,node_education_tsx,node_contact_tsx,node_terminal_tsx toneBlue
class node_data_ts,node_types_ts,node_index_css toneAmber
class node_index_html,node_main_tsx,node_public_assets,node_vite_config,node_tsconfig,node_eslint toneMint
class node_gemini_api toneRose
```

## Components

### UI Composition

React application shell and feature sections

- [App Root](https://github.com/shivanshu-jha/my-portfolio/blob/main/src/App.tsx): composition root · Top-level page composition · `src/App.tsx`
- [Header](https://github.com/shivanshu-jha/my-portfolio/blob/main/src/components/Header.tsx): navigation component · Top navigation and branding · `src/components/Header.tsx`
- [Hero](https://github.com/shivanshu-jha/my-portfolio/blob/main/src/components/Hero.tsx): landing section · Introductory landing content · `src/components/Hero.tsx`
- [Skills Grid](https://github.com/shivanshu-jha/my-portfolio/blob/main/src/components/SkillsGrid.tsx): portfolio section · Displays skills and capabilities · `src/components/SkillsGrid.tsx`
- [Projects](https://github.com/shivanshu-jha/my-portfolio/blob/main/src/components/ProjectsShowcase.tsx): portfolio section · Showcases selected projects · `src/components/ProjectsShowcase.tsx`
- [Timeline](https://github.com/shivanshu-jha/my-portfolio/blob/main/src/components/EducationTimeline.tsx): portfolio section · Education and experience timeline · `src/components/EducationTimeline.tsx`
- [Contact Form](https://github.com/shivanshu-jha/my-portfolio/blob/main/src/components/ContactForm.tsx): contact boundary · User contact interaction surface · `src/components/ContactForm.tsx`
- [Interactive Terminal](https://github.com/shivanshu-jha/my-portfolio/blob/main/src/components/InteractiveTerminal.tsx): ai feature · Terminal-like interactive AI experience · `src/components/InteractiveTerminal.tsx`

### Shared Content

Typed data and styles consumed across the app

- [Content Data](https://github.com/shivanshu-jha/my-portfolio/blob/main/src/data.ts): typed content source · Central portfolio content consumed by sections · `src/data.ts`
- [Types](https://github.com/shivanshu-jha/my-portfolio/blob/main/src/types.ts): type models · Shared TypeScript data models · `src/types.ts`
- [Global Styles](https://github.com/shivanshu-jha/my-portfolio/blob/main/src/index.css): stylesheet · Shared application styling · `src/index.css`

### Runtime & Tooling

Entry, build, and hosting boundaries

- [HTML Shell](https://github.com/shivanshu-jha/my-portfolio/blob/main/index.html): document shell · Browser host document for the SPA · `index.html`
- [App Entry](https://github.com/shivanshu-jha/my-portfolio/blob/main/src/main.tsx): react bootstrap · Mounts the React app into the page · `src/main.tsx`
- [Public Assets](https://github.com/shivanshu-jha/my-portfolio/tree/main/public): static assets · Files served directly by the host · `public`
- [Vite Build](https://github.com/shivanshu-jha/my-portfolio/blob/main/vite.config.ts): build tooling · Local development and production build setup · `vite.config.ts`
- [TypeScript Config](https://github.com/shivanshu-jha/my-portfolio/blob/main/tsconfig.json): typecheck tooling · Compiler and project TypeScript settings · `tsconfig.json`
- [ESLint Config](https://github.com/shivanshu-jha/my-portfolio/blob/main/eslint.config.mjs): lint tooling · Code quality and lint rules · `eslint.config.mjs`

### External Service

Browser dependency beyond the local app

- **Gemini API**: external ai service · Remote AI service used by the terminal experience

## Connections

- HTML Shell → App Entry: loads · HTML shell loads the React entry point
- App Entry → App Root: mounts · Bootstraps the top-level app component
- App Root → Header: renders · Composes the shared page header
- App Root → Hero: renders · Places the landing hero section
- App Root → Skills Grid: renders · Places the skills section
- App Root → Projects: renders · Places the projects showcase
- App Root → Timeline: renders · Places the education timeline
- App Root → Contact Form: renders · Places the contact boundary
- App Root → Interactive Terminal: renders · Places the interactive AI terminal
- Skills Grid → Content Data: consumes · Reads typed portfolio content
- Projects → Content Data: consumes · Reads project entries from shared data
- Timeline → Content Data: consumes · Reads timeline data from shared content
- Contact Form → Content Data: uses · Shares repository content and contact copy where needed
- Interactive Terminal → Gemini API: calls · Uses the external Gemini service for AI responses
- App Root → Global Styles: styles · Relies on global application styling
- App Entry → Global Styles: imports · Loads global styles with the app
- Content Data → Types: typed by · Content objects follow shared TypeScript models
- Vite Build → App Entry: builds · Vite bundles the browser entry
- Vite Build → Public Assets: serves · Static assets are part of the delivered app
- TypeScript Config → App Root: checks · TypeScript config governs source compilation
- ESLint Config → App Root: lints · Linting applies to the React source tree