portfolio-template-1 — Next.js 作品集模板

SHA-256: 1aed171c61fa667aeea5485f85204e289dc7ca2ac81f7bbb801f9ee476a9a05d

2026-10-14T19:08:39.731Z

# 🚀 Next.js Portfolio Template

A modern, responsive personal portfolio built with **Next.js 16**, **React**, and **Tailwind CSS v4**.

🔗 **Live Demo:** [Demo Link](https://hanifmaulana-portfolio.vercel.app/)

![Next.js](https://img.shields.io/badge/Next.js-16-black?logo=next.js)
![TypeScript](https://img.shields.io/badge/TypeScript-5-blue?logo=typescript)
![Tailwind](https://img.shields.io/badge/Tailwind_CSS-v4-06B6D4?logo=tailwindcss)
![License](https://img.shields.io/badge/License-MIT-green)

---

## ✨ Features

- 🌗 **Dark / Light Theme** — Auto-detects OS preference, persists via localStorage, zero-flash
- 📱 **Fully Responsive** — Mobile-first layouts for phones, tablets, and desktops
- ⚡ **Ultra-Fast Performance** — Stripped of heavy CSS filters and layout shifts for maximum speed
- 🤖 **Vibe Coding** — Architected entirely through AI orchestration
- ⌨️ **Typing Effect** — Rotating role text in hero
- 🧊 **3D Gallery** — Embedded Sketchfab interactive 3D models
- 🖼️ **2D Gallery** — Artwork gallery with lightbox modal
- 📊 **Scroll Progress** — Reading progress bar + back-to-top
- 📄 **Resume Generator** — Automated PDF resume generation via Python & WeasyPrint (`generate-resume.py`)
- 🔍 **SEO Optimized** — Open Graph, Twitter Card meta tags & RealFaviconGenerator integration
- ☁️ **Vercel-Ready** — One-click deploy with config included

## 🛠 Tech Stack

| Layer | Technology |
|-------|-----------|
| Framework | [Next.js 16](https://nextjs.org/) (App Router) |
| Language | [TypeScript](https://www.typescriptlang.org/) |
| Styling | [Tailwind CSS v4](https://tailwindcss.com/) |
| Font | [Inter](https://fonts.google.com/specimen/Inter) via `next/font` |
| Deploy | [Vercel](https://vercel.com/) |

## 📁 Structure

```
.
├── generate-resume.py       # Python script for generating PDF resumes
├── src/
│   ├── app/
│   ├── globals.css          # Theme, utilities
│   ├── layout.tsx           # Root layout + SEO
│   └── page.tsx             # Page assembly
├── components/
│   ├── Navbar.tsx            # Nav + mobile drawer
│   ├── Hero.tsx              # Hero + typing effect
│   ├── About.tsx             # Bio, skills, CV
│   ├── Projects.tsx          # Featured projects (MultiPost, eslint-plugin-ai-guardrails)
│   ├── Artwork.tsx           # 3D/2D tabbed gallery
│   ├── Contact.tsx           # Social links
│   ├── Footer.tsx
│   └── ScrollProgress.tsx
├── context/
│   └── ThemeContext.tsx       # Dark/light theme
└── hooks/
    └── useInView.ts          # Intersection Observer
```

## 🚀 Quick Start

```bash
# Clone
git clone https://github.com/isaacnewton123/portfolio-template-1.git
cd portfolio

# Install
npm install

# Dev
npm run dev
# → http://localhost:3000
```

## 📦 Resume Generation & Deployment

This project uses Python and WeasyPrint to automatically generate beautiful PDF versions of your resume based on `generate-resume.py`.

We have pre-configured the deployment settings for **Vercel** (`vercel.json`) and **Netlify** (`netlify.toml`). This means you don't need to generate the PDFs locally or worry about Python environments—everything happens automatically in the cloud during the build process!

### Deploying to Vercel or Netlify

1. Update your details in `generate-resume.py`.
2. Commit and push your code to GitHub:
   ```bash
   git add .
   git commit -m "Update my resume details"
   git push origin main
   ```
3. **That's it!** If your repository is connected to Vercel or Netlify, the platform will automatically:
   - Install the required Python packages (`weasyprint`)
   - Generate your newest PDFs (`Resume_John_Doe_EN.pdf`, etc.)
   - Build and deploy your Next.js application

### Local Generation (Optional)
If you just want to generate the PDFs locally to test or see them on your machine, you can run:

```bash
# Install the required Python package
pip install weasyprint

# Run the generator script
python3 generate-resume.py
# Or use the npm shortcut: bun run generate-resume
```

## 🤝 Contributing

Contributions are welcome! Feel free to:

1. Fork the repository
2. Create a feature branch (`git checkout -b feature/amazing`)
3. Commit changes (`git commit -m 'Add amazing feature'`)
4. Push to branch (`git push origin feature/amazing`)
5. Open a Pull Request

## 💖 Support

If you found this project helpful, consider supporting:

- **Ko-fi**: [ko-fi.com/isaacnewton1](https://ko-fi.com/isaacnewton1)
- **Trakteer**: [trakteer.id/isaacnewton1/link](https://trakteer.id/isaacnewton1/link)

## 📝 License

This project is open source under the [MIT License](LICENSE).

---

Made with ❤️ by [Hanif Maulana](https://github.com/isaacnewton123)