🚀 Personal Portfolio

Modern multi-domain portfolio built with Next.js 16, React 19, TypeScript, MDX, TailwindCSS, and Framer Motion.

A high-performance, SEO-optimized, animation-rich portfolio designed to showcase development work, photography, illustrations, and freelance services within a single scalable architecture.

---

🌐 Live Website

👉 https://www.sonurajeugale.com/

Deployed on Vercel with optimized production builds and global CDN distribution.

---

✨ Overview

This portfolio is built using the latest Next.js App Router architecture and leverages MDX for content-driven pages such as blogs and case studies.

It includes multiple dedicated portfolio sections:

• 👨‍💻 Developer Portfolio
• 📸 Photography Portfolio
• 🎨 Illustration Portfolio
• 💼 Freelancer Services Page

Each section is modular, SEO-optimized, and performance-focused.

---

🧩 Portfolio Sections

---

👨‍💻 Developer Portfolio Page

A technical showcase designed for recruiters, founders, and engineering teams.

Features

• 📁 Featured project grid with detailed case studies
• 🧠 Tech stack categorization
• 📝 MDX-powered deep-dive project pages
• 📊 Architecture breakdowns & technical insights
• 🎥 Smooth page transitions using Framer Motion
• 📈 SEO-optimized metadata per project
• 📱 Fully responsive layout
• 🧩 Clean reusable component architecture

---

📸 Photography Portfolio Page

A visually immersive gallery for showcasing professional photography work.

Features

• 🖼 Grid / masonry-style gallery layout
• ⚡ Optimized image loading
• 🔎 Click-to-expand lightbox preview
• 📱 Fully responsive image scaling
• 🏷 Category filtering (Portrait / Travel / Architecture / Street)
• 📂 Organized collections
• 📈 SEO-friendly alt text structure

---

🎨 Illustration Portfolio Page

A curated space to showcase digital illustrations and design experiments.

Features

• 🎨 Clean art-focused layout
• 🔍 Hover animations & smooth transitions
• 🖌 Project breakdown pages (process + tools used)
• 📦 Categorization (Digital / Vector / Concept Art / Branding)
• 📱 Responsive artwork display
• 🚀 Optimized static rendering

---

💼 Freelancer Page

A conversion-focused services page built for inbound client leads.

Features

• 💡 Clear service offerings
• 📋 Project packages & scope clarity
• 📊 Process breakdown (Discovery → Design → Delivery)
• 🧠 Tech stack & expertise highlights
• 📂 Selected work showcase
• 📞 Strong CTA sections
• 📈 High-conversion layout
• 📱 Fully responsive design

---

⚙️ Tech Stack

Core Framework

• Next.js 16.1.6
• React 19.2.3
• TypeScript 5

Styling & UI

• TailwindCSS 4
• PostCSS
• Autoprefixer
• Lucide React
• Framer Motion

Content & SEO

• MDX (@next/mdx)
• next-mdx-remote
• gray-matter
• next-sitemap

Tooling

• ESLint
• Strict TypeScript configuration

---

📁 Project Structure

portfolio/
│
├── app/
│   ├── developer/
│   ├── photography/
│   ├── illustration/
│   ├── freelancer/
│   └── blog/
│
├── components/
├── content/
├── lib/
├── public/
│
├── next.config.ts
├── tailwind.config.ts
├── postcss.config.js
├── tsconfig.json
└── package.json

---

🔋 Core Features

• ⚡ Next.js App Router architecture
• 🎥 Framer Motion animations
• 📱 Fully responsive UI system
• 🧩 Modular component design
• 🧠 MDX-driven dynamic content
• 📈 SEO optimized metadata & sitemap
• 🚀 Optimized production builds
• 🌍 Global CDN delivery via Vercel

---

🛠 Installation & Setup

Clone Repository

git clone https://github.com/your-username/portfolio.git
cd portfolio

Install Dependencies

npm install

Run Development Server

npm run dev

Visit:

http://localhost:3000

Build for Production

npm run build

Start Production Server

npm run start

---

🧠 Scripts

Script	Description
npm run dev	Start development server
npm run build	Create production build
npm run start	Run production server
npm run lint	Run ESLint

---

🌐 Deployment

This project is deployed on Vercel.

Production URL: 👉 https://www.sonurajeugale.com/

---

🎯 Design Philosophy

• Performance-first architecture
• Clean developer-focused UI
• Creative showcase sections
• Scalable modular structure
• Recruiter & client friendly navigation

---

📄 License

MIT License

---

Built with precision using modern web architecture.