feat: initialize WebGIS landing page with project index and documentation

2026-06-13 06:42:51 +07:00
commit 74a6be147a
3 changed files with 1080 additions and 0 deletions
@@ -0,0 +1,69 @@
+# WebGIS Landing Page
+
+Landing page statis yang menjadi pintu masuk ke empat project tugas mata kuliah **Sistem Informasi Geografis — Kelas B**, Program Studi Informatika, Fakultas Teknik, Universitas Tanjungpura.
+
+Dibuat oleh **Raditya Indra Putranto** (NIM **D1041231009**).
+
+## Fitur
+
+- Hero dengan heading besar, badge mata kuliah, dan dua tombol aksi.
+- Kartu "Index Project" bergaya panel gelap berisi daftar 4 project beserta status, dengan efek **3D tilt** yang mengikuti arah kursor saat di-hover.
+- Chip identitas mahasiswa (logo, nama, NIM) yang melayang di sudut panel.
+- Bagian "Daftar Project" berisi 4 kartu project dengan nomor, status badge, deskripsi, tag teknologi, dan tombol panah; klik kartu membuka project di tab baru.
+- Bagian "Tentang" berisi identitas mahasiswa dan blok NIM.
+- Animasi reveal saat scroll dengan fallback agar konten tetap tampil walau JavaScript nonaktif, serta dukungan `prefers-reduced-motion`.
+- Desain clean responsive dengan palet warna mengikuti logo Untan: kuning `#ffc907`, merah `#e3252e`, dan navy gelap di atas latar cream.
+
+## Project Yang Ditautkan
+
+| No | Project | Teknologi | URL |
+| --- | --- | --- | --- |
+| 01 | WebGIS Pemetaan Kemiskinan | Laravel, MySQL, Leaflet, Docker | http://vwkgokg048o8gwok4sgko488.203.24.51.230.sslip.io |
+| 02 | WebGIS Titik SPBU | Laravel, Leaflet, DaisyUI | http://zyzdz93mld60i80jeql3wwp9.203.24.51.230.sslip.io |
+| 03 | WebGIS Jalan & Jalan Rusak | PHP, Leaflet Draw, Turf.js, EXIF.js | http://ucwkocckgsw8o48csgggssw4.203.24.51.230.sslip.io |
+| 04 | Choropleth Kecamatan Pontianak | Leaflet, GeoJSON, Proj4js | http://ovzy869trq09d7ldwoa6yenq.203.24.51.230.sslip.io |
+
+## Teknologi
+
+- HTML, CSS, dan JavaScript murni dalam satu file `index.html` — tanpa framework dan tanpa proses build.
+- Google Fonts: Schibsted Grotesk (heading dan teks) dan IBM Plex Mono (label, NIM, tombol).
+- IntersectionObserver untuk animasi reveal dan CSS custom property untuk efek 3D tilt.
+
+## Struktur File
+
+```text
+.
+|-- index.html      # landing page (markup, style, script jadi satu)
+|-- logo-untan.png  # logo Untan transparan
+`-- README.md
+```
+
+## Cara Menjalankan
+
+Halaman ini statis, cukup disajikan lewat web server lokal.
+
+Jika menggunakan Laragon, letakkan folder project di direktori `www`, lalu buka:
+
+```text
+http://localhost/WebGIS_LandingPage/
+```
+
+Atau gunakan server lokal lain dari direktori project:
+
+```bash
+python -m http.server 8000
+```
+
+Kemudian buka `http://localhost:8000/`.
+
+## Kustomisasi
+
+- **Nama dan NIM**: cari komentar `<!-- GANTI nama di bawah ini jika belum sesuai -->` di `index.html` (ada di chip hero dan bagian Tentang).
+- **Link project**: tiap project ditautkan di dua tempat — baris pada panel "Index Project" di hero dan kartu pada bagian "Daftar Project". Untuk menandai project belum siap, tambahkan class `soon` pada elemen `.row`/`.card`, ganti `href` ke `#` dengan `onclick="return false;"`, dan ubah teks status menjadi `Menyusul`.
+- **Warna**: seluruh palet didefinisikan sebagai CSS variable di blok `:root` pada `index.html`.
+
+## Catatan
+
+- Logo `logo-untan.png` diambil dari [Wikipedia bahasa Indonesia](https://id.wikipedia.org/wiki/Berkas:Lambang_Universitas_Tanjungpura.png).
+- Halaman membutuhkan koneksi internet hanya untuk memuat Google Fonts; tanpa internet halaman tetap berfungsi dengan font fallback.
+- Efek 3D tilt otomatis nonaktif di perangkat sentuh dan saat pengguna mengaktifkan reduced motion.