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.
β¨ 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:
- Gunakan Template: Klik tombol hijau βUse this templateβ di bagian atas halaman repositori ini.
- Buat Repositori Baru: Pilih akun pemilik dan beri nama repositori Anda (contoh:
my-portfolio). - Konfigurasi: Buka file
_config.ymldan sesuaikan data diri Anda:- Ubah
author.name,author.role, danauthor.whatsapp. - Sesuaikan
emaildanurlsitus Anda.
- Ubah
- Aktifkan GitHub Pages:
- Masuk ke tab Settings > Pages di repositori baru Anda.
- Pada bagian Build and deployment, pilih source βGitHub Actionsβ.
- 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:
- Tambahkan plugin
jekyll-remote-themekeGemfileAnda:1 2 3
group :jekyll_plugins do gem "jekyll-remote-theme" end
- Di file
_config.ymlAnda, 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
- Tambahkan baris berikut ke
Gemfileproyek Jekyll Anda:1
gem "jekyll-uta-folio"
- Jalankan:
1
bundle install - 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.
