A modern, responsive portfolio website built with Next.js 15, TypeScript, and Tailwind CSS v4, designed to showcase my journey, projects, community work, and technical profile.
🏆 Status: COMPLETE & PRODUCTION-READY
All phases completed successfully. The portfolio is fully optimized for performance, SEO, and real-world usage.
🚀 Quick Start
npm install
npm run dev
npm run build
Visit: 👉 http://localhost:3000
✨ Features Implemented Phase 1: Core Components ✅
Responsive Navigation Bar
Mobile-first design with hamburger menu
Smooth animations using Framer Motion
Light/Dark mode toggle (next-themes)
Hero Section
Gradient heading with my name: markk Shukla
AI / Tech themed design aesthetic
Call-to-action buttons (Projects / Contact)
Scroll-down indicator
Footer
Personal contact details
Social links (GitHub)
Quick navigation links
Phase 2: Content Sections ✅
About Section
Personal introduction & journey
Education: Lloyd Institute of Engineering & Technology
Career + community summary
Skills Section
Categorized tech stack
Frontend, Backend, AI, Tools, and Community skills
Animated progress indicators
Experience Section Includes real experiences:
IBM AI Intern
DevSphereIndia – Event Manager
MakeIntern – App Development Intern
Student Ambassador – LetsUpgrade
Co-founder – Coders Circle
Projects Gallery Featuring:
SyncVerse01 — AI Roadmap Generator
Coders Circle Community Dashboard
Student Result Analyzer
Portfolio V1 (HTML, CSS, JS)
Achievements Section Includes:
Hack India — Top 15
ZeroDay Apocalypse (GDSC) — Top 15
Hack With Uttar Pradesh — Top 50 / 2500 Teams
Co-founder of Coders Circle — 1500+ members
Phase 3: Interactive Features ✅
Contact Form
Zod validation
Real-time error handling
Success confirmation states
UI Enhancements
Motion animations with Framer Motion
Floating Social Icons
Scroll-to-top button
Modern glass-morphism effects
Custom 404 Page
Phase 4–5: Performance & SEO ✅
SEO optimized with:
Dynamic meta tags
Open Graph + Twitter preview
JSON-LD Structured data
Sitemap & robots.txt
Performance features:
Image optimization
Lazy loading
Code splitting
Production builds optimized for deployment
🛠 Tech Stack
Framework: Next.js 15 (App Router)
Language: TypeScript
Styling: Tailwind CSS v4
Animation: Framer Motion
3D / Visuals: Three.js + React Three Fiber
Auth / DB (optional): Supabase
UI Components: shadcn/ui + Aceternity UI inspired
Icons: Lucide React
Theme Management: next-themes
🎨 Theme & Design
Primary Color: Tech Blue / Indigo
Accent Color: Neon Teal
Theme: Dark-first with light mode support
Inspired by modern startup portfolios + developer SaaS UI
📁 Project Structure src/ ├── app/ # Next.js app directory ├── components/ # React components │ ├── ui/ # Reusable UI components │ ├── layout/ # Navbar, Footer, Layout │ ├── sections/ # Main page sections │ └── 3d/ # Three.js visual components ├── data/ # Static content (projects, skills, experience) ├── lib/ # Utilities and constants └── types/ # TypeScript interfaces
🌍 Live Projects Integrated
SyncVerse AI Roadmap Generator
Coders Circle Community Dashboard
Student Result Analyzer
Personal Portfolio V1
📝 License
© 2025 markk Shukla. All rights reserved."# portfolio2.0"