jekyll-uta-folio 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: d47eae453a3b1d9f1ac3f2e6fba013a18ad311084be29c5d61c3f6c5ed98fa0d
+  data.tar.gz: 4691adc446887bdc4f3a8f4f31e540144517e9721296bfd73fa70d170935558f
+SHA512:
+  metadata.gz: 7f06d8b34f02a40e8c3594df0cb2c67475649f09b84b1168b6bf451e1c3d17ec19424ba3b04d29d6e5ccf8bae51f1f86ff9f66d9bda05fcb0faad92cf8a25041
+  data.tar.gz: 36c5097ac70b0732fd7886b90860192ad976bc4f5c6f7df85cc4b6bd98d0222d33ffbedf386baae86abbafb65dfeb0dc2c9bbc3b22dfd4351078630bc8204ada

data/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 IshikawaUta
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

data/README.md

@@ -0,0 +1,111 @@
+# 🚀 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.
+
+![Version](https://img.shields.io/badge/version-0.1.0-blue.svg)
+![License](https://img.shields.io/badge/license-MIT-green.svg)
+![Jekyll](https://img.shields.io/badge/Jekyll-Theme-red.svg)
+
+---
+
+## ✨ 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:
+```text
+.
+├── _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)
+```
+
+---
+
+## 🚀 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:
+```ruby
+group :jekyll_plugins do
+  gem "jekyll-remote-theme"
+end
+```
+
+
+2. Di file `_config.yml` Anda, tambahkan:
+```yaml
+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:
+```ruby
+gem "jekyll-uta-folio"
+```
+
+
+2. Jalankan:
+```bash
+bundle install
+```
+
+
+3. Tambahkan di `_config.yml`:
+```yaml
+theme: jekyll-uta-folio
+```
+
+
+
+---
+
+## ⚙️ Kustomisasi (The Magic of _config.yml)
+
+Keunggulan tema ini adalah Anda tidak perlu menyentuh kode HTML. Cukup edit `_config.yml`:
+
+```yaml
+# 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.

data/_config.yml

@@ -0,0 +1,99 @@
+# --- Informasi Dasar Situs ---
+title: My Modern Portfolio
+email: komikers09@gmail.com
+description: >-
+  Portfolio digital profesional dengan desain modern, gradient, 
+  dan integrasi langsung ke WhatsApp.
+baseurl: "" 
+url: "https://ishikawauta.github.io"
+
+# --- Data Profil (Digunakan di seluruh situs) ---
+author:
+  name: Eka saputra
+  role: Fullstack Developer
+  whatsapp: "62895701060973"
+  image: "https://res.cloudinary.com/dzsqaauqn/image/upload/v1751897200/nxdkmqhzszftsvmazjdc.jpg"
+
+# --- Kustomisasi Halaman Utama (Theme Settings) ---
+hero_title: "Membangun <span class='text-transparent bg-clip-text bg-gradient-to-r from-indigo-600 to-purple-600 dark:from-indigo-400 dark:to-purple-400'>Masa Depan</span> Lewat Baris Kode."
+hero_description: "Halo! Saya [name], seorang [role] yang fokus pada estetika dan performa web."
+
+# Bagian Keahlian (Skills)
+skills_title: "Keahlian Utama"
+skills_description: "Teknologi yang saya gunakan untuk mewujudkan ide Anda."
+skills:
+  - name: "Web Development"
+    icon: "💻"
+    description: "HTML5, CSS3, JavaScript, dan framework modern seperti React atau Vue."
+  - name: "Devops Engineer"
+    icon: "👨🏻‍💻"
+    description: "Membangun infrastruktur otomatis serta memastikan efisiensi pengembangan perangkat lunak."
+  - name: "Optimization"
+    icon: "🚀"
+    description: "Memastikan website cepat, SEO friendly, dan responsif di semua perangkat."
+
+# Bagian Proyek
+projects_title: "Proyek Terbaru"
+projects_description: "Karya terpilih yang telah saya selesaikan."
+
+# --- Pengaturan Halaman About ---
+about_title: "Tentang <span class='text-indigo-600 dark:text-indigo-400'>Saya</span>"
+
+# Gunakan >- untuk menulis teks panjang beberapa baris
+about_content: >-
+  Saya adalah seorang kreatif yang bersemangat dalam menggabungkan desain visual dengan teknologi web terbaru. 
+  Dengan pengalaman bertahun-tahun di industri digital, saya telah membantu berbagai klien membangun identitas online mereka.
+
+  Visi saya adalah menciptakan solusi digital yang tidak hanya terlihat bagus, tetapi juga memberikan hasil nyata bagi bisnis. 
+  Saya sangat menyukai tantangan baru dan selalu belajar teknologi terbaru setiap harinya.
+
+about_quote:
+  text: "Desain bukan sekadar apa yang terlihat, tapi bagaimana cara kerjanya."
+  author: "Steve Jobs"
+
+# --- Pengaturan Halaman Kontak ---
+location: "Jakarta, Indonesia"
+contact_title: "Ayo Berkolaborasi."
+contact_description: "Punya ide proyek atau sekadar ingin menyapa? Silakan isi formulir ini, pesan Anda akan langsung masuk ke WhatsApp saya."
+
+# Format pesan yang akan muncul di chat WhatsApp (gunakan [name] dan [msg] sebagai placeholder)
+whatsapp_intro_text: "Halo, saya *[name]*. Saya ingin berdiskusi tentang: [msg]"
+
+# --- Pengaturan Build ---
+markdown: kramdown
+highlighter: rouge
+
+# --- File yang Diabaikan ---
+exclude:
+  - Gemfile
+  - Gemfile.lock
+  - node_modules
+  - .sass-cache
+  - .jekyll-cache
+  - .jekyll-metadata
+  - vendor
+  - README.md
+  - SCREENSHOT.png
+
+# --- Plugins ---
+plugins:
+  - jekyll-feed
+  - jekyll-seo-tag
+
+# --- Pengaturan Khusus (Defaults) ---
+defaults:
+  - scope:
+      path: ""
+      type: "pages"
+    values:
+      layout: "default"
+  - scope:
+      path: ""
+      type: "projects"
+    values:
+      layout: "project"
+
+collections:
+  projects:
+    output: true
+    permalink: /project/:path/

data/_layouts/default.html

@@ -0,0 +1,149 @@
+<!DOCTYPE html>
+<html lang="id">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{ page.title }} | {{ site.title }}</title>
+    
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+        }
+    </script>
+
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700;800&display=swap" rel="stylesheet">
+    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🚀</text></svg>">
+    
+    <style>
+        body { font-family: 'Inter', sans-serif; transition: background-color 0.3s ease, color 0.3s ease; }
+        .bg-gradient-modern { background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%); }
+        .hover-lift { transition: all 0.3s ease; }
+        .hover-lift:hover { transform: translateY(-10px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); }
+        
+        /* Glassmorphism yang adaptif */
+        .glass { 
+            background: rgba(255, 255, 255, 0.7); 
+            backdrop-filter: blur(10px); 
+            border: 1px solid rgba(255, 255, 255, 0.2); 
+        }
+        .dark .glass { 
+            background: rgba(15, 23, 42, 0.6); 
+            border: 1px solid rgba(255, 255, 255, 0.1); 
+        }
+
+        /* State untuk Mobile Menu */
+        #mobile-menu.active {
+            display: flex;
+        }
+    </style>
+
+    <script>
+        if (localStorage.getItem('theme') === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+            document.documentElement.classList.add('dark');
+        } else {
+            document.documentElement.classList.remove('dark');
+        }
+    </script>
+</head>
+<body class="bg-slate-50 text-slate-900 dark:bg-[#0f172a] dark:text-slate-200 min-h-screen flex flex-col">
+
+    <nav class="sticky top-0 z-50 glass px-6 py-4">
+        <div class="max-w-6xl mx-auto flex justify-between items-center">
+            <a href="{{ site.baseurl }}/" class="text-xl md:text-2xl font-extrabold tracking-tighter text-slate-900 dark:text-white">
+                MY<span class="text-indigo-500">FOLIO.</span>
+            </a>
+            
+            <div class="flex items-center space-x-4 md:space-x-8">
+                <div class="hidden md:flex space-x-8 font-medium">
+                    <a href="{{ site.baseurl }}/" class="hover:text-indigo-600 dark:hover:text-indigo-400 transition">Home</a>
+                    <a href="{{ site.baseurl }}/about" class="hover:text-indigo-600 dark:hover:text-indigo-400 transition">About</a>
+                    <a href="{{ site.baseurl }}/contact" class="hover:text-indigo-600 dark:hover:text-indigo-400 transition">Contact</a>
+                </div>
+
+                <div class="flex items-center space-x-2 md:space-x-4">
+                    <button id="theme-toggle" class="p-2.5 rounded-xl bg-slate-200 dark:bg-slate-800 text-slate-700 dark:text-yellow-400 hover:ring-2 ring-indigo-500 transition-all duration-300">
+                        <span id="theme-toggle-dark-icon" class="hidden text-xl">🌙</span>
+                        <span id="theme-toggle-light-icon" class="hidden text-xl">☀️</span>
+                    </button>
+
+                    <button id="mobile-menu-button" class="md:hidden p-2.5 rounded-xl bg-slate-200 dark:bg-slate-800 text-slate-700 dark:text-slate-200">
+                        <svg id="hamburger-icon" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
+                        </svg>
+                    </button>
+                </div>
+            </div>
+        </div>
+
+        <div id="mobile-menu" class="hidden flex-col md:hidden mt-4 space-y-4 pb-4 animate__animated animate__fadeIn">
+            <a href="{{ site.baseurl }}/" class="block px-4 py-2 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-lg transition">Home</a>
+            <a href="{{ site.baseurl }}/about" class="block px-4 py-2 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-lg transition">About</a>
+            <a href="{{ site.baseurl }}/contact" class="block px-4 py-2 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-lg transition">Contact</a>
+        </div>
+    </nav>
+
+    <main class="flex-grow">
+        {{ content }}
+    </main>
+
+    <footer class="p-5 text-center text-slate-500 border-t border-slate-200 dark:border-slate-800">
+        <p>&copy; 2026 {{ site.author.name }}. Built with Jekyll & Tailwind.</p>
+    </footer>
+
+    <script>
+        // --- Dark Mode Logic ---
+        const themeToggleBtn = document.getElementById('theme-toggle');
+        const darkIcon = document.getElementById('theme-toggle-dark-icon');
+        const lightIcon = document.getElementById('theme-toggle-light-icon');
+
+        function updateIcons() {
+            if (document.documentElement.classList.contains('dark')) {
+                lightIcon.classList.remove('hidden');
+                darkIcon.classList.add('hidden');
+            } else {
+                darkIcon.classList.remove('hidden');
+                lightIcon.classList.add('hidden');
+            }
+        }
+
+        updateIcons();
+
+        themeToggleBtn.addEventListener('click', function() {
+            document.documentElement.classList.toggle('dark');
+            if (document.documentElement.classList.contains('dark')) {
+                localStorage.setItem('theme', 'dark');
+            } else {
+                localStorage.setItem('theme', 'light');
+            }
+            updateIcons();
+        });
+
+        // --- Mobile Menu Logic ---
+        const menuButton = document.getElementById('mobile-menu-button');
+        const mobileMenu = document.getElementById('mobile-menu');
+        const hamburgerIcon = document.getElementById('hamburger-icon');
+
+        menuButton.addEventListener('click', () => {
+            const isOpen = mobileMenu.classList.toggle('hidden');
+            const active = !mobileMenu.classList.contains('hidden');
+            
+            // Update Icon (Hamburger to X)
+            if (active) {
+                hamburgerIcon.innerHTML = `<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>`;
+            } else {
+                hamburgerIcon.innerHTML = `<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>`;
+            }
+        });
+
+        // Close menu on resize to desktop
+        window.addEventListener('resize', () => {
+            if (window.innerWidth >= 768) {
+                mobileMenu.classList.add('hidden');
+                hamburgerIcon.innerHTML = `<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>`;
+            }
+        });
+    </script>
+</body>
+</html>

