🚀 Portfolio

A modern, full-stack portfolio website built with Next.js 16, featuring dynamic content management, user authentication, and interactive components.

✨ Features

🎨 Modern UI/UX

• Responsive design with mobile-first approach
• Dark/light mode support
• Smooth animations and transitions
• Gradient text effects and modern styling
• Interactive hover effects and micro-interactions

📱 Core Pages

• Home: Introduction, about section, and technology showcase
• Experience: Professional experience and work history showcase
• Projects: Dynamic project gallery with Sanity CMS integration
• Certificates: Professional certifications and achievements display
• Guestbook: Interactive message board with user authentication

🔐 Authentication & Security

• Kinde Auth integration for secure user management
• XSS protection for user-generated content
• Input validation and sanitization
• Secure API routes with proper error handling

🗄️ Database & CMS

• PostgreSQL database with Prisma ORM
• Sanity CMS for content management
• Real-time data fetching with caching
• Optimized database queries

🛠️ Developer Experience

• TypeScript for type safety
• ESLint configuration for code quality
• Winston logging system
• Hot reload with Turbopack
• Comprehensive error handling

🚀 Tech Stack

Frontend

• Framework: Next.js 16 with App Router
• Language: TypeScript
• Styling: Tailwind CSS 4.0
• UI Components: Radix UI primitives
• Icons: Lucide React
• Animations: Tailwind CSS Animate

Backend & Database

• Database: PostgreSQL
• ORM: Prisma
• Authentication: Kinde Auth
• CMS: Sanity
• API: Next.js API Routes including Gemini AI endpoints

Development Tools

• Package Manager: npm
• Linting: ESLint
• Logging: Winston with daily rotation
• Build Tool: Turbopack
• Security: XSS protection

🏃‍♂️ Getting Started

Prerequisites

• Node.js 18+
• PostgreSQL database
• Sanity account
• Kinde Auth account
• Google Gemini API key

Installation

1. Clone the repository

   git clone https://github.com/Haoming9527/Portfolio
   cd Portfolio

2. Install dependencies

   npm install

3. Environment Setup Create a .env file in the root directory:

   # Database
   DATABASE_URL="postgresql://username:password@localhost:5432/portfolio"
   
   # Kinde Auth
   KINDE_CLIENT_ID=your_kinde_client_id
   KINDE_CLIENT_SECRET=your_kinde_client_secret
   KINDE_ISSUER_URL=https://your-domain.kinde.com
   KINDE_SITE_URL=http://localhost:3000
   KINDE_POST_LOGOUT_REDIRECT_URL=http://localhost:3000
   KINDE_POST_LOGIN_REDIRECT_URL=http://localhost:3000
   
   # Sanity
   NEXT_PUBLIC_SANITY_PROJECT_ID=your_sanity_project_id
   NEXT_PUBLIC_SANITY_DATASET=production
   SANITY_API_TOKEN=your_sanity_api_token
   
   # Gemini AI
   GEMINI_API_KEY=your_google_gemini_api_key

4. Database Setup

   npx prisma generate
   npx prisma db push

5. Run the development server

   npm run dev

6. Open your browser Navigate to http://localhost:3000

📁 Project Structure

.
├── app/                    # Next.js App Router
│   ├── api/               # API routes
│   ├── components/        # React components
│   ├── lib/              # Utility functions
│   ├── projects/         # Projects page
│   ├── certificates/     # Certificates page
│   └── guestbook/        # Guestbook page
├── components/           # Shared UI components
├── lib/                 # Shared libraries and Prisma client
├── prisma/              # Database schema
├── sanity/              # Sanity CMS configuration
└── public/              # Static assets

🎯 Available Scripts

• npm run dev - Start development server with Turbopack
• npm run build - Build for production
• npm run start - Start production server
• npm run lint - Run ESLint
• npx prisma studio - Open Prisma Studio
• npx prisma generate - Generate Prisma client

🔧 Configuration

Sanity CMS Setup

1. Create a new Sanity project
2. Configure schemas for projects and certificates
3. Add your Sanity credentials to environment variables

Kinde Auth Setup

1. Create a Kinde account
2. Set up your application
3. Configure redirect URLs
4. Add credentials to environment variables

🚀 Deployment

Vercel (Recommended)

1. Push your code to GitHub
2. Connect your repository to Vercel
3. Add environment variables
4. Deploy!

Other Platforms

The application can be deployed on any platform that supports Next.js:

• Netlify
• Railway
• DigitalOcean App Platform
• AWS Amplify

---

⭐ Star this repository if you found it helpful! This repository contains the source code for a personal portfolio website designed to showcase projects, skills, and professional experience. The website is built using modern web technologies to ensure a responsive, user-friendly, and visually appealing presentation.