# deepanshurajput-2027/portfolio architecture

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

- Interactive diagram: https://gitdiagram.com/deepanshurajput-2027/portfolio
- Repository: https://github.com/deepanshurajput-2027/portfolio

## Overview

#### Purpose and Runtime

This is a client-only React portfolio presented as a macOS-like desktop. Vite provides the development/build runtime and React renders the interactive UI. There is no server, API layer, database, or authentication evident.

Entry points:
- `index.html` loads the application shell.
- `src/main.jsx` mounts React.
- `src/App.jsx` composes the desktop experience and top-level state.
- `vite.config.js` configures the Vite build.

#### Application Shell and Lifecycle

`src/App.jsx` is the central orchestrator. It likely controls startup/loading transition, currently open desktop windows, and composition of navigation, dock, and window content. Global visual styling is centralized in `src/app.css`.

Startup is represented by:
- `src/components/LoadingScreen/LoadingScreen.jsx`
- `src/components/LoadingScreen/LoadingScreen.css`
- `public/startup.mp3`

The loading screen is an explicit boundary before the interactive desktop is exposed; audio is served as a static public asset.

#### Desktop Navigation and App Launching

The dock is the primary application launcher:
- `src/components/Dock/Dock.jsx`
- `src/components/Dock/DockIcon.jsx`
- `src/components/Dock/DockRender.jsx`

Its available applications and icon metadata are data-driven through `src/data/dockData.js`. `DockRender.jsx` is the dispatch boundary between dock item identity and the corresponding window component. Dock-specific CSS separates interaction/layout from the rest of the desktop.

A secondary top navigation/status region is implemented by:
- `src/components/Nav/Nav.jsx`
- `src/components/Nav/Nav.css`
- `src/components/DateTime.jsx`

#### Shared Window Framework

All desktop applications are expected to render inside a reusable macOS-style window abstraction:
- `src/components/windows/MacWindow/MacWindow.jsx`
- `src/components/windows/MacWindow/components/WindowHeader.jsx`
- `src/components/windows/MacWindow/hooks/useWindowAnimations.js`

This framework owns the common chrome and animation behavior, while individual application windows own their content. Shared window styling resides in `src/components/windows/Window.css`. This is the key UI boundary for adding or changing desktop apps without duplicating frame behavior.

#### Portfolio Content Windows

The dock opens specialized portfolio surfaces, each with isolated markup and styling:
- Resume viewer: `src/components/windows/Resume/Resume.jsx`, `public/Resume.pdf`
- Certifications browser: `src/components/windows/Certifications/Certifications.jsx`, `src/data/certifications.json`
- GitHub/project display: `src/components/windows/Github/Github.jsx`, `src/assets/github.json`
- Command-line portfolio interface: `src/components/windows/Cli/Cli.jsx`, `src/data/cliData.js`

Certification documents are static PDFs under `public/certification/`; the JSON data likely supplies labels, links, or grouping. GitHub content is bundled local JSON rather than fetched from the GitHub API.

#### Communication and Media Windows

Additional desktop apps provide interactive presentation features:
- Mail/contact UI: `src/components/windows/Mail/Mail.jsx`, `src/components/windows/Mail/components/MailFormFields.jsx`, `src/components/windows/Mail/components/MailToolbar.jsx`
- Notes content: `src/components/windows/Note/Note.jsx`
- Spotify-themed media UI: `src/components/windows/Spotify/Spotify.jsx`

No backend or email provider integration is visible in the tree, so the mail window should be treated as client-side UI unless its implementation introduces an external action. Spotify likewise appears to be a local presentation component, not a service integration.

#### Static Asset Boundary

`public/` contains browser-served files referenced directly by the UI: PDFs, certification documents, icon sets, and startup audio. Bundled application data/assets live under `src/data/` and `src/assets/`. This separation matters when adding content: public files are URL-addressable at runtime, while `src` content participates in the Vite module graph and build.

