A beautiful 3D-themed portfolio website built with Next.js 15, Tailwind CSS 4, and Framer Motion. This portfolio is based on my designs in Dribbble - Deri Kurniawan.
- 🎨 Modern 3D-themed design with gradient animations
- 📱 Fully responsive (mobile, tablet, desktop)
- ⚡ Built with Next.js 15 + Turbopack for fast development
- 🎭 Smooth animations powered by Framer Motion
- 🔧 Easy configuration - just edit one file!
- 🚀 One-click deploy to Vercel
git clone https://github.com/Deri-Kurniawan/3d-portfolio.git
cd 3d-portfolio
npm installcp example.env .envEdit .env and set your app URL:
NEXT_PUBLIC_APP_URL=http://localhost:3000npm run devOpen http://localhost:3000 to see your portfolio.
The main configuration file is src/config/index.ts. Edit this file to personalize your portfolio:
export const CONFIG = {
// Your name
name: {
first: "Your",
last: "Name",
},
// Contact email
email: "your@email.com",
// Your professional role
role: "Full-stack Web Developer",
// Your location
location: "City, Country",
// Social media links
socials: {
github: "https://github.com/yourusername",
linkedin: "https://www.linkedin.com/in/yourusername",
instagram: "https://www.instagram.com/yourusername",
dribbble: "https://dribbble.com/yourusername",
},
// Quote section
quotes: {
text: "Your inspiring quote here...",
author: "Your Name",
},
// Resume download
resume: {
fileName: "YourName-Resume.pdf",
downloadUrl: "/files/your-resume.pdf",
},
// ... projects and tech stacks
};- Place your PDF file in
public/files/ - Update the config:
resume: {
fileName: "John-Doe-Resume.pdf",
downloadUrl: "/files/John-Doe-Resume.pdf",
}Add projects to the projects array in src/config/index.ts:
projects: [
{
title: "My Awesome Project",
summary: "A brief description of what this project does and the problem it solves.",
image: "/projects/my-project.webp", // Place image in public/projects/
techStack: [
TECH_STACK.reactjs,
TECH_STACK.nextjs,
TECH_STACK.tailwindcss,
],
urls: {
demo: "https://my-project.com", // Optional
github: "https://github.com/...", // Optional
figma: "https://figma.com/...", // Optional
},
category: "Web App",
},
]Project Image Guidelines:
- Place images in
public/projects/ - Recommended format:
.webpfor best performance - Recommended size: 800x400px or similar aspect ratio
The portfolio includes pre-configured tech stacks in src/constant/tech-stack.tsx:
TECH_STACK.nextjsTECH_STACK.reactjsTECH_STACK.typescriptTECH_STACK.javascriptTECH_STACK.tailwindcssTECH_STACK.laravelTECH_STACK.expressjsTECH_STACK.prismaTECH_STACK.expoTECH_STACK.reactnative
Edit src/constant/tech-stack.tsx:
import { SiVuedotjs } from "react-icons/si"; // Import icon from react-icons
export const TECH_STACK = {
// ... existing stacks
vuejs: {
name: "Vue.js",
icon: <SiVuedotjs />,
color: "text-green-500", // Tailwind color class
siteUrl: "https://vuejs.org/",
},
};Find icons at react-icons.github.io/react-icons (search for Si prefix for brand icons).
In src/config/index.ts, you can either show all or select specific ones:
// Show ALL registered tech stacks
techStacks: [...Object.values(TECH_STACK)],
// OR select specific ones
techStacks: [
TECH_STACK.nextjs,
TECH_STACK.reactjs,
TECH_STACK.typescript,
TECH_STACK.tailwindcss,
],Your 3D avatar appears in two places. Replace these files:
| Location | File Path | Recommended Size |
|---|---|---|
| Hero Section | src/assets/images/home/hero/avatar-smile.webp |
480x480px |
| Let's Connect | src/assets/images/home/letsConnect/avatar-big-smile.webp |
530x530px |
Create your own 3D character at peeps.ui8.net
Edit the theme colors in src/app/globals.css:
@theme inline {
--color-primary: #a293ff; /* Purple - gradient start */
--color-secondary: #00f0ff; /* Cyan - gradient end */
--color-accent: #000000; /* Text color */
--color-accent2: #8e8e8e; /* Secondary text */
--color-gray: #f1f1f1; /* Background gray */
}Replace public/og-image.webp with your own image (recommended: 1200x630px) for social media previews.
Edit src/constant/navigation.ts:
export const NAVIGATION_LINKS: NavigationLink[] = [
{ name: "Home", href: "/" },
{ name: "Project", href: "/project" },
{ name: "Blog", href: "/blog" }, // Add new pages
];src/
├── app/ # Next.js App Router pages
│ ├── _components/ # Page-specific components
│ ├── project/ # Project listing page
│ ├── globals.css # Global styles & theme
│ └── layout.tsx # Root layout
├── assets/
│ ├── fonts/ # Custom fonts
│ └── images/ # Static images (avatars, decoratives)
├── components/ # Shared components
├── config/
│ └── index.ts # ⭐ MAIN CONFIGURATION FILE
├── constant/
│ ├── assets.ts # Asset path mappings
│ ├── font.ts # Font configurations
│ ├── navigation.ts # Navigation links
│ └── tech-stack.tsx # Tech stack definitions
└── types/
└── globals.d.ts # TypeScript type definitions
- Click the button above
- Set
NEXT_PUBLIC_APP_URLto your domain (e.g.,https://yourname.vercel.app) - Deploy!
npm run build
npm run startNEXT_PUBLIC_APP_URL=https://yourdomain.com| Command | Description |
|---|---|
npm run dev |
Start development server with Turbopack |
npm run build |
Build for production |
npm run start |
Start production server |
npm run lint |
Run Biome linter |
npm run lint:fix |
Fix linting issues |
npm run format:check |
Check code formatting |
npm run format:fix |
Fix code formatting |
- Framework: Next.js 15 with App Router
- Styling: Tailwind CSS 4
- Animations: Framer Motion
- Icons: React Icons
- Linting: Biome
- Type Safety: TypeScript
- Environment: @t3-oss/env-nextjs
Released under MIT by @Deri-Kurniawan.
Feel free to use this template for your own portfolio.