data/_layouts/page.html

@@ -0,0 +1,8 @@
+---
+layout: default
+---
+<article class="max-w-4xl mx-auto px-6 py-20 animate__animated animate__fadeIn">
+    <div class="prose prose-invert lg:prose-xl text-slate-400">
+        {{ content }}
+    </div>
+</article>

data/_layouts/post.html

@@ -0,0 +1,33 @@
+---
+layout: default
+---
+<article class="max-w-4xl mx-auto px-6 py-20 animate__animated animate__fadeIn">
+    <header class="mb-12 border-b border-slate-800 pb-8">
+        <h1 class="text-4xl md:text-5xl font-black text-white mb-6 leading-tight">
+            {{ page.title }}
+        </h1>
+        
+        <div class="flex items-center space-x-4 text-slate-400">
+            <div class="flex items-center">
+                <span class="mr-2">📅</span>
+                <time datetime="{{ page.date | date_to_xmlschema }}">
+                    {{ page.date | date: "%d %B %Y" }}
+                </time>
+            </div>
+            <div class="flex items-center border-l border-slate-700 pl-4">
+                <span class="mr-2">✍️</span>
+                <span>{{ site.author.name }}</span>
+            </div>
+        </div>
+    </header>
+
+    <div class="prose prose-invert lg:prose-xl text-slate-400 max-w-none">
+        {{ content }}
+    </div>
+
+    <footer class="mt-16 pt-8 border-t border-slate-800">
+        <a href="{{ '/' | relative_url }}" class="text-indigo-400 font-bold hover:text-white transition flex items-center">
+            <span class="mr-2">←</span> Kembali ke Beranda
+        </a>
+    </footer>
+</article>

