kab5der4/portfolio-website

Purpose and runtime

A single-page personal portfolio built with Next.js, React, and TypeScript. It presents professional profile content, skills, experience, projects, contact details, and a downloadable resume. It runs as a Next.js application locally and is deployed to Vercel per the README.

Primary application entry points:

• src/app/layout.tsx defines the shared document/application shell.

• src/app/page.tsx assembles the portfolio page.

• src/app/globals.css provides global visual styling.

App composition and navigation

The root page is a vertically composed landing page rather than a multi-route product application. src/app/page.tsx coordinates the major content sections and shared chrome:

• src/components/layout/Navbar.tsx provides top-level in-page navigation.

• src/components/layout/Footer.tsx closes the page and likely contains secondary links/contact information.

• Section anchors and navigation create the primary control flow: visitor selects a navbar link, then moves within the same document.

Content sections

Portfolio content is separated into independently maintainable React section components:

• src/components/sections/HeroSection.tsx

• src/components/sections/AboutSection.tsx

• src/components/sections/ExperienceSection.tsx

• src/components/sections/ProjectsSection.tsx

• src/components/sections/SkillsSection.tsx

• src/components/sections/ContactSection.tsx

These components are the core presentation boundary: portfolio data and markup remain localized by page domain while page.tsx controls section ordering.

Design-system primitives

Reusable UI components centralize the glassmorphism visual language and decorative elements:

• src/components/ui/GlassCard.tsx is the likely shared frosted-glass content container.

• src/components/ui/GeometricSeparator.tsx supplies repeated visual separation between page areas.

• src/components/ui/Grainient.tsx and src/components/ui/Grainient.css implement the textured/gradient background effect.

This boundary prevents repeated styling structures across content sections and supports consistent responsive rendering.

Animation flow

Framer Motion is the declared animation runtime. Reveal and micro-interaction behavior is encapsulated rather than embedded across every section:

• src/components/ui/ScrollReveal.tsx provides viewport/scroll-triggered entrance behavior.

• src/components/ui/Grainient.tsx likely owns animated background rendering.

• Section components under src/components/sections/ consume these presentational capabilities.

The main performance-sensitive boundary is client-side animation and viewport interaction versus static portfolio content rendered through Next.js.

Assets and external boundaries

The only explicit downloadable asset is:

• public/resume.pdf

Next.js serves this file directly from the public asset path for the “Download Resume” action. No backend, database, authentication system, API integration, or third-party business service is represented in the repository tree. Deployment infrastructure is Vercel, while local development uses the Node.js/npm and Next.js toolchain defined by package.json.