# glennc-dev/portfolio-template architecture

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

## Overview

This is a placeholder personal-portfolio template. A visitor enters through the routed site shell, explores profile and portfolio pages across desktop or phone layouts, and can use accessibility/theme controls or contact the owner. The graph preserves the documented projects, services, showcase carousel, testimonials, profile, and mobile capabilities. Some route components and integrations are unsampled; links to them rely on explicit README or SOURCE INDEX references, so internal details are intentionally limited.

Main entry points: [`src/main.tsx`](https://github.com/glennc-dev/portfolio-template/blob/main/src/main.tsx) (Route setup), [`src/App.tsx`](https://github.com/glennc-dev/portfolio-template/blob/main/src/App.tsx) (Site shell), [`src/components/ProjectsGrid.tsx`](https://github.com/glennc-dev/portfolio-template/blob/main/src/components/ProjectsGrid.tsx) (Projects), [`src/components/ContactGrid.tsx`](https://github.com/glennc-dev/portfolio-template/blob/main/src/components/ContactGrid.tsx) (Contact)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_shell["App shell"]
  node_router["Route setup<br/>[main.tsx]"]
  node_app["Site shell<br/>[App.tsx]"]
  node_intro["Intro overlay<br/>[IntroOverlay.tsx]"]
  node_canvas["Contour canvas<br/>[HeroCanvasV2.tsx]"]
  node_mobile["Phone navigation<br/>[TabBar.tsx]"]
end

subgraph group_portfolio["Portfolio pages"]
  node_home["Home<br/>[Home.tsx]"]
  node_projects["Projects<br/>[ProjectsGrid.tsx]"]
  node_services["Services<br/>[ServicesGrid.tsx]"]
  node_autopilot["Workflow showcase<br/>[Autopilot.tsx]"]
  node_showcase["Showcase<br/>[ShowcaseGrid.tsx]"]
  node_carousel["3D carousel<br/>[FunnelBarrel.tsx]"]
  node_testimonials["Testimonials"]
  node_about["About<br/>[AboutGrid.tsx]"]
  node_contact["Contact<br/>[ContactGrid.tsx]"]
  node_aistack["AI stack view<br/>[AIStack.tsx]"]
end

subgraph group_content["Content and data"]
  node_profile["Profile content<br/>[profile.ts]"]
  node_projectsdata["Project entries<br/>[projects.ts]"]
  node_funnelsdata["Funnel entries<br/>[funnels.ts]"]
  node_stackdata["AI stack content<br/>[ai-stack.ts]"]
end

subgraph group_runtime["Visitor controls"]
  node_contactlib["Contact handler<br/>[contact.ts]"]
  node_access["Accessibility menu<br/>[AccessMenu.tsx]"]
  node_a11y["Accessibility prefs<br/>[a11y.ts]"]
  node_theme["Theme control<br/>[theme.ts]"]
  node_perf["Performance gate<br/>[perf.ts]"]
end

node_visitor(("Visitor"))
node_emailapp["Visitor email app"]

node_visitor -->|"opens site"| node_router
node_router -->|"mounts routes in"| node_app
node_router -->|"routes to"| node_home
node_app -->|"renders outlet"| node_home
node_router -->|"routes via view"| node_projects
node_router -->|"routes via view"| node_services
node_router -->|"routes via view"| node_showcase
node_router -->|"routes to"| node_testimonials
node_router -->|"routes to"| node_about
node_router -->|"routes to"| node_contact
node_services -->|"renders"| node_autopilot
node_showcase -.->|"displays carousel"| node_carousel
node_home -->|"reads"| node_profile
node_about -->|"reads"| node_profile
node_contact -->|"reads"| node_profile
node_projects -->|"reads"| node_projectsdata
node_projects -->|"reads"| node_funnelsdata
node_projects -->|"reads"| node_stackdata
node_aistack -->|"renders data"| node_stackdata
node_contact -->|"uses"| node_contactlib
node_contactlib -->|"opens by default"| node_emailapp
node_app -->|"renders"| node_intro
node_app -->|"lazy-loads"| node_canvas
node_app -->|"renders on phone"| node_mobile
node_app -->|"renders"| node_access
node_access -->|"uses preferences"| node_a11y
node_app -->|"measures frame health"| node_perf
node_canvas -->|"listens for theme"| node_theme

click node_router "https://github.com/glennc-dev/portfolio-template/blob/main/src/main.tsx"
click node_app "https://github.com/glennc-dev/portfolio-template/blob/main/src/App.tsx"
click node_home "https://github.com/glennc-dev/portfolio-template/blob/main/src/components/Home.tsx"
click node_projects "https://github.com/glennc-dev/portfolio-template/blob/main/src/components/ProjectsGrid.tsx"
click node_services "https://github.com/glennc-dev/portfolio-template/blob/main/src/components/ServicesGrid.tsx"
click node_autopilot "https://github.com/glennc-dev/portfolio-template/blob/main/src/components/Autopilot.tsx"
click node_showcase "https://github.com/glennc-dev/portfolio-template/blob/main/src/components/ShowcaseGrid.tsx"
click node_carousel "https://github.com/glennc-dev/portfolio-template/blob/main/src/components/FunnelBarrel.tsx"
click node_testimonials "https://github.com/glennc-dev/portfolio-template/blob/main/src/components/TestimonialsGrid.tsx"
click node_about "https://github.com/glennc-dev/portfolio-template/blob/main/src/components/AboutGrid.tsx"
click node_contact "https://github.com/glennc-dev/portfolio-template/blob/main/src/components/ContactGrid.tsx"
click node_contactlib "https://github.com/glennc-dev/portfolio-template/blob/main/src/lib/contact.ts"
click node_profile "https://github.com/glennc-dev/portfolio-template/blob/main/src/data/profile.ts"
click node_projectsdata "https://github.com/glennc-dev/portfolio-template/blob/main/src/data/projects.ts"
click node_funnelsdata "https://github.com/glennc-dev/portfolio-template/blob/main/src/data/funnels.ts"
click node_stackdata "https://github.com/glennc-dev/portfolio-template/blob/main/src/data/ai-stack.ts"
click node_aistack "https://github.com/glennc-dev/portfolio-template/blob/main/src/components/AIStack.tsx"
click node_intro "https://github.com/glennc-dev/portfolio-template/blob/main/src/components/IntroOverlay.tsx"
click node_canvas "https://github.com/glennc-dev/portfolio-template/blob/main/src/components/HeroCanvasV2.tsx"
click node_mobile "https://github.com/glennc-dev/portfolio-template/blob/main/src/components/TabBar.tsx"
click node_access "https://github.com/glennc-dev/portfolio-template/blob/main/src/components/AccessMenu.tsx"
click node_a11y "https://github.com/glennc-dev/portfolio-template/blob/main/src/lib/a11y.ts"
click node_theme "https://github.com/glennc-dev/portfolio-template/blob/main/src/lib/theme.ts"
click node_perf "https://github.com/glennc-dev/portfolio-template/blob/main/src/lib/perf.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_router,node_app,node_intro,node_canvas,node_mobile toneBlue
class node_home,node_projects,node_services,node_autopilot,node_showcase,node_carousel,node_testimonials,node_about,node_contact,node_aistack toneAmber
class node_profile,node_projectsdata,node_funnelsdata,node_stackdata toneMint
class node_contactlib,node_access,node_a11y,node_theme,node_perf toneRose
class node_visitor,node_emailapp toneIndigo
```

## Components

### App shell

- [Route setup](https://github.com/glennc-dev/portfolio-template/blob/main/src/main.tsx): `src/main.tsx`
- [Site shell](https://github.com/glennc-dev/portfolio-template/blob/main/src/App.tsx): `src/App.tsx`
- [Intro overlay](https://github.com/glennc-dev/portfolio-template/blob/main/src/components/IntroOverlay.tsx): `src/components/IntroOverlay.tsx`
- [Contour canvas](https://github.com/glennc-dev/portfolio-template/blob/main/src/components/HeroCanvasV2.tsx): `src/components/HeroCanvasV2.tsx`
- [Phone navigation](https://github.com/glennc-dev/portfolio-template/blob/main/src/components/TabBar.tsx): `src/components/TabBar.tsx`

### Portfolio pages

- [Home](https://github.com/glennc-dev/portfolio-template/blob/main/src/components/Home.tsx): `src/components/Home.tsx`
- [Projects](https://github.com/glennc-dev/portfolio-template/blob/main/src/components/ProjectsGrid.tsx): `src/components/ProjectsGrid.tsx`
- [Services](https://github.com/glennc-dev/portfolio-template/blob/main/src/components/ServicesGrid.tsx): `src/components/ServicesGrid.tsx`
- [Workflow showcase](https://github.com/glennc-dev/portfolio-template/blob/main/src/components/Autopilot.tsx): `src/components/Autopilot.tsx`
- [Showcase](https://github.com/glennc-dev/portfolio-template/blob/main/src/components/ShowcaseGrid.tsx): `src/components/ShowcaseGrid.tsx`
- [3D carousel](https://github.com/glennc-dev/portfolio-template/blob/main/src/components/FunnelBarrel.tsx): `src/components/FunnelBarrel.tsx`
- [Testimonials](https://github.com/glennc-dev/portfolio-template/blob/main/src/components/TestimonialsGrid.tsx): `src/components/TestimonialsGrid.tsx`
- [About](https://github.com/glennc-dev/portfolio-template/blob/main/src/components/AboutGrid.tsx): `src/components/AboutGrid.tsx`
- [Contact](https://github.com/glennc-dev/portfolio-template/blob/main/src/components/ContactGrid.tsx): `src/components/ContactGrid.tsx`
- [AI stack view](https://github.com/glennc-dev/portfolio-template/blob/main/src/components/AIStack.tsx): `src/components/AIStack.tsx`

### Content and data

- [Profile content](https://github.com/glennc-dev/portfolio-template/blob/main/src/data/profile.ts): `src/data/profile.ts`
- [Project entries](https://github.com/glennc-dev/portfolio-template/blob/main/src/data/projects.ts): `src/data/projects.ts`
- [Funnel entries](https://github.com/glennc-dev/portfolio-template/blob/main/src/data/funnels.ts): `src/data/funnels.ts`
- [AI stack content](https://github.com/glennc-dev/portfolio-template/blob/main/src/data/ai-stack.ts): `src/data/ai-stack.ts`

### Visitor controls

- [Contact handler](https://github.com/glennc-dev/portfolio-template/blob/main/src/lib/contact.ts): `src/lib/contact.ts`
- [Accessibility menu](https://github.com/glennc-dev/portfolio-template/blob/main/src/components/AccessMenu.tsx): `src/components/AccessMenu.tsx`
- [Accessibility prefs](https://github.com/glennc-dev/portfolio-template/blob/main/src/lib/a11y.ts): `src/lib/a11y.ts`
- [Theme control](https://github.com/glennc-dev/portfolio-template/blob/main/src/lib/theme.ts): `src/lib/theme.ts`
- [Performance gate](https://github.com/glennc-dev/portfolio-template/blob/main/src/lib/perf.ts): `src/lib/perf.ts`

### Other components

- **Visitor**
- **Visitor email app**

## Connections

- Visitor → Route setup: opens site (evidence: `src/main.tsx`)
- Route setup → Site shell: mounts routes in (evidence: `src/main.tsx`)
- Route setup → Home: routes to (evidence: `src/main.tsx`)
- Site shell → Home: renders outlet (evidence: `src/App.tsx`)
- Route setup → Projects: routes via view (evidence: `src/main.tsx`)
- Route setup → Services: routes via view (evidence: `src/main.tsx`)
- Route setup → Showcase: routes via view (evidence: `src/main.tsx`)
- Route setup → Testimonials: routes to (evidence: `src/main.tsx`)
- Route setup → About: routes to (evidence: `src/main.tsx`)
- Route setup → Contact: routes to (evidence: `src/main.tsx`)
- Services → Workflow showcase: renders (evidence: `src/components/ServicesGrid.tsx`)
- Showcase → 3D carousel: displays carousel
- Home → Profile content: reads (evidence: `src/components/Home.tsx`)
- About → Profile content: reads (evidence: `src/components/AboutGrid.tsx`)
- Contact → Profile content: reads (evidence: `src/components/ContactGrid.tsx`)
- Projects → Project entries: reads (evidence: `src/components/ProjectsGrid.tsx`)
- Projects → Funnel entries: reads (evidence: `src/components/ProjectsGrid.tsx`)
- Projects → AI stack content: reads (evidence: `src/components/ProjectsGrid.tsx`)
- AI stack view → AI stack content: renders data (evidence: `src/components/AIStack.tsx`)
- Contact → Contact handler: uses (evidence: `src/components/ContactGrid.tsx`)
- Contact handler → Visitor email app: opens by default (evidence: `README.md`)
- Site shell → Intro overlay: renders (evidence: `src/App.tsx`)
- Site shell → Contour canvas: lazy-loads (evidence: `src/App.tsx`)
- Site shell → Phone navigation: renders on phone (evidence: `src/App.tsx`)
- Site shell → Accessibility menu: renders (evidence: `src/App.tsx`)
- Accessibility menu → Accessibility prefs: uses preferences (evidence: `src/components/AccessMenu.tsx`)
- Site shell → Performance gate: measures frame health (evidence: `src/App.tsx`)
- Contour canvas → Theme control: listens for theme (evidence: `src/lib/theme.ts`)