# itzraynx/frens-project-1bac architecture

> Architecture diagram of the GitHub repository itzraynx/frens-project-1bac, 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/itzraynx/frens-project-1bac
- Repository: https://github.com/itzraynx/frens-project-1bac

## Overview

This is a French-language editorial site presenting Maghrebi literature and the characters of Ahmed Sefrioui’s La Boîte à merveilles. Visitors enter through a project splash and hero, then navigate the definition, four project chapters, and a review quiz; navigation, theme switching, print, and scroll controls support that reading journey. The graph centers on the documented content stages and the sampled React composition. Several visual components are indexed but not excerpted, so their internal behavior and connections are not inferred.

Main entry points: [`src/App.tsx`](https://github.com/itzraynx/frens-project-1bac/blob/main/src/App.tsx) (Page composition), [`src/components/SectionNumber.tsx`](https://github.com/itzraynx/frens-project-1bac/blob/main/src/components/SectionNumber.tsx) (Section marker), [`src/main.tsx`](https://github.com/itzraynx/frens-project-1bac/blob/main/src/main.tsx) (React entry), [`src/components/Hero.tsx`](https://github.com/itzraynx/frens-project-1bac/blob/main/src/components/Hero.tsx) (Project introduction)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application shell"]
  node_entry["React entry<br/>[main.tsx]"]
  node_app["Page composition<br/>[App.tsx]"]
  node_theme["Theme state<br/>[ThemeContext.tsx]"]
end

subgraph group_content["Editorial content"]
  node_splash["Project splash<br/>[SplashScreen.tsx]"]
  node_hero["Project introduction<br/>[Hero.tsx]"]
  node_definition["Literature definition<br/>[Introduction.tsx]"]
  node_chapter["Character chapters"]
  node_review["Review quiz<br/>[ProjectEnd.tsx]"]
  node_footer["Project footer<br/>[Footer.tsx]"]
end

subgraph group_navigation["Reading controls"]
  node_navbar["Section navigation<br/>[Navbar.tsx]"]
  node_progress["Scroll progress<br/>[ScrollProgress.tsx]"]
  node_backtop["Back to top<br/>[BackToTop.tsx]"]
  node_print["Print control<br/>[PrintButton.tsx]"]
end

subgraph group_visuals["Visual effects"]
  node_scramble["Animated title<br/>[TextScramble.tsx]"]
  node_cursor["Custom cursor<br/>[CustomCursor.tsx]"]
  node_particles["Floating particles"]
  node_mesh["Animated mesh<br/>[AnimatedMesh.tsx]"]
  node_number["Section marker<br/>[SectionNumber.tsx]"]
  node_aura["Aura card<br/>[AuraCard.tsx]"]
  node_glow["Breathing glow<br/>[BreathingGlow.tsx]"]
  node_confetti["Confetti effect<br/>[Confetti.tsx]"]
  node_tilt["Tilt card<br/>[TiltCard.tsx]"]
end

node_visitor(("Site visitor"))

node_visitor -->|"opens site"| node_entry
node_entry -->|"renders"| node_app
node_app -->|"provides theme"| node_theme
node_app -->|"renders"| node_splash
node_app -->|"renders"| node_cursor
node_app -->|"renders"| node_particles
node_app -->|"renders"| node_mesh
node_app -->|"renders"| node_navbar
node_app -->|"renders"| node_progress
node_app -->|"renders"| node_hero
node_app -->|"renders"| node_definition
node_app -->|"renders"| node_chapter
node_app -->|"renders"| node_review
node_app -->|"renders"| node_footer
node_app -->|"renders"| node_backtop
node_app -->|"renders"| node_print
node_hero -->|"renders title"| node_scramble
node_definition -->|"renders marker"| node_number
node_chapter -->|"renders marker"| node_number
node_review -->|"renders marker"| node_number
node_navbar -->|"reads theme"| node_theme

click node_entry "https://github.com/itzraynx/frens-project-1bac/blob/main/src/main.tsx"
click node_app "https://github.com/itzraynx/frens-project-1bac/blob/main/src/App.tsx"
click node_theme "https://github.com/itzraynx/frens-project-1bac/blob/main/src/context/ThemeContext.tsx"
click node_splash "https://github.com/itzraynx/frens-project-1bac/blob/main/src/components/SplashScreen.tsx"
click node_hero "https://github.com/itzraynx/frens-project-1bac/blob/main/src/components/Hero.tsx"
click node_scramble "https://github.com/itzraynx/frens-project-1bac/blob/main/src/components/TextScramble.tsx"
click node_definition "https://github.com/itzraynx/frens-project-1bac/blob/main/src/components/Introduction.tsx"
click node_chapter "https://github.com/itzraynx/frens-project-1bac/blob/main/src/components/ProjectChapters.tsx"
click node_review "https://github.com/itzraynx/frens-project-1bac/blob/main/src/components/ProjectEnd.tsx"
click node_footer "https://github.com/itzraynx/frens-project-1bac/blob/main/src/components/Footer.tsx"
click node_navbar "https://github.com/itzraynx/frens-project-1bac/blob/main/src/components/Navbar.tsx"
click node_progress "https://github.com/itzraynx/frens-project-1bac/blob/main/src/components/ScrollProgress.tsx"
click node_backtop "https://github.com/itzraynx/frens-project-1bac/blob/main/src/components/BackToTop.tsx"
click node_print "https://github.com/itzraynx/frens-project-1bac/blob/main/src/components/PrintButton.tsx"
click node_cursor "https://github.com/itzraynx/frens-project-1bac/blob/main/src/components/CustomCursor.tsx"
click node_particles "https://github.com/itzraynx/frens-project-1bac/blob/main/src/components/FloatingParticles.tsx"
click node_mesh "https://github.com/itzraynx/frens-project-1bac/blob/main/src/components/AnimatedMesh.tsx"
click node_number "https://github.com/itzraynx/frens-project-1bac/blob/main/src/components/SectionNumber.tsx"
click node_aura "https://github.com/itzraynx/frens-project-1bac/blob/main/src/components/AuraCard.tsx"
click node_glow "https://github.com/itzraynx/frens-project-1bac/blob/main/src/components/BreathingGlow.tsx"
click node_confetti "https://github.com/itzraynx/frens-project-1bac/blob/main/src/components/Confetti.tsx"
click node_tilt "https://github.com/itzraynx/frens-project-1bac/blob/main/src/components/TiltCard.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_entry,node_app,node_theme toneBlue
class node_splash,node_hero,node_definition,node_chapter,node_review,node_footer toneAmber
class node_navbar,node_progress,node_backtop,node_print toneMint
class node_scramble,node_cursor,node_particles,node_mesh,node_number,node_aura,node_glow,node_confetti,node_tilt toneRose
class node_visitor toneIndigo
```

## Components

### Application shell

- [React entry](https://github.com/itzraynx/frens-project-1bac/blob/main/src/main.tsx): `src/main.tsx`
- [Page composition](https://github.com/itzraynx/frens-project-1bac/blob/main/src/App.tsx): `src/App.tsx`
- [Theme state](https://github.com/itzraynx/frens-project-1bac/blob/main/src/context/ThemeContext.tsx): `src/context/ThemeContext.tsx`

### Editorial content

- [Project splash](https://github.com/itzraynx/frens-project-1bac/blob/main/src/components/SplashScreen.tsx): `src/components/SplashScreen.tsx`
- [Project introduction](https://github.com/itzraynx/frens-project-1bac/blob/main/src/components/Hero.tsx): `src/components/Hero.tsx`
- [Literature definition](https://github.com/itzraynx/frens-project-1bac/blob/main/src/components/Introduction.tsx): `src/components/Introduction.tsx`
- [Character chapters](https://github.com/itzraynx/frens-project-1bac/blob/main/src/components/ProjectChapters.tsx): `src/components/ProjectChapters.tsx`
- [Review quiz](https://github.com/itzraynx/frens-project-1bac/blob/main/src/components/ProjectEnd.tsx): `src/components/ProjectEnd.tsx`
- [Project footer](https://github.com/itzraynx/frens-project-1bac/blob/main/src/components/Footer.tsx): `src/components/Footer.tsx`

### Reading controls

- [Section navigation](https://github.com/itzraynx/frens-project-1bac/blob/main/src/components/Navbar.tsx): `src/components/Navbar.tsx`
- [Scroll progress](https://github.com/itzraynx/frens-project-1bac/blob/main/src/components/ScrollProgress.tsx): `src/components/ScrollProgress.tsx`
- [Back to top](https://github.com/itzraynx/frens-project-1bac/blob/main/src/components/BackToTop.tsx): `src/components/BackToTop.tsx`
- [Print control](https://github.com/itzraynx/frens-project-1bac/blob/main/src/components/PrintButton.tsx): `src/components/PrintButton.tsx`

### Visual effects

- [Animated title](https://github.com/itzraynx/frens-project-1bac/blob/main/src/components/TextScramble.tsx): `src/components/TextScramble.tsx`
- [Custom cursor](https://github.com/itzraynx/frens-project-1bac/blob/main/src/components/CustomCursor.tsx): `src/components/CustomCursor.tsx`
- [Floating particles](https://github.com/itzraynx/frens-project-1bac/blob/main/src/components/FloatingParticles.tsx): `src/components/FloatingParticles.tsx`
- [Animated mesh](https://github.com/itzraynx/frens-project-1bac/blob/main/src/components/AnimatedMesh.tsx): `src/components/AnimatedMesh.tsx`
- [Section marker](https://github.com/itzraynx/frens-project-1bac/blob/main/src/components/SectionNumber.tsx): `src/components/SectionNumber.tsx`
- [Aura card](https://github.com/itzraynx/frens-project-1bac/blob/main/src/components/AuraCard.tsx): `src/components/AuraCard.tsx`
- [Breathing glow](https://github.com/itzraynx/frens-project-1bac/blob/main/src/components/BreathingGlow.tsx): `src/components/BreathingGlow.tsx`
- [Confetti effect](https://github.com/itzraynx/frens-project-1bac/blob/main/src/components/Confetti.tsx): `src/components/Confetti.tsx`
- [Tilt card](https://github.com/itzraynx/frens-project-1bac/blob/main/src/components/TiltCard.tsx): `src/components/TiltCard.tsx`

### Other components

- **Site visitor**

## Connections

- Site visitor → React entry: opens site (evidence: `README.md`)
- React entry → Page composition: renders (evidence: `src/main.tsx`)
- Page composition → Theme state: provides theme (evidence: `src/App.tsx`)
- Page composition → Project splash: renders (evidence: `src/App.tsx`)
- Page composition → Custom cursor: renders (evidence: `src/App.tsx`)
- Page composition → Floating particles: renders (evidence: `src/App.tsx`)
- Page composition → Animated mesh: renders (evidence: `src/App.tsx`)
- Page composition → Section navigation: renders (evidence: `src/App.tsx`)
- Page composition → Scroll progress: renders (evidence: `src/App.tsx`)
- Page composition → Project introduction: renders (evidence: `src/App.tsx`)
- Page composition → Literature definition: renders (evidence: `src/App.tsx`)
- Page composition → Character chapters: renders (evidence: `src/App.tsx`)
- Page composition → Review quiz: renders (evidence: `src/App.tsx`)
- Page composition → Project footer: renders (evidence: `src/App.tsx`)
- Page composition → Back to top: renders (evidence: `src/App.tsx`)
- Page composition → Print control: renders (evidence: `src/App.tsx`)
- Project introduction → Animated title: renders title (evidence: `src/components/Hero.tsx`)
- Literature definition → Section marker: renders marker (evidence: `src/components/Introduction.tsx`)
- Character chapters → Section marker: renders marker (evidence: `src/components/ProjectChapters.tsx`)
- Review quiz → Section marker: renders marker (evidence: `src/components/ProjectEnd.tsx`)
- Section navigation → Theme state: reads theme (evidence: `src/components/Navbar.tsx`)