# nithinrajuofficial/favor_gsap architecture

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

## Overview

This repository is a single-page photography/creative portfolio site, not an e-commerce runtime despite its package name. A visitor opens the Next.js page to view the portfolio’s hero, work, editorial, and contact/footer sections. Sampled code confirms a GSAP animation wrapper around Recent Works and a theme provider in the root layout; the page composition and wiring of other sections were not sampled, so those links are left unspecified.

Main entry points: [`src/app/gsap/AnimatedRecentWorks.tsx`](https://github.com/nithinrajuofficial/favor_gsap/blob/main/src/app/gsap/AnimatedRecentWorks.tsx) (Recent Works Motion), [`src/app/layout.tsx`](https://github.com/nithinrajuofficial/favor_gsap/blob/main/src/app/layout.tsx) (Root Layout), [`src/app/components/Overview/Overview.tsx`](https://github.com/nithinrajuofficial/favor_gsap/blob/main/src/app/components/Overview/Overview.tsx) (Hero Overview), [`src/app/components/ImageAcceptance/ImageAcceptance.tsx`](https://github.com/nithinrajuofficial/favor_gsap/blob/main/src/app/components/ImageAcceptance/ImageAcceptance.tsx) (Image Acceptance)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_site["Site Entry"]
  node_home["Home Page<br/>[page.tsx]"]
  node_layout["Root Layout<br/>[layout.tsx]"]
end

subgraph group_content["Portfolio Content"]
  node_navbar["Navigation<br/>[Navbar.tsx]"]
  node_overview["Hero Overview<br/>[Overview.tsx]"]
  node_recent["Recent Works<br/>[RecentWorks.tsx]"]
  node_acceptance["Image Acceptance"]
  node_featured["Featured In<br/>[FeaturedIn.tsx]"]
  node_contact["Contact Us<br/>[ContactUs.tsx]"]
  node_footer["Footer<br/>[Footer.tsx]"]
end

subgraph group_motion["Motion"]
  node_recentmotion["Recent Works Motion"]
  node_loadmotion["Page Load Motion"]
  node_scrollmotion["Scroll Motion Hook"]
end

subgraph group_presentation["Presentation"]
  node_theme["Theme Registry<br/>[ThemeRegistry.tsx]"]
  node_preloader["Preloader<br/>[Preloader.tsx]"]
end

node_visitor(("Visitor"))
node_gsap["GSAP"]
node_mui["Material UI"]

node_visitor -->|"opens"| node_home
node_layout -->|"wraps children"| node_theme
node_recentmotion -->|"renders"| node_recent
node_recentmotion -->|"animates with"| node_gsap
node_loadmotion -->|"animates with"| node_gsap
node_scrollmotion -->|"creates timelines"| node_gsap
node_overview -->|"uses components"| node_mui
node_acceptance -->|"uses components"| node_mui
node_featured -->|"uses components"| node_mui
node_footer -->|"uses components"| node_mui

click node_home "https://github.com/nithinrajuofficial/favor_gsap/blob/main/src/app/page.tsx"
click node_layout "https://github.com/nithinrajuofficial/favor_gsap/blob/main/src/app/layout.tsx"
click node_theme "https://github.com/nithinrajuofficial/favor_gsap/blob/main/src/app/utils/ThemeRegistry.tsx"
click node_navbar "https://github.com/nithinrajuofficial/favor_gsap/blob/main/src/app/components/Navbar/Navbar.tsx"
click node_overview "https://github.com/nithinrajuofficial/favor_gsap/blob/main/src/app/components/Overview/Overview.tsx"
click node_recent "https://github.com/nithinrajuofficial/favor_gsap/blob/main/src/app/components/RecentWorks/RecentWorks.tsx"
click node_acceptance "https://github.com/nithinrajuofficial/favor_gsap/blob/main/src/app/components/ImageAcceptance/ImageAcceptance.tsx"
click node_featured "https://github.com/nithinrajuofficial/favor_gsap/blob/main/src/app/components/FeaturedIn/FeaturedIn.tsx"
click node_contact "https://github.com/nithinrajuofficial/favor_gsap/blob/main/src/app/components/ContactUs/ContactUs.tsx"
click node_footer "https://github.com/nithinrajuofficial/favor_gsap/blob/main/src/app/components/Footer/Footer.tsx"
click node_preloader "https://github.com/nithinrajuofficial/favor_gsap/blob/main/src/app/components/Preloader/Preloader.tsx"
click node_recentmotion "https://github.com/nithinrajuofficial/favor_gsap/blob/main/src/app/gsap/AnimatedRecentWorks.tsx"
click node_loadmotion "https://github.com/nithinrajuofficial/favor_gsap/blob/main/src/app/gsap/hooks/usePageLoadAnimation.ts"
click node_scrollmotion "https://github.com/nithinrajuofficial/favor_gsap/blob/main/src/app/gsap/hooks/useScrollAnimation.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_layout,node_mui toneBlue
class node_navbar,node_overview,node_recent,node_acceptance,node_featured,node_contact,node_footer toneAmber
class node_recentmotion,node_loadmotion,node_scrollmotion toneMint
class node_theme,node_preloader toneRose
class node_visitor,node_gsap toneIndigo
```

## Components

### Site Entry

- [Home Page](https://github.com/nithinrajuofficial/favor_gsap/blob/main/src/app/page.tsx): `src/app/page.tsx`
- [Root Layout](https://github.com/nithinrajuofficial/favor_gsap/blob/main/src/app/layout.tsx): `src/app/layout.tsx`

### Portfolio Content

- [Navigation](https://github.com/nithinrajuofficial/favor_gsap/blob/main/src/app/components/Navbar/Navbar.tsx): `src/app/components/Navbar/Navbar.tsx`
- [Hero Overview](https://github.com/nithinrajuofficial/favor_gsap/blob/main/src/app/components/Overview/Overview.tsx): `src/app/components/Overview/Overview.tsx`
- [Recent Works](https://github.com/nithinrajuofficial/favor_gsap/blob/main/src/app/components/RecentWorks/RecentWorks.tsx): `src/app/components/RecentWorks/RecentWorks.tsx`
- [Image Acceptance](https://github.com/nithinrajuofficial/favor_gsap/blob/main/src/app/components/ImageAcceptance/ImageAcceptance.tsx): `src/app/components/ImageAcceptance/ImageAcceptance.tsx`
- [Featured In](https://github.com/nithinrajuofficial/favor_gsap/blob/main/src/app/components/FeaturedIn/FeaturedIn.tsx): `src/app/components/FeaturedIn/FeaturedIn.tsx`
- [Contact Us](https://github.com/nithinrajuofficial/favor_gsap/blob/main/src/app/components/ContactUs/ContactUs.tsx): `src/app/components/ContactUs/ContactUs.tsx`
- [Footer](https://github.com/nithinrajuofficial/favor_gsap/blob/main/src/app/components/Footer/Footer.tsx): `src/app/components/Footer/Footer.tsx`

### Motion

- [Recent Works Motion](https://github.com/nithinrajuofficial/favor_gsap/blob/main/src/app/gsap/AnimatedRecentWorks.tsx): `src/app/gsap/AnimatedRecentWorks.tsx`
- [Page Load Motion](https://github.com/nithinrajuofficial/favor_gsap/blob/main/src/app/gsap/hooks/usePageLoadAnimation.ts): `src/app/gsap/hooks/usePageLoadAnimation.ts`
- [Scroll Motion Hook](https://github.com/nithinrajuofficial/favor_gsap/blob/main/src/app/gsap/hooks/useScrollAnimation.ts): `src/app/gsap/hooks/useScrollAnimation.ts`

### Presentation

- [Theme Registry](https://github.com/nithinrajuofficial/favor_gsap/blob/main/src/app/utils/ThemeRegistry.tsx): `src/app/utils/ThemeRegistry.tsx`
- [Preloader](https://github.com/nithinrajuofficial/favor_gsap/blob/main/src/app/components/Preloader/Preloader.tsx): `src/app/components/Preloader/Preloader.tsx`

### Other components

- **Visitor**
- **GSAP**
- **Material UI**

## Connections

- Visitor → Home Page: opens
- Root Layout → Theme Registry: wraps children
- Recent Works Motion → Recent Works: renders
- Recent Works Motion → GSAP: animates with
- Page Load Motion → GSAP: animates with
- Scroll Motion Hook → GSAP: creates timelines
- Hero Overview → Material UI: uses components
- Image Acceptance → Material UI: uses components
- Featured In → Material UI: uses components
- Footer → Material UI: uses components