# yashuroy08/yashwanth-portfolio architecture

> Architecture diagram of the GitHub repository yashuroy08/yashwanth-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/yashuroy08/yashwanth-portfolio
- Repository: https://github.com/yashuroy08/yashwanth-portfolio

## Overview

#### Purpose and Runtime

This is a Vite-served React single-page developer portfolio. It presents profile, skills, projects, blog content, contact, and interactive “Nothing OS” themed experiences. The browser is the primary runtime; deployment targets Vercel via `vercel.json`. Static assets, including 3D avatar models and résumé, are served from `public/`.

Entry points: `index.html` loads `src/main.jsx`, which mounts the application rooted at `src/App.jsx`.

#### Application Composition

`src/App.jsx` is the top-level composition and routing/control boundary for the portfolio experience. It coordinates global styling from `src/App.css` and assembles page sections, layout controls, effects, and feature overlays.

The app is client-rendered rather than backed by a repository-local API. Portfolio claims about Java/Spring/MongoDB/MySQL describe showcased skills, not services implemented in this codebase.

#### Page and Content Sections

The primary information architecture is implemented as independently rendered portfolio sections:

- Landing and availability presentation: `src/components/sections/Hero.jsx`
- Technical skills and project catalog/filter experience: `src/components/sections/Skills.jsx`, `src/components/sections/Projects.jsx`
- Contact and education content: `src/components/sections/Contact.jsx`, `src/components/sections/Education.jsx`
- Blog listing/detail and missing-route view: `src/components/sections/Blogs.jsx`, `src/components/sections/BlogPost.jsx`, `src/components/sections/NotFound.jsx`

Control flows are primarily in-browser user interactions: scroll navigation, content filtering, section linking, and potentially client-side route selection.

#### Global Layout, Navigation, and Theme

Shared page framing is separated from content sections:

- Navigation/header: `src/components/layout/Header.jsx`
- Footer and scroll affordances: `src/components/layout/Footer.jsx`, `src/components/layout/BackToTop.jsx`, `src/components/layout/ScrollProgress.jsx`
- Theme state/provider boundary: `src/context/ThemeContext.jsx`

`ThemeContext` is the global visual-state mechanism used by theme-aware UI. Base styles are centralized in `src/index.css`; component-level styling is in `src/App.css` and selected UI CSS files.

#### Immersive Rendering and Interaction Layer

Visual effects are client-side components, isolated from portfolio content:

- Canvas/animated atmosphere: `src/components/effects/AnimatedBackground.jsx`
- Cursor and splash interactions: `src/components/effects/CursorBubble.jsx`, `src/components/effects/SplashCursor.jsx`
- Scroll behavior and sound interaction: `src/components/effects/SmoothScroll.jsx`, `src/components/effects/SoundEffects.jsx`

Reusable presentation primitives—reveal animations, magnetic interactions, horizontal/scroll panels, text effects, and cards—live under `src/components/ui/`. They form the shared interaction layer consumed by sections rather than a data or service layer.

#### Feature Overlays and External Boundaries

Optional high-interaction features are encapsulated independently:

- Terminal simulation: `src/components/features/FloatingTerminal.jsx`, `src/components/features/TerminalFeature.jsx`
- Loader and media player: `src/components/features/Loader.jsx`, `src/components/features/MusicPlayer.jsx`
- Chat and GitHub-facing widgets: `src/components/features/ChatAssistant.jsx`, `src/components/features/GithubStats.jsx`
- Résumé redirect: `src/components/features/ResumeRedirect.jsx`

The contact flow is the significant external-service boundary. README-defined Vite environment variables (`VITE_SERVICE_ID`, `VITE_TEMPLATE_ID`, `VITE_PUBLIC_KEY`) configure EmailJS credentials client-side. GitHub statistics may similarly depend on a remote GitHub endpoint, though no backend implementation exists in the tree.

#### Static Delivery and Infrastructure

Vite configuration is in `vite.config.js`; production static hosting behavior is defined by `vercel.json`. Public SEO and downloadable assets are direct static resources: `public/robots.txt`, `public/sitemap.xml`, `public/resume.pdf`. Avatar rendering consumes GLB assets at `public/avatar-model-1.glb` and `public/avatar-model-2.glb` through `src/components/Avatar.jsx`.

