# saadmansakib47/mahin-portfolio architecture

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

- Interactive diagram: https://gitdiagram.com/saadmansakib47/mahin-portfolio
- Repository: https://github.com/saadmansakib47/mahin-portfolio

## Overview

1. **Overall shape**
   - This is a **single-page, content-driven portfolio site** built with **Next.js 14 App Router**, **TypeScript**, and **Tailwind CSS**.
   - The architecture is intentionally simple: one root page assembles multiple presentational sections from shared data. There is **no backend, API layer, or database**.

2. **Rendering and deployment model**
   - The project is configured for **static export**, so the site is built into plain static files in `out/`.
   - That means the runtime boundary is mostly the browser plus build-time Next.js rendering; deployment can go to any static host.

3. **Application shell**
   - `src/app/layout.tsx` defines the global document shell and metadata.
   - `src/app/globals.css` carries global styling and Tailwind directives.
   - This is the top-level boundary for page-wide layout, typography, and any site-wide styles.

4. **Page composition**
   - `src/app/page.tsx` is the main assembly point.
   - It imports the section components and places them in the final page order, effectively defining the information hierarchy of the portfolio.

5. **Content model and data flow**
   - All portfolio content is centralized in `src/lib/data.ts`.
   - Section components read from this shared content source rather than hardcoding copy locally, which makes the site **data-driven** and easy to update from one place.
   - `src/types/portfolio.ts` defines the TypeScript contracts for that content, keeping the data shape consistent across sections.

6. **Section-level presentation components**
   - The main UI is split into dedicated section folders:
     - `hero/`
     - `skills/`
     - `education/`
     - `experience/`
     - `research/`
     - `achievements/`
     - `footer/`
   - Each section is a mostly self-contained presentational unit, responsible for rendering one portion of the portfolio narrative.

7. **Shared UI primitives**
   - `src/components/ui/Navbar.tsx` and `src/components/ui/SectionHeader.tsx` act as reusable cross-section building blocks.
   - These reduce duplication and enforce consistent navigation and section labeling across the page.

8. **Visual and interaction layer**
   - The README indicates **Framer Motion** for animation and **Lucide React** for icons.
   - These are applied inside the component layer to add motion and symbolic UI detail without introducing any separate state or service architecture.

9. **Assets and fallback behavior**
   - Static assets live under `public/`, including a `photo.jpg` profile image if present.
   - The portfolio supports a graceful fallback: if the photo is missing, a styled monogram placeholder is shown instead, so the hero section remains functional.

10. **Styling system**
    - The site uses **Tailwind CSS** for component-scoped utility styling, with `tailwind.config.ts` and `postcss.config.js` supporting the build pipeline.
    - Styling is handled at the component level, so the layout is driven by composition rather than a large shared CSS architecture.

11. **Primary data-to-UI flow**
    - The main flow is: **content in `src/lib/data.ts` → typed structures in `src/types/portfolio.ts` → section components in `src/components/**` → page assembly in `src/app/page.tsx` → static output**.
    - This makes the repository easy to diagram as a content pipeline feeding a single rendered page.

12. **Important architectural boundary**
    - The key boundary is between **content/configuration** and **presentation**.
    - `data.ts` owns what is shown; the components own how it is displayed; `app/` owns how everything is composed and exported.

