[{"data":1,"prerenderedAt":1556},["ShallowReactive",2],{"site-config":3,"featured-projects":36,"project-index":589},{"id":4,"bio":5,"cv":8,"email":9,"extension":10,"headline":11,"meta":14,"name":15,"roles":16,"seo":24,"social":30,"stem":34,"__hash__":35},"site\u002Fdata\u002Fsite.json",{"id":6,"en":7},"Seorang mahasiswa Jurusan Informatika di Institut Teknologi Kalimantan yang adaptif dan komunikatif, dengan fokus pada pengembangan teknologi inovatif yang memberikan dampak positif bagi masyarakat. Saya memiliki perpaduan antara keahlian teknis termasuk penguasaan Microsoft Office dan kemampuan analitis serta soft skill yang kuat dalam kerja sama tim dan penulisan yang efektif. Dengan pengalaman dalam peran kepengurusan dan manajemen proyek, saya berkomitmen untuk terus belajar, meningkatkan kompetensi saya, dan memberikan kontribusi nyata bagi industri melalui pemikiran kritis dan kolaborasi.","An adaptive and communicative Informatics student at the Institut Teknologi Kalimantan, focused on developing innovative technologies that create a positive impact on society. I possess a blend of technical proficiency including Microsoft Office and analytical skills and strong soft skills in teamwork and effective writing. With experience in organizational roles and project management, I am committed to continuous learning, enhancing my competencies, and making tangible contributions to the industry through critical thinking and collaboration.","","christianimanueladmojo@gmail.com","json",{"id":12,"en":13},"Portofolio ini menampilkan proyek yang telah saya buat selama ini.","This portfolio showcases the projects I have created over the years.",{},"Christian Imanuel Admojo",{"id":17,"en":22},[18,19,20,21],"Mahasiswa Informatika","Front-End Developer","Data Scientist","UI\u002FUX Designer",[23,19,20,21],"Informatics Student",{"title":25,"description":28,"ogImage":29},{"id":26,"en":27},"Portofolio Christian Imanuel Admojo","Christian Imanuel Admojo's Portfolio",{"id":12,"en":13},"\u002Fog-default.png",{"github":31,"linkedin":32,"instagram":33},"https:\u002F\u002Fgithub.com\u002FChrisimana","https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fchristian-imanuel-admojo-a78102324\u002F","https:\u002F\u002Fwww.instagram.com\u002Fchrisimana\u002F","data\u002Fsite","QceOmWK4RJZ1zgaal5snUuLjqSKWa8C2AG4m2CJlc7o",[37,173,278,385,491],{"id":38,"title":39,"body":40,"category":133,"cover":134,"description":8,"extension":137,"featured":138,"featuredOrder":139,"gallery":140,"links":153,"meta":156,"navigation":138,"path":157,"placeholder":158,"published":138,"publishedAt":159,"seo":160,"shortDescription":161,"status":162,"stem":163,"technologies":164,"__hash__":172},"projectsId\u002Fid\u002Fprojects\u002Fwinterra.md","WinterRa",{"type":41,"value":42,"toc":122},"minimark",[43,48,52,56,59,63,66,70,89,93,101,105,108,112,115,119],[44,45,47],"h2",{"id":46},"ringkasan","Ringkasan",[49,50,51],"p",{},"WinterRa adalah platform web bertema liburan akhir tahun yang menggantikan\nartikel travel statis dengan pengalaman 3D interaktif. Semua fitur berjalan\nsepenuhnya di browser tanpa backend, mulai dari kalkulator budget, checklist\npacking, hingga hitung mundur tahun baru dengan animasi kembang api 3D.",[44,53,55],{"id":54},"masalah","Masalah",[49,57,58],{},"Perencanaan liburan akhir tahun biasanya tersebar di banyak aplikasi terpisah\n(catatan budget, checklist barang, kalender hitung mundur), dan pengalaman\ndigital seputar pergantian tahun cenderung monoton, sekadar angka yang\nberjalan mundur tanpa nuansa perayaan.",[44,60,62],{"id":61},"solusi","Solusi",[49,64,65],{},"WinterRa menyatukan seluruh kebutuhan itu dalam satu halaman: kalkulator\nbudget yang merinci estimasi biaya transportasi, akomodasi, makan, aktivitas,\ndan oleh-oleh; checklist packing berkategori dengan progres yang tersimpan\notomatis di perangkat; serta hitung mundur tahun baru dengan latar animasi\nkembang api 3D dan efek salju yang jatuh sepanjang halaman.",[44,67,69],{"id":68},"fitur","Fitur",[71,72,73,77,80,83,86],"ul",{},[74,75,76],"li",{},"Kalkulator budget liburan per kategori pengeluaran",[74,78,79],{},"Checklist packing dengan pelacakan progres tersimpan lokal",[74,81,82],{},"Hitung mundur tahun baru real-time dengan animasi kembang api 3D",[74,84,85],{},"Efek salju berjalan di seluruh halaman",[74,87,88],{},"Kutipan inspiratif harian yang berganti otomatis",[44,90,92],{"id":91},"teknologi-yang-digunakan","Teknologi yang Digunakan",[49,94,95,96,100],{},"Vue 3 (Composition API) dan Vite dipilih sebagai fondasi karena ringan dan\ncepat untuk aplikasi murni sisi klien. Three.js menangani rendering animasi\nkembang api 3D, sementara GSAP mengatur animasi reveal dan scroll agar\ntransisi antar bagian terasa halus. Pinia menyimpan state terpusat (progres\nchecklist, hasil kalkulasi budget) yang dipersist ke ",[97,98,99],"code",{},"localStorage"," sehingga\ndata pengguna tidak hilang saat halaman dimuat ulang.",[44,102,104],{"id":103},"tantangan","Tantangan",[49,106,107],{},"Menjaga performa tetap mulus saat animasi 3D (kembang api) dan efek salju\nCanvas 2D berjalan bersamaan adalah tantangan utama, mengingat semuanya\ndieksekusi sepenuhnya di sisi klien tanpa server yang membantu pra-pemrosesan.",[44,109,111],{"id":110},"hal-hal-yang-saya-pelajari","Hal-hal yang Saya Pelajari",[49,113,114],{},"Proyek ini memperdalam pemahaman tentang mengelola animasi 3D real-time\n(Three.js) berdampingan dengan animasi berbasis timeline (GSAP) dalam satu\naplikasi Vue, serta pentingnya memanfaatkan penyimpanan lokal untuk aplikasi\ntanpa backend agar pengalaman pengguna tetap terasa persisten.",[44,116,118],{"id":117},"hasil","Hasil",[49,120,121],{},"WinterRa berjalan penuh di sisi klien dan dapat diakses langsung dari\nbrowser tanpa instalasi apa pun, cocok untuk kebutuhan perencanaan liburan\nyang ringan dan cepat diakses dari perangkat mana saja.",{"title":8,"searchDepth":123,"depth":123,"links":124},2,[125,126,127,128,129,130,131,132],{"id":46,"depth":123,"text":47},{"id":54,"depth":123,"text":55},{"id":61,"depth":123,"text":62},{"id":68,"depth":123,"text":69},{"id":91,"depth":123,"text":92},{"id":103,"depth":123,"text":104},{"id":110,"depth":123,"text":111},{"id":117,"depth":123,"text":118},"WEB",{"src":135,"alt":136},"\u002Fimages\u002Fprojects\u002Fwinterra\u002Fcover.webp","Halaman utama WinterRa dengan judul bertema salju dan efek partikel 3D","md",true,"1",[141,144,147,150],{"src":142,"alt":143},"\u002Fimages\u002Fprojects\u002Fwinterra\u002Fabout.webp","Halaman Tentang WinterRa dengan penjelasan konsep dan lini masa proyek",{"src":145,"alt":146},"\u002Fimages\u002Fprojects\u002Fwinterra\u002Fbudget.webp","Kalkulator budget liburan dengan rincian biaya per kategori",{"src":148,"alt":149},"\u002Fimages\u002Fprojects\u002Fwinterra\u002Fpacking.webp","Checklist packing berkategori dengan indikator progres",{"src":151,"alt":152},"\u002Fimages\u002Fprojects\u002Fwinterra\u002Fcountdown.webp","Hitung mundur tahun baru dengan latar bintang dan kembang api 3D",{"github":154,"demo":155},"https:\u002F\u002Fgithub.com\u002FChrisimana\u002Fwinterra","https:\u002F\u002Fwinterra.vercel.app\u002F",{},"\u002Fid\u002Fprojects\u002Fwinterra",false,"2026-01-10",{"title":39,"description":8},"Platform liburan akhir tahun interaktif dengan pengalaman 3D, kalkulator budget, dan checklist packing.","COMPLETED","id\u002Fprojects\u002Fwinterra",[165,166,167,168,169,170,171],"vue","vue-router","vite","tailwind","three-js","gsap","pinia","fyV5RYdV8faCC2wV8qeNiJgDS_Nj2tOygojOXVxuYgM",{"id":174,"title":175,"body":176,"category":133,"cover":245,"description":8,"extension":137,"featured":138,"featuredOrder":248,"gallery":249,"links":265,"meta":268,"navigation":138,"path":269,"placeholder":158,"published":138,"publishedAt":270,"seo":271,"shortDescription":272,"status":162,"stem":273,"technologies":274,"__hash__":277},"projectsId\u002Fid\u002Fprojects\u002Fsaferoute.md","SafeRoute",{"type":41,"value":177,"toc":235},[178,180,183,185,188,190,193,195,215,217,220,222,225,227,230,232],[44,179,47],{"id":46},[49,181,182],{},"SafeRoute adalah platform web yang membantu masyarakat Indonesia\nmempersiapkan diri dan merespons bencana alam lewat informasi real-time dan\npanduan yang mudah dipahami. Semuanya berjalan langsung di browser tanpa\ninstalasi aplikasi tambahan.",[44,184,55],{"id":54},[49,186,187],{},"Informasi risiko bencana sering kali sulit diakses dalam bentuk yang mudah\ndipahami, panduan evakuasi berbasis lokasi masih terbatas, dan edukasi\nkeselamatan tersebar di banyak sumber berbeda, padahal kondisi cuaca yang\nberubah cepat menuntut analisis risiko yang selalu diperbarui.",[44,189,62],{"id":61},[49,191,192],{},"SafeRoute memetakan zona risiko dalam bentuk peta interaktif berlapis warna\nsesuai tingkat bahaya, memantau cuaca real-time untuk mengklasifikasikan\nrisiko secara otomatis (rendah\u002Fsedang\u002Ftinggi), dan menyediakan panduan\nevakuasi lengkap untuk berbagai jenis bencana beserta titik lokasi\npengungsian di seluruh provinsi di Indonesia.",[44,194,69],{"id":68},[71,196,197,200,203,206,209,212],{},[74,198,199],{},"Peta risiko interaktif dengan poligon zona bahaya dan jalur evakuasi",[74,201,202],{},"Pemantauan cuaca real-time dan prakiraan 7 hari",[74,204,205],{},"Deteksi risiko otomatis berbasis ambang batas curah hujan",[74,207,208],{},"Notifikasi darurat via push browser saat risiko meningkat",[74,210,211],{},"Grafik analitik risiko curah hujan 24 jam dan riwayat distribusi risiko",[74,213,214],{},"Panduan keselamatan untuk berbagai jenis bencana dan titik pengungsian",[44,216,92],{"id":91},[49,218,219],{},"Vue 3 dan Vite dipilih untuk kecepatan pengembangan aplikasi berbasis peta\nyang berat secara visual. Leaflet menangani rendering peta interaktif dan\nperhitungan jalur, Chart.js memvisualisasikan data curah hujan dan riwayat\nrisiko, sementara Pinia mengelola state lintas komponen (lokasi pengguna,\nstatus risiko, riwayat notifikasi). Data cuaca diambil dari Open-Meteo dan\npeta dasar dari OpenStreetMap, keduanya API publik tanpa kunci akses,\nselaras dengan pendekatan tanpa backend.",[44,221,104],{"id":103},[49,223,224],{},"Menjaga akurasi klasifikasi risiko tetap konsisten saat data cuaca berubah\ncepat, sekaligus menghindari notifikasi duplikat yang mengganggu pengguna\nsaat status risiko naik-turun dalam rentang waktu singkat.",[44,226,111],{"id":110},[49,228,229],{},"Proyek ini memberi pengalaman langsung mengintegrasikan data geospasial\n(GeoJSON, routing) dengan data cuaca real-time dalam satu alur kerja yang\nsepenuhnya berjalan di klien, termasuk merancang ambang batas risiko yang\nmasuk akal dari data curah hujan mentah.",[44,231,118],{"id":117},[49,233,234],{},"SafeRoute menyediakan estimasi jalur evakuasi dan status risiko lokasi\nlangsung dari browser, mencakup panduan keselamatan untuk berbagai jenis\nbencana dan titik pengungsian di seluruh provinsi di Indonesia.",{"title":8,"searchDepth":123,"depth":123,"links":236},[237,238,239,240,241,242,243,244],{"id":46,"depth":123,"text":47},{"id":54,"depth":123,"text":55},{"id":61,"depth":123,"text":62},{"id":68,"depth":123,"text":69},{"id":91,"depth":123,"text":92},{"id":103,"depth":123,"text":104},{"id":110,"depth":123,"text":111},{"id":117,"depth":123,"text":118},{"src":246,"alt":247},"\u002Fimages\u002Fprojects\u002Fsaferoute\u002Fcover.webp","Halaman utama SafeRoute menampilkan panel risiko lokal dan status cuaca real-time","2",[250,253,256,259,262],{"src":251,"alt":252},"\u002Fimages\u002Fprojects\u002Fsaferoute\u002Fpeta.webp","Peta risiko interaktif berbasis Leaflet dengan penanda lokasi bencana",{"src":254,"alt":255},"\u002Fimages\u002Fprojects\u002Fsaferoute\u002Fcuaca.webp","Panel cuaca real-time dengan status risiko dan ringkasan tujuh hari",{"src":257,"alt":258},"\u002Fimages\u002Fprojects\u002Fsaferoute\u002Fanalitik.webp","Analitik risiko dengan grafik curah hujan 24 jam dan distribusi risiko",{"src":260,"alt":261},"\u002Fimages\u002Fprojects\u002Fsaferoute\u002Fkeselamatan.webp","Panduan keselamatan berisi prosedur evakuasi untuk berbagai bencana",{"src":263,"alt":264},"\u002Fimages\u002Fprojects\u002Fsaferoute\u002Ftentang.webp","Halaman Tentang SafeRoute dengan daftar fitur utama",{"github":266,"demo":267},"https:\u002F\u002Fgithub.com\u002FChrisimana\u002Fsaferoute","https:\u002F\u002Fsaferoute-drab.vercel.app\u002F#\u002F",{},"\u002Fid\u002Fprojects\u002Fsaferoute","2025-11-05",{"title":175,"description":8},"Platform kesiapsiagaan bencana dengan peta risiko interaktif, cuaca real-time, dan jalur evakuasi.","id\u002Fprojects\u002Fsaferoute",[165,166,167,171,275,276],"leaflet","chart-js","Djlu_s8_jpm8VS9BcRgUS2DzIfkzY_AXnVPUWy_24Ok",{"id":279,"title":280,"body":281,"category":133,"cover":350,"description":8,"extension":137,"featured":138,"featuredOrder":353,"gallery":354,"links":370,"meta":373,"navigation":138,"path":374,"placeholder":158,"published":138,"publishedAt":375,"seo":376,"shortDescription":377,"status":162,"stem":378,"technologies":379,"__hash__":384},"projectsId\u002Fid\u002Fprojects\u002Fdisastersense-ai.md","DisasterSense AI",{"type":41,"value":282,"toc":340},[283,285,288,290,293,295,298,300,320,322,325,327,330,332,335,337],[44,284,47],{"id":46},[49,286,287],{},"DisasterSense AI adalah sistem peringatan dini berbasis web yang membantu\nmasyarakat Indonesia mempersiapkan diri menghadapi bencana alam dengan\nmenganalisis data cuaca real-time dan menghitung tingkat risiko bencana\nsecara otomatis berdasarkan lokasi pengguna.",[44,289,55],{"id":54},[49,291,292],{},"Sistem peringatan bencana yang ada seringkali terlalu teknis untuk dipahami\nmasyarakat umum, edukasi kebencanaan tersebar di berbagai sumber yang tidak\nterpusat, dan banyak solusi mengharuskan instalasi aplikasi tambahan padahal\nakses cepat lewat browser jauh lebih praktis saat kondisi darurat.",[44,294,62],{"id":61},[49,296,297],{},"Aplikasi mendeteksi lokasi pengguna secara otomatis (GPS atau input manual\ndengan reverse geocoding), memantau data cuaca real-time (curah hujan,\nkecepatan angin, kelembapan, suhu), lalu menghitung tingkat risiko otomatis\nmenjadi tiga level: Aman, Waspada, Bahaya, ditampilkan pada peta interaktif\ndengan penanda berwarna sesuai lokasi.",[44,299,69],{"id":68},[71,301,302,305,308,311,314,317],{},[74,303,304],{},"Deteksi lokasi otomatis via GPS atau input manual dengan reverse geocoding",[74,306,307],{},"Pemantauan cuaca real-time (curah hujan, angin, kelembapan, suhu)",[74,309,310],{},"Kalkulasi risiko otomatis dengan tiga level: Aman, Waspada, Bahaya",[74,312,313],{},"Peta risiko interaktif dengan penanda lokasi berwarna",[74,315,316],{},"Edukasi kebencanaan mencakup berbagai jenis bencana alam di Indonesia",[74,318,319],{},"Sistem notifikasi peringatan dengan riwayat pelacakan",[44,321,92],{"id":91},[49,323,324],{},"React dan TypeScript dipilih untuk membangun antarmuka yang reaktif dan\ntype-safe, dengan Vite sebagai build tool untuk iterasi cepat. Zustand\nmenangani state management yang ringan (lokasi, data cuaca, riwayat\nperingatan) tanpa boilerplate berlebih. Leaflet (lewat React Leaflet)\nmerender peta risiko interaktif. Data cuaca diambil dari Open-Meteo dan\ngeocoding dari Nominatim\u002FOpenStreetMap, keduanya API publik tanpa kunci\nakses, sejalan dengan pendekatan tanpa backend.",[44,326,104],{"id":103},[49,328,329],{},"Merancang ambang batas kalkulasi risiko yang masuk akal dari data cuaca\nmentah, serta menangani kasus saat izin lokasi ditolak pengguna dengan\nalur input manual yang tetap mulus.",[44,331,111],{"id":110},[49,333,334],{},"Proyek ini memperkuat pemahaman tentang state management minimal (Zustand)\ndibandingkan solusi yang lebih berat, serta cara menyusun logika klasifikasi\nrisiko berbasis ambang batas yang transparan dan mudah dijelaskan ke\npengguna awam.",[44,336,118],{"id":117},[49,338,339],{},"DisasterSense AI memberikan estimasi risiko bencana berbasis lokasi langsung\ndari browser tanpa instalasi, mencakup edukasi untuk berbagai jenis bencana\nalam di Indonesia.",{"title":8,"searchDepth":123,"depth":123,"links":341},[342,343,344,345,346,347,348,349],{"id":46,"depth":123,"text":47},{"id":54,"depth":123,"text":55},{"id":61,"depth":123,"text":62},{"id":68,"depth":123,"text":69},{"id":91,"depth":123,"text":92},{"id":103,"depth":123,"text":104},{"id":110,"depth":123,"text":111},{"id":117,"depth":123,"text":118},{"src":351,"alt":352},"\u002Fimages\u002Fprojects\u002Fdisastersense-ai\u002Fcover.webp","Halaman utama DisasterSense AI dengan tombol cek risiko dan ringkasan fitur","3",[355,358,361,364,367],{"src":356,"alt":357},"\u002Fimages\u002Fprojects\u002Fdisastersense-ai\u002Fdashboard.webp","Dashboard risiko dengan status, data cuaca terkini, dan rekomendasi tindakan",{"src":359,"alt":360},"\u002Fimages\u002Fprojects\u002Fdisastersense-ai\u002Fpetarisiko.webp","Peta risiko interaktif dengan penanda lokasi berwarna sesuai tingkat bahaya",{"src":362,"alt":363},"\u002Fimages\u002Fprojects\u002Fdisastersense-ai\u002Fedukasi.webp","Halaman edukasi bencana dengan panduan untuk berbagai jenis bencana alam",{"src":365,"alt":366},"\u002Fimages\u002Fprojects\u002Fdisastersense-ai\u002Fnotifikasi.webp","Halaman notifikasi dengan riwayat peringatan dan pengaturan notifikasi browser",{"src":368,"alt":369},"\u002Fimages\u002Fprojects\u002Fdisastersense-ai\u002Ftentang.webp","Halaman Tentang DisasterSense AI dengan tujuan proyek dan teknologi yang dipakai",{"github":371,"demo":372},"https:\u002F\u002Fgithub.com\u002FChrisimana\u002Fdisastersense-ai","https:\u002F\u002Fdisastersense-ai.vercel.app\u002F",{},"\u002Fid\u002Fprojects\u002Fdisastersense-ai","2025-08-20",{"title":280,"description":8},"Sistem peringatan dini bencana yang menghitung tingkat risiko otomatis dari data cuaca real-time berbasis lokasi.","id\u002Fprojects\u002Fdisastersense-ai",[380,381,382,167,275,383],"react","react-router","typescript","zustand","15oE-pDoRUi6860ceFItS3oaJXOuarPN2wmeK6QPGxQ",{"id":386,"title":387,"body":388,"category":133,"cover":460,"description":8,"extension":137,"featured":138,"featuredOrder":463,"gallery":464,"links":480,"meta":483,"navigation":138,"path":484,"placeholder":158,"published":138,"publishedAt":485,"seo":486,"shortDescription":487,"status":162,"stem":488,"technologies":489,"__hash__":490},"projectsId\u002Fid\u002Fprojects\u002Fecotopia-sphere.md","Ecotopia Sphere",{"type":41,"value":389,"toc":450},[390,392,395,397,400,402,405,407,424,426,432,434,437,439,445,447],[44,391,47],{"id":46},[49,393,394],{},"Ecotopia Sphere adalah platform web yang mempromosikan kesadaran lingkungan\ndan gaya hidup berkelanjutan dalam konteks kota cerdas, menghubungkan\nedukasi, aksi komunitas, dan inovasi teknologi hijau dalam satu ekosistem\ndigital.",[44,396,55],{"id":54},[49,398,399],{},"Edukasi tentang gaya hidup ramah lingkungan sering tersebar di berbagai\nsumber yang terpisah, dan masyarakat kekurangan platform yang menyatukan\npembelajaran dengan ruang untuk benar-benar berpartisipasi dalam aksi\nlingkungan secara nyata.",[44,401,62],{"id":61},[49,403,404],{},"Ecotopia Sphere menyatukan artikel edukasi terstruktur, showcase inovasi\nteknologi hijau untuk lingkungan perkotaan, dan ruang komunitas tempat\npengguna dapat membagikan aksi lingkungan mereka sendiri sebagai inspirasi\nbagi orang lain, dilengkapi statistik dampak kolektif yang dianimasikan.",[44,406,69],{"id":68},[71,408,409,412,415,418,421],{},[74,410,411],{},"12 artikel edukasi terstruktur seputar energi, air, sampah, dan transportasi",[74,413,414],{},"Showcase 10 inovasi teknologi hijau untuk lingkungan perkotaan",[74,416,417],{},"Ruang aksi komunitas untuk berbagi dan menginspirasi aksi lingkungan",[74,419,420],{},"Statistik dampak kolektif yang dianimasikan",[74,422,423],{},"Halaman tentang platform: visi, misi, filosofi, dan makna logo",[44,425,92],{"id":91},[49,427,428,429,431],{},"Vue 3 (Composition API) dan Vite dipilih untuk membangun single-page\napplication yang ringan dengan navigasi history mode via Vue Router.\nTailwind CSS mempercepat penyusunan tampilan yang konsisten tanpa CSS custom\nberlebih. Karena seluruh konten bersifat statis dan interaksi komunitas\ndisimpan di ",[97,430,99],{},", aplikasi ini tidak memerlukan backend sama\nsekali.",[44,433,104],{"id":103},[49,435,436],{},"Menyusun struktur konten edukasi yang cukup banyak (12 artikel, 10 inovasi)\nagar tetap mudah dinavigasi tanpa membuat halaman terasa padat atau\nmembingungkan.",[44,438,111],{"id":110},[49,440,441,442,444],{},"Proyek ini mempertajam kemampuan menyusun arsitektur informasi untuk konten\nedukasi dalam jumlah besar, serta memanfaatkan ",[97,443,99],{}," sebagai\npengganti backend sederhana untuk fitur komunitas berbasis kontribusi\npengguna.",[44,446,118],{"id":117},[49,448,449],{},"Ecotopia Sphere menyediakan satu platform terpusat untuk belajar tentang\ngaya hidup berkelanjutan sekaligus ruang bagi pengguna untuk berbagi aksi\nnyata mereka, seluruhnya dapat diakses langsung dari browser.",{"title":8,"searchDepth":123,"depth":123,"links":451},[452,453,454,455,456,457,458,459],{"id":46,"depth":123,"text":47},{"id":54,"depth":123,"text":55},{"id":61,"depth":123,"text":62},{"id":68,"depth":123,"text":69},{"id":91,"depth":123,"text":92},{"id":103,"depth":123,"text":104},{"id":110,"depth":123,"text":111},{"id":117,"depth":123,"text":118},{"src":461,"alt":462},"\u002Fimages\u002Fprojects\u002Fecotopia-sphere\u002Fcover.webp","Halaman utama Ecotopia Sphere dengan ilustrasi kota hijau berkelanjutan","4",[465,468,471,474,477],{"src":466,"alt":467},"\u002Fimages\u002Fprojects\u002Fecotopia-sphere\u002Ftentang.webp","Halaman Tentang EcoTopia Sphere dengan visi dan misi platform",{"src":469,"alt":470},"\u002Fimages\u002Fprojects\u002Fecotopia-sphere\u002Ftips.webp","Halaman Tips Hidup Hijau dengan filter kategori dan kartu tip",{"src":472,"alt":473},"\u002Fimages\u002Fprojects\u002Fecotopia-sphere\u002Fartikel.webp","Halaman artikel edukasi tentang hemat energi listrik",{"src":475,"alt":476},"\u002Fimages\u002Fprojects\u002Fecotopia-sphere\u002Finovasicerdas.webp","Halaman Inovasi Cerdas berisi showcase teknologi hijau perkotaan",{"src":478,"alt":479},"\u002Fimages\u002Fprojects\u002Fecotopia-sphere\u002Fsmartaction.webp","Halaman Smart Action Hub dengan formulir berbagi aksi lingkungan",{"github":481,"demo":482},"https:\u002F\u002Fgithub.com\u002FChrisimana\u002Fecotopia-sphere","https:\u002F\u002Fecotopia-sphere.vercel.app\u002F",{},"\u002Fid\u002Fprojects\u002Fecotopia-sphere","2025-05-12",{"title":387,"description":8},"Platform edukasi gaya hidup ramah lingkungan dengan showcase teknologi hijau dan ruang aksi komunitas.","id\u002Fprojects\u002Fecotopia-sphere",[165,166,167,168],"PBtpzwYCbfQ85uWPCUUBuVYzsdFe89b1-DDsiaDzhTk",{"id":492,"title":493,"body":494,"category":133,"cover":572,"description":8,"extension":137,"featured":138,"featuredOrder":575,"gallery":576,"links":577,"meta":580,"navigation":138,"path":581,"placeholder":158,"published":138,"publishedAt":582,"seo":583,"shortDescription":584,"status":585,"stem":586,"technologies":587,"__hash__":588},"projectsId\u002Fid\u002Fprojects\u002Fnearby-balikpapan.md","NearBy Balikpapan",{"type":41,"value":495,"toc":561},[496,498,501,505,508,510,513,515,518,520,537,539,542,544,547,549,552,554],[44,497,47],{"id":46},[49,499,500],{},"NearBy Balikpapan adalah platform web yang membantu warga menemukan dan\nmengenal Usaha Mikro, Kecil, dan Menengah (UMKM) di Balikpapan, Kalimantan\nTimur. Platform ini menyajikan informasi usaha lokal berbasis lokasi untuk\nmendukung transformasi digital pelaku usaha kecil.",[44,502,504],{"id":503},"peran-saya","Peran Saya",[49,506,507],{},"Proyek ini dikerjakan secara berkelompok sebagai inisiatif akademik mahasiswa\nInstitut Teknologi Kalimantan. Saya berperan sebagai Front-End Developer\ndan UI\u002FUX Designer: menyusun desain antarmuka dan alur pengguna,\nmenerjemahkannya menjadi komponen Vue yang responsif, serta mengerjakan\nhalaman katalog, pencarian, filter, dan profil usaha di sisi klien.",[44,509,55],{"id":54},[49,511,512],{},"Banyak UMKM di Balikpapan belum punya kehadiran digital yang mudah\nditemukan, sementara warga kesulitan mencari usaha lokal terdekat,\nkarena informasinya tersebar dan tidak terpusat.",[44,514,62],{"id":61},[49,516,517],{},"NearBy Balikpapan menyatukan katalog UMKM dalam satu direktori yang bisa\ndicari dan difilter, dengan penemuan berbasis lokasi untuk menampilkan usaha\nterdekat, profil usaha yang rinci, dan sistem rekomendasi. Fokus desain saya\nadalah membuat pencarian terasa cepat dan tampilan tetap jelas di layar\nkecil.",[44,519,69],{"id":68},[71,521,522,525,528,531,534],{},[74,523,524],{},"Katalog UMKM dengan pencarian dan filter kategori",[74,526,527],{},"Penemuan usaha terdekat berbasis lokasi",[74,529,530],{},"Halaman profil usaha yang rinci",[74,532,533],{},"Sistem rekomendasi usaha",[74,535,536],{},"Antarmuka responsif untuk perangkat mobile",[44,538,92],{"id":91},[49,540,541],{},"Di sisi front-end saya memakai Vue 3 (Composition API) dan TypeScript di atas\nVite, dengan Tailwind CSS untuk styling dan Pinia untuk state management.\nDesain antarmuka dan prototipe alur pengguna saya kerjakan lebih dulu\nsebelum implementasi.",[44,543,104],{"id":103},[49,545,546],{},"Menyelaraskan desain dengan data nyata dari backend yang masih berkembang,\nserta menjaga pencarian dan filter tetap responsif saat jumlah usaha\nterdaftar bertambah.",[44,548,111],{"id":110},[49,550,551],{},"Proyek ini melatih kerja lintas peran dalam satu tim, menyerahkan desain\nyang bisa langsung diimplementasikan, menyepakati kontrak API dengan tim\nbackend, dan menjaga konsistensi komponen UI selama fitur terus bertambah.",[44,553,118],{"id":117},[49,555,556,557,560],{},"NearBy Balikpapan sudah berjalan di ",[97,558,559],{},"nearbybalikpapan.com"," dengan UMKM,\nkategori, dan cakupan kecamatan yang terus bertambah, dan masih dalam\npengembangan aktif.",{"title":8,"searchDepth":123,"depth":123,"links":562},[563,564,565,566,567,568,569,570,571],{"id":46,"depth":123,"text":47},{"id":503,"depth":123,"text":504},{"id":54,"depth":123,"text":55},{"id":61,"depth":123,"text":62},{"id":68,"depth":123,"text":69},{"id":91,"depth":123,"text":92},{"id":103,"depth":123,"text":104},{"id":110,"depth":123,"text":111},{"id":117,"depth":123,"text":118},{"src":573,"alt":574},"\u002Fimages\u002Fprojects\u002Fnearby-balikpapan\u002Fcover.webp","Halaman utama NearBy Balikpapan dengan pencarian UMKM dan kartu usaha unggulan","5",null,{"github":578,"demo":579},"https:\u002F\u002Fgithub.com\u002FYoga141\u002FNearBy-Bringing-Busines","https:\u002F\u002Fnearbybalikpapan.com\u002F",{},"\u002Fid\u002Fprojects\u002Fnearby-balikpapan","2026-07-15",{"title":493,"description":8},"Direktori UMKM berbasis lokasi untuk menemukan usaha kecil menengah terdekat di Balikpapan.","IN_PROGRESS","id\u002Fprojects\u002Fnearby-balikpapan",[165,166,382,167,168,171,169],"Z0DBfMg9A6ZzZqG_ULiy2jqn2nkRj-yCVTyL-mF4ipg",{"idRows":590,"enRows":1008},[591,659,729,806,873,941],{"id":279,"title":280,"body":592,"category":133,"cover":648,"description":8,"extension":137,"featured":138,"featuredOrder":353,"gallery":649,"links":655,"meta":656,"navigation":138,"path":374,"placeholder":158,"published":138,"publishedAt":375,"seo":657,"shortDescription":377,"status":162,"stem":378,"technologies":658,"__hash__":384},{"type":41,"value":593,"toc":638},[594,596,598,600,602,604,606,608,622,624,626,628,630,632,634,636],[44,595,47],{"id":46},[49,597,287],{},[44,599,55],{"id":54},[49,601,292],{},[44,603,62],{"id":61},[49,605,297],{},[44,607,69],{"id":68},[71,609,610,612,614,616,618,620],{},[74,611,304],{},[74,613,307],{},[74,615,310],{},[74,617,313],{},[74,619,316],{},[74,621,319],{},[44,623,92],{"id":91},[49,625,324],{},[44,627,104],{"id":103},[49,629,329],{},[44,631,111],{"id":110},[49,633,334],{},[44,635,118],{"id":117},[49,637,339],{},{"title":8,"searchDepth":123,"depth":123,"links":639},[640,641,642,643,644,645,646,647],{"id":46,"depth":123,"text":47},{"id":54,"depth":123,"text":55},{"id":61,"depth":123,"text":62},{"id":68,"depth":123,"text":69},{"id":91,"depth":123,"text":92},{"id":103,"depth":123,"text":104},{"id":110,"depth":123,"text":111},{"id":117,"depth":123,"text":118},{"src":351,"alt":352},[650,651,652,653,654],{"src":356,"alt":357},{"src":359,"alt":360},{"src":362,"alt":363},{"src":365,"alt":366},{"src":368,"alt":369},{"github":371,"demo":372},{},{"title":280,"description":8},[380,381,382,167,275,383],{"id":386,"title":387,"body":660,"category":133,"cover":718,"description":8,"extension":137,"featured":138,"featuredOrder":463,"gallery":719,"links":725,"meta":726,"navigation":138,"path":484,"placeholder":158,"published":138,"publishedAt":485,"seo":727,"shortDescription":487,"status":162,"stem":488,"technologies":728,"__hash__":490},{"type":41,"value":661,"toc":708},[662,664,666,668,670,672,674,676,688,690,694,696,698,700,704,706],[44,663,47],{"id":46},[49,665,394],{},[44,667,55],{"id":54},[49,669,399],{},[44,671,62],{"id":61},[49,673,404],{},[44,675,69],{"id":68},[71,677,678,680,682,684,686],{},[74,679,411],{},[74,681,414],{},[74,683,417],{},[74,685,420],{},[74,687,423],{},[44,689,92],{"id":91},[49,691,428,692,431],{},[97,693,99],{},[44,695,104],{"id":103},[49,697,436],{},[44,699,111],{"id":110},[49,701,441,702,444],{},[97,703,99],{},[44,705,118],{"id":117},[49,707,449],{},{"title":8,"searchDepth":123,"depth":123,"links":709},[710,711,712,713,714,715,716,717],{"id":46,"depth":123,"text":47},{"id":54,"depth":123,"text":55},{"id":61,"depth":123,"text":62},{"id":68,"depth":123,"text":69},{"id":91,"depth":123,"text":92},{"id":103,"depth":123,"text":104},{"id":110,"depth":123,"text":111},{"id":117,"depth":123,"text":118},{"src":461,"alt":462},[720,721,722,723,724],{"src":466,"alt":467},{"src":469,"alt":470},{"src":472,"alt":473},{"src":475,"alt":476},{"src":478,"alt":479},{"github":481,"demo":482},{},{"title":387,"description":8},[165,166,167,168],{"id":730,"title":731,"body":732,"category":792,"cover":793,"description":8,"extension":137,"featured":158,"featuredOrder":576,"gallery":576,"links":795,"meta":797,"navigation":138,"path":798,"placeholder":158,"published":138,"publishedAt":799,"seo":800,"shortDescription":801,"status":162,"stem":802,"technologies":803,"__hash__":805},"projectsId\u002Fid\u002Fprojects\u002Fecotopia-sphere-ui-ux.md","EcoTopia Sphere (Desain UI\u002FUX)",{"type":41,"value":733,"toc":782},[734,736,739,741,744,748,751,755,758,762,765,769,772,774,777,779],[44,735,47],{"id":46},[49,737,738],{},"Ini adalah sisi desain dari EcoTopia Sphere, platform web edukasi gaya hidup\nramah lingkungan. Seluruh antarmuka, alur pengguna, dan sistem visualnya saya\nrancang lebih dulu di Figma sebelum diimplementasikan menjadi kode. Halaman\nimplementasinya ada sebagai project tersendiri, EcoTopia Sphere.",[44,740,504],{"id":503},[49,742,743],{},"Saya berperan sebagai UI\u002FUX Designer sekaligus yang membangunnya. Pekerjaan\ndesain mencakup penyusunan arsitektur informasi untuk konten edukasi yang\ncukup banyak, perancangan wireframe tiap halaman, pembuatan sistem komponen,\ndan prototipe interaktif di Figma sebagai acuan implementasi.",[44,745,747],{"id":746},"tantangan-desain","Tantangan Desain",[49,749,750],{},"Konten edukasinya banyak, artikel, showcase inovasi, dan ruang aksi komunitas,\nsehingga tantangan utamanya adalah menata semuanya agar tetap mudah\ndijelajahi dan tidak terasa padat. Selain itu, nuansa \"ramah lingkungan\"\nharus terasa tanpa jatuh ke klise hijau yang berlebihan.",[44,752,754],{"id":753},"proses-desain","Proses Desain",[49,756,757],{},"Saya mulai dari pemetaan konten dan alur navigasi, lalu menurunkannya menjadi\nwireframe low-fidelity untuk menguji struktur tiap halaman. Setelah kerangka\nterasa mantap, baru masuk ke high-fidelity: tipografi, skala spasi, warna,\nilustrasi kota hijau, dan state komponen. Layout dirancang mobile-first lalu\ndinaikkan ke breakpoint yang lebih lebar.",[44,759,761],{"id":760},"sistem-desain","Sistem Desain",[49,763,764],{},"Dibangun kumpulan token dan komponen yang dapat dipakai ulang, tombol, kartu,\nkartu artikel, tag kategori, formulir, dan pola statistik, sehingga tampilan\ntetap konsisten saat jumlah halaman bertambah dan implementasinya lebih\nmudah diprediksi.",[44,766,768],{"id":767},"prototipe-dan-serah-terima","Prototipe dan Serah Terima",[49,770,771],{},"Prototipe Figma dengan tautan antar-frame dipakai sebagai satu-satunya acuan\nsaat implementasi. Karena saya juga yang membuat kodenya, keputusan desain\nbisa langsung diuji di browser dan disesuaikan bila ada yang tidak pas.",[44,773,111],{"id":110},[49,775,776],{},"Proyek ini mempertajam kemampuan menyusun arsitektur informasi untuk konten\ndalam jumlah besar, menjaga sistem komponen tetap ringkas, dan menutup jarak\nantara file desain dan kode nyata.",[44,778,118],{"id":117},[49,780,781],{},"Rancangan ini menjadi dasar EcoTopia Sphere yang sudah berjalan, dengan\ntampilan yang konsisten di berbagai ukuran layar. File Figma-nya bisa dilihat\nlewat tautan di atas.",{"title":8,"searchDepth":123,"depth":123,"links":783},[784,785,786,787,788,789,790,791],{"id":46,"depth":123,"text":47},{"id":503,"depth":123,"text":504},{"id":746,"depth":123,"text":747},{"id":753,"depth":123,"text":754},{"id":760,"depth":123,"text":761},{"id":767,"depth":123,"text":768},{"id":110,"depth":123,"text":111},{"id":117,"depth":123,"text":118},"DESIGN",{"src":461,"alt":794},"Halaman utama EcoTopia Sphere, hasil akhir dari rancangan antarmuka",{"demo":796},"https:\u002F\u002Fwww.figma.com\u002Fdesign\u002FlhdJK3EnwUYlHKJQvdhUNK\u002FWebsite-%7C-EcoTopia-Sphere?node-id=3-11",{},"\u002Fid\u002Fprojects\u002Fecotopia-sphere-ui-ux","2025-04-18",{"title":731,"description":8},"Perancangan antarmuka dan alur pengguna untuk platform edukasi gaya hidup ramah lingkungan EcoTopia Sphere, dikerjakan di Figma.","id\u002Fprojects\u002Fecotopia-sphere-ui-ux",[804],"figma","GvJeOFQ6K9TbcuAgZKiMYOcGQIa_RFY7nW_0JVxGBYY",{"id":492,"title":493,"body":807,"category":133,"cover":868,"description":8,"extension":137,"featured":138,"featuredOrder":575,"gallery":576,"links":869,"meta":870,"navigation":138,"path":581,"placeholder":158,"published":138,"publishedAt":582,"seo":871,"shortDescription":584,"status":585,"stem":586,"technologies":872,"__hash__":588},{"type":41,"value":808,"toc":857},[809,811,813,815,817,819,821,823,825,827,839,841,843,845,847,849,851,853],[44,810,47],{"id":46},[49,812,500],{},[44,814,504],{"id":503},[49,816,507],{},[44,818,55],{"id":54},[49,820,512],{},[44,822,62],{"id":61},[49,824,517],{},[44,826,69],{"id":68},[71,828,829,831,833,835,837],{},[74,830,524],{},[74,832,527],{},[74,834,530],{},[74,836,533],{},[74,838,536],{},[44,840,92],{"id":91},[49,842,541],{},[44,844,104],{"id":103},[49,846,546],{},[44,848,111],{"id":110},[49,850,551],{},[44,852,118],{"id":117},[49,854,556,855,560],{},[97,856,559],{},{"title":8,"searchDepth":123,"depth":123,"links":858},[859,860,861,862,863,864,865,866,867],{"id":46,"depth":123,"text":47},{"id":503,"depth":123,"text":504},{"id":54,"depth":123,"text":55},{"id":61,"depth":123,"text":62},{"id":68,"depth":123,"text":69},{"id":91,"depth":123,"text":92},{"id":103,"depth":123,"text":104},{"id":110,"depth":123,"text":111},{"id":117,"depth":123,"text":118},{"src":573,"alt":574},{"github":578,"demo":579},{},{"title":493,"description":8},[165,166,382,167,168,171,169],{"id":174,"title":175,"body":874,"category":133,"cover":930,"description":8,"extension":137,"featured":138,"featuredOrder":248,"gallery":931,"links":937,"meta":938,"navigation":138,"path":269,"placeholder":158,"published":138,"publishedAt":270,"seo":939,"shortDescription":272,"status":162,"stem":273,"technologies":940,"__hash__":277},{"type":41,"value":875,"toc":920},[876,878,880,882,884,886,888,890,904,906,908,910,912,914,916,918],[44,877,47],{"id":46},[49,879,182],{},[44,881,55],{"id":54},[49,883,187],{},[44,885,62],{"id":61},[49,887,192],{},[44,889,69],{"id":68},[71,891,892,894,896,898,900,902],{},[74,893,199],{},[74,895,202],{},[74,897,205],{},[74,899,208],{},[74,901,211],{},[74,903,214],{},[44,905,92],{"id":91},[49,907,219],{},[44,909,104],{"id":103},[49,911,224],{},[44,913,111],{"id":110},[49,915,229],{},[44,917,118],{"id":117},[49,919,234],{},{"title":8,"searchDepth":123,"depth":123,"links":921},[922,923,924,925,926,927,928,929],{"id":46,"depth":123,"text":47},{"id":54,"depth":123,"text":55},{"id":61,"depth":123,"text":62},{"id":68,"depth":123,"text":69},{"id":91,"depth":123,"text":92},{"id":103,"depth":123,"text":104},{"id":110,"depth":123,"text":111},{"id":117,"depth":123,"text":118},{"src":246,"alt":247},[932,933,934,935,936],{"src":251,"alt":252},{"src":254,"alt":255},{"src":257,"alt":258},{"src":260,"alt":261},{"src":263,"alt":264},{"github":266,"demo":267},{},{"title":175,"description":8},[165,166,167,171,275,276],{"id":38,"title":39,"body":942,"category":133,"cover":998,"description":8,"extension":137,"featured":138,"featuredOrder":139,"gallery":999,"links":1004,"meta":1005,"navigation":138,"path":157,"placeholder":158,"published":138,"publishedAt":159,"seo":1006,"shortDescription":161,"status":162,"stem":163,"technologies":1007,"__hash__":172},{"type":41,"value":943,"toc":988},[944,946,948,950,952,954,956,958,970,972,976,978,980,982,984,986],[44,945,47],{"id":46},[49,947,51],{},[44,949,55],{"id":54},[49,951,58],{},[44,953,62],{"id":61},[49,955,65],{},[44,957,69],{"id":68},[71,959,960,962,964,966,968],{},[74,961,76],{},[74,963,79],{},[74,965,82],{},[74,967,85],{},[74,969,88],{},[44,971,92],{"id":91},[49,973,95,974,100],{},[97,975,99],{},[44,977,104],{"id":103},[49,979,107],{},[44,981,111],{"id":110},[49,983,114],{},[44,985,118],{"id":117},[49,987,121],{},{"title":8,"searchDepth":123,"depth":123,"links":989},[990,991,992,993,994,995,996,997],{"id":46,"depth":123,"text":47},{"id":54,"depth":123,"text":55},{"id":61,"depth":123,"text":62},{"id":68,"depth":123,"text":69},{"id":91,"depth":123,"text":92},{"id":103,"depth":123,"text":104},{"id":110,"depth":123,"text":111},{"id":117,"depth":123,"text":118},{"src":135,"alt":136},[1000,1001,1002,1003],{"src":142,"alt":143},{"src":145,"alt":146},{"src":148,"alt":149},{"src":151,"alt":152},{"github":154,"demo":155},{},{"title":39,"description":8},[165,166,167,168,169,170,171],[1009,1117,1212,1287,1374,1466],{"id":1010,"title":280,"body":1011,"category":133,"cover":1096,"description":8,"extension":137,"featured":138,"featuredOrder":353,"gallery":1098,"links":1109,"meta":1110,"navigation":138,"path":1111,"placeholder":158,"published":138,"publishedAt":375,"seo":1112,"shortDescription":1113,"status":162,"stem":1114,"technologies":1115,"__hash__":1116},"projectsEn\u002Fen\u002Fprojects\u002Fdisastersense-ai.md",{"type":41,"value":1012,"toc":1086},[1013,1017,1020,1024,1027,1031,1034,1038,1058,1062,1065,1069,1072,1076,1079,1083],[44,1014,1016],{"id":1015},"overview","Overview",[49,1018,1019],{},"DisasterSense AI is a web-based early-warning system that helps Indonesian\ncommunities prepare for natural disasters by analyzing real-time weather data\nand automatically calculating disaster risk levels based on the user's\nlocation.",[44,1021,1023],{"id":1022},"problem","Problem",[49,1025,1026],{},"Existing disaster warning systems are often too technical for the general\npublic to understand, disaster education is scattered across disconnected\nsources, and many solutions require installing an extra app when fast\nbrowser-based access matters most during an emergency.",[44,1028,1030],{"id":1029},"solution","Solution",[49,1032,1033],{},"The app automatically detects the user's location (GPS or manual input with\nreverse geocoding), monitors real-time weather data (rainfall, wind speed,\nhumidity, temperature), then automatically calculates risk into three\nlevels Safe, Alert, Danger shown on an interactive map with color-coded\nlocation markers.",[44,1035,1037],{"id":1036},"features","Features",[71,1039,1040,1043,1046,1049,1052,1055],{},[74,1041,1042],{},"Automatic location detection via GPS or manual input with reverse geocoding",[74,1044,1045],{},"Real-time weather monitoring (rainfall, wind speed, humidity, temperature)",[74,1047,1048],{},"Automatic risk calculation with three levels: Safe, Alert, Danger",[74,1050,1051],{},"Interactive risk map with color-coded location markers",[74,1053,1054],{},"Disaster education covering multiple types of natural disasters in Indonesia",[74,1056,1057],{},"Alert notification system with historical tracking",[44,1059,1061],{"id":1060},"tech-stack","Tech Stack",[49,1063,1064],{},"React and TypeScript were chosen to build a reactive, type-safe interface,\nwith Vite as the build tool for fast iteration. Zustand handles lightweight\nstate management (location, weather data, alert history) without excess\nboilerplate. Leaflet (via React Leaflet) renders the interactive risk map.\nWeather data comes from Open-Meteo and geocoding from Nominatim\u002F\nOpenStreetMap, both key-free public APIs, in line with the backend-free\napproach.",[44,1066,1068],{"id":1067},"challenges","Challenges",[49,1070,1071],{},"Designing sensible risk-calculation thresholds from raw weather data, and\nhandling the case where location permission is denied with a smooth manual\ninput fallback.",[44,1073,1075],{"id":1074},"what-i-learned","What I Learned",[49,1077,1078],{},"This project reinforced the value of minimal state management (Zustand) over\nheavier solutions, and how to structure threshold-based risk classification\nlogic that stays transparent and easy to explain to non-technical users.",[44,1080,1082],{"id":1081},"result","Result",[49,1084,1085],{},"DisasterSense AI delivers location-based disaster risk estimates directly\nfrom the browser with no installation, covering education for multiple types\nof natural disasters in Indonesia.",{"title":8,"searchDepth":123,"depth":123,"links":1087},[1088,1089,1090,1091,1092,1093,1094,1095],{"id":1015,"depth":123,"text":1016},{"id":1022,"depth":123,"text":1023},{"id":1029,"depth":123,"text":1030},{"id":1036,"depth":123,"text":1037},{"id":1060,"depth":123,"text":1061},{"id":1067,"depth":123,"text":1068},{"id":1074,"depth":123,"text":1075},{"id":1081,"depth":123,"text":1082},{"src":351,"alt":1097},"DisasterSense AI homepage with a risk-check button and feature summary",[1099,1101,1103,1105,1107],{"src":356,"alt":1100},"Risk dashboard with status, current weather data, and action recommendations",{"src":359,"alt":1102},"Interactive risk map with location markers color-coded by danger level",{"src":362,"alt":1104},"Disaster education page with guidance for multiple types of natural disasters",{"src":365,"alt":1106},"Notifications page with alert history and browser notification settings",{"src":368,"alt":1108},"DisasterSense AI About page with project goals and the technologies used",{"github":371,"demo":372},{},"\u002Fen\u002Fprojects\u002Fdisastersense-ai",{"title":280,"description":8},"An early-warning system that calculates automatic disaster risk levels from real-time, location-based weather data.","en\u002Fprojects\u002Fdisastersense-ai",[380,381,382,167,275,383],"VtRU4LcqLdA9hq8hmp1ZBrNNqx2TiJHA8spV9hXR0T4",{"id":1118,"title":387,"body":1119,"category":133,"cover":1191,"description":8,"extension":137,"featured":138,"featuredOrder":463,"gallery":1193,"links":1204,"meta":1205,"navigation":138,"path":1206,"placeholder":158,"published":138,"publishedAt":485,"seo":1207,"shortDescription":1208,"status":162,"stem":1209,"technologies":1210,"__hash__":1211},"projectsEn\u002Fen\u002Fprojects\u002Fecotopia-sphere.md",{"type":41,"value":1120,"toc":1181},[1121,1123,1126,1128,1131,1133,1136,1138,1155,1157,1163,1165,1168,1170,1176,1178],[44,1122,1016],{"id":1015},[49,1124,1125],{},"Ecotopia Sphere is a web platform that promotes environmental awareness and\nsustainable living in the context of smart cities, connecting education,\ncommunity action, and green technology innovation into one digital\necosystem.",[44,1127,1023],{"id":1022},[49,1129,1130],{},"Education about eco-friendly living is often scattered across disconnected\nsources, and people lack a platform that combines learning with a space to\nactually participate in real environmental action.",[44,1132,1030],{"id":1029},[49,1134,1135],{},"Ecotopia Sphere brings together structured educational articles, a showcase\nof green technology innovations for urban environments, and a community\nspace where users can share their own environmental actions to inspire\nothers, backed by animated collective-impact statistics.",[44,1137,1037],{"id":1036},[71,1139,1140,1143,1146,1149,1152],{},[74,1141,1142],{},"12 structured educational articles on energy, water, waste, and transport",[74,1144,1145],{},"A showcase of 10 green technology innovations for urban environments",[74,1147,1148],{},"A community action space for sharing and inspiring environmental action",[74,1150,1151],{},"Animated collective impact statistics",[74,1153,1154],{},"An about page covering the platform's vision, mission, philosophy, and logo",[44,1156,1061],{"id":1060},[49,1158,1159,1160,1162],{},"Vue 3 (Composition API) and Vite were chosen to build a lightweight\nsingle-page application with history-mode navigation via Vue Router.\nTailwind CSS sped up building a consistent look without excess custom CSS.\nSince all content is static and community interactions are stored in\n",[97,1161,99],{},", the app needs no backend at all.",[44,1164,1068],{"id":1067},[49,1166,1167],{},"Structuring a fairly large body of educational content (12 articles, 10\ninnovations) so it stays easy to navigate without the pages feeling dense or\nconfusing.",[44,1169,1075],{"id":1074},[49,1171,1172,1173,1175],{},"This project sharpened my ability to design information architecture for a\nlarge volume of educational content, and to use ",[97,1174,99],{}," as a simple\nbackend substitute for user-contribution-based community features.",[44,1177,1082],{"id":1081},[49,1179,1180],{},"Ecotopia Sphere provides a single centralized platform for learning about\nsustainable living while giving users a space to share their real actions,\nall accessible directly from the browser.",{"title":8,"searchDepth":123,"depth":123,"links":1182},[1183,1184,1185,1186,1187,1188,1189,1190],{"id":1015,"depth":123,"text":1016},{"id":1022,"depth":123,"text":1023},{"id":1029,"depth":123,"text":1030},{"id":1036,"depth":123,"text":1037},{"id":1060,"depth":123,"text":1061},{"id":1067,"depth":123,"text":1068},{"id":1074,"depth":123,"text":1075},{"id":1081,"depth":123,"text":1082},{"src":461,"alt":1192},"Ecotopia Sphere homepage with a sustainable green-city illustration",[1194,1196,1198,1200,1202],{"src":466,"alt":1195},"EcoTopia Sphere About page with the platform's vision and mission",{"src":469,"alt":1197},"Green Living Tips page with category filters and tip cards",{"src":472,"alt":1199},"An educational article page about saving electrical energy",{"src":475,"alt":1201},"Smart Innovations page showcasing urban green technologies",{"src":478,"alt":1203},"Smart Action Hub page with a form for sharing environmental actions",{"github":481,"demo":482},{},"\u002Fen\u002Fprojects\u002Fecotopia-sphere",{"title":387,"description":8},"An eco-friendly lifestyle education platform with a green-technology showcase and a community action space.","en\u002Fprojects\u002Fecotopia-sphere",[165,166,167,168],"-Pvn_v8oJZo-R_SDma-QoPfLyS9RnADQws86jEx4YSk",{"id":1213,"title":1214,"body":1215,"category":792,"cover":1277,"description":8,"extension":137,"featured":158,"featuredOrder":576,"gallery":576,"links":1279,"meta":1280,"navigation":138,"path":1281,"placeholder":158,"published":138,"publishedAt":799,"seo":1282,"shortDescription":1283,"status":162,"stem":1284,"technologies":1285,"__hash__":1286},"projectsEn\u002Fen\u002Fprojects\u002Fecotopia-sphere-ui-ux.md","EcoTopia Sphere (UI\u002FUX Design)",{"type":41,"value":1216,"toc":1267},[1217,1219,1222,1226,1229,1233,1236,1240,1243,1247,1250,1254,1257,1259,1262,1264],[44,1218,1016],{"id":1015},[49,1220,1221],{},"This is the design side of EcoTopia Sphere, a web platform for eco-friendly\nlifestyle education. The entire interface, its user flows, and its visual\nsystem were designed in Figma first, then implemented as code. That\nimplementation lives as a separate project, EcoTopia Sphere.",[44,1223,1225],{"id":1224},"my-role","My Role",[49,1227,1228],{},"I worked as the UI\u002FUX Designer and also built it. The design work covered the\ninformation architecture for a fairly large body of educational content,\nwireframes for each page, a component system, and an interactive Figma\nprototype used as the implementation reference.",[44,1230,1232],{"id":1231},"design-challenges","Design Challenges",[49,1234,1235],{},"There is a lot of educational content, articles, an innovation showcase, and a\ncommunity action space, so the main challenge was arranging it all so it stays\neasy to browse without feeling dense. The eco-friendly tone also had to come\nthrough without leaning on an overdone \"green\" cliche.",[44,1237,1239],{"id":1238},"design-process","Design Process",[49,1241,1242],{},"I started by mapping the content and navigation flow, then turned it into\nlow-fidelity wireframes to test each page's structure. Once the skeleton felt\nsolid, I moved to high fidelity: typography, spacing scale, colour, the\ngreen-city illustration, and component states. Layouts were designed\nmobile-first, then scaled up to wider breakpoints.",[44,1244,1246],{"id":1245},"design-system","Design System",[49,1248,1249],{},"A set of reusable tokens and components was built, buttons, cards, article\ncards, category tags, forms, and a statistics pattern, so the look stayed\nconsistent as pages were added and the implementation stayed predictable.",[44,1251,1253],{"id":1252},"prototype-and-handoff","Prototype and Handoff",[49,1255,1256],{},"A linked Figma prototype was the single reference during implementation. Since\nI also wrote the code, design decisions could be tested in the browser right\naway and adjusted where something did not sit right.",[44,1258,1075],{"id":1074},[49,1260,1261],{},"This project sharpened my ability to structure information architecture for a\nlarge volume of content, keep a component system lean, and close the gap\nbetween a design file and real code.",[44,1263,1082],{"id":1081},[49,1265,1266],{},"This design is the basis of the live EcoTopia Sphere, with a look that holds\nup across screen sizes. The Figma file can be viewed via the link above.",{"title":8,"searchDepth":123,"depth":123,"links":1268},[1269,1270,1271,1272,1273,1274,1275,1276],{"id":1015,"depth":123,"text":1016},{"id":1224,"depth":123,"text":1225},{"id":1231,"depth":123,"text":1232},{"id":1238,"depth":123,"text":1239},{"id":1245,"depth":123,"text":1246},{"id":1252,"depth":123,"text":1253},{"id":1074,"depth":123,"text":1075},{"id":1081,"depth":123,"text":1082},{"src":461,"alt":1278},"EcoTopia Sphere homepage, the final result of the interface design",{"demo":796},{},"\u002Fen\u002Fprojects\u002Fecotopia-sphere-ui-ux",{"title":1214,"description":8},"Interface and user-flow design for EcoTopia Sphere, an eco-friendly lifestyle education platform, done in Figma.","en\u002Fprojects\u002Fecotopia-sphere-ui-ux",[804],"b0NpAZxPuT-NK4NUhFSLJWUyNlo__LIX1FQ0TUScKoQ",{"id":1288,"title":493,"body":1289,"category":133,"cover":1364,"description":8,"extension":137,"featured":138,"featuredOrder":575,"gallery":576,"links":1366,"meta":1367,"navigation":138,"path":1368,"placeholder":158,"published":138,"publishedAt":582,"seo":1369,"shortDescription":1370,"status":585,"stem":1371,"technologies":1372,"__hash__":1373},"projectsEn\u002Fen\u002Fprojects\u002Fnearby-balikpapan.md",{"type":41,"value":1290,"toc":1353},[1291,1293,1296,1298,1301,1303,1306,1308,1311,1313,1330,1332,1335,1337,1340,1342,1345,1347],[44,1292,1016],{"id":1015},[49,1294,1295],{},"NearBy Balikpapan is a web platform that helps residents discover and learn\nabout micro, small, and medium enterprises (SMEs) in Balikpapan, East\nKalimantan, Indonesia. It presents location-based information about local\nbusinesses to support the digital transformation of small business owners.",[44,1297,1225],{"id":1224},[49,1299,1300],{},"This was a team project, an academic initiative by Institut Teknologi\nKalimantan students. I worked as the Front-End Developer and UI\u002FUX\nDesigner: shaping the interface design and user flows, translating them\ninto responsive Vue components, and building the catalog, search, filtering,\nand business-profile pages on the client side.",[44,1302,1023],{"id":1022},[49,1304,1305],{},"Many SMEs in Balikpapan lack an easily discoverable digital presence, while\nresidents struggle to find nearby local businesses,\nbecause the information is scattered and not centralized.",[44,1307,1030],{"id":1029},[49,1309,1310],{},"NearBy Balikpapan brings an SME catalog into a single searchable, filterable\ndirectory, with location-based discovery to surface nearby businesses,\ndetailed business profiles, and a recommendation system. My design focus was\nmaking search feel fast and keeping the layout clear on small screens.",[44,1312,1037],{"id":1036},[71,1314,1315,1318,1321,1324,1327],{},[74,1316,1317],{},"SME catalog with search and category filtering",[74,1319,1320],{},"Location-based discovery of nearby businesses",[74,1322,1323],{},"Detailed business profile pages",[74,1325,1326],{},"Business recommendation system",[74,1328,1329],{},"Mobile-responsive interface",[44,1331,1061],{"id":1060},[49,1333,1334],{},"On the front end I used Vue 3 (Composition API) and TypeScript on Vite, with\nTailwind CSS for styling and Pinia for state management. I did the interface\ndesign and user-flow prototyping before implementation.",[44,1336,1068],{"id":1067},[49,1338,1339],{},"Aligning the design with real data from a still-evolving backend, and keeping\nsearch and filtering responsive as the number of registered businesses\ngrows.",[44,1341,1075],{"id":1074},[49,1343,1344],{},"This project exercised cross-role teamwork: handing over designs that could\nbe implemented directly, agreeing on an API contract with the backend team,\nand keeping UI components consistent as features kept being added.",[44,1346,1082],{"id":1081},[49,1348,1349,1350,1352],{},"NearBy Balikpapan is live at ",[97,1351,559],{}," with a growing set of\nbusinesses, categories, and district coverage, and remains under active\ndevelopment.",{"title":8,"searchDepth":123,"depth":123,"links":1354},[1355,1356,1357,1358,1359,1360,1361,1362,1363],{"id":1015,"depth":123,"text":1016},{"id":1224,"depth":123,"text":1225},{"id":1022,"depth":123,"text":1023},{"id":1029,"depth":123,"text":1030},{"id":1036,"depth":123,"text":1037},{"id":1060,"depth":123,"text":1061},{"id":1067,"depth":123,"text":1068},{"id":1074,"depth":123,"text":1075},{"id":1081,"depth":123,"text":1082},{"src":573,"alt":1365},"NearBy Balikpapan homepage with SME search and featured business cards",{"github":578,"demo":579},{},"\u002Fen\u002Fprojects\u002Fnearby-balikpapan",{"title":493,"description":8},"A location-based directory for discovering nearby small and medium enterprises in Balikpapan.","en\u002Fprojects\u002Fnearby-balikpapan",[165,166,382,167,168,171,169],"XgYbe1x55-LVSUsNd2OvIG0WDtEZ_S87vaqp2uu2EcE",{"id":1375,"title":175,"body":1376,"category":133,"cover":1445,"description":8,"extension":137,"featured":138,"featuredOrder":248,"gallery":1447,"links":1458,"meta":1459,"navigation":138,"path":1460,"placeholder":158,"published":138,"publishedAt":270,"seo":1461,"shortDescription":1462,"status":162,"stem":1463,"technologies":1464,"__hash__":1465},"projectsEn\u002Fen\u002Fprojects\u002Fsaferoute.md",{"type":41,"value":1377,"toc":1435},[1378,1380,1383,1385,1388,1390,1393,1395,1415,1417,1420,1422,1425,1427,1430,1432],[44,1379,1016],{"id":1015},[49,1381,1382],{},"SafeRoute is a web platform that helps Indonesian communities prepare for and\nrespond to natural disasters through real-time information and easy to\nunderstand guidance all running directly in the browser with no extra\ninstallation.",[44,1384,1023],{"id":1022},[49,1386,1387],{},"Disaster risk information is often hard to access in an understandable form,\nlocation-based evacuation guidance remains limited, and safety education is\nscattered across many different sources while rapidly changing weather\nconditions demand risk analysis that stays continuously up to date.",[44,1389,1030],{"id":1029},[49,1391,1392],{},"SafeRoute maps risk zones as an interactive, color-coded map by danger level,\nmonitors weather in real time to automatically classify risk (low\u002Fmedium\u002F\nhigh), and provides complete evacuation guidance for multiple disaster types\nalong with shelter locations across Indonesia's provinces.",[44,1394,1037],{"id":1036},[71,1396,1397,1400,1403,1406,1409,1412],{},[74,1398,1399],{},"Interactive risk map with danger-zone polygons and evacuation routing",[74,1401,1402],{},"Real-time weather monitoring and a 7-day forecast",[74,1404,1405],{},"Automatic risk detection based on precipitation thresholds",[74,1407,1408],{},"Emergency browser push notifications when risk escalates",[74,1410,1411],{},"24-hour precipitation charts and historical risk distribution",[74,1413,1414],{},"Safety guidance for multiple disaster types and shelter locations",[44,1416,1061],{"id":1060},[49,1418,1419],{},"Vue 3 and Vite were chosen for fast iteration on a visually heavy,\nmap-centric app. Leaflet handles interactive map rendering and route\ncalculation, Chart.js visualizes precipitation and historical risk data, and\nPinia manages cross-component state (user location, risk status, alert\nhistory). Weather data comes from Open-Meteo and base map tiles from\nOpenStreetMap, both key-free public APIs, in line with the backend-free\napproach.",[44,1421,1068],{"id":1067},[49,1423,1424],{},"Keeping risk classification consistent as weather data changes quickly,\nwhile avoiding duplicate notifications that would annoy users when risk\nstatus fluctuates within a short time window.",[44,1426,1075],{"id":1074},[49,1428,1429],{},"This project gave hands-on experience integrating geospatial data (GeoJSON,\nrouting) with real-time weather data in a fully client-side workflow,\nincluding designing sensible risk thresholds from raw precipitation data.",[44,1431,1082],{"id":1081},[49,1433,1434],{},"SafeRoute provides evacuation route estimates and location risk status\ndirectly from the browser, covering safety guidance for multiple disaster\ntypes and shelter locations across Indonesia's provinces.",{"title":8,"searchDepth":123,"depth":123,"links":1436},[1437,1438,1439,1440,1441,1442,1443,1444],{"id":1015,"depth":123,"text":1016},{"id":1022,"depth":123,"text":1023},{"id":1029,"depth":123,"text":1030},{"id":1036,"depth":123,"text":1037},{"id":1060,"depth":123,"text":1061},{"id":1067,"depth":123,"text":1068},{"id":1074,"depth":123,"text":1075},{"id":1081,"depth":123,"text":1082},{"src":246,"alt":1446},"SafeRoute homepage showing the local risk panel and real-time weather status",[1448,1450,1452,1454,1456],{"src":251,"alt":1449},"Interactive Leaflet-based risk map with disaster location markers",{"src":254,"alt":1451},"Real-time weather panel with risk status and a seven-day summary",{"src":257,"alt":1453},"Risk analytics with a 24-hour precipitation chart and risk distribution",{"src":260,"alt":1455},"Safety guidance with evacuation procedures for multiple disasters",{"src":263,"alt":1457},"SafeRoute About page listing the main features",{"github":266,"demo":267},{},"\u002Fen\u002Fprojects\u002Fsaferoute",{"title":175,"description":8},"A disaster preparedness platform with an interactive risk map, real-time weather, and evacuation routing.","en\u002Fprojects\u002Fsaferoute",[165,166,167,171,275,276],"C5NNZEYgF_3Hsi5xul-BVOohL7xylnm_FR3HimVo6TU",{"id":1467,"title":39,"body":1468,"category":133,"cover":1537,"description":8,"extension":137,"featured":138,"featuredOrder":139,"gallery":1539,"links":1548,"meta":1549,"navigation":138,"path":1550,"placeholder":158,"published":138,"publishedAt":159,"seo":1551,"shortDescription":1552,"status":162,"stem":1553,"technologies":1554,"__hash__":1555},"projectsEn\u002Fen\u002Fprojects\u002Fwinterra.md",{"type":41,"value":1469,"toc":1527},[1470,1472,1475,1477,1480,1482,1485,1487,1504,1506,1512,1514,1517,1519,1522,1524],[44,1471,1016],{"id":1015},[49,1473,1474],{},"WinterRa is a year-end holiday platform that replaces static travel articles\nwith an immersive 3D experience. Every feature runs entirely in the browser\nwith no backend a budget calculator, a packing checklist, and a New Year\ncountdown with a 3D fireworks animation.",[44,1476,1023],{"id":1022},[49,1478,1479],{},"End-of-year holiday planning is usually scattered across several separate\ntools (budget notes, packing lists, countdown apps), and the digital\nexperience around the new year tends to be monotonous just a number\nticking down with no sense of celebration.",[44,1481,1030],{"id":1029},[49,1483,1484],{},"WinterRa brings all of that into a single page: a budget calculator that\nbreaks down estimated costs for transportation, accommodation, food,\nactivities, and souvenirs; a categorized packing checklist whose progress is\nsaved automatically on the device; and a real-time New Year countdown with a\n3D fireworks background and falling snow across the page.",[44,1486,1037],{"id":1036},[71,1488,1489,1492,1495,1498,1501],{},[74,1490,1491],{},"Holiday budget calculator broken down by spending category",[74,1493,1494],{},"Packing checklist with locally persisted progress tracking",[74,1496,1497],{},"Real-time New Year countdown with a 3D fireworks animation",[74,1499,1500],{},"Falling snow effect across the whole page",[74,1502,1503],{},"Rotating daily inspirational quotes",[44,1505,1061],{"id":1060},[49,1507,1508,1509,1511],{},"Vue 3 (Composition API) and Vite were chosen as the foundation for their\nspeed and low overhead in a purely client-side app. Three.js renders the 3D\nfireworks animation, while GSAP drives reveal and scroll animations for\nsmooth transitions between sections. Pinia holds centralized state (checklist\nprogress, budget calculations) persisted to ",[97,1510,99],{}," so user data\nsurvives a page reload.",[44,1513,1068],{"id":1067},[49,1515,1516],{},"Keeping performance smooth while a 3D fireworks animation and a Canvas 2D\nsnow effect run simultaneously was the main challenge, since everything\nexecutes entirely client-side with no server to offload work to.",[44,1518,1075],{"id":1074},[49,1520,1521],{},"This project deepened my understanding of running a real-time 3D animation\n(Three.js) alongside timeline-based animation (GSAP) within a single Vue app,\nand reinforced the value of local storage for backend-free apps so the user\nexperience still feels persistent.",[44,1523,1082],{"id":1081},[49,1525,1526],{},"WinterRa runs fully client-side and is accessible directly from the browser\nwith no installation, making it a lightweight option for holiday planning\nfrom any device.",{"title":8,"searchDepth":123,"depth":123,"links":1528},[1529,1530,1531,1532,1533,1534,1535,1536],{"id":1015,"depth":123,"text":1016},{"id":1022,"depth":123,"text":1023},{"id":1029,"depth":123,"text":1030},{"id":1036,"depth":123,"text":1037},{"id":1060,"depth":123,"text":1061},{"id":1067,"depth":123,"text":1068},{"id":1074,"depth":123,"text":1075},{"id":1081,"depth":123,"text":1082},{"src":135,"alt":1538},"WinterRa homepage with a snow-themed title and 3D particle effects",[1540,1542,1544,1546],{"src":142,"alt":1541},"WinterRa About page explaining the concept and project timeline",{"src":145,"alt":1543},"Holiday budget calculator with a per-category cost breakdown",{"src":148,"alt":1545},"Categorized packing checklist with a progress indicator",{"src":151,"alt":1547},"New Year countdown with a starfield and 3D fireworks background",{"github":154,"demo":155},{},"\u002Fen\u002Fprojects\u002Fwinterra",{"title":39,"description":8},"An interactive year-end holiday platform with a 3D experience, budget calculator, and packing checklist.","en\u002Fprojects\u002Fwinterra",[165,166,167,168,169,170,171],"qVzmxip1vsb_9MZUrfr-HojkUMkHRm0zXWaowmjjURs",1788775303309]