[{"data":1,"prerenderedAt":862},["ShallowReactive",2],{"site-config":3,"project:finara":36,"related-WEB-finara-en":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":169,"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":267,"placeholder":156,"published":133,"publishedAt":157,"seo":338,"shortDescription":269,"status":160,"stem":270,"technologies":339,"__hash__":272},{"type":41,"value":276,"toc":319},[277,279,281,283,285,287,289,291,303,305,307,309,311,313,315,317],[44,278,175],{"id":174},[49,280,178],{},[44,282,182],{"id":181},[49,284,185],{},[44,286,189],{"id":188},[49,288,192],{},[44,290,196],{"id":195},[71,292,293,295,297,299,301],{},[74,294,201],{},[74,296,204],{},[74,298,207],{},[74,300,210],{},[74,302,213],{},[44,304,217],{"id":216},[49,306,220],{},[44,308,224],{"id":223},[49,310,227],{},[44,312,231],{"id":230},[49,314,234],{},[44,316,238],{"id":237},[49,318,241],{},{"title":8,"searchDepth":118,"depth":118,"links":320},[321,322,323,324,325,326,327,328],{"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},[331,332,333,334,335],{"src":137,"alt":256},{"src":140,"alt":258},{"src":143,"alt":260},{"src":146,"alt":262},{"src":149,"alt":264},{"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},"projectsEn\u002Fen\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,175],{"id":174},[49,348,349],{},"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,351,353],{"id":352},"my-role","My Role",[49,355,356],{},"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,358,182],{"id":181},[49,360,361],{},"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,363,189],{"id":188},[49,365,366],{},"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,368,196],{"id":195},[71,370,371,374,377,380,383],{},[74,372,373],{},"SME catalog with search and category filtering",[74,375,376],{},"Location-based discovery of nearby businesses",[74,378,379],{},"Detailed business profile pages",[74,381,382],{},"Business recommendation system",[74,384,385],{},"Mobile-responsive interface",[44,387,217],{"id":216},[49,389,390],{},"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,392,224],{"id":223},[49,394,395],{},"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,397,231],{"id":230},[49,399,400],{},"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,402,238],{"id":237},[49,404,405,406,410],{},"NearBy Balikpapan is live at ",[407,408,409],"code",{},"nearbybalikpapan.com"," with a growing set of\nbusinesses, categories, and district coverage, and remains under active\ndevelopment.",{"title":8,"searchDepth":118,"depth":118,"links":412},[413,414,415,416,417,418,419,420,421],{"id":174,"depth":118,"text":175},{"id":352,"depth":118,"text":353},{"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":423,"alt":424},"\u002Fimages\u002Fprojects\u002Fnearby-balikpapan\u002Fcover.webp","NearBy Balikpapan homepage with SME search and featured business cards","5",null,{"github":428,"demo":429},"https:\u002F\u002Fgithub.com\u002FYoga141\u002FNearBy-Bringing-Busines","https:\u002F\u002Fnearbybalikpapan.com\u002F",{},"\u002Fen\u002Fprojects\u002Fnearby-balikpapan","2026-07-15",{"title":342,"description":8},"A location-based directory for discovering nearby small and medium enterprises in Balikpapan.","IN_PROGRESS","en\u002Fprojects\u002Fnearby-balikpapan",[163,164,438,165,439,440,441],"typescript","tailwind","pinia","three-js","XgYbe1x55-LVSUsNd2OvIG0WDtEZ_S87vaqp2uu2EcE",{"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},"projectsEn\u002Fen\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,175],{"id":174},[49,451,452],{},"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,454,182],{"id":181},[49,456,457],{},"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,459,189],{"id":188},[49,461,462],{},"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,464,196],{"id":195},[71,466,467,470,473,476,479],{},[74,468,469],{},"Holiday budget calculator broken down by spending category",[74,471,472],{},"Packing checklist with locally persisted progress tracking",[74,474,475],{},"Real-time New Year countdown with a 3D fireworks animation",[74,477,478],{},"Falling snow effect across the whole page",[74,480,481],{},"Rotating daily inspirational quotes",[44,483,217],{"id":216},[49,485,486,487,490],{},"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 ",[407,488,489],{},"localStorage"," so user data\nsurvives a page reload.",[44,492,224],{"id":223},[49,494,495],{},"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,497,231],{"id":230},[49,499,500],{},"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,502,238],{"id":237},[49,504,505],{},"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":118,"depth":118,"links":507},[508,509,510,511,512,513,514,515],{"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":517,"alt":518},"\u002Fimages\u002Fprojects\u002Fwinterra\u002Fcover.webp","WinterRa homepage with a snow-themed title and 3D particle effects","1",[521,524,527,530],{"src":522,"alt":523},"\u002Fimages\u002Fprojects\u002Fwinterra\u002Fabout.webp","WinterRa About page explaining the concept and project timeline",{"src":525,"alt":526},"\u002Fimages\u002Fprojects\u002Fwinterra\u002Fbudget.webp","Holiday budget calculator with a per-category cost breakdown",{"src":528,"alt":529},"\u002Fimages\u002Fprojects\u002Fwinterra\u002Fpacking.webp","Categorized packing checklist with a progress indicator",{"src":531,"alt":532},"\u002Fimages\u002Fprojects\u002Fwinterra\u002Fcountdown.webp","New Year countdown with a starfield and 3D fireworks background",{"github":534,"demo":535},"https:\u002F\u002Fgithub.com\u002FChrisimana\u002Fwinterra","https:\u002F\u002Fwinterra.vercel.app\u002F",{},"\u002Fen\u002Fprojects\u002Fwinterra","2026-01-10",{"title":445,"description":8},"An interactive year-end holiday platform with a 3D experience, budget calculator, and packing checklist.","en\u002Fprojects\u002Fwinterra",[163,164,165,439,441,543,440],"gsap","qVzmxip1vsb_9MZUrfr-HojkUMkHRm0zXWaowmjjURs",{"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},"projectsEn\u002Fen\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,175],{"id":174},[49,553,554],{},"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,556,182],{"id":181},[49,558,559],{},"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,561,189],{"id":188},[49,563,564],{},"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,566,196],{"id":195},[71,568,569,572,575,578,581,584],{},[74,570,571],{},"Interactive risk map with danger-zone polygons and evacuation routing",[74,573,574],{},"Real-time weather monitoring and a 7-day forecast",[74,576,577],{},"Automatic risk detection based on precipitation thresholds",[74,579,580],{},"Emergency browser push notifications when risk escalates",[74,582,583],{},"24-hour precipitation charts and historical risk distribution",[74,585,586],{},"Safety guidance for multiple disaster types and shelter locations",[44,588,217],{"id":216},[49,590,591],{},"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,593,224],{"id":223},[49,595,596],{},"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,598,231],{"id":230},[49,600,601],{},"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,603,238],{"id":237},[49,605,606],{},"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":118,"depth":118,"links":608},[609,610,611,612,613,614,615,616],{"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":618,"alt":619},"\u002Fimages\u002Fprojects\u002Fsaferoute\u002Fcover.webp","SafeRoute homepage showing the local risk panel and real-time weather status","2",[622,625,628,631,634],{"src":623,"alt":624},"\u002Fimages\u002Fprojects\u002Fsaferoute\u002Fpeta.webp","Interactive Leaflet-based risk map with disaster location markers",{"src":626,"alt":627},"\u002Fimages\u002Fprojects\u002Fsaferoute\u002Fcuaca.webp","Real-time weather panel with risk status and a seven-day summary",{"src":629,"alt":630},"\u002Fimages\u002Fprojects\u002Fsaferoute\u002Fanalitik.webp","Risk analytics with a 24-hour precipitation chart and risk distribution",{"src":632,"alt":633},"\u002Fimages\u002Fprojects\u002Fsaferoute\u002Fkeselamatan.webp","Safety guidance with evacuation procedures for multiple disasters",{"src":635,"alt":636},"\u002Fimages\u002Fprojects\u002Fsaferoute\u002Ftentang.webp","SafeRoute About page listing the main features",{"github":638,"demo":639},"https:\u002F\u002Fgithub.com\u002FChrisimana\u002Fsaferoute","https:\u002F\u002Fsaferoute-drab.vercel.app\u002F#\u002F",{},"\u002Fen\u002Fprojects\u002Fsaferoute","2025-11-05",{"title":547,"description":8},"A disaster preparedness platform with an interactive risk map, real-time weather, and evacuation routing.","en\u002Fprojects\u002Fsaferoute",[163,164,165,440,647,648],"leaflet","chart-js","C5NNZEYgF_3Hsi5xul-BVOohL7xylnm_FR3HimVo6TU",{"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},"projectsEn\u002Fen\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,175],{"id":174},[49,658,659],{},"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,661,182],{"id":181},[49,663,664],{},"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,666,189],{"id":188},[49,668,669],{},"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,671,196],{"id":195},[71,673,674,677,680,683,686,689],{},[74,675,676],{},"Automatic location detection via GPS or manual input with reverse geocoding",[74,678,679],{},"Real-time weather monitoring (rainfall, wind speed, humidity, temperature)",[74,681,682],{},"Automatic risk calculation with three levels: Safe, Alert, Danger",[74,684,685],{},"Interactive risk map with color-coded location markers",[74,687,688],{},"Disaster education covering multiple types of natural disasters in Indonesia",[74,690,691],{},"Alert notification system with historical tracking",[44,693,217],{"id":216},[49,695,696],{},"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,698,224],{"id":223},[49,700,701],{},"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,703,231],{"id":230},[49,705,706],{},"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,708,238],{"id":237},[49,710,711],{},"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":118,"depth":118,"links":713},[714,715,716,717,718,719,720,721],{"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":723,"alt":724},"\u002Fimages\u002Fprojects\u002Fdisastersense-ai\u002Fcover.webp","DisasterSense AI homepage with a risk-check button and feature summary","3",[727,730,733,736,739],{"src":728,"alt":729},"\u002Fimages\u002Fprojects\u002Fdisastersense-ai\u002Fdashboard.webp","Risk dashboard with status, current weather data, and action recommendations",{"src":731,"alt":732},"\u002Fimages\u002Fprojects\u002Fdisastersense-ai\u002Fpetarisiko.webp","Interactive risk map with location markers color-coded by danger level",{"src":734,"alt":735},"\u002Fimages\u002Fprojects\u002Fdisastersense-ai\u002Fedukasi.webp","Disaster education page with guidance for multiple types of natural disasters",{"src":737,"alt":738},"\u002Fimages\u002Fprojects\u002Fdisastersense-ai\u002Fnotifikasi.webp","Notifications page with alert history and browser notification settings",{"src":740,"alt":741},"\u002Fimages\u002Fprojects\u002Fdisastersense-ai\u002Ftentang.webp","DisasterSense AI About page with project goals and the technologies used",{"github":743,"demo":744},"https:\u002F\u002Fgithub.com\u002FChrisimana\u002Fdisastersense-ai","https:\u002F\u002Fdisastersense-ai.vercel.app\u002F",{},"\u002Fen\u002Fprojects\u002Fdisastersense-ai","2025-08-20",{"title":652,"description":8},"An early-warning system that calculates automatic disaster risk levels from real-time, location-based weather data.","en\u002Fprojects\u002Fdisastersense-ai",[752,753,438,165,647,754],"react","react-router","zustand","VtRU4LcqLdA9hq8hmp1ZBrNNqx2TiJHA8spV9hXR0T4",{"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},"projectsEn\u002Fen\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,175],{"id":174},[49,764,765],{},"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,767,182],{"id":181},[49,769,770],{},"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,772,189],{"id":188},[49,774,775],{},"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,777,196],{"id":195},[71,779,780,783,786,789,792],{},[74,781,782],{},"12 structured educational articles on energy, water, waste, and transport",[74,784,785],{},"A showcase of 10 green technology innovations for urban environments",[74,787,788],{},"A community action space for sharing and inspiring environmental action",[74,790,791],{},"Animated collective impact statistics",[74,793,794],{},"An about page covering the platform's vision, mission, philosophy, and logo",[44,796,217],{"id":216},[49,798,799,800,802],{},"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",[407,801,489],{},", the app needs no backend at all.",[44,804,224],{"id":223},[49,806,807],{},"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,809,231],{"id":230},[49,811,812,813,815],{},"This project sharpened my ability to design information architecture for a\nlarge volume of educational content, and to use ",[407,814,489],{}," as a simple\nbackend substitute for user-contribution-based community features.",[44,817,238],{"id":237},[49,819,820],{},"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":118,"depth":118,"links":822},[823,824,825,826,827,828,829,830],{"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":832,"alt":833},"\u002Fimages\u002Fprojects\u002Fecotopia-sphere\u002Fcover.webp","Ecotopia Sphere homepage with a sustainable green-city illustration","4",[836,839,842,845,848],{"src":837,"alt":838},"\u002Fimages\u002Fprojects\u002Fecotopia-sphere\u002Ftentang.webp","EcoTopia Sphere About page with the platform's vision and mission",{"src":840,"alt":841},"\u002Fimages\u002Fprojects\u002Fecotopia-sphere\u002Ftips.webp","Green Living Tips page with category filters and tip cards",{"src":843,"alt":844},"\u002Fimages\u002Fprojects\u002Fecotopia-sphere\u002Fartikel.webp","An educational article page about saving electrical energy",{"src":846,"alt":847},"\u002Fimages\u002Fprojects\u002Fecotopia-sphere\u002Finovasicerdas.webp","Smart Innovations page showcasing urban green technologies",{"src":849,"alt":850},"\u002Fimages\u002Fprojects\u002Fecotopia-sphere\u002Fsmartaction.webp","Smart Action Hub page with a form for sharing environmental actions",{"github":852,"demo":853},"https:\u002F\u002Fgithub.com\u002FChrisimana\u002Fecotopia-sphere","https:\u002F\u002Fecotopia-sphere.vercel.app\u002F",{},"\u002Fen\u002Fprojects\u002Fecotopia-sphere","2025-05-12",{"title":758,"description":8},"An eco-friendly lifestyle education platform with a green-technology showcase and a community action space.","en\u002Fprojects\u002Fecotopia-sphere",[163,164,165,439],"-Pvn_v8oJZo-R_SDma-QoPfLyS9RnADQws86jEx4YSk",1789225035043]