Membuat Portfolio Modern dengan Next.js dan Tailwind CSS

Next.js dan Tailwind CSS adalah kombinasi yang sangat powerful untuk membuat website portfolio modern. Dalam tutorial ini, kita akan belajar langkah demi langkah bagaimana membangun website portfolio personal yang menarik, responsif, dan SEO-friendly.

Keuntungan Menggunakan Next.js dan Tailwind CSS

Next.js memberikan banyak keuntungan untuk pengembangan web modern:

• Server-side Rendering (SSR) dan Static Site Generation (SSG) untuk performa dan SEO yang lebih baik
• Fast Refresh untuk pengalaman development yang menyenangkan
• Image Optimization untuk memuat gambar dengan efisien
• API Routes untuk membuat API sederhana

Sementara itu, Tailwind CSS menawarkan:

• Utility-first approach untuk styling yang cepat dan konsisten
• Customization yang mudah untuk membuat desain yang unik
• Dark mode support yang mudah diimplementasikan
• Responsive design dengan breakpoint yang intuitif

Setup Proyek

Pertama, mari buat proyek Next.js baru dengan Tailwind CSS:

npx create-next-app portfolio-website --use-npm
cd portfolio-website
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Kemudian, konfigurasikan Tailwind CSS dengan mengupdate file tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        primary: '#3b82f6',
        secondary: '#10b981',
      },
    },
  },
  plugins: [],
  darkMode: 'class',
}

Kesimpulan

Next.js dan Tailwind CSS adalah kombinasi yang sangat baik untuk membuat portfolio modern. Dengan pendekatan utility-first dari Tailwind dan fitur-fitur Next.js seperti image optimization dan SSG, Anda bisa membuat website portfolio yang tidak hanya menarik secara visual tapi juga performa yang tinggi dan SEO-friendly.