# clyvsdigs/clyvs-portfolio architecture

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

## Overview

This is a React portfolio site for presenting Clyvs’s profile, skills, projects, and contact links. A visitor enters through the React app, which routes requests through a shared layout to the home, projects, about, or contact page; those pages render portfolio content, including project links and social profiles. The source index identifies additional section components, but excerpts do not show their page wiring, so those connections are omitted. No backend or persistent store is evident in the provided material.

Main entry points: [`src/App.tsx`](https://github.com/clyvsdigs/clyvs-portfolio/blob/main/src/App.tsx) (Route table), [`src/components/features/ProjectsSection.tsx`](https://github.com/clyvsdigs/clyvs-portfolio/blob/main/src/components/features/ProjectsSection.tsx) (Project showcase), [`src/components/ui/SectionTitle.tsx`](https://github.com/clyvsdigs/clyvs-portfolio/blob/main/src/components/ui/SectionTitle.tsx) (Section title), [`src/components/common/SocialLinks.tsx`](https://github.com/clyvsdigs/clyvs-portfolio/blob/main/src/components/common/SocialLinks.tsx) (Social links)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_routing["App routing"]
  node_entry["React entry<br/>[main.tsx]"]
  node_app["Route table<br/>[App.tsx]"]
  node_layout["Shared layout<br/>[MainLayout.tsx]"]
end

subgraph group_portfolio["Portfolio content"]
  node_home["Home page<br/>[Home.tsx]"]
  node_projects["Projects page<br/>[Projects.tsx]"]
  node_about["About page<br/>[About.tsx]"]
  node_contact["Contact page<br/>[Contact.tsx]"]
  node_navbar["Navigation bar<br/>[Navbar.tsx]"]
  node_hero["Hero section<br/>[HeroSection.tsx]"]
  node_about_section["About section<br/>[AboutSection.tsx]"]
  node_skills["Skills section<br/>[SkillsSection.tsx]"]
  node_projects_section["Project showcase"]
  node_contact_section["Contact section<br/>[ContactSection.tsx]"]
end

subgraph group_ui["Shared UI"]
  node_logo["Brand logo<br/>[Logo.tsx]"]
  node_social["Social links<br/>[SocialLinks.tsx]"]
  node_button["Button<br/>[Button.tsx]"]
  node_card["Card<br/>[Card.tsx]"]
  node_title["Section title<br/>[SectionTitle.tsx]"]
  node_class_utils["Class utilities<br/>[utils.ts]"]
end

node_visitor(("Visitor"))
node_social_sites(("Social sites"))
node_live_projects(("Live projects"))

node_visitor -->|"opens site"| node_entry
node_entry -->|"renders"| node_app
node_app -->|"routes within"| node_layout
node_app -->|"routes to"| node_home
node_app -->|"routes to"| node_projects
node_app -->|"routes to"| node_about
node_app -->|"routes to"| node_contact
node_layout -->|"renders"| node_navbar
node_navbar -->|"renders"| node_logo
node_projects -->|"renders"| node_projects_section
node_projects_section -->|"renders"| node_card
node_projects_section -->|"renders"| node_title
node_projects_section -->|"links to"| node_live_projects
node_contact -->|"renders"| node_social
node_contact_section -->|"renders"| node_social
node_social -->|"links to"| node_social_sites
node_button -->|"uses"| node_class_utils
node_card -->|"uses"| node_class_utils
node_about -->|"renders"| node_title
node_hero -->|"uses"| node_button
node_about_section -->|"renders"| node_title
node_skills -->|"renders"| node_title
node_skills -->|"renders"| node_card

click node_entry "https://github.com/clyvsdigs/clyvs-portfolio/blob/main/src/main.tsx"
click node_app "https://github.com/clyvsdigs/clyvs-portfolio/blob/main/src/App.tsx"
click node_layout "https://github.com/clyvsdigs/clyvs-portfolio/blob/main/src/Layouts/MainLayout.tsx"
click node_home "https://github.com/clyvsdigs/clyvs-portfolio/blob/main/src/pages/Home.tsx"
click node_projects "https://github.com/clyvsdigs/clyvs-portfolio/blob/main/src/pages/Projects.tsx"
click node_about "https://github.com/clyvsdigs/clyvs-portfolio/blob/main/src/pages/About.tsx"
click node_contact "https://github.com/clyvsdigs/clyvs-portfolio/blob/main/src/pages/Contact.tsx"
click node_navbar "https://github.com/clyvsdigs/clyvs-portfolio/blob/main/src/components/features/Navbar.tsx"
click node_hero "https://github.com/clyvsdigs/clyvs-portfolio/blob/main/src/components/features/HeroSection.tsx"
click node_about_section "https://github.com/clyvsdigs/clyvs-portfolio/blob/main/src/components/features/AboutSection.tsx"
click node_skills "https://github.com/clyvsdigs/clyvs-portfolio/blob/main/src/components/features/SkillsSection.tsx"
click node_projects_section "https://github.com/clyvsdigs/clyvs-portfolio/blob/main/src/components/features/ProjectsSection.tsx"
click node_contact_section "https://github.com/clyvsdigs/clyvs-portfolio/blob/main/src/components/features/ContactSection.tsx"
click node_logo "https://github.com/clyvsdigs/clyvs-portfolio/blob/main/src/components/common/Logo.tsx"
click node_social "https://github.com/clyvsdigs/clyvs-portfolio/blob/main/src/components/common/SocialLinks.tsx"
click node_button "https://github.com/clyvsdigs/clyvs-portfolio/blob/main/src/components/ui/Button.tsx"
click node_card "https://github.com/clyvsdigs/clyvs-portfolio/blob/main/src/components/ui/Card.tsx"
click node_title "https://github.com/clyvsdigs/clyvs-portfolio/blob/main/src/components/ui/SectionTitle.tsx"
click node_class_utils "https://github.com/clyvsdigs/clyvs-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_entry,node_app,node_layout toneBlue
class node_home,node_projects,node_about,node_contact,node_navbar,node_hero,node_about_section,node_skills,node_projects_section,node_contact_section toneAmber
class node_logo,node_social,node_button,node_card,node_title,node_class_utils toneMint
class node_visitor,node_social_sites,node_live_projects toneIndigo
```

## Components

### App routing

- [React entry](https://github.com/clyvsdigs/clyvs-portfolio/blob/main/src/main.tsx): `src/main.tsx`
- [Route table](https://github.com/clyvsdigs/clyvs-portfolio/blob/main/src/App.tsx): `src/App.tsx`
- [Shared layout](https://github.com/clyvsdigs/clyvs-portfolio/blob/main/src/Layouts/MainLayout.tsx): `src/Layouts/MainLayout.tsx`

### Portfolio content

- [Home page](https://github.com/clyvsdigs/clyvs-portfolio/blob/main/src/pages/Home.tsx): `src/pages/Home.tsx`
- [Projects page](https://github.com/clyvsdigs/clyvs-portfolio/blob/main/src/pages/Projects.tsx): `src/pages/Projects.tsx`
- [About page](https://github.com/clyvsdigs/clyvs-portfolio/blob/main/src/pages/About.tsx): `src/pages/About.tsx`
- [Contact page](https://github.com/clyvsdigs/clyvs-portfolio/blob/main/src/pages/Contact.tsx): `src/pages/Contact.tsx`
- [Navigation bar](https://github.com/clyvsdigs/clyvs-portfolio/blob/main/src/components/features/Navbar.tsx): `src/components/features/Navbar.tsx`
- [Hero section](https://github.com/clyvsdigs/clyvs-portfolio/blob/main/src/components/features/HeroSection.tsx): `src/components/features/HeroSection.tsx`
- [About section](https://github.com/clyvsdigs/clyvs-portfolio/blob/main/src/components/features/AboutSection.tsx): `src/components/features/AboutSection.tsx`
- [Skills section](https://github.com/clyvsdigs/clyvs-portfolio/blob/main/src/components/features/SkillsSection.tsx): `src/components/features/SkillsSection.tsx`
- [Project showcase](https://github.com/clyvsdigs/clyvs-portfolio/blob/main/src/components/features/ProjectsSection.tsx): `src/components/features/ProjectsSection.tsx`
- [Contact section](https://github.com/clyvsdigs/clyvs-portfolio/blob/main/src/components/features/ContactSection.tsx): `src/components/features/ContactSection.tsx`

### Shared UI

- [Brand logo](https://github.com/clyvsdigs/clyvs-portfolio/blob/main/src/components/common/Logo.tsx): `src/components/common/Logo.tsx`
- [Social links](https://github.com/clyvsdigs/clyvs-portfolio/blob/main/src/components/common/SocialLinks.tsx): `src/components/common/SocialLinks.tsx`
- [Button](https://github.com/clyvsdigs/clyvs-portfolio/blob/main/src/components/ui/Button.tsx): `src/components/ui/Button.tsx`
- [Card](https://github.com/clyvsdigs/clyvs-portfolio/blob/main/src/components/ui/Card.tsx): `src/components/ui/Card.tsx`
- [Section title](https://github.com/clyvsdigs/clyvs-portfolio/blob/main/src/components/ui/SectionTitle.tsx): `src/components/ui/SectionTitle.tsx`
- [Class utilities](https://github.com/clyvsdigs/clyvs-portfolio/blob/main/src/lib/utils.ts): `src/lib/utils.ts`

### Other components

- **Visitor**
- **Social sites**
- **Live projects**

## Connections

- Visitor → React entry: opens site
- React entry → Route table: renders (evidence: `src/main.tsx`)
- Route table → Shared layout: routes within (evidence: `src/App.tsx`)
- Route table → Home page: routes to (evidence: `src/App.tsx`)
- Route table → Projects page: routes to (evidence: `src/App.tsx`)
- Route table → About page: routes to (evidence: `src/App.tsx`)
- Route table → Contact page: routes to (evidence: `src/App.tsx`)
- Shared layout → Navigation bar: renders (evidence: `src/Layouts/MainLayout.tsx`)
- Navigation bar → Brand logo: renders (evidence: `src/components/features/Navbar.tsx`)
- Projects page → Project showcase: renders (evidence: `src/pages/Projects.tsx`)
- Project showcase → Card: renders (evidence: `src/components/features/ProjectsSection.tsx`)
- Project showcase → Section title: renders (evidence: `src/components/features/ProjectsSection.tsx`)
- Project showcase → Live projects: links to (evidence: `src/components/features/ProjectsSection.tsx`)
- Contact page → Social links: renders (evidence: `src/pages/Contact.tsx`)
- Contact section → Social links: renders (evidence: `src/components/features/ContactSection.tsx`)
- Social links → Social sites: links to (evidence: `src/components/common/SocialLinks.tsx`)
- Button → Class utilities: uses (evidence: `src/components/ui/Button.tsx`)
- Card → Class utilities: uses (evidence: `src/components/ui/Card.tsx`)
- About page → Section title: renders (evidence: `src/pages/About.tsx`)
- Hero section → Button: uses (evidence: `src/components/features/HeroSection.tsx`)
- About section → Section title: renders (evidence: `src/components/features/AboutSection.tsx`)
- Skills section → Section title: renders (evidence: `src/components/features/SkillsSection.tsx`)
- Skills section → Card: renders (evidence: `src/components/features/SkillsSection.tsx`)