# faja190/faja architecture

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

- Interactive diagram: https://gitdiagram.com/faja190/faja
- Repository: https://github.com/faja190/faja

## Overview

F.aja is a React portfolio that introduces its owner, presents skills and project work, and provides resume and contact links. Visitors enter through the shared navigation and home page, browse project cards, and can open the Books Manager for live book CRUD against an external REST API. Other project and About routes currently display a coming-soon page. The README also identifies UX design as a product concern. Wiring is based on the sampled components; backend implementation is not present in this repository.

Main entry points: [`src/App.jsx`](https://github.com/faja190/faja/blob/main/src/App.jsx) (App router), [`src/Logic/Nav/Navbar.jsx`](https://github.com/faja190/faja/blob/main/src/Logic/Nav/Navbar.jsx) (Navigation), [`src/Logic/Projects/Projects.jsx`](https://github.com/faja190/faja/blob/main/src/Logic/Projects/Projects.jsx) (Project carousel), [`src/Logic/Projects/BooksManager.jsx`](https://github.com/faja190/faja/blob/main/src/Logic/Projects/BooksManager.jsx) (Books manager UI)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_shell["App shell"]
  node_entry["React entry<br/>[main.jsx]"]
  node_app["App router<br/>[App.jsx]"]
  node_navbar["Navigation<br/>[Navbar.jsx]"]
  node_scroll["Scroll handler<br/>[App.jsx]"]
end

subgraph group_portfolio["Portfolio content"]
  node_footer["Footer links<br/>[Footer.jsx]"]
  node_intro["Profile and resume<br/>[Intro.jsx]"]
  node_resume["Resume PDF<br/>[Fatima-resume.pdf]"]
  node_skills["Skills display<br/>[Skills.jsx]"]
end

subgraph group_projects["Project showcase"]
  node_projects["Project carousel<br/>[Projects.jsx]"]
  node_projectdata["Project catalog<br/>[ProjectsData.js]"]
  node_coming["Coming soon page<br/>[ComingSoon.jsx]"]
  node_animation["Frame animation<br/>[FrameAnimation.jsx]"]
end

subgraph group_bookdemo["Books demo"]
  node_books["Books manager UI<br/>[BooksManager.jsx]"]
  node_booksapi["Books REST API"]
  node_booksdb[("SQLite books store")]
end

node_visitor(("Visitor"))

node_visitor -->|"opens site"| node_entry
node_entry -->|"renders"| node_app
node_visitor -->|"uses navigation"| node_navbar
node_navbar -->|"navigates routes"| node_app
node_app -->|"renders"| node_navbar
node_app -->|"handles scroll"| node_scroll
node_app -->|"renders"| node_footer
node_app -->|"routes home"| node_intro
node_app -->|"routes home"| node_skills
node_app -->|"routes home"| node_projects
node_app -->|"routes books demo"| node_books
node_app -->|"routes placeholder"| node_coming
node_navbar -->|"links resume"| node_resume
node_intro -->|"links resume"| node_resume
node_visitor -->|"browses projects"| node_projects
node_projects -->|"reads catalog"| node_projectdata
node_projects -->|"links project routes"| node_app
node_coming -->|"renders animation"| node_animation
node_visitor -->|"uses book tools"| node_books
node_books -->|"fetches and mutates"| node_booksapi
node_booksapi -.->|"uses SQLite"| node_booksdb

click node_entry "https://github.com/faja190/faja/blob/main/src/main.jsx"
click node_app "https://github.com/faja190/faja/blob/main/src/App.jsx"
click node_navbar "https://github.com/faja190/faja/blob/main/src/Logic/Nav/Navbar.jsx"
click node_scroll "https://github.com/faja190/faja/blob/main/src/App.jsx"
click node_footer "https://github.com/faja190/faja/blob/main/src/Logic/Footer/Footer.jsx"
click node_intro "https://github.com/faja190/faja/blob/main/src/Logic/About/Intro.jsx"
click node_resume "https://github.com/faja190/faja/blob/main/src/resources/Fatima-resume.pdf"
click node_skills "https://github.com/faja190/faja/blob/main/src/Logic/Skills/Skills.jsx"
click node_projects "https://github.com/faja190/faja/blob/main/src/Logic/Projects/Projects.jsx"
click node_projectdata "https://github.com/faja190/faja/blob/main/src/Data/ProjectsData.js"
click node_coming "https://github.com/faja190/faja/blob/main/src/Logic/ComingSoon/ComingSoon.jsx"
click node_animation "https://github.com/faja190/faja/blob/main/src/Logic/ComingSoon/FrameAnimation.jsx"
click node_books "https://github.com/faja190/faja/blob/main/src/Logic/Projects/BooksManager.jsx"

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_app,node_navbar,node_scroll toneBlue
class node_footer,node_intro,node_resume,node_skills toneAmber
class node_projects,node_projectdata,node_coming,node_animation toneMint
class node_books,node_booksapi,node_booksdb toneRose
class node_visitor toneIndigo
```

## Components

### App shell

- [React entry](https://github.com/faja190/faja/blob/main/src/main.jsx): `src/main.jsx`
- [App router](https://github.com/faja190/faja/blob/main/src/App.jsx): `src/App.jsx`
- [Navigation](https://github.com/faja190/faja/blob/main/src/Logic/Nav/Navbar.jsx): `src/Logic/Nav/Navbar.jsx`
- [Scroll handler](https://github.com/faja190/faja/blob/main/src/App.jsx): `src/App.jsx`

### Portfolio content

- [Footer links](https://github.com/faja190/faja/blob/main/src/Logic/Footer/Footer.jsx): `src/Logic/Footer/Footer.jsx`
- [Profile and resume](https://github.com/faja190/faja/blob/main/src/Logic/About/Intro.jsx): `src/Logic/About/Intro.jsx`
- [Resume PDF](https://github.com/faja190/faja/blob/main/src/resources/Fatima-resume.pdf): `src/resources/Fatima-resume.pdf`
- [Skills display](https://github.com/faja190/faja/blob/main/src/Logic/Skills/Skills.jsx): `src/Logic/Skills/Skills.jsx`

### Project showcase

- [Project carousel](https://github.com/faja190/faja/blob/main/src/Logic/Projects/Projects.jsx): `src/Logic/Projects/Projects.jsx`
- [Project catalog](https://github.com/faja190/faja/blob/main/src/Data/ProjectsData.js): `src/Data/ProjectsData.js`
- [Coming soon page](https://github.com/faja190/faja/blob/main/src/Logic/ComingSoon/ComingSoon.jsx): `src/Logic/ComingSoon/ComingSoon.jsx`
- [Frame animation](https://github.com/faja190/faja/blob/main/src/Logic/ComingSoon/FrameAnimation.jsx): `src/Logic/ComingSoon/FrameAnimation.jsx`

### Books demo

- [Books manager UI](https://github.com/faja190/faja/blob/main/src/Logic/Projects/BooksManager.jsx): `src/Logic/Projects/BooksManager.jsx`
- **Books REST API**
- **SQLite books store**

### Other components

- **Visitor**

## Connections

- Visitor → React entry: opens site
- React entry → App router: renders
- Visitor → Navigation: uses navigation
- Navigation → App router: navigates routes
- App router → Navigation: renders
- App router → Scroll handler: handles scroll
- App router → Footer links: renders
- App router → Profile and resume: routes home
- App router → Skills display: routes home
- App router → Project carousel: routes home
- App router → Books manager UI: routes books demo
- App router → Coming soon page: routes placeholder
- Navigation → Resume PDF: links resume
- Profile and resume → Resume PDF: links resume
- Visitor → Project carousel: browses projects
- Project carousel → Project catalog: reads catalog
- Project carousel → App router: links project routes
- Coming soon page → Frame animation: renders animation
- Visitor → Books manager UI: uses book tools
- Books manager UI → Books REST API: fetches and mutates
- Books REST API → SQLite books store: uses SQLite