# hamidou-ctr/portfolio1 architecture

> Architecture diagram of the GitHub repository hamidou-ctr/portfolio1, 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/hamidou-ctr/portfolio1
- Repository: https://github.com/hamidou-ctr/portfolio1

## Overview

This is an Angular personal portfolio. Visitors browse a one-page profile—intro, about, skills, projects, references—and can submit a contact form; navigation also opens standalone legal pages. The app root assembles the page and handles special-page display and scroll behavior. Language switching and translation loading, scroll-to-reference signaling, and project-detail rendering are distinct supporting capabilities. The README documents AOS animations and Formspree; source excerpts show the form request and AOS initialization. The graph omits unverified implementation details for unsampled templates and styles.

Main entry points: [`src/app/app.component.ts`](https://github.com/hamidou-ctr/portfolio1/blob/main/src/app/app.component.ts) (Page shell), [`src/app/header/header.component.ts`](https://github.com/hamidou-ctr/portfolio1/blob/main/src/app/header/header.component.ts) (Navigation), [`src/app/app.config.ts`](https://github.com/hamidou-ctr/portfolio1/blob/main/src/app/app.config.ts) (App configuration), [`src/app/app.routes.ts`](https://github.com/hamidou-ctr/portfolio1/blob/main/src/app/app.routes.ts) (Legal routes)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_presentation["Portfolio pages"]
  node_header["Navigation"]
  node_home["Hero section"]
  node_about["About section"]
  node_skills["Skills section"]
  node_portfolio["Project list"]
  node_project["Project details"]
  node_references["References"]
  node_contact["Contact form"]
  node_footer["Footer"]
  node_privacy["Privacy page"]
  node_legal["Legal notice"]
end

subgraph group_runtime["Application runtime"]
  node_bootstrap["Bootstrap<br/>[main.ts]"]
  node_root["Page shell<br/>[app.component.ts]"]
  node_config["App configuration<br/>[app.config.ts]"]
  node_routes["Legal routes<br/>[app.routes.ts]"]
end

subgraph group_support["Shared capabilities"]
  node_scroll["Scroll utility<br/>[scroll.util.ts]"]
  node_scrollservice["Scroll service"]
  node_translations["Translation assets"]
end

node_visitor(("Visitor"))
node_formspree["Formspree"]
node_aos["AOS animations"]

node_visitor -->|"browses"| node_root
node_bootstrap -->|"bootstraps"| node_root
node_bootstrap -->|"configures with"| node_config
node_root -->|"renders"| node_header
node_root -->|"renders"| node_home
node_root -->|"renders"| node_about
node_root -->|"renders"| node_skills
node_root -->|"renders"| node_portfolio
node_root -->|"renders"| node_references
node_root -->|"renders"| node_contact
node_root -->|"renders"| node_footer
node_portfolio -->|"renders projects"| node_project
node_header -->|"scrolls to section"| node_scroll
node_root -->|"scrolls to query target"| node_scroll
node_config -->|"registers routes"| node_routes
node_routes -->|"lazy loads"| node_privacy
node_routes -->|"lazy loads"| node_legal
node_references -->|"subscribes to"| node_scrollservice
node_header -->|"selects language"| node_translations
node_config -->|"loads translations"| node_translations
node_contact -->|"submits form"| node_formspree
node_root -->|"initializes animations"| node_aos

click node_bootstrap "https://github.com/hamidou-ctr/portfolio1/blob/main/src/main.ts"
click node_root "https://github.com/hamidou-ctr/portfolio1/blob/main/src/app/app.component.ts"
click node_config "https://github.com/hamidou-ctr/portfolio1/blob/main/src/app/app.config.ts"
click node_routes "https://github.com/hamidou-ctr/portfolio1/blob/main/src/app/app.routes.ts"
click node_header "https://github.com/hamidou-ctr/portfolio1/blob/main/src/app/header/header.component.ts"
click node_home "https://github.com/hamidou-ctr/portfolio1/blob/main/src/app/home-page/home-page.component.ts"
click node_about "https://github.com/hamidou-ctr/portfolio1/blob/main/src/app/about-me/about-me.component.ts"
click node_skills "https://github.com/hamidou-ctr/portfolio1/blob/main/src/app/my-skills/my-skills.component.ts"
click node_portfolio "https://github.com/hamidou-ctr/portfolio1/blob/main/src/app/portfolio/portfolio.component.ts"
click node_project "https://github.com/hamidou-ctr/portfolio1/blob/main/src/app/portfolio/project/project.component.ts"
click node_references "https://github.com/hamidou-ctr/portfolio1/blob/main/src/app/references/references.component.ts"
click node_contact "https://github.com/hamidou-ctr/portfolio1/blob/main/src/app/contact-me/contact-me.component.ts"
click node_footer "https://github.com/hamidou-ctr/portfolio1/blob/main/src/app/footer/footer.component.ts"
click node_privacy "https://github.com/hamidou-ctr/portfolio1/blob/main/src/app/privacy-policy/privacy-policy.component.ts"
click node_legal "https://github.com/hamidou-ctr/portfolio1/blob/main/src/app/legal-notice/legal-notice.component.ts"
click node_scroll "https://github.com/hamidou-ctr/portfolio1/blob/main/src/app/scroll.util.ts"
click node_scrollservice "https://github.com/hamidou-ctr/portfolio1/blob/main/src/app/service/service.component.ts"
click node_translations "https://github.com/hamidou-ctr/portfolio1/tree/main/src/assets"

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_header,node_home,node_about,node_skills,node_portfolio,node_project,node_references,node_contact,node_footer,node_privacy,node_legal toneBlue
class node_bootstrap,node_root,node_config,node_routes toneAmber
class node_scroll,node_scrollservice,node_translations toneMint
class node_visitor,node_formspree,node_aos toneIndigo
```

## Components

### Portfolio pages

- [Navigation](https://github.com/hamidou-ctr/portfolio1/blob/main/src/app/header/header.component.ts): `src/app/header/header.component.ts`
- [Hero section](https://github.com/hamidou-ctr/portfolio1/blob/main/src/app/home-page/home-page.component.ts): `src/app/home-page/home-page.component.ts`
- [About section](https://github.com/hamidou-ctr/portfolio1/blob/main/src/app/about-me/about-me.component.ts): `src/app/about-me/about-me.component.ts`
- [Skills section](https://github.com/hamidou-ctr/portfolio1/blob/main/src/app/my-skills/my-skills.component.ts): `src/app/my-skills/my-skills.component.ts`
- [Project list](https://github.com/hamidou-ctr/portfolio1/blob/main/src/app/portfolio/portfolio.component.ts): `src/app/portfolio/portfolio.component.ts`
- [Project details](https://github.com/hamidou-ctr/portfolio1/blob/main/src/app/portfolio/project/project.component.ts): `src/app/portfolio/project/project.component.ts`
- [References](https://github.com/hamidou-ctr/portfolio1/blob/main/src/app/references/references.component.ts): `src/app/references/references.component.ts`
- [Contact form](https://github.com/hamidou-ctr/portfolio1/blob/main/src/app/contact-me/contact-me.component.ts): `src/app/contact-me/contact-me.component.ts`
- [Footer](https://github.com/hamidou-ctr/portfolio1/blob/main/src/app/footer/footer.component.ts): `src/app/footer/footer.component.ts`
- [Privacy page](https://github.com/hamidou-ctr/portfolio1/blob/main/src/app/privacy-policy/privacy-policy.component.ts): `src/app/privacy-policy/privacy-policy.component.ts`
- [Legal notice](https://github.com/hamidou-ctr/portfolio1/blob/main/src/app/legal-notice/legal-notice.component.ts): `src/app/legal-notice/legal-notice.component.ts`

### Application runtime

- [Bootstrap](https://github.com/hamidou-ctr/portfolio1/blob/main/src/main.ts): `src/main.ts`
- [Page shell](https://github.com/hamidou-ctr/portfolio1/blob/main/src/app/app.component.ts): `src/app/app.component.ts`
- [App configuration](https://github.com/hamidou-ctr/portfolio1/blob/main/src/app/app.config.ts): `src/app/app.config.ts`
- [Legal routes](https://github.com/hamidou-ctr/portfolio1/blob/main/src/app/app.routes.ts): `src/app/app.routes.ts`

### Shared capabilities

- [Scroll utility](https://github.com/hamidou-ctr/portfolio1/blob/main/src/app/scroll.util.ts): `src/app/scroll.util.ts`
- [Scroll service](https://github.com/hamidou-ctr/portfolio1/blob/main/src/app/service/service.component.ts): `src/app/service/service.component.ts`
- [Translation assets](https://github.com/hamidou-ctr/portfolio1/tree/main/src/assets): `src/assets`

### Other components

- **Visitor**
- **Formspree**
- **AOS animations**

## Connections

- Visitor → Page shell: browses (evidence: `README.md`)
- Bootstrap → Page shell: bootstraps (evidence: `src/main.ts`)
- Bootstrap → App configuration: configures with (evidence: `src/main.ts`)
- Page shell → Navigation: renders (evidence: `src/app/app.component.ts`)
- Page shell → Hero section: renders (evidence: `src/app/app.component.ts`)
- Page shell → About section: renders (evidence: `src/app/app.component.ts`)
- Page shell → Skills section: renders (evidence: `src/app/app.component.ts`)
- Page shell → Project list: renders (evidence: `src/app/app.component.ts`)
- Page shell → References: renders (evidence: `src/app/app.component.ts`)
- Page shell → Contact form: renders (evidence: `src/app/app.component.ts`)
- Page shell → Footer: renders (evidence: `src/app/app.component.ts`)
- Project list → Project details: renders projects (evidence: `src/app/portfolio/portfolio.component.ts`)
- Navigation → Scroll utility: scrolls to section (evidence: `src/app/header/header.component.ts`)
- Page shell → Scroll utility: scrolls to query target (evidence: `src/app/app.component.ts`)
- App configuration → Legal routes: registers routes (evidence: `src/app/app.config.ts`)
- Legal routes → Privacy page: lazy loads (evidence: `src/app/app.routes.ts`)
- Legal routes → Legal notice: lazy loads (evidence: `src/app/app.routes.ts`)
- References → Scroll service: subscribes to (evidence: `src/app/references/references.component.ts`)
- Navigation → Translation assets: selects language (evidence: `README.md`)
- App configuration → Translation assets: loads translations (evidence: `src/app/app.config.ts`)
- Contact form → Formspree: submits form (evidence: `src/app/contact-me/contact-me.component.ts`)
- Page shell → AOS animations: initializes animations (evidence: `src/app/app.component.ts`)