74a6be147aaf48cda4a11d0c57124125b00e14c4
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
<!-- GANTI nama di bawah ini jika belum sesuai -->diindex.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
soonpada elemen.row/.card, gantihrefke#denganonclick="return false;", dan ubah teks status menjadiMenyusul. - Warna: seluruh palet didefinisikan sebagai CSS variable di blok
:rootpadaindex.html.
Catatan
- Logo
logo-untan.pngdiambil 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.
Description
Languages
HTML
100%