Panorama Profile

Sebuah website profil interaktif dengan peta 3D menggunakan Three.js. Website ini menampilkan informasi profesional dalam bentuk lokasi-lokasi yang dapat dieksplorasi di dunia 3D.

Fitur

• Peta interaktif 3D dengan kontrol kamera
• Lokasi yang mewakili bagian-bagian berbeda dari profil (Skills, Projects, Education, Contact)
• Panel informasi detail untuk setiap lokasi
• Antarmuka pengguna yang intuitif dan responsive
• Efek visual yang menarik dengan Three.js

Pengembangan Lokal

Prasyarat

Anda membutuhkan:

• Web server lokal (seperti Live Server di VS Code, atau Python's SimpleHTTPServer)
• Browser modern dengan dukungan WebGL

Menjalankan Proyek

1. Clone atau download repositori ini
2. Buka folder proyek di editor kode favorit Anda
3. Jalankan web server lokal di folder proyek
   • Dengan VS Code: Install ekstensi "Live Server" dan klik "Go Live"
   • Dengan Python: Jalankan python -m http.server di terminal
4. Buka browser dan akses http://localhost:8080 (atau port yang ditentukan oleh server Anda)

Struktur Proyek

panorama-profile/
├── assets/          # Aset seperti model 3D, tekstur, dan gambar
│   ├── models/      # Model 3D (.glb atau .gltf)
│   └── images/      # Gambar untuk konten
├── css/             # File stylesheet
│   └── style.css    # Aturan CSS utama
├── js/              # File JavaScript
│   ├── main.js      # Logic utama Three.js dan interaksi
│   └── data.js      # Data untuk lokasi dan konten
├── index.html       # File HTML utama
└── README.md        # Dokumentasi (file ini)

Teknologi yang Digunakan

• HTML5 dan CSS3 - Struktur dasar dan styling
• JavaScript (ES6+) - Logika dan interaktivitas
• Three.js - Rendering 3D
• GSAP - Animasi
• OrbitControls - Kontrol kamera untuk navigasi 3D

Penambahan Konten

Untuk menambahkan atau mengubah lokasi di peta:

1. Edit file js/data.js dan tambahkan objek lokasi baru
2. Tambahkan model 3D di folder assets/models/ (format GLB/GLTF)
3. Tambahkan gambar terkait di folder assets/images/

Inspirasi

Website ini terinspirasi oleh rainforest.arkivert.no dengan pendekatan yang lebih sederhana dan personal.

Penyesuaian

Anda dapat menyesuaikan tampilan dengan mengubah:

• Warna dan gaya di css/style.css
• Posisi kamera dan pengaturan pencahayaan di js/main.js
• Konten dan data di js/data.js
• Layout dasar di index.html

---

Dibuat dengan ❤️ menggunakan Three.js