# anu66-tech/anushree_portfolio architecture

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

- Interactive diagram: https://gitdiagram.com/anu66-tech/anushree_portfolio
- Repository: https://github.com/anu66-tech/anushree_portfolio

## Overview

#### Purpose and runtime
This is a Vite-built React single-page personal portfolio/CV site. It presents professional profile content, career history, projects, skills, credentials, contact details, and a downloadable PDF resume. The production static bundle is represented in `dist/index.html` and `dist/assets`; the resume is served from `public/ANUSHREE_CV.pdf`.

#### Application entry and composition
The browser entry point is `src/main.jsx`, which mounts the React application. `src/App.jsx` is the page-level composition boundary: it assembles the portfolio sections into a single scroll-oriented experience and is the primary place to alter section ordering or global layout.

#### Content model
`src/data/siteData.js` is the central content boundary. It likely supplies profile, experience, education, skills, project, certification, and contact data consumed by presentation components. Updating portfolio facts should preferentially happen here rather than inside section JSX.

#### Navigation and page flow
`src/components/Navbar.jsx` provides navigation across the one-page sections, while `src/components/Hero.jsx` establishes the landing/intro state. The expected control flow is navigation action → anchor/section targeting → scroll through independently rendered content sections. `src/components/Footer.jsx` closes the page and provides the shared end-of-page boundary.

#### Career and qualifications sections
Professional background is represented by dedicated display components:
- `src/components/CareerJourney.jsx`
- `src/components/Experience.jsx`
- `src/components/Education.jsx`

This separation supports distinct visual treatments for timeline narrative, work experience, and academic history while keeping `App.jsx` responsible for orchestration.

#### Work, skills, and credentials
Portfolio evidence is divided into focused modules:
- `src/components/FeaturedProject.jsx`
- `src/components/Projects.jsx`
- `src/components/Skills.jsx`
- `src/components/Certification.jsx`

Featured work is architecturally separate from the broader projects collection, allowing a primary case study or highlighted project without changing the general project-list rendering path.

#### Contact, resume, and interaction layer
`src/components/Contact.jsx` owns the user-contact surface. `src/components/Resume.jsx` is the UI boundary for access to the resume artifact at `public/ANUSHREE_CV.pdf`. `src/components/CustomCursor.jsx` adds client-side pointer interaction and should remain isolated from content/data concerns because it depends on browser pointer behavior.

#### Styling and build boundary
Global styling is rooted at `src/index.css`; Tailwind integration is configured through `tailwind.config.js` and `postcss.config.js`. Vite configuration is in `vite.config.js`, with `index.html` serving as the development/build HTML shell. The app has no indicated backend, database, authentication layer, or external service integration; deployment is static hosting of the Vite output and public assets.

