Modern Minimalist Portfolio

Website portofolio modern-minimalis yang dibangun dengan ReactJS, TailwindCSS, dan Framer Motion.

🚀 Fitur

• ✨ Modern & Minimalist Design - Desain bersih dengan banyak whitespace dan tipografi yang rapi
• 🌓 Dark/Light Mode - Toggle tema gelap/terang dengan smooth transition
• 📱 Fully Responsive - Tampilan optimal di semua perangkat (mobile, tablet, desktop)
• 🎨 Smooth Animations - Animasi halus menggunakan Framer Motion
• 🧭 Smooth Scrolling - Navigasi dengan smooth scroll ke setiap section
• 📦 Modular Structure - Struktur kode yang rapi dan mudah dikembangkan

📋 Sections

1. Hero Section - Foto/avatar, nama, role, dan CTA buttons
2. About Me - Deskripsi singkat dan skills dalam bentuk icon grid
3. Projects - Card project modern dengan gambar, deskripsi, tech stack, dan links
4. Experience - Timeline clean untuk pengalaman kerja
5. Contact - Form sederhana untuk menghubungi (UI only)
6. Footer - Footer minimalis dengan social links

🛠️ Teknologi

• ReactJS - Framework JavaScript untuk UI
• Vite - Build tool yang cepat
• TailwindCSS - Utility-first CSS framework
• Framer Motion - Library untuk animasi
• Lucide React - Icon library

📦 Instalasi

1. Install dependencies:

   cd portfolio
   npm install

2. Jalankan development server:

   npm run dev

   Website akan berjalan di http://localhost:5173

3. Jika styling tidak muncul:

   • Stop dev server (Ctrl+C)
   • Clear Vite cache: Hapus folder node_modules/.vite jika ada
   • Restart dev server: npm run dev
   • Clear browser cache: Tekan Ctrl+Shift+R (hard refresh)

4. Build untuk production:

   npm run build

5. Preview production build:

   npm run preview

⚠️ Troubleshooting

Jika styling TailwindCSS tidak muncul, ikuti langkah-langkah di file TROUBLESHOOTING.md atau:

1. Pastikan semua dependencies terinstall: npm install
2. Clear Vite cache dan restart dev server
3. Hard refresh browser (Ctrl+Shift+R)
4. Pastikan file src/index.css diimport di src/main.jsx
5. Pastikan file tailwind.config.js dan postcss.config.js ada di root folder

📁 Struktur Folder

portfolio/
├── src/
│   ├── components/          # Reusable components
│   │   ├── Navbar.jsx      # Navigation bar
│   │   ├── ThemeToggle.jsx # Dark/Light mode toggle
│   │   └── Button.jsx      # Reusable button component
│   ├── sections/           # Page sections
│   │   ├── Hero.jsx        # Hero section
│   │   ├── About.jsx       # About section
│   │   ├── Projects.jsx    # Projects section
│   │   ├── Experience.jsx  # Experience section
│   │   ├── Contact.jsx     # Contact section
│   │   └── Footer.jsx      # Footer section
│   ├── data/              # Data files
│   │   ├── projects.js    # Projects data
│   │   ├── skills.js      # Skills data
│   │   └── experience.js  # Experience data
│   ├── assets/            # Static assets (images, etc.)
│   ├── App.jsx            # Main app component
│   ├── main.jsx           # Entry point
│   └── index.css          # Global styles & Tailwind imports
├── public/                # Public assets
├── index.html             # HTML template
├── tailwind.config.js     # Tailwind configuration
├── postcss.config.js      # PostCSS configuration
└── package.json           # Dependencies

🎨 Kustomisasi

Mengubah Data Personal

1. Hero Section - Edit src/sections/Hero.jsx:

   • Ganti "Your Name" dengan nama Anda
   • Ganti "Full Stack Developer" dengan role Anda
   • Update deskripsi dan avatar image

2. Projects - Edit src/data/projects.js:

   • Tambah/edit/ubah data project sesuai kebutuhan
   • Ganti placeholder images dengan gambar project Anda

3. Skills - Edit src/data/skills.js:

   • Update skills sesuai dengan keahlian Anda

4. Experience - Edit src/data/experience.js:

   • Update pengalaman kerja Anda

5. Contact - Edit src/sections/Contact.jsx:

   • Ganti email, phone, dan location
   • Untuk form submission, integrasikan dengan backend service

6. Footer - Edit src/sections/Footer.jsx:

   • Update social media links

Mengubah Warna Accent

Edit tailwind.config.js:

colors: {
  accent: {
    DEFAULT: '#3b82f6', // Ganti dengan warna yang diinginkan
    dark: '#2563eb',
  },
}

Menambahkan Foto/Gambar

1. Letakkan gambar di folder public/ atau src/assets/
2. Update path di komponen yang menggunakan gambar
3. Untuk avatar di Hero section, ganti URL di src/sections/Hero.jsx

📝 Catatan Penting

• Form Contact: Form contact saat ini hanya UI saja. Untuk mengaktifkan fungsi submit, perlu integrasi dengan backend service (misalnya EmailJS, Formspree, atau custom backend).
• Images: Gunakan gambar dengan format modern (WebP, AVIF) untuk performa lebih baik.
• SEO: Untuk production, tambahkan meta tags SEO di index.html.
• Analytics: Tambahkan Google Analytics atau analytics lainnya jika diperlukan.

🚀 Deployment

Website ini bisa di-deploy ke berbagai platform:

• Vercel: vercel deploy
• Netlify: Drag & drop folder dist/ setelah build
• GitHub Pages: Setup GitHub Actions untuk auto-deploy
• Cloudflare Pages: Connect repository dan auto-deploy

📄 License

MIT License - Feel free to use this project for your portfolio!

---

Happy Coding! 🎉