# sparsh-goyal01/portfolio architecture

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

- Interactive diagram: https://gitdiagram.com/sparsh-goyal01/portfolio
- Repository: https://github.com/sparsh-goyal01/portfolio

## Overview

This is a personal developer portfolio: visitors browse the landing page’s profile, skills, experience, projects, coding profiles, resume, and contact sections. The coding-profile view can fetch live LeetCode stats through an API route; the resume API route is present, but its use is not established by the available excerpts. The graph captures documented rendering and data references; unsampled integrations and route behavior are left unconnected where their relationships cannot be verified.

Main entry points: [`app/page.tsx`](https://github.com/sparsh-goyal01/portfolio/blob/main/app/page.tsx) (Home Page), [`data/profile.ts`](https://github.com/sparsh-goyal01/portfolio/blob/main/data/profile.ts) (Profile Data), [`components/navigation/Navbar.tsx`](https://github.com/sparsh-goyal01/portfolio/blob/main/components/navigation/Navbar.tsx) (Navigation), [`components/hero/Hero.tsx`](https://github.com/sparsh-goyal01/portfolio/blob/main/components/hero/Hero.tsx) (Hero)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_site["Portfolio Site"]
  node_home["Home Page<br/>[page.tsx]"]
  node_navigation["Navigation<br/>[Navbar.tsx]"]
  node_hero["Hero<br/>[Hero.tsx]"]
  node_hero_visual["Hero Visual<br/>[HeroVisual.tsx]"]
  node_hero_card["Hero Profile Card"]
  node_about["About<br/>[AboutSection.tsx]"]
  node_footer["Footer<br/>[Footer.tsx]"]
  node_experience_footer["Site Footer<br/>[Footer.tsx]"]
end

subgraph group_content["Portfolio Content"]
  node_skills["Skills<br/>[SkillsSection.tsx]"]
  node_tech_stream["Technology Stream"]
  node_experience_section["Experience"]
  node_projects["Projects"]
  node_resume_section["Resume<br/>[ResumeSection.tsx]"]
  node_resume_api["Resume API Route<br/>[route.ts]"]
  node_contact_section["Contact Section<br/>[ContactSection.tsx]"]
  node_contact_form["Contact Form<br/>[ContactForm.tsx]"]
  node_profile_data["Profile Data<br/>[profile.ts]"]
  node_navigation_data["Navigation Data<br/>[navigation.ts]"]
  node_skills_data["Skills Data<br/>[skills.ts]"]
  node_tech_data["Tech Stack Data<br/>[techStack.ts]"]
  node_experience_data["Experience Data<br/>[experience.ts]"]
  node_projects_data["Projects Data<br/>[projects.ts]"]
end

subgraph group_profiles["Live Profiles"]
  node_coding_section["Coding Profiles"]
  node_github_card["GitHub Card<br/>[GitHubCard.tsx]"]
  node_leetcode_card["LeetCode Card<br/>[LeetCodeCard.tsx]"]
  node_github_api["GitHub API Route<br/>[route.ts]"]
  node_leetcode_api["LeetCode API Route<br/>[route.ts]"]
  node_coding_data["Coding Profile Data<br/>[codingProfiles.ts]"]
end

subgraph group_experience["Interactive Details"]
  node_music_player["Music Player<br/>[MusicPlayer.tsx]"]
  node_music_data["Music Config<br/>[music.ts]"]
end

node_visitor(("Visitor"))

node_visitor -->|"opens"| node_home
node_home -->|"renders"| node_navigation
node_home -->|"renders"| node_hero
node_home -->|"renders"| node_about
node_home -->|"renders"| node_skills
node_home -->|"renders"| node_experience_section
node_home -->|"renders"| node_projects
node_home -->|"renders"| node_coding_section
node_home -->|"renders"| node_resume_section
node_home -->|"renders"| node_contact_section
node_home -->|"renders"| node_footer
node_hero -->|"renders"| node_hero_visual
node_hero_visual -->|"renders"| node_hero_card
node_navigation -->|"reads"| node_navigation_data
node_navigation -->|"reads"| node_profile_data
node_skills -->|"renders"| node_tech_stream
node_skills -->|"reads"| node_skills_data
node_tech_stream -->|"reads"| node_tech_data
node_experience_section -->|"reads"| node_experience_data
node_projects -->|"reads"| node_projects_data
node_coding_section -->|"renders"| node_github_card
node_coding_section -->|"renders"| node_leetcode_card
node_github_card -->|"reads"| node_coding_data
node_leetcode_card -->|"reads"| node_coding_data
node_leetcode_card -->|"fetches"| node_leetcode_api
node_contact_section -->|"renders"| node_contact_form
node_contact_form -->|"reads"| node_profile_data
node_footer -->|"reads"| node_profile_data
node_hero -->|"reads"| node_profile_data
node_music_player -->|"reads"| node_music_data
node_visitor -->|"controls"| node_music_player

click node_home "https://github.com/sparsh-goyal01/portfolio/blob/main/app/page.tsx"
click node_navigation "https://github.com/sparsh-goyal01/portfolio/blob/main/components/navigation/Navbar.tsx"
click node_hero "https://github.com/sparsh-goyal01/portfolio/blob/main/components/hero/Hero.tsx"
click node_hero_visual "https://github.com/sparsh-goyal01/portfolio/blob/main/components/hero/HeroVisual.tsx"
click node_hero_card "https://github.com/sparsh-goyal01/portfolio/blob/main/components/hero/HeroProfileCard.tsx"
click node_about "https://github.com/sparsh-goyal01/portfolio/blob/main/components/about/AboutSection.tsx"
click node_skills "https://github.com/sparsh-goyal01/portfolio/blob/main/components/skills/SkillsSection.tsx"
click node_tech_stream "https://github.com/sparsh-goyal01/portfolio/blob/main/components/skills/TechnologyStream.tsx"
click node_experience_section "https://github.com/sparsh-goyal01/portfolio/blob/main/components/experience/ExperienceSection.tsx"
click node_projects "https://github.com/sparsh-goyal01/portfolio/blob/main/components/projects/ProjectsSection.tsx"
click node_coding_section "https://github.com/sparsh-goyal01/portfolio/blob/main/components/coding-profiles/CodingProfilesSection.tsx"
click node_github_card "https://github.com/sparsh-goyal01/portfolio/blob/main/components/coding-profiles/GitHubCard.tsx"
click node_leetcode_card "https://github.com/sparsh-goyal01/portfolio/blob/main/components/coding-profiles/LeetCodeCard.tsx"
click node_github_api "https://github.com/sparsh-goyal01/portfolio/blob/main/app/api/github/route.ts"
click node_leetcode_api "https://github.com/sparsh-goyal01/portfolio/blob/main/app/api/leetcode/route.ts"
click node_resume_section "https://github.com/sparsh-goyal01/portfolio/blob/main/components/resume/ResumeSection.tsx"
click node_resume_api "https://github.com/sparsh-goyal01/portfolio/blob/main/app/api/resume/route.ts"
click node_contact_section "https://github.com/sparsh-goyal01/portfolio/blob/main/components/contact/ContactSection.tsx"
click node_contact_form "https://github.com/sparsh-goyal01/portfolio/blob/main/components/contact/ContactForm.tsx"
click node_footer "https://github.com/sparsh-goyal01/portfolio/blob/main/components/footer/Footer.tsx"
click node_profile_data "https://github.com/sparsh-goyal01/portfolio/blob/main/data/profile.ts"
click node_navigation_data "https://github.com/sparsh-goyal01/portfolio/blob/main/data/navigation.ts"
click node_skills_data "https://github.com/sparsh-goyal01/portfolio/blob/main/data/skills.ts"
click node_tech_data "https://github.com/sparsh-goyal01/portfolio/blob/main/data/techStack.ts"
click node_experience_data "https://github.com/sparsh-goyal01/portfolio/blob/main/data/experience.ts"
click node_projects_data "https://github.com/sparsh-goyal01/portfolio/blob/main/data/projects.ts"
click node_coding_data "https://github.com/sparsh-goyal01/portfolio/blob/main/data/codingProfiles.ts"
click node_music_player "https://github.com/sparsh-goyal01/portfolio/blob/main/components/ui/MusicPlayer.tsx"
click node_music_data "https://github.com/sparsh-goyal01/portfolio/blob/main/data/music.ts"
click node_experience_footer "https://github.com/sparsh-goyal01/portfolio/blob/main/components/footer/Footer.tsx"

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_home,node_navigation,node_hero,node_hero_visual,node_hero_card,node_about,node_footer,node_experience_footer toneBlue
class node_skills,node_tech_stream,node_experience_section,node_projects,node_resume_section,node_resume_api,node_contact_section,node_contact_form,node_profile_data,node_navigation_data,node_skills_data,node_tech_data,node_experience_data,node_projects_data toneAmber
class node_coding_section,node_github_card,node_leetcode_card,node_github_api,node_leetcode_api,node_coding_data toneMint
class node_music_player,node_music_data toneRose
class node_visitor toneIndigo
```

## Components

### Portfolio Site

- [Home Page](https://github.com/sparsh-goyal01/portfolio/blob/main/app/page.tsx): `app/page.tsx`
- [Navigation](https://github.com/sparsh-goyal01/portfolio/blob/main/components/navigation/Navbar.tsx): `components/navigation/Navbar.tsx`
- [Hero](https://github.com/sparsh-goyal01/portfolio/blob/main/components/hero/Hero.tsx): `components/hero/Hero.tsx`
- [Hero Visual](https://github.com/sparsh-goyal01/portfolio/blob/main/components/hero/HeroVisual.tsx): `components/hero/HeroVisual.tsx`
- [Hero Profile Card](https://github.com/sparsh-goyal01/portfolio/blob/main/components/hero/HeroProfileCard.tsx): `components/hero/HeroProfileCard.tsx`
- [About](https://github.com/sparsh-goyal01/portfolio/blob/main/components/about/AboutSection.tsx): `components/about/AboutSection.tsx`
- [Footer](https://github.com/sparsh-goyal01/portfolio/blob/main/components/footer/Footer.tsx): `components/footer/Footer.tsx`
- [Site Footer](https://github.com/sparsh-goyal01/portfolio/blob/main/components/footer/Footer.tsx): `components/footer/Footer.tsx`

### Portfolio Content

- [Skills](https://github.com/sparsh-goyal01/portfolio/blob/main/components/skills/SkillsSection.tsx): `components/skills/SkillsSection.tsx`
- [Technology Stream](https://github.com/sparsh-goyal01/portfolio/blob/main/components/skills/TechnologyStream.tsx): `components/skills/TechnologyStream.tsx`
- [Experience](https://github.com/sparsh-goyal01/portfolio/blob/main/components/experience/ExperienceSection.tsx): `components/experience/ExperienceSection.tsx`
- [Projects](https://github.com/sparsh-goyal01/portfolio/blob/main/components/projects/ProjectsSection.tsx): `components/projects/ProjectsSection.tsx`
- [Resume](https://github.com/sparsh-goyal01/portfolio/blob/main/components/resume/ResumeSection.tsx): `components/resume/ResumeSection.tsx`
- [Resume API Route](https://github.com/sparsh-goyal01/portfolio/blob/main/app/api/resume/route.ts): `app/api/resume/route.ts`
- [Contact Section](https://github.com/sparsh-goyal01/portfolio/blob/main/components/contact/ContactSection.tsx): `components/contact/ContactSection.tsx`
- [Contact Form](https://github.com/sparsh-goyal01/portfolio/blob/main/components/contact/ContactForm.tsx): `components/contact/ContactForm.tsx`
- [Profile Data](https://github.com/sparsh-goyal01/portfolio/blob/main/data/profile.ts): `data/profile.ts`
- [Navigation Data](https://github.com/sparsh-goyal01/portfolio/blob/main/data/navigation.ts): `data/navigation.ts`
- [Skills Data](https://github.com/sparsh-goyal01/portfolio/blob/main/data/skills.ts): `data/skills.ts`
- [Tech Stack Data](https://github.com/sparsh-goyal01/portfolio/blob/main/data/techStack.ts): `data/techStack.ts`
- [Experience Data](https://github.com/sparsh-goyal01/portfolio/blob/main/data/experience.ts): `data/experience.ts`
- [Projects Data](https://github.com/sparsh-goyal01/portfolio/blob/main/data/projects.ts): `data/projects.ts`

### Live Profiles

- [Coding Profiles](https://github.com/sparsh-goyal01/portfolio/blob/main/components/coding-profiles/CodingProfilesSection.tsx): `components/coding-profiles/CodingProfilesSection.tsx`
- [GitHub Card](https://github.com/sparsh-goyal01/portfolio/blob/main/components/coding-profiles/GitHubCard.tsx): `components/coding-profiles/GitHubCard.tsx`
- [LeetCode Card](https://github.com/sparsh-goyal01/portfolio/blob/main/components/coding-profiles/LeetCodeCard.tsx): `components/coding-profiles/LeetCodeCard.tsx`
- [GitHub API Route](https://github.com/sparsh-goyal01/portfolio/blob/main/app/api/github/route.ts): `app/api/github/route.ts`
- [LeetCode API Route](https://github.com/sparsh-goyal01/portfolio/blob/main/app/api/leetcode/route.ts): `app/api/leetcode/route.ts`
- [Coding Profile Data](https://github.com/sparsh-goyal01/portfolio/blob/main/data/codingProfiles.ts): `data/codingProfiles.ts`

### Interactive Details

- [Music Player](https://github.com/sparsh-goyal01/portfolio/blob/main/components/ui/MusicPlayer.tsx): `components/ui/MusicPlayer.tsx`
- [Music Config](https://github.com/sparsh-goyal01/portfolio/blob/main/data/music.ts): `data/music.ts`

### Other components

- **Visitor**

## Connections

- Visitor → Home Page: opens (evidence: `app/page.tsx`)
- Home Page → Navigation: renders (evidence: `app/page.tsx`)
- Home Page → Hero: renders (evidence: `app/page.tsx`)
- Home Page → About: renders (evidence: `app/page.tsx`)
- Home Page → Skills: renders (evidence: `app/page.tsx`)
- Home Page → Experience: renders (evidence: `app/page.tsx`)
- Home Page → Projects: renders (evidence: `app/page.tsx`)
- Home Page → Coding Profiles: renders (evidence: `app/page.tsx`)
- Home Page → Resume: renders (evidence: `app/page.tsx`)
- Home Page → Contact Section: renders (evidence: `app/page.tsx`)
- Home Page → Footer: renders (evidence: `app/page.tsx`)
- Hero → Hero Visual: renders (evidence: `components/hero/Hero.tsx`)
- Hero Visual → Hero Profile Card: renders (evidence: `components/hero/HeroVisual.tsx`)
- Navigation → Navigation Data: reads (evidence: `components/navigation/Navbar.tsx`)
- Navigation → Profile Data: reads (evidence: `components/navigation/Navbar.tsx`)
- Skills → Technology Stream: renders (evidence: `components/skills/SkillsSection.tsx`)
- Skills → Skills Data: reads (evidence: `components/skills/SkillsSection.tsx`)
- Technology Stream → Tech Stack Data: reads (evidence: `components/skills/TechnologyStream.tsx`)
- Experience → Experience Data: reads (evidence: `components/experience/ExperienceSection.tsx`)
- Projects → Projects Data: reads (evidence: `components/projects/ProjectsSection.tsx`)
- Coding Profiles → GitHub Card: renders (evidence: `components/coding-profiles/CodingProfilesSection.tsx`)
- Coding Profiles → LeetCode Card: renders (evidence: `components/coding-profiles/CodingProfilesSection.tsx`)
- GitHub Card → Coding Profile Data: reads (evidence: `components/coding-profiles/GitHubCard.tsx`)
- LeetCode Card → Coding Profile Data: reads (evidence: `components/coding-profiles/LeetCodeCard.tsx`)
- LeetCode Card → LeetCode API Route: fetches (evidence: `components/coding-profiles/LeetCodeCard.tsx`)
- Contact Section → Contact Form: renders (evidence: `components/contact/ContactSection.tsx`)
- Contact Form → Profile Data: reads (evidence: `components/contact/ContactForm.tsx`)
- Footer → Profile Data: reads (evidence: `components/footer/Footer.tsx`)
- Hero → Profile Data: reads (evidence: `components/hero/Hero.tsx`)
- Music Player → Music Config: reads (evidence: `components/ui/MusicPlayer.tsx`)
- Visitor → Music Player: controls (evidence: `components/ui/MusicPlayer.tsx`)