# rashmika-thehan/my-portfolio architecture

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

- Interactive diagram: https://gitdiagram.com/rashmika-thehan/my-portfolio
- Repository: https://github.com/rashmika-thehan/my-portfolio

## Overview

This is a React portfolio site. A visitor opens the single-page app, lands on the home route, and explores profile, certificates, projects, and skills before optionally contacting the owner or following external links. The contact form sends submissions through EmailJS; the CV is provided as a downloadable PDF. Some component implementations were not sampled, so the map shows documented composition and capabilities without inferring their internal behavior.

Main entry points: [`src/pages/Home.jsx`](https://github.com/rashmika-thehan/my-portfolio/blob/main/src/pages/Home.jsx) (Home Page), [`src/components/Contact.jsx`](https://github.com/rashmika-thehan/my-portfolio/blob/main/src/components/Contact.jsx) (Contact Section), [`src/main.jsx`](https://github.com/rashmika-thehan/my-portfolio/blob/main/src/main.jsx) (React Entry), [`src/App.jsx`](https://github.com/rashmika-thehan/my-portfolio/blob/main/src/App.jsx) (Route Selection)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application"]
  node_entry["React Entry<br/>[main.jsx]"]
  node_router["Route Selection<br/>[App.jsx]"]
  node_home["Home Page<br/>[Home.jsx]"]
  node_notfound["Not Found<br/>[NotFound.jsx]"]
  node_styles["Global Styles<br/>[index.css]"]
end

subgraph group_portfolio["Portfolio Sections"]
  node_hero["Profile Hero<br/>[HeroSection.jsx]"]
  node_fuzzy["Fuzzy Text<br/>[FuzzyText.jsx]"]
  node_certificates["Certificates"]
  node_projects["Project Gallery<br/>[ProjectsGrid.jsx]"]
  node_tech["Technology Stack<br/>[TechStack.jsx]"]
end

subgraph group_contact["Contact and Links"]
  node_contact["Contact Section<br/>[Contact.jsx]"]
  node_cv["Downloadable CV"]
end

node_visitor(("Visitor"))
node_browser(("Browser"))
node_emailjs{{"EmailJS Service"}}
node_social{{"Social Profiles"}}

node_visitor -->|"opens"| node_browser
node_browser -->|"loads app"| node_entry
node_entry -->|"imports styles"| node_styles
node_entry -->|"renders"| node_router
node_router -->|"selects home"| node_home
node_router -->|"selects fallback"| node_notfound
node_home -->|"renders"| node_hero
node_home -->|"renders"| node_certificates
node_home -->|"renders"| node_projects
node_home -->|"renders"| node_tech
node_home -->|"renders"| node_contact
node_hero -->|"renders name"| node_fuzzy
node_contact -.->|"sends message"| node_emailjs
node_contact -->|"links download"| node_cv
node_contact -->|"links profiles"| node_social

click node_entry "https://github.com/rashmika-thehan/my-portfolio/blob/main/src/main.jsx"
click node_router "https://github.com/rashmika-thehan/my-portfolio/blob/main/src/App.jsx"
click node_home "https://github.com/rashmika-thehan/my-portfolio/blob/main/src/pages/Home.jsx"
click node_notfound "https://github.com/rashmika-thehan/my-portfolio/blob/main/src/pages/NotFound.jsx"
click node_styles "https://github.com/rashmika-thehan/my-portfolio/blob/main/src/index.css"
click node_hero "https://github.com/rashmika-thehan/my-portfolio/blob/main/src/components/HeroSection.jsx"
click node_fuzzy "https://github.com/rashmika-thehan/my-portfolio/blob/main/src/components/FuzzyText.jsx"
click node_certificates "https://github.com/rashmika-thehan/my-portfolio/blob/main/src/components/CertificatesCarousal.jsx"
click node_projects "https://github.com/rashmika-thehan/my-portfolio/blob/main/src/components/ProjectsGrid.jsx"
click node_tech "https://github.com/rashmika-thehan/my-portfolio/blob/main/src/components/TechStack.jsx"
click node_contact "https://github.com/rashmika-thehan/my-portfolio/blob/main/src/components/Contact.jsx"
click node_cv "https://github.com/rashmika-thehan/my-portfolio/blob/main/public/Rashmika_Thehan_CV_FS.pdf"

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_router,node_home,node_notfound,node_styles,node_browser toneBlue
class node_hero,node_fuzzy,node_certificates,node_projects,node_tech toneAmber
class node_contact,node_cv toneMint
class node_visitor,node_emailjs,node_social toneIndigo
```

## Components

### Application

- [React Entry](https://github.com/rashmika-thehan/my-portfolio/blob/main/src/main.jsx): `src/main.jsx`
- [Route Selection](https://github.com/rashmika-thehan/my-portfolio/blob/main/src/App.jsx): `src/App.jsx`
- [Home Page](https://github.com/rashmika-thehan/my-portfolio/blob/main/src/pages/Home.jsx): `src/pages/Home.jsx`
- [Not Found](https://github.com/rashmika-thehan/my-portfolio/blob/main/src/pages/NotFound.jsx): `src/pages/NotFound.jsx`
- [Global Styles](https://github.com/rashmika-thehan/my-portfolio/blob/main/src/index.css): `src/index.css`

### Portfolio Sections

- [Profile Hero](https://github.com/rashmika-thehan/my-portfolio/blob/main/src/components/HeroSection.jsx): `src/components/HeroSection.jsx`
- [Fuzzy Text](https://github.com/rashmika-thehan/my-portfolio/blob/main/src/components/FuzzyText.jsx): `src/components/FuzzyText.jsx`
- [Certificates](https://github.com/rashmika-thehan/my-portfolio/blob/main/src/components/CertificatesCarousal.jsx): `src/components/CertificatesCarousal.jsx`
- [Project Gallery](https://github.com/rashmika-thehan/my-portfolio/blob/main/src/components/ProjectsGrid.jsx): `src/components/ProjectsGrid.jsx`
- [Technology Stack](https://github.com/rashmika-thehan/my-portfolio/blob/main/src/components/TechStack.jsx): `src/components/TechStack.jsx`

### Contact and Links

- [Contact Section](https://github.com/rashmika-thehan/my-portfolio/blob/main/src/components/Contact.jsx): `src/components/Contact.jsx`
- [Downloadable CV](https://github.com/rashmika-thehan/my-portfolio/blob/main/public/Rashmika_Thehan_CV_FS.pdf): `public/Rashmika_Thehan_CV_FS.pdf`

### Other components

- **Visitor**
- **Browser**
- **EmailJS Service**
- **Social Profiles**

## Connections

- Visitor → Browser: opens
- Browser → React Entry: loads app
- React Entry → Global Styles: imports styles
- React Entry → Route Selection: renders
- Route Selection → Home Page: selects home
- Route Selection → Not Found: selects fallback
- Home Page → Profile Hero: renders
- Home Page → Certificates: renders
- Home Page → Project Gallery: renders
- Home Page → Technology Stack: renders
- Home Page → Contact Section: renders
- Profile Hero → Fuzzy Text: renders name
- Contact Section → EmailJS Service: sends message
- Contact Section → Downloadable CV: links download
- Contact Section → Social Profiles: links profiles