Main entry points: [`src/app/page.tsx`](https://github.com/saadmansakib47/mahin-portfolio/blob/main/src/app/page.tsx) (Home page), [`src/lib/data.ts`](https://github.com/saadmansakib47/mahin-portfolio/blob/main/src/lib/data.ts) (Content data), [`src/components/hero/HeroSection.tsx`](https://github.com/saadmansakib47/mahin-portfolio/blob/main/src/components/hero/HeroSection.tsx) (Hero), [`src/components/ui/SectionHeader.tsx`](https://github.com/saadmansakib47/mahin-portfolio/blob/main/src/components/ui/SectionHeader.tsx) (Section header)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App shell"]
  node_layout["Layout<br/>[layout.tsx]"]
  node_page["Home page<br/>next page<br/>[page.tsx]"]
  node_globals["Global CSS<br/>styles<br/>[globals.css]"]
end

subgraph group_content["Content model"]
  node_data["Content data<br/>portfolio data<br/>[data.ts]"]
  node_types["Portfolio types<br/>ts types<br/>[portfolio.ts]"]
end

subgraph group_components["Presentation"]
  node_hero["Hero<br/>section<br/>[HeroSection.tsx]"]
  node_skills["Skills<br/>section<br/>[SkillsSection.tsx]"]
  node_education["Education<br/>section"]
  node_experience["Experience<br/>section"]
  node_research["Research<br/>section"]
  node_achievements["Achievements<br/>section"]
  node_footer["Footer<br/>section<br/>[Footer.tsx]"]
  node_navbar["Navbar<br/>ui primitive<br/>[Navbar.tsx]"]
  node_sectionheader["Section header<br/>ui primitive<br/>[SectionHeader.tsx]"]
end

subgraph group_assets["Assets"]
  node_photo[("Profile photo<br/>static asset")]
  node_public[("Public files<br/>static assets<br/>[README.txt]")]
end

subgraph group_build["Build"]
  node_tailwind["Tailwind<br/>styling build<br/>[tailwind.config.ts]"]
  node_postcss["PostCSS<br/>build config<br/>[postcss.config.js]"]
  node_nextconfig["Next config<br/>export config<br/>[next.config.mjs]"]
end

node_data -->|"typed by"| node_types
node_page -->|"wrapped by"| node_layout
node_page -->|"assembles"| node_hero
node_page -->|"assembles"| node_skills
node_page -->|"assembles"| node_education
node_page -->|"assembles"| node_experience
node_page -->|"assembles"| node_research
node_page -->|"assembles"| node_achievements
node_page -->|"assembles"| node_footer
node_hero -->|"reads"| node_data
node_skills -->|"reads"| node_data
node_education -->|"reads"| node_data
node_experience -->|"reads"| node_data
node_research -->|"reads"| node_data
node_achievements -->|"reads"| node_data
node_footer -->|"reads"| node_data
node_hero -->|"uses"| node_navbar
node_hero -->|"uses"| node_sectionheader
node_skills -->|"uses"| node_sectionheader
node_education -->|"uses"| node_sectionheader
node_experience -->|"uses"| node_sectionheader
node_research -->|"uses"| node_sectionheader
node_achievements -->|"uses"| node_sectionheader
node_page -->|"styles with"| node_globals
node_layout -->|"imports"| node_globals
node_hero -->|"loads"| node_photo
node_hero -->|"falls back to"| node_public
node_globals -->|"enabled by"| node_tailwind
node_postcss -->|"processes"| node_tailwind
node_nextconfig -->|"exports"| node_page

click node_layout "https://github.com/saadmansakib47/mahin-portfolio/blob/main/src/app/layout.tsx"
click node_page "https://github.com/saadmansakib47/mahin-portfolio/blob/main/src/app/page.tsx"
click node_globals "https://github.com/saadmansakib47/mahin-portfolio/blob/main/src/app/globals.css"
click node_data "https://github.com/saadmansakib47/mahin-portfolio/blob/main/src/lib/data.ts"
click node_types "https://github.com/saadmansakib47/mahin-portfolio/blob/main/src/types/portfolio.ts"
click node_hero "https://github.com/saadmansakib47/mahin-portfolio/blob/main/src/components/hero/HeroSection.tsx"
click node_skills "https://github.com/saadmansakib47/mahin-portfolio/blob/main/src/components/skills/SkillsSection.tsx"
click node_education "https://github.com/saadmansakib47/mahin-portfolio/blob/main/src/components/education/EducationSection.tsx"
click node_experience "https://github.com/saadmansakib47/mahin-portfolio/blob/main/src/components/experience/ExperienceSection.tsx"
click node_research "https://github.com/saadmansakib47/mahin-portfolio/blob/main/src/components/research/ResearchSection.tsx"
click node_achievements "https://github.com/saadmansakib47/mahin-portfolio/blob/main/src/components/achievements/AchievementsSection.tsx"
click node_footer "https://github.com/saadmansakib47/mahin-portfolio/blob/main/src/components/footer/Footer.tsx"
click node_navbar "https://github.com/saadmansakib47/mahin-portfolio/blob/main/src/components/ui/Navbar.tsx"
click node_sectionheader "https://github.com/saadmansakib47/mahin-portfolio/blob/main/src/components/ui/SectionHeader.tsx"
click node_photo "https://github.com/saadmansakib47/mahin-portfolio/tree/main/public/assets"
click node_public "https://github.com/saadmansakib47/mahin-portfolio/blob/main/public/README.txt"
click node_tailwind "https://github.com/saadmansakib47/mahin-portfolio/blob/main/tailwind.config.ts"
click node_postcss "https://github.com/saadmansakib47/mahin-portfolio/blob/main/postcss.config.js"
click node_nextconfig "https://github.com/saadmansakib47/mahin-portfolio/blob/main/next.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_layout,node_page,node_globals toneBlue
class node_data,node_types toneAmber
class node_hero,node_skills,node_education,node_experience,node_research,node_achievements,node_footer,node_navbar,node_sectionheader toneMint
class node_photo,node_public toneRose
class node_tailwind,node_postcss,node_nextconfig toneIndigo
```

## Components

### App shell

Next.js application shell and page composition.

- [Layout](https://github.com/saadmansakib47/mahin-portfolio/blob/main/src/app/layout.tsx): next layout · Global document shell and metadata. · `src/app/layout.tsx`
- [Home page](https://github.com/saadmansakib47/mahin-portfolio/blob/main/src/app/page.tsx): next page · Assembles the portfolio sections in order. · `src/app/page.tsx`
- [Global CSS](https://github.com/saadmansakib47/mahin-portfolio/blob/main/src/app/globals.css): styles · Site-wide styles and Tailwind directives. · `src/app/globals.css`

### Content model

Typed portfolio data source and contracts.

- [Content data](https://github.com/saadmansakib47/mahin-portfolio/blob/main/src/lib/data.ts): portfolio data · Centralized portfolio content source. · `src/lib/data.ts`
- [Portfolio types](https://github.com/saadmansakib47/mahin-portfolio/blob/main/src/types/portfolio.ts): ts types · TypeScript contracts for portfolio data. · `src/types/portfolio.ts`

### Presentation

Section components and shared UI primitives.

- [Hero](https://github.com/saadmansakib47/mahin-portfolio/blob/main/src/components/hero/HeroSection.tsx): section · Top-intro section with profile presentation. · `src/components/hero/HeroSection.tsx`
- [Skills](https://github.com/saadmansakib47/mahin-portfolio/blob/main/src/components/skills/SkillsSection.tsx): section · Skills and capabilities presentation. · `src/components/skills/SkillsSection.tsx`
- [Education](https://github.com/saadmansakib47/mahin-portfolio/blob/main/src/components/education/EducationSection.tsx): section · Education history section. · `src/components/education/EducationSection.tsx`
- [Experience](https://github.com/saadmansakib47/mahin-portfolio/blob/main/src/components/experience/ExperienceSection.tsx): section · Work experience section. · `src/components/experience/ExperienceSection.tsx`
- [Research](https://github.com/saadmansakib47/mahin-portfolio/blob/main/src/components/research/ResearchSection.tsx): section · Research or publications section. · `src/components/research/ResearchSection.tsx`
- [Achievements](https://github.com/saadmansakib47/mahin-portfolio/blob/main/src/components/achievements/AchievementsSection.tsx): section · Awards and notable accomplishments. · `src/components/achievements/AchievementsSection.tsx`
- [Footer](https://github.com/saadmansakib47/mahin-portfolio/blob/main/src/components/footer/Footer.tsx): section · Closing site footer. · `src/components/footer/Footer.tsx`
- [Navbar](https://github.com/saadmansakib47/mahin-portfolio/blob/main/src/components/ui/Navbar.tsx): ui primitive · Shared navigation element used across sections. · `src/components/ui/Navbar.tsx`
- [Section header](https://github.com/saadmansakib47/mahin-portfolio/blob/main/src/components/ui/SectionHeader.tsx): ui primitive · Reusable section title component. · `src/components/ui/SectionHeader.tsx`

### Assets

Static files and fallback media.

- [Profile photo](https://github.com/saadmansakib47/mahin-portfolio/tree/main/public/assets): static asset · Optional hero image from public assets. · `public/assets`
- [Public files](https://github.com/saadmansakib47/mahin-portfolio/blob/main/public/README.txt): static assets · Static files served directly at build time. · `public/README.txt`

### Build

Styling and export configuration.

- [Tailwind](https://github.com/saadmansakib47/mahin-portfolio/blob/main/tailwind.config.ts): styling build · Utility CSS framework configuration. · `tailwind.config.ts`
- [PostCSS](https://github.com/saadmansakib47/mahin-portfolio/blob/main/postcss.config.js): build config · CSS processing configuration. · `postcss.config.js`
- [Next config](https://github.com/saadmansakib47/mahin-portfolio/blob/main/next.config.mjs): export config · Next.js configuration for static export. · `next.config.mjs`

## Connections

- Content data → Portfolio types: typed by · Content structure is validated against shared TypeScript contracts.
- Home page → Layout: wrapped by · The page is rendered inside the global app shell.
- Home page → Hero: assembles · Home page composes the hero section.
- Home page → Skills: assembles · Home page composes the skills section.
- Home page → Education: assembles · Home page composes the education section.
- Home page → Experience: assembles · Home page composes the experience section.
- Home page → Research: assembles · Home page composes the research section.
- Home page → Achievements: assembles · Home page composes the achievements section.
- Home page → Footer: assembles · Home page ends with the footer section.
- Hero → Content data: reads · Hero content is sourced from shared portfolio data.
- Skills → Content data: reads · Skills section renders from centralized content.
- Education → Content data: reads · Education section renders from centralized content.
- Experience → Content data: reads · Experience section renders from centralized content.
- Research → Content data: reads · Research section renders from centralized content.
- Achievements → Content data: reads · Achievements section renders from centralized content.
- Footer → Content data: reads · Footer may use shared portfolio content.
- Hero → Navbar: uses · Hero or page-level navigation uses the shared navbar primitive.
- Hero → Section header: uses · Section styling is standardized through shared header patterns.
- Skills → Section header: uses · Section titles use the shared header primitive.
- Education → Section header: uses · Section titles use the shared header primitive.
- Experience → Section header: uses · Section titles use the shared header primitive.
- Research → Section header: uses · Section titles use the shared header primitive.
- Achievements → Section header: uses · Section titles use the shared header primitive.
- Home page → Global CSS: styles with · Global CSS provides the page-wide styling foundation.
- Layout → Global CSS: imports · App shell applies the global stylesheet.
- Hero → Profile photo: loads · Hero can display the optional profile image asset.
- Hero → Public files: falls back to · Fallback asset handling is backed by static public files.
- Global CSS → Tailwind: enabled by · Global CSS relies on Tailwind directives.
- PostCSS → Tailwind: processes · PostCSS pipeline supports Tailwind compilation.
- Next config → Home page: exports · Next configuration enables static site output.