# vikkrantxx7/my-portfolio architecture

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

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

## Overview

Portfolio is a server-rendered, content-driven site: visitors browse the home experience, filter projects, and open shareable case studies or blog posts; they can also view and download a resume. Typed local content drives the presentation, with supporting discovery, preferences, audio, and offline features. Edges follow shown route/component imports, excerpted calls, or README-documented behavior; some route and feature internals were not sampled, so those links rely on README evidence.

Main entry points: [`src/routes/index.tsx`](https://github.com/vikkrantxx7/my-portfolio/blob/main/src/routes/index.tsx) (Home page), [`src/content/data.ts`](https://github.com/vikkrantxx7/my-portfolio/blob/main/src/content/data.ts) (Portfolio data), [`src/routes/__root.tsx`](https://github.com/vikkrantxx7/my-portfolio/blob/main/src/routes/__root.tsx) (Root shell), [`src/widgets/gallery/project-gallery.tsx`](https://github.com/vikkrantxx7/my-portfolio/blob/main/src/widgets/gallery/project-gallery.tsx) (Project gallery)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_routing["Pages and routing"]
  node_router["Application router<br/>[router.tsx]"]
  node_home["Home page<br/>[index.tsx]"]
  node_project_route["Project route<br/>[projects.$slug.tsx]"]
  node_blog_routes["Blog routes<br/>[blog.index.tsx]"]
  node_blog_detail["Blog article route<br/>[blog.$slug.tsx]"]
  node_sitemap["Sitemap route<br/>[sitemap&#91;.&#93;xml.ts]"]
  node_root["Root shell<br/>[__root.tsx]"]
end

subgraph group_content["Local content"]
  node_portfolio_data["Portfolio data<br/>[data.ts]"]
  node_case_studies["Case study content<br/>[case-studies.ts]"]
  node_blog_content["Blog content<br/>[blog.ts]"]
  node_site_config["Site identity<br/>[site.ts]"]
end

subgraph group_portfolio["Portfolio experiences"]
  node_home_sections["Home sections<br/>[hero.tsx]"]
  node_gallery["Project gallery"]
  node_timeline["Career timeline<br/>[timeline.tsx]"]
  node_project_detail["Case study view<br/>[project-detail.tsx]"]
  node_blog_view["Blog presentation<br/>[blog-ledger.tsx]"]
  node_resume["Resume viewer<br/>[resume-viewer.tsx]"]
end

subgraph group_discovery["Discovery and preferences"]
  node_command["Command palette"]
  node_filter["Project filtering<br/>[filter-projects.ts]"]
  node_achievement["Achievement links"]
  node_theme["Theme preferences<br/>[theme.ts]"]
  node_audio_player["Floating audio player"]
  node_audio_hook["Audio engine hook"]
  node_audio_engine["Audio engine<br/>[audio-engine.ts]"]
end

subgraph group_platform["Shared platform"]
  node_pwa["Offline service worker<br/>[register-sw.ts]"]
  node_seo["SEO utilities<br/>[seo.ts]"]
end

node_visitor(("Visitor"))

node_visitor -->|"opens pages"| node_router
node_router -->|"renders shell"| node_root
node_root -->|"renders"| node_command
node_root -->|"renders"| node_audio_player
node_root -->|"registers"| node_pwa
node_home -->|"reads"| node_portfolio_data
node_home -->|"reads"| node_site_config
node_home -->|"renders sections"| node_home_sections
node_home -->|"renders"| node_gallery
node_home -->|"renders"| node_timeline
node_home -->|"builds metadata"| node_seo
node_gallery -->|"reads projects"| node_portfolio_data
node_gallery -->|"filters projects"| node_filter
node_gallery -->|"opens case study"| node_project_route
node_project_route -->|"presents study"| node_project_detail
node_project_detail -->|"uses case content"| node_case_studies
node_blog_routes -->|"lists articles"| node_blog_content
node_blog_routes -->|"presents articles"| node_blog_view
node_blog_detail -->|"loads article"| node_blog_content
node_blog_detail -->|"presents article"| node_blog_view
node_sitemap -.->|"serves sitemap"| node_seo
node_timeline -->|"reads experience"| node_portfolio_data
node_timeline -->|"renders disclosures"| node_achievement
node_achievement -->|"reads achievements"| node_portfolio_data
node_command -->|"searches articles"| node_blog_content
node_command -->|"searches portfolio"| node_portfolio_data
node_command -->|"links achievements"| node_achievement
node_root -->|"applies theme"| node_theme
node_audio_player -->|"uses hook"| node_audio_hook
node_audio_hook -->|"creates engine"| node_audio_engine
node_visitor -->|"opens resume"| node_resume
node_project_route -.->|"uses project data"| node_portfolio_data

click node_router "https://github.com/vikkrantxx7/my-portfolio/blob/main/src/router.tsx"
click node_home "https://github.com/vikkrantxx7/my-portfolio/blob/main/src/routes/index.tsx"
click node_project_route "https://github.com/vikkrantxx7/my-portfolio/blob/main/src/routes/projects.%24slug.tsx"
click node_blog_routes "https://github.com/vikkrantxx7/my-portfolio/blob/main/src/routes/blog.index.tsx"
click node_blog_detail "https://github.com/vikkrantxx7/my-portfolio/blob/main/src/routes/blog.%24slug.tsx"
click node_sitemap "https://github.com/vikkrantxx7/my-portfolio/blob/main/src/routes/sitemap%5B.%5Dxml.ts"
click node_root "https://github.com/vikkrantxx7/my-portfolio/blob/main/src/routes/__root.tsx"
click node_portfolio_data "https://github.com/vikkrantxx7/my-portfolio/blob/main/src/content/data.ts"
click node_case_studies "https://github.com/vikkrantxx7/my-portfolio/blob/main/src/content/case-studies.ts"
click node_blog_content "https://github.com/vikkrantxx7/my-portfolio/blob/main/src/content/blog.ts"
click node_site_config "https://github.com/vikkrantxx7/my-portfolio/blob/main/src/content/site.ts"
click node_home_sections "https://github.com/vikkrantxx7/my-portfolio/blob/main/src/widgets/hero/hero.tsx"
click node_gallery "https://github.com/vikkrantxx7/my-portfolio/blob/main/src/widgets/gallery/project-gallery.tsx"
click node_timeline "https://github.com/vikkrantxx7/my-portfolio/blob/main/src/widgets/timeline/timeline.tsx"
click node_project_detail "https://github.com/vikkrantxx7/my-portfolio/blob/main/src/widgets/project-detail/project-detail.tsx"
click node_blog_view "https://github.com/vikkrantxx7/my-portfolio/blob/main/src/widgets/blog/blog-ledger.tsx"
click node_resume "https://github.com/vikkrantxx7/my-portfolio/blob/main/src/features/resume-viewer/resume-viewer.tsx"
click node_command "https://github.com/vikkrantxx7/my-portfolio/blob/main/src/features/command-palette/command-palette.tsx"
click node_filter "https://github.com/vikkrantxx7/my-portfolio/blob/main/src/features/filter-projects/filter-projects.ts"
click node_achievement "https://github.com/vikkrantxx7/my-portfolio/blob/main/src/features/expand-achievement/achievement-disclosure.tsx"
click node_theme "https://github.com/vikkrantxx7/my-portfolio/blob/main/src/features/theme-toggle/theme.ts"
click node_audio_player "https://github.com/vikkrantxx7/my-portfolio/blob/main/src/widgets/audio-player/floating-audio-player.tsx"
click node_audio_hook "https://github.com/vikkrantxx7/my-portfolio/blob/main/src/features/audio-player/use-audio-engine.ts"
click node_audio_engine "https://github.com/vikkrantxx7/my-portfolio/blob/main/src/features/audio-player/audio-engine.ts"
click node_pwa "https://github.com/vikkrantxx7/my-portfolio/blob/main/src/features/pwa/register-sw.ts"
click node_seo "https://github.com/vikkrantxx7/my-portfolio/blob/main/src/shared/lib/seo.ts"

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_router,node_home,node_project_route,node_blog_routes,node_blog_detail,node_sitemap,node_root toneBlue
class node_portfolio_data,node_case_studies,node_blog_content,node_site_config toneAmber
class node_home_sections,node_gallery,node_timeline,node_project_detail,node_blog_view,node_resume toneMint
class node_command,node_filter,node_achievement,node_theme,node_audio_player,node_audio_hook,node_audio_engine toneRose
class node_pwa,node_seo,node_visitor toneIndigo
```

## Components

### Pages and routing

- [Application router](https://github.com/vikkrantxx7/my-portfolio/blob/main/src/router.tsx): `src/router.tsx`
- [Home page](https://github.com/vikkrantxx7/my-portfolio/blob/main/src/routes/index.tsx): `src/routes/index.tsx`
- [Project route](https://github.com/vikkrantxx7/my-portfolio/blob/main/src/routes/projects.%24slug.tsx): `src/routes/projects.$slug.tsx`
- [Blog routes](https://github.com/vikkrantxx7/my-portfolio/blob/main/src/routes/blog.index.tsx): `src/routes/blog.index.tsx`
- [Blog article route](https://github.com/vikkrantxx7/my-portfolio/blob/main/src/routes/blog.%24slug.tsx): `src/routes/blog.$slug.tsx`
- [Sitemap route](https://github.com/vikkrantxx7/my-portfolio/blob/main/src/routes/sitemap%5B.%5Dxml.ts): `src/routes/sitemap[.]xml.ts`
- [Root shell](https://github.com/vikkrantxx7/my-portfolio/blob/main/src/routes/__root.tsx): `src/routes/__root.tsx`

### Local content

- [Portfolio data](https://github.com/vikkrantxx7/my-portfolio/blob/main/src/content/data.ts): `src/content/data.ts`
- [Case study content](https://github.com/vikkrantxx7/my-portfolio/blob/main/src/content/case-studies.ts): `src/content/case-studies.ts`
- [Blog content](https://github.com/vikkrantxx7/my-portfolio/blob/main/src/content/blog.ts): `src/content/blog.ts`
- [Site identity](https://github.com/vikkrantxx7/my-portfolio/blob/main/src/content/site.ts): `src/content/site.ts`

### Portfolio experiences

- [Home sections](https://github.com/vikkrantxx7/my-portfolio/blob/main/src/widgets/hero/hero.tsx): `src/widgets/hero/hero.tsx`
- [Project gallery](https://github.com/vikkrantxx7/my-portfolio/blob/main/src/widgets/gallery/project-gallery.tsx): `src/widgets/gallery/project-gallery.tsx`
- [Career timeline](https://github.com/vikkrantxx7/my-portfolio/blob/main/src/widgets/timeline/timeline.tsx): `src/widgets/timeline/timeline.tsx`
- [Case study view](https://github.com/vikkrantxx7/my-portfolio/blob/main/src/widgets/project-detail/project-detail.tsx): `src/widgets/project-detail/project-detail.tsx`
- [Blog presentation](https://github.com/vikkrantxx7/my-portfolio/blob/main/src/widgets/blog/blog-ledger.tsx): `src/widgets/blog/blog-ledger.tsx`
- [Resume viewer](https://github.com/vikkrantxx7/my-portfolio/blob/main/src/features/resume-viewer/resume-viewer.tsx): `src/features/resume-viewer/resume-viewer.tsx`

### Discovery and preferences

- [Command palette](https://github.com/vikkrantxx7/my-portfolio/blob/main/src/features/command-palette/command-palette.tsx): `src/features/command-palette/command-palette.tsx`
- [Project filtering](https://github.com/vikkrantxx7/my-portfolio/blob/main/src/features/filter-projects/filter-projects.ts): `src/features/filter-projects/filter-projects.ts`
- [Achievement links](https://github.com/vikkrantxx7/my-portfolio/blob/main/src/features/expand-achievement/achievement-disclosure.tsx): `src/features/expand-achievement/achievement-disclosure.tsx`
- [Theme preferences](https://github.com/vikkrantxx7/my-portfolio/blob/main/src/features/theme-toggle/theme.ts): `src/features/theme-toggle/theme.ts`
- [Floating audio player](https://github.com/vikkrantxx7/my-portfolio/blob/main/src/widgets/audio-player/floating-audio-player.tsx): `src/widgets/audio-player/floating-audio-player.tsx`
- [Audio engine hook](https://github.com/vikkrantxx7/my-portfolio/blob/main/src/features/audio-player/use-audio-engine.ts): `src/features/audio-player/use-audio-engine.ts`
- [Audio engine](https://github.com/vikkrantxx7/my-portfolio/blob/main/src/features/audio-player/audio-engine.ts): `src/features/audio-player/audio-engine.ts`

### Shared platform

- [Offline service worker](https://github.com/vikkrantxx7/my-portfolio/blob/main/src/features/pwa/register-sw.ts): `src/features/pwa/register-sw.ts`
- [SEO utilities](https://github.com/vikkrantxx7/my-portfolio/blob/main/src/shared/lib/seo.ts): `src/shared/lib/seo.ts`

### Other components

- **Visitor**

## Connections

- Visitor → Application router: opens pages (evidence: `README.md`)
- Application router → Root shell: renders shell (evidence: `src/router.tsx`)
- Root shell → Command palette: renders (evidence: `src/routes/__root.tsx`)
- Root shell → Floating audio player: renders (evidence: `src/routes/__root.tsx`)
- Root shell → Offline service worker: registers (evidence: `src/routes/__root.tsx`)
- Home page → Portfolio data: reads (evidence: `src/routes/index.tsx`)
- Home page → Site identity: reads (evidence: `src/routes/index.tsx`)
- Home page → Home sections: renders sections (evidence: `src/routes/index.tsx`)
- Home page → Project gallery: renders (evidence: `src/routes/index.tsx`)
- Home page → Career timeline: renders (evidence: `src/routes/index.tsx`)
- Home page → SEO utilities: builds metadata (evidence: `src/routes/index.tsx`)
- Project gallery → Portfolio data: reads projects (evidence: `src/widgets/gallery/project-gallery.tsx`)
- Project gallery → Project filtering: filters projects (evidence: `src/widgets/gallery/project-gallery.tsx`)
- Project gallery → Project route: opens case study (evidence: `src/widgets/gallery/project-gallery.tsx`)
- Project route → Case study view: presents study (evidence: `README.md`)
- Case study view → Case study content: uses case content (evidence: `src/widgets/project-detail/project-detail.tsx`)
- Blog routes → Blog content: lists articles (evidence: `README.md`)
- Blog routes → Blog presentation: presents articles (evidence: `README.md`)
- Blog article route → Blog content: loads article (evidence: `README.md`)
- Blog article route → Blog presentation: presents article (evidence: `README.md`)
- Sitemap route → SEO utilities: serves sitemap
- Career timeline → Portfolio data: reads experience (evidence: `src/widgets/timeline/timeline.tsx`)
- Career timeline → Achievement links: renders disclosures (evidence: `src/widgets/timeline/timeline.tsx`)
- Achievement links → Portfolio data: reads achievements (evidence: `src/features/expand-achievement/achievement-disclosure.tsx`)
- Command palette → Blog content: searches articles (evidence: `src/features/command-palette/command-palette.tsx`)
- Command palette → Portfolio data: searches portfolio (evidence: `src/features/command-palette/command-palette.tsx`)
- Command palette → Achievement links: links achievements (evidence: `src/features/command-palette/command-palette.tsx`)
- Root shell → Theme preferences: applies theme (evidence: `src/routes/__root.tsx`)
- Floating audio player → Audio engine hook: uses hook (evidence: `src/widgets/audio-player/floating-audio-player.tsx`)
- Audio engine hook → Audio engine: creates engine (evidence: `src/features/audio-player/use-audio-engine.ts`)
- Visitor → Resume viewer: opens resume (evidence: `README.md`)
- Project route → Portfolio data: uses project data