Portfolio Website

Modern Portfolio Website

A comprehensive portfolio website built with Next.js 14, featuring a dynamic project showcase, interactive animations, and modern design aesthetics.

🚀 Key Features

• Dynamic Project Showcase: Interactive project galleries with desktop and mobile view sliders
• Responsive Design System: Custom Tailwind CSS configuration with advanced color theming
• Interactive Animations: Smooth transitions, hover effects, and orbital animations
• Project Detail Pages: Dynamic routing with slug-based URLs for individual project pages
• Markdown Content Support: Rich content rendering for project descriptions
• Mobile-First Design: Optimized viewing experience across all device sizes
• Modern UI Components: Custom-built components with glassmorphism and gradient effects
• Performance Optimized: Next.js 14 with optimized images and lazy loading

🛠️ Technologies Used

• Frontend: Next.js 14, React, TypeScript
• Styling: Tailwind CSS with custom theme configuration
• Content Management: JSON-based project data with markdown support
• Image Optimization: Next.js Image component with responsive sizing
• Animations: CSS animations with custom keyframes
• Routing: Dynamic routes for project details
• Icons: Custom SVG icons and social media integrations

🎨 Design Highlights

• Advanced Color System: Custom color palette with primary, secondary, and accent variations
• Theme Variables: Comprehensive CSS custom properties using OKLCH color space
• Interactive Elements: Hover animations, scale transforms, and smooth transitions
• Component Library: Reusable UI components with consistent styling
• Typography: Funnel Display font with custom weight variations
• Layout System: CSS Grid and Flexbox for responsive layouts
• Visual Effects: Gradient backgrounds, glassmorphism, and shadow effects

📂 Project Structure

• Pages: Home, About, Projects, Individual Project Details
• Dynamic Routes: /projects/[slug] for project-specific pages
• Components: Modular component architecture with sections and UI elements
• Data Management: JSON-based project data with image galleries
• Styling: Global CSS with utility classes and component-specific styles
• Assets: Optimized images and icons for projects and branding

🌟 Special Features

• Dual View Galleries: Desktop and mobile mockups with navigation controls
• Project Metadata: Role, technologies, live links, and GitHub integration
• Responsive Navigation: Mobile-friendly navigation with smooth interactions
• SEO Optimization: Dynamic meta tags and structured project URLs
• Accessibility: Proper semantic HTML and keyboard navigation support

This portfolio demonstrates modern web development practices, advanced CSS techniques, and responsive design principles while showcasing professional project work and technical expertise.