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

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

http://localhost/WebGIS_LandingPage/

Atau gunakan server lokal lain dari direktori project:

python -m http.server 8000

Kemudian buka http://localhost:8000/.

Kustomisasi

Nama dan NIM: cari komentar  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.
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.

3.4 KiB Raw Permalink Blame History