data/_layouts/project.html

@@ -0,0 +1,51 @@
+---
+layout: default
+---
+<div class="max-w-5xl mx-auto px-6 py-20 animate__animated animate__fadeIn">
+    <a href="{{ '/' | relative_url }}" class="text-slate-500 hover:text-indigo-600 dark:hover:text-indigo-400 transition flex items-center mb-8 group">
+        <span class="transform group-hover:-translate-x-2 transition-transform duration-300 mr-2">←</span> Kembali ke Portofolio
+    </a>
+
+    <div class="flex flex-col lg:flex-row gap-12">
+        <div class="lg:w-2/3">
+            <div class="glass rounded-3xl overflow-hidden mb-8 border border-slate-200 dark:border-slate-700/50 shadow-sm">
+                {% if page.thumbnail %}
+                    <img src="{{ page.thumbnail }}" alt="{{ page.title }}" class="w-full h-auto object-cover">
+                {% else %}
+                    <div class="bg-slate-200 dark:bg-slate-800 h-64 flex items-center justify-center text-6xl">📁</div>
+                {% endif %}
+            </div>
+            
+            <div class="prose dark:prose-invert lg:prose-xl text-slate-600 dark:text-slate-400 max-w-none">
+                {{ content }}
+            </div>
+        </div>
+
+        <div class="lg:w-1/3">
+            <div class="sticky top-28 space-y-6">
+                <div class="glass p-8 rounded-3xl border-l-4 border-indigo-500 shadow-md">
+                    <span class="text-xs font-bold text-indigo-600 dark:text-indigo-400 uppercase tracking-widest">{{ page.category }}</span>
+                    <h1 class="text-3xl font-black text-slate-900 dark:text-white mt-2 mb-4 leading-tight">{{ page.title }}</h1>
+                    <p class="text-slate-600 dark:text-slate-400 text-sm leading-relaxed mb-6">
+                        {{ page.description }}
+                    </p>
+                    
+                    <div class="space-y-4 border-t border-slate-200 dark:border-slate-800 pt-6">
+                        <div class="flex justify-between text-sm">
+                            <span class="text-slate-500">Klien</span>
+                            <span class="text-slate-900 dark:text-slate-200 font-medium">Internal Project</span>
+                        </div>
+                        <div class="flex justify-between text-sm">
+                            <span class="text-slate-500">Peran</span>
+                            <span class="text-slate-900 dark:text-slate-200 font-medium">{{ site.author.role }}</span>
+                        </div>
+                    </div>
+
+                    <a href="{{ '/contact' | relative_url }}" class="mt-8 block w-full bg-gradient-modern text-center py-4 rounded-xl font-bold text-white hover:scale-105 transition duration-300 shadow-lg shadow-indigo-500/25">
+                        Tertarik dengan Proyek Ini?
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

