A modern, high-performance full-stack portfolio website built to showcase projects and skills with a premium user experience. Leveraging the power of Next.js 15, Tailwind CSS 4, and MongoDB, it features a secure admin panel, dynamic content management, immersive 3D elements, and seamless animations.

• Features
• Tech Stack
• Project Structure
• Getting Started
• Environment Variables
• Deployment
• Contributing

• 🎨 Modern & Responsive Design: Crafted with Tailwind CSS 4 and Shadcn/ui for a sleek, accessible, and fully responsive interface across all devices.
• 🚀 Dynamic Project Showcase: Projects are fetched dynamically from a MongoDB database, ensuring content is always up-to-date.
• ✨ Immersive Animations: Enhanced user experience with Framer Motion for smooth transitions and Three.js (@react-three/fiber) for 3D elements.
• 📝 Rich Content: Detailed project descriptions rendered using @uiw/react-md-editor with markdown support.
• 📧 Contact Integration: Fully functional contact form powered by Resend for direct email submissions.
• 🔔 Real-time Notifications: Interactive toast notifications using Sonner.
• 🤖 AI Chat Assistant: Intelligent chatbot powered by Google Gemini to answer questions about the portfolio.

• 🔐 Secure Authentication: Protected admin routes using NextAuth.js to ensure only authorized access.
• 📊 Dashboard Overview: comprehensive view of projects and content.
• 🛠️ Project Management: Full CRUD (Create, Read, Update, Delete) capabilities for managing portfolio projects.
• ✋ Drag & Drop Reordering: Intuitive Drag and Drop interface (powered by @dnd-kit) to easily reorder skills and projects, giving you full control over how content is displayed.
• ☁️ Media Management: Seamless image uploads and hosting via Cloudinary.

• Framework: Next.js 15 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS 4
• Components: Shadcn/ui & Radix UI
• Animations: Framer Motion & Typewriter Effect
• Icons: Lucide React
• Markdown: @uiw/react-md-editor

• API: Next.js API Routes
• Database: MongoDB
• ORM: Mongoose
• Authentication: NextAuth.js
• AI: Google Generative AI

• Image Hosting: Cloudinary
• Email Service: Resend
• Drag & Drop: @dnd-kit
• Date Handling: date-fns
• Linting: ESLint

src/
├── app/
│   ├── (admin)/       # Protected admin routes (Dashboard, Project/Skill Management)
│   ├── (main)/        # Public facing routes (Home, Projects, Contact)
│   ├── api/           # Backend API endpoints (Projects, Skills, Auth, Email)
│   ├── globals.css    # Global styles and Tailwind directives
│   └── layout.tsx     # Root layout
├── components/        # Reusable UI components (Buttons, Cards, Modals)
├── hooks/             # Custom React hooks
├── lib/               # Utility functions, DB connection, Cloudinary config
├── models/            # Mongoose database models (Project, Skill, User)
├── types/             # TypeScript type definitions
└── middleware.ts      # Authentication middleware

Follow these instructions to set up the project locally.

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

npm install

Create a .env file in the root directory and add the following variables:

# MongoDB
MONGODB_URI="your_mongodb_connection_string"

# NextAuth.js
NEXTAUTH_URL="http://localhost:3000"
NEXTAUTH_SECRET="your_nextauth_secret" # Generate using `openssl rand -base64 32`

# Cloudinary
CLOUDINARY_CLOUD_NAME="your_cloud_name"
CLOUDINARY_API_KEY="your_api_key"
CLOUDINARY_API_SECRET="your_api_secret"

# Resend (Email)
RESEND_API_KEY="your_resend_api_key"

# App
NEXT_PUBLIC_BASE_URL="http://localhost:3000"

# Google Gemini AI
GOOGLE_API_KEY="your_google_api_key"

npm run dev

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

The application is optimized for deployment on Vercel.

1. Push your code to a GitHub repository.
2. Import the project into Vercel.
3. Add the environment variables in the Vercel dashboard.
4. Deploy!

For more details, check the Next.js Deployment Documentation.

Contributions are welcome! Please follow these steps:

1. Fork the repository.
2. Create a new branch (git checkout -b feature/YourFeature).
3. Commit your changes (git commit -m 'Add some feature').
4. Push to the branch (git push origin feature/YourFeature).
5. Open a Pull Request.