Md. Mirazul Hasan — Portfolio

A full-stack developer portfolio built with Next.js, Prisma, NextAuth, and TypeScript.

---

✨ Features

Feature	Description
🎨 Light / Dark Theme	FOUC-safe toggle using localStorage
🌊 Animated Background	Bouncing colour puddles via requestAnimationFrame
👤 Profile Management	Name, bio, title, social links, avatar upload with crop & resize
🎓 Education	Degrees, fields, CGPA/GPA/Division (float support), Ongoing status
💼 Experience	Roles, timelines, and a "Currently Working" toggle
🚀 Projects	Featured projects with tags, GitHub & live links
🧠 Skills	Categorised with visual proficiency bars
📜 Certificates	Credentials with verifiable URLs
✍️ Blog Posts	Articles with markdown-ready storage
🔒 Admin Panel	Fully protected by NextAuth session
📄 CV Management	Full CV system built into the admin panel

---

🛠 Tech Stack

Layer	Technology
Framework	Next.js 16 (App Router)
Language	TypeScript
Database	SQLite (dev) / PostgreSQL (prod)
ORM	Prisma
Auth	NextAuth.js
Styling	Vanilla CSS + CSS Variables
Animations	requestAnimationFrame
Icons	Lucide React
Deployment	Vercel

---

🗂 Project Structure

my-portfolio/
├── prisma/               # Database schema & migrations
├── src/
│   ├── app/
│   │   ├── admin/        # Protected admin panel
│   │   ├── api/          # REST API routes
│   │   └── page.tsx      # Public portfolio homepage
│   ├── components/       # Shared React components
│   └── lib/              # Prisma client & utilities
├── .env.example          # Environment variable template
└── next.config.ts        # Next.js configuration

---

🚀 Quick Start (Local)

# 1. Clone the repo
git clone https://github.com/<your-username>/my-portfolio.git
cd my-portfolio

# 2. Install dependencies
npm install

# 3. Set up environment variables
cp .env.example .env.local
# Fill in the values in .env.local

# 4. Push the database schema
npx prisma db push

# 5. (Optional) Explore your data with Prisma Studio
npx prisma studio

# 6. Start the dev server
npm run dev

Open http://localhost:3000 in your browser.

---

🌐 Deployment (Vercel — Recommended)

1. Push to GitHub

git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/<your-username>/my-portfolio.git
git push -u origin main

2. Import on Vercel

1. Go to vercel.com → New Project → import your GitHub repo
2. Add these Environment Variables in the Vercel dashboard:

Variable	Value
DATABASE_URL	Your production DB connection string (e.g. Neon / Railway PostgreSQL)
NEXTAUTH_SECRET	A secure random string — openssl rand -base64 32
NEXTAUTH_URL	Your deployment URL, e.g. https://your-portfolio.vercel.app

3. Click Deploy ✅

Note: The default dev.db is a local SQLite file and is intentionally excluded from Git. For production, provision a PostgreSQL database (Neon is free) and update DATABASE_URL.

3. Switching SQLite → PostgreSQL for Production

In prisma/schema.prisma, update the datasource:

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

Then run:

npx prisma db push
# or for managed migrations:
npx prisma migrate deploy

---

🔐 Environment Variables Reference

DATABASE_URL=file:./dev.db          # SQLite for local dev
NEXTAUTH_SECRET=your-secret-here
NEXTAUTH_URL=http://localhost:3000

---

📄 License

MIT — free to use, adapt, and build upon for your own portfolio.

---

Made with ❤️ by Md. Mirazul Hasan