# prathamesh-265/portfolio3 architecture

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

- Interactive diagram: https://gitdiagram.com/prathamesh-265/portfolio3
- Repository: https://github.com/prathamesh-265/portfolio3

## Overview

This is a single-page personal portfolio: a visitor opens the home page, views the animated introduction and career/skills/work content, then reaches contact links. The page component composes the sections and shared UI; the root layout supplies document styling and metadata. The README documents the hero image sequence and the portfolio’s major sections. Some component implementations were not sampled, so their internal behavior and additional wiring are not inferred.

Main entry points: [`src/app/page.tsx`](https://github.com/prathamesh-265/portfolio3/blob/main/src/app/page.tsx) (Home page), [`src/components/ContactSection.tsx`](https://github.com/prathamesh-265/portfolio3/blob/main/src/components/ContactSection.tsx) (Contact), [`src/components/AboutSection.tsx`](https://github.com/prathamesh-265/portfolio3/blob/main/src/components/AboutSection.tsx) (About and hero), [`src/components/motion/Reveal.tsx`](https://github.com/prathamesh-265/portfolio3/blob/main/src/components/motion/Reveal.tsx) (Reveal animation)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Page composition"]
  node_layout["Root layout<br/>[layout.tsx]"]
  node_home["Home page<br/>[page.tsx]"]
  node_globals["Global styles<br/>[globals.css]"]
end

subgraph group_content["Portfolio content"]
  node_about["About and hero<br/>[AboutSection.tsx]"]
  node_sequence["Hero frames"]
  node_skills["Skills<br/>[SkillsSection.tsx]"]
  node_techicons["Technology icons<br/>[TechIcons.tsx]"]
  node_work["Selected work<br/>[WorkSection.tsx]"]
  node_experience["Experience"]
  node_contact["Contact<br/>[ContactSection.tsx]"]
end

subgraph group_ui["Navigation and effects"]
  node_navigation["Navigation<br/>[Navigation.tsx]"]
  node_background["Background effects"]
  node_cursor["Custom cursor"]
  node_theme["Theme initialization<br/>[ThemeInit.tsx]"]
  node_backtotop["Back to top<br/>[BackToTop.tsx]"]
end

subgraph group_motion["Reusable visuals"]
  node_reveal["Reveal animation<br/>[Reveal.tsx]"]
end

node_visitor(("Visitor"))
node_email(("Email recipient"))
node_social(("Social profiles"))

node_visitor -->|"opens"| node_home
node_home -->|"renders within"| node_layout
node_layout -->|"loads styles"| node_globals
node_home -->|"renders"| node_navigation
node_home -->|"renders"| node_about
node_home -->|"renders"| node_skills
node_home -->|"renders"| node_work
node_home -->|"renders"| node_experience
node_home -->|"renders"| node_contact
node_home -->|"renders"| node_background
node_home -->|"renders"| node_cursor
node_home -->|"renders"| node_theme
node_home -->|"renders"| node_backtotop
node_about -->|"uses frames"| node_sequence
node_skills -->|"renders icons"| node_techicons
node_work -->|"uses"| node_reveal
node_experience -->|"uses"| node_reveal
node_contact -->|"uses"| node_reveal
node_navigation -->|"navigates sections"| node_about
node_contact -->|"links to"| node_email
node_contact -->|"links to"| node_social

click node_layout "https://github.com/prathamesh-265/portfolio3/blob/main/src/app/layout.tsx"
click node_home "https://github.com/prathamesh-265/portfolio3/blob/main/src/app/page.tsx"
click node_about "https://github.com/prathamesh-265/portfolio3/blob/main/src/components/AboutSection.tsx"
click node_sequence "https://github.com/prathamesh-265/portfolio3/tree/main/public/sequence/ezgif-10030f8d536e2c5a-png-split"
click node_skills "https://github.com/prathamesh-265/portfolio3/blob/main/src/components/SkillsSection.tsx"
click node_techicons "https://github.com/prathamesh-265/portfolio3/blob/main/src/components/icons/TechIcons.tsx"
click node_work "https://github.com/prathamesh-265/portfolio3/blob/main/src/components/WorkSection.tsx"
click node_experience "https://github.com/prathamesh-265/portfolio3/blob/main/src/components/ExperienceSection.tsx"
click node_contact "https://github.com/prathamesh-265/portfolio3/blob/main/src/components/ContactSection.tsx"
click node_navigation "https://github.com/prathamesh-265/portfolio3/blob/main/src/components/Navigation.tsx"
click node_background "https://github.com/prathamesh-265/portfolio3/blob/main/src/components/BackgroundEffects.tsx"
click node_cursor "https://github.com/prathamesh-265/portfolio3/blob/main/src/components/CinematicCursor.tsx"
click node_theme "https://github.com/prathamesh-265/portfolio3/blob/main/src/components/ThemeInit.tsx"
click node_backtotop "https://github.com/prathamesh-265/portfolio3/blob/main/src/components/BackToTop.tsx"
click node_reveal "https://github.com/prathamesh-265/portfolio3/blob/main/src/components/motion/Reveal.tsx"
click node_globals "https://github.com/prathamesh-265/portfolio3/blob/main/src/app/globals.css"

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,node_globals toneBlue
class node_about,node_sequence,node_skills,node_techicons,node_work,node_experience,node_contact toneAmber
class node_navigation,node_background,node_cursor,node_theme,node_backtotop toneMint
class node_reveal toneRose
class node_visitor,node_email,node_social toneIndigo
```

## Components

### Page composition

- [Root layout](https://github.com/prathamesh-265/portfolio3/blob/main/src/app/layout.tsx): `src/app/layout.tsx`
- [Home page](https://github.com/prathamesh-265/portfolio3/blob/main/src/app/page.tsx): `src/app/page.tsx`
- [Global styles](https://github.com/prathamesh-265/portfolio3/blob/main/src/app/globals.css): `src/app/globals.css`

### Portfolio content

- [About and hero](https://github.com/prathamesh-265/portfolio3/blob/main/src/components/AboutSection.tsx): `src/components/AboutSection.tsx`
- [Hero frames](https://github.com/prathamesh-265/portfolio3/tree/main/public/sequence/ezgif-10030f8d536e2c5a-png-split): `public/sequence/ezgif-10030f8d536e2c5a-png-split`
- [Skills](https://github.com/prathamesh-265/portfolio3/blob/main/src/components/SkillsSection.tsx): `src/components/SkillsSection.tsx`
- [Technology icons](https://github.com/prathamesh-265/portfolio3/blob/main/src/components/icons/TechIcons.tsx): `src/components/icons/TechIcons.tsx`
- [Selected work](https://github.com/prathamesh-265/portfolio3/blob/main/src/components/WorkSection.tsx): `src/components/WorkSection.tsx`
- [Experience](https://github.com/prathamesh-265/portfolio3/blob/main/src/components/ExperienceSection.tsx): `src/components/ExperienceSection.tsx`
- [Contact](https://github.com/prathamesh-265/portfolio3/blob/main/src/components/ContactSection.tsx): `src/components/ContactSection.tsx`

### Navigation and effects

- [Navigation](https://github.com/prathamesh-265/portfolio3/blob/main/src/components/Navigation.tsx): `src/components/Navigation.tsx`
- [Background effects](https://github.com/prathamesh-265/portfolio3/blob/main/src/components/BackgroundEffects.tsx): `src/components/BackgroundEffects.tsx`
- [Custom cursor](https://github.com/prathamesh-265/portfolio3/blob/main/src/components/CinematicCursor.tsx): `src/components/CinematicCursor.tsx`
- [Theme initialization](https://github.com/prathamesh-265/portfolio3/blob/main/src/components/ThemeInit.tsx): `src/components/ThemeInit.tsx`
- [Back to top](https://github.com/prathamesh-265/portfolio3/blob/main/src/components/BackToTop.tsx): `src/components/BackToTop.tsx`

### Reusable visuals

- [Reveal animation](https://github.com/prathamesh-265/portfolio3/blob/main/src/components/motion/Reveal.tsx): `src/components/motion/Reveal.tsx`

### Other components

- **Visitor**
- **Email recipient**
- **Social profiles**

## Connections

- Visitor → Home page: opens (evidence: `README.md`)
- Home page → Root layout: renders within (evidence: `src/app/page.tsx`)
- Root layout → Global styles: loads styles (evidence: `src/app/layout.tsx`)
- Home page → Navigation: renders (evidence: `src/app/page.tsx`)
- Home page → About and hero: renders (evidence: `src/app/page.tsx`)
- Home page → Skills: renders (evidence: `src/app/page.tsx`)
- Home page → Selected work: renders (evidence: `src/app/page.tsx`)
- Home page → Experience: renders (evidence: `src/app/page.tsx`)
- Home page → Contact: renders (evidence: `src/app/page.tsx`)
- Home page → Background effects: renders (evidence: `src/app/page.tsx`)
- Home page → Custom cursor: renders (evidence: `src/app/page.tsx`)
- Home page → Theme initialization: renders (evidence: `src/app/page.tsx`)
- Home page → Back to top: renders (evidence: `src/app/page.tsx`)
- About and hero → Hero frames: uses frames (evidence: `README.md`)
- Skills → Technology icons: renders icons (evidence: `src/components/SkillsSection.tsx`)
- Selected work → Reveal animation: uses (evidence: `src/components/WorkSection.tsx`)
- Experience → Reveal animation: uses (evidence: `src/components/ExperienceSection.tsx`)
- Contact → Reveal animation: uses (evidence: `src/components/ContactSection.tsx`)
- Navigation → About and hero: navigates sections (evidence: `README.md`)
- Contact → Email recipient: links to (evidence: `src/components/ContactSection.tsx`)
- Contact → Social profiles: links to (evidence: `src/components/ContactSection.tsx`)