A modern, fully-featured personal portfolio website built with Next.js 15 App Router, TypeScript, Tailwind CSS, and Supabase for backend services. This project demonstrates a complete full-stack application with admin dashboard, content management, and real-time data synchronization.
- Hero Section - Dynamic landing with customizable content
- About Me - Personal profile with image and bio management
- Projects Gallery - Portfolio projects with image uploads and categorization
- Skills Display - Technical skills with categories and proficiency levels
- Experience Timeline - Work experience and education history
- Blog System - Full blog with image uploads and rich content
- Contact Form - Functional contact with email notifications
- Social Media Links - Integrated social profiles with custom ordering
- Complete CRUD Operations - Create, read, update, delete for all content
- Authentication - Secure admin access with Supabase Auth
- File Uploads - Image management with Supabase Storage
- Email Notifications - Contact form messages sent via Gmail SMTP
- Responsive Design - Mobile-friendly admin interface
- Real-time Updates - Instant content synchronization
- Frontend: Next.js 15, TypeScript, Tailwind CSS, shadcn/ui
- Backend: Supabase (Database, Auth, Storage)
- UI Components: Radix UI primitives with Lucide icons
- Email Service: Nodemailer with Gmail SMTP
- Deployment: Ready for Vercel, Netlify, or any Node.js host
- Content Creation → Admin creates/edits content via dashboard
- Database Storage → All content saved to Supabase PostgreSQL
- File Management → Images uploaded to Supabase Storage buckets
- Public Display → Website fetches and displays live data
- User Interactions → Contact forms send emails and save messages
hero- Landing page contentabout_me- Personal profile informationprojects- Portfolio projects with metadataskill_categories&skills- Technical skills organizationexperience&education- Professional historyblog_posts- Blog content with image supportcontact_messages- User submissions with email notificationssocial_links- Social media profiles with custom ordering
- Row Level Security (RLS) - Granular access control
- Authentication - Secure admin login system
- Input Validation - Zod schema validation throughout
- XSS Protection - React's built-in protections
- Node.js 18+ and npm
- Supabase account and project
- Gmail account (for contact form emails)
-
Clone the repository
git clone https://github.com/PappyZero/webportfolio.git cd webportfolio -
Install dependencies
npm install
-
Environment Configuration
cp .env.example .env.local
Configure your environment variables in
.env.local:# Supabase Configuration NEXT_PUBLIC_SUPABASE_URL=your_supabase_url NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key # Email Configuration (Optional) SMTP_HOST=smtp.gmail.com SMTP_PORT=587 SMTP_SECURE=false SMTP_USER=your_email@gmail.com SMTP_PASS=your_gmail_app_password SMTP_FROM=your_email@gmail.com ADMIN_EMAIL=your_email@gmail.com
-
Database Setup
Run the SQL schemas in order:
-- Run in Supabase SQL Editor: -- 1. /supabase-schemas/hero-schema.sql -- 2. /supabase-schemas/about-schema.sql -- 3. /supabase-schemas/projects-schema.sql -- 4. /supabase-schemas/skills-schema.sql -- 5. /supabase-schemas/experience-schema.sql -- 6. /supabase-schemas/blog-schema.sql -- 7. /supabase-schemas/contact-schema.sql -- 8. /supabase-schemas/social-schema.sql
-
Start Development Server
npm run dev
-
Access the Application
- Public Site: http://localhost:9002
- Admin Dashboard: http://localhost:9002/admin
- Navigate to
/admin - Sign in with your Supabase credentials
- Start managing your portfolio content immediately
src/
├── app/ # Next.js App Router pages
│ ├── admin/ # Admin dashboard routes
│ │ ├── hero/ # Hero section management
│ │ ├── about/ # About section management
│ │ ├── projects/ # Projects management
│ │ ├── skills/ # Skills management
│ │ ├── experience/ # Experience management
│ │ ├── blog/ # Blog management
│ │ ├── contact/ # Contact messages
│ │ └── social/ # Social links management
│ └── (public pages) # Public-facing pages
├── components/
│ ├── sections/ # Public-facing sections
│ ├── admin/ # Admin form components
│ ├── ui/ # Reusable UI components
│ └── layout/ # Layout components
├── lib/ # Utilities and configurations
│ ├── supabase-client.ts # Supabase client
│ ├── *.ts # Database functions per section
│ └── data.ts # Placeholder data
└── supabase-schemas/ # SQL migration files
- Live Editing: Changes appear instantly on the website
- Image Uploads: Drag-and-drop image management
- Draft Mode: Save drafts before publishing
- Version Control: All changes tracked in database
- Intuitive Interface: Clean, modern admin design
- Bulk Operations: Efficient content management
- Search & Filter: Quick content discovery
- Responsive: Works on all device sizes
- Performance Optimized: Fast loading and navigation
- SEO Friendly: Proper meta tags and structure
- Mobile Responsive: Perfect mobile experience
- Interactive: Smooth animations and transitions
# Production
npm run build
# Start production server
npm start- Vercel (Recommended): Zero-config deployment
- Netlify: Git-based deployment
- Railway: Full-stack deployment
- DigitalOcean: Custom server deployment
Ensure all environment variables are set in your deployment platform:
NEXT_PUBLIC_SUPABASE_URLNEXT_PUBLIC_SUPABASE_ANON_KEYSMTP_*variables (for contact form)
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Next.js Team - For the amazing framework
- Supabase Team - For the excellent backend services
- shadcn/ui Team - For the beautiful UI components
- Tailwind CSS - For the utility-first CSS framework