Aiyu - The Ultimate Developer Portfolio Template (Next.js 15, Tailwind CSS, MongoDB)

A modern, responsive, and fully customizable portfolio website built with Next.js 15, Tailwind CSS, and MongoDB. This project showcases skills, detailed project case studies, blogs, and provides a way for visitors to contact you. It features a comprehensive Admin Panel for managing all content without touching code, making it perfect for developers who want a professional portfolio with zero-hassle content management.

🌟 Perfect for: Developers, designers, freelancers, and tech professionals looking for a production-ready portfolio solution.

📚 Complete Documentation Wiki | 🚀 Quick Start Guide | 📖 Installation Guide

✨ Features

🌐 Public Interface

• Home Page: Interactive landing page with a dynamic space-themed background and customizable hero section
• About Me: Detailed introduction with skills grid, experience timeline, and professional background
• Projects: Showcase your work with:
  • Detailed project pages with Markdown support
  • Tech stack badges and tags
  • Live demo and GitHub repository links
  • Project screenshots and galleries
• Contact: Functional contact form with:
  • Email integration via n8n webhook
  • Message management in admin panel
  • Real-time chat-style interface
• Gallery: Visual collection of achievements, certifications, and awards with masonry layout
• Blogs: Technical articles and blog posts with:
  • Draft/Published status
  • Markdown rendering with syntax highlighting
  • Code block support with React Syntax Highlighter
  • Automated posting via API integration (Notion, external CMS)
• SEO Optimized: Built-in sitemap, meta tags, Open Graph, and schema.org structured data
• AI Neural Core Integration: Site-wide intelligent governance for generative features

🔧 Admin Panel (Full Content Management System)

Access the admin panel at /admin to manage everything without touching code:

Content Management

• Home: Edit hero section text, tagline, and "Open to Work" status
• About: Update biography, manage skills grid with icons, and experience timeline
• Projects: Full CRUD operations with:
  • Rich Markdown editor with preview
  • Image upload and management
  • Tech stack tagging with auto-suggestions
  • GitHub statistics integration
  • Drag-and-drop image galleries
• Blogs: Create and manage articles with:
  • Draft/Published workflow
  • Markdown editor with live preview
  • Featured image uploads
  • Tags and categories
  • Automated API creation support
• Gallery: Upload and manage certifications/awards with:
  • Drag-and-drop interface
  • Image optimization (Sharp)
  • HEIC format support
  • Masonry grid layout

System Configuration

• Header: Configure navigation links, logo text, and menu items
• Footer: Manage footer links, social media, version tags, and copyright text
• Contact Messages: View and manage incoming form messages with:
  • Read/unread status
  • Reply functionality
  • Chat-style interface
  • Message threading
• Themes: Live theme editor with:
  • 21 pre-built theme presets (VS Code Dark, Ocean Blue, Forest Green, Sunset Orange, Royal Purple, Monochrome, Dracula, Nord, Cyberpunk, Gruvbox, Solarized, Catppuccin, Tokyo Night, Material Ocean, Synthwave, Forest, Sunset, Aurora, Coral Reef, Espresso, Midnight Blue)
  • Custom color generation
  • Real-time preview
  • Export/import theme configurations
• GitHub Integration:
  • Fetch repository statistics (stars, forks, language)
  • Display GitHub activity
  • Automated sync with your repos
• Global Config:
  • SEO metadata (title, description, keywords)
  • Google Analytics integration
  • Feature flags and site-wide settings
  • Base URL configuration
• Database Management:
  • Export full database to JSON
  • Backup and restore functionality
  • Data migration tools

🧠 AI Neural Core (Gemini Integration)

• Master Governance: Centralized toggle to enable/disable all AI-powered protocols
• Creative Project Synthesis:
  • AI Name Generation: Suggets catchy project designations based on technical abstracts
  • Description Optimization: Refines project abstracts for maximum professional impact
  • Tech Stack Mapping: Automatically suggests relevant framework/language specs
• System Configuration:
  • Subtitle Generation: Synthesizes intriguing subtitles for Projects, Blogs, and Gallery
• Generative Theme Architect:
  • Create complete, balanced design systems from a single creative concept
  • Real-time generation of both Light and Dark variants
  • Automated mapping of 64+ design tokens (backgrounds, accents, syntax highlighting)

🔒 Security Features

• JWT Authentication: Secure admin panel access
• Rate Limiting: Protection against brute force attacks
• Docker Security:
  • Non-root user execution
  • Read-only filesystem
  • CPU and memory limits
  • No-execution /tmp directory (crypto miner prevention)
• Environment Variables: Secure credential management
• API Key Protection: Secure blog API with token authentication

📚 Complete Documentation:

• GitHub Wiki - Comprehensive guides and tutorials
• Quick Start - Get running in 5 minutes
• Admin Panel Manual - Detailed admin panel guide with screenshots
• API Documentation - REST API reference
• Deployment Guide - Production deployment instructions

Screenshots

Home Page

About Me

Projects

Contact Us

Admin Panel (Homepage)

🛠️ Tech Stack

Frontend

• Framework: Next.js 15 with App Router and React 19
• Styling: Tailwind CSS 4 with custom configuration
• Animations: Framer Motion for smooth transitions and interactions
• Icons: Lucide React, React Icons, Simple Icons
• Markdown: React Markdown with GitHub Flavored Markdown (GFM)
• Syntax Highlighting: React Syntax Highlighter for code blocks
• Date Handling: date-fns with timezone support
• Drag & Drop: @dnd-kit for sortable interfaces
• UI Components: Custom components with Tailwind CSS

Backend

• API: Next.js API Routes (serverless functions)
• Database: MongoDB with Mongoose ODM
• Authentication: JWT (JSON Web Tokens) with jose library
• Image Processing: Sharp for optimization, HEIC conversion support
• Validation: Built-in Next.js middleware for route protection

Infrastructure & DevOps

• Containerization: Docker with Docker Compose
• Image Optimization: Next.js Image component with Sharp
• Security:
  • Rate limiting
  • Content Security Policy
  • Secure headers
  • Environment-based configuration
• Deployment:
  • Docker-ready (VPS, DigitalOcean, AWS EC2)
  • Vercel-compatible (with external storage setup)
  • PM2-ready for traditional Node.js hosting

Developer Experience

• Linting: ESLint with Next.js configuration
• Type Safety: JSConfig for JavaScript projects
• Scripts: Automated security checks, Docker management, emergency cleanup
• Documentation: Comprehensive guides for setup, deployment, and usage

🚀 Quick Start (Docker) - Recommended

The fastest and most secure way to run this application is using Docker. Everything is pre-configured!

📚 New to this project? Check out our 5-Minute Quick Start Guide or Detailed Installation Guide

Prerequisites

• Docker Engine: 20.10+ (Install Docker)
• Docker Compose: v2.0+ (included with Docker Desktop)
• System Requirements:
  • 2GB+ available RAM
  • 1 CPU core minimum
  • 5GB disk space

Installation & Running

1. Clone the Repository

git clone https://github.com/aiyu-ayaan/Aiyu.git
cd Aiyu

2. Configure Environment Variables

Copy the example environment file and update with your credentials:

cp .env.example .env

🔐 IMPORTANT - Generate Secure Credentials:

# Generate JWT Secret (64 characters)
node -e "console.log('JWT_SECRET=' + require('crypto').randomBytes(64).toString('hex'))"

# Generate MongoDB Password (32 characters)
node -e "console.log('MONGO_ROOT_PASSWORD=' + require('crypto').randomBytes(32).toString('hex'))"

# Generate Blog API Key (32 characters)
node -e "console.log