# 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.