Main entry points: [`src/App.jsx`](https://github.com/yashuroy08/yashwanth-portfolio/blob/main/src/App.jsx) (App composition), [`src/main.jsx`](https://github.com/yashuroy08/yashwanth-portfolio/blob/main/src/main.jsx) (React bootstrap), [`src/components/sections/Hero.jsx`](https://github.com/yashuroy08/yashwanth-portfolio/blob/main/src/components/sections/Hero.jsx) (Portfolio sections), [`public/resume.pdf`](https://github.com/yashuroy08/yashwanth-portfolio/blob/main/public/resume.pdf) (Public static assets)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_runtime["Browser application"]
  node_html["HTML entry<br/>Vite entry<br/>[index.html]"]
  node_main["React bootstrap<br/>entry module<br/>[main.jsx]"]
  node_app["App composition<br/>application shell<br/>[App.jsx]"]
  node_theme["Theme state<br/>React context<br/>[ThemeContext.jsx]"]
  node_base_styles["Base styles<br/>global CSS<br/>[index.css]"]
end

subgraph group_ui["Portfolio UI"]
  node_header["Header navigation<br/>layout component<br/>[Header.jsx]"]
  node_scroll_ui["Scroll affordances<br/>layout controls<br/>[ScrollProgress.jsx]"]
  node_portfolio_sections["Portfolio sections<br/>content views<br/>[Hero.jsx]"]
  node_blog_views["Blog and fallback views<br/>content views<br/>[Blogs.jsx]"]
  node_ui_primitives["Interaction primitives<br/>shared UI layer"]
  node_effects["Atmosphere and input effects<br/>client effects"]
  node_terminal["Terminal experience<br/>feature overlay"]
  node_media_features["Media and utility overlays<br/>feature overlays<br/>[Loader.jsx]"]
  node_github_stats["GitHub statistics<br/>remote-data widget<br/>[GithubStats.jsx]"]
  node_avatar["3D avatar<br/>asset consumer<br/>[Avatar.jsx]"]
end

subgraph group_external["Delivery and external services"]
  node_emailjs{{"EmailJS<br/>external contact service"}}
  node_github_api{{"GitHub endpoint<br/>external data service"}}
  node_public_assets["Public static assets<br/>static files<br/>[resume.pdf]"]
  node_vite["Vite build and dev server<br/>tooling<br/>[vite.config.js]"]
  node_vercel{{"Vercel static hosting<br/>deployment target<br/>[vercel.json]"}}
end

node_html -->|"loads"| node_main
node_main -->|"mounts"| node_app
node_main -->|"loads"| node_base_styles
node_app -->|"uses"| node_theme
node_app -->|"composes"| node_header
node_app -->|"composes"| node_scroll_ui
node_app -->|"renders"| node_portfolio_sections
node_app -->|"selects"| node_blog_views
node_app -->|"enables"| node_effects
node_app -->|"hosts"| node_terminal
node_app -->|"hosts"| node_media_features
node_portfolio_sections -->|"uses"| node_ui_primitives
node_blog_views -->|"uses"| node_ui_primitives
node_portfolio_sections -->|"submits contact"| node_emailjs
node_github_stats -.->|"fetches stats"| node_github_api
node_app -->|"hosts"| node_github_stats
node_app -->|"renders"| node_avatar
node_avatar -->|"loads GLB models"| node_public_assets
node_media_features -->|"links résumé"| node_public_assets
node_vite -->|"serves and builds"| node_html
node_vite -->|"deploys static output"| node_vercel
node_vercel -->|"serves"| node_public_assets

click node_html "https://github.com/yashuroy08/yashwanth-portfolio/blob/main/index.html"
click node_main "https://github.com/yashuroy08/yashwanth-portfolio/blob/main/src/main.jsx"
click node_app "https://github.com/yashuroy08/yashwanth-portfolio/blob/main/src/App.jsx"
click node_theme "https://github.com/yashuroy08/yashwanth-portfolio/blob/main/src/context/ThemeContext.jsx"
click node_base_styles "https://github.com/yashuroy08/yashwanth-portfolio/blob/main/src/index.css"
click node_header "https://github.com/yashuroy08/yashwanth-portfolio/blob/main/src/components/layout/Header.jsx"
click node_scroll_ui "https://github.com/yashuroy08/yashwanth-portfolio/blob/main/src/components/layout/ScrollProgress.jsx"
click node_portfolio_sections "https://github.com/yashuroy08/yashwanth-portfolio/blob/main/src/components/sections/Hero.jsx"
click node_blog_views "https://github.com/yashuroy08/yashwanth-portfolio/blob/main/src/components/sections/Blogs.jsx"
click node_effects "https://github.com/yashuroy08/yashwanth-portfolio/blob/main/src/components/effects/AnimatedBackground.jsx"
click node_terminal "https://github.com/yashuroy08/yashwanth-portfolio/blob/main/src/components/features/FloatingTerminal.jsx"
click node_media_features "https://github.com/yashuroy08/yashwanth-portfolio/blob/main/src/components/features/Loader.jsx"
click node_github_stats "https://github.com/yashuroy08/yashwanth-portfolio/blob/main/src/components/features/GithubStats.jsx"
click node_avatar "https://github.com/yashuroy08/yashwanth-portfolio/blob/main/src/components/Avatar.jsx"
click node_public_assets "https://github.com/yashuroy08/yashwanth-portfolio/blob/main/public/resume.pdf"
click node_vite "https://github.com/yashuroy08/yashwanth-portfolio/blob/main/vite.config.js"
click node_vercel "https://github.com/yashuroy08/yashwanth-portfolio/blob/main/vercel.json"

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_theme,node_base_styles toneBlue
class node_header,node_scroll_ui,node_portfolio_sections,node_blog_views,node_ui_primitives,node_effects,node_terminal,node_media_features,node_github_stats,node_avatar toneAmber
class node_emailjs,node_github_api,node_public_assets,node_vite,node_vercel toneMint
```

## Components

### Browser application

Client-rendered Vite React SPA.

- [HTML entry](https://github.com/yashuroy08/yashwanth-portfolio/blob/main/index.html): Vite entry · `index.html`
- [React bootstrap](https://github.com/yashuroy08/yashwanth-portfolio/blob/main/src/main.jsx): entry module · `src/main.jsx`
- [App composition](https://github.com/yashuroy08/yashwanth-portfolio/blob/main/src/App.jsx): application shell · Composes sections, controls, effects, and overlays. · `src/App.jsx`
- [Theme state](https://github.com/yashuroy08/yashwanth-portfolio/blob/main/src/context/ThemeContext.jsx): React context · Global visual-state provider for theme-aware UI. · `src/context/ThemeContext.jsx`
- [Base styles](https://github.com/yashuroy08/yashwanth-portfolio/blob/main/src/index.css): global CSS · `src/index.css`

### Portfolio UI

Content, layout, and interactive presentation.

- [Header navigation](https://github.com/yashuroy08/yashwanth-portfolio/blob/main/src/components/layout/Header.jsx): layout component · `src/components/layout/Header.jsx`
- [Scroll affordances](https://github.com/yashuroy08/yashwanth-portfolio/blob/main/src/components/layout/ScrollProgress.jsx): layout controls · Footer, back-to-top, and reading-progress UI. · `src/components/layout/ScrollProgress.jsx`
- [Portfolio sections](https://github.com/yashuroy08/yashwanth-portfolio/blob/main/src/components/sections/Hero.jsx): content views · Hero, skills, projects, contact, and education content. · `src/components/sections/Hero.jsx`
- [Blog and fallback views](https://github.com/yashuroy08/yashwanth-portfolio/blob/main/src/components/sections/Blogs.jsx): content views · Blog listing, post detail, and missing-route presentation. · `src/components/sections/Blogs.jsx`
- **Interaction primitives**: shared UI layer · Reusable reveal, magnetic, scroll-panel, text, and card effects.
- [Atmosphere and input effects](https://github.com/yashuroy08/yashwanth-portfolio/blob/main/src/components/effects/AnimatedBackground.jsx): client effects · Animated background, cursor, smooth-scroll, and sound interactions. · `src/components/effects/AnimatedBackground.jsx`
- [Terminal experience](https://github.com/yashuroy08/yashwanth-portfolio/blob/main/src/components/features/FloatingTerminal.jsx): feature overlay · Floating terminal simulation. · `src/components/features/FloatingTerminal.jsx`
- [Media and utility overlays](https://github.com/yashuroy08/yashwanth-portfolio/blob/main/src/components/features/Loader.jsx): feature overlays · Loader, music player, résumé redirect, and chat UI. · `src/components/features/Loader.jsx`
- [GitHub statistics](https://github.com/yashuroy08/yashwanth-portfolio/blob/main/src/components/features/GithubStats.jsx): remote-data widget · `src/components/features/GithubStats.jsx`
- [3D avatar](https://github.com/yashuroy08/yashwanth-portfolio/blob/main/src/components/Avatar.jsx): asset consumer · Renders public GLB avatar models. · `src/components/Avatar.jsx`

### Delivery and external services

Static hosting, assets, and remote integrations.

- **EmailJS**: external contact service · Client-side contact delivery configured by Vite environment variables.
- **GitHub endpoint**: external data service · Possible remote source for repository statistics.
- [Public static assets](https://github.com/yashuroy08/yashwanth-portfolio/blob/main/public/resume.pdf): static files · SEO files, résumé download, and avatar GLB models. · `public/resume.pdf`
- [Vite build and dev server](https://github.com/yashuroy08/yashwanth-portfolio/blob/main/vite.config.js): tooling · `vite.config.js`
- [Vercel static hosting](https://github.com/yashuroy08/yashwanth-portfolio/blob/main/vercel.json): deployment target · `vercel.json`

## Connections

- HTML entry → React bootstrap: loads
- React bootstrap → App composition: mounts
- React bootstrap → Base styles: loads
- App composition → Theme state: uses
- App composition → Header navigation: composes
- App composition → Scroll affordances: composes
- App composition → Portfolio sections: renders
- App composition → Blog and fallback views: selects
- App composition → Atmosphere and input effects: enables
- App composition → Terminal experience: hosts
- App composition → Media and utility overlays: hosts
- Portfolio sections → Interaction primitives: uses
- Blog and fallback views → Interaction primitives: uses
- Portfolio sections → EmailJS: submits contact
- GitHub statistics → GitHub endpoint: fetches stats
- App composition → GitHub statistics: hosts
- App composition → 3D avatar: renders
- 3D avatar → Public static assets: loads GLB models
- Media and utility overlays → Public static assets: links résumé
- Vite build and dev server → HTML entry: serves and builds
- Vite build and dev server → Vercel static hosting: deploys static output
- Vercel static hosting → Public static assets: serves