# codingmastr/tarun-s-portfolio architecture

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

- Interactive diagram: https://gitdiagram.com/codingmastr/tarun-s-portfolio
- Repository: https://github.com/codingmastr/tarun-s-portfolio

## Overview

1. **Project type and boundary**
   - This is a **single-page React portfolio site** with no backend, no database, and no external API layer.
   - The architecture is mostly **presentation-focused**: one app shell composes a set of content sections for navigation, profile/storytelling, skills, work, and contact.

2. **Application entry path**
   - The runtime starts at **`src/main.jsx`**, which mounts the React app into the HTML root from **`index.html`**.
   - **`src/App.jsx`** is the top-level composition layer that assembles the page into named sections.

3. **Page composition**
   - The main UI is split into reusable section components under **`src/components/`**:
     - `Navbar`
     - `About`
     - `Skills`
     - `Experience`
     - `Education`
     - `Work`
     - `Contact`
     - `Footer`
   - This strongly suggests a **vertical one-page layout** where the navbar links likely jump to anchored sections on the same page.

4. **Shared content/data layer**
   - **`src/constants.js`** is the central place for structured portfolio content.
   - This file likely feeds repeated or list-based UI such as skills, experience items, education entries, and project cards, keeping the components mostly presentational.
   - The presence of a constants module indicates a **content-driven design** rather than hardcoded markup in each section.

5. **Asset management**
   - Static visual assets live under **`src/assets/`** in themed subfolders:
     - `company_logo`
     - `education_logo`
     - `tech_logo`
     - `work_logo`
   - These assets are imported directly into components and used to visually brand sections like experience, education, and projects.

6. **Layout and visual effects**
   - **`src/components/BlurBlob.jsx`** is a separate visual embellishment component, likely responsible for background glow/blob effects.
   - This implies the UI combines standard content sections with a small number of reusable decorative primitives for the animated portfolio look.

7. **Styling architecture**
   - Styling is split across:
     - **Tailwind CSS** via `tailwind.config.js`
     - **PostCSS** via `postcss.config.js`
     - Global CSS in **`src/index.css`**
     - App-level overrides in **`src/App.css`**
   - The site is built around **utility-first styling** with a small amount of custom CSS for global behavior and section-specific refinements.

8. **Build and runtime tooling**
   - The project uses **Vite** (`vite.config.js`) as the development server and production bundler.
   - **React** is the UI runtime, and **ESLint** (`eslint.config.js`) is present for code quality.
   - `package-lock.json` indicates a standard npm-based dependency workflow.

9. **Navigation and interaction model**
   - The `Navbar` is the main cross-section control surface for the page.
   - The README mentions **smooth scroll and animation effects**, so the interaction model is likely driven by CSS/Tailwind transitions and scrolling behavior, not by complex client-side routing.
   - This is a **static interaction model**: users move through sections rather than navigate between pages.

10. **Content sections and their role**
   - `About` introduces the person.
   - `Skills` presents capabilities and technologies.
   - `Experience` and `Education` provide timeline-style credentials.
   - `Work` showcases projects or portfolio pieces.
   - `Contact` exposes a way to reach the owner.
   - `Footer` closes the page with attribution or links.
   - These are discrete domain sections, each with a clear responsibility and minimal coupling.

11. **Deployment shape**
   - The README states deployment on **Vercel**, so the app is intended to be served as a **static frontend build**.
   - There is no indication of server-rendered infrastructure or runtime services beyond static hosting.

12. **Repository artifact note**
   - `dist.zip` suggests a packaged build artifact is included in the repository or distribution bundle.
   - For architecture diagrams, it can be treated as an output artifact of the Vite build rather than a source subsystem.

13. **High-level data flow**
   - **Static content and assets** flow into **section components**.
   - Section components are assembled by **App**.
   - **main.jsx** mounts the app into the DOM.
   - The result is a **client-rendered, static portfolio page** optimized for presentation and navigation.