data/_projects/web-app.md

@@ -0,0 +1,15 @@
+---
+layout: project
+title: "Aplikasi E-Commerce Premium"
+category: "Web Development"
+description: "Platform belanja online dengan integrasi pembayaran otomatis dan desain elegan untuk meningkatkan konversi penjualan."
+thumbnail: "https://res.cloudinary.com/dzsqaauqn/image/upload/v1754582928/hb5dzf63uhaft4huyukr.jpg"
+---
+
+### Ringkasan Eksekutif
+Proyek ini dibangun untuk mendemonstrasikan kemampuan dalam mengelola state aplikasi yang kompleks serta integrasi API pihak ketiga.
+
+### Fitur Utama
+* **Payment Gateway**: Integrasi pembayaran otomatis.
+* **Responsive Design**: Tampilan optimal di perangkat mobile maupun desktop.
+* **SEO Optimized**: Kecepatan akses tinggi untuk performa pencarian lebih baik.

data/about.md

@@ -0,0 +1,29 @@
+---
+layout: default
+title: About
+---
+
+<div class="max-w-4xl mx-auto px-6 py-20 animate__animated animate__fadeIn">
+    <h2 class="text-4xl font-extrabold text-slate-900 dark:text-white mb-8">
+        {{ site.about_title | default: "Tentang <span class='text-indigo-600 dark:text-indigo-400'>Saya</span>" }}
+    </h2>
+    
+    <div class="prose dark:prose-invert lg:prose-xl text-slate-600 dark:text-slate-400">
+        {% if site.about_content %}
+            {{ site.about_content | markdownify }}
+        {% else %}
+            <p class="mb-6">
+                Silakan isi deskripsi diri Anda di file <code>_config.yml</code> pada bagian <code>about_content</code>.
+            </p>
+        {% endif %}
+    </div>
+
+    {% if site.about_quote %}
+    <div class="mt-12 p-8 glass rounded-3xl border-l-4 border-indigo-500 shadow-sm">
+        <h4 class="text-slate-800 dark:text-white font-bold text-lg mb-2 italic">
+            "{{ site.about_quote.text }}"
+        </h4>
+        <p class="text-slate-500 dark:text-slate-400">- {{ site.about_quote.author }}</p>
+    </div>
+    {% endif %}
+</div>

