Personal Portfolio Website

A fully responsive personal portfolio website designed to showcase my work, share my thoughts through a blog, and provide an interactive user experience. This project was built from the ground up using modern web technologies.

Development Duration: Ongoing

Note: This live site is the project itself. Source code is privately maintained for security purposes and can be shared upon request.

Features

Core Features

3D Landing Card – A visually immersive intro with tilt effect, glassmorphism, and dynamic shadows for a standout visual experience.
Dynamic Content – Blog posts and project pages are rendered using MDX, blending Markdown with React components.
Responsive Design – Adaptive layout optimized across mobile, tablet, and desktop viewports with fluid breakpoints.
Light/Dark Theming – Supports system-based and user-controlled color themes with smooth transitions.
Morphing Dialog System – Advanced modal dialogs with smooth morphing animations and portal-based rendering.
Tilt Interactive Cards – 3D tilt effects on cards and interactive elements that respond to mouse movement.

Interactive Elements

Framer Motion Animations – Smooth, interactive transitions for buttons, sections, and interactions across the UI.
Command Menu (CMD+K) – A fast-access command palette for quick page and section navigation.
Floating Dynamic Dock – A draggable, persistent dock that users can position anywhere on the screen for quick access to navigation options and controls. The dock intelligently remembers its position between page visits and adapts to viewport changes.
Magnetic Button Effects – Interactive buttons with magnetic hover effects and smooth transitions.
Border Trail Animations – Animated border effects that follow cursor movement on interactive elements.
Spotlight Effects – Dynamic spotlight animations that follow cursor movement with customizable colors and blur effects.
Glow Effects – Multi-colored glow animations with configurable color schemes and intensity.
Text Effects – Animated text reveals with per-character or per-word animation presets.
Animated Numbers – Smooth number transitions and counting animations for statistics and metrics.
Sliding Numbers – Smooth sliding transitions for numeric displays and counters.

Content & Navigation

Search Bar with Live Data – A search feature that pulls results from a connected database, allowing instant access to posts, projects, or any stored content.
Dynamic Skill Sliders – Animated skill showcases with infinite scrolling and hover effects.
Interactive Project Cards – Hover-activated project previews with video demonstrations.
Blog System – Full-featured blog with MDX support, syntax highlighting, and reading time estimates.
Spinning Text Elements – Circular text animations around avatars and profile images.
Custom Carousel System – Advanced carousel with embla-carousel integration, smooth transitions, and touch/swipe support.
Swipe Indicators – Visual indicators for carousel navigation with auto-hide functionality.

Entertainment & Engagement

Playable Snake Game – A retro-inspired embedded mini-game for a touch of interactivity and fun.
Interactive AI Chatbot – An intelligent assistant that provides information about my background, skills, and projects while helping visitors navigate the site efficiently.
Live Clock Display – Real-time clock component showing current time with elegant typography.

Technical Features

SEO Optimization – Comprehensive meta tags, Open Graph, and Twitter Card support.
Performance Optimization – Lazy loading, image optimization, and efficient bundle splitting.
Accessibility – ARIA labels, keyboard navigation, and screen reader compatibility.
Toast Notification System – User feedback system for actions and interactions.
Custom Error Handling – Graceful error boundaries and fallback components.
Progressive Web App (PWA) Ready – Offline capabilities and app-like experience.
Click Outside Detection – Custom hooks for handling clicks outside components.
Mobile Detection – Smart mobile device detection for responsive behavior.
Animated Grid Background – Dynamic animated background patterns that enhance visual appeal.

UI/UX Enhancements

Radix UI Integration – Accessible, unstyled UI primitives for consistent component behavior.
Custom Avatar System – Avatar components with fallbacks and lazy loading.
Advanced Dialog System – Multiple dialog types including morphing dialogs and standard modals.
Command Palette Integration – Quick access to all site functionality through keyboard shortcuts.
Theme Persistence – Remembers user theme preferences across sessions.
Loading States – Smooth loading animations and skeleton screens for better UX.

Tech Stack

Frontend Framework & Language

Framework: Next.js 15 (App Router)
Language: TypeScript
React: 19.0.0

Styling & UI

Styling: Tailwind CSS 4.0
UI Components: Custom components with Radix UI primitives
Animations: Framer Motion (motion library)
Typography: Geist font family (variable fonts)

Content Management

Content: MDX with @next/mdx
Syntax Highlighting: Sugar High
Typography Plugin: @tailwindcss/typography

Development Tools

Linting: ESLint with Next.js config
Code Formatting: Prettier with Tailwind CSS plugin
Package Manager: npm
Build Tool: Next.js built-in bundler

Deployment & Hosting

Deployment: Vercel
Domain: Custom domain with SSL
CDN: Vercel Edge Network
Analytics: Built-in Vercel Analytics

Additional Libraries

Theme Management: next-themes
Icons: Lucide React
Carousel: Embla Carousel React
Command Palette: cmdk
Utilities: clsx, tailwind-merge, class-variance-authority

Challenges Faced

MDX Integration: Integrating MDX with Next.js required troubleshooting rendering issues and configuring loaders to ensure seamless component usage within markdown content.
Framer Motion: Crafting smooth, performant animations demanded a deeper understanding of Framer Motion’s advanced features and fine-tuning transition behaviors.
Responsive Design: Achieving a consistent, high-quality layout across varying screen sizes involved iterative adjustments and testing for mobile, tablet, and desktop compatibility.
Mobile UI Bugs & Device-Specific Glitches: Encountered performance ismobile devices—leading to degraded UI responsiveness. Some security headers were initially missing, which impacted best practices. A persistent challenge remains on iOS 26 beta (iPhone 15 Pro) where the spotlight effect causes rendering glitches and high performance consumption. Interestingly, this issue doesn’t appear on other iOS devices or platforms. The likely culprit seems to be the new “liquid glass” visual layer in the OS, which interferes with blur asues when implementing isMobile logic—especially on nd lighting effects.
Logic Issues: I have encountered challenges with animations, UI/UX logics, 3D logic, and layout problems, requiring iterative debugging and testing to ensure a seamless user experience.

