Portfolio + Blog Website

A personal portfolio and blog website built with Next.js 16 and TypeScript.
It showcases my work, writing, and experience with a clean, fast, and customizable design.

Overview#

The site is designed to be clean, fast, and easy to customize. It presents my projects and background in a structured way, while the underlying architecture keeps content manageable and scalable.

Features#

  • Easy Configuration — All site data can be changed from the lib/config folder
  • Reorderable Sections — Customize homepage layout via components/sections/constant.ts
  • MDX-Powered Content — Create blogs and portfolio pieces by simply adding .mdx files
  • Smooth Animations — Polished interactions powered by GSAP and Lenis
  • Responsive Design — Looks great on all devices
  • Auto-Generated Resume — Downloadable PDF resume created from configuration
  • Type-Safe — Built with TypeScript for better developer experience
  • SEO-Friendly — Optimized with Next.js App Router and static generation

Tech Stack#

Core Technologies

This project is powered by Next.js 16 and TypeScript, chosen for their reliability, modern features, and strong ecosystem.

The complete tech stack includes:

  • Framework: Next.js 16 (App Router)
  • Language: TypeScript
  • Styling: Tailwind CSS 4
  • Content: Content Collections + MDX
  • Animations: GSAP + Lenis
  • Code Highlighting: Shiki via rehype-pretty-code
  • State Management: Zustand
  • Icons: Lucide React

Project Structure#

The application follows a clean, modular architecture:

├── app/                 # Next.js App Router
│   ├── (pages)/        # Main routes
│   └── page.tsx        # Homepage
│
├── components/
│   ├── sections/       # Homepage sections
│   └── ui/             # Reusable components
│
├── content/
│   ├── blogs/          # Blog posts (.mdx)
│   └── works/          # Portfolio items (.mdx)
│
├── lib/
│   ├── config/         # Site configuration
│   └── utils/          # Utility functions
│
└── public/             # Static assets

Key Design Decisions

  1. Template-First Structure — Driven by metadata and configuration
  2. Modular Components — Clean organization across components, hooks, and utilities
  3. Performance-Focused — Smooth scroll behavior and optimized animations
  4. Content-Driven — MDX-powered blog with custom components

Content System#

I use Content Collections to manage Markdown/MDX content. It replaced my initial plan to use Contentlayer, which is no longer maintained and currently incompatible with Next.js 16.

Content Collections act as a content layer between MDX files and the Next.js app, providing type-safe, validated content with rich Markdown features.

Content Flow

Loading diagram...

Content Features

All content is compiled with enhanced Markdown features:

  • GitHub Flavored Markdown (tables, task lists, strikethrough)
  • Syntax highlighting with Shiki
  • Mermaid diagrams for visual documentation
  • Copy code button on all code blocks
  • Automatic Table of Contents generation
  • Responsive tables and figures

Design & Credits#

The visual design is inspired by the portfolio created by Saurabh Chandre.

I came across his site — schar.dev — and admired its simplicity and interaction quality. Rebuilding it became a personal challenge to study its structure and polish.

I contacted Saurabh during development, and he was incredibly open and helpful, offering clarity on a few design choices. I genuinely appreciate his support.

Design Principles

  • Tailwind CSS for utility-first styling
  • GSAP for smooth, performant animations
  • Lenis for buttery smooth scrolling

Together, these technologies create a consistent and polished visual experience that feels responsive and alive.

Development Highlights#

While building the site, I focused on keeping things modular and easy to extend. Some key achievements:

Architecture

  • Configuration-Driven — Change site content without touching components
  • Section Visibility — Sections automatically show/hide based on content availability
  • Type Safety — TypeScript throughout ensures fewer runtime errors

Performance

  • Optimized Animations — GSAP animations are GPU-accelerated
  • Smooth Scrolling — Lenis provides 60fps scroll interpolation
  • Code Splitting — Dynamic imports for optimal bundle sizes

Developer Experience

  • Hot Module Replacement — Instant feedback during development
  • MDX Hot Reload — Content changes reflect immediately
  • Clear Structure — Easy to understand and extend

I'm continuing to refine transitions, layout spacing, and smaller UI details to make everything feel cohesive.

Configuration System#

The entire site can be customized through simple configuration files:

Personal Information

// lib/config/portfolio.ts
export const portfolioConfig = {
  personalInfo: {
    firstName: "Your Name",
    lastName: "Your Last Name",
    title: "Your Title",
    location: "Your Location",
    email: "your@email.com",
  },
  content: {
    tagline: "Your tagline...",
    about: ["About paragraph 1...", "About paragraph 2..."],
  },
  skills: {
    languages: ["JavaScript", "TypeScript"],
    technologies: ["React", "Next.js"],
    tools: ["Git", "Docker"],
  },
  // ... more config
};

Site Metadata & Visual Settings

// lib/config/site.ts
export const siteConfig: ISiteConfig = {
  footerMarquee: [
    "Frontend Developer",
    "Not a UI/UX guy",
    "React Enthusiast",
    "Code, Coffee, Repeat",
  ],
  includeGitHubInProjects: true,
  siteColor: "#f38020",
  codeTheme: "github-dark",
};

Configuration Options:

  • footerMarquee — Array of strings that scroll continuously in the footer
  • includeGitHubInProjects — Automatically includes GitHub link in projects section when true
  • siteColor — Primary accent color for the site (hex format)
  • codeTheme — Syntax highlighting theme with over 50 available options

Reordering Sections

// components/sections/constant.ts
export const IndexedSections = [
  { component: Blog, label: "Blogs", ... },
  { component: Project, label: "Projects", ... },
  { component: Work, label: "Works", ... },
  // Reorder as needed
];

Lessons Learned#

This project taught me several valuable lessons:

  1. Migration Matters — Choosing maintained dependencies (Content Collections over Contentlayer) prevents future headaches
  2. Animation Performance — GSAP's timeline control is crucial for complex animations
  3. Type Safety Pays Off — TypeScript caught numerous potential runtime errors
  4. Simplicity Scales — Configuration-driven design makes maintenance easier

Conclusion#

This portfolio represents my work and experience through a carefully crafted digital presence. The combination of modern technologies, thoughtful architecture, and attention to detail creates a solid foundation for showcasing projects and sharing knowledge.

The configuration-driven approach makes it easy to keep content fresh and relevant, while the performance optimizations ensure a smooth experience for visitors.

Feel free to explore the live site to see how everything works together.