How theunstopabble/gautam_portfolio works
1. What this repo is
- A mostly static, recruiter-focused personal portfolio built with Next.js App Router, React 19, TypeScript, and Tailwind/shadcn UI.
- The architecture is content-first: pages are composed from reusable section components and file-based data, not from a database or backend service.
2. Route structure
- src/app/page.tsx is the main landing page and renders the full portfolio as a single long-form experience.
- src/app/projects/[id]/page.tsx provides per-project detail pages using a dynamic route.
- src/app/privacy/page.tsx is a separate informational route.
- src/app/not-found.tsx handles 404s.
3. Page composition model
- The home page is assembled from section components in src/components/home/ such as Hero, Experience, Projects, Skills, Education, About, Contact, and Footer.
- src/components/layout/Navbar.tsx provides top-level navigation and is the main global UI element outside the content sections.
- This makes the site easy to diagram as “one page shell + modular sections.”
4. Content/data boundary
- Project content lives in src/data/projects.ts and is consumed by both the home projects grid and the dynamic project detail route.
- src/types.ts defines the shared shape for portfolio data, keeping the sections and route pages aligned.
- This is the key data flow in the repo: typed static data → section components → rendered pages.
5. Project showcase subsystem
- The projects area is split into a wrapper (Projects.tsx), a card component (ProjectCard.tsx), and a deeper modal/detail experience (DeepDiveModal.tsx).
- The project route [id] likely reuses the same project dataset to render dedicated detail pages.
- Public screenshots and other assets under public/projects support the visual showcase.
6. Shared UI system
- src/components/ui/ contains reusable shadcn-style primitives such as buttons, cards, dialogs, sheets, tabs, tooltips, avatars, separators, badges, and scroll areas.
- These components form the design-system layer beneath the portfolio sections.
- src/lib/utils.ts holds shared helper logic used across UI composition.
7. Styling and visual system
- src/app/globals.css, tailwind.config.ts, and postcss.config.mjs define the styling pipeline.
- The README indicates a “premium dark UI” with glassmorphism, gradients, and motion effects, so the visual layer is a core part of the architecture rather than just decoration.
- components.json suggests shadcn configuration is part of the UI generation/setup.
8. SEO and discoverability subsystem
- src/app/layout.tsx, src/app/robots.ts, and src/app/sitemap.ts handle global metadata and crawler-friendly routing.
- src/lib/structured-data.ts likely generates JSON-LD or similar structured metadata for search engines.
- This repo is optimized for indexing and sharing, which matters for a portfolio intended to be discovered by recruiters.
9. IndexNow and search engine notification
- src/app/api/indexnow/route.ts is the only explicit API route in the tree.
- It exists to notify search engines when content changes, which fits the site’s SEO-first architecture.
- This is a lightweight server-side boundary in an otherwise static app.
10. Assets and static delivery
- The public/ directory stores images, text files, and route-accessible assets used by the pages and SEO-related features.
- Because the site is largely static and content is file-based, it can be pre-rendered and served efficiently on Vercel.
- The deployment model in the README reinforces that there is no runtime persistence layer.
11. External touchpoints
- User actions primarily lead to outbound links: GitHub, LinkedIn, email, phone, and live project demos.
- The “Experience” section also links to verified internship certificates, which act as external proof points.
- These are presentation-time integrations rather than service-to-service dependencies.
12. Overall architectural shape
- Think of the app as: Next.js shell + static content model + reusable UI primitives + SEO infrastructure + a single indexing API.
- The main diagram boundaries are between:
- route pages in src/app/
- reusable sections/components in src/components/
- typed content in src/data/ and src/types.ts
- SEO/infrastructure helpers in src/lib/ and the app-level metadata files.
Main entry points: page.tsx Home page · button.tsx UI primitives · projects.ts Projects data · layout.tsx Root layout
Components 29
App routes
Next.js route layer, page composition, metadata, and API boundary.
- Root layout · Defines the global shell, metadata, and site-wide providers.
src/app/layout.tsx - Home page · Main long-form portfolio landing page that assembles the full experience.
src/app/page.tsx - Project detail · Per-project page rendered from the project dataset.
src/app/projects/[id]/page.tsx - Privacy page · Standalone informational route.
src/app/privacy/page.tsx - 404 page · Fallback page for unmatched routes.
src/app/not-found.tsx - Robots · Crawler instructions for search engines.
src/app/robots.ts - Sitemap · URL index for discoverability and sharing.
src/app/sitemap.ts - IndexNow API · Notifies search engines when content changes.
src/app/api/indexnow/route.ts
Components
Reusable portfolio sections and UI primitives.
- Navbar · Top-level navigation used across the portfolio.
src/components/layout/Navbar.tsx - Hero · Opening section of the home page.
src/components/home/Hero.tsx - Experience · Work history and proof points.
src/components/home/Experience.tsx - Projects · Project showcase section on the home page.
src/components/home/Projects.tsx - Project card · Summary card for a single project entry.
src/components/home/ProjectCard.tsx - Deep dive · Expanded project detail experience used from the showcase.
src/components/home/DeepDiveModal.tsx - Skills · Technology and capability summary.
src/components/home/Skills.tsx - Education · Academic background section.
src/components/home/Education.tsx - About · Personal summary and profile context.
src/components/home/About.tsx - Contact · Outbound contact and profile links.
src/components/home/Contact.tsx - Footer · Bottom-of-page site footer.
src/components/home/Footer.tsx - FAQ · Supplementary question-and-answer content.
src/components/home/FAQ.tsx - UI primitives · Reusable shadcn-style components for buttons, cards, dialogs, sheets, tabs, tooltips, avatars, separators, badges, and scroll areas.
src/components/ui/button.tsx
Content and helpers
Static data, shared types, and utility/SEO helpers.
- Projects data · Typed static project dataset consumed by pages and showcase components.
src/data/projects.ts - Shared types · Common data shapes for portfolio content.
src/types.ts - Structured data · Builds JSON-LD or similar metadata for search engines.
src/lib/structured-data.ts - Utils · Shared utility helpers for component composition.
src/lib/utils.ts - Styling pipeline · Global CSS and Tailwind/PostCSS configuration for the visual system.
src/app/globals.css - shadcn config · Configuration for generated UI primitives and component conventions.
components.json
Static assets
Public files used for screenshots, verification, and crawler-facing content.
- Project assets · Screenshots and showcase media used in project pages and cards.
public/projects - Public text · Crawler and LLM-facing text assets in the public directory.
public/llms.txt
Connections 34
- Root layout → Navbar: renders · The global layout includes the top-level navigation.
- Root layout → Styling pipeline: loads · The app shell applies global styling and theme rules.
- Root layout → Structured data: injects · Global metadata can include structured SEO data.
- Home page → Hero: composes · Home page starts with the hero section.
- Home page → Experience: composes · Home page includes the experience section.
- Home page → Projects: composes · Home page includes the project showcase.
- Home page → Skills: composes · Home page includes the skills section.
- Home page → Education: composes · Home page includes the education section.
- Home page → About: composes · Home page includes the about section.
- Home page → Contact: composes · Home page includes the contact section.
- Home page → Footer: composes · Home page ends with the footer.
- Home page → FAQ: composes · Home page includes supplementary FAQ content.
- Project detail → Projects data: reads · Dynamic project pages resolve content from the project dataset.
- Project detail → Project card: reuses · Project detail pages share presentation patterns with cards.
- Projects → Project card: renders · Project grid is built from reusable cards.
- Projects → Deep dive: opens · Showcase section can expand into a deeper modal view.
- Project card → Projects data: maps · Each card is populated from static project records.
- Deep dive → Projects data: reads · The detailed modal uses the same project data source.
- Projects data → Shared types: typed by · Project records follow shared portfolio types.
- Contact → Public text: links to · Contact and discoverability content can reference public text assets.
- Robots → Public text: supports · Crawler-facing text assets complement robots directives.
- Sitemap → Projects data: enumerates · Sitemap can reflect project-driven routes.
- Sitemap → Privacy page: includes · Sitemap includes standalone informational routes.
- Robots → Sitemap: points to · Robots rules complement the sitemap.
- IndexNow API → Projects data: signals · IndexNow notifications are triggered by content changes.
- UI primitives → Utils: uses · UI primitives rely on shared helpers.
- UI primitives → shadcn config: configured by · Primitive generation and conventions follow the shadcn config.
- Hero → UI primitives: uses · Sections are assembled from shared UI building blocks.
- Experience → UI primitives: uses · Section content is styled with common primitives.
- Skills → UI primitives: uses · Section content is styled with common primitives.
- Education → UI primitives: uses · Section content is styled with common primitives.
- About → UI primitives: uses · Section content is styled with common primitives.
- Contact → UI primitives: uses · Section content is styled with common primitives.
- Project detail → Project assets: displays · Project detail pages surface screenshot and showcase assets.