# brewed-ops/portfolio-template architecture

> Architecture diagram of the GitHub repository brewed-ops/portfolio-template, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-28). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/brewed-ops/portfolio-template
- Repository: https://github.com/brewed-ops/portfolio-template

## Overview

This is a React portfolio-template site: visitors navigate a responsive portfolio shell to explore profile, projects, services, showcases and other pages, then can contact the portfolio owner. The main runtime path is browser entry and route selection into the persistent shell, which renders the selected page and adapts navigation for phone layouts. Portfolio content is placeholder-driven; the README documents additional content areas such as testimonials, AI systems, FAQs and funnel pages. Some page and integration wiring is inferred only from route declarations and README descriptions because their source was not sampled.

Main entry points: [`src/App.tsx`](https://github.com/brewed-ops/portfolio-template/blob/main/src/App.tsx) (Responsive shell), [`src/main.tsx`](https://github.com/brewed-ops/portfolio-template/blob/main/src/main.tsx) (Route table), [`src/components/Home.tsx`](https://github.com/brewed-ops/portfolio-template/blob/main/src/components/Home.tsx) (Home page), [`src/views/ProjectsView.tsx`](https://github.com/brewed-ops/portfolio-template/blob/main/src/views/ProjectsView.tsx) (Projects page)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_runtime["Routing and shell"]
  node_entry["Browser entry<br/>[main.tsx]"]
  node_router["Route table<br/>[main.tsx]"]
  node_shell["Responsive shell<br/>[App.tsx]"]
  node_mobile["Phone navigation<br/>[TabBar.tsx]"]
  node_canvas["Contour background<br/>[HeroCanvasV2.tsx]"]
  node_perf["Frame health<br/>[perf.ts]"]
  node_scroll["Smooth scrolling<br/>[useLenis.ts]"]
end

subgraph group_content["Portfolio pages"]
  node_home["Home page<br/>[Home.tsx]"]
  node_projects["Projects page<br/>[ProjectsView.tsx]"]
  node_services["Services page<br/>[ServicesView.tsx]"]
  node_showcase["Showcase page<br/>[ShowcaseView.tsx]"]
  node_testimonials["Testimonials"]
  node_about["About page<br/>[AboutGrid.tsx]"]
  node_contact["Contact page<br/>[ContactGrid.tsx]"]
  node_legal["Legal pages<br/>[Privacy.tsx]"]
  node_funnelview["3D carousel<br/>[Flagship.tsx]"]
end

subgraph group_contentdata["Portfolio content"]
  node_profiledata["Profile content<br/>[profile.ts]"]
  node_projectdata["Project content<br/>[projects.ts]"]
  node_stackdata["AI systems<br/>[ai-stack.ts]"]
  node_funneldata["Funnel listings<br/>[funnels.ts]"]
end

subgraph group_interaction["Visitor interactions"]
  node_contactflow["Contact handling<br/>[contact.ts]"]
end

node_visitor(("Visitor"))
node_emailapp["Email application"]

node_visitor -->|"opens site"| node_entry
node_entry -->|"renders routes"| node_router
node_router -->|"mounts shell"| node_shell
node_shell -->|"renders route"| node_home
node_shell -->|"renders route"| node_projects
node_shell -->|"renders route"| node_services
node_shell -->|"renders route"| node_showcase
node_shell -->|"renders route"| node_testimonials
node_shell -->|"renders route"| node_about
node_shell -->|"renders route"| node_contact
node_router -->|"routes legal pages"| node_legal
node_shell -->|"shows on phones"| node_mobile
node_shell -.->|"loads decoration"| node_canvas
node_shell -->|"measures frame health"| node_perf
node_shell -->|"initializes scrolling"| node_scroll
node_home -->|"reads profile"| node_profiledata
node_projects -->|"reads projects"| node_projectdata
node_projects -->|"shows systems"| node_stackdata
node_home -->|"shows systems"| node_stackdata
node_showcase -->|"shows carousel"| node_funnelview
node_funnelview -->|"reads listings"| node_funneldata
node_contact -->|"handles submission"| node_contactflow
node_contactflow -->|"opens email app"| node_emailapp

click node_entry "https://github.com/brewed-ops/portfolio-template/blob/main/src/main.tsx"
click node_router "https://github.com/brewed-ops/portfolio-template/blob/main/src/main.tsx"
click node_shell "https://github.com/brewed-ops/portfolio-template/blob/main/src/App.tsx"
click node_mobile "https://github.com/brewed-ops/portfolio-template/blob/main/src/components/TabBar.tsx"
click node_canvas "https://github.com/brewed-ops/portfolio-template/blob/main/src/components/HeroCanvasV2.tsx"
click node_perf "https://github.com/brewed-ops/portfolio-template/blob/main/src/lib/perf.ts"
click node_scroll "https://github.com/brewed-ops/portfolio-template/blob/main/src/hooks/useLenis.ts"
click node_home "https://github.com/brewed-ops/portfolio-template/blob/main/src/components/Home.tsx"
click node_projects "https://github.com/brewed-ops/portfolio-template/blob/main/src/views/ProjectsView.tsx"
click node_services "https://github.com/brewed-ops/portfolio-template/blob/main/src/views/ServicesView.tsx"
click node_showcase "https://github.com/brewed-ops/portfolio-template/blob/main/src/views/ShowcaseView.tsx"
click node_testimonials "https://github.com/brewed-ops/portfolio-template/blob/main/src/components/TestimonialsGrid.tsx"
click node_about "https://github.com/brewed-ops/portfolio-template/blob/main/src/components/AboutGrid.tsx"
click node_contact "https://github.com/brewed-ops/portfolio-template/blob/main/src/components/ContactGrid.tsx"
click node_legal "https://github.com/brewed-ops/portfolio-template/blob/main/src/components/Privacy.tsx"
click node_profiledata "https://github.com/brewed-ops/portfolio-template/blob/main/src/data/profile.ts"
click node_projectdata "https://github.com/brewed-ops/portfolio-template/blob/main/src/data/projects.ts"
click node_stackdata "https://github.com/brewed-ops/portfolio-template/blob/main/src/data/ai-stack.ts"
click node_funneldata "https://github.com/brewed-ops/portfolio-template/blob/main/src/data/funnels.ts"
click node_funnelview "https://github.com/brewed-ops/portfolio-template/blob/main/src/components/Flagship.tsx"
click node_contactflow "https://github.com/brewed-ops/portfolio-template/blob/main/src/lib/contact.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_router,node_shell,node_mobile,node_canvas,node_perf,node_scroll toneBlue
class node_home,node_projects,node_services,node_showcase,node_testimonials,node_about,node_contact,node_legal,node_funnelview toneAmber
class node_profiledata,node_projectdata,node_stackdata,node_funneldata toneMint
class node_contactflow toneRose
class node_visitor,node_emailapp toneIndigo
```

## Components

### Routing and shell

- [Browser entry](https://github.com/brewed-ops/portfolio-template/blob/main/src/main.tsx): `src/main.tsx`
- [Route table](https://github.com/brewed-ops/portfolio-template/blob/main/src/main.tsx): `src/main.tsx`
- [Responsive shell](https://github.com/brewed-ops/portfolio-template/blob/main/src/App.tsx): `src/App.tsx`
- [Phone navigation](https://github.com/brewed-ops/portfolio-template/blob/main/src/components/TabBar.tsx): `src/components/TabBar.tsx`
- [Contour background](https://github.com/brewed-ops/portfolio-template/blob/main/src/components/HeroCanvasV2.tsx): `src/components/HeroCanvasV2.tsx`
- [Frame health](https://github.com/brewed-ops/portfolio-template/blob/main/src/lib/perf.ts): `src/lib/perf.ts`
- [Smooth scrolling](https://github.com/brewed-ops/portfolio-template/blob/main/src/hooks/useLenis.ts): `src/hooks/useLenis.ts`

### Portfolio pages

- [Home page](https://github.com/brewed-ops/portfolio-template/blob/main/src/components/Home.tsx): `src/components/Home.tsx`
- [Projects page](https://github.com/brewed-ops/portfolio-template/blob/main/src/views/ProjectsView.tsx): `src/views/ProjectsView.tsx`
- [Services page](https://github.com/brewed-ops/portfolio-template/blob/main/src/views/ServicesView.tsx): `src/views/ServicesView.tsx`
- [Showcase page](https://github.com/brewed-ops/portfolio-template/blob/main/src/views/ShowcaseView.tsx): `src/views/ShowcaseView.tsx`
- [Testimonials](https://github.com/brewed-ops/portfolio-template/blob/main/src/components/TestimonialsGrid.tsx): `src/components/TestimonialsGrid.tsx`
- [About page](https://github.com/brewed-ops/portfolio-template/blob/main/src/components/AboutGrid.tsx): `src/components/AboutGrid.tsx`
- [Contact page](https://github.com/brewed-ops/portfolio-template/blob/main/src/components/ContactGrid.tsx): `src/components/ContactGrid.tsx`
- [Legal pages](https://github.com/brewed-ops/portfolio-template/blob/main/src/components/Privacy.tsx): `src/components/Privacy.tsx`
- [3D carousel](https://github.com/brewed-ops/portfolio-template/blob/main/src/components/Flagship.tsx): `src/components/Flagship.tsx`

### Portfolio content

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

### Visitor interactions

- [Contact handling](https://github.com/brewed-ops/portfolio-template/blob/main/src/lib/contact.ts): `src/lib/contact.ts`

### Other components

- **Visitor**
- **Email application**

## Connections

- Visitor → Browser entry: opens site
- Browser entry → Route table: renders routes
- Route table → Responsive shell: mounts shell
- Responsive shell → Home page: renders route
- Responsive shell → Projects page: renders route
- Responsive shell → Services page: renders route
- Responsive shell → Showcase page: renders route
- Responsive shell → Testimonials: renders route
- Responsive shell → About page: renders route
- Responsive shell → Contact page: renders route
- Route table → Legal pages: routes legal pages
- Responsive shell → Phone navigation: shows on phones
- Responsive shell → Contour background: loads decoration
- Responsive shell → Frame health: measures frame health
- Responsive shell → Smooth scrolling: initializes scrolling
- Home page → Profile content: reads profile
- Projects page → Project content: reads projects
- Projects page → AI systems: shows systems
- Home page → AI systems: shows systems
- Showcase page → 3D carousel: shows carousel
- 3D carousel → Funnel listings: reads listings
- Contact page → Contact handling: handles submission
- Contact handling → Email application: opens email app