data/contact.md

@@ -0,0 +1,74 @@
+---
+layout: default
+title: Contact
+---
+
+<div class="max-w-6xl mx-auto px-6 py-20">
+    <div class="flex flex-col md:flex-row gap-16 items-start">
+        
+        <div class="md:w-1/2 animate__animated animate__fadeInLeft">
+            <h2 class="text-4xl font-extrabold text-slate-900 dark:text-white mb-6">
+                {{ site.contact_title | default: "Ayo Berkolaborasi." }}
+            </h2>
+            <p class="text-slate-600 dark:text-slate-400 text-lg mb-8">
+                {{ site.contact_description | default: "Punya ide proyek atau sekadar ingin menyapa? Silakan isi formulir ini, pesan Anda akan langsung masuk ke WhatsApp saya." }}
+            </p>
+            
+            <div class="space-y-4 text-slate-700 dark:text-slate-300">
+                {% if site.email %}
+                <div class="flex items-center space-x-4">
+                    <span class="p-3 bg-slate-200 dark:bg-slate-800 rounded-lg">📧</span>
+                    <span>{{ site.email }}</span>
+                </div>
+                {% endif %}
+                
+                {% if site.location %}
+                <div class="flex items-center space-x-4">
+                    <span class="p-3 bg-slate-200 dark:bg-slate-800 rounded-lg">📍</span>
+                    <span>{{ site.location }}</span>
+                </div>
+                {% endif %}
+            </div>
+        </div>
+
+        <div class="md:w-1/2 w-full glass p-8 rounded-3xl animate__animated animate__fadeInRight shadow-xl">
+            <div class="space-y-6">
+                <div>
+                    <label class="block text-sm font-medium text-slate-600 dark:text-slate-400 mb-2">Nama Anda</label>
+                    <input type="text" id="wa_name" placeholder="Masukkan nama Anda" 
+                        class="w-full bg-white/50 dark:bg-slate-900/50 border border-slate-300 dark:border-slate-700 text-slate-900 dark:text-white rounded-xl p-4 focus:ring-2 focus:ring-indigo-500 outline-none transition placeholder:text-slate-400">
+                </div>
+                <div>
+                    <label class="block text-sm font-medium text-slate-600 dark:text-slate-400 mb-2">Pesan</label>
+                    <textarea id="wa_message" rows="5" placeholder="Tuliskan ide proyek Anda..." 
+                        class="w-full bg-white/50 dark:bg-slate-900/50 border border-slate-300 dark:border-slate-700 text-slate-900 dark:text-white rounded-xl p-4 focus:ring-2 focus:ring-indigo-500 outline-none transition placeholder:text-slate-400"></textarea>
+                </div>
+                <button onclick="sendToWA()" class="w-full bg-gradient-modern py-4 rounded-xl font-bold text-white text-lg hover:shadow-lg hover:shadow-indigo-500/40 hover:scale-[1.02] active:scale-95 transition duration-300">
+                    Kirim Pesan Sekarang
+                </button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+function sendToWA() {
+    const name = document.getElementById('wa_name').value;
+    const msg = document.getElementById('wa_message').value;
+    const phone = "{{ site.author.whatsapp }}";
+
+    if (!name || !msg) {
+        alert("Harap isi nama dan pesan terlebih dahulu.");
+        return;
+    }
+
+    // Format pesan WhatsApp dinamis
+    const intro = "{{ site.whatsapp_intro_text | default: 'Halo, saya [name]. Pesan: [msg]' }}";
+    const formattedMsg = intro.replace("[name]", name).replace("[msg]", msg);
+    
+    const text = encodeURIComponent(formattedMsg);
+    const whatsappUrl = `https://wa.me/${phone}?text=${text}`;
+    
+    window.open(whatsappUrl, '_blank');
+}
+</script>