14. **What to draw in an architecture diagram**
   - A single frontend box containing:
     - React app shell
     - section components
     - shared constants/content
     - static assets
     - styling/tooling layer
   - External boundary only includes:
     - browser/DOM
     - static hosting on Vercel
     - optional links to YouTube/live demo mentioned in README

Main entry points: [`src/App.jsx`](https://github.com/codingmastr/tarun-s-portfolio/blob/main/src/App.jsx) (App), [`src/constants.js`](https://github.com/codingmastr/tarun-s-portfolio/blob/main/src/constants.js) (constants.js), [`src/index.css`](https://github.com/codingmastr/tarun-s-portfolio/blob/main/src/index.css) (index.css), [`vite.config.js`](https://github.com/codingmastr/tarun-s-portfolio/blob/main/vite.config.js) (vite.config.js)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_runtime["Runtime"]
  node_index_html["index.html<br/>entry document<br/>[index.html]"]
  node_main_jsx(("main.jsx<br/>React entry<br/>[main.jsx]"))
  node_app_jsx["App<br/>page shell<br/>[App.jsx]"]
  node_navbar["Navbar<br/>nav section<br/>[Navbar.jsx]"]
  node_about["About<br/>profile section<br/>[About.jsx]"]
  node_skills["Skills<br/>capabilities section<br/>[Skills.jsx]"]
  node_experience["Experience<br/>timeline section<br/>[Experience.jsx]"]
  node_education["Education<br/>timeline section<br/>[Education.jsx]"]
  node_work["Work<br/>portfolio section<br/>[Work.jsx]"]
  node_contact["Contact<br/>[Contact.jsx]"]
  node_footer["Footer<br/>closing section<br/>[Footer.jsx]"]
  node_blurblob(("BlurBlob<br/>decorative effect<br/>[BlurBlob.jsx]"))
end

subgraph group_content["Content"]
  node_constants["constants.js<br/>content store<br/>[constants.js]"]
  node_assets[("assets<br/>static media")]
end

subgraph group_tooling["Tooling"]
  node_app_css["App.css<br/>app styles<br/>[App.css]"]
  node_index_css["index.css<br/>global styles<br/>[index.css]"]
  node_tailwind["tailwind.config.js<br/>tailwind config<br/>[tailwind.config.js]"]
  node_postcss["postcss.config.js<br/>postcss config<br/>[postcss.config.js]"]
  node_vite["vite.config.js<br/>build config<br/>[vite.config.js]"]
  node_eslint["eslint.config.js<br/>lint config<br/>[eslint.config.js]"]
  node_dist_zip["dist.zip<br/>build artifact<br/>[dist.zip]"]
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_about
node_app_jsx -->|"composes"| node_skills
node_app_jsx -->|"composes"| node_experience
node_app_jsx -->|"composes"| node_education
node_app_jsx -->|"composes"| node_work
node_app_jsx -->|"composes"| node_contact
node_app_jsx -->|"composes"| node_footer
node_app_jsx -->|"decorates"| node_blurblob
node_app_jsx -->|"reads"| node_constants
node_about -->|"reads"| node_constants
node_skills -->|"reads"| node_constants
node_experience -->|"reads"| node_constants
node_education -->|"reads"| node_constants
node_work -->|"reads"| node_constants
node_app_jsx -->|"imports"| node_assets
node_app_jsx -->|"styles"| node_app_css
node_app_jsx -->|"styles"| node_index_css
node_index_css -->|"configured by"| node_tailwind
node_index_css -->|"processed by"| node_postcss
node_vite -->|"serves"| node_index_html
node_eslint -.->|"checks"| node_app_jsx
node_vite -->|"produces"| node_dist_zip

click node_index_html "https://github.com/codingmastr/tarun-s-portfolio/blob/main/index.html"
click node_main_jsx "https://github.com/codingmastr/tarun-s-portfolio/blob/main/src/main.jsx"
click node_app_jsx "https://github.com/codingmastr/tarun-s-portfolio/blob/main/src/App.jsx"
click node_navbar "https://github.com/codingmastr/tarun-s-portfolio/blob/main/src/components/Navbar/Navbar.jsx"
click node_about "https://github.com/codingmastr/tarun-s-portfolio/blob/main/src/components/About/About.jsx"
click node_skills "https://github.com/codingmastr/tarun-s-portfolio/blob/main/src/components/Skills/Skills.jsx"
click node_experience "https://github.com/codingmastr/tarun-s-portfolio/blob/main/src/components/Experience/Experience.jsx"
click node_education "https://github.com/codingmastr/tarun-s-portfolio/blob/main/src/components/Education/Education.jsx"
click node_work "https://github.com/codingmastr/tarun-s-portfolio/blob/main/src/components/Work/Work.jsx"
click node_contact "https://github.com/codingmastr/tarun-s-portfolio/blob/main/src/components/Contact/Contact.jsx"
click node_footer "https://github.com/codingmastr/tarun-s-portfolio/blob/main/src/components/Footer/Footer.jsx"
click node_blurblob "https://github.com/codingmastr/tarun-s-portfolio/blob/main/src/components/BlurBlob.jsx"
click node_constants "https://github.com/codingmastr/tarun-s-portfolio/blob/main/src/constants.js"
click node_assets "https://github.com/codingmastr/tarun-s-portfolio/tree/main/src/assets"
click node_app_css "https://github.com/codingmastr/tarun-s-portfolio/blob/main/src/App.css"
click node_index_css "https://github.com/codingmastr/tarun-s-portfolio/blob/main/src/index.css"
click node_tailwind "https://github.com/codingmastr/tarun-s-portfolio/blob/main/tailwind.config.js"
click node_postcss "https://github.com/codingmastr/tarun-s-portfolio/blob/main/postcss.config.js"
click node_vite "https://github.com/codingmastr/tarun-s-portfolio/blob/main/vite.config.js"
click node_eslint "https://github.com/codingmastr/tarun-s-portfolio/blob/main/eslint.config.js"
click node_dist_zip "https://github.com/codingmastr/tarun-s-portfolio/blob/main/dist.zip"

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,node_main_jsx,node_app_jsx,node_navbar,node_about,node_skills,node_experience,node_education,node_work,node_contact,node_footer,node_blurblob toneBlue
class node_constants,node_assets toneAmber
class node_app_css,node_index_css,node_tailwind,node_postcss,node_vite,node_eslint,node_dist_zip toneMint
```

## Components

### Runtime

Browser-executed React app

- [index.html](https://github.com/codingmastr/tarun-s-portfolio/blob/main/index.html): entry document · HTML mount point for the React app · `index.html`
- [main.jsx](https://github.com/codingmastr/tarun-s-portfolio/blob/main/src/main.jsx): React entry · Bootstraps React and mounts the app · `src/main.jsx`
- [App](https://github.com/codingmastr/tarun-s-portfolio/blob/main/src/App.jsx): page shell · Top-level composition for the single-page portfolio · `src/App.jsx`
- [Navbar](https://github.com/codingmastr/tarun-s-portfolio/blob/main/src/components/Navbar/Navbar.jsx): nav section · Primary section navigation for the page · `src/components/Navbar/Navbar.jsx`
- [About](https://github.com/codingmastr/tarun-s-portfolio/blob/main/src/components/About/About.jsx): profile section · Introductory personal story section · `src/components/About/About.jsx`
- [Skills](https://github.com/codingmastr/tarun-s-portfolio/blob/main/src/components/Skills/Skills.jsx): capabilities section · Technology and capability summary · `src/components/Skills/Skills.jsx`
- [Experience](https://github.com/codingmastr/tarun-s-portfolio/blob/main/src/components/Experience/Experience.jsx): timeline section · Work history and professional experience · `src/components/Experience/Experience.jsx`
- [Education](https://github.com/codingmastr/tarun-s-portfolio/blob/main/src/components/Education/Education.jsx): timeline section · Education and credentials · `src/components/Education/Education.jsx`
- [Work](https://github.com/codingmastr/tarun-s-portfolio/blob/main/src/components/Work/Work.jsx): portfolio section · Projects and showcased work · `src/components/Work/Work.jsx`
- [Contact](https://github.com/codingmastr/tarun-s-portfolio/blob/main/src/components/Contact/Contact.jsx): contact section · Ways to reach the owner · `src/components/Contact/Contact.jsx`
- [Footer](https://github.com/codingmastr/tarun-s-portfolio/blob/main/src/components/Footer/Footer.jsx): closing section · Page end, attribution, or auxiliary links · `src/components/Footer/Footer.jsx`
- [BlurBlob](https://github.com/codingmastr/tarun-s-portfolio/blob/main/src/components/BlurBlob.jsx): decorative effect · Reusable background glow/blob visual · `src/components/BlurBlob.jsx`

### Content

Shared portfolio data and visual assets

- [constants.js](https://github.com/codingmastr/tarun-s-portfolio/blob/main/src/constants.js): content store · Central structured portfolio content · `src/constants.js`
- [assets](https://github.com/codingmastr/tarun-s-portfolio/tree/main/src/assets): static media · Imported logos and imagery for sections · `src/assets`

### Tooling

Build, styling, and quality pipeline

- [App.css](https://github.com/codingmastr/tarun-s-portfolio/blob/main/src/App.css): app styles · App-level visual overrides and refinements · `src/App.css`
- [index.css](https://github.com/codingmastr/tarun-s-portfolio/blob/main/src/index.css): global styles · Global CSS foundation for the site · `src/index.css`
- [tailwind.config.js](https://github.com/codingmastr/tarun-s-portfolio/blob/main/tailwind.config.js): tailwind config · Utility-first styling configuration · `tailwind.config.js`
- [postcss.config.js](https://github.com/codingmastr/tarun-s-portfolio/blob/main/postcss.config.js): postcss config · CSS processing pipeline configuration · `postcss.config.js`
- [vite.config.js](https://github.com/codingmastr/tarun-s-portfolio/blob/main/vite.config.js): build config · Development server and production bundling · `vite.config.js`
- [eslint.config.js](https://github.com/codingmastr/tarun-s-portfolio/blob/main/eslint.config.js): lint config · Code quality and linting rules · `eslint.config.js`
- [dist.zip](https://github.com/codingmastr/tarun-s-portfolio/blob/main/dist.zip): build artifact · Packaged output bundle from the build · `dist.zip`

## Connections

- index.html → main.jsx: loads · Browser document loads the React entry
- main.jsx → App: mounts · Entry point mounts the app shell
- App → Navbar: composes · App assembles the page navigation
- App → About: composes · App places the intro section
- App → Skills: composes · App places the skills section
- App → Experience: composes · App places the experience timeline
- App → Education: composes · App places the education timeline
- App → Work: composes · App places the portfolio section
- App → Contact: composes · App places the contact section
- App → Footer: composes · App closes the page with the footer
- App → BlurBlob: decorates · App uses shared visual effects
- App → constants.js: reads · App and sections consume shared content
- About → constants.js: reads · Section content is driven by shared data
- Skills → constants.js: reads · Section content is driven by shared data
- Experience → constants.js: reads · Section content is driven by shared data
- Education → constants.js: reads · Section content is driven by shared data
- Work → constants.js: reads · Section content is driven by shared data
- App → assets: imports · App sections use static logos and imagery
- App → App.css: styles · App-level styling overrides the base presentation
- App → index.css: styles · App depends on global CSS foundation
- index.css → tailwind.config.js: configured by · Global styles work with Tailwind utilities
- index.css → postcss.config.js: processed by · CSS passes through PostCSS tooling
- vite.config.js → index.html: serves · Vite uses the HTML entry during dev and build
- eslint.config.js → App: checks · Linting covers source components and app code
- vite.config.js → dist.zip: produces · Build pipeline outputs packaged artifact