# rayyankhan18/portfolio-website architecture

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

- Interactive diagram: https://gitdiagram.com/rayyankhan18/portfolio-website
- Repository: https://github.com/rayyankhan18/portfolio-website

## Overview

This is a personal portfolio site presenting Rayyan Khan’s engineering profile, skills, career history, and selected projects. A visitor opens the home page, which composes the main portfolio sections; the root layout wraps page content in smooth scrolling. The tree also contains audio, cursor, science, timeline, and testimonial components, but sampled source does not establish how those are connected or whether they appear on the home page. Their nodes are shown as available product components without inferred wiring.

Main entry points: [`src/app/page.tsx`](https://github.com/rayyankhan18/portfolio-website/blob/main/src/app/page.tsx) (Home page), [`src/components/Experience.tsx`](https://github.com/rayyankhan18/portfolio-website/blob/main/src/components/Experience.tsx) (Career history), [`src/components/BackgroundMusic.tsx`](https://github.com/rayyankhan18/portfolio-website/blob/main/src/components/BackgroundMusic.tsx) (Background music), [`src/app/layout.tsx`](https://github.com/rayyankhan18/portfolio-website/blob/main/src/app/layout.tsx) (Root layout)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_site["Site Shell"]
  node_layout["Root layout<br/>[layout.tsx]"]
  node_home["Home page<br/>[page.tsx]"]
end

subgraph group_portfolio["Portfolio Content"]
  node_hero["Hero section<br/>[Hero.tsx]"]
  node_marquee["Skills ticker<br/>[Marquee.tsx]"]
  node_skills["Skills list<br/>[Skills.tsx]"]
  node_experience["Career history<br/>[Experience.tsx]"]
  node_projects["Project showcase<br/>[Projects.tsx]"]
  node_footer["Portfolio footer<br/>[Footer.tsx]"]
  node_science["Science section<br/>[Science.tsx]"]
  node_timeline["Timeline section"]
  node_testimonials["Testimonials<br/>[Testimonials.tsx]"]
end

subgraph group_interactions["Interactive Elements"]
  node_smooth["Smooth scrolling<br/>[SmoothScroll.tsx]"]
  node_background_music["Background music"]
  node_creepy_button["Career button<br/>[creepy-button.tsx]"]
  node_audio_player["Audio player<br/>[AudioPlayer.tsx]"]
  node_audio_asset["Music track"]
  node_magnetic_cursor["Magnetic cursor<br/>[MagneticCursor.tsx]"]
end

node_visitor(("Site visitor"))

node_visitor -->|"opens"| node_home
node_layout -->|"wraps content"| node_smooth
node_home -->|"renders"| node_hero
node_home -->|"renders"| node_marquee
node_home -->|"renders"| node_skills
node_home -->|"renders"| node_experience
node_home -->|"renders"| node_projects
node_home -->|"renders"| node_footer
node_home -->|"renders"| node_background_music
node_experience -->|"renders"| node_creepy_button
node_background_music -.->|"plays"| node_audio_asset

click node_layout "https://github.com/rayyankhan18/portfolio-website/blob/main/src/app/layout.tsx"
click node_home "https://github.com/rayyankhan18/portfolio-website/blob/main/src/app/page.tsx"
click node_smooth "https://github.com/rayyankhan18/portfolio-website/blob/main/src/components/SmoothScroll.tsx"
click node_hero "https://github.com/rayyankhan18/portfolio-website/blob/main/src/components/Hero.tsx"
click node_marquee "https://github.com/rayyankhan18/portfolio-website/blob/main/src/components/Marquee.tsx"
click node_skills "https://github.com/rayyankhan18/portfolio-website/blob/main/src/components/Skills.tsx"
click node_experience "https://github.com/rayyankhan18/portfolio-website/blob/main/src/components/Experience.tsx"
click node_projects "https://github.com/rayyankhan18/portfolio-website/blob/main/src/components/Projects.tsx"
click node_footer "https://github.com/rayyankhan18/portfolio-website/blob/main/src/components/Footer.tsx"
click node_background_music "https://github.com/rayyankhan18/portfolio-website/blob/main/src/components/BackgroundMusic.tsx"
click node_creepy_button "https://github.com/rayyankhan18/portfolio-website/blob/main/src/components/ui/creepy-button.tsx"
click node_audio_player "https://github.com/rayyankhan18/portfolio-website/blob/main/src/components/AudioPlayer.tsx"
click node_audio_asset "https://github.com/rayyankhan18/portfolio-website/blob/main/public/sergepavkinmusic-reflected-light-147979.mp3"
click node_magnetic_cursor "https://github.com/rayyankhan18/portfolio-website/blob/main/src/components/MagneticCursor.tsx"
click node_science "https://github.com/rayyankhan18/portfolio-website/blob/main/src/components/Science.tsx"
click node_testimonials "https://github.com/rayyankhan18/portfolio-website/blob/main/src/components/Testimonials.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_layout,node_home toneBlue
class node_hero,node_marquee,node_skills,node_experience,node_projects,node_footer,node_science,node_timeline,node_testimonials toneAmber
class node_smooth,node_background_music,node_creepy_button,node_audio_player,node_audio_asset,node_magnetic_cursor toneMint
class node_visitor toneIndigo
```

## Components

### Site Shell

- [Root layout](https://github.com/rayyankhan18/portfolio-website/blob/main/src/app/layout.tsx): `src/app/layout.tsx`
- [Home page](https://github.com/rayyankhan18/portfolio-website/blob/main/src/app/page.tsx): `src/app/page.tsx`

### Portfolio Content

- [Hero section](https://github.com/rayyankhan18/portfolio-website/blob/main/src/components/Hero.tsx): `src/components/Hero.tsx`
- [Skills ticker](https://github.com/rayyankhan18/portfolio-website/blob/main/src/components/Marquee.tsx): `src/components/Marquee.tsx`
- [Skills list](https://github.com/rayyankhan18/portfolio-website/blob/main/src/components/Skills.tsx): `src/components/Skills.tsx`
- [Career history](https://github.com/rayyankhan18/portfolio-website/blob/main/src/components/Experience.tsx): `src/components/Experience.tsx`
- [Project showcase](https://github.com/rayyankhan18/portfolio-website/blob/main/src/components/Projects.tsx): `src/components/Projects.tsx`
- [Portfolio footer](https://github.com/rayyankhan18/portfolio-website/blob/main/src/components/Footer.tsx): `src/components/Footer.tsx`
- [Science section](https://github.com/rayyankhan18/portfolio-website/blob/main/src/components/Science.tsx): `src/components/Science.tsx`
- **Timeline section**
- [Testimonials](https://github.com/rayyankhan18/portfolio-website/blob/main/src/components/Testimonials.tsx): `src/components/Testimonials.tsx`

### Interactive Elements

- [Smooth scrolling](https://github.com/rayyankhan18/portfolio-website/blob/main/src/components/SmoothScroll.tsx): `src/components/SmoothScroll.tsx`
- [Background music](https://github.com/rayyankhan18/portfolio-website/blob/main/src/components/BackgroundMusic.tsx): `src/components/BackgroundMusic.tsx`
- [Career button](https://github.com/rayyankhan18/portfolio-website/blob/main/src/components/ui/creepy-button.tsx): `src/components/ui/creepy-button.tsx`
- [Audio player](https://github.com/rayyankhan18/portfolio-website/blob/main/src/components/AudioPlayer.tsx): `src/components/AudioPlayer.tsx`
- [Music track](https://github.com/rayyankhan18/portfolio-website/blob/main/public/sergepavkinmusic-reflected-light-147979.mp3): `public/sergepavkinmusic-reflected-light-147979.mp3`
- [Magnetic cursor](https://github.com/rayyankhan18/portfolio-website/blob/main/src/components/MagneticCursor.tsx): `src/components/MagneticCursor.tsx`

### Other components

- **Site visitor**

## Connections

- Site visitor → Home page: opens
- Root layout → Smooth scrolling: wraps content
- Home page → Hero section: renders
- Home page → Skills ticker: renders
- Home page → Skills list: renders
- Home page → Career history: renders
- Home page → Project showcase: renders
- Home page → Portfolio footer: renders
- Home page → Background music: renders
- Career history → Career button: renders
- Background music → Music track: plays