# prayag29-sahu/prayagsahuportfolio architecture

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

- Interactive diagram: https://gitdiagram.com/prayag29-sahu/prayagsahuportfolio
- Repository: https://github.com/prayag29-sahu/prayagsahuportfolio

## Overview

1. This repository is a personal portfolio site built with Next.js using the App Router. The top-level structure is very small: `app/` defines the route shell and landing page, while `components/` holds the reusable page sections and UI pieces.

2. The application entry points are `app/layout.jsx` and `app/page.jsx`. `layout.jsx` provides the global document structure and site-wide wrappers, and `page.jsx` is the main single-page portfolio surface that composes the landing experience from section components.

3. The page is organized as a vertically stacked, mostly static marketing/portfolio layout. The major content blocks live under `components/sections/` and include:
   - `HeroSection`
   - `AboutSections`
   - `Education` and `Education2`
   - `SkillCard`
   - `ProjectCard`
   - `AchievementCard`
   - `CTA`
   - `ContactSection`

4. Navigation and framing are separated into `components/layout/`. `Navbar.jsx` and `Footer.jsx` handle the persistent top and bottom chrome around the section content, so the architecture is “shared shell + composed sections” rather than a routed multi-page app.

5. There are a couple of reusable interaction/UI primitives in `components/ui/`. `CursorBubble.jsx` and `ParallaxSection.tsx` suggest the portfolio uses small motion/scroll-affordance effects. These are supportive UI utilities rather than core data holders.

6. Styling is primarily global and utility-driven. `app/globals.css` sets application-wide styles, while `tailwind.config.js` and `postcss.config.*` indicate Tailwind CSS is the main styling system. `components/sections/About.css` shows there is at least one section-specific stylesheet layered on top.

7. The app is asset-heavy and mostly static. `public/` contains the CV PDF and many image folders for certificates, school/college records, project screenshots, and other portfolio evidence. These assets feed the section components directly and are a key part of the content model.

8. There is no sign of a backend, CMS, database, or API layer in this repo. The data flow is essentially: static content and media from `public/` and JSX props/component composition -> rendered portfolio sections -> one scrollable page.

9. The stack mixes JavaScript and TypeScript. Most components are `.jsx`, but `components/ui/ParallaxSection.tsx` and `next-env.d.ts` indicate TypeScript support is enabled for at least some UI code. `next.config.ts` and `tsconfig.json` reinforce that the project is set up for a typed Next.js build.

10. Tooling is standard frontend lint/build tooling: ESLint (`eslint.config.mjs`), type checking, and PostCSS/Tailwind processing. `README.md` is minimal, so the repo is largely self-describing through its file structure rather than documented subsystems.

11. For an architecture diagram, the key boundaries are:
   - App shell (`layout`)
   - Single landing route (`page`)
   - Section components
   - Shared layout/navigation
   - Shared motion/UI primitives
   - Static asset store in `public/`

12. In practice, the site is best drawn as a one-page portfolio composition pipeline: layout wraps the page, the page assembles section modules, the sections consume static media/content, and shared UI components provide consistent interaction and visual effects.

