SYSTEM DOCUMENTATION

Panduan lengkap untuk menggunakan, mengelola, dan mendeploykan portfolio system ini.

📖 Menu
Overview Setup & Installation Editing Content Data Management Server Sync Deployment FAQ & Troubleshooting Project Structure

📌 System Overview

Portfolio HUD UI adalah sistem manajemen portfolio yang dirancang untuk:

  • ✓ Edit konten dinamis tanpa coding
  • ✓ Sinkronisasi data antar device
  • ✓ Deploy ke server statis (Ubuntu + HestiaCP)
  • ✓ UI/UX futuristik dengan Neon theme
  • ✓ Support offline mode via localStorage

Komponen Utama:

File Fungsi
index.html Halaman portfolio utama
admin.html Panel manajemen konten
script.js Core logic & data management
admin.js Admin panel functionality
portfolio-data.json Server database (optional)
style.css Styling & animations

🚀 Setup & Installation

⚡ Quick Start: Folder ini sudah siap digunakan! Cukup buka index.html di browser.

Persyaratan:

  • Browser modern (Chrome, Firefox, Edge, Safari)
  • Server web untuk hosting (Apache, Nginx, atau HestiaCP)
  • FTP/SFTP client untuk upload file (Filezilla, WinSCP, dll)

Local Testing:

Untuk test di lokal, jalankan simple server:

# Python 3 python3 -m http.server 8000 # Atau dengan Live Server extension di VS Code

Kemudian buka: http://localhost:8000

✏️ Editing Content

Semua konten dikelola melalui Admin Panel. Akses: admin.html

Sections yang Bisa Diedit:

1. Site Metadata

1 Page Title - Judul yang muncul di tab browser
2 Logo Text - Teks logo di navbar header
3 Favicon - Icon tab (upload PNG/JPG atau paste Base64)

2. Hero Section

Ubah nama besar dan frasa yang berganti-ganti. Contoh: "WEB DEVELOPER", "AI ENTHUSIAST", dll

3. About Section

Edit deskripsi tentang diri. Support HTML tags seperti <span class="highlight">

4. Skills

  • Tambah skill baru dengan tombol "Add Skill"
  • Edit nama skill dan level (0-100%)
  • Hapus skill dengan tombol "Remove"

5. Projects

  • Tambah project dengan tombol "Add Project"
  • Edit: Title, Description, Demo URL, Code URL, GitHub Repo
  • Gambar otomatis dari GitHub repository

6. Tech Stack

Daftar teknologi yang Anda gunakan (misal: HTML5, CSS3, JavaScript, React, Node, AI)

7. Contact

  • Link GitHub, LinkedIn, Email
  • Message/Status kontak

8. Footer

Copyright dan informasi footer halaman

💾 Data Management

Penyimpanan Data:

Storage Lokasi Lifetime Akses
localStorage Browser device Permanen (sampai browser cache dihapus) Local only
portfolio-data.json Server file Permanen di server Semua user
RAM Memory browser Session only Realtime changes

Export Data:

1 Buka Admin Panel → Data Management
2 Klik "Export Data as JSON"
3 File portfolio-data.json akan terdownload

Import Data:

1 Buka Admin Panel → Data Management
2 Pilih file JSON dengan "Import Data from JSON"
3 Data akan diload dan ditampilkan di preview

Reset to Default:

⚠️ Hati-hati! Klik "Reset to Default" untuk kembalikan ke data awal. Semua perubahan akan hilang jika belum di-export!

🌐 Server Synchronization

Bagaimana Data Disinkronkan?

Flow: Browser (edit) → localStorage (save) → Export JSON → Upload ke server → Auto-load untuk all users

Langkah-langkah Sync:

Step 1: Edit Konten di Admin

Edit konten apapun di Admin Panel → data langsung tersimpan di localStorage

Step 2: Export ke JSON

Admin Panel → Data Management → "Sync to Server" → Confirm dialog → File portfolio-data.json akan terdownload

Step 3: Upload ke Server

Upload file ke server menggunakan FTP/SFTP:

Host: Your Server IP/Domain Port: 21 (FTP) atau 22 (SFTP) Username: HestiaCP username Password: HestiaCP password Remote Path: /home/bayu/Unduhan/portofolio-hud-ui/ Upload: portfolio-data.json → /home/bayu/Unduhan/portofolio-hud-ui/portfolio-data.json

Step 4: Verify

Refresh halaman → lihat di Console (F12):

