👉 Visit My Live Portfolio → luvi.my.id
If you like this template, feel free to deploy your own version for FREE!
Don't forget to give a ⭐ if you use this!
Table of Contents
Luvi Aprilyansyah Gabriel — Personal Portfolio V2 is the evolution of my technical showcase, rebuilt from the ground up using Next.js 15, React 19, and Tailwind CSS. It serves as a modern, high-performance portal for my work as a Fullstack Web Developer & AI/ML Enthusiast.
Designed with a "Data-First" philosophy, this template separates logic from content, allowing for rapid updates and seamless project management while maintaining a premium, enterprise-grade aesthetic with advanced glassmorphism and fluid animations.
- 🎨 Premium UI/UX: Elegant dark/light mode with advanced glassmorphism and consistent spacing.
- 🚀 Next-Gen Performance: Built on Next.js 15 for lightning-fast Page Speed and SEO indexing.
- 🔍 SEO Ready: Pre-configured JSON-LD structured data and comprehensive metadata for search engines.
- 🦾 Data-Driven Architecture: Manage all site content (Profile, Skills, Projects) through single TypeScript data files.
- 💫 Fluid Interactions: Smooth micro-animations and section transitions powered by Framer Motion.
- ⚡ Enterprise Footer: Professional multi-column footer with live status badges and global presence info.
- Zero Config: Just edit the data files and you're good to go.
- Top-Tier Performance: Pre-optimized images and scripts for 100/100 Lighthouse score.
- Clean Architecture: Built by a developer for developers.
- Modern Stack: Using the bleeding edge of Next.js and React technology.
Project Layout
src/
├── app/ # Next.js App Router (Layouts, Pages, Metadata)
├── components/
│ ├── ui/ # Reusable atomic UI components (Buttons, Grid Patterns)
│ └── sections/ # Major page blocks (Hero, About, Projects, etc.)
├── data/ # 💡 THE BRAIN (Edit your profile, skills, and projects here)
├── lib/ # Shared utility functions and library configs
├── types/ # Global TypeScript interfaces
└── layout.tsx # Main application entry pointBuilt with a cutting-edge high-performance stack:
- Next.js 15: The industry standard for production React apps.
- React 19: The latest UI library features.
- TypeScript: For strict, error-free engineering.
- Tailwind CSS 4: Rapid styling with modern utility classes.
- Framer Motion: Premium animation engine.
- Lucide React: Simple, professional vector icons.
# Clone the repository
git clone https://github.com/leapwithluvi/portfolio-next.git
# Install dependencies
npm install
# Run development server
npm run devPersonalize this portfolio in minutes by editing the files in src/data/:
| File | Content |
|---|---|
profile.ts |
Name, Bio, and Preloader Greetings sequence. |
seo.ts |
Search Engine Optimization, OG Tags, and Favicon. |
experience.ts |
Work history and Sticky-Scroll Statistics. |
navigation.ts |
Unified control for Navbar and Footer links. |
projects.ts |
Showcase projects with images and tags. |
socials.ts |
Social media URLs and official brand icons. |
techstack.ts |
Detailed breakdown of technical skills. |
footer.ts |
Footer tagline and operational status text. |
- 🔗 Portfolio V1 (Vite + React) - Personal Website
- 🔗 Portfolio V2 (Next.js + React) - Personal Website
- 🔗 Library Management System
- 🔗 Conversational AI Platform
- 🔗 Express TypeScript Starter
| Platform | Link |
|---|---|
| itsluvi13@gmail.com | |
| luviaprilyansyahgabriel | |
| 🐙 GitHub | leapwithluvi |
| @byl.rooks |
This project is licensed under the MIT License See the LICENSE file for more details.
I'm currently open to Junior Developer opportunities, freelance projects, and AI/ML collaborations. If you're looking for a passionate Fullstack Web Developer who loves building scalable and beautiful products, let's talk!
Built with by Luvi Aprilyansyah Gabriel — Fullstack Web Developer & AI/ML Enthusiast