# tricch/myportfolio architecture

> Architecture diagram of the GitHub repository tricch/myportfolio, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-10-01). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/tricch/myportfolio
- Repository: https://github.com/tricch/myportfolio

## Overview

This is a Next.js personal portfolio site. A visitor enters the home page and browses an introduction, skills/about grid, project highlights, process, and contact footer; project and section content is supplied by shared data. The page also contains commented-out client and experience sections, so they are represented as available components, not active steps in the current page. The graph focuses on documented component composition and data use; unsampled modules are included where the source index identifies their role, without guessing their internal behavior.

Main entry points: [`app/page.tsx`](https://github.com/tricch/myportfolio/blob/main/app/page.tsx) (Home page), [`lib/utils.ts`](https://github.com/tricch/myportfolio/blob/main/lib/utils.ts) (Class utilities), [`data/index.ts`](https://github.com/tricch/myportfolio/blob/main/data/index.ts) (Portfolio data), [`components/Hero.tsx`](https://github.com/tricch/myportfolio/blob/main/components/Hero.tsx) (Hero intro)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_entry["Page entry"]
  node_home["Home page<br/>[page.tsx]"]
  node_layout["App layout<br/>[layout.tsx]"]
end

subgraph group_sections["Portfolio sections"]
  node_hero["Hero intro<br/>[Hero.tsx]"]
  node_grid["About grid<br/>[Grid.tsx]"]
  node_projects["Recent projects<br/>[RecentProjects.tsx]"]
  node_approach["Work approach<br/>[Approach.tsx]"]
  node_footer["Contact footer<br/>[Footer.tsx]"]
  node_clients["Client showcase<br/>[Clients.tsx]"]
  node_experience["Work experience<br/>[Experience.tsx]"]
end

subgraph group_visuals["Visual components"]
  node_magic["Action button<br/>[MagicButton.tsx]"]
  node_bento["Bento cards<br/>[BentoGrid.tsx]"]
  node_canvas["Canvas reveal"]
  node_floating["Floating navigation<br/>[FloatingNavbar.tsx]"]
  node_globegrid["Globe display<br/>[GridGlobe.tsx]"]
  node_globe["3D globe<br/>[Globe.tsx]"]
  node_gradient["Gradient background<br/>[GradientBg.tsx]"]
  node_cards["Moving cards<br/>[InfiniteCards.tsx]"]
  node_borders["Moving borders<br/>[MovingBorders.tsx]"]
  node_pin["Project pin<br/>[Pin.tsx]"]
  node_spotlight["Spotlight effect<br/>[Spotlight.tsx]"]
  node_text["Generated text"]
end

subgraph group_content["Portfolio content"]
  node_data["Portfolio data<br/>[index.ts]"]
  node_utils["Class utilities<br/>[utils.ts]"]
end

node_visitor(("Visitor"))

node_visitor -->|"opens"| node_home
node_home -.->|"renders within"| node_layout
node_home -->|"renders"| node_floating
node_home -->|"renders"| node_hero
node_home -->|"renders"| node_grid
node_home -->|"renders"| node_projects
node_home -->|"renders"| node_approach
node_home -->|"renders"| node_footer
node_home -->|"comments out"| node_clients
node_home -->|"comments out"| node_experience
node_hero -->|"renders"| node_magic
node_hero -->|"renders"| node_spotlight
node_hero -->|"renders"| node_text
node_grid -->|"renders"| node_bento
node_projects -->|"renders"| node_pin
node_approach -->|"renders"| node_canvas
node_clients -->|"renders"| node_cards
node_experience -->|"renders"| node_borders
node_footer -->|"renders"| node_magic
node_bento -->|"renders"| node_globegrid
node_bento -->|"renders"| node_gradient
node_bento -->|"renders"| node_magic
node_globegrid -->|"loads dynamically"| node_globe
node_hero -.->|"uses navigation"| node_data
node_grid -->|"reads content"| node_data
node_projects -->|"reads projects"| node_data
node_clients -->|"reads testimonials"| node_data
node_experience -->|"reads experience"| node_data
node_footer -->|"reads content"| node_data
node_bento -->|"loads animation"| node_data
node_canvas -->|"uses classes"| node_utils
node_floating -->|"uses classes"| node_utils
node_gradient -->|"uses classes"| node_utils
node_cards -->|"uses classes"| node_utils
node_borders -->|"uses classes"| node_utils
node_pin -->|"uses classes"| node_utils
node_spotlight -->|"uses classes"| node_utils
node_text -->|"uses classes"| node_utils

click node_home "https://github.com/tricch/myportfolio/blob/main/app/page.tsx"
click node_layout "https://github.com/tricch/myportfolio/blob/main/app/layout.tsx"
click node_hero "https://github.com/tricch/myportfolio/blob/main/components/Hero.tsx"
click node_grid "https://github.com/tricch/myportfolio/blob/main/components/Grid.tsx"
click node_projects "https://github.com/tricch/myportfolio/blob/main/components/RecentProjects.tsx"
click node_approach "https://github.com/tricch/myportfolio/blob/main/components/Approach.tsx"
click node_footer "https://github.com/tricch/myportfolio/blob/main/components/Footer.tsx"
click node_clients "https://github.com/tricch/myportfolio/blob/main/components/Clients.tsx"
click node_experience "https://github.com/tricch/myportfolio/blob/main/components/Experience.tsx"
click node_magic "https://github.com/tricch/myportfolio/blob/main/components/MagicButton.tsx"
click node_bento "https://github.com/tricch/myportfolio/blob/main/components/ui/BentoGrid.tsx"
click node_canvas "https://github.com/tricch/myportfolio/blob/main/components/ui/CanvasRevealEffect.tsx"
click node_floating "https://github.com/tricch/myportfolio/blob/main/components/ui/FloatingNavbar.tsx"
click node_globegrid "https://github.com/tricch/myportfolio/blob/main/components/ui/GridGlobe.tsx"
click node_globe "https://github.com/tricch/myportfolio/blob/main/components/ui/Globe.tsx"
click node_gradient "https://github.com/tricch/myportfolio/blob/main/components/ui/GradientBg.tsx"
click node_cards "https://github.com/tricch/myportfolio/blob/main/components/ui/InfiniteCards.tsx"
click node_borders "https://github.com/tricch/myportfolio/blob/main/components/ui/MovingBorders.tsx"
click node_pin "https://github.com/tricch/myportfolio/blob/main/components/ui/Pin.tsx"
click node_spotlight "https://github.com/tricch/myportfolio/blob/main/components/ui/Spotlight.tsx"
click node_text "https://github.com/tricch/myportfolio/blob/main/components/ui/TextGenerateEffect.tsx"
click node_data "https://github.com/tricch/myportfolio/blob/main/data/index.ts"
click node_utils "https://github.com/tricch/myportfolio/blob/main/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_grid,node_projects,node_approach,node_footer,node_clients,node_experience toneAmber
class node_magic,node_bento,node_canvas,node_floating,node_globegrid,node_globe,node_gradient,node_cards,node_borders,node_pin,node_spotlight,node_text toneMint
class node_data,node_utils toneRose
class node_visitor toneIndigo
```

## Components

### Page entry

- [Home page](https://github.com/tricch/myportfolio/blob/main/app/page.tsx): `app/page.tsx`
- [App layout](https://github.com/tricch/myportfolio/blob/main/app/layout.tsx): `app/layout.tsx`

### Portfolio sections

- [Hero intro](https://github.com/tricch/myportfolio/blob/main/components/Hero.tsx): `components/Hero.tsx`
- [About grid](https://github.com/tricch/myportfolio/blob/main/components/Grid.tsx): `components/Grid.tsx`
- [Recent projects](https://github.com/tricch/myportfolio/blob/main/components/RecentProjects.tsx): `components/RecentProjects.tsx`
- [Work approach](https://github.com/tricch/myportfolio/blob/main/components/Approach.tsx): `components/Approach.tsx`
- [Contact footer](https://github.com/tricch/myportfolio/blob/main/components/Footer.tsx): `components/Footer.tsx`
- [Client showcase](https://github.com/tricch/myportfolio/blob/main/components/Clients.tsx): `components/Clients.tsx`
- [Work experience](https://github.com/tricch/myportfolio/blob/main/components/Experience.tsx): `components/Experience.tsx`

### Visual components

- [Action button](https://github.com/tricch/myportfolio/blob/main/components/MagicButton.tsx): `components/MagicButton.tsx`
- [Bento cards](https://github.com/tricch/myportfolio/blob/main/components/ui/BentoGrid.tsx): `components/ui/BentoGrid.tsx`
- [Canvas reveal](https://github.com/tricch/myportfolio/blob/main/components/ui/CanvasRevealEffect.tsx): `components/ui/CanvasRevealEffect.tsx`
- [Floating navigation](https://github.com/tricch/myportfolio/blob/main/components/ui/FloatingNavbar.tsx): `components/ui/FloatingNavbar.tsx`
- [Globe display](https://github.com/tricch/myportfolio/blob/main/components/ui/GridGlobe.tsx): `components/ui/GridGlobe.tsx`
- [3D globe](https://github.com/tricch/myportfolio/blob/main/components/ui/Globe.tsx): `components/ui/Globe.tsx`
- [Gradient background](https://github.com/tricch/myportfolio/blob/main/components/ui/GradientBg.tsx): `components/ui/GradientBg.tsx`
- [Moving cards](https://github.com/tricch/myportfolio/blob/main/components/ui/InfiniteCards.tsx): `components/ui/InfiniteCards.tsx`
- [Moving borders](https://github.com/tricch/myportfolio/blob/main/components/ui/MovingBorders.tsx): `components/ui/MovingBorders.tsx`
- [Project pin](https://github.com/tricch/myportfolio/blob/main/components/ui/Pin.tsx): `components/ui/Pin.tsx`
- [Spotlight effect](https://github.com/tricch/myportfolio/blob/main/components/ui/Spotlight.tsx): `components/ui/Spotlight.tsx`
- [Generated text](https://github.com/tricch/myportfolio/blob/main/components/ui/TextGenerateEffect.tsx): `components/ui/TextGenerateEffect.tsx`

### Portfolio content

- [Portfolio data](https://github.com/tricch/myportfolio/blob/main/data/index.ts): `data/index.ts`
- [Class utilities](https://github.com/tricch/myportfolio/blob/main/lib/utils.ts): `lib/utils.ts`

### Other components

- **Visitor**

## Connections

- Visitor → Home page: opens
- Home page → App layout: renders within
- Home page → Floating navigation: renders (evidence: `app/page.tsx`)
- Home page → Hero intro: renders (evidence: `app/page.tsx`)
- Home page → About grid: renders (evidence: `app/page.tsx`)
- Home page → Recent projects: renders (evidence: `app/page.tsx`)
- Home page → Work approach: renders (evidence: `app/page.tsx`)
- Home page → Contact footer: renders (evidence: `app/page.tsx`)
- Home page → Client showcase: comments out (evidence: `app/page.tsx`)
- Home page → Work experience: comments out (evidence: `app/page.tsx`)
- Hero intro → Action button: renders (evidence: `components/Hero.tsx`)
- Hero intro → Spotlight effect: renders (evidence: `components/Hero.tsx`)
- Hero intro → Generated text: renders (evidence: `components/Hero.tsx`)
- About grid → Bento cards: renders (evidence: `components/Grid.tsx`)
- Recent projects → Project pin: renders (evidence: `components/RecentProjects.tsx`)
- Work approach → Canvas reveal: renders (evidence: `components/Approach.tsx`)
- Client showcase → Moving cards: renders (evidence: `components/Clients.tsx`)
- Work experience → Moving borders: renders (evidence: `components/Experience.tsx`)
- Contact footer → Action button: renders (evidence: `components/Footer.tsx`)
- Bento cards → Globe display: renders (evidence: `components/ui/BentoGrid.tsx`)
- Bento cards → Gradient background: renders (evidence: `components/ui/BentoGrid.tsx`)
- Bento cards → Action button: renders (evidence: `components/ui/BentoGrid.tsx`)
- Globe display → 3D globe: loads dynamically (evidence: `components/ui/GridGlobe.tsx`)
- Hero intro → Portfolio data: uses navigation
- About grid → Portfolio data: reads content (evidence: `components/Grid.tsx`)
- Recent projects → Portfolio data: reads projects (evidence: `components/RecentProjects.tsx`)
- Client showcase → Portfolio data: reads testimonials (evidence: `components/Clients.tsx`)
- Work experience → Portfolio data: reads experience (evidence: `components/Experience.tsx`)
- Contact footer → Portfolio data: reads content (evidence: `components/Footer.tsx`)
- Bento cards → Portfolio data: loads animation (evidence: `components/ui/BentoGrid.tsx`)
- Canvas reveal → Class utilities: uses classes (evidence: `components/ui/CanvasRevealEffect.tsx`)
- Floating navigation → Class utilities: uses classes (evidence: `components/ui/FloatingNavbar.tsx`)
- Gradient background → Class utilities: uses classes (evidence: `components/ui/GradientBg.tsx`)
- Moving cards → Class utilities: uses classes (evidence: `components/ui/InfiniteCards.tsx`)
- Moving borders → Class utilities: uses classes (evidence: `components/ui/MovingBorders.tsx`)
- Project pin → Class utilities: uses classes (evidence: `components/ui/Pin.tsx`)
- Spotlight effect → Class utilities: uses classes (evidence: `components/ui/Spotlight.tsx`)
- Generated text → Class utilities: uses classes (evidence: `components/ui/TextGenerateEffect.tsx`)