Main entry points: [`src/App.jsx`](https://github.com/anu66-tech/anushree_portfolio/blob/main/src/App.jsx) (App composition), [`src/data/siteData.js`](https://github.com/anu66-tech/anushree_portfolio/blob/main/src/data/siteData.js) (Site data), [`src/main.jsx`](https://github.com/anu66-tech/anushree_portfolio/blob/main/src/main.jsx) (React entry), [`src/components/Hero.jsx`](https://github.com/anu66-tech/anushree_portfolio/blob/main/src/components/Hero.jsx) (Hero)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_runtime["Browser SPA"]
  node_main["React entry<br/>browser bootstrap<br/>[main.jsx]"]
  node_app["App composition<br/>page orchestrator<br/>[App.jsx]"]
  node_navbar["Navbar<br/>anchor navigation<br/>[Navbar.jsx]"]
  node_footer["Footer<br/>[Footer.jsx]"]
  node_cursor["Custom Cursor<br/>pointer interaction<br/>[CustomCursor.jsx]"]
end

subgraph group_sections["Portfolio Sections"]
  node_hero["Hero<br/>landing section<br/>[Hero.jsx]"]
  node_career["Career Journey<br/>timeline section<br/>[CareerJourney.jsx]"]
  node_experience["Experience<br/>work history section<br/>[Experience.jsx]"]
  node_education["Education<br/>academic section<br/>[Education.jsx]"]
  node_projects["Projects<br/>project collection section<br/>[Projects.jsx]"]
  node_featured["Featured Project<br/>highlighted case study"]
  node_skills["Skills<br/>[Skills.jsx]"]
  node_certification["Certification<br/>credentials section<br/>[Certification.jsx]"]
  node_contact["Contact<br/>[Contact.jsx]"]
  node_resume["Resume UI<br/>resume access section<br/>[Resume.jsx]"]
end

subgraph group_content["Content &amp; Assets"]
  node_site_data[("Site data<br/>content model<br/>[siteData.js]")]
  node_resume_pdf["CV PDF<br/>public artifact<br/>[ANUSHREE_CV.pdf]"]
end

subgraph group_build["Build &amp; Delivery"]
  node_html["HTML shell<br/>Vite HTML entry<br/>[index.html]"]
  node_vite{{"Vite build<br/>build tool<br/>[vite.config.js]"}}
  node_tailwind["Tailwind processing<br/>style build config<br/>[tailwind.config.js]"]
  node_dist["Static bundle<br/>deployment output<br/>[index.html]"]
  node_global_css["Global styles<br/>stylesheet<br/>[index.css]"]
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_career
node_app -->|"renders"| node_experience
node_app -->|"renders"| node_education
node_app -->|"renders"| node_projects
node_app -->|"renders"| node_featured
node_app -->|"renders"| node_skills
node_app -->|"renders"| node_certification
node_app -->|"renders"| node_contact
node_app -->|"renders"| node_resume
node_app -->|"renders"| node_footer
node_app -->|"enables"| node_cursor
node_navbar -.->|"anchors to sections"| node_hero
node_site_data -.->|"supplies profile"| node_hero
node_site_data -.->|"supplies experience"| node_experience
node_site_data -.->|"supplies education"| node_education
node_site_data -.->|"supplies projects"| node_projects
node_site_data -.->|"supplies skills"| node_skills
node_site_data -.->|"supplies credentials"| node_certification
node_site_data -.->|"supplies contact details"| node_contact
node_resume -->|"links to"| node_resume_pdf
node_vite -->|"builds"| node_dist
node_tailwind -->|"processes"| node_global_css
node_vite -.->|"uses"| node_html

click node_html "https://github.com/anu66-tech/anushree_portfolio/blob/main/index.html"
click node_vite "https://github.com/anu66-tech/anushree_portfolio/blob/main/vite.config.js"
click node_tailwind "https://github.com/anu66-tech/anushree_portfolio/blob/main/tailwind.config.js"
click node_dist "https://github.com/anu66-tech/anushree_portfolio/blob/main/dist/index.html"
click node_main "https://github.com/anu66-tech/anushree_portfolio/blob/main/src/main.jsx"
click node_app "https://github.com/anu66-tech/anushree_portfolio/blob/main/src/App.jsx"
click node_navbar "https://github.com/anu66-tech/anushree_portfolio/blob/main/src/components/Navbar.jsx"
click node_hero "https://github.com/anu66-tech/anushree_portfolio/blob/main/src/components/Hero.jsx"
click node_career "https://github.com/anu66-tech/anushree_portfolio/blob/main/src/components/CareerJourney.jsx"
click node_experience "https://github.com/anu66-tech/anushree_portfolio/blob/main/src/components/Experience.jsx"
click node_education "https://github.com/anu66-tech/anushree_portfolio/blob/main/src/components/Education.jsx"
click node_projects "https://github.com/anu66-tech/anushree_portfolio/blob/main/src/components/Projects.jsx"
click node_featured "https://github.com/anu66-tech/anushree_portfolio/blob/main/src/components/FeaturedProject.jsx"
click node_skills "https://github.com/anu66-tech/anushree_portfolio/blob/main/src/components/Skills.jsx"
click node_certification "https://github.com/anu66-tech/anushree_portfolio/blob/main/src/components/Certification.jsx"
click node_contact "https://github.com/anu66-tech/anushree_portfolio/blob/main/src/components/Contact.jsx"
click node_resume "https://github.com/anu66-tech/anushree_portfolio/blob/main/src/components/Resume.jsx"
click node_footer "https://github.com/anu66-tech/anushree_portfolio/blob/main/src/components/Footer.jsx"
click node_cursor "https://github.com/anu66-tech/anushree_portfolio/blob/main/src/components/CustomCursor.jsx"
click node_site_data "https://github.com/anu66-tech/anushree_portfolio/blob/main/src/data/siteData.js"
click node_resume_pdf "https://github.com/anu66-tech/anushree_portfolio/blob/main/public/ANUSHREE_CV.pdf"
click node_global_css "https://github.com/anu66-tech/anushree_portfolio/blob/main/src/index.css"

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_main,node_app,node_navbar,node_footer,node_cursor toneBlue
class node_hero,node_career,node_experience,node_education,node_projects,node_featured,node_skills,node_certification,node_contact,node_resume toneAmber
class node_site_data,node_resume_pdf toneMint
class node_html,node_vite,node_tailwind,node_dist,node_global_css toneRose
```

## Components

### Browser SPA

Single-page React portfolio runtime.

- [React entry](https://github.com/anu66-tech/anushree_portfolio/blob/main/src/main.jsx): browser bootstrap · `src/main.jsx`
- [App composition](https://github.com/anu66-tech/anushree_portfolio/blob/main/src/App.jsx): page orchestrator · Controls global layout and section ordering. · `src/App.jsx`
- [Navbar](https://github.com/anu66-tech/anushree_portfolio/blob/main/src/components/Navbar.jsx): anchor navigation · `src/components/Navbar.jsx`
- [Footer](https://github.com/anu66-tech/anushree_portfolio/blob/main/src/components/Footer.jsx): page footer · `src/components/Footer.jsx`
- [Custom Cursor](https://github.com/anu66-tech/anushree_portfolio/blob/main/src/components/CustomCursor.jsx): pointer interaction · Isolated browser pointer behavior. · `src/components/CustomCursor.jsx`

### Portfolio Sections

Independently rendered scroll targets.

- [Hero](https://github.com/anu66-tech/anushree_portfolio/blob/main/src/components/Hero.jsx): landing section · `src/components/Hero.jsx`
- [Career Journey](https://github.com/anu66-tech/anushree_portfolio/blob/main/src/components/CareerJourney.jsx): timeline section · `src/components/CareerJourney.jsx`
- [Experience](https://github.com/anu66-tech/anushree_portfolio/blob/main/src/components/Experience.jsx): work history section · `src/components/Experience.jsx`
- [Education](https://github.com/anu66-tech/anushree_portfolio/blob/main/src/components/Education.jsx): academic section · `src/components/Education.jsx`
- [Projects](https://github.com/anu66-tech/anushree_portfolio/blob/main/src/components/Projects.jsx): project collection section · `src/components/Projects.jsx`
- [Featured Project](https://github.com/anu66-tech/anushree_portfolio/blob/main/src/components/FeaturedProject.jsx): highlighted case study · `src/components/FeaturedProject.jsx`
- [Skills](https://github.com/anu66-tech/anushree_portfolio/blob/main/src/components/Skills.jsx): skills section · `src/components/Skills.jsx`
- [Certification](https://github.com/anu66-tech/anushree_portfolio/blob/main/src/components/Certification.jsx): credentials section · `src/components/Certification.jsx`
- [Contact](https://github.com/anu66-tech/anushree_portfolio/blob/main/src/components/Contact.jsx): contact section · `src/components/Contact.jsx`
- [Resume UI](https://github.com/anu66-tech/anushree_portfolio/blob/main/src/components/Resume.jsx): resume access section · `src/components/Resume.jsx`

### Content & Assets

Portfolio facts and downloadable resume.

- [Site data](https://github.com/anu66-tech/anushree_portfolio/blob/main/src/data/siteData.js): content model · Central source for portfolio facts and collections. · `src/data/siteData.js`
- [CV PDF](https://github.com/anu66-tech/anushree_portfolio/blob/main/public/ANUSHREE_CV.pdf): public artifact · `public/ANUSHREE_CV.pdf`

### Build & Delivery

Vite static build and styling boundary.

- [HTML shell](https://github.com/anu66-tech/anushree_portfolio/blob/main/index.html): Vite HTML entry · `index.html`
- [Vite build](https://github.com/anu66-tech/anushree_portfolio/blob/main/vite.config.js): build tool · `vite.config.js`
- [Tailwind processing](https://github.com/anu66-tech/anushree_portfolio/blob/main/tailwind.config.js): style build config · Tailwind and PostCSS transform application styles. · `tailwind.config.js`
- [Static bundle](https://github.com/anu66-tech/anushree_portfolio/blob/main/dist/index.html): deployment output · Static hosting output including assets. · `dist/index.html`
- [Global styles](https://github.com/anu66-tech/anushree_portfolio/blob/main/src/index.css): stylesheet · `src/index.css`

## Connections

- HTML shell → React entry: loads
- React entry → App composition: mounts
- React entry → Global styles: imports
- App composition → Navbar: renders
- App composition → Hero: renders
- App composition → Career Journey: renders
- App composition → Experience: renders
- App composition → Education: renders
- App composition → Projects: renders
- App composition → Featured Project: renders
- App composition → Skills: renders
- App composition → Certification: renders
- App composition → Contact: renders
- App composition → Resume UI: renders
- App composition → Footer: renders
- App composition → Custom Cursor: enables
- Navbar → Hero: anchors to sections
- Site data → Hero: supplies profile
- Site data → Experience: supplies experience
- Site data → Education: supplies education
- Site data → Projects: supplies projects
- Site data → Skills: supplies skills
- Site data → Certification: supplies credentials
- Site data → Contact: supplies contact details
- Resume UI → CV PDF: links to
- Vite build → Static bundle: builds
- Tailwind processing → Global styles: processes
- Vite build → HTML shell: uses