# fatimaklye/fatima-sierra-portfolio architecture

> Architecture diagram of the GitHub repository fatimaklye/fatima-sierra-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/fatimaklye/fatima-sierra-portfolio
- Repository: https://github.com/fatimaklye/fatima-sierra-portfolio

## Overview

This is a personal portfolio site: visitors explore the developer’s story, work, skills, experience and credentials, then can make contact or submit a recommendation. The main flow starts at the home page and branches into editorial pages and project case studies; contact and recommendation APIs handle submissions, while a GitHub API route supports activity content. Other product-facing features include an interactive music player and a word game. Edges reflect shown imports and calls; unsampled component internals and external API providers are not inferred.

Main entry points: [`components/home/HeroSection.tsx`](https://github.com/fatimaklye/fatima-sierra-portfolio/blob/main/components/home/HeroSection.tsx) (Home sections), [`app/page.tsx`](https://github.com/fatimaklye/fatima-sierra-portfolio/blob/main/app/page.tsx) (Home page), [`app/skills/page.tsx`](https://github.com/fatimaklye/fatima-sierra-portfolio/blob/main/app/skills/page.tsx) (Skills page), [`app/contact/page.tsx`](https://github.com/fatimaklye/fatima-sierra-portfolio/blob/main/app/contact/page.tsx) (Contact page)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_site["Portfolio pages"]
  node_home["Home page<br/>[page.tsx]"]
  node_home_sections["Home sections<br/>[HeroSection.tsx]"]
  node_about["About story<br/>[AboutStory.tsx]"]
  node_experience["Experience<br/>[page.tsx]"]
  node_credentials["Credentials<br/>[page.tsx]"]
end

subgraph group_work["Work and skills"]
  node_projects["Projects index<br/>[page.tsx]"]
  node_project_chapters["Project chapters"]
  node_case_study["Project case study<br/>[page.tsx]"]
  node_project_data["Project details"]
  node_skills["Skills page<br/>[page.tsx]"]
  node_skills_data["Skills data<br/>[skillsData.ts]"]
end

subgraph group_engagement["Visitor engagement"]
  node_contact_page["Contact page<br/>[page.tsx]"]
  node_contact_panel["Contact panel<br/>[ContactPanel.tsx]"]
  node_contact_form["Contact form<br/>[ContactForm.tsx]"]
  node_contact_api["Contact endpoint<br/>[route.ts]"]
  node_recommendations["Recommendations"]
  node_recommendation_form["Recommendation form"]
  node_recommendation_api["Recommendation endpoint<br/>[route.ts]"]
  node_github_activity["GitHub activity<br/>[GithubActivity.tsx]"]
  node_github_api["GitHub endpoint<br/>[route.ts]"]
  node_jukebox["Music player<br/>[Jukebox.tsx]"]
  node_music_logic["Music playback<br/>[music.ts]"]
  node_music_library["Music library<br/>[musicLibrary.ts]"]
  node_word_game["Word game<br/>[WordBreakGame.tsx]"]
  node_word_logic["Word lists<br/>[words.ts]"]
end

subgraph group_shared["Shared runtime"]
  node_motion["Editorial motion"]
  node_site_metadata["Site metadata<br/>[site.ts]"]
end

node_visitor(("Visitor"))
node_visitor_contact(("Contact visitor"))
node_github_service["GitHub service"]

node_visitor -->|"opens"| node_home
node_home -->|"renders"| node_home_sections
node_home_sections -->|"renders"| node_about
node_home_sections -->|"renders"| node_recommendations
node_home_sections -->|"renders"| node_github_activity
node_visitor -->|"opens"| node_experience
node_visitor -->|"opens"| node_credentials
node_visitor -->|"opens"| node_projects
node_projects -->|"renders"| node_project_chapters
node_visitor -->|"opens"| node_case_study
node_case_study -->|"reads"| node_project_data
node_visitor -->|"opens"| node_skills
node_skills -->|"reads"| node_skills_data
node_skills_data -->|"reads"| node_project_data
node_visitor -->|"opens"| node_contact_page
node_contact_page -->|"renders"| node_contact_panel
node_contact_panel -->|"renders"| node_contact_form
node_contact_form -.->|"submits"| node_contact_api
node_visitor -->|"submits"| node_recommendation_form
node_recommendation_form -.->|"submits"| node_recommendation_api
node_github_activity -.->|"loads"| node_github_api
node_github_api -.->|"requests"| node_github_service
node_visitor -->|"uses"| node_jukebox
node_jukebox -->|"delegates to"| node_music_logic
node_music_logic -->|"reads"| node_music_library
node_visitor -.->|"plays"| node_word_game
node_word_game -.->|"reads"| node_word_logic
node_experience -->|"wraps"| node_motion
node_skills -->|"wraps"| node_motion
node_home -->|"sets metadata"| node_site_metadata
node_contact_page -->|"sets metadata"| node_site_metadata

click node_home "https://github.com/fatimaklye/fatima-sierra-portfolio/blob/main/app/page.tsx"
click node_home_sections "https://github.com/fatimaklye/fatima-sierra-portfolio/blob/main/components/home/HeroSection.tsx"
click node_about "https://github.com/fatimaklye/fatima-sierra-portfolio/blob/main/components/home/about/AboutStory.tsx"
click node_experience "https://github.com/fatimaklye/fatima-sierra-portfolio/blob/main/app/experience/page.tsx"
click node_credentials "https://github.com/fatimaklye/fatima-sierra-portfolio/blob/main/app/certifications/page.tsx"
click node_projects "https://github.com/fatimaklye/fatima-sierra-portfolio/blob/main/app/projects/page.tsx"
click node_project_chapters "https://github.com/fatimaklye/fatima-sierra-portfolio/blob/main/components/projects/ProjectChapters.tsx"
click node_case_study "https://github.com/fatimaklye/fatima-sierra-portfolio/blob/main/app/projects/%5Bslug%5D/page.tsx"
click node_project_data "https://github.com/fatimaklye/fatima-sierra-portfolio/blob/main/data/projectDetailsData.ts"
click node_skills "https://github.com/fatimaklye/fatima-sierra-portfolio/blob/main/app/skills/page.tsx"
click node_skills_data "https://github.com/fatimaklye/fatima-sierra-portfolio/blob/main/components/skills/skillsData.ts"
click node_contact_page "https://github.com/fatimaklye/fatima-sierra-portfolio/blob/main/app/contact/page.tsx"
click node_contact_panel "https://github.com/fatimaklye/fatima-sierra-portfolio/blob/main/components/contact/ContactPanel.tsx"
click node_contact_form "https://github.com/fatimaklye/fatima-sierra-portfolio/blob/main/components/contact/ContactForm.tsx"
click node_contact_api "https://github.com/fatimaklye/fatima-sierra-portfolio/blob/main/app/api/contact/route.ts"
click node_recommendations "https://github.com/fatimaklye/fatima-sierra-portfolio/blob/main/components/home/Recommendations.tsx"
click node_recommendation_form "https://github.com/fatimaklye/fatima-sierra-portfolio/blob/main/components/home/RecommendationForm.tsx"
click node_recommendation_api "https://github.com/fatimaklye/fatima-sierra-portfolio/blob/main/app/api/recommendations/route.ts"
click node_github_activity "https://github.com/fatimaklye/fatima-sierra-portfolio/blob/main/components/home/GithubActivity.tsx"
click node_github_api "https://github.com/fatimaklye/fatima-sierra-portfolio/blob/main/app/api/github/route.ts"
click node_jukebox "https://github.com/fatimaklye/fatima-sierra-portfolio/blob/main/components/music/Jukebox.tsx"
click node_music_logic "https://github.com/fatimaklye/fatima-sierra-portfolio/blob/main/lib/music.ts"
click node_music_library "https://github.com/fatimaklye/fatima-sierra-portfolio/blob/main/lib/musicLibrary.ts"
click node_word_game "https://github.com/fatimaklye/fatima-sierra-portfolio/blob/main/components/wordbreak/WordBreakGame.tsx"
click node_word_logic "https://github.com/fatimaklye/fatima-sierra-portfolio/blob/main/components/wordbreak/words.ts"
click node_motion "https://github.com/fatimaklye/fatima-sierra-portfolio/blob/main/components/motion/EditorialMotion.tsx"
click node_site_metadata "https://github.com/fatimaklye/fatima-sierra-portfolio/blob/main/lib/site.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_home_sections,node_about,node_experience,node_credentials toneBlue
class node_projects,node_project_chapters,node_case_study,node_project_data,node_skills,node_skills_data toneAmber
class node_contact_page,node_contact_panel,node_contact_form,node_contact_api,node_recommendations,node_recommendation_form,node_recommendation_api,node_github_activity,node_github_api,node_jukebox,node_music_logic,node_music_library,node_word_game,node_word_logic toneMint
class node_motion,node_site_metadata toneRose
class node_visitor,node_visitor_contact,node_github_service toneIndigo
```

## Components

### Portfolio pages

- [Home page](https://github.com/fatimaklye/fatima-sierra-portfolio/blob/main/app/page.tsx): `app/page.tsx`
- [Home sections](https://github.com/fatimaklye/fatima-sierra-portfolio/blob/main/components/home/HeroSection.tsx): `components/home/HeroSection.tsx`
- [About story](https://github.com/fatimaklye/fatima-sierra-portfolio/blob/main/components/home/about/AboutStory.tsx): `components/home/about/AboutStory.tsx`
- [Experience](https://github.com/fatimaklye/fatima-sierra-portfolio/blob/main/app/experience/page.tsx): `app/experience/page.tsx`
- [Credentials](https://github.com/fatimaklye/fatima-sierra-portfolio/blob/main/app/certifications/page.tsx): `app/certifications/page.tsx`

### Work and skills

- [Projects index](https://github.com/fatimaklye/fatima-sierra-portfolio/blob/main/app/projects/page.tsx): `app/projects/page.tsx`
- [Project chapters](https://github.com/fatimaklye/fatima-sierra-portfolio/blob/main/components/projects/ProjectChapters.tsx): `components/projects/ProjectChapters.tsx`
- [Project case study](https://github.com/fatimaklye/fatima-sierra-portfolio/blob/main/app/projects/%5Bslug%5D/page.tsx): `app/projects/[slug]/page.tsx`
- [Project details](https://github.com/fatimaklye/fatima-sierra-portfolio/blob/main/data/projectDetailsData.ts): `data/projectDetailsData.ts`
- [Skills page](https://github.com/fatimaklye/fatima-sierra-portfolio/blob/main/app/skills/page.tsx): `app/skills/page.tsx`
- [Skills data](https://github.com/fatimaklye/fatima-sierra-portfolio/blob/main/components/skills/skillsData.ts): `components/skills/skillsData.ts`

### Visitor engagement

- [Contact page](https://github.com/fatimaklye/fatima-sierra-portfolio/blob/main/app/contact/page.tsx): `app/contact/page.tsx`
- [Contact panel](https://github.com/fatimaklye/fatima-sierra-portfolio/blob/main/components/contact/ContactPanel.tsx): `components/contact/ContactPanel.tsx`
- [Contact form](https://github.com/fatimaklye/fatima-sierra-portfolio/blob/main/components/contact/ContactForm.tsx): `components/contact/ContactForm.tsx`
- [Contact endpoint](https://github.com/fatimaklye/fatima-sierra-portfolio/blob/main/app/api/contact/route.ts): `app/api/contact/route.ts`
- [Recommendations](https://github.com/fatimaklye/fatima-sierra-portfolio/blob/main/components/home/Recommendations.tsx): `components/home/Recommendations.tsx`
- [Recommendation form](https://github.com/fatimaklye/fatima-sierra-portfolio/blob/main/components/home/RecommendationForm.tsx): `components/home/RecommendationForm.tsx`
- [Recommendation endpoint](https://github.com/fatimaklye/fatima-sierra-portfolio/blob/main/app/api/recommendations/route.ts): `app/api/recommendations/route.ts`
- [GitHub activity](https://github.com/fatimaklye/fatima-sierra-portfolio/blob/main/components/home/GithubActivity.tsx): `components/home/GithubActivity.tsx`
- [GitHub endpoint](https://github.com/fatimaklye/fatima-sierra-portfolio/blob/main/app/api/github/route.ts): `app/api/github/route.ts`
- [Music player](https://github.com/fatimaklye/fatima-sierra-portfolio/blob/main/components/music/Jukebox.tsx): `components/music/Jukebox.tsx`
- [Music playback](https://github.com/fatimaklye/fatima-sierra-portfolio/blob/main/lib/music.ts): `lib/music.ts`
- [Music library](https://github.com/fatimaklye/fatima-sierra-portfolio/blob/main/lib/musicLibrary.ts): `lib/musicLibrary.ts`
- [Word game](https://github.com/fatimaklye/fatima-sierra-portfolio/blob/main/components/wordbreak/WordBreakGame.tsx): `components/wordbreak/WordBreakGame.tsx`
- [Word lists](https://github.com/fatimaklye/fatima-sierra-portfolio/blob/main/components/wordbreak/words.ts): `components/wordbreak/words.ts`

### Shared runtime

- [Editorial motion](https://github.com/fatimaklye/fatima-sierra-portfolio/blob/main/components/motion/EditorialMotion.tsx): `components/motion/EditorialMotion.tsx`
- [Site metadata](https://github.com/fatimaklye/fatima-sierra-portfolio/blob/main/lib/site.ts): `lib/site.ts`

### Other components

- **Visitor**
- **Contact visitor**
- **GitHub service**

## Connections

- Visitor → Home page: opens (evidence: `app/page.tsx`)
- Home page → Home sections: renders (evidence: `app/page.tsx`)
- Home sections → About story: renders (evidence: `components/home/HeroSection.tsx`)
- Home sections → Recommendations: renders (evidence: `components/home/HeroSection.tsx`)
- Home sections → GitHub activity: renders (evidence: `components/home/HeroSection.tsx`)
- Visitor → Experience: opens (evidence: `app/experience/page.tsx`)
- Visitor → Credentials: opens (evidence: `app/certifications/page.tsx`)
- Visitor → Projects index: opens (evidence: `app/projects/page.tsx`)
- Projects index → Project chapters: renders (evidence: `app/projects/page.tsx`)
- Visitor → Project case study: opens (evidence: `app/projects/[slug]/page.tsx`)
- Project case study → Project details: reads (evidence: `app/projects/[slug]/page.tsx`)
- Visitor → Skills page: opens (evidence: `app/skills/page.tsx`)
- Skills page → Skills data: reads (evidence: `app/skills/page.tsx`)
- Skills data → Project details: reads (evidence: `components/skills/skillsData.ts`)
- Visitor → Contact page: opens (evidence: `app/contact/page.tsx`)
- Contact page → Contact panel: renders (evidence: `app/contact/page.tsx`)
- Contact panel → Contact form: renders (evidence: `components/contact/ContactPanel.tsx`)
- Contact form → Contact endpoint: submits
- Visitor → Recommendation form: submits
- Recommendation form → Recommendation endpoint: submits
- GitHub activity → GitHub endpoint: loads
- GitHub endpoint → GitHub service: requests
- Visitor → Music player: uses (evidence: `components/music/Jukebox.tsx`)
- Music player → Music playback: delegates to (evidence: `components/music/Jukebox.tsx`)
- Music playback → Music library: reads (evidence: `lib/music.ts`)
- Visitor → Word game: plays
- Word game → Word lists: reads
- Experience → Editorial motion: wraps (evidence: `app/experience/page.tsx`)
- Skills page → Editorial motion: wraps (evidence: `app/skills/page.tsx`)
- Home page → Site metadata: sets metadata (evidence: `app/page.tsx`)
- Contact page → Site metadata: sets metadata (evidence: `app/contact/page.tsx`)