Project Architecture

The project follows a modern Next.js App Router architecture with a clean separation of concerns, emphasizing maintainability, scalability, and developer experience.

Directory Structure Overview

minimalist_portfolio/
├── app/                    # Next.js App Router (src)
│   ├── layout.tsx         # Root layout with providers
│   ├── page.tsx           # Landing page
│   ├── globals.css        # Global styles and CSS variables
│   ├── data.ts            # Static data and type definitions
│   ├── blog/              # Blog posts and layouts
│   │   ├── layout.tsx     # Blog-specific layout
│   │   └── [post]/        # Individual blog post directories
│   └── projects/          # Project pages and layouts
│       ├── layout.tsx     # Project-specific layout
│       └── [project]/     # Individual project directories
├── components/            # Reusable React components
│   ├── ui/               # Base UI components (buttons, cards, etc.)
│   ├── core/             # Core app components (clock, backgrounds)
│   ├── motion-primitives/ # Animation and motion components
│   └── games/            # Game components (snake, etc.)
├── hooks/                # Custom React hooks
├── lib/                  # Utility functions and constants
├── public/               # Static assets
└── Configuration files   # Next.js, TypeScript, Tailwind, etc.

Key Architectural Decisions

1. Component Organization

components/ui/: Base design system components following atomic design principles
components/core/: Application-specific components (Clock, AnimatedGridBackground)
components/motion-primitives/: Reusable animation components built with Framer Motion
components/games/: Interactive entertainment components

2. Data Management

Static Data: Centralized in app/data.ts with TypeScript interfaces
Content Management: MDX files for blog posts and project pages
Type Safety: Comprehensive TypeScript types for all data structures

3. Styling Architecture

Tailwind CSS: Utility-first CSS framework with custom configuration
CSS Variables: Dynamic theming support in globals.css
Component Variants: Using class-variance-authority for component styling patterns

4. Routing & Navigation

File-based Routing: Next.js App Router with nested layouts
Dynamic Routes: [slug] patterns for blog posts and projects
Metadata Generation: Dynamic SEO optimization per route

Component Architecture Patterns

1. Layout Composition

// Root Layout (app/layout.tsx)
RootLayout
├── ThemeProvider (next-themes)
├── AlertProvider (toast system)
└── LayoutClient (conditional components)
    ├── ConditionalHeader
    ├── ConditionalFooter
    └── CommandMenu

2. Motion Components

Consistent animation patterns using Framer Motion
Reusable motion primitives for common animations
Performance-optimized with will-change and transform properties

3. Theme System

System-aware dark/light mode switching
CSS custom properties for consistent theming
Tailwind CSS dark mode utilities

Performance Optimizations

1. Code Splitting

Automatic code splitting with Next.js App Router
Dynamic imports for heavy components
Lazy loading for non-critical components

2. Image Optimization

Next.js Image component with automatic optimization
WebP format support with fallbacks
Responsive image sizing

3. Bundle Optimization

Tree shaking for unused code elimination
Minimized CSS output with Tailwind CSS purging
Efficient JavaScript bundling

Development Workflow

1. Type Safety

Strict TypeScript configuration
Comprehensive type definitions for all data
ESLint integration for code quality

2. Code Quality

Prettier for consistent code formatting
ESLint with Next.js and MDX support
Pre-commit hooks for quality assurance

3. Content Management

MDX for rich content authoring
Syntax highlighting with Sugar High
Automatic metadata extraction

Key Directory Explanations

app/: Next.js App Router structure containing all routes, pages, and layouts with file-based routing
components/: Modular, reusable React components organized by functionality and feature
lib/: Utility functions, constants, and shared business logic
public/: Static assets including images, icons, fonts, and downloadable files
hooks/: Custom React hooks for shared stateful logic
Blog Posts: Stored as MDX files within individual directories under app/blog/
Project Pages: Each project has its own directory under app/projects/ with MDX content

Scalability Considerations

Modular Architecture: Easy to add new features without affecting existing code
Component Reusability: Consistent patterns across the application
Performance Monitoring: Built-in analytics and performance tracking
SEO Optimization: Automatic sitemap generation and metadata management

Key Features Showcase

Landing Page Experience

The homepage features a sophisticated 3D carousel showcasing key information about me, including education, skills, and projects. The animated grid background creates depth while maintaining performance across devices.

Interactive Elements

Command Palette: Quick navigation system accessible via CMD+K (or Ctrl+K on Windows)
Dynamic Dock: Floating navigation that adapts to user preferences and screen size
Magnetic Interactions: Buttons and interactive elements respond to cursor proximity
Smooth Transitions: Page transitions and micro-interactions enhance user experience

Content Management

The site uses MDX for content management, allowing rich media integration within markdown files. Blog posts and project pages are dynamically rendered with proper SEO metadata.

Performance Features

Optimized Images: Automatic WebP conversion and responsive sizing
Lazy Loading: Components and images load as needed
Code Splitting: Automatic bundle optimization
Edge Caching: Fast global content delivery

Future Enhancements

Analytics Dashboard: Visitor insights and content performance metrics
Content Management System: Admin interface for easier content updates
Newsletter Integration: Email subscription system for blog updates
Portfolio Generator: Template system for creating similar portfolios
Advanced Search: Full-text search across all content
Commenting System: Interactive discussions on blog posts
Multi-language Support: Internationalization for global audience

Demo Preview

Demo here - Experience the live portfolio website