# vigneshthyagarajan/portfolio architecture

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

## Overview

This repository is a single-page personal portfolio for a DevOps and middleware professional. A visitor loads the home page, which presents profile and education, work history, skills, projects, certifications, and contact information as sections; the layout also provides theme switching. The page-to-section and layout-to-theme wiring is visible in the sampled source. The skills, certifications, hero, and theme-provider implementations were not sampled, so their internal behavior and any further integrations are not mapped.

Main entry points: [`src/app/page.tsx`](https://github.com/vigneshthyagarajan/portfolio/blob/main/src/app/page.tsx) (Home page), [`src/components/ui/card.tsx`](https://github.com/vigneshthyagarajan/portfolio/blob/main/src/components/ui/card.tsx) (Card primitives), [`src/app/layout.tsx`](https://github.com/vigneshthyagarajan/portfolio/blob/main/src/app/layout.tsx) (Root layout), [`src/components/projects.tsx`](https://github.com/vigneshthyagarajan/portfolio/blob/main/src/components/projects.tsx) (Projects)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_page["Portfolio page"]
  node_home["Home page<br/>[page.tsx]"]
  node_layout["Root layout<br/>[layout.tsx]"]
end

subgraph group_content["Portfolio sections"]
  node_hero["Hero<br/>[hero.tsx]"]
  node_about["About and education<br/>[about.tsx]"]
  node_experience["Work experience<br/>[experience.tsx]"]
  node_skills["Skills<br/>[skills.tsx]"]
  node_projects["Projects<br/>[projects.tsx]"]
  node_certifications["Certifications<br/>[certifications.tsx]"]
  node_contact["Contact<br/>[contact.tsx]"]
end

subgraph group_shared["Theme and UI"]
  node_themeprovider["Theme provider<br/>[theme-provider.tsx]"]
  node_themetoggle["Theme toggle<br/>[theme-toggle.tsx]"]
  node_card["Card primitives<br/>[card.tsx]"]
  node_badge["Badge primitive<br/>[badge.tsx]"]
  node_button["Button primitive<br/>[button.tsx]"]
  node_utils["Class utilities<br/>[utils.ts]"]
end

node_visitor(("Visitor"))
node_linkedin(("LinkedIn"))
node_github(("GitHub"))

node_visitor -->|"opens site"| node_layout
node_layout -->|"renders page"| node_home
node_layout -->|"wraps content"| node_themeprovider
node_layout -->|"renders toggle"| node_themetoggle
node_home -->|"renders section"| node_hero
node_home -->|"renders section"| node_about
node_home -->|"renders section"| node_experience
node_home -->|"renders section"| node_skills
node_home -->|"renders section"| node_projects
node_home -->|"renders section"| node_certifications
node_home -->|"renders section"| node_contact
node_about -->|"uses cards"| node_card
node_experience -->|"uses cards"| node_card
node_experience -->|"uses badges"| node_badge
node_projects -->|"uses cards"| node_card
node_projects -->|"uses badges"| node_badge
node_projects -->|"uses buttons"| node_button
node_contact -->|"uses cards"| node_card
node_contact -->|"uses buttons"| node_button
node_button -->|"merges classes"| node_utils
node_badge -->|"merges classes"| node_utils
node_card -->|"merges classes"| node_utils
node_visitor -.->|"follows profile"| node_linkedin
node_visitor -.->|"opens profile"| node_github

click node_home "https://github.com/vigneshthyagarajan/portfolio/blob/main/src/app/page.tsx"
click node_layout "https://github.com/vigneshthyagarajan/portfolio/blob/main/src/app/layout.tsx"
click node_hero "https://github.com/vigneshthyagarajan/portfolio/blob/main/src/components/hero.tsx"
click node_about "https://github.com/vigneshthyagarajan/portfolio/blob/main/src/components/about.tsx"
click node_experience "https://github.com/vigneshthyagarajan/portfolio/blob/main/src/components/experience.tsx"
click node_skills "https://github.com/vigneshthyagarajan/portfolio/blob/main/src/components/skills.tsx"
click node_projects "https://github.com/vigneshthyagarajan/portfolio/blob/main/src/components/projects.tsx"
click node_certifications "https://github.com/vigneshthyagarajan/portfolio/blob/main/src/components/certifications.tsx"
click node_contact "https://github.com/vigneshthyagarajan/portfolio/blob/main/src/components/contact.tsx"
click node_themeprovider "https://github.com/vigneshthyagarajan/portfolio/blob/main/src/components/theme-provider.tsx"
click node_themetoggle "https://github.com/vigneshthyagarajan/portfolio/blob/main/src/components/theme-toggle.tsx"
click node_card "https://github.com/vigneshthyagarajan/portfolio/blob/main/src/components/ui/card.tsx"
click node_badge "https://github.com/vigneshthyagarajan/portfolio/blob/main/src/components/ui/badge.tsx"
click node_button "https://github.com/vigneshthyagarajan/portfolio/blob/main/src/components/ui/button.tsx"
click node_utils "https://github.com/vigneshthyagarajan/portfolio/blob/main/src/lib/utils.ts"

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_home,node_layout toneBlue
class node_hero,node_about,node_experience,node_skills,node_projects,node_certifications,node_contact toneAmber
class node_themeprovider,node_themetoggle,node_card,node_badge,node_button,node_utils toneMint
class node_visitor,node_linkedin,node_github toneIndigo
```

## Components

### Portfolio page

- [Home page](https://github.com/vigneshthyagarajan/portfolio/blob/main/src/app/page.tsx): `src/app/page.tsx`
- [Root layout](https://github.com/vigneshthyagarajan/portfolio/blob/main/src/app/layout.tsx): `src/app/layout.tsx`

### Portfolio sections

- [Hero](https://github.com/vigneshthyagarajan/portfolio/blob/main/src/components/hero.tsx): `src/components/hero.tsx`
- [About and education](https://github.com/vigneshthyagarajan/portfolio/blob/main/src/components/about.tsx): `src/components/about.tsx`
- [Work experience](https://github.com/vigneshthyagarajan/portfolio/blob/main/src/components/experience.tsx): `src/components/experience.tsx`
- [Skills](https://github.com/vigneshthyagarajan/portfolio/blob/main/src/components/skills.tsx): `src/components/skills.tsx`
- [Projects](https://github.com/vigneshthyagarajan/portfolio/blob/main/src/components/projects.tsx): `src/components/projects.tsx`
- [Certifications](https://github.com/vigneshthyagarajan/portfolio/blob/main/src/components/certifications.tsx): `src/components/certifications.tsx`
- [Contact](https://github.com/vigneshthyagarajan/portfolio/blob/main/src/components/contact.tsx): `src/components/contact.tsx`

### Theme and UI

- [Theme provider](https://github.com/vigneshthyagarajan/portfolio/blob/main/src/components/theme-provider.tsx): `src/components/theme-provider.tsx`
- [Theme toggle](https://github.com/vigneshthyagarajan/portfolio/blob/main/src/components/theme-toggle.tsx): `src/components/theme-toggle.tsx`
- [Card primitives](https://github.com/vigneshthyagarajan/portfolio/blob/main/src/components/ui/card.tsx): `src/components/ui/card.tsx`
- [Badge primitive](https://github.com/vigneshthyagarajan/portfolio/blob/main/src/components/ui/badge.tsx): `src/components/ui/badge.tsx`
- [Button primitive](https://github.com/vigneshthyagarajan/portfolio/blob/main/src/components/ui/button.tsx): `src/components/ui/button.tsx`
- [Class utilities](https://github.com/vigneshthyagarajan/portfolio/blob/main/src/lib/utils.ts): `src/lib/utils.ts`

### Other components

- **Visitor**
- **LinkedIn**
- **GitHub**

## Connections

- Visitor → Root layout: opens site
- Root layout → Home page: renders page
- Root layout → Theme provider: wraps content
- Root layout → Theme toggle: renders toggle
- Home page → Hero: renders section
- Home page → About and education: renders section
- Home page → Work experience: renders section
- Home page → Skills: renders section
- Home page → Projects: renders section
- Home page → Certifications: renders section
- Home page → Contact: renders section
- About and education → Card primitives: uses cards
- Work experience → Card primitives: uses cards
- Work experience → Badge primitive: uses badges
- Projects → Card primitives: uses cards
- Projects → Badge primitive: uses badges
- Projects → Button primitive: uses buttons
- Contact → Card primitives: uses cards
- Contact → Button primitive: uses buttons
- Button primitive → Class utilities: merges classes
- Badge primitive → Class utilities: merges classes
- Card primitives → Class utilities: merges classes
- Visitor → LinkedIn: follows profile
- Visitor → GitHub: opens profile