Postingan

Membuat Website Portofolio Dengan Jekyll Theme

Membuat Website Portofolio Dengan Jekyll Theme

πŸš€ Jekyll Uta Folio - Modern Gradient Theme

Tema portofolio Jekyll yang modern, responsif, dan sangat ringan. Dirancang khusus untuk developer dan kreatif yang menginginkan tampilan profesional dengan Tailwind CSS, tanpa perlu setup Node.js yang rumit.

Use this template


✨ Fitur Utama

  • 🎨 Desain Modern & Glassmorphism: Estetika premium dengan aksen gradient indigo & purple.
  • πŸŒ“ Dark Mode Ready: Mendukung mode gelap otomatis sesuai sistem atau toggle manual.
  • πŸ“² WhatsApp Contact Integration: Pengunjung bisa mengirim pesan langsung ke WA tanpa backend.
  • ⚑ Ultra Fast: Menggunakan Tailwind CSS via CDN dan nol framework JavaScript berat.
  • πŸ“‚ Collection-Based Projects: Kelola portofolio Anda dengan mudah melalui file Markdown.
  • 🧩 Zero Configuration Pages: Halaman About, Contact, dan Project sudah termasuk dalam tema.

πŸ“‚ Struktur Folder Tema

Untuk bekerja sebagai tema, pastikan struktur folder Anda mengikuti standar berikut:

1
2
3
4
5
6
7
8
.
β”œβ”€β”€ _layouts/          # Template (default, page, post, project)
β”œβ”€β”€ _projects/         # Tempat file .md karya Anda
β”œβ”€β”€ assets/            # File gambar dan aset statis
β”œβ”€β”€ _config.yml        # Pusat pengaturan konten & profile
β”œβ”€β”€ index.md           # Halaman utama (Dinamis)
β”œβ”€β”€ about.md           # Halaman tentang saya (Dinamis)
└── contact.md         # Halaman kontak (WhatsApp ready)

πŸš€ Memulai (Quick Start)

Gunakan metode ini jika Anda ingin membuat portofolio baru dengan cepat tanpa harus melakukan fork manual:

  1. Gunakan Template: Klik tombol hijau β€œUse this template” di bagian atas halaman repositori ini.
  2. Buat Repositori Baru: Pilih akun pemilik dan beri nama repositori Anda (contoh: my-portfolio).
  3. Konfigurasi: Buka file _config.yml dan sesuaikan data diri Anda:
    • Ubah author.name, author.role, dan author.whatsapp.
    • Sesuaikan email dan url situs Anda.
  4. Aktifkan GitHub Pages:
    • Masuk ke tab Settings > Pages di repositori baru Anda.
    • Pada bagian Build and deployment, pilih source β€œGitHub Actions”.
  5. Selesai: Tunggu proses build selesai, dan portofolio Anda siap diakses!

πŸš€ Cara Instalasi

Sebagai Remote Theme (GitHub Pages)

Jika Anda menggunakan GitHub Pages, ini adalah cara tercepat:

  1. Tambahkan plugin jekyll-remote-theme ke Gemfile Anda:
    1
    2
    3
    
    group :jekyll_plugins do
      gem "jekyll-remote-theme"
    end
    
  2. Di file _config.yml Anda, tambahkan:
    1
    2
    3
    4
    5
    
    remote_theme: ishikawauta/jekyll-uta-folio
    plugins:
      - jekyll-remote-theme
      - jekyll-seo-tag
      - jekyll-feed
    

Sebagai Gem-based Theme

  1. Tambahkan baris berikut ke Gemfile proyek Jekyll Anda:
    1
    
    gem "jekyll-uta-folio"
    
  2. Jalankan:
    1
    
    bundle install
    
  3. Tambahkan di _config.yml:
    1
    
    theme: jekyll-uta-folio
    

βš™οΈ Kustomisasi (The Magic of _config.yml)

Keunggulan tema ini adalah Anda tidak perlu menyentuh kode HTML. Cukup edit _config.yml:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# Profil Penulis
author:
  name: "Nama Anda"
  role: "Pekerjaan Anda"
  whatsapp: "62895xxxxx" # Kode negara tanpa +
  image: "/assets/images/profile.jpg"

# Pengaturan Hero Section
hero_title: "Membangun Masa Depan Lewat Baris Kode."
hero_description: "Halo! Saya [name], seorang [role] yang fokus pada web."

# Daftar Keahlian (Skills)
skills:
  - name: "Web Development"
    icon: "πŸ’»"
    description: "HTML5, CSS3, JavaScript, dan React."

πŸ“„ Lisensi

Proyek ini dilisensikan di bawah MIT License. Anda bebas menggunakan, memodifikasi, dan mendistribusikannya kembali.

Postingan ini dilisensikan di bawah CC BY 4.0 oleh penulis.