Personal Portfolio Website

A modern, performant portfolio website showcasing projects, skills, and technical writing with an engaging user experience.

🚀 Technologies & Tools

Core Framework

• Next.js 16 - React framework with App Router, server components, and Turbopack
• React 19 - Latest React with improved concurrent rendering and server components
• TypeScript 5 - Full type safety across the entire application

Styling & UI Components

• Tailwind CSS 4 - Utility-first CSS framework with custom design system
• @tailwindcss/typography - Beautiful typography defaults for markdown content
• shadcn/ui - Accessible, customizable component system built on Radix UI
• Radix UI - Unstyled, accessible UI primitives
• Lucide React - Clean, consistent icon library with 1000+ icons
• class-variance-authority - Type-safe component variants
• tailwind-merge - Intelligently merge Tailwind classes
• clsx - Tiny utility for constructing className strings

Animation & Interactive Effects

• Framer Motion - Production-ready React animation library
• tsParticles - Lightweight particle animations and interactive backgrounds
  • @tsparticles/engine - Core particle engine
  • @tsparticles/react - React integration
  • @tsparticles/slim - Optimized bundle with essential features

Theming

• next-themes - Perfect dark mode with system preference detection and no flash

Content Processing & Markdown

• unified - Interface for parsing, transforming, and serializing content
• remark-parse - Markdown parser
• remark-rehype - Transform markdown (remark) to HTML (rehype)
• rehype-highlight - Syntax highlighting for code blocks
• rehype-stringify - Serialize HTML

Development Tools

• pnpm - Fast, disk space efficient package manager
• ESLint 9 - Linting with Next.js recommended configuration
• React Compiler - Automatic optimization and memoization
• PostCSS - CSS transformations with Tailwind integration

✨ Features

• 🎨 Modern Design - Clean, professional interface with smooth animations
• 🌓 Dark Mode - Seamless theme switching with system preference support
• 📝 Blog System - Markdown-based technical writing with syntax highlighting
• 💼 Project Showcase - Grid layout displaying featured projects
• ⚡ Performance - Optimized with Next.js App Router and React Server Components
• 📱 Responsive - Mobile-first design that works on all devices
• ♿ Accessible - Built with accessibility in mind using Radix UI primitives
• 🔍 SEO Optimized - Proper meta tags and semantic HTML structure
• ✨ Interactive UI - Particle effects and smooth transitions

🏁 Getting Started

Prerequisites

• Node.js 20 or later
• pnpm 10.29.2 (enforced via packageManager field)

Installation

# Install dependencies
pnpm install

Development

# Start development server with hot reload
pnpm dev

Open http://localhost:3000 to view the site.

Build

# Create optimized production build
pnpm build

# Start production server
pnpm start

Linting

# Run ESLint
pnpm lint

📁 Project Structure

src/
├── app/                    # Next.js App Router
│   ├── blog/              # Blog listing and dynamic post pages
│   ├── projects/          # Projects showcase
│   ├── layout.tsx         # Root layout with theme provider
│   ├── page.tsx           # Homepage
│   └── template.tsx       # Page transition wrapper
├── components/
│   ├── sections/          # Page sections (Hero, Skills, Experience, etc.)
│   ├── ui/               # shadcn/ui components (Badge, Button, Card, etc.)
│   ├── animated.tsx       # Animated wrapper components
│   ├── footer.tsx         # Site footer
│   ├── navbar.tsx         # Navigation bar
│   ├── particles-background.tsx  # tsParticles configuration
│   ├── theme-provider.tsx # next-themes provider
│   └── theme-toggle.tsx   # Dark mode toggle
├── content/              # Markdown blog posts
│   ├── *.md
└── lib/
    ├── data.ts          # Site configuration and static content
    ├── markdown.ts      # Markdown processing utilities
    └── utils.ts         # Helper functions (cn, etc.)

📄 License

See the LICENSE file for details.