Introduction

Project Overview

Kevi Blog is a modern full-stack personal blog and portfolio showcase platform built with Nuxt 4. The system integrates frontend presentation and backend management functionality, supporting not only traditional blog post management but also innovative features such as project management, skill showcases, gallery systems, and more.

Core Features

Frontend Presentation

• ✅ Personal Homepage - Beautiful personal information display and hero section with carousel support
• ✅ Project Portfolio - Categorized project showcase with detailed technology stack introduction and status management
• ✅ Skill System - Visual skill display with skill level and category management
• ✅ Online Resume - Professional resume page with PDF download and print support
• ✅ Blog Articles - Rich blog article display with Markdown rendering and view count statistics
• ✅ Gallery System - Beautiful image display with category management, comments, and view statistics
• ✅ Resource Download - Resource download page with download code protection and category management
• ✅ Message Board - Interactive message function with color labels and like system
• ✅ Responsive Design - Perfectly adapted for desktop, tablet, and mobile devices
• ✅ Dark/Light Theme Switching - Support for free theme switching
• ✅ Smooth Animation Effects - Carefully designed transition animations and micro-interactions

Backend Management

• ✅ Dashboard - Real-time data statistics and visualization charts (ECharts)
• ✅ System Monitoring - Real-time system resource monitoring and performance analysis
• ✅ Project Management - Complete project management functionality with technology stack configuration, status management, and sorting
• ✅ Article Management - Blog article CRUD operations with Markdown editor support
• ✅ Category Management - Hierarchical content category management with icon and color configuration
• ✅ Skill Management - Skill category and item management with skill level settings
• ✅ User Management - User permissions and role management
• ✅ File Management - Support for local file system and S3-compatible object storage with batch file operations
• ✅ Gallery Management - Image upload, category management, and statistical analysis
• ✅ Resource Management - Resource file management and download code configuration
• ✅ Homepage Content Management - Visual editing for homepage carousels and content
• ✅ System Settings - Website basic information and SEO configuration

Technology Stack

Frontend Technologies

• Framework: Nuxt 4.2.1, Vue 3.5.25
• Language: TypeScript (strict mode)
• UI Components: Element Plus 2.12.0, Tailwind CSS 6.14.0
• Icons: Nuxt Icon 2.1.0, Element Plus Icons
• Theme: @nuxtjs/color-mode 4.0.0
• Editor: MD Editor V3 6.2.0
• Charts: ECharts 6.0.0

Backend Technologies

• Runtime: Node.js (Nuxt Nitro)
• Database: MySQL 8.0+, mysql2 3.15.3
• Cache: Redis 5.10.0
• Authentication: JWT Token 9.0.3 + bcrypt 6.0.0
• File Storage: AWS S3 SDK 3.721.0 (compatible with MinIO), local file system

Development Tools

• Build: Vite
• Package Manager: pnpm
• Code Quality: ESLint 9.39.1
• Containerization: Docker + Docker Compose

Online Demos

Access Point	Link
🏠 Frontend Demo	https://kevi-blog-v2.ruanguokj.cn
🔧 Admin Panel Demo	https://kevi-blog-v2.ruanguokj.cn/admin
🔑 Demo Account	admin / 123456

Project Highlights

Design Features

• Frosted Glass Effect - Modern design language
• Gradient Color Scheme - Carefully designed color system
• Smooth Animations - Well-designed transition effects
• Theme Switching - Complete dark/light theme support

Functional Features

• Complete Portfolio Showcase System - Integrated management of projects, articles, galleries, and resources
• Powerful Admin Panel - Data statistics, system monitoring, permission management, carousel management
• Rich Interactive Functions - Message board, color labels, like system, download code protection
• Responsive Design - Perfect adaptation for various devices
• Performance Optimization - SSR rendering, lazy loading, Redis caching strategy

Technical Features

• Modern Technology Stack - Nuxt 4 + Vue 3 + TypeScript strict mode
• Enterprise-Level Architecture - Modular design, 100+ API endpoints, strong scalability
• Security and Reliability - JWT authentication, route-level permission control, SQL injection protection, slide captcha
• Containerized Deployment - Redis + application dual-container architecture, Docker support, one-click deployment
• Flexible Storage - Support for local file system, Docker volume persistence, S3-compatible object storage

License

MIT License - See the LICENSE file in the project root directory