[{"data":1,"prerenderedAt":862},["ShallowReactive",2],{"site-config":3,"project:finara":36,"related-WEB-finara-id":273},{"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},"Selamat datang di website pribadi saya, tempat untuk mengenal saya dan berbagai proyek yang telah saya kerjakan.","Welcome to my personal website, a place to get to know me and explore the projects I have worked on.",{},"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","C1Iwnb3jj_3cnsaOEJXjL0pDAt8XGSMOObuxdItbQgQ",{"id":37,"en":168},{"id":38,"title":39,"body":40,"category":128,"cover":129,"description":8,"extension":132,"featured":133,"featuredOrder":134,"gallery":135,"links":151,"meta":154,"navigation":133,"path":155,"placeholder":156,"published":133,"publishedAt":157,"seo":158,"shortDescription":159,"status":160,"stem":161,"technologies":162,"__hash__":167},"projectsId\u002Fid\u002Fprojects\u002Ffinara.md","Finara",{"type":41,"value":42,"toc":117},"minimark",[43,48,52,56,59,63,66,70,89,93,96,100,103,107,110,114],[44,45,47],"h2",{"id":46},"ringkasan","Ringkasan",[49,50,51],"p",{},"Finara adalah platform edukasi dan simulasi keuangan pribadi yang membantu\npengguna memahami kondisi finansial mereka, mulai dari pemasukan, kategori\npengeluaran, hingga perencanaan tabungan, tanpa perlu membuat akun atau\nmengirim data ke server mana pun.",[44,53,55],{"id":54},"masalah","Masalah",[49,57,58],{},"Banyak orang kesulitan mengetahui ke mana uang mereka digunakan setiap\nbulan, sulit membedakan kebutuhan pokok dari keinginan, dan tidak memiliki\ntarget tabungan yang terukur. Alat perencanaan keuangan yang ada umumnya\nmengharuskan pembuatan akun atau berbagi data pribadi, padahal banyak\npengguna hanya butuh gambaran cepat tanpa komitmen semacam itu.",[44,60,62],{"id":61},"solusi","Solusi",[49,64,65],{},"Finara menghadirkan simulator tiga langkah (pemasukan, pengeluaran per\nkategori, dan tabungan) yang langsung menghasilkan indikator kesehatan\nkeuangan (Aman, Waspada, atau Defisit) beserta rekomendasi edukatif. Seluruh\nperhitungan berjalan di perangkat pengguna sendiri, tanpa akun, tanpa\nlocalStorage, dan tanpa panggilan API, sehingga privasi terjaga sepenuhnya.",[44,67,69],{"id":68},"fitur","Fitur",[71,72,73,77,80,83,86],"ul",{},[74,75,76],"li",{},"Simulator finansial 3 langkah: pemasukan, pengeluaran per kategori, dan target tabungan",[74,78,79],{},"Indikator kesehatan keuangan otomatis (Aman \u002F Waspada \u002F Defisit) beserta rekomendasi edukatif",[74,81,82],{},"Visualisasi data memakai SVG murni: grafik batang pemasukan vs pengeluaran, diagram donat komposisi pengeluaran, dan grafik proyeksi tabungan",[74,84,85],{},"Modul edukasi 6 topik dasar keuangan, termasuk referensi anggaran 50\u002F30\u002F20",[74,87,88],{},"Halaman Tentang SDG 1 yang menghubungkan literasi keuangan dengan tujuan pembangunan berkelanjutan tanpa kemiskinan",[44,90,92],{"id":91},"teknologi-yang-digunakan","Teknologi yang Digunakan",[49,94,95],{},"Vue 3 (Composition API) dan Vite dipilih untuk membangun single-page\napplication yang ringan, dengan Vue Router mengatur navigasi antar halaman\nsecara lazy-loaded. Tampilan disusun dengan CSS murni memakai design token,\ntanpa framework CSS, agar bundel tetap kecil. Semua grafik dibuat sebagai\nSVG native tanpa pustaka charting, dan seluruh state simulasi dikelola\nlewat satu composable reaktif tanpa backend, localStorage, atau panggilan\nAPI sama sekali.",[44,97,99],{"id":98},"tantangan","Tantangan",[49,101,102],{},"Menyusun logika kategori pengeluaran yang cukup rinci (kebutuhan pokok,\nkeinginan, kewajiban, kustom) sekaligus menjaga alur simulasi tiga langkah\ntetap sederhana dan tidak membebani pengguna, serta membangun visualisasi\nSVG dari nol tanpa mengandalkan pustaka charting.",[44,104,106],{"id":105},"hal-hal-yang-saya-pelajari","Hal-hal yang Saya Pelajari",[49,108,109],{},"Proyek ini memperdalam pemahaman saya tentang desain state management\nreaktif berbasis composable di Vue, serta cara membangun visualisasi data\n(bar, donut, line chart) langsung dengan SVG tanpa dependensi eksternal.",[44,111,113],{"id":112},"hasil","Hasil",[49,115,116],{},"Finara menyediakan cara cepat dan privat bagi siapa pun untuk memahami\nkondisi keuangan mereka dan mendapatkan rekomendasi edukatif, seluruhnya\ndari browser tanpa akun maupun data yang meninggalkan perangkat pengguna.",{"title":8,"searchDepth":118,"depth":118,"links":119},2,[120,121,122,123,124,125,126,127],{"id":46,"depth":118,"text":47},{"id":54,"depth":118,"text":55},{"id":61,"depth":118,"text":62},{"id":68,"depth":118,"text":69},{"id":91,"depth":118,"text":92},{"id":98,"depth":118,"text":99},{"id":105,"depth":118,"text":106},{"id":112,"depth":118,"text":113},"WEB",{"src":130,"alt":131},"\u002Fimages\u002Fprojects\u002Ffinara\u002Fcover.webp","Halaman utama Finara dengan ringkasan pendapatan, pengeluaran, dan status kesehatan keuangan","md",true,"6",[136,139,142,145,148],{"src":137,"alt":138},"\u002Fimages\u002Fprojects\u002Ffinara\u002Fsimulasi.webp","Langkah pertama simulator Finara untuk mengisi data pendapatan bulanan",{"src":140,"alt":141},"\u002Fimages\u002Fprojects\u002Ffinara\u002Fhasilringkasan.webp","Hasil simulasi Finara dengan indikator kesehatan keuangan serta grafik pendapatan vs pengeluaran dan komposisi pengeluaran",{"src":143,"alt":144},"\u002Fimages\u002Fprojects\u002Ffinara\u002Fhasilproyeksi.webp","Target tabungan dan grafik proyeksi tabungan bulanan pada hasil simulasi Finara",{"src":146,"alt":147},"\u002Fimages\u002Fprojects\u002Ffinara\u002Fedukasi.webp","Halaman edukasi Finara berisi materi dasar pendapatan, kebutuhan, keinginan, tabungan, dan dana darurat",{"src":149,"alt":150},"\u002Fimages\u002Fprojects\u002Ffinara\u002Fsdg1.webp","Halaman Tentang SDG 1 yang menjelaskan keterkaitan Finara dengan tujuan pembangunan berkelanjutan tanpa kemiskinan",{"github":152,"demo":153},"https:\u002F\u002Fgithub.com\u002FChrisimana\u002Ffinara","https:\u002F\u002Ffinara-eight.vercel.app\u002F",{},"\u002Fid\u002Fprojects\u002Ffinara",false,"2026-09-12",{"title":39,"description":8},"Simulator edukasi keuangan pribadi tanpa akun untuk memahami pemasukan, mengatur pengeluaran, dan merencanakan tabungan langsung dari browser.","COMPLETED","id\u002Fprojects\u002Ffinara",[163,164,165,166],"vue","vue-router","vite","css","y0rRqhXXlMXiQX_BjIMaPQoNL9jnVg3ANkp4_jcHtsU",{"id":169,"title":39,"body":170,"category":128,"cover":252,"description":8,"extension":132,"featured":133,"featuredOrder":134,"gallery":254,"links":265,"meta":266,"navigation":133,"path":267,"placeholder":156,"published":133,"publishedAt":157,"seo":268,"shortDescription":269,"status":160,"stem":270,"technologies":271,"__hash__":272},"projectsEn\u002Fen\u002Fprojects\u002Ffinara.md",{"type":41,"value":171,"toc":242},[172,176,179,183,186,190,193,197,214,218,221,225,228,232,235,239],[44,173,175],{"id":174},"overview","Overview",[49,177,178],{},"Finara is a personal finance education and simulation platform that helps\nusers understand their financial situation, from income and expense\ncategories to savings planning, without creating an account or sending any\ndata to a server.",[44,180,182],{"id":181},"problem","Problem",[49,184,185],{},"Many people struggle to track where their money goes each month, find it\nhard to separate essential needs from wants, and lack a measurable savings\ntarget. Existing financial planning tools usually require an account or\nsharing personal data, even though many users just want a quick picture\nwithout that commitment.",[44,187,189],{"id":188},"solution","Solution",[49,191,192],{},"Finara offers a three-step simulator (income, categorized expenses, and\nsavings) that instantly produces a financial health indicator (Safe,\nWarning, or Deficit) along with educational recommendations. All\ncalculations run entirely on the user's own device, with no account, no\nlocalStorage, and no API calls, keeping privacy fully intact.",[44,194,196],{"id":195},"features","Features",[71,198,199,202,205,208,211],{},[74,200,201],{},"A three-step financial simulator: income, categorized expenses, and savings targets",[74,203,204],{},"Automatic financial health indicator (Safe \u002F Warning \u002F Deficit) with educational recommendations",[74,206,207],{},"Data visualizations built with pure SVG: an income vs expense bar chart, an expense composition donut chart, and a savings projection line chart",[74,209,210],{},"An education module covering six core finance topics, including the 50\u002F30\u002F20 budgeting reference",[74,212,213],{},"An About SDG 1 page connecting financial literacy to the No Poverty sustainable development goal",[44,215,217],{"id":216},"tech-stack","Tech Stack",[49,219,220],{},"Vue 3 (Composition API) and Vite were chosen to build a lightweight\nsingle-page application, with Vue Router handling lazy-loaded navigation\nbetween pages. The interface is styled with pure CSS using design tokens,\nwith no CSS framework, to keep the bundle small. All charts are built as\nnative SVG with no charting library, and the entire simulation state is\nmanaged through a single reactive composable, with no backend,\nlocalStorage, or API calls at all.",[44,222,224],{"id":223},"challenges","Challenges",[49,226,227],{},"Structuring a fairly detailed expense category system (essentials, wants,\nobligations, custom) while keeping the three-step simulation flow simple\nand unintimidating, and building the SVG visualizations from scratch\nwithout relying on a charting library.",[44,229,231],{"id":230},"what-i-learned","What I Learned",[49,233,234],{},"This project deepened my understanding of composable-based reactive state\ndesign in Vue, and how to build data visualizations (bar, donut, and line\ncharts) directly with SVG without external dependencies.",[44,236,238],{"id":237},"result","Result",[49,240,241],{},"Finara gives anyone a fast, private way to understand their financial\nsituation and get educational recommendations, entirely from the browser\nwith no account and no data leaving the user's device.",{"title":8,"searchDepth":118,"depth":118,"links":243},[244,245,246,247,248,249,250,251],{"id":174,"depth":118,"text":175},{"id":181,"depth":118,"text":182},{"id":188,"depth":118,"text":189},{"id":195,"depth":118,"text":196},{"id":216,"depth":118,"text":217},{"id":223,"depth":118,"text":224},{"id":230,"depth":118,"text":231},{"id":237,"depth":118,"text":238},{"src":130,"alt":253},"Finara homepage with a summary of income, expenses, and financial health status",[255,257,259,261,263],{"src":137,"alt":256},"First step of the Finara simulator for entering monthly income",{"src":140,"alt":258},"Finara simulation results with a financial health indicator and income vs expense and expense composition charts",{"src":143,"alt":260},"Savings target and monthly savings projection chart on the Finara results page",{"src":146,"alt":262},"Finara education page covering income, needs, wants, savings, and emergency fund basics",{"src":149,"alt":264},"About SDG 1 page explaining how Finara connects to the No Poverty sustainable development goal",{"github":152,"demo":153},{},"\u002Fen\u002Fprojects\u002Ffinara",{"title":39,"description":8},"A no-account personal finance simulator for understanding income, managing expenses, and planning savings right in the browser.","en\u002Fprojects\u002Ffinara",[163,164,165,166],"LcHvjbrFaGK-KBZWwI1KHjUox94Tj3ti4sM1xon3PUg",[274,340,443,545,650,756],{"id":38,"title":39,"body":275,"category":128,"cover":329,"description":8,"extension":132,"featured":133,"featuredOrder":134,"gallery":330,"links":336,"meta":337,"navigation":133,"path":155,"placeholder":156,"published":133,"publishedAt":157,"seo":338,"shortDescription":159,"status":160,"stem":161,"technologies":339,"__hash__":167},{"type":41,"value":276,"toc":319},[277,279,281,283,285,287,289,291,303,305,307,309,311,313,315,317],[44,278,47],{"id":46},[49,280,51],{},[44,282,55],{"id":54},[49,284,58],{},[44,286,62],{"id":61},[49,288,65],{},[44,290,69],{"id":68},[71,292,293,295,297,299,301],{},[74,294,76],{},[74,296,79],{},[74,298,82],{},[74,300,85],{},[74,302,88],{},[44,304,92],{"id":91},[49,306,95],{},[44,308,99],{"id":98},[49,310,102],{},[44,312,106],{"id":105},[49,314,109],{},[44,316,113],{"id":112},[49,318,116],{},{"title":8,"searchDepth":118,"depth":118,"links":320},[321,322,323,324,325,326,327,328],{"id":46,"depth":118,"text":47},{"id":54,"depth":118,"text":55},{"id":61,"depth":118,"text":62},{"id":68,"depth":118,"text":69},{"id":91,"depth":118,"text":92},{"id":98,"depth":118,"text":99},{"id":105,"depth":118,"text":106},{"id":112,"depth":118,"text":113},{"src":130,"alt":131},[331,332,333,334,335],{"src":137,"alt":138},{"src":140,"alt":141},{"src":143,"alt":144},{"src":146,"alt":147},{"src":149,"alt":150},{"github":152,"demo":153},{},{"title":39,"description":8},[163,164,165,166],{"id":341,"title":342,"body":343,"category":128,"cover":422,"description":8,"extension":132,"featured":133,"featuredOrder":425,"gallery":426,"links":427,"meta":430,"navigation":133,"path":431,"placeholder":156,"published":133,"publishedAt":432,"seo":433,"shortDescription":434,"status":435,"stem":436,"technologies":437,"__hash__":442},"projectsId\u002Fid\u002Fprojects\u002Fnearby-balikpapan.md","NearBy Balikpapan",{"type":41,"value":344,"toc":411},[345,347,350,354,357,359,362,364,367,369,386,388,391,393,396,398,401,403],[44,346,47],{"id":46},[49,348,349],{},"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,351,353],{"id":352},"peran-saya","Peran Saya",[49,355,356],{},"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,358,55],{"id":54},[49,360,361],{},"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,363,62],{"id":61},[49,365,366],{},"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,368,69],{"id":68},[71,370,371,374,377,380,383],{},[74,372,373],{},"Katalog UMKM dengan pencarian dan filter kategori",[74,375,376],{},"Penemuan usaha terdekat berbasis lokasi",[74,378,379],{},"Halaman profil usaha yang rinci",[74,381,382],{},"Sistem rekomendasi usaha",[74,384,385],{},"Antarmuka responsif untuk perangkat mobile",[44,387,92],{"id":91},[49,389,390],{},"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,392,99],{"id":98},[49,394,395],{},"Menyelaraskan desain dengan data nyata dari backend yang masih berkembang,\nserta menjaga pencarian dan filter tetap responsif saat jumlah usaha\nterdaftar bertambah.",[44,397,106],{"id":105},[49,399,400],{},"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,402,113],{"id":112},[49,404,405,406,410],{},"NearBy Balikpapan sudah berjalan di ",[407,408,409],"code",{},"nearbybalikpapan.com"," dengan UMKM,\nkategori, dan cakupan kecamatan yang terus bertambah, dan masih dalam\npengembangan aktif.",{"title":8,"searchDepth":118,"depth":118,"links":412},[413,414,415,416,417,418,419,420,421],{"id":46,"depth":118,"text":47},{"id":352,"depth":118,"text":353},{"id":54,"depth":118,"text":55},{"id":61,"depth":118,"text":62},{"id":68,"depth":118,"text":69},{"id":91,"depth":118,"text":92},{"id":98,"depth":118,"text":99},{"id":105,"depth":118,"text":106},{"id":112,"depth":118,"text":113},{"src":423,"alt":424},"\u002Fimages\u002Fprojects\u002Fnearby-balikpapan\u002Fcover.webp","Halaman utama NearBy Balikpapan dengan pencarian UMKM dan kartu usaha unggulan","5",null,{"github":428,"demo":429},"https:\u002F\u002Fgithub.com\u002FYoga141\u002FNearBy-Bringing-Busines","https:\u002F\u002Fnearbybalikpapan.com\u002F",{},"\u002Fid\u002Fprojects\u002Fnearby-balikpapan","2026-07-15",{"title":342,"description":8},"Direktori UMKM berbasis lokasi untuk menemukan usaha kecil menengah terdekat di Balikpapan.","IN_PROGRESS","id\u002Fprojects\u002Fnearby-balikpapan",[163,164,438,165,439,440,441],"typescript","tailwind","pinia","three-js","Z0DBfMg9A6ZzZqG_ULiy2jqn2nkRj-yCVTyL-mF4ipg",{"id":444,"title":445,"body":446,"category":128,"cover":516,"description":8,"extension":132,"featured":133,"featuredOrder":519,"gallery":520,"links":533,"meta":536,"navigation":133,"path":537,"placeholder":156,"published":133,"publishedAt":538,"seo":539,"shortDescription":540,"status":160,"stem":541,"technologies":542,"__hash__":544},"projectsId\u002Fid\u002Fprojects\u002Fwinterra.md","WinterRa",{"type":41,"value":447,"toc":506},[448,450,453,455,458,460,463,465,482,484,491,493,496,498,501,503],[44,449,47],{"id":46},[49,451,452],{},"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,454,55],{"id":54},[49,456,457],{},"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,459,62],{"id":61},[49,461,462],{},"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,464,69],{"id":68},[71,466,467,470,473,476,479],{},[74,468,469],{},"Kalkulator budget liburan per kategori pengeluaran",[74,471,472],{},"Checklist packing dengan pelacakan progres tersimpan lokal",[74,474,475],{},"Hitung mundur tahun baru real-time dengan animasi kembang api 3D",[74,477,478],{},"Efek salju berjalan di seluruh halaman",[74,480,481],{},"Kutipan inspiratif harian yang berganti otomatis",[44,483,92],{"id":91},[49,485,486,487,490],{},"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 ",[407,488,489],{},"localStorage"," sehingga\ndata pengguna tidak hilang saat halaman dimuat ulang.",[44,492,99],{"id":98},[49,494,495],{},"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,497,106],{"id":105},[49,499,500],{},"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,502,113],{"id":112},[49,504,505],{},"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":118,"depth":118,"links":507},[508,509,510,511,512,513,514,515],{"id":46,"depth":118,"text":47},{"id":54,"depth":118,"text":55},{"id":61,"depth":118,"text":62},{"id":68,"depth":118,"text":69},{"id":91,"depth":118,"text":92},{"id":98,"depth":118,"text":99},{"id":105,"depth":118,"text":106},{"id":112,"depth":118,"text":113},{"src":517,"alt":518},"\u002Fimages\u002Fprojects\u002Fwinterra\u002Fcover.webp","Halaman utama WinterRa dengan judul bertema salju dan efek partikel 3D","1",[521,524,527,530],{"src":522,"alt":523},"\u002Fimages\u002Fprojects\u002Fwinterra\u002Fabout.webp","Halaman Tentang WinterRa dengan penjelasan konsep dan lini masa proyek",{"src":525,"alt":526},"\u002Fimages\u002Fprojects\u002Fwinterra\u002Fbudget.webp","Kalkulator budget liburan dengan rincian biaya per kategori",{"src":528,"alt":529},"\u002Fimages\u002Fprojects\u002Fwinterra\u002Fpacking.webp","Checklist packing berkategori dengan indikator progres",{"src":531,"alt":532},"\u002Fimages\u002Fprojects\u002Fwinterra\u002Fcountdown.webp","Hitung mundur tahun baru dengan latar bintang dan kembang api 3D",{"github":534,"demo":535},"https:\u002F\u002Fgithub.com\u002FChrisimana\u002Fwinterra","https:\u002F\u002Fwinterra.vercel.app\u002F",{},"\u002Fid\u002Fprojects\u002Fwinterra","2026-01-10",{"title":445,"description":8},"Platform liburan akhir tahun interaktif dengan pengalaman 3D, kalkulator budget, dan checklist packing.","id\u002Fprojects\u002Fwinterra",[163,164,165,439,441,543,440],"gsap","fyV5RYdV8faCC2wV8qeNiJgDS_Nj2tOygojOXVxuYgM",{"id":546,"title":547,"body":548,"category":128,"cover":617,"description":8,"extension":132,"featured":133,"featuredOrder":620,"gallery":621,"links":637,"meta":640,"navigation":133,"path":641,"placeholder":156,"published":133,"publishedAt":642,"seo":643,"shortDescription":644,"status":160,"stem":645,"technologies":646,"__hash__":649},"projectsId\u002Fid\u002Fprojects\u002Fsaferoute.md","SafeRoute",{"type":41,"value":549,"toc":607},[550,552,555,557,560,562,565,567,587,589,592,594,597,599,602,604],[44,551,47],{"id":46},[49,553,554],{},"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,556,55],{"id":54},[49,558,559],{},"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,561,62],{"id":61},[49,563,564],{},"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,566,69],{"id":68},[71,568,569,572,575,578,581,584],{},[74,570,571],{},"Peta risiko interaktif dengan poligon zona bahaya dan jalur evakuasi",[74,573,574],{},"Pemantauan cuaca real-time dan prakiraan 7 hari",[74,576,577],{},"Deteksi risiko otomatis berbasis ambang batas curah hujan",[74,579,580],{},"Notifikasi darurat via push browser saat risiko meningkat",[74,582,583],{},"Grafik analitik risiko curah hujan 24 jam dan riwayat distribusi risiko",[74,585,586],{},"Panduan keselamatan untuk berbagai jenis bencana dan titik pengungsian",[44,588,92],{"id":91},[49,590,591],{},"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,593,99],{"id":98},[49,595,596],{},"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,598,106],{"id":105},[49,600,601],{},"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,603,113],{"id":112},[49,605,606],{},"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":118,"depth":118,"links":608},[609,610,611,612,613,614,615,616],{"id":46,"depth":118,"text":47},{"id":54,"depth":118,"text":55},{"id":61,"depth":118,"text":62},{"id":68,"depth":118,"text":69},{"id":91,"depth":118,"text":92},{"id":98,"depth":118,"text":99},{"id":105,"depth":118,"text":106},{"id":112,"depth":118,"text":113},{"src":618,"alt":619},"\u002Fimages\u002Fprojects\u002Fsaferoute\u002Fcover.webp","Halaman utama SafeRoute menampilkan panel risiko lokal dan status cuaca real-time","2",[622,625,628,631,634],{"src":623,"alt":624},"\u002Fimages\u002Fprojects\u002Fsaferoute\u002Fpeta.webp","Peta risiko interaktif berbasis Leaflet dengan penanda lokasi bencana",{"src":626,"alt":627},"\u002Fimages\u002Fprojects\u002Fsaferoute\u002Fcuaca.webp","Panel cuaca real-time dengan status risiko dan ringkasan tujuh hari",{"src":629,"alt":630},"\u002Fimages\u002Fprojects\u002Fsaferoute\u002Fanalitik.webp","Analitik risiko dengan grafik curah hujan 24 jam dan distribusi risiko",{"src":632,"alt":633},"\u002Fimages\u002Fprojects\u002Fsaferoute\u002Fkeselamatan.webp","Panduan keselamatan berisi prosedur evakuasi untuk berbagai bencana",{"src":635,"alt":636},"\u002Fimages\u002Fprojects\u002Fsaferoute\u002Ftentang.webp","Halaman Tentang SafeRoute dengan daftar fitur utama",{"github":638,"demo":639},"https:\u002F\u002Fgithub.com\u002FChrisimana\u002Fsaferoute","https:\u002F\u002Fsaferoute-drab.vercel.app\u002F#\u002F",{},"\u002Fid\u002Fprojects\u002Fsaferoute","2025-11-05",{"title":547,"description":8},"Platform kesiapsiagaan bencana dengan peta risiko interaktif, cuaca real-time, dan jalur evakuasi.","id\u002Fprojects\u002Fsaferoute",[163,164,165,440,647,648],"leaflet","chart-js","Djlu_s8_jpm8VS9BcRgUS2DzIfkzY_AXnVPUWy_24Ok",{"id":651,"title":652,"body":653,"category":128,"cover":722,"description":8,"extension":132,"featured":133,"featuredOrder":725,"gallery":726,"links":742,"meta":745,"navigation":133,"path":746,"placeholder":156,"published":133,"publishedAt":747,"seo":748,"shortDescription":749,"status":160,"stem":750,"technologies":751,"__hash__":755},"projectsId\u002Fid\u002Fprojects\u002Fdisastersense-ai.md","DisasterSense AI",{"type":41,"value":654,"toc":712},[655,657,660,662,665,667,670,672,692,694,697,699,702,704,707,709],[44,656,47],{"id":46},[49,658,659],{},"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,661,55],{"id":54},[49,663,664],{},"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,666,62],{"id":61},[49,668,669],{},"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,671,69],{"id":68},[71,673,674,677,680,683,686,689],{},[74,675,676],{},"Deteksi lokasi otomatis via GPS atau input manual dengan reverse geocoding",[74,678,679],{},"Pemantauan cuaca real-time (curah hujan, angin, kelembapan, suhu)",[74,681,682],{},"Kalkulasi risiko otomatis dengan tiga level: Aman, Waspada, Bahaya",[74,684,685],{},"Peta risiko interaktif dengan penanda lokasi berwarna",[74,687,688],{},"Edukasi kebencanaan mencakup berbagai jenis bencana alam di Indonesia",[74,690,691],{},"Sistem notifikasi peringatan dengan riwayat pelacakan",[44,693,92],{"id":91},[49,695,696],{},"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,698,99],{"id":98},[49,700,701],{},"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,703,106],{"id":105},[49,705,706],{},"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,708,113],{"id":112},[49,710,711],{},"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":118,"depth":118,"links":713},[714,715,716,717,718,719,720,721],{"id":46,"depth":118,"text":47},{"id":54,"depth":118,"text":55},{"id":61,"depth":118,"text":62},{"id":68,"depth":118,"text":69},{"id":91,"depth":118,"text":92},{"id":98,"depth":118,"text":99},{"id":105,"depth":118,"text":106},{"id":112,"depth":118,"text":113},{"src":723,"alt":724},"\u002Fimages\u002Fprojects\u002Fdisastersense-ai\u002Fcover.webp","Halaman utama DisasterSense AI dengan tombol cek risiko dan ringkasan fitur","3",[727,730,733,736,739],{"src":728,"alt":729},"\u002Fimages\u002Fprojects\u002Fdisastersense-ai\u002Fdashboard.webp","Dashboard risiko dengan status, data cuaca terkini, dan rekomendasi tindakan",{"src":731,"alt":732},"\u002Fimages\u002Fprojects\u002Fdisastersense-ai\u002Fpetarisiko.webp","Peta risiko interaktif dengan penanda lokasi berwarna sesuai tingkat bahaya",{"src":734,"alt":735},"\u002Fimages\u002Fprojects\u002Fdisastersense-ai\u002Fedukasi.webp","Halaman edukasi bencana dengan panduan untuk berbagai jenis bencana alam",{"src":737,"alt":738},"\u002Fimages\u002Fprojects\u002Fdisastersense-ai\u002Fnotifikasi.webp","Halaman notifikasi dengan riwayat peringatan dan pengaturan notifikasi browser",{"src":740,"alt":741},"\u002Fimages\u002Fprojects\u002Fdisastersense-ai\u002Ftentang.webp","Halaman Tentang DisasterSense AI dengan tujuan proyek dan teknologi yang dipakai",{"github":743,"demo":744},"https:\u002F\u002Fgithub.com\u002FChrisimana\u002Fdisastersense-ai","https:\u002F\u002Fdisastersense-ai.vercel.app\u002F",{},"\u002Fid\u002Fprojects\u002Fdisastersense-ai","2025-08-20",{"title":652,"description":8},"Sistem peringatan dini bencana yang menghitung tingkat risiko otomatis dari data cuaca real-time berbasis lokasi.","id\u002Fprojects\u002Fdisastersense-ai",[752,753,438,165,647,754],"react","react-router","zustand","15oE-pDoRUi6860ceFItS3oaJXOuarPN2wmeK6QPGxQ",{"id":757,"title":758,"body":759,"category":128,"cover":831,"description":8,"extension":132,"featured":133,"featuredOrder":834,"gallery":835,"links":851,"meta":854,"navigation":133,"path":855,"placeholder":156,"published":133,"publishedAt":856,"seo":857,"shortDescription":858,"status":160,"stem":859,"technologies":860,"__hash__":861},"projectsId\u002Fid\u002Fprojects\u002Fecotopia-sphere.md","Ecotopia Sphere",{"type":41,"value":760,"toc":821},[761,763,766,768,771,773,776,778,795,797,803,805,808,810,816,818],[44,762,47],{"id":46},[49,764,765],{},"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,767,55],{"id":54},[49,769,770],{},"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,772,62],{"id":61},[49,774,775],{},"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,777,69],{"id":68},[71,779,780,783,786,789,792],{},[74,781,782],{},"12 artikel edukasi terstruktur seputar energi, air, sampah, dan transportasi",[74,784,785],{},"Showcase 10 inovasi teknologi hijau untuk lingkungan perkotaan",[74,787,788],{},"Ruang aksi komunitas untuk berbagi dan menginspirasi aksi lingkungan",[74,790,791],{},"Statistik dampak kolektif yang dianimasikan",[74,793,794],{},"Halaman tentang platform: visi, misi, filosofi, dan makna logo",[44,796,92],{"id":91},[49,798,799,800,802],{},"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 ",[407,801,489],{},", aplikasi ini tidak memerlukan backend sama\nsekali.",[44,804,99],{"id":98},[49,806,807],{},"Menyusun struktur konten edukasi yang cukup banyak (12 artikel, 10 inovasi)\nagar tetap mudah dinavigasi tanpa membuat halaman terasa padat atau\nmembingungkan.",[44,809,106],{"id":105},[49,811,812,813,815],{},"Proyek ini mempertajam kemampuan menyusun arsitektur informasi untuk konten\nedukasi dalam jumlah besar, serta memanfaatkan ",[407,814,489],{}," sebagai\npengganti backend sederhana untuk fitur komunitas berbasis kontribusi\npengguna.",[44,817,113],{"id":112},[49,819,820],{},"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":118,"depth":118,"links":822},[823,824,825,826,827,828,829,830],{"id":46,"depth":118,"text":47},{"id":54,"depth":118,"text":55},{"id":61,"depth":118,"text":62},{"id":68,"depth":118,"text":69},{"id":91,"depth":118,"text":92},{"id":98,"depth":118,"text":99},{"id":105,"depth":118,"text":106},{"id":112,"depth":118,"text":113},{"src":832,"alt":833},"\u002Fimages\u002Fprojects\u002Fecotopia-sphere\u002Fcover.webp","Halaman utama Ecotopia Sphere dengan ilustrasi kota hijau berkelanjutan","4",[836,839,842,845,848],{"src":837,"alt":838},"\u002Fimages\u002Fprojects\u002Fecotopia-sphere\u002Ftentang.webp","Halaman Tentang EcoTopia Sphere dengan visi dan misi platform",{"src":840,"alt":841},"\u002Fimages\u002Fprojects\u002Fecotopia-sphere\u002Ftips.webp","Halaman Tips Hidup Hijau dengan filter kategori dan kartu tip",{"src":843,"alt":844},"\u002Fimages\u002Fprojects\u002Fecotopia-sphere\u002Fartikel.webp","Halaman artikel edukasi tentang hemat energi listrik",{"src":846,"alt":847},"\u002Fimages\u002Fprojects\u002Fecotopia-sphere\u002Finovasicerdas.webp","Halaman Inovasi Cerdas berisi showcase teknologi hijau perkotaan",{"src":849,"alt":850},"\u002Fimages\u002Fprojects\u002Fecotopia-sphere\u002Fsmartaction.webp","Halaman Smart Action Hub dengan formulir berbagi aksi lingkungan",{"github":852,"demo":853},"https:\u002F\u002Fgithub.com\u002FChrisimana\u002Fecotopia-sphere","https:\u002F\u002Fecotopia-sphere.vercel.app\u002F",{},"\u002Fid\u002Fprojects\u002Fecotopia-sphere","2025-05-12",{"title":758,"description":8},"Platform edukasi gaya hidup ramah lingkungan dengan showcase teknologi hijau dan ruang aksi komunitas.","id\u002Fprojects\u002Fecotopia-sphere",[163,164,165,439],"PBtpzwYCbfQ85uWPCUUBuVYzsdFe89b1-DDsiaDzhTk",1789225035043]