✓ Log: "Data loaded from server (portfolio-data.json)" = Sukses load dari server! ✗ Log: "portfolio-data.json not found" = File belum terupload, fallback ke localStorage

Tools FTP/SFTP Recommendation:

  • Filezilla - Free, cross-platform, user-friendly
  • WinSCP - Windows only, powerful, SFTP support
  • SSH Terminal - Linux/Mac, command-line: scp portfolio-data.json user@server:/path/

🚀 Deployment ke Server

Prerequisites:

  • Server Ubuntu dengan HestiaCP
  • Domain/Subdomain sudah tersetting
  • FTP/SFTP access aktif

Deploy Steps:

1 Upload All Files via FTP
Upload ke: /home/bayu/Unduhan/portofolio-hud-ui/ Files: - index.html - admin.html - documentation.html - script.js - admin.js - style.css - portfolio-data.json (optional, for permanent sync) - assets/ (folder)
2 Set Permissions (via SSH/Terminal)
chmod 755 /home/bayu/Unduhan/portofolio-hud-ui/ chmod 644 /home/bayu/Unduhan/portofolio-hud-ui/*.html chmod 644 /home/bayu/Unduhan/portofolio-hud-ui/*.js chmod 644 /home/bayu/Unduhan/portofolio-hud-ui/*.json
3 Verify via Browser

Buka: https://yourdomain.com/portofolio-hud-ui/index.html

4 Test Admin Panel & Sync

Buka: https://yourdomain.com/portofolio-hud-ui/admin.html

HestiaCP Specific Config:

Jika menggunakan HestiaCP StaticWebServer:

Pastikan .config/static-web-server.toml sudah tersetting dengan benar untuk serve files statis.

❓ FAQ & Troubleshooting

Q: Data saya hilang setelah refresh halaman?

A: Jika belum upload ke server, data tersimpan di localStorage. Cek:

  • Buka DevTools (F12) → Application → Local Storage
  • Cari key: portfolioData
  • Pastikan browser tidak dalam mode incognito

Q: Bagaimana membuat data permanen di semua device?

A: Upload portfolio-data.json ke server. Sistem akan otomatis load dari server.

Q: Apakah perlu database atau server backend?

A: TIDAK! Sistem ini 100% statis. Data tersimpan di localStorage dan optional di server file JSON.

Q: Bisa customize design/styling?

A: Ya! Edit style.css untuk customize warna, font, dan layout. Semua components menggunakan CSS variables.

Q: Berapa ukuran file maksimal untuk upload gambar?

A: Tidak ada limit hardcoded. Untuk favicon, gunakan Base64 atau file kecil (<100KB).

Q: Portfolio data tidak load dari server?

A: Troubleshooting checklist:

1. Cek browser console (F12) untuk error message 2. Pastikan portfolio-data.json di lokasi yang benar 3. Check CORS settings jika berbeda domain 4. Verify permission file (chmod 644 portfolio-data.json) 5. Cek file tidak corrupt: buka di browser directly

Q: Cara membuat backup rutin?

A: Setup automated export:

Setiap minggu: Buka admin.html → Export → Download → Simpan di folder backup lokal → Upload ke cloud storage

📁 Project Structure

portofolio-hud-ui/ ├── index.html # Main portfolio page ├── admin.html # Admin panel ├── documentation.html # This documentation ├── script.js # Core logic │ ├── loadPortfolioData() │ ├── loadDataFromServer() │ ├── savePortfolioData() │ ├── populateHero/About/Skills/etc │ └── Particle system & animations ├── admin.js # Admin functionality │ ├── renderPreviews() │ ├── exportData() │ ├── importData() │ ├── syncDataToServer() │ └── Event listeners ├── style.css # Styling & animations │ ├── Neon theme │ ├── Particle effects │ ├── Responsive design │ └── Animation keyframes ├── portfolio-data.json # Server data (optional) ├── package.json # Project metadata ├── .config/ │ └── static-web-server.toml # HestiaCP config └── assets/ └── images/ └── projects/ # Project images (if any)

Key Functions:

Function Purpose Called In
loadPortfolioData() Load dari localStorage script.js init
loadDataFromServer() Fetch portfolio-data.json Page load
savePortfolioData() Save ke localStorage Admin edit events
syncDataToServer() Export untuk upload Admin "Sync" button
applySiteMeta() Apply title, favicon, logo Page load

📞 Support & Resources

Untuk pertanyaan atau issue, periksa:

  • Console browser (F12) untuk error messages
  • Dokumentasi ini untuk troubleshooting
  • File structure untuk understanding codebase

← Back to Portfolio Go to Admin →