Main entry points: [`app/page.jsx`](https://github.com/prayag29-sahu/prayagsahuportfolio/blob/main/app/page.jsx) (Home Page), [`public/images`](https://github.com/prayag29-sahu/prayagsahuportfolio/tree/main/public/images) (Images), [`components/sections/HeroSection.jsx`](https://github.com/prayag29-sahu/prayagsahuportfolio/blob/main/components/sections/HeroSection.jsx) (Hero), [`components/sections/AboutSections.jsx`](https://github.com/prayag29-sahu/prayagsahuportfolio/blob/main/components/sections/AboutSections.jsx) (About)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app_shell["App Shell"]
  node_app_layout["Layout<br/>next app shell<br/>[layout.jsx]"]
  node_app_page["Home Page<br/>landing route<br/>[page.jsx]"]
  node_global_css["Globals<br/>app styles<br/>[globals.css]"]
end

subgraph group_content["Content Composition"]
  node_hero["Hero<br/>section<br/>[HeroSection.jsx]"]
  node_about["About<br/>section<br/>[AboutSections.jsx]"]
  node_education["Education<br/>section<br/>[Education.jsx]"]
  node_education2["Education 2<br/>section<br/>[Education2.jsx]"]
  node_skills["Skills<br/>section<br/>[SkillCard.jsx]"]
  node_projects["Projects<br/>section<br/>[ProjectCard.jsx]"]
  node_achievements["Achievements<br/>section"]
  node_cta["CTA<br/>section<br/>[CTA.jsx]"]
  node_contact["Contact<br/>section<br/>[ContactSection.jsx]"]
  node_about_css["About CSS<br/>section stylesheet<br/>[About.css]"]
end

subgraph group_shared["Shared UI"]
  node_navbar["Navbar<br/>chrome<br/>[Navbar.jsx]"]
  node_footer["Footer<br/>chrome<br/>[Footer.jsx]"]
  node_cursor_bubble(("Cursor Bubble<br/>ui effect<br/>[CursorBubble.jsx]"))
  node_parallax["Parallax<br/>motion primitive"]
end

subgraph group_assets["Static Assets"]
  node_cv_pdf["CV PDF<br/>static document<br/>[PrayagCV.pdf]"]
  node_image_store[("Images<br/>media library")]
end

subgraph group_tooling["Tooling"]
  node_next_config["Next Config<br/>build config<br/>[next.config.ts]"]
  node_tailwind_config["Tailwind Config<br/>style config<br/>[tailwind.config.js]"]
  node_postcss_config["PostCSS<br/>style pipeline<br/>[postcss.config.js]"]
  node_eslint_config["ESLint<br/>lint config<br/>[eslint.config.mjs]"]
end

node_app_layout -->|"wraps"| node_app_page
node_app_layout -->|"imports"| node_global_css
node_app_page -->|"composes"| node_navbar
node_app_page -->|"composes"| node_hero
node_app_page -->|"composes"| node_about
node_app_page -->|"composes"| node_education
node_app_page -->|"composes"| node_education2
node_app_page -->|"composes"| node_skills
node_app_page -->|"composes"| node_projects
node_app_page -->|"composes"| node_achievements
node_app_page -->|"composes"| node_cta
node_app_page -->|"composes"| node_contact
node_app_page -->|"composes"| node_footer
node_about -->|"styles"| node_about_css
node_hero -.->|"uses"| node_cursor_bubble
node_hero -.->|"uses"| node_parallax
node_about -.->|"uses"| node_parallax
node_cta -.->|"uses"| node_parallax
node_contact -.->|"uses"| node_cursor_bubble
node_education -->|"reads"| node_image_store
node_education2 -->|"reads"| node_image_store
node_projects -->|"reads"| node_image_store
node_achievements -->|"reads"| node_image_store
node_contact -->|"reads"| node_cv_pdf
node_tailwind_config -.->|"drives"| node_global_css
node_postcss_config -.->|"processes"| node_global_css
node_next_config -.->|"configures"| node_app_layout
node_eslint_config -.->|"checks"| node_app_page

click node_app_layout "https://github.com/prayag29-sahu/prayagsahuportfolio/blob/main/app/layout.jsx"
click node_app_page "https://github.com/prayag29-sahu/prayagsahuportfolio/blob/main/app/page.jsx"
click node_global_css "https://github.com/prayag29-sahu/prayagsahuportfolio/blob/main/app/globals.css"
click node_navbar "https://github.com/prayag29-sahu/prayagsahuportfolio/blob/main/components/layout/Navbar.jsx"
click node_footer "https://github.com/prayag29-sahu/prayagsahuportfolio/blob/main/components/layout/Footer.jsx"
click node_hero "https://github.com/prayag29-sahu/prayagsahuportfolio/blob/main/components/sections/HeroSection.jsx"
click node_about "https://github.com/prayag29-sahu/prayagsahuportfolio/blob/main/components/sections/AboutSections.jsx"
click node_education "https://github.com/prayag29-sahu/prayagsahuportfolio/blob/main/components/sections/Education.jsx"
click node_education2 "https://github.com/prayag29-sahu/prayagsahuportfolio/blob/main/components/sections/Education2.jsx"
click node_skills "https://github.com/prayag29-sahu/prayagsahuportfolio/blob/main/components/sections/SkillCard.jsx"
click node_projects "https://github.com/prayag29-sahu/prayagsahuportfolio/blob/main/components/sections/ProjectCard.jsx"
click node_achievements "https://github.com/prayag29-sahu/prayagsahuportfolio/blob/main/components/sections/AchievementCard.jsx"
click node_cta "https://github.com/prayag29-sahu/prayagsahuportfolio/blob/main/components/sections/CTA.jsx"
click node_contact "https://github.com/prayag29-sahu/prayagsahuportfolio/blob/main/components/sections/ContactSection.jsx"
click node_about_css "https://github.com/prayag29-sahu/prayagsahuportfolio/blob/main/components/sections/About.css"
click node_cursor_bubble "https://github.com/prayag29-sahu/prayagsahuportfolio/blob/main/components/ui/CursorBubble.jsx"
click node_parallax "https://github.com/prayag29-sahu/prayagsahuportfolio/blob/main/components/ui/ParallaxSection.tsx"
click node_cv_pdf "https://github.com/prayag29-sahu/prayagsahuportfolio/blob/main/public/PrayagCV.pdf"
click node_image_store "https://github.com/prayag29-sahu/prayagsahuportfolio/tree/main/public/images"
click node_next_config "https://github.com/prayag29-sahu/prayagsahuportfolio/blob/main/next.config.ts"
click node_tailwind_config "https://github.com/prayag29-sahu/prayagsahuportfolio/blob/main/tailwind.config.js"
click node_postcss_config "https://github.com/prayag29-sahu/prayagsahuportfolio/blob/main/postcss.config.js"
click node_eslint_config "https://github.com/prayag29-sahu/prayagsahuportfolio/blob/main/eslint.config.mjs"

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_app_layout,node_app_page,node_global_css toneBlue
class node_hero,node_about,node_education,node_education2,node_skills,node_projects,node_achievements,node_cta,node_contact,node_about_css toneAmber
class node_navbar,node_footer,node_cursor_bubble,node_parallax toneMint
class node_cv_pdf,node_image_store toneRose
class node_next_config,node_tailwind_config,node_postcss_config,node_eslint_config toneIndigo
```

## Components

### App Shell

Next.js route entry and global document wrapper

- [Layout](https://github.com/prayag29-sahu/prayagsahuportfolio/blob/main/app/layout.jsx): next app shell · Global document wrapper and site-wide providers · `app/layout.jsx`
- [Home Page](https://github.com/prayag29-sahu/prayagsahuportfolio/blob/main/app/page.jsx): landing route · Single-page portfolio composition surface · `app/page.jsx`
- [Globals](https://github.com/prayag29-sahu/prayagsahuportfolio/blob/main/app/globals.css): app styles · Application-wide styles · `app/globals.css`

### Content Composition

Portfolio page and its reusable sections

- [Hero](https://github.com/prayag29-sahu/prayagsahuportfolio/blob/main/components/sections/HeroSection.jsx): section · Intro and first impression block · `components/sections/HeroSection.jsx`
- [About](https://github.com/prayag29-sahu/prayagsahuportfolio/blob/main/components/sections/AboutSections.jsx): section · Personal summary and background · `components/sections/AboutSections.jsx`
- [Education](https://github.com/prayag29-sahu/prayagsahuportfolio/blob/main/components/sections/Education.jsx): section · Education history block · `components/sections/Education.jsx`
- [Education 2](https://github.com/prayag29-sahu/prayagsahuportfolio/blob/main/components/sections/Education2.jsx): section · Additional education details · `components/sections/Education2.jsx`
- [Skills](https://github.com/prayag29-sahu/prayagsahuportfolio/blob/main/components/sections/SkillCard.jsx): section · Capability summary cards · `components/sections/SkillCard.jsx`
- [Projects](https://github.com/prayag29-sahu/prayagsahuportfolio/blob/main/components/sections/ProjectCard.jsx): section · Project showcase cards · `components/sections/ProjectCard.jsx`
- [Achievements](https://github.com/prayag29-sahu/prayagsahuportfolio/blob/main/components/sections/AchievementCard.jsx): section · Awards and credential highlights · `components/sections/AchievementCard.jsx`
- [CTA](https://github.com/prayag29-sahu/prayagsahuportfolio/blob/main/components/sections/CTA.jsx): section · Call-to-action prompt · `components/sections/CTA.jsx`
- [Contact](https://github.com/prayag29-sahu/prayagsahuportfolio/blob/main/components/sections/ContactSection.jsx): section · Contact and outreach block · `components/sections/ContactSection.jsx`
- [About CSS](https://github.com/prayag29-sahu/prayagsahuportfolio/blob/main/components/sections/About.css): section stylesheet · Section-specific styling for about content · `components/sections/About.css`

### Shared UI

Persistent chrome and interaction primitives

- [Navbar](https://github.com/prayag29-sahu/prayagsahuportfolio/blob/main/components/layout/Navbar.jsx): chrome · Persistent top navigation · `components/layout/Navbar.jsx`
- [Footer](https://github.com/prayag29-sahu/prayagsahuportfolio/blob/main/components/layout/Footer.jsx): chrome · Persistent bottom footer · `components/layout/Footer.jsx`
- [Cursor Bubble](https://github.com/prayag29-sahu/prayagsahuportfolio/blob/main/components/ui/CursorBubble.jsx): ui effect · Pointer-following interaction effect · `components/ui/CursorBubble.jsx`
- [Parallax](https://github.com/prayag29-sahu/prayagsahuportfolio/blob/main/components/ui/ParallaxSection.tsx): motion primitive · Scroll-based visual motion wrapper · `components/ui/ParallaxSection.tsx`

### Static Assets

CV and image media consumed by the sections

- [CV PDF](https://github.com/prayag29-sahu/prayagsahuportfolio/blob/main/public/PrayagCV.pdf): static document · Downloadable resume asset · `public/PrayagCV.pdf`
- [Images](https://github.com/prayag29-sahu/prayagsahuportfolio/tree/main/public/images): media library · Portfolio screenshots, certificates, and proof images · `public/images`

### Tooling

Build, typing, and styling configuration

- [Next Config](https://github.com/prayag29-sahu/prayagsahuportfolio/blob/main/next.config.ts): build config · Next.js build/runtime settings · `next.config.ts`
- [Tailwind Config](https://github.com/prayag29-sahu/prayagsahuportfolio/blob/main/tailwind.config.js): style config · Utility CSS configuration · `tailwind.config.js`
- [PostCSS](https://github.com/prayag29-sahu/prayagsahuportfolio/blob/main/postcss.config.js): style pipeline · CSS processing pipeline configuration · `postcss.config.js`
- [ESLint](https://github.com/prayag29-sahu/prayagsahuportfolio/blob/main/eslint.config.mjs): lint config · Repository linting rules · `eslint.config.mjs`

## Connections

- Layout → Home Page: wraps · Global layout renders the portfolio route
- Layout → Globals: imports · Layout includes application-wide styles
- Home Page → Navbar: composes · Page includes shared navigation chrome
- Home Page → Hero: composes · Page starts with the hero section
- Home Page → About: composes · Page stacks the about section
- Home Page → Education: composes · Page includes education content
- Home Page → Education 2: composes · Page includes extended education content
- Home Page → Skills: composes · Page includes skills cards
- Home Page → Projects: composes · Page includes project showcase cards
- Home Page → Achievements: composes · Page includes achievements cards
- Home Page → CTA: composes · Page includes the call to action
- Home Page → Contact: composes · Page ends with contact information
- Home Page → Footer: composes · Page closes with shared footer chrome
- About → About CSS: styles · About section uses dedicated styling
- Hero → Cursor Bubble: uses · Hero likely uses cursor-based interaction
- Hero → Parallax: uses · Hero may use scroll motion effects
- About → Parallax: uses · Section motion wrapper for content reveal
- CTA → Parallax: uses · Call to action may use motion affordance
- Contact → Cursor Bubble: uses · Contact interactions may use pointer effects
- Education → Images: reads · Section consumes static evidence images
- Education 2 → Images: reads · Section consumes static evidence images
- Projects → Images: reads · Project cards use screenshots and media
- Achievements → Images: reads · Achievement cards use certificates and badges
- Contact → CV PDF: reads · Contact section exposes resume download
- Tailwind Config → Globals: drives · Tailwind utility styling supports global CSS
- PostCSS → Globals: processes · PostCSS pipeline transforms styles
- Next Config → Layout: configures · Next build/runtime configuration applies to app
- ESLint → Home Page: checks · Linting covers the app source