# yogananth-r/yogananthr-portfolio architecture

> Architecture diagram of the GitHub repository yogananth-r/yogananthr-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/yogananth-r/yogananthr-portfolio
- Repository: https://github.com/yogananth-r/yogananthr-portfolio

## Overview

This is a React portfolio site presenting a cloud engineer’s profile, skills, career journey, projects, and contact options. A visitor opens the root page; `src/App.tsx` shows a timed loader before rendering the portfolio sections, or a not-found view for other paths. Sections read shared profile, skill, and project data where shown, and links provide resume downloads and external contact or project destinations. The README documents the portfolio’s AWS, GCP, automation, and DevOps focus; unsampled section internals are represented only by their tree paths.

Main entry points: [`src/App.tsx`](https://github.com/yogananth-r/yogananthr-portfolio/blob/main/src/App.tsx) (Route and Layout), [`src/components/Hero.tsx`](https://github.com/yogananth-r/yogananthr-portfolio/blob/main/src/components/Hero.tsx) (Profile Intro), [`src/components/Contact.tsx`](https://github.com/yogananth-r/yogananthr-portfolio/blob/main/src/components/Contact.tsx) (Contact Options), [`src/data/portfolio.ts`](https://github.com/yogananth-r/yogananthr-portfolio/blob/main/src/data/portfolio.ts) (Portfolio Data)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App Flow"]
  node_entry["React Entry<br/>[main.tsx]"]
  node_app_root["Route and Layout<br/>[App.tsx]"]
  node_loader["Loading Screen<br/>[Loader.tsx]"]
  node_not_found["Not Found<br/>[NotFound.tsx]"]
end

subgraph group_profile["Profile Content"]
  node_navbar["Section Navigation<br/>[Navbar.tsx]"]
  node_hero["Profile Intro<br/>[Hero.tsx]"]
  node_about["About Profile<br/>[About.tsx]"]
  node_skills["Skills Display<br/>[Skills.tsx]"]
  node_journey["Career Journey<br/>[Journey.tsx]"]
  node_projects["Project Showcase<br/>[Projects.tsx]"]
  node_footer["Page Footer<br/>[Footer.tsx]"]
  node_portfolio_data["Portfolio Data<br/>[portfolio.ts]"]
end

subgraph group_connections["Visitor Links"]
  node_contact["Contact Options<br/>[Contact.tsx]"]
  node_resume["Resume PDF"]
end

node_visitor(("Visitor"))
node_github["GitHub"]
node_linkedin["LinkedIn"]
node_email["Email Recipient"]

node_visitor -->|"opens site"| node_entry
node_entry -->|"renders"| node_app_root
node_app_root -->|"shows first"| node_loader
node_loader -->|"completes loading"| node_app_root
node_app_root -->|"routes non-root"| node_not_found
node_app_root -->|"renders"| node_navbar
node_app_root -->|"renders"| node_hero
node_app_root -->|"renders"| node_about
node_app_root -->|"renders"| node_skills
node_app_root -->|"renders"| node_journey
node_app_root -->|"renders"| node_projects
node_app_root -->|"renders"| node_contact
node_app_root -->|"renders"| node_footer
node_hero -->|"reads profile"| node_portfolio_data
node_skills -->|"reads skills"| node_portfolio_data
node_projects -->|"reads projects"| node_portfolio_data
node_contact -->|"reads contact details"| node_portfolio_data
node_hero -->|"links resume"| node_resume
node_contact -->|"links resume"| node_resume
node_hero -.->|"links profile"| node_github
node_hero -.->|"links profile"| node_linkedin
node_hero -.->|"opens email"| node_email
node_contact -.->|"links profile"| node_github
node_contact -.->|"links profile"| node_linkedin
node_contact -.->|"opens email"| node_email
node_projects -.->|"links repositories"| node_github

click node_entry "https://github.com/yogananth-r/yogananthr-portfolio/blob/main/src/main.tsx"
click node_app_root "https://github.com/yogananth-r/yogananthr-portfolio/blob/main/src/App.tsx"
click node_loader "https://github.com/yogananth-r/yogananthr-portfolio/blob/main/src/components/Loader.tsx"
click node_not_found "https://github.com/yogananth-r/yogananthr-portfolio/blob/main/src/components/NotFound.tsx"
click node_navbar "https://github.com/yogananth-r/yogananthr-portfolio/blob/main/src/components/Navbar.tsx"
click node_hero "https://github.com/yogananth-r/yogananthr-portfolio/blob/main/src/components/Hero.tsx"
click node_about "https://github.com/yogananth-r/yogananthr-portfolio/blob/main/src/components/About.tsx"
click node_skills "https://github.com/yogananth-r/yogananthr-portfolio/blob/main/src/components/Skills.tsx"
click node_journey "https://github.com/yogananth-r/yogananthr-portfolio/blob/main/src/components/Journey.tsx"
click node_projects "https://github.com/yogananth-r/yogananthr-portfolio/blob/main/src/components/Projects.tsx"
click node_contact "https://github.com/yogananth-r/yogananthr-portfolio/blob/main/src/components/Contact.tsx"
click node_footer "https://github.com/yogananth-r/yogananthr-portfolio/blob/main/src/components/Footer.tsx"
click node_portfolio_data "https://github.com/yogananth-r/yogananthr-portfolio/blob/main/src/data/portfolio.ts"
click node_resume "https://github.com/yogananth-r/yogananthr-portfolio/blob/main/public/Yogananth_R_Resume_Cloud_Engineer.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_app_root,node_loader,node_not_found toneBlue
class node_navbar,node_hero,node_about,node_skills,node_journey,node_projects,node_footer,node_portfolio_data toneAmber
class node_contact,node_resume toneMint
class node_visitor,node_github,node_linkedin,node_email toneIndigo
```

## Components

### App Flow

- [React Entry](https://github.com/yogananth-r/yogananthr-portfolio/blob/main/src/main.tsx): `src/main.tsx`
- [Route and Layout](https://github.com/yogananth-r/yogananthr-portfolio/blob/main/src/App.tsx): `src/App.tsx`
- [Loading Screen](https://github.com/yogananth-r/yogananthr-portfolio/blob/main/src/components/Loader.tsx): `src/components/Loader.tsx`
- [Not Found](https://github.com/yogananth-r/yogananthr-portfolio/blob/main/src/components/NotFound.tsx): `src/components/NotFound.tsx`

### Profile Content

- [Section Navigation](https://github.com/yogananth-r/yogananthr-portfolio/blob/main/src/components/Navbar.tsx): `src/components/Navbar.tsx`
- [Profile Intro](https://github.com/yogananth-r/yogananthr-portfolio/blob/main/src/components/Hero.tsx): `src/components/Hero.tsx`
- [About Profile](https://github.com/yogananth-r/yogananthr-portfolio/blob/main/src/components/About.tsx): `src/components/About.tsx`
- [Skills Display](https://github.com/yogananth-r/yogananthr-portfolio/blob/main/src/components/Skills.tsx): `src/components/Skills.tsx`
- [Career Journey](https://github.com/yogananth-r/yogananthr-portfolio/blob/main/src/components/Journey.tsx): `src/components/Journey.tsx`
- [Project Showcase](https://github.com/yogananth-r/yogananthr-portfolio/blob/main/src/components/Projects.tsx): `src/components/Projects.tsx`
- [Page Footer](https://github.com/yogananth-r/yogananthr-portfolio/blob/main/src/components/Footer.tsx): `src/components/Footer.tsx`
- [Portfolio Data](https://github.com/yogananth-r/yogananthr-portfolio/blob/main/src/data/portfolio.ts): `src/data/portfolio.ts`

### Visitor Links

- [Contact Options](https://github.com/yogananth-r/yogananthr-portfolio/blob/main/src/components/Contact.tsx): `src/components/Contact.tsx`
- [Resume PDF](https://github.com/yogananth-r/yogananthr-portfolio/blob/main/public/Yogananth_R_Resume_Cloud_Engineer.pdf): `public/Yogananth_R_Resume_Cloud_Engineer.pdf`

### Other components

- **Visitor**
- **GitHub**
- **LinkedIn**
- **Email Recipient**

## Connections

- Visitor → React Entry: opens site
- React Entry → Route and Layout: renders
- Route and Layout → Loading Screen: shows first
- Loading Screen → Route and Layout: completes loading
- Route and Layout → Not Found: routes non-root
- Route and Layout → Section Navigation: renders
- Route and Layout → Profile Intro: renders
- Route and Layout → About Profile: renders
- Route and Layout → Skills Display: renders
- Route and Layout → Career Journey: renders
- Route and Layout → Project Showcase: renders
- Route and Layout → Contact Options: renders
- Route and Layout → Page Footer: renders
- Profile Intro → Portfolio Data: reads profile
- Skills Display → Portfolio Data: reads skills
- Project Showcase → Portfolio Data: reads projects
- Contact Options → Portfolio Data: reads contact details
- Profile Intro → Resume PDF: links resume
- Contact Options → Resume PDF: links resume
- Profile Intro → GitHub: links profile
- Profile Intro → LinkedIn: links profile
- Profile Intro → Email Recipient: opens email
- Contact Options → GitHub: links profile
- Contact Options → LinkedIn: links profile
- Contact Options → Email Recipient: opens email
- Project Showcase → GitHub: links repositories