Main entry points: [`src/components/windows/MacWindow/MacWindow.jsx`](https://github.com/deepanshurajput-2027/portfolio/blob/main/src/components/windows/MacWindow/MacWindow.jsx) (Mac Window), [`src/App.jsx`](https://github.com/deepanshurajput-2027/portfolio/blob/main/src/App.jsx) (Desktop Orchestrator), [`src/components/windows/Certifications/Certifications.jsx`](https://github.com/deepanshurajput-2027/portfolio/blob/main/src/components/windows/Certifications/Certifications.jsx) (Certifications Browser), [`src/components/Dock/DockRender.jsx`](https://github.com/deepanshurajput-2027/portfolio/blob/main/src/components/Dock/DockRender.jsx) (Dock Launcher)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_runtime["Runtime"]
  node_vite{{"Vite<br/>build runtime<br/>[vite.config.js]"}}
  node_html["Application Shell<br/>HTML entry<br/>[index.html]"]
  node_main["React Mount<br/>React entry<br/>[main.jsx]"]
end

subgraph group_shell["Desktop Shell"]
  node_app["Desktop Orchestrator<br/>React shell<br/>[App.jsx]"]
  node_styles["Global Styling<br/>CSS<br/>[app.css]"]
  node_loading["Loading Screen<br/>startup UI<br/>[LoadingScreen.jsx]"]
  node_nav["Status Navigation<br/>navigation UI<br/>[Nav.jsx]"]
  node_dock["Dock Launcher<br/>app launcher<br/>[DockRender.jsx]"]
end

subgraph group_framework["Window Framework"]
  node_macwindow["Mac Window<br/>shared UI framework<br/>[MacWindow.jsx]"]
  node_windowstyles["Window Styling<br/>CSS<br/>[Window.css]"]
end

subgraph group_apps["Portfolio Apps"]
  node_resume["Resume Viewer<br/>desktop app<br/>[Resume.jsx]"]
  node_certifications["Certifications Browser<br/>desktop app<br/>[Certifications.jsx]"]
  node_github["Project Display<br/>desktop app<br/>[Github.jsx]"]
  node_cli["Portfolio CLI<br/>desktop app<br/>[Cli.jsx]"]
  node_communication["Mail, Notes &amp; Spotify<br/>desktop apps<br/>[Mail.jsx]"]
end

subgraph group_content["Content &amp; Assets"]
  node_dockdata["Dock Metadata<br/>app data<br/>[dockData.js]"]
  node_bundleddata["Bundled Content<br/>module data"]
  node_publicassets["Public Media &amp; Documents<br/>static assets<br/>[Resume.pdf]"]
end

node_vite -->|"serves/builds"| node_html
node_html -->|"loads"| node_main
node_main -->|"mounts"| node_app
node_app -->|"uses"| node_styles
node_app -->|"startup boundary"| node_loading
node_loading -->|"plays audio"| node_publicassets
node_app -->|"composes"| node_nav
node_app -->|"composes"| node_dock
node_dockdata -->|"defines apps"| node_dock
node_dock -->|"launches content in"| node_macwindow
node_macwindow -->|"uses"| node_windowstyles
node_macwindow -->|"frames"| node_resume
node_macwindow -->|"frames"| node_certifications
node_macwindow -->|"frames"| node_github
node_macwindow -->|"frames"| node_cli
node_macwindow -->|"frames"| node_communication
node_resume -->|"displays PDF"| node_publicassets
node_certifications -->|"reads metadata"| node_bundleddata
node_certifications -->|"opens PDFs"| node_publicassets
node_github -->|"reads project data"| node_bundleddata
node_cli -->|"reads command data"| node_bundleddata

click node_vite "https://github.com/deepanshurajput-2027/portfolio/blob/main/vite.config.js"
click node_html "https://github.com/deepanshurajput-2027/portfolio/blob/main/index.html"
click node_main "https://github.com/deepanshurajput-2027/portfolio/blob/main/src/main.jsx"
click node_app "https://github.com/deepanshurajput-2027/portfolio/blob/main/src/App.jsx"
click node_styles "https://github.com/deepanshurajput-2027/portfolio/blob/main/src/app.css"
click node_loading "https://github.com/deepanshurajput-2027/portfolio/blob/main/src/components/LoadingScreen/LoadingScreen.jsx"
click node_nav "https://github.com/deepanshurajput-2027/portfolio/blob/main/src/components/Nav/Nav.jsx"
click node_dock "https://github.com/deepanshurajput-2027/portfolio/blob/main/src/components/Dock/DockRender.jsx"
click node_dockdata "https://github.com/deepanshurajput-2027/portfolio/blob/main/src/data/dockData.js"
click node_macwindow "https://github.com/deepanshurajput-2027/portfolio/blob/main/src/components/windows/MacWindow/MacWindow.jsx"
click node_windowstyles "https://github.com/deepanshurajput-2027/portfolio/blob/main/src/components/windows/Window.css"
click node_resume "https://github.com/deepanshurajput-2027/portfolio/blob/main/src/components/windows/Resume/Resume.jsx"
click node_certifications "https://github.com/deepanshurajput-2027/portfolio/blob/main/src/components/windows/Certifications/Certifications.jsx"
click node_github "https://github.com/deepanshurajput-2027/portfolio/blob/main/src/components/windows/Github/Github.jsx"
click node_cli "https://github.com/deepanshurajput-2027/portfolio/blob/main/src/components/windows/Cli/Cli.jsx"
click node_communication "https://github.com/deepanshurajput-2027/portfolio/blob/main/src/components/windows/Mail/Mail.jsx"
click node_bundleddata "https://github.com/deepanshurajput-2027/portfolio/blob/main/src/data/certifications.json"
click node_publicassets "https://github.com/deepanshurajput-2027/portfolio/blob/main/public/Resume.pdf"

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_vite,node_html,node_main toneBlue
class node_app,node_styles,node_loading,node_nav,node_dock toneAmber
class node_macwindow,node_windowstyles toneMint
class node_resume,node_certifications,node_github,node_cli,node_communication toneRose
class node_dockdata,node_bundleddata,node_publicassets toneIndigo
```

## Components

### Runtime

- [Vite](https://github.com/deepanshurajput-2027/portfolio/blob/main/vite.config.js): build runtime · `vite.config.js`
- [Application Shell](https://github.com/deepanshurajput-2027/portfolio/blob/main/index.html): HTML entry · `index.html`
- [React Mount](https://github.com/deepanshurajput-2027/portfolio/blob/main/src/main.jsx): React entry · `src/main.jsx`

### Desktop Shell

- [Desktop Orchestrator](https://github.com/deepanshurajput-2027/portfolio/blob/main/src/App.jsx): React shell · Owns loading state, open windows, and top-level composition. · `src/App.jsx`
- [Global Styling](https://github.com/deepanshurajput-2027/portfolio/blob/main/src/app.css): CSS · `src/app.css`
- [Loading Screen](https://github.com/deepanshurajput-2027/portfolio/blob/main/src/components/LoadingScreen/LoadingScreen.jsx): startup UI · `src/components/LoadingScreen/LoadingScreen.jsx`
- [Status Navigation](https://github.com/deepanshurajput-2027/portfolio/blob/main/src/components/Nav/Nav.jsx): navigation UI · `src/components/Nav/Nav.jsx`
- [Dock Launcher](https://github.com/deepanshurajput-2027/portfolio/blob/main/src/components/Dock/DockRender.jsx): app launcher · Renders launch icons and dispatches selected applications. · `src/components/Dock/DockRender.jsx`

### Window Framework

- [Mac Window](https://github.com/deepanshurajput-2027/portfolio/blob/main/src/components/windows/MacWindow/MacWindow.jsx): shared UI framework · Provides reusable window chrome and animation behavior. · `src/components/windows/MacWindow/MacWindow.jsx`
- [Window Styling](https://github.com/deepanshurajput-2027/portfolio/blob/main/src/components/windows/Window.css): CSS · `src/components/windows/Window.css`

### Portfolio Apps

- [Resume Viewer](https://github.com/deepanshurajput-2027/portfolio/blob/main/src/components/windows/Resume/Resume.jsx): desktop app · `src/components/windows/Resume/Resume.jsx`
- [Certifications Browser](https://github.com/deepanshurajput-2027/portfolio/blob/main/src/components/windows/Certifications/Certifications.jsx): desktop app · `src/components/windows/Certifications/Certifications.jsx`
- [Project Display](https://github.com/deepanshurajput-2027/portfolio/blob/main/src/components/windows/Github/Github.jsx): desktop app · `src/components/windows/Github/Github.jsx`
- [Portfolio CLI](https://github.com/deepanshurajput-2027/portfolio/blob/main/src/components/windows/Cli/Cli.jsx): desktop app · `src/components/windows/Cli/Cli.jsx`
- [Mail, Notes & Spotify](https://github.com/deepanshurajput-2027/portfolio/blob/main/src/components/windows/Mail/Mail.jsx): desktop apps · Client-side presentation windows. · `src/components/windows/Mail/Mail.jsx`

### Content & Assets

- [Dock Metadata](https://github.com/deepanshurajput-2027/portfolio/blob/main/src/data/dockData.js): app data · `src/data/dockData.js`
- [Bundled Content](https://github.com/deepanshurajput-2027/portfolio/blob/main/src/data/certifications.json): module data · Certification, CLI, and GitHub content is included in the Vite module graph. · `src/data/certifications.json`
- [Public Media & Documents](https://github.com/deepanshurajput-2027/portfolio/blob/main/public/Resume.pdf): static assets · Browser-served resume, certification PDFs, and startup audio. · `public/Resume.pdf`

## Connections

- Vite → Application Shell: serves/builds
- Application Shell → React Mount: loads
- React Mount → Desktop Orchestrator: mounts
- Desktop Orchestrator → Global Styling: uses
- Desktop Orchestrator → Loading Screen: startup boundary
- Loading Screen → Public Media & Documents: plays audio
- Desktop Orchestrator → Status Navigation: composes
- Desktop Orchestrator → Dock Launcher: composes
- Dock Metadata → Dock Launcher: defines apps
- Dock Launcher → Mac Window: launches content in
- Mac Window → Window Styling: uses
- Mac Window → Resume Viewer: frames
- Mac Window → Certifications Browser: frames
- Mac Window → Project Display: frames
- Mac Window → Portfolio CLI: frames
- Mac Window → Mail, Notes & Spotify: frames
- Resume Viewer → Public Media & Documents: displays PDF
- Certifications Browser → Bundled Content: reads metadata
- Certifications Browser → Public Media & Documents: opens PDFs
- Project Display → Bundled Content: reads project data
- Portfolio CLI → Bundled Content: reads command data