data/index.md

@@ -0,0 +1,84 @@
+---
+layout: default
+title: Home
+---
+
+<section class="max-w-6xl mx-auto px-6 py-12 md:py-20 flex flex-col md:flex-row items-center">
+    <div class="w-full md:w-3/5 text-center md:text-left animate__animated animate__fadeInLeft order-2 md:order-1">
+        <h2 class="text-4xl md:text-6xl font-black text-slate-900 dark:text-white leading-[1.1] md:leading-tight">
+            {{ site.hero_title | default: "Membangun Masa Depan Lewat Baris Kode." }}
+        </h2>
+        <p class="mt-6 text-lg md:text-xl text-slate-600 dark:text-slate-400 max-w-lg mx-auto md:mx-0">
+            {% assign desc = site.hero_description | default: "Halo! Saya adalah [name], seorang [role] yang fokus pada estetika dan performa web." %}
+            {{ desc | replace: "[name]", site.author.name | replace: "[role]", site.author.role }}
+        </p>
+        <div class="mt-10 flex flex-col sm:flex-row justify-center md:justify-start gap-4">
+            <a href="{{ '/contact' | relative_url }}" class="bg-gradient-modern px-8 py-4 rounded-xl font-bold text-white hover:scale-105 transition duration-300 shadow-lg shadow-indigo-500/20 text-center">Hubungi Saya</a>
+            <a href="{{ '/about' | relative_url }}" class="px-8 py-4 rounded-xl font-bold border border-slate-300 dark:border-slate-700 text-slate-700 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-800 transition text-center">Tentang Saya</a>
+        </div>
+    </div>
+    
+    <div class="w-full md:w-2/5 mb-12 md:mb-0 flex justify-center animate__animated animate__zoomIn order-1 md:order-2">
+        <div class="relative">
+            <div class="absolute -inset-1 bg-gradient-to-r from-indigo-500 to-purple-600 rounded-full blur opacity-30 dark:opacity-40 animate-pulse"></div>
+            {% if site.author.image %}
+                <img src="{{ site.author.image | relative_url }}" 
+                     class="relative rounded-full w-48 h-48 md:w-64 md:h-64 border-4 border-white dark:border-slate-800 shadow-2xl object-cover" 
+                     alt="{{ site.author.name }}">
+            {% else %}
+                <div class="relative rounded-full w-48 h-48 md:w-64 md:h-64 border-4 border-white dark:border-slate-800 shadow-2xl bg-slate-200 dark:bg-slate-800 flex items-center justify-center text-4xl">👤</div>
+            {% endif %}
+        </div>
+    </div>
+</section>
+
+{% if site.skills %}
+<section class="max-w-6xl mx-auto px-6 py-16 md:py-24 border-t border-slate-200 dark:border-slate-800">
+    <div class="text-center mb-12 md:mb-16">
+        <h3 class="text-2xl md:text-3xl font-bold text-slate-900 dark:text-white">{{ site.skills_title | default: "Keahlian Utama" }}</h3>
+        <p class="text-slate-600 dark:text-slate-400 mt-2">{{ site.skills_description | default: "Teknologi yang saya gunakan untuk mewujudkan ide Anda." }}</p>
+    </div>
+    
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8">
+        {% for skill in site.skills %}
+        <div class="glass p-8 rounded-3xl hover-lift shadow-sm transition-all border border-transparent hover:border-indigo-500/20">
+            <div class="w-12 h-12 bg-indigo-500/10 dark:bg-indigo-500/20 text-indigo-600 dark:text-indigo-400 flex items-center justify-center rounded-xl mb-6 text-2xl">
+                {{ skill.icon | default: "⚡" }}
+            </div>
+            <h4 class="text-xl font-bold text-slate-900 dark:text-white mb-2">{{ skill.name }}</h4>
+            <p class="text-slate-600 dark:text-slate-400 text-sm leading-relaxed">{{ skill.description }}</p>
+        </div>
+        {% endfor %}
+    </div>
+</section>
+{% endif %}
+
+<section class="max-w-6xl mx-auto px-6 py-16 md:py-24 border-t border-slate-200 dark:border-slate-800">
+    <div class="text-center mb-12 md:mb-16">
+        <h3 class="text-2xl md:text-3xl font-bold text-slate-900 dark:text-white">{{ site.projects_title | default: "Proyek Terbaru" }}</h3>
+        <p class="text-slate-600 dark:text-slate-400 mt-2">{{ site.projects_description | default: "Karya terpilih yang telah saya selesaikan." }}</p>
+    </div>
+    
+    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
+        {% assign projects = site.projects | sort: 'date' | reverse %}
+        {% for project in projects limit:6 %}
+        <div class="glass rounded-3xl overflow-hidden hover-lift flex flex-col shadow-sm group border border-transparent hover:border-indigo-500/20">
+            <div class="h-48 bg-slate-200 dark:bg-slate-800 flex items-center justify-center overflow-hidden">
+                {% if project.thumbnail %}
+                    <img src="{{ project.thumbnail | relative_url }}" alt="{{ project.title }}" class="w-full h-full object-cover group-hover:scale-110 transition duration-500">
+                {% else %}
+                    <span class="text-5xl">📁</span>
+                {% endif %}
+            </div>
+            <div class="p-6 flex-grow">
+                <span class="text-xs font-bold text-indigo-600 dark:text-indigo-400 uppercase tracking-widest">{{ project.category | default: "Project" }}</span>
+                <h4 class="text-xl font-bold text-slate-900 dark:text-white mt-2 mb-3">{{ project.title }}</h4>
+                <p class="text-slate-600 dark:text-slate-400 text-sm mb-6 line-clamp-2 italic">{{ project.description }}</p>
+                <a href="{{ project.url | relative_url }}" class="text-indigo-600 dark:text-indigo-400 font-bold hover:text-indigo-800 dark:hover:text-white transition inline-flex items-center">
+                    Lihat Detail <span class="ml-2 group-hover:translate-x-2 transition-transform">→</span>
+                </a>
+            </div>
+        </div>
+        {% endfor %}
+    </div>
+</section>

metadata

@@ -0,0 +1,93 @@
+--- !ruby/object:Gem::Specification
+name: jekyll-uta-folio
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- IshikawaUta
+bindir: bin
+cert_chain: []
+date: 1980-01-02 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: jekyll
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '4.0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '4.0'
+- !ruby/object:Gem::Dependency
+  name: jekyll-feed
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '0.12'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '0.12'
+- !ruby/object:Gem::Dependency
+  name: jekyll-seo-tag
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.8'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.8'
+email:
+- komikers09@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- LICENSE
+- README.md
+- _config.yml
+- _layouts/default.html
+- _layouts/page.html
+- _layouts/post.html
+- _layouts/project.html
+- _projects/web-app.md
+- about.md
+- contact.md
+- index.md
+homepage: https://github.com/ishikawauta/jekyll-uta-folio
+licenses:
+- MIT
+metadata:
+  plugin_type: theme
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 3.6.7
+specification_version: 4
+summary: Tema portofolio Jekyll modern dengan Tailwind CSS dan integrasi WhatsApp.
+test_files: []