Selamat datang di Galaxy Portfolio! Ini adalah template website portfolio pribadi modern dengan desain Neo-Cyber Bento yang elegan dan interaktif. Dibuat menggunakan HTML, CSS, dan JavaScript murni (Vanilla JS) tanpa framework apapun.
Website ini menampilkan:
- Desain Bento Grid yang premium dan responsif
- Efek spotlight interaktif pada setiap card
- Animasi bintang kedip-kedip di background
- Border beam yang berputar pada project cards
- Cursor glow yang mengikuti mouse
- Navigasi floating yang modern
| Fitur | Deskripsi |
|---|---|
| Bento Grid Layout | Layout modern berbasis CSS Grid dengan 12 kolom |
| Spotlight Effect | Efek cahaya yang mengikuti cursor di setiap card |
| Twinkling Stars | Bintang-bintang animasi di background |
| Border Beam | Animasi garis berputar di project cards |
| Cursor Glow | Cahaya cyan yang mengikuti mouse |
| Responsive Design | Tampil sempurna di semua ukuran layar |
| Smooth Scroll | Navigasi halus antar section |
| Typing Effect | Animasi ketik pada role/jabatan |
| Sound Effects | Efek suara subtle saat hover dan klik |
Berikut adalah struktur folder dalam project ini:
portofolio/
├── index.html # Halaman utama website
├── setting.js # File konfigurasi (biodata, skills, projects)
├── favicon.ico # Icon tab browser
├── README.md # Dokumentasi ini
├── CHANGELOG.md # Riwayat perubahan
└── assets/
├── css/
│ ├── style.css # Stylesheet utama
│ └── animations.css # Animasi tambahan
├── js/
│ ├── components.js # Komponen HTML dinamis
│ └── main.js # Logika aplikasi
└── images/
├── logo.jpg # Foto profil/avatar
├── projek-1.png # Screenshot project 1
├── projek-2.png # Screenshot project 2
└── projek-3.png # Screenshot project 3
Ikuti langkah-langkah berikut untuk menjalankan website ini di komputer kamu:
Opsi A - Download ZIP:
- Klik tombol hijau "Code" di halaman GitHub
- Pilih "Download ZIP"
- Extract file ZIP ke folder yang kamu inginkan
Opsi B - Clone dengan Git:
git clone https://github.com/LuckyArch/Ourin-Porto.gitBuka folder portofolio menggunakan code editor favorit kamu (VS Code, Sublime Text, dll).
Cara Termudah:
- Klik dua kali file
index.htmluntuk membukanya di browser
Cara Lebih Baik (dengan Live Server):
- Install extension "Live Server" di VS Code
- Klik kanan pada
index.html - Pilih "Open with Live Server"
- Browser akan terbuka otomatis dengan hot-reload
Buka file setting.js dan edit bagian berikut:
const settings = {
profile: {
name: "Nama Kamu", // Ganti nama
title: "Jabatan Kamu", // Ganti title
age: 25, // Ganti umur
avatar: "assets/images/logo.jpg", // Ganti foto
bio: "Deskripsi tentang dirimu...",
email: "emailkamu@gmail.com",
location: "Kota, Negara",
},
// ... lanjutan setting
};Di file setting.js, cari bagian skills:
skills: {
languages: [
{ name: "HTML", icon: "ri-html5-fill", color: "#E34F26" },
{ name: "CSS", icon: "ri-css3-fill", color: "#1572B6" },
// Tambah atau hapus skill di sini
],
frameworks: [...],
others: [...]
}Catatan: Icon menggunakan Remix Icons. Kunjungi websitenya untuk mencari nama icon yang sesuai.
Di file setting.js, cari bagian projects:
projects: [
{
title: "Nama Project",
description: "Deskripsi singkat project kamu",
image: "assets/images/projek-1.png", // Screenshot project
tags: ["Tag1", "Tag2", "Tag3"],
link: "https://link-project-kamu.com"
},
// Tambah project baru di sini
]social: [
{ name: "GitHub", icon: "ri-github-fill", link: "https://github.com/username", color: "#ffffff" },
{ name: "Instagram", icon: "ri-instagram-fill", link: "https://instagram.com/username", color: "#E1306C" },
// Tambah atau ubah sosmed di sini
]Buka file assets/css/style.css dan cari bagian :root:
:root {
--bg-deep: #050505; /* Warna background utama */
--bg-surface: #0a0a0a; /* Warna surface/card */
--primary: #58c4dc; /* Warna aksen utama (cyan) */
--secondary: #bd00ff; /* Warna aksen kedua (ungu) */
--accent: #ffffff; /* Warna aksen tambahan */
--text-main: #ffffff; /* Warna teks utama */
--text-muted: #888888; /* Warna teks secondary */
}Ganti nilai hex color sesuai keinginan kamu.
Website ini sudah responsif untuk berbagai ukuran layar:
- Desktop (> 1024px): Layout 12 kolom
- Tablet (768px - 1024px): Layout 6 kolom
- Mobile (< 768px): Layout 1 kolom (stacked)
- Push code ke repository GitHub kamu
- Buka Settings > Pages
- Pilih Branch:
main, Folder:/ (root) - Klik Save
- Tunggu beberapa menit, website akan live di
https://username.github.io/repo-name
- Buka netlify.com
- Login dengan GitHub
- Klik "Add new site" > "Import an existing project"
- Pilih repository kamu
- Biarkan setting default, klik Deploy
- Website akan live dalam hitungan detik
- Buka vercel.com
- Login dengan GitHub
- Klik "New Project"
- Import repository kamu
- Biarkan setting default, klik Deploy
- HTML5 - Struktur website
- CSS3 - Styling dan animasi
- JavaScript (ES6+) - Interaktivitas
- Google Fonts - Typography (Sora, Inter, Space Grotesk)
- Remix Icons - Icon library
- CSS Grid - Layout system
- CSS Custom Properties - Theming
Jika kamu menemukan bug atau punya pertanyaan:
- Buat Issue di repository ini
- Atau hubungi via email: zannlovez@gmail.com
Project ini free untuk digunakan dan dimodifikasi. Jika kamu menggunakannya, credit tidak wajib tapi sangat dihargai! 🙏
Jika template ini membantu kamu, berikan ⭐ star di repository ini!
Made with 💜 by Fauzan Adyatma P