⚡ Personal Portfolio Website

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.

📑 Table of Contents

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

✨ Features

👤 User Features

• 🎨 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.

🛡️ Admin Features

• 🔐 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.

🛠 Tech Stack

Frontend

• 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

Backend

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

Tools & Services

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

📂 Project Structure

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

🚀 Getting Started

Follow these instructions to set up the project locally.

1. Clone the Repository

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

2. Install Dependencies

npm install

3. Set Up Environment Variables

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"

4. Run the Development Server

npm run dev

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

📦 Deployment

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.

🤝 Contributing

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.