# aakashreddy-ui/my-portfolio architecture

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

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

## Overview

This repository is a React portfolio website for a full-stack developer. A visitor lands on the profile, navigates portfolio sections, reviews projects and writing, then can reach out through email or WhatsApp. The sampled code shows the React entry point composing the page and the components rendering content from shared portfolio data; the remaining sections are presented as independent views. External project/profile links are destinations shown to visitors, not integrations invoked by the site. No README content or additional runtime services were provided.

Main entry points: [`src/App.jsx`](https://github.com/aakashreddy-ui/my-portfolio/blob/main/src/App.jsx) (Page shell), [`src/data/portfolioData.js`](https://github.com/aakashreddy-ui/my-portfolio/blob/main/src/data/portfolioData.js) (Portfolio data), [`src/components/Contact.jsx`](https://github.com/aakashreddy-ui/my-portfolio/blob/main/src/components/Contact.jsx) (Contact), [`src/components/Projects.jsx`](https://github.com/aakashreddy-ui/my-portfolio/blob/main/src/components/Projects.jsx) (Projects)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_composition["Page composition"]
  node_react_entry["React entry<br/>[main.jsx]"]
  node_app["Page shell<br/>[App.jsx]"]
  node_header["Navigation and theme<br/>[Header.jsx]"]
  node_footer["Footer<br/>[Footer.jsx]"]
  node_styles["Page styles<br/>[styles.css]"]
  node_icon["Icon renderer<br/>[Icon.jsx]"]
end

subgraph group_portfolio["Portfolio content"]
  node_projects["Projects<br/>[Projects.jsx]"]
  node_writing["Writing<br/>[BlogSection.jsx]"]
  node_portfolio_data["Portfolio data<br/>[portfolioData.js]"]
end

subgraph group_profile["Profile and contact"]
  node_hero["Introduction<br/>[Hero.jsx]"]
  node_about["About<br/>[About.jsx]"]
  node_skills["Skills<br/>[Skills.jsx]"]
  node_experience["Experience<br/>[Experience.jsx]"]
  node_contact["Contact<br/>[Contact.jsx]"]
end

node_visitor(("Visitor"))
node_email(("Email client"))
node_whatsapp(("WhatsApp"))
node_project_sites(("Project websites"))
node_professional_profiles(("Professional profiles"))

node_visitor -->|"opens site"| node_react_entry
node_react_entry -->|"renders"| node_app
node_app -->|"renders"| node_header
node_app -->|"renders"| node_hero
node_app -->|"renders"| node_projects
node_app -->|"renders"| node_writing
node_app -->|"renders"| node_about
node_app -->|"renders"| node_skills
node_app -->|"renders"| node_experience
node_app -->|"renders"| node_contact
node_app -->|"renders"| node_footer
node_app -->|"imports"| node_styles
node_header -->|"reads navigation"| node_portfolio_data
node_hero -->|"reads profile"| node_portfolio_data
node_projects -->|"reads project lists"| node_portfolio_data
node_writing -->|"reads posts"| node_portfolio_data
node_skills -->|"reads skills"| node_portfolio_data
node_contact -->|"reads contact details"| node_portfolio_data
node_hero -->|"links to"| node_professional_profiles
node_projects -->|"links to"| node_project_sites
node_contact -->|"opens mail link"| node_email
node_contact -->|"opens message link"| node_whatsapp
node_hero -->|"renders icons"| node_icon
node_projects -->|"renders icons"| node_icon
node_contact -->|"renders icons"| node_icon

click node_react_entry "https://github.com/aakashreddy-ui/my-portfolio/blob/main/src/main.jsx"
click node_app "https://github.com/aakashreddy-ui/my-portfolio/blob/main/src/App.jsx"
click node_header "https://github.com/aakashreddy-ui/my-portfolio/blob/main/src/components/Header.jsx"
click node_footer "https://github.com/aakashreddy-ui/my-portfolio/blob/main/src/components/Footer.jsx"
click node_styles "https://github.com/aakashreddy-ui/my-portfolio/blob/main/src/styles.css"
click node_hero "https://github.com/aakashreddy-ui/my-portfolio/blob/main/src/components/Hero.jsx"
click node_projects "https://github.com/aakashreddy-ui/my-portfolio/blob/main/src/components/Projects.jsx"
click node_writing "https://github.com/aakashreddy-ui/my-portfolio/blob/main/src/components/BlogSection.jsx"
click node_about "https://github.com/aakashreddy-ui/my-portfolio/blob/main/src/components/About.jsx"
click node_skills "https://github.com/aakashreddy-ui/my-portfolio/blob/main/src/components/Skills.jsx"
click node_experience "https://github.com/aakashreddy-ui/my-portfolio/blob/main/src/components/Experience.jsx"
click node_contact "https://github.com/aakashreddy-ui/my-portfolio/blob/main/src/components/Contact.jsx"
click node_portfolio_data "https://github.com/aakashreddy-ui/my-portfolio/blob/main/src/data/portfolioData.js"
click node_icon "https://github.com/aakashreddy-ui/my-portfolio/blob/main/src/components/Icon.jsx"

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_react_entry,node_app,node_header,node_footer,node_styles,node_icon,node_email toneBlue
class node_projects,node_writing,node_portfolio_data toneAmber
class node_hero,node_about,node_skills,node_experience,node_contact toneMint
class node_visitor,node_whatsapp,node_project_sites,node_professional_profiles toneIndigo
```

## Components

### Page composition

- [React entry](https://github.com/aakashreddy-ui/my-portfolio/blob/main/src/main.jsx): `src/main.jsx`
- [Page shell](https://github.com/aakashreddy-ui/my-portfolio/blob/main/src/App.jsx): `src/App.jsx`
- [Navigation and theme](https://github.com/aakashreddy-ui/my-portfolio/blob/main/src/components/Header.jsx): `src/components/Header.jsx`
- [Footer](https://github.com/aakashreddy-ui/my-portfolio/blob/main/src/components/Footer.jsx): `src/components/Footer.jsx`
- [Page styles](https://github.com/aakashreddy-ui/my-portfolio/blob/main/src/styles.css): `src/styles.css`
- [Icon renderer](https://github.com/aakashreddy-ui/my-portfolio/blob/main/src/components/Icon.jsx): `src/components/Icon.jsx`

### Portfolio content

- [Projects](https://github.com/aakashreddy-ui/my-portfolio/blob/main/src/components/Projects.jsx): `src/components/Projects.jsx`
- [Writing](https://github.com/aakashreddy-ui/my-portfolio/blob/main/src/components/BlogSection.jsx): `src/components/BlogSection.jsx`
- [Portfolio data](https://github.com/aakashreddy-ui/my-portfolio/blob/main/src/data/portfolioData.js): `src/data/portfolioData.js`

### Profile and contact

- [Introduction](https://github.com/aakashreddy-ui/my-portfolio/blob/main/src/components/Hero.jsx): `src/components/Hero.jsx`
- [About](https://github.com/aakashreddy-ui/my-portfolio/blob/main/src/components/About.jsx): `src/components/About.jsx`
- [Skills](https://github.com/aakashreddy-ui/my-portfolio/blob/main/src/components/Skills.jsx): `src/components/Skills.jsx`
- [Experience](https://github.com/aakashreddy-ui/my-portfolio/blob/main/src/components/Experience.jsx): `src/components/Experience.jsx`
- [Contact](https://github.com/aakashreddy-ui/my-portfolio/blob/main/src/components/Contact.jsx): `src/components/Contact.jsx`

### Other components

- **Visitor**
- **Email client**
- **WhatsApp**
- **Project websites**
- **Professional profiles**

## Connections

- Visitor → React entry: opens site
- React entry → Page shell: renders
- Page shell → Navigation and theme: renders
- Page shell → Introduction: renders
- Page shell → Projects: renders
- Page shell → Writing: renders
- Page shell → About: renders
- Page shell → Skills: renders
- Page shell → Experience: renders
- Page shell → Contact: renders
- Page shell → Footer: renders
- Page shell → Page styles: imports
- Navigation and theme → Portfolio data: reads navigation
- Introduction → Portfolio data: reads profile
- Projects → Portfolio data: reads project lists
- Writing → Portfolio data: reads posts
- Skills → Portfolio data: reads skills
- Contact → Portfolio data: reads contact details
- Introduction → Professional profiles: links to
- Projects → Project websites: links to
- Contact → Email client: opens mail link
- Contact → WhatsApp: opens message link
- Introduction → Icon renderer: renders icons
- Projects → Icon renderer: renders icons
- Contact → Icon renderer: renders icons