# ajeanesilva/portif-lio architecture

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

- Interactive diagram: https://gitdiagram.com/ajeanesilva/portif-lio
- Repository: https://github.com/ajeanesilva/portif-lio

## Overview

This is a single-page Angular portfolio. A visitor loads the application and views its profile, biography, skills and project highlights, certificates, values, and contact information; the page also provides navigation and visual effects. The sampled root component imports and composes these sections. README content is Angular CLI boilerplate, so product capabilities are inferred from the source tree and sampled components; unsampled templates and components limit certainty about detailed interactions.

Main entry points: [`src/app/app.component.ts`](https://github.com/ajeanesilva/portif-lio/blob/main/src/app/app.component.ts) (Portfolio page), [`src/app/pages/shared/directives/reveal-on-scroll.directive.ts`](https://github.com/ajeanesilva/portif-lio/blob/main/src/app/pages/shared/directives/reveal-on-scroll.directive.ts) (Scroll reveal), [`src/main.ts`](https://github.com/ajeanesilva/portif-lio/blob/main/src/main.ts) (Angular bootstrap), [`src/app/pages/home/home.component.ts`](https://github.com/ajeanesilva/portif-lio/blob/main/src/app/pages/home/home.component.ts) (Profile introduction)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_shell["Application shell"]
  node_bootstrap["Angular bootstrap<br/>[main.ts]"]
  node_root["Portfolio page<br/>[app.component.ts]"]
  node_header["Navigation header"]
  node_footer["Page footer"]
end

subgraph group_content["Portfolio content"]
  node_home["Profile introduction<br/>[home.component.ts]"]
  node_about["About profile<br/>[about.component.ts]"]
  node_skills["Skills highlights"]
  node_certificates["Certificates"]
  node_values["Professional values"]
  node_contact["Contact information"]
end

subgraph group_visuals["Visual interactions"]
  node_reveal["Scroll reveal"]
  node_shader["Animated background"]
end

node_visitor(("Visitor"))

node_visitor -->|"opens portfolio"| node_bootstrap
node_bootstrap -->|"bootstraps"| node_root
node_root -->|"renders"| node_header
node_root -->|"renders"| node_footer
node_root -->|"renders"| node_home
node_root -->|"renders"| node_about
node_root -->|"renders"| node_skills
node_root -->|"renders"| node_certificates
node_root -->|"renders"| node_values
node_root -->|"renders"| node_contact
node_root -->|"renders"| node_shader
node_home -->|"uses directive"| node_reveal
node_skills -->|"uses directive"| node_reveal
node_certificates -->|"uses directive"| node_reveal
node_values -->|"uses directive"| node_reveal

click node_bootstrap "https://github.com/ajeanesilva/portif-lio/blob/main/src/main.ts"
click node_root "https://github.com/ajeanesilva/portif-lio/blob/main/src/app/app.component.ts"
click node_header "https://github.com/ajeanesilva/portif-lio/blob/main/src/app/header/header.component.ts"
click node_footer "https://github.com/ajeanesilva/portif-lio/blob/main/src/app/footer/footer.component.ts"
click node_home "https://github.com/ajeanesilva/portif-lio/blob/main/src/app/pages/home/home.component.ts"
click node_about "https://github.com/ajeanesilva/portif-lio/blob/main/src/app/pages/about/about.component.ts"
click node_skills "https://github.com/ajeanesilva/portif-lio/blob/main/src/app/pages/skills/skills.component.ts"
click node_certificates "https://github.com/ajeanesilva/portif-lio/blob/main/src/app/pages/certificados/certificados.component.ts"
click node_values "https://github.com/ajeanesilva/portif-lio/blob/main/src/app/pages/values/values.component.ts"
click node_contact "https://github.com/ajeanesilva/portif-lio/blob/main/src/app/pages/contact/contact.component.ts"
click node_reveal "https://github.com/ajeanesilva/portif-lio/blob/main/src/app/pages/shared/directives/reveal-on-scroll.directive.ts"
click node_shader "https://github.com/ajeanesilva/portif-lio/blob/main/src/app/pages/shared/background-shader/background-shader.component.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_bootstrap,node_root,node_header,node_footer toneBlue
class node_home,node_about,node_skills,node_certificates,node_values,node_contact toneAmber
class node_reveal,node_shader toneMint
class node_visitor toneIndigo
```

## Components

### Application shell

- [Angular bootstrap](https://github.com/ajeanesilva/portif-lio/blob/main/src/main.ts): `src/main.ts`
- [Portfolio page](https://github.com/ajeanesilva/portif-lio/blob/main/src/app/app.component.ts): `src/app/app.component.ts`
- [Navigation header](https://github.com/ajeanesilva/portif-lio/blob/main/src/app/header/header.component.ts): `src/app/header/header.component.ts`
- [Page footer](https://github.com/ajeanesilva/portif-lio/blob/main/src/app/footer/footer.component.ts): `src/app/footer/footer.component.ts`

### Portfolio content

- [Profile introduction](https://github.com/ajeanesilva/portif-lio/blob/main/src/app/pages/home/home.component.ts): `src/app/pages/home/home.component.ts`
- [About profile](https://github.com/ajeanesilva/portif-lio/blob/main/src/app/pages/about/about.component.ts): `src/app/pages/about/about.component.ts`
- [Skills highlights](https://github.com/ajeanesilva/portif-lio/blob/main/src/app/pages/skills/skills.component.ts): `src/app/pages/skills/skills.component.ts`
- [Certificates](https://github.com/ajeanesilva/portif-lio/blob/main/src/app/pages/certificados/certificados.component.ts): `src/app/pages/certificados/certificados.component.ts`
- [Professional values](https://github.com/ajeanesilva/portif-lio/blob/main/src/app/pages/values/values.component.ts): `src/app/pages/values/values.component.ts`
- [Contact information](https://github.com/ajeanesilva/portif-lio/blob/main/src/app/pages/contact/contact.component.ts): `src/app/pages/contact/contact.component.ts`

### Visual interactions

- [Scroll reveal](https://github.com/ajeanesilva/portif-lio/blob/main/src/app/pages/shared/directives/reveal-on-scroll.directive.ts): `src/app/pages/shared/directives/reveal-on-scroll.directive.ts`
- [Animated background](https://github.com/ajeanesilva/portif-lio/blob/main/src/app/pages/shared/background-shader/background-shader.component.ts): `src/app/pages/shared/background-shader/background-shader.component.ts`

### Other components

- **Visitor**

## Connections

- Visitor → Angular bootstrap: opens portfolio
- Angular bootstrap → Portfolio page: bootstraps
- Portfolio page → Navigation header: renders
- Portfolio page → Page footer: renders
- Portfolio page → Profile introduction: renders
- Portfolio page → About profile: renders
- Portfolio page → Skills highlights: renders
- Portfolio page → Certificates: renders
- Portfolio page → Professional values: renders
- Portfolio page → Contact information: renders
- Portfolio page → Animated background: renders
- Profile introduction → Scroll reveal: uses directive
- Skills highlights → Scroll reveal: uses directive
- Certificates → Scroll reveal: uses directive
- Professional values → Scroll reveal: uses directive