How saadmansakib47/mahin-portfolio works
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: page.tsx Home page · data.ts Content data · HeroSection.tsx Hero · SectionHeader.tsx Section header
Components 19
App shell
Next.js application shell and page composition.
- Layout · Global document shell and metadata.
src/app/layout.tsx - Home page · Assembles the portfolio sections in order.
src/app/page.tsx - Global CSS · Site-wide styles and Tailwind directives.
src/app/globals.css
Content model
Typed portfolio data source and contracts.
- Content data · Centralized portfolio content source.
src/lib/data.ts - Portfolio types · TypeScript contracts for portfolio data.
src/types/portfolio.ts
Presentation
Section components and shared UI primitives.
- Hero · Top-intro section with profile presentation.
src/components/hero/HeroSection.tsx - Skills · Skills and capabilities presentation.
src/components/skills/SkillsSection.tsx - Education · Education history section.
src/components/education/EducationSection.tsx - Experience · Work experience section.
src/components/experience/ExperienceSection.tsx - Research · Research or publications section.
src/components/research/ResearchSection.tsx - Achievements · Awards and notable accomplishments.
src/components/achievements/AchievementsSection.tsx - Footer · Closing site footer.
src/components/footer/Footer.tsx - Navbar · Shared navigation element used across sections.
src/components/ui/Navbar.tsx - Section header · Reusable section title component.
src/components/ui/SectionHeader.tsx
Assets
Static files and fallback media.
- Profile photo · Optional hero image from public assets.
public/assets - Public files · Static files served directly at build time.
public/README.txt
Build
Styling and export configuration.
- Tailwind · Utility CSS framework configuration.
tailwind.config.ts - PostCSS · CSS processing configuration.
postcss.config.js - Next config · Next.js configuration for static export.
next.config.mjs
Connections 30
- 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.