# pratikrhalnor/pratik-portfolio architecture

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

- Interactive diagram: https://gitdiagram.com/pratikrhalnor/pratik-portfolio
- Repository: https://github.com/pratikrhalnor/pratik-portfolio

## Overview

This repository is a personal portfolio site with a lightweight contact-email endpoint. A visitor loads the React application, which composes the hero, biography, project showcase, experience timeline, and footer; the project carousel presents the selected project portfolio rather than implementing those projects’ underlying systems. The contact handler validates submitted details and sends an email through Resend. README documentation also describes project work and credentials, but their underlying demos are not present as runtime subsystems here. The available excerpts do not establish a frontend call to the contact endpoint, so that connection is not drawn.

Main entry points: [`frontend/src/App.jsx`](https://github.com/pratikrhalnor/pratik-portfolio/blob/main/frontend/src/App.jsx) (Page orchestrator), [`frontend/src/main.jsx`](https://github.com/pratikrhalnor/pratik-portfolio/blob/main/frontend/src/main.jsx) (React entry), [`frontend/src/components/Hero/Hero.jsx`](https://github.com/pratikrhalnor/pratik-portfolio/blob/main/frontend/src/components/Hero/Hero.jsx) (Hero section), [`frontend/api/contact.js`](https://github.com/pratikrhalnor/pratik-portfolio/blob/main/frontend/api/contact.js) (Contact handler)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_application["Portfolio application"]
  node_entry["React entry<br/>[main.jsx]"]
  node_app["Page orchestrator<br/>[App.jsx]"]
  node_cursor["Custom cursor<br/>[CustomCursor.jsx]"]
end

subgraph group_content["Portfolio content"]
  node_hero["Hero section<br/>[Hero.jsx]"]
  node_neural["Neural backdrop<br/>[NeuralNetwork.jsx]"]
  node_about["About section<br/>[About.jsx]"]
  node_projects["Project overview<br/>[Projects.jsx]"]
  node_carousel["Project carousel"]
  node_experience_title["Experience heading"]
  node_experience["Experience timeline<br/>[Experience.jsx]"]
  node_footer["Footer links<br/>[Footer.jsx]"]
end

subgraph group_contact["Contact delivery"]
  node_contact_api["Contact handler<br/>[contact.js]"]
  node_resend["Resend email service"]
end

node_visitor(("Portfolio visitor"))
node_recipient(("Portfolio owner"))

node_visitor -->|"opens site"| node_entry
node_entry -->|"renders"| node_app
node_app -->|"renders"| node_hero
node_app -->|"renders"| node_about
node_app -->|"renders"| node_projects
node_app -->|"renders"| node_carousel
node_app -->|"renders"| node_experience_title
node_app -->|"renders"| node_experience
node_app -->|"renders"| node_footer
node_app -->|"renders"| node_cursor
node_hero -->|"renders"| node_neural
node_visitor -.->|"submits contact"| node_contact_api
node_contact_api -->|"sends email"| node_resend
node_resend -->|"delivers email"| node_recipient

click node_entry "https://github.com/pratikrhalnor/pratik-portfolio/blob/main/frontend/src/main.jsx"
click node_app "https://github.com/pratikrhalnor/pratik-portfolio/blob/main/frontend/src/App.jsx"
click node_hero "https://github.com/pratikrhalnor/pratik-portfolio/blob/main/frontend/src/components/Hero/Hero.jsx"
click node_neural "https://github.com/pratikrhalnor/pratik-portfolio/blob/main/frontend/src/components/Hero/NeuralNetwork.jsx"
click node_about "https://github.com/pratikrhalnor/pratik-portfolio/blob/main/frontend/src/components/About/About.jsx"
click node_projects "https://github.com/pratikrhalnor/pratik-portfolio/blob/main/frontend/src/components/Projects/Projects.jsx"
click node_carousel "https://github.com/pratikrhalnor/pratik-portfolio/blob/main/frontend/src/components/Projects/ProjectCarousel.jsx"
click node_experience_title "https://github.com/pratikrhalnor/pratik-portfolio/blob/main/frontend/src/components/Experience/Experience_title.jsx"
click node_experience "https://github.com/pratikrhalnor/pratik-portfolio/blob/main/frontend/src/components/Experience/Experience.jsx"
click node_footer "https://github.com/pratikrhalnor/pratik-portfolio/blob/main/frontend/src/components/Footer/Footer.jsx"
click node_cursor "https://github.com/pratikrhalnor/pratik-portfolio/blob/main/frontend/src/components/CustomCursor/CustomCursor.jsx"
click node_contact_api "https://github.com/pratikrhalnor/pratik-portfolio/blob/main/frontend/api/contact.js"

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_entry,node_app,node_cursor toneBlue
class node_hero,node_neural,node_about,node_projects,node_carousel,node_experience_title,node_experience,node_footer toneAmber
class node_contact_api,node_resend toneMint
class node_visitor,node_recipient toneIndigo
```

## Components

### Portfolio application

- [React entry](https://github.com/pratikrhalnor/pratik-portfolio/blob/main/frontend/src/main.jsx): `frontend/src/main.jsx`
- [Page orchestrator](https://github.com/pratikrhalnor/pratik-portfolio/blob/main/frontend/src/App.jsx): `frontend/src/App.jsx`
- [Custom cursor](https://github.com/pratikrhalnor/pratik-portfolio/blob/main/frontend/src/components/CustomCursor/CustomCursor.jsx): `frontend/src/components/CustomCursor/CustomCursor.jsx`

### Portfolio content

- [Hero section](https://github.com/pratikrhalnor/pratik-portfolio/blob/main/frontend/src/components/Hero/Hero.jsx): `frontend/src/components/Hero/Hero.jsx`
- [Neural backdrop](https://github.com/pratikrhalnor/pratik-portfolio/blob/main/frontend/src/components/Hero/NeuralNetwork.jsx): `frontend/src/components/Hero/NeuralNetwork.jsx`
- [About section](https://github.com/pratikrhalnor/pratik-portfolio/blob/main/frontend/src/components/About/About.jsx): `frontend/src/components/About/About.jsx`
- [Project overview](https://github.com/pratikrhalnor/pratik-portfolio/blob/main/frontend/src/components/Projects/Projects.jsx): `frontend/src/components/Projects/Projects.jsx`
- [Project carousel](https://github.com/pratikrhalnor/pratik-portfolio/blob/main/frontend/src/components/Projects/ProjectCarousel.jsx): `frontend/src/components/Projects/ProjectCarousel.jsx`
- [Experience heading](https://github.com/pratikrhalnor/pratik-portfolio/blob/main/frontend/src/components/Experience/Experience_title.jsx): `frontend/src/components/Experience/Experience_title.jsx`
- [Experience timeline](https://github.com/pratikrhalnor/pratik-portfolio/blob/main/frontend/src/components/Experience/Experience.jsx): `frontend/src/components/Experience/Experience.jsx`
- [Footer links](https://github.com/pratikrhalnor/pratik-portfolio/blob/main/frontend/src/components/Footer/Footer.jsx): `frontend/src/components/Footer/Footer.jsx`

### Contact delivery

- [Contact handler](https://github.com/pratikrhalnor/pratik-portfolio/blob/main/frontend/api/contact.js): `frontend/api/contact.js`
- **Resend email service**

### Other components

- **Portfolio visitor**
- **Portfolio owner**

## Connections

- Portfolio visitor → React entry: opens site
- React entry → Page orchestrator: renders
- Page orchestrator → Hero section: renders
- Page orchestrator → About section: renders
- Page orchestrator → Project overview: renders
- Page orchestrator → Project carousel: renders
- Page orchestrator → Experience heading: renders
- Page orchestrator → Experience timeline: renders
- Page orchestrator → Footer links: renders
- Page orchestrator → Custom cursor: renders
- Hero section → Neural backdrop: renders
- Portfolio visitor → Contact handler: submits contact
- Contact handler → Resend email service: sends email
- Resend email service → Portfolio owner: delivers email