# riadhbellala/signature-portfolio architecture

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

- Interactive diagram: https://gitdiagram.com/riadhbellala/signature-portfolio
- Repository: https://github.com/riadhbellala/signature-portfolio

## Overview

This is a portfolio website for Signature creative co., presenting selected work, project categories, services, clients and contact options. Visitors enter the homepage to explore featured projects and category-based work, then can open a project detail page or use contact links. The implementation is a Next.js App Router site with content held in TypeScript modules and reusable visual components. Connections below follow the README or the supplied source index and excerpts; unsampled modules are represented only where the tree supports them.

Main entry points: [`src/app/page.tsx`](https://github.com/riadhbellala/signature-portfolio/blob/main/src/app/page.tsx) (Home page), [`src/app/projets/[slug]/page.tsx`](https://github.com/riadhbellala/signature-portfolio/blob/main/src/app/projets/%5Bslug%5D/page.tsx) (Project detail), [`src/content/categories.ts`](https://github.com/riadhbellala/signature-portfolio/blob/main/src/content/categories.ts) (Project categories), [`src/components/site/Header.tsx`](https://github.com/riadhbellala/signature-portfolio/blob/main/src/components/site/Header.tsx) (Site navigation)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_routes["Pages and routing"]
  node_home["Home page<br/>[page.tsx]"]
  node_projectpage["Project detail<br/>[page.tsx]"]
  node_styleguide["Style guide<br/>[page.tsx]"]
end

subgraph group_content["Portfolio content"]
  node_projectdata["Project catalogue<br/>[projects.ts]"]
  node_categories["Project categories<br/>[categories.ts]"]
  node_servicesdata["Service definitions<br/>[services.ts]"]
  node_sitecopy["Site copy<br/>[site.ts]"]
  node_contactdata["Contact details<br/>[contact.ts]"]
end

subgraph group_showcase["Work and service displays"]
  node_homehero["Homepage hero<br/>[Hero.tsx]"]
  node_selectedwork["Selected work<br/>[WorkPuzzle.tsx]"]
  node_projectfolders["Project folders<br/>[FolderCabinet.tsx]"]
  node_categorygrid["Category projects<br/>[CategoryGrid.tsx]"]
  node_servicesflyer["Services flyer<br/>[ServicesFlyer.tsx]"]
  node_closing["Clients and contact<br/>[Closing.tsx]"]
  node_projectimage["Project imagery<br/>[ProjectImage.tsx]"]
end

subgraph group_presentation["Shared presentation"]
  node_header["Site navigation<br/>[Header.tsx]"]
  node_footer["Site footer<br/>[Footer.tsx]"]
  node_section["Section layout<br/>[Section.tsx]"]
  node_puzzle["Puzzle rendering<br/>[PuzzlePiece.tsx]"]
  node_geometry["Puzzle geometry<br/>[geometry.ts]"]
  node_motion["Motion effects<br/>[Reveal.tsx]"]
end

node_visitor(("Visitor"))

node_visitor -->|"opens"| node_home
node_visitor -->|"opens"| node_projectpage
node_visitor -.->|"opens"| node_styleguide
node_home -->|"renders"| node_homehero
node_home -->|"renders"| node_selectedwork
node_home -->|"renders"| node_projectfolders
node_home -->|"renders"| node_closing
node_home -->|"renders"| node_header
node_home -->|"renders"| node_footer
node_home -->|"uses"| node_section
node_home -->|"uses"| node_motion
node_home -->|"reads"| node_projectdata
node_home -->|"reads"| node_sitecopy
node_projectpage -->|"reads"| node_projectdata
node_projectpage -->|"reads"| node_categories
node_projectpage -->|"reads"| node_sitecopy
node_projectpage -->|"renders"| node_projectimage
node_projectpage -->|"renders"| node_header
node_projectpage -->|"renders"| node_footer
node_projectpage -->|"uses"| node_section
node_projectpage -->|"uses"| node_motion
node_styleguide -->|"uses"| node_section
node_styleguide -->|"uses"| node_motion
node_homehero -->|"reads"| node_sitecopy
node_selectedwork -->|"reads"| node_projectdata
node_selectedwork -->|"reads"| node_categories
node_selectedwork -->|"renders"| node_puzzle
node_projectfolders -->|"reads"| node_projectdata
node_projectfolders -->|"reads"| node_categories
node_projectfolders -->|"renders"| node_categorygrid
node_categorygrid -->|"reads"| node_projectdata
node_categorygrid -->|"reads"| node_categories
node_categorygrid -->|"renders"| node_projectimage
node_servicesflyer -->|"displays"| node_servicesdata
node_servicesflyer -->|"reads"| node_categories
node_closing -->|"reads"| node_contactdata
node_closing -->|"reads"| node_sitecopy
node_closing -->|"renders"| node_puzzle
node_header -->|"reads"| node_categories
node_header -->|"reads"| node_projectdata
node_header -->|"reads"| node_contactdata
node_header -->|"reads"| node_sitecopy
node_footer -->|"reads"| node_contactdata
node_footer -->|"reads"| node_sitecopy
node_section -->|"renders"| node_puzzle
node_puzzle -->|"calls"| node_geometry
node_projectimage -->|"reads"| node_categories

click node_home "https://github.com/riadhbellala/signature-portfolio/blob/main/src/app/page.tsx"
click node_projectpage "https://github.com/riadhbellala/signature-portfolio/blob/main/src/app/projets/%5Bslug%5D/page.tsx"
click node_styleguide "https://github.com/riadhbellala/signature-portfolio/blob/main/src/app/styleguide/page.tsx"
click node_projectdata "https://github.com/riadhbellala/signature-portfolio/blob/main/src/content/projects.ts"
click node_categories "https://github.com/riadhbellala/signature-portfolio/blob/main/src/content/categories.ts"
click node_servicesdata "https://github.com/riadhbellala/signature-portfolio/blob/main/src/content/services.ts"
click node_sitecopy "https://github.com/riadhbellala/signature-portfolio/blob/main/src/content/site.ts"
click node_contactdata "https://github.com/riadhbellala/signature-portfolio/blob/main/src/content/contact.ts"
click node_homehero "https://github.com/riadhbellala/signature-portfolio/blob/main/src/components/home/Hero.tsx"
click node_selectedwork "https://github.com/riadhbellala/signature-portfolio/blob/main/src/components/home/WorkPuzzle.tsx"
click node_projectfolders "https://github.com/riadhbellala/signature-portfolio/blob/main/src/components/home/FolderCabinet.tsx"
click node_categorygrid "https://github.com/riadhbellala/signature-portfolio/blob/main/src/components/home/CategoryGrid.tsx"
click node_servicesflyer "https://github.com/riadhbellala/signature-portfolio/blob/main/src/components/home/ServicesFlyer.tsx"
click node_closing "https://github.com/riadhbellala/signature-portfolio/blob/main/src/components/home/Closing.tsx"
click node_projectimage "https://github.com/riadhbellala/signature-portfolio/blob/main/src/components/project/ProjectImage.tsx"
click node_header "https://github.com/riadhbellala/signature-portfolio/blob/main/src/components/site/Header.tsx"
click node_footer "https://github.com/riadhbellala/signature-portfolio/blob/main/src/components/site/Footer.tsx"
click node_section "https://github.com/riadhbellala/signature-portfolio/blob/main/src/components/layout/Section.tsx"
click node_puzzle "https://github.com/riadhbellala/signature-portfolio/blob/main/src/components/puzzle/PuzzlePiece.tsx"
click node_geometry "https://github.com/riadhbellala/signature-portfolio/blob/main/src/components/puzzle/geometry.ts"
click node_motion "https://github.com/riadhbellala/signature-portfolio/blob/main/src/components/motion/Reveal.tsx"

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_projectpage,node_styleguide toneBlue
class node_projectdata,node_categories,node_servicesdata,node_sitecopy,node_contactdata toneAmber
class node_homehero,node_selectedwork,node_projectfolders,node_categorygrid,node_servicesflyer,node_closing,node_projectimage toneMint
class node_header,node_footer,node_section,node_puzzle,node_geometry,node_motion toneRose
class node_visitor toneIndigo
```

## Components

### Pages and routing

- [Home page](https://github.com/riadhbellala/signature-portfolio/blob/main/src/app/page.tsx): `src/app/page.tsx`
- [Project detail](https://github.com/riadhbellala/signature-portfolio/blob/main/src/app/projets/%5Bslug%5D/page.tsx): `src/app/projets/[slug]/page.tsx`
- [Style guide](https://github.com/riadhbellala/signature-portfolio/blob/main/src/app/styleguide/page.tsx): `src/app/styleguide/page.tsx`

### Portfolio content

- [Project catalogue](https://github.com/riadhbellala/signature-portfolio/blob/main/src/content/projects.ts): `src/content/projects.ts`
- [Project categories](https://github.com/riadhbellala/signature-portfolio/blob/main/src/content/categories.ts): `src/content/categories.ts`
- [Service definitions](https://github.com/riadhbellala/signature-portfolio/blob/main/src/content/services.ts): `src/content/services.ts`
- [Site copy](https://github.com/riadhbellala/signature-portfolio/blob/main/src/content/site.ts): `src/content/site.ts`
- [Contact details](https://github.com/riadhbellala/signature-portfolio/blob/main/src/content/contact.ts): `src/content/contact.ts`

### Work and service displays

- [Homepage hero](https://github.com/riadhbellala/signature-portfolio/blob/main/src/components/home/Hero.tsx): `src/components/home/Hero.tsx`
- [Selected work](https://github.com/riadhbellala/signature-portfolio/blob/main/src/components/home/WorkPuzzle.tsx): `src/components/home/WorkPuzzle.tsx`
- [Project folders](https://github.com/riadhbellala/signature-portfolio/blob/main/src/components/home/FolderCabinet.tsx): `src/components/home/FolderCabinet.tsx`
- [Category projects](https://github.com/riadhbellala/signature-portfolio/blob/main/src/components/home/CategoryGrid.tsx): `src/components/home/CategoryGrid.tsx`
- [Services flyer](https://github.com/riadhbellala/signature-portfolio/blob/main/src/components/home/ServicesFlyer.tsx): `src/components/home/ServicesFlyer.tsx`
- [Clients and contact](https://github.com/riadhbellala/signature-portfolio/blob/main/src/components/home/Closing.tsx): `src/components/home/Closing.tsx`
- [Project imagery](https://github.com/riadhbellala/signature-portfolio/blob/main/src/components/project/ProjectImage.tsx): `src/components/project/ProjectImage.tsx`

### Shared presentation

- [Site navigation](https://github.com/riadhbellala/signature-portfolio/blob/main/src/components/site/Header.tsx): `src/components/site/Header.tsx`
- [Site footer](https://github.com/riadhbellala/signature-portfolio/blob/main/src/components/site/Footer.tsx): `src/components/site/Footer.tsx`
- [Section layout](https://github.com/riadhbellala/signature-portfolio/blob/main/src/components/layout/Section.tsx): `src/components/layout/Section.tsx`
- [Puzzle rendering](https://github.com/riadhbellala/signature-portfolio/blob/main/src/components/puzzle/PuzzlePiece.tsx): `src/components/puzzle/PuzzlePiece.tsx`
- [Puzzle geometry](https://github.com/riadhbellala/signature-portfolio/blob/main/src/components/puzzle/geometry.ts): `src/components/puzzle/geometry.ts`
- [Motion effects](https://github.com/riadhbellala/signature-portfolio/blob/main/src/components/motion/Reveal.tsx): `src/components/motion/Reveal.tsx`

### Other components

- **Visitor**

## Connections

- Visitor → Home page: opens (evidence: `README.md`)
- Visitor → Project detail: opens (evidence: `src/app/projets/[slug]/page.tsx`)
- Visitor → Style guide: opens
- Home page → Homepage hero: renders (evidence: `src/app/page.tsx`)
- Home page → Selected work: renders (evidence: `src/app/page.tsx`)
- Home page → Project folders: renders (evidence: `src/app/page.tsx`)
- Home page → Clients and contact: renders (evidence: `src/app/page.tsx`)
- Home page → Site navigation: renders (evidence: `src/app/page.tsx`)
- Home page → Site footer: renders (evidence: `src/app/page.tsx`)
- Home page → Section layout: uses (evidence: `src/app/page.tsx`)
- Home page → Motion effects: uses (evidence: `src/app/page.tsx`)
- Home page → Project catalogue: reads (evidence: `src/app/page.tsx`)
- Home page → Site copy: reads (evidence: `src/app/page.tsx`)
- Project detail → Project catalogue: reads (evidence: `src/app/projets/[slug]/page.tsx`)
- Project detail → Project categories: reads (evidence: `src/app/projets/[slug]/page.tsx`)
- Project detail → Site copy: reads (evidence: `src/app/projets/[slug]/page.tsx`)
- Project detail → Project imagery: renders (evidence: `src/app/projets/[slug]/page.tsx`)
- Project detail → Site navigation: renders (evidence: `src/app/projets/[slug]/page.tsx`)
- Project detail → Site footer: renders (evidence: `src/app/projets/[slug]/page.tsx`)
- Project detail → Section layout: uses (evidence: `src/app/projets/[slug]/page.tsx`)
- Project detail → Motion effects: uses (evidence: `src/app/projets/[slug]/page.tsx`)
- Style guide → Section layout: uses (evidence: `src/app/styleguide/page.tsx`)
- Style guide → Motion effects: uses (evidence: `src/app/styleguide/page.tsx`)
- Homepage hero → Site copy: reads (evidence: `src/components/home/Hero.tsx`)
- Selected work → Project catalogue: reads (evidence: `src/components/home/WorkPuzzle.tsx`)
- Selected work → Project categories: reads (evidence: `src/components/home/WorkPuzzle.tsx`)
- Selected work → Puzzle rendering: renders (evidence: `src/components/home/WorkPuzzle.tsx`)
- Project folders → Project catalogue: reads (evidence: `src/components/home/FolderCabinet.tsx`)
- Project folders → Project categories: reads (evidence: `src/components/home/FolderCabinet.tsx`)
- Project folders → Category projects: renders (evidence: `src/components/home/FolderCabinet.tsx`)
- Category projects → Project catalogue: reads (evidence: `src/components/home/CategoryGrid.tsx`)
- Category projects → Project categories: reads (evidence: `src/components/home/CategoryGrid.tsx`)
- Category projects → Project imagery: renders (evidence: `src/components/home/CategoryGrid.tsx`)
- Services flyer → Service definitions: displays (evidence: `src/components/home/ServicesFlyer.tsx`)
- Services flyer → Project categories: reads (evidence: `src/components/home/ServicesFlyer.tsx`)
- Clients and contact → Contact details: reads (evidence: `src/components/home/Closing.tsx`)
- Clients and contact → Site copy: reads (evidence: `src/components/home/Closing.tsx`)
- Clients and contact → Puzzle rendering: renders (evidence: `src/components/home/Closing.tsx`)
- Site navigation → Project categories: reads (evidence: `src/components/site/Header.tsx`)
- Site navigation → Project catalogue: reads (evidence: `src/components/site/Header.tsx`)
- Site navigation → Contact details: reads (evidence: `src/components/site/Header.tsx`)
- Site navigation → Site copy: reads (evidence: `src/components/site/Header.tsx`)
- Site footer → Contact details: reads (evidence: `src/components/site/Footer.tsx`)
- Site footer → Site copy: reads (evidence: `src/components/site/Footer.tsx`)
- Section layout → Puzzle rendering: renders (evidence: `src/components/layout/Section.tsx`)
- Puzzle rendering → Puzzle geometry: calls (evidence: `src/components/puzzle/PuzzlePiece.tsx`)
- Project imagery → Project categories: reads (evidence: `src/components/project/ProjectImage.tsx`)