# freakshowzzz/reactportfolio architecture

> Architecture diagram of the GitHub repository freakshowzzz/reactportfolio, 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/freakshowzzz/reactportfolio
- Repository: https://github.com/freakshowzzz/reactportfolio

## Overview

This repository is a personal portfolio website. Visitors enter through the routed React application, use the shared site shell to reach Home, About, Projects, or Contact, and view profile, interests, technology, project, or contact content. Project cards display records from a local project list. The graph preserves the main page stages and shared visual layer; some component relationships are supported only by the SOURCE INDEX, so unsampled details are not expanded.

Main entry points: [`src/main.tsx`](https://github.com/freakshowzzz/reactportfolio/blob/main/src/main.tsx) (Route entry), [`src/pages/layout.tsx`](https://github.com/freakshowzzz/reactportfolio/blob/main/src/pages/layout.tsx) (Page layout), [`src/pages/home/index.tsx`](https://github.com/freakshowzzz/reactportfolio/blob/main/src/pages/home/index.tsx) (Home page), [`src/pages/about/index.tsx`](https://github.com/freakshowzzz/reactportfolio/blob/main/src/pages/about/index.tsx) (About page)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_routing["Routing and shell"]
  node_app["Route entry<br/>[main.tsx]"]
  node_layout["Page layout<br/>[layout.tsx]"]
end

subgraph group_portfolio["Portfolio content"]
  node_home["Home page<br/>[index.tsx]"]
  node_about["About page<br/>[index.tsx]"]
  node_contact["Contact page<br/>[index.tsx]"]
  node_hero["Hero section<br/>[herosection.tsx]"]
  node_profile["Profile card<br/>[profilecard.tsx]"]
  node_techstack["Tech stack"]
  node_bio["Biography<br/>[biosection.tsx]"]
  node_interests["Interests"]
  node_contactsection["Contact details<br/>[contactsection.tsx]"]
end

subgraph group_projects["Project showcase"]
  node_projects["Projects page<br/>[index.tsx]"]
  node_projectgrid["Project grid"]
  node_projectcard["Project card<br/>[projectscard.tsx]"]
  node_projectdata["Project catalog<br/>[projects.ts]"]
  node_projectsection["Project section"]
end

subgraph group_shared["Shared presentation"]
  node_header["Navigation header<br/>[header.tsx]"]
  node_footer["Site footer<br/>[footer.tsx]"]
  node_background["Animated background<br/>[TechBackground.tsx]"]
end

node_visitor(("Visitor"))

node_visitor -->|"opens site"| node_app
node_app -->|"wraps routes"| node_layout
node_app -->|"routes to"| node_home
node_app -->|"routes to"| node_about
node_app -->|"routes to"| node_projects
node_app -->|"routes to"| node_contact
node_layout -->|"renders"| node_header
node_layout -->|"renders"| node_footer
node_layout -->|"renders"| node_background
node_home -->|"renders"| node_hero
node_home -->|"renders"| node_techstack
node_hero -->|"renders"| node_profile
node_about -->|"renders"| node_bio
node_about -->|"renders"| node_interests
node_contact -->|"renders"| node_contactsection
node_projects -->|"renders"| node_projectgrid
node_projectgrid -->|"renders"| node_projectcard
node_projectgrid -->|"reads"| node_projectdata
node_projectcard -->|"uses type"| node_projectdata

click node_app "https://github.com/freakshowzzz/reactportfolio/blob/main/src/main.tsx"
click node_layout "https://github.com/freakshowzzz/reactportfolio/blob/main/src/pages/layout.tsx"
click node_home "https://github.com/freakshowzzz/reactportfolio/blob/main/src/pages/home/index.tsx"
click node_about "https://github.com/freakshowzzz/reactportfolio/blob/main/src/pages/about/index.tsx"
click node_contact "https://github.com/freakshowzzz/reactportfolio/blob/main/src/pages/contacts/index.tsx"
click node_hero "https://github.com/freakshowzzz/reactportfolio/blob/main/src/components/features/home/herosection.tsx"
click node_profile "https://github.com/freakshowzzz/reactportfolio/blob/main/src/components/features/home/profilecard.tsx"
click node_techstack "https://github.com/freakshowzzz/reactportfolio/blob/main/src/components/features/home/techstacksection.tsx"
click node_bio "https://github.com/freakshowzzz/reactportfolio/blob/main/src/components/features/about/biosection.tsx"
click node_interests "https://github.com/freakshowzzz/reactportfolio/blob/main/src/components/features/about/interestsection.tsx"
click node_contactsection "https://github.com/freakshowzzz/reactportfolio/blob/main/src/components/features/home/contactsection.tsx"
click node_projects "https://github.com/freakshowzzz/reactportfolio/blob/main/src/pages/projects/index.tsx"
click node_projectgrid "https://github.com/freakshowzzz/reactportfolio/blob/main/src/components/features/projects/projectsgridsection.tsx"
click node_projectcard "https://github.com/freakshowzzz/reactportfolio/blob/main/src/components/features/projects/projectscard.tsx"
click node_projectdata "https://github.com/freakshowzzz/reactportfolio/blob/main/src/lib/projects.ts"
click node_projectsection "https://github.com/freakshowzzz/reactportfolio/blob/main/src/components/features/projects/projectssection.tsx"
click node_header "https://github.com/freakshowzzz/reactportfolio/blob/main/src/components/common/header.tsx"
click node_footer "https://github.com/freakshowzzz/reactportfolio/blob/main/src/components/common/footer.tsx"
click node_background "https://github.com/freakshowzzz/reactportfolio/blob/main/src/components/features/background/TechBackground.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_app,node_layout toneBlue
class node_home,node_about,node_contact,node_hero,node_profile,node_techstack,node_bio,node_interests,node_contactsection toneAmber
class node_projects,node_projectgrid,node_projectcard,node_projectdata,node_projectsection toneMint
class node_header,node_footer,node_background toneRose
class node_visitor toneIndigo
```

## Components

### Routing and shell

- [Route entry](https://github.com/freakshowzzz/reactportfolio/blob/main/src/main.tsx): `src/main.tsx`
- [Page layout](https://github.com/freakshowzzz/reactportfolio/blob/main/src/pages/layout.tsx): `src/pages/layout.tsx`

### Portfolio content

- [Home page](https://github.com/freakshowzzz/reactportfolio/blob/main/src/pages/home/index.tsx): `src/pages/home/index.tsx`
- [About page](https://github.com/freakshowzzz/reactportfolio/blob/main/src/pages/about/index.tsx): `src/pages/about/index.tsx`
- [Contact page](https://github.com/freakshowzzz/reactportfolio/blob/main/src/pages/contacts/index.tsx): `src/pages/contacts/index.tsx`
- [Hero section](https://github.com/freakshowzzz/reactportfolio/blob/main/src/components/features/home/herosection.tsx): `src/components/features/home/herosection.tsx`
- [Profile card](https://github.com/freakshowzzz/reactportfolio/blob/main/src/components/features/home/profilecard.tsx): `src/components/features/home/profilecard.tsx`
- [Tech stack](https://github.com/freakshowzzz/reactportfolio/blob/main/src/components/features/home/techstacksection.tsx): `src/components/features/home/techstacksection.tsx`
- [Biography](https://github.com/freakshowzzz/reactportfolio/blob/main/src/components/features/about/biosection.tsx): `src/components/features/about/biosection.tsx`
- [Interests](https://github.com/freakshowzzz/reactportfolio/blob/main/src/components/features/about/interestsection.tsx): `src/components/features/about/interestsection.tsx`
- [Contact details](https://github.com/freakshowzzz/reactportfolio/blob/main/src/components/features/home/contactsection.tsx): `src/components/features/home/contactsection.tsx`

### Project showcase

- [Projects page](https://github.com/freakshowzzz/reactportfolio/blob/main/src/pages/projects/index.tsx): `src/pages/projects/index.tsx`
- [Project grid](https://github.com/freakshowzzz/reactportfolio/blob/main/src/components/features/projects/projectsgridsection.tsx): `src/components/features/projects/projectsgridsection.tsx`
- [Project card](https://github.com/freakshowzzz/reactportfolio/blob/main/src/components/features/projects/projectscard.tsx): `src/components/features/projects/projectscard.tsx`
- [Project catalog](https://github.com/freakshowzzz/reactportfolio/blob/main/src/lib/projects.ts): `src/lib/projects.ts`
- [Project section](https://github.com/freakshowzzz/reactportfolio/blob/main/src/components/features/projects/projectssection.tsx): `src/components/features/projects/projectssection.tsx`

### Shared presentation

- [Navigation header](https://github.com/freakshowzzz/reactportfolio/blob/main/src/components/common/header.tsx): `src/components/common/header.tsx`
- [Site footer](https://github.com/freakshowzzz/reactportfolio/blob/main/src/components/common/footer.tsx): `src/components/common/footer.tsx`
- [Animated background](https://github.com/freakshowzzz/reactportfolio/blob/main/src/components/features/background/TechBackground.tsx): `src/components/features/background/TechBackground.tsx`

### Other components

- **Visitor**

## Connections

- Visitor → Route entry: opens site (evidence: `src/main.tsx`)
- Route entry → Page layout: wraps routes (evidence: `src/main.tsx`)
- Route entry → Home page: routes to (evidence: `src/main.tsx`)
- Route entry → About page: routes to (evidence: `src/main.tsx`)
- Route entry → Projects page: routes to (evidence: `src/main.tsx`)
- Route entry → Contact page: routes to (evidence: `src/main.tsx`)
- Page layout → Navigation header: renders (evidence: `src/pages/layout.tsx`)
- Page layout → Site footer: renders (evidence: `src/pages/layout.tsx`)
- Page layout → Animated background: renders (evidence: `src/pages/layout.tsx`)
- Home page → Hero section: renders (evidence: `src/pages/home/index.tsx`)
- Home page → Tech stack: renders (evidence: `src/pages/home/index.tsx`)
- Hero section → Profile card: renders (evidence: `src/components/features/home/herosection.tsx`)
- About page → Biography: renders (evidence: `src/pages/about/index.tsx`)
- About page → Interests: renders (evidence: `src/pages/about/index.tsx`)
- Contact page → Contact details: renders (evidence: `src/pages/contacts/index.tsx`)
- Projects page → Project grid: renders (evidence: `src/pages/projects/index.tsx`)
- Project grid → Project card: renders (evidence: `src/components/features/projects/projectsgridsection.tsx`)
- Project grid → Project catalog: reads (evidence: `src/components/features/projects/projectsgridsection.tsx`)
- Project card → Project catalog: uses type (evidence: `src/components/features/projects/projectscard.tsx`)