[{"data":1,"prerenderedAt":1216},["ShallowReactive",2],{"work-en":3},[4,148,220,288,352,414,481,526,551,576,647,684,720,818,887,964,1031,1091,1165,1190],{"id":5,"title":6,"body":7,"category":119,"date":120,"description":121,"extension":122,"externalUrl":123,"featured":124,"locale":125,"meta":126,"navigation":124,"outcome":127,"path":132,"rank":133,"release":134,"role":135,"screenshot":136,"seo":137,"stack":138,"stem":143,"summary":144,"tier":145,"year":146,"__hash__":147},"projects\u002Fen\u002Fprojects\u002Faruna-dashboard.md","Aruna",{"type":8,"value":9,"toc":109},"minimark",[10,14,17,22,25,29,32,36,71,75,95,99,102,106],[11,12,13],"p",{},"Aruna is a personal product built for a specific pain point I kept noticing: Indonesian retail investors chart stocks without seasonal context — what a market does around election cycles, when sectors rotate, or which way institutional money is actually moving. There is plenty of raw market data available; almost nothing connects it to a decision.",[11,15,16],{},"I built the whole thing myself: product definition, design, backend analytics, frontend, and deployment. It runs as a progressive web app.",[18,19,21],"h2",{"id":20},"the-problem","The problem",[11,23,24],{},"Retail investors in the Indonesian market are pattern-hungry but data-short. Seasonal behavior is buried in years of history, institutional money flow is locked inside broker transaction data, and any analysis tool that adds context usually costs money or hides its data behind a subscription.",[18,26,28],{"id":27},"my-role","My role",[11,30,31],{},"Founder, product owner, and sole engineer. Ambiguous problem, real users, no specification waiting for me — exactly the kind of work I want to be known for.",[18,33,35],{"id":34},"technical-work","Technical work",[37,38,39,47,53,59,65],"ul",{},[40,41,42,46],"li",{},[43,44,45],"strong",{},"Seasonal analysis."," Historical return charts overlaid with political and election-cycle context, plus monthly and quarterly return heatmaps.",[40,48,49,52],{},[43,50,51],{},"Institutional money flow."," A custom scoring engine that pulls broker transaction data to evaluate accumulation versus distribution, exposed as a per-stock score.",[40,54,55,58],{},[43,56,57],{},"MSCI progress tracker."," Calculations estimating IDX stocks' free-float market-cap progress toward MSCI Standard and Small Cap inclusion thresholds.",[40,60,61,64],{},[43,62,63],{},"Local-first data."," Watchlist and portfolio state lives in the browser first, then merges and syncs to Supabase (with row-level security) once a user authenticates.",[40,66,67,70],{},[43,68,69],{},"Interactive visuals."," Relative Rotation Graphs, canvas-based market bubble maps, and TradingView-style candlestick charts.",[18,72,74],{"id":73},"decisions","Decisions",[37,76,77,83,89],{},[40,78,79,82],{},[43,80,81],{},"Local-first sync."," Stock-market watchlists change rapidly and are read constantly. Keeping state local-first made the app feel instant while auth happened in the background.",[40,84,85,88],{},[43,86,87],{},"Obfuscated API envelope."," The app proxies Yahoo Finance and Stockbit endpoints server-side. I wrapped responses in an XOR-obfuscated JSON envelope so the proxy isn't trivially scraped.",[40,90,91,94],{},[43,92,93],{},"Server-side cron for analytics."," Heavy scoring and screening run on scheduled jobs, not in the browser. The client stays a thin, fast interface and hosting stays cheap.",[18,96,98],{"id":97},"constraints","Constraints",[11,100,101],{},"A solo build on a small budget. Everything with recurring cost — analytics compute, data fetching — had to run somewhere cheap, and the frontend had to feel mobile-fast despite loading data-dense charts.",[18,103,105],{"id":104},"outcome","Outcome",[11,107,108],{},"Aruna went from an ambiguous idea (\"investors need seasonal context\") to a deployed PWA with real features and real data flows. It is the strongest demonstration I have of owning a product end to end.",{"title":110,"searchDepth":111,"depth":111,"links":112},"",2,[113,114,115,116,117,118],{"id":20,"depth":111,"text":21},{"id":27,"depth":111,"text":28},{"id":34,"depth":111,"text":35},{"id":73,"depth":111,"text":74},{"id":97,"depth":111,"text":98},{"id":104,"depth":111,"text":105},"Product · Fintech","2026-09-16","A mobile-first stock market analysis platform for Indonesian retail investors — seasonal context, institutional money flow, and local-first state.","md","https:\u002F\u002Farunaa.vercel.app",true,"en",{},[128,129,130,131],"Built seasonal pattern charts, Relative Rotation Graphs, and money flow scoring.","Shipped a local-first watchlist and portfolio synchronized through Supabase RLS.","Wrapped proxied market-data endpoints in an XOR-obfuscated response envelope.","Ran heavy analytics on server-side cron jobs to keep client bundles lean.","\u002Fen\u002Fprojects\u002Faruna-dashboard","1","2025","Full-stack Developer","\u002Fimg\u002Fprojects\u002Faruna.png",{"title":6,"description":121},[139,140,141,142],"Next.js","Supabase","React","PWA","en\u002Fprojects\u002Faruna-dashboard","A solo, data-dense financial product I took from an ambiguous idea to a running PWA — seasonal analysis, institutional money flow tracking, and offline-first sync.","standard",2025,"lxDKAUAVfifucW7R-AvYeEQfugm5ylRbNi4u1dgzwoE",{"id":149,"title":150,"body":151,"category":197,"date":120,"description":198,"extension":122,"externalUrl":199,"featured":200,"locale":125,"meta":201,"navigation":124,"outcome":202,"path":207,"rank":208,"release":209,"role":210,"screenshot":211,"seo":212,"stack":213,"stem":216,"summary":217,"tier":145,"year":218,"__hash__":219},"projects\u002Fen\u002Fprojects\u002Fcuwit-mobile.md","Cuwit",{"type":8,"value":152,"toc":193},[153,156,160,186,190],[11,154,155],{},"Cuwit is an open-source social-posting experiment built in Flutter. The repository presents it as an open-source social app wired to an HTTP API: authentication (login\u002Fregister), a persisted bearer token, profile management, a social feed of posts with image support, likes and comments — with local state kept on-device through shared_preferences.",[18,157,159],{"id":158},"what-it-covers","What it covers",[37,161,162,168,174,180],{},[40,163,164,167],{},[43,165,166],{},"Authentication end to end."," Login and register, token persistence so the session survives restarts, and logout.",[40,169,170,173],{},[43,171,172],{},"Profile."," Retrieval and update of the user's own profile against the API.",[40,175,176,179],{},[43,177,178],{},"Social feed."," Create, edit, and delete posts with images; like\u002Funlike; comment.",[40,181,182,185],{},[43,183,184],{},"Multi-platform client."," A standard Flutter structure, so the app targets Flutter's supported platforms from one client codebase.",[18,187,189],{"id":188},"place-in-the-story","Place in the story",[11,191,192],{},"The Flutter chapter that comes after the hybrid-mobile experiments — a real client-side product with a persistent feed model, built the same year as the production Flutter work. The backend is a separate concern; this project's evidence is strictly the client.",{"title":110,"searchDepth":111,"depth":111,"links":194},[195,196],{"id":158,"depth":111,"text":159},{"id":188,"depth":111,"text":189},"Mobile · Open Source","An open-source social posting experiment built as a Flutter client with authenticated API integration.","https:\u002F\u002Fgithub.com\u002Framadhanep\u002Fcuwit",false,{},[203,205,206],{"Authenticated client flows":204},"login\u002Fregister, bearer-token persistence, profile retrieval and update, and logout.","A social feed with post create\u002Fedit\u002Fdelete, image support, likes\u002Funlikes, and comments.","Local state persistence via shared_preferences across the multi-platform Flutter app.","\u002Fen\u002Fprojects\u002Fcuwit-mobile","10","2023","Mobile Developer","\u002Fimg\u002Fprojects\u002Fcuwit.jpg",{"title":150,"description":198},[214,215],"Flutter","Dart","en\u002Fprojects\u002Fcuwit-mobile","An open-source Flutter app exploring how a social product behaves outside web architecture — HTTP API integration, authentication, profile, a social feed, and local persistence.",2023,"Tx_89bHuu4W--q1ku6xDiAfCL44Pn9c9tk5Ml1gQl8g",{"id":221,"title":222,"body":223,"category":269,"date":120,"description":270,"extension":122,"externalUrl":271,"featured":200,"locale":125,"meta":272,"navigation":124,"outcome":273,"path":277,"rank":278,"release":209,"role":135,"screenshot":279,"seo":280,"stack":281,"stem":285,"summary":286,"tier":145,"year":218,"__hash__":287},"projects\u002Fen\u002Fprojects\u002Fmangan.md","Mangan",{"type":8,"value":224,"toc":264},[225,228,232,235,239,259,261],[11,226,227],{},"Mangan is a UBSI WP2 final project: a mini restaurant administration and ordering system built with CodeIgniter 4 on PHP 7.4\u002F8 — a full-stack application that reaches further than a school CRUD.",[18,229,231],{"id":230},"what-it-does","What it does",[11,233,234],{},"The administration side manages menu categories and menu items, tables and reservations, payment methods, and users, with an authorized manager\u002Fadmin path and password updates. The transaction side carries orders through status workflows and prints receipts. A customer-facing ordering path lets guests order from a cart, view their transaction history, and keep a printable copy of their flow — QR-dependent pieces are wired in alongside.",[18,236,238],{"id":237},"engineering-notes","Engineering notes",[37,240,241,247,253],{},[40,242,243,246],{},[43,244,245],{},"CodeIgniter 4 with modular separation of concerns."," Auth, roles, and ordering are distinct parts of the app rather than one controller.",[40,248,249,252],{},[43,250,251],{},"Two surfaces, one model."," Staff and customer flows read the same menu and transaction data.",[40,254,255,258],{},[43,256,257],{},"Status as a workflow."," Transactions move through explicit states instead of flipping a single flag.",[18,260,189],{"id":188},[11,262,263],{},"Mangan closes the early-restaurant arc: Dyposten and Dyresto practiced the transactional core, and Mangan shows it again with customer-facing ordering and a more modern framework.",{"title":110,"searchDepth":111,"depth":111,"links":265},[266,267,268],{"id":230,"depth":111,"text":231},{"id":237,"depth":111,"text":238},{"id":188,"depth":111,"text":189},"Business Applications · Restaurant","A restaurant administration and ordering system built with CodeIgniter 4 — menu management, tables, payment methods, transactions, user roles, and customer-facing ordering.","https:\u002F\u002Fgithub.com\u002Framadhanep\u002Fwp2-mangan",{},[274,275,276],"Role separation between manager\u002Fadmin authorization and customer-facing ordering.","Menu categories and CRUD, table\u002Freservation management, and payment-method configuration.","Transaction management with status workflows, customer ordering with a cart, and printable transaction records.","\u002Fen\u002Fprojects\u002Fmangan","11","\u002Fimg\u002Fprojects\u002Fmangan.jpg",{"title":222,"description":270},[282,283,284],"CodeIgniter 4","PHP","MySQL","en\u002Fprojects\u002Fmangan","A UBSI WP2 final project — a mini restaurant administration and ordering system covering menu management, tables, payment methods, transactions, roles, cart-based customer ordering, and printable records.","qoW5fS2ntrmKUy-0pYBPm9T0tO3Ysa7rs_kfEBG2Zgw",{"id":289,"title":290,"body":291,"category":333,"date":120,"description":334,"extension":122,"externalUrl":335,"featured":200,"locale":125,"meta":336,"navigation":124,"outcome":337,"path":341,"rank":342,"release":343,"role":135,"screenshot":344,"seo":345,"stack":346,"stem":348,"summary":349,"tier":145,"year":350,"__hash__":351},"projects\u002Fen\u002Fprojects\u002Fdyposten.md","Dyposten",{"type":8,"value":292,"toc":328},[293,296,298,301,303,323,325],[11,294,295],{},"Dyposten is a point-of-sale and inventory application built in the competency-exam context of LSP SMKN 10 Jakarta in 2019. Laravel 6.2 backs a role-based workflow that runs from store administration down to printed invoices.",[18,297,231],{"id":230},[11,299,300],{},"A store board manages the administration side — products, categories, and ingredients — while stock tracks the incoming flow of goods. Transactions run through checkout and produce invoices, with print and report workflows for the paper side of a small business. Currency and PPN\u002Ftax handling, units, and profit percentage make the price math explicit instead of hard-coded.",[18,302,238],{"id":237},[37,304,305,311,317],{},[40,306,307,310],{},[43,308,309],{},"Role-based access control."," Different responsibilities see and touch different parts of the system.",[40,312,313,316],{},[43,314,315],{},"Stock as a flow, not a snapshot."," Incoming stock is recorded, giving transactions a defensible inventory trail.",[40,318,319,322],{},[43,320,321],{},"Print-first output."," Barcode and PDF packages underpin the checkout and reporting side.",[18,324,189],{"id":188},[11,326,327],{},"Part of the 2019–2020 early business-applications arc: this is where the fundamentals of transactional systems — roles, stock, invoices, reports — were practiced before production work.",{"title":110,"searchDepth":111,"depth":111,"links":329},[330,331,332],{"id":230,"depth":111,"text":231},{"id":237,"depth":111,"text":238},{"id":188,"depth":111,"text":189},"Business Applications · POS","A role-based point-of-sale and inventory application — store administration, products, stock flows, transactions, checkout, and invoicing with print workflows.","https:\u002F\u002Fgithub.com\u002Framadhanep\u002Fdyposten",{},[338,339,340],"Role-based access across store administration, product management, stock, and transactions.","Product and stock-incoming flows with currencies, PPN\u002Ftax, units, profit percentage, categories, and ingredients.","Checkout, invoice, and print\u002Freport workflows backed by barcode and PDF packages.","\u002Fen\u002Fprojects\u002Fdyposten","12","Nov 2019","\u002Fimg\u002Fprojects\u002Fdyposten.jpg",{"title":290,"description":334},[347,284,283],"Laravel","en\u002Fprojects\u002Fdyposten","A POS system built in a competency-exam context at LSP SMKN 10 Jakarta — roles across store administration, product and stock management, transactions, checkout, and invoicing.",2019,"kmPFK-VZZnILtQDiMXzqRijCelM_864Ceu-yywkAAKk",{"id":353,"title":354,"body":355,"category":269,"date":120,"description":397,"extension":122,"externalUrl":398,"featured":200,"locale":125,"meta":399,"navigation":124,"outcome":400,"path":404,"rank":405,"release":406,"role":135,"screenshot":407,"seo":408,"stack":409,"stem":410,"summary":411,"tier":145,"year":412,"__hash__":413},"projects\u002Fen\u002Fprojects\u002Fdyresto.md","Dyresto",{"type":8,"value":356,"toc":392},[357,360,362,365,367,387,389],[11,358,359],{},"Dyresto is a restaurant cashier application built with Laravel 6.2 during a pre-UKK (competency-exam) challenge — a delivery-constrained build that forced the system to stay focused on the transaction loop: menu, order, cashier, receipt.",[18,361,231],{"id":230},[11,363,364],{},"Restaurant information, food categories, and a menu anchor the product side; tables and a cart feed into orders. Roles split the work — administrator, waiter\u002Fcashier, and a customer-facing path — and completed orders land in transactions and a transaction history, with print and reporting workflows for the close of service.",[18,366,238],{"id":237},[37,368,369,375,381],{},[40,370,371,374],{},[43,372,373],{},"Roles map the restaurant floor."," Order-taking, cashiering, and administration are distinct responsibilities in the data model.",[40,376,377,380],{},[43,378,379],{},"Cart to transaction, end to end."," The order flow passes through the cart and ends at a recorded, reportable transaction.",[40,382,383,386],{},[43,384,385],{},"A tight constraint kept the scope honest."," Built as a timed challenge, the system demonstrates the transaction core without invented extras.",[18,388,189],{"id":188},[11,390,391],{},"Alongside Dyposten, the 2019–2020 period is the early transactional-systems chapter: menus, tables, cart, roles, and printed output — the building blocks of every transactional product that followed.",{"title":110,"searchDepth":111,"depth":111,"links":393},[394,395,396],{"id":230,"depth":111,"text":231},{"id":237,"depth":111,"text":238},{"id":188,"depth":111,"text":189},"A restaurant transaction system built under a tight delivery constraint — role-based workflows spanning menus, tables, cart, ordering, cashier operations, transactions, and reporting.","https:\u002F\u002Fgithub.com\u002Framadhanep\u002Fdyresto",{},[401,402,403],"Role-based flows for administrator, waiter, and cashier responsibilities, plus a customer-facing role.","Menu and table management with cart and order flow handing off to cashier transactions.","Transaction history and print\u002Freporting workflows.","\u002Fen\u002Fprojects\u002Fdyresto","13","Feb 2020","\u002Fimg\u002Fprojects\u002Fdyresto.jpg",{"title":354,"description":397},[347,284,283],"en\u002Fprojects\u002Fdyresto","A Laravel restaurant cashier system from the early business-applications arc — role-based ordering and cashier flows, transaction history, and reporting.",2020,"-OVh5xny7KmDdJor8xT-1nE-GyE8XGfmujWOPwDHiXA",{"id":415,"title":416,"body":417,"category":459,"date":120,"description":460,"extension":122,"externalUrl":461,"featured":200,"locale":125,"meta":462,"navigation":124,"outcome":463,"path":467,"rank":468,"release":469,"role":135,"screenshot":470,"seo":471,"stack":472,"stem":478,"summary":479,"tier":145,"year":412,"__hash__":480},"projects\u002Fen\u002Fprojects\u002Fdygoo.md","Dygoo",{"type":8,"value":418,"toc":454},[419,422,424,427,429,449,451],[11,420,421],{},"Dygoo is a realtime chat experiment built as two deliberately separated parts: a static Vue frontend and a standalone Node.js server. It was a playground for the parts of web engineering that don't live in a request-response cycle.",[18,423,231],{"id":230},[11,425,426],{},"The frontend is a Nuxt 2 app built for static output with SSR disabled — the chat UI holds its username and room in cookies, with the chat and room components structured as Vue components. The companion server (Express + Socket.IO) tracks rooms and their users, broadcasts messages, and manages join and leave lifecycle, keeping users in an in-memory registry for presence.",[18,428,238],{"id":237},[37,430,431,437,443],{},[40,432,433,436],{},[43,434,435],{},"Frontend and server split by contract."," The client is static; the server is a separate deployment. Rooms and broadcasts cross the boundary over WebSockets.",[40,438,439,442],{},[43,440,441],{},"Presence is realtime state."," Joins, leaves, and disconnects are explicitly handled by the server, not assumed.",[40,444,445,448],{},[43,446,447],{},"Cookie-based client state."," The UI keeps enough state client-side to stay static-friendly.",[18,450,189],{"id":188},[11,452,453],{},"A 2020 experiment that connected an interest in interactive web systems — event-driven thinking that sits under later production work on asynchronous and message-driven backends.",{"title":110,"searchDepth":111,"depth":111,"links":455},[456,457,458],{"id":230,"depth":111,"text":231},{"id":237,"depth":111,"text":238},{"id":188,"depth":111,"text":189},"Realtime · Experiment","A realtime chat experiment — a static Nuxt frontend paired with a separate Express\u002FSocket.IO server for room-based messaging and presence.","https:\u002F\u002Fdygoo.netlify.app",{},[464,465,466],"A static Nuxt 2 frontend (SSR disabled) with cookie-based username and room state driving the chat interface.","A companion Express\u002FSocket.IO server handling room joins, user presence, join\u002Fleave lifecycle, and message broadcasts.","Deployed as a live demo on Netlify.","\u002Fen\u002Fprojects\u002Fdygoo","14","2020","\u002Fimg\u002Fprojects\u002Fdygoo.jpg",{"title":416,"description":460},[473,474,475,476,477],"Nuxt","Vue","Node.js","Express","Socket.IO","en\u002Fprojects\u002Fdygoo","A realtime experiment in two parts — a static Nuxt 2 frontend keeping room state in cookies, talking to a standalone Express\u002FSocket.IO server that manages rooms, presence, and message broadcasts.","-QtzMcl18WFYDZJuUyfEk8KnwkrN-ZddbXJHwKWNzmo",{"id":482,"title":483,"body":484,"category":510,"date":120,"description":511,"extension":122,"externalUrl":512,"featured":200,"locale":125,"meta":513,"navigation":124,"outcome":514,"path":518,"rank":519,"release":469,"role":135,"screenshot":520,"seo":521,"stack":522,"stem":523,"summary":524,"tier":145,"year":412,"__hash__":525},"projects\u002Fen\u002Fprojects\u002Findohp-rekber.md","INDOHP Rekber",{"type":8,"value":485,"toc":506},[486,494,496,499,503],[11,487,488,489,493],{},"Rekber — short for ",[490,491,492],"em",{},"rekening bersama"," (escrow) — is a transaction pattern used in Indonesian communities where trust between buyers and sellers is not guaranteed by the platform. The problem is straightforward: when money changes hands but goods or services are still in progress, both parties need to see exactly where the transaction stands.",[18,495,21],{"id":20},[11,497,498],{},"In community marketplaces, a clear transaction flow substitutes for institutional trust. Without it, both parties guess — which is the opposite of a useful product.",[18,500,502],{"id":501},"what-i-built","What I built",[11,504,505],{},"A web escrow application combining a Nuxt frontend and a Laravel backend. The work centered on transaction status: modeling the stages a payment goes through, making those stages visible to both parties, and separating status records from the interface so admins could audit the flow without hunting through UI state.",{"title":110,"searchDepth":111,"depth":111,"links":507},[508,509],{"id":20,"depth":111,"text":21},{"id":501,"depth":111,"text":502},"Freelance · Web","Escrow web application for a community marketplace — built to make transaction status and trust visible by default.","https:\u002F\u002Findohp.org",{},[515,516,517],"Designed transaction states so progress is readable at every step.","Separated status records from the UI so admins can read the process clearly.","Combined a Nuxt frontend with a Laravel backend and MySQL data layer.","\u002Fen\u002Fprojects\u002Findohp-rekber","15","\u002Fimg\u002Fprojects\u002Findohp-rekber.png",{"title":483,"description":511},[473,347,284],"en\u002Fprojects\u002Findohp-rekber","An escrow system for community transactions where clear status and reliable flow were the product.","_9AQJxK_A3-BzB6qaWHONoLKvpvmGAc-nFIO8dSAcxE",{"id":527,"title":528,"body":529,"category":510,"date":120,"description":536,"extension":122,"externalUrl":537,"featured":200,"locale":125,"meta":538,"navigation":124,"outcome":539,"path":543,"rank":544,"release":469,"role":135,"screenshot":545,"seo":546,"stack":547,"stem":548,"summary":549,"tier":145,"year":412,"__hash__":550},"projects\u002Fen\u002Fprojects\u002Findohp-katalog.md","INDOHP Katalog",{"type":8,"value":530,"toc":534},[531],[11,532,533],{},"product catalog website device seller, built on Nuxt Laravel backend. product isn't complicated — list page, detail page, data behind — but simplicity exactly demanded discipline. catalog succeeds by scannable, fast load, easy update. fails structure maintenance painful. list\u002Fdetail separation lightweight Nuxt frontend right call here: catalog read-heavy surface, every unnecessary rendering cycle takes time user doesn't want spend.",{"title":110,"searchDepth":111,"depth":111,"links":535},[],"Product catalog device seller — clean list\u002Fdetail structure on Nuxt frontend.","https:\u002F\u002Fkatalog.indohp.co.id",{},[540,541,542],"Designed list\u002Fdetail structure separates browsing product detail.","Built Nuxt frontend fast, lightweight catalog experience.","Managed product data through Laravel backend MySQL.","\u002Fen\u002Fprojects\u002Findohp-katalog","16","\u002Fimg\u002Fprojects\u002Fproduct-catalog.jpg",{"title":528,"description":536},[473,347,284],"en\u002Fprojects\u002Findohp-katalog","product catalog separated browse detail kept frontend fast load easy scan.","BQu6vh68lBml9bv5k-meLdHtWj0LeiCCptUSIjZBzB4",{"id":552,"title":553,"body":554,"category":510,"date":120,"description":561,"extension":122,"externalUrl":562,"featured":200,"locale":125,"meta":563,"navigation":124,"outcome":564,"path":568,"rank":569,"release":209,"role":135,"screenshot":570,"seo":571,"stack":572,"stem":573,"summary":574,"tier":145,"year":218,"__hash__":575},"projects\u002Fen\u002Fprojects\u002Fmetalogika.md","Metalogika",{"type":8,"value":555,"toc":559},[556],[11,557,558],{},"company profile often simplest class web project — exactly why it's good test developer's taste. client needs services presented cleanly, content structured, page easy update. bad developer builds hard-to-maintain theme. good developer builds something light, readable, appropriate. Metalogika Laravel company profile: clear content, stable page structure, restrained visual treatment. interface stays quiet so the services speak.",{"title":110,"searchDepth":111,"depth":111,"links":560},[],"Company profile website built on Laravel — clean, maintainable, focused on presenting services clearly.","null",{},[565,566,567],"Structured public-facing content so service information scannable.","Built on Laravel keep site easy extend maintain.","Kept interface restrained so information, not decoration, does work.","\u002Fen\u002Fprojects\u002Fmetalogika","17","\u002Fimg\u002Fprojects\u002Fmetalogika.jpg",{"title":553,"description":561},[347],"en\u002Fprojects\u002Fmetalogika","practical company-profile project where clear content structure easy maintenance design constraints.","fkLQg6dwsiwbLpIfGWIXwU140W2kaOmXpSvVhk-rPDs",{"id":577,"title":578,"body":579,"category":626,"date":120,"description":627,"extension":122,"externalUrl":628,"featured":200,"locale":125,"meta":629,"navigation":124,"outcome":630,"path":634,"rank":635,"release":636,"role":637,"screenshot":638,"seo":639,"stack":640,"stem":643,"summary":644,"tier":645,"year":350,"__hash__":646},"projects\u002Fen\u002Fprojects\u002Fdisposisi.md","BNPB Disposisi",{"type":8,"value":580,"toc":621},[581,584,586,594,596,616,618],[11,582,583],{},"Disposisi is the third system from the BNPB internship, and the least \"framework-y\" of the three: a custom PHP application with session authentication, written directly against the correspondence work of the office.",[18,585,231],{"id":230},[11,587,588,589,593],{},"A dashboard sits over a persuratan (correspondence) module that tracks incoming-mail dispositions — the ",[590,591,592],"code",{},"disposisi surat"," routing that says who handles a document and where it sits — plus document status. Around the core sit user administration, profile management, and a search interface for records.",[18,595,238],{"id":237},[37,597,598,604,610],{},[40,599,600,603],{},[43,601,602],{},"Session-based auth."," A hand-rolled login backed by a user lookup database — no framework auth layer, which is exactly what makes it an early-era artifact.",[40,605,606,609],{},[43,607,608],{},"Record UX borrowed from the admin web."," DataTables for searchable tables, Select2 for friendly select fields, Summernote for rich content, date-range pickers for filtering.",[40,611,612,615],{},[43,613,614],{},"Bootstrap 4 shell."," The visual layer is the standard admin toolkit of the time.",[18,617,189],{"id":188},[11,619,620],{},"It is deliberately archived: a stepping-stone project that shows the correspondence-workflow context of the internship, one of the three internal systems built in those three months.",{"title":110,"searchDepth":111,"depth":111,"links":622},[623,624,625],{"id":230,"depth":111,"text":231},{"id":237,"depth":111,"text":238},{"id":188,"depth":111,"text":189},"Government · Correspondence (Archive)","An early correspondence-management application for BNPB — tracking mail dispositions and document status with search, user administration, and a dashboard.","https:\u002F\u002Fgithub.com\u002Framadhanep\u002Fbnpb-disposisi",{},[631,632,633],"Session-based authentication with user lookup against the application database.","A persuratan (correspondence) module tracking dispositions and document status.","Search and record UX built on DataTables, Select2, and Summernote, with date-range filtering.","\u002Fen\u002Fprojects\u002Fdisposisi","18","Mar 2019","Web Developer (Internship)","\u002Fimg\u002Fprojects\u002Fdisposisi.jpg",{"title":578,"description":627},[283,284,641,642],"Bootstrap","jQuery","en\u002Fprojects\u002Fdisposisi","A custom PHP correspondence system built during the BNPB internship — session-based login, user and profile management, search, and a dashboard over document disposition records.","archive","dwhE3LApvenOFJCJhhM30Lr4901EYSJS5oYFGe9Re5g",{"id":648,"title":649,"body":650,"category":663,"date":120,"description":664,"extension":122,"externalUrl":665,"featured":200,"locale":125,"meta":666,"navigation":124,"outcome":667,"path":671,"rank":672,"release":673,"role":210,"screenshot":674,"seo":675,"stack":676,"stem":681,"summary":682,"tier":645,"year":412,"__hash__":683},"projects\u002Fen\u002Fprojects\u002Fdychord.md","Dychord",{"type":8,"value":651,"toc":660},[652,655,657],[11,653,654],{},"Dychord is an early hybrid-mobile experiment: a guitar-chord reference built with Apache Cordova. The app wraps a custom HTML\u002FCSS\u002FJS interface in the Cordova shell, keeps chord data in SQLite for offline reading, and ships with Android platform folders and a splash screen — a first full pass at packaging a web frontend as a distributable mobile app.",[18,656,189],{"id":188},[11,658,659],{},"Archived as an experiments-era artifact: one of the stops on the hybrid mobile path, a few years before the Flutter work that came later. It is a demonstration of the mechanics — shell, local data, platform packaging — more than a finished product.",{"title":110,"searchDepth":111,"depth":111,"links":661},[662],{"id":188,"depth":111,"text":189},"Mobile · Experiment (Archive)","An early hybrid mobile experiment — a guitar-chord reference app built with Cordova.","https:\u002F\u002Fgithub.com\u002Framadhanep\u002Fdychord",{},[668,669,670],"A hybrid mobile app built on Cordova with custom HTML\u002FCSS\u002FJavaScript UI.","Chord data stored and read from local SQLite storage.","A splash screen and platform folders for Android-style distribution.","\u002Fen\u002Fprojects\u002Fdychord","19","Mar 2020","\u002Fimg\u002Fprojects\u002Fdychord.jpg",{"title":649,"description":664},[677,678,679,680],"Cordova","HTML","CSS","JavaScript","en\u002Fprojects\u002Fdychord","A Cordova app wrapping a custom HTML\u002FCSS\u002FJS interface and SQLite data into a portable guitar-chord reference.","1PtqmPabN1wvKmF81go8tkVpLc7_2E5XKK3y4u-9Cw8",{"id":685,"title":686,"body":687,"category":700,"date":120,"description":701,"extension":122,"externalUrl":702,"featured":200,"locale":125,"meta":703,"navigation":124,"outcome":704,"path":708,"rank":709,"release":710,"role":711,"screenshot":712,"seo":713,"stack":714,"stem":716,"summary":717,"tier":645,"year":718,"__hash__":719},"projects\u002Fen\u002Fprojects\u002Fvicare.md","Vicare",{"type":8,"value":688,"toc":697},[689,692,694],[11,690,691],{},"Vicare is an early frontend experiment: a virtual healthcare landing-page template that explores what a telehealth product interface could look like. It is a design exercise, not a healthcare product — the value sits in the sections it experiments with: doctor search, online pharmacy, consultation, emergency care, and health-data tracking concepts, styled responsively with Tailwind CSS.",[18,693,189],{"id":188},[11,695,696],{},"Archived with the other frontend experiments: a record of the 2021 period spent composing product interfaces before the modern product-engineering era.",{"title":110,"searchDepth":111,"depth":111,"links":698},[699],{"id":188,"depth":111,"text":189},"Frontend · Experiment (Archive)","An early frontend\u002Fdesign experiment exploring a virtual healthcare product interface.","https:\u002F\u002Fgithub.com\u002Framadhanep\u002Fvicare",{},[705,706,707],"A responsive, Tailwind-based landing page exploring a virtual healthcare product interface.","Concept sections for doctor search, online pharmacy, consultation, emergency care, and health-data tracking.","Published as a GitHub Pages live demo.","\u002Fen\u002Fprojects\u002Fvicare","20","2021","Frontend Developer","\u002Fimg\u002Fprojects\u002Fvicare.jpg",{"title":686,"description":701},[678,679,715],"Tailwind CSS","en\u002Fprojects\u002Fvicare","A responsive landing-page experiment shaped around healthcare UI concepts — doctor search, online pharmacy, consultation, emergency care, and health-data tracking.",2021,"fAyHUvIET9XhqMXhuagYu4WvQAXuliWFUTpF73Q-Re4",{"id":721,"title":722,"body":723,"category":791,"date":120,"description":792,"extension":122,"externalUrl":793,"featured":200,"locale":125,"meta":794,"navigation":124,"outcome":795,"path":800,"rank":801,"release":802,"role":135,"screenshot":803,"seo":804,"stack":805,"stem":814,"summary":815,"tier":145,"year":816,"__hash__":817},"projects\u002Fen\u002Fprojects\u002Ffastvest.md","Fastvest",{"type":8,"value":724,"toc":786},[725,728,732,735,739,742,756,760],[11,726,727],{},"Fastvest is a local-first portfolio tracker. You open the app, your portfolio value and unrealized P&L are on screen immediately, and you can refresh market prices without creating an account — and without sending your portfolio anywhere. It is monitoring software for your own holdings, not financial advice.",[18,729,731],{"id":730},"the-privacy-model","The privacy model",[11,733,734],{},"Portfolio configuration lives only in browser localStorage. It is never persisted server-side, never logged, and never sent to analytics. Clearing browser storage removes your local portfolio unless you exported a backup. The only thing that travels is a market-data request; the server acts as a data gateway, not a portfolio store.",[18,736,738],{"id":737},"how-it-works","How it works",[11,740,741],{},"Holdings are entered and edited client-side — position count and cost basis per symbol, with no cost to record — and the portfolio and price data can be imported and exported as JSON. The UI shows total value, cost basis, unrealized P&L, today's P&L, an allocation view, and a sortable holdings table. A 60-second refresh cycle runs quotes through a stale-while-refresh strategy: cached prices render instantly while stale data revalidates in the background instead of blocking the screen.",[11,743,744,745,748,749,748,752,755],{},"Market data flows through Nitro API routes (",[590,746,747],{},"\u002Fapi\u002Fquotes",", ",[590,750,751],{},"\u002Fapi\u002Fsearch",[590,753,754],{},"\u002Fapi\u002Fchart","), which wrap Yahoo Finance with timeout handling, caching, and error normalization. Because the browser never talks to the data provider directly, quotes stay resilient to the flakiness of a third-party endpoint.",[18,757,759],{"id":758},"engineering-decisions","Engineering decisions",[37,761,762,768,774,780],{},[40,763,764,767],{},[43,765,766],{},"Separating ownership from retrieval."," Portfolio data and market data are different trust domains; keeping one client-side and the other server-side makes each boundary small and testable.",[40,769,770,773],{},[43,771,772],{},"Shared validation."," Zod schemas are defined once and used on both sides, so client and server cannot drift on what a quote or search result looks like.",[40,775,776,779],{},[43,777,778],{},"Offline as default behavior."," PWA application-shell caching means the app shell loads offline and previously cached prices remain visible.",[40,781,782,785],{},[43,783,784],{},"Testing the surface."," Unit tests cover financial calculations and formatting; Playwright covers the flows that matter — launch, add a holding, refresh quotes.",{"title":110,"searchDepth":111,"depth":111,"links":787},[788,789,790],{"id":730,"depth":111,"text":731},{"id":737,"depth":111,"text":738},{"id":758,"depth":111,"text":759},"Open Source · FinTech · Privacy","Local-first portfolio tracker — open the app, see portfolio value and P&L, refresh market prices — no account and no server-side portfolio database.","https:\u002F\u002Ffastvest.vercel.app",{},[796,797,798,799],"Local-first portfolio model — holdings live in browser localStorage and are never persisted server-side, logged, or sent to analytics.","Server-side market-data gateway (Nitro API routes wrapping Yahoo Finance) with caching, timeout handling, and normalized errors.","Cached stale-while-refresh quotes plus an offline PWA application shell.","Zod schemas shared between client and server, with Vitest unit tests and Playwright end-to-end tests.","\u002Fen\u002Fprojects\u002Ffastvest","4","2026",null,{"title":722,"description":792},[806,807,808,809,715,810,811,142,812,813],"Nuxt 4","Vue 3","TypeScript","Nitro","shadcn-vue","Yahoo Finance","Vitest","Playwright","en\u002Fprojects\u002Ffastvest","Fast, local-first portfolio tracker built around privacy — holdings stay in browser storage, market data comes from a server-side gateway with cached, stale-while-refresh quotes and offline support.",2026,"3ZYjkaRFwkuvmb0DxuqQqTcVhemjYEOrJk72cloE9ko",{"id":819,"title":820,"body":821,"category":869,"date":120,"description":870,"extension":122,"externalUrl":871,"featured":124,"locale":125,"meta":872,"navigation":124,"outcome":873,"path":879,"rank":801,"release":880,"role":637,"screenshot":881,"seo":882,"stack":883,"stem":884,"summary":885,"tier":145,"year":350,"__hash__":886},"projects\u002Fen\u002Fprojects\u002Frealisasi-anggaran.md","BNPB Realisasi Anggaran",{"type":8,"value":822,"toc":864},[823,826,828,831,833,859,861],[11,824,825],{},"Realisasi Anggaran (\"budget realization\") was the first internal system I shipped at BNPB. It moved a spreadsheet-bound budget workflow into a web application where financial administration could be planned, tracked, and reported.",[18,827,231],{"id":230},[11,829,830],{},"The system is built around the shape of government budget execution: activities and their sub-activities, the budget packages they draw on, and the absorption of those budgets over time. Users record financial absorption against packages, then produce the reports the reporting flow actually consumes.",[18,832,238],{"id":237},[37,834,835,841,847,853],{},[40,836,837,840],{},[43,838,839],{},"Laravel 5.7 on PHP 7.1."," The framework and runtime of the era, chosen for the standard it set on authentication and CRUD structure.",[40,842,843,846],{},[43,844,845],{},"Authentication-backed workflows."," No unauthenticated data paths; all administration flows sit behind Laravel's auth.",[40,848,849,852],{},[43,850,851],{},"Reporting as a first-class output."," Beyond on-screen views, the system exports XLSX and PDF and supports printing — because a report, not a screen, is what finance departments consume.",[40,854,855,858],{},[43,856,857],{},"A hierarchical budget model."," Sub-activities live under activities and packages under sub-activities, so the model mirrors how budget data is aggregated.",[18,860,189],{"id":188},[11,862,863],{},"This is where my government systems work started: model the record before the screen, keep status explicit, and make the output the thing people actually use. The same internship produced the Bantuan BPBD aid-management system and the Disposisi correspondence tracker; the same agency later engaged me as a freelancer on SIRINE.",{"title":110,"searchDepth":111,"depth":111,"links":865},[866,867,868],{"id":230,"depth":111,"text":231},{"id":237,"depth":111,"text":238},{"id":188,"depth":111,"text":189},"Government · Financial Administration","Government financial administration system for BNPB — activity planning, sub-activities, budget packages, financial absorption, and reporting with XLSX\u002FPDF export.","https:\u002F\u002Fgithub.com\u002Framadhanep\u002Fbnpb-realisasi-anggaran",{},[874,876,877],{"Modeled the government budget structure":875},"activities, sub-activities, and budget packages in a hierarchy.","Recorded financial absorption through authenticated CRUD workflows backed by Laravel authentication.",{"Shipped reporting output as first-class results":878},"XLSX and PDF export plus print workflows.","\u002Fen\u002Fprojects\u002Frealisasi-anggaran","Jan 2019","\u002Fimg\u002Fprojects\u002Frealisasi-anggaran.jpg",{"title":820,"description":870},[347,284,283],"en\u002Fprojects\u002Frealisasi-anggaran","A Laravel-based financial administration system built during the BNPB internship — tracking activities, sub-activities, budget packages, and financial absorption with export and reporting workflows.","915p2-6WrCftkIvZ337LJKqfI1aQaGZqAczADW5nfY0",{"id":888,"title":889,"body":890,"category":945,"date":120,"description":946,"extension":122,"externalUrl":947,"featured":200,"locale":125,"meta":948,"navigation":124,"outcome":949,"path":955,"rank":956,"release":802,"role":135,"screenshot":957,"seo":958,"stack":959,"stem":961,"summary":962,"tier":145,"year":816,"__hash__":963},"projects\u002Fen\u002Fprojects\u002Feaseason.md","Easeason",{"type":8,"value":891,"toc":939},[892,895,897,900,904,907,910,914,917,919],[11,893,894],{},"Easeason is a small open-source research visualization tool for exploring how assets have historically moved through the calendar year — across stocks, crypto, and indices, and by U.S. presidential election-cycle windows. It is a research surface, not a prediction engine: it visualizes historical patterns, and it does not claim those patterns forecast the future.",[18,896,231],{"id":230},[11,898,899],{},"Browse a curated set of assets grouped into Crypto, US Stocks, IDX Stocks, and Indices. Open any symbol and Easeason renders a seasonal profile — cumulative return across the calendar year — for a chosen window: all years, election years, pre-election, mid-term, post-election, Trump presidency years, or the current year. Statistical summaries (average, median, standard deviation, win rate, best and worst return, year-end return) sit alongside the chart.",[18,901,903],{"id":902},"engineering","Engineering",[11,905,906],{},"Market data is the hard part. Historical OHLCV is fetched server-side from Yahoo Finance through Nitro API routes, so the browser never talks to the data provider directly. Seasonal calculations run on a daily adjusted-close return basis, classify each year into an election-cycle category, and produce the day-of-year cumulative-return series that both the chart and the export endpoints consume.",[11,908,909],{},"The visualization layer is ECharts: responsive, themed for dark\u002Flight mode, with animated year playback from January 1 through December 31 and speed control.",[18,911,913],{"id":912},"research-export","Research export",[11,915,916],{},"The chart exports as PNG, but the research path also includes Markdown: a per-symbol export of the seasonality context, and an AI-readable Markdown endpoint structured so a language model can consume the seasonal dataset together with its explanation.",[18,918,74],{"id":73},[37,920,921,927,933],{},[40,922,923,926],{},[43,924,925],{},"Server-side data fetching."," Yahoo data stays behind Nitro routes, keeping client logic focused on the dataset rather than the transport.",[40,928,929,932],{},[43,930,931],{},"Calculations as isolated, tested utilities."," The seasonality math lives in server utilities under Vitest coverage, so the algorithm is auditable instead of buried in chart code.",[40,934,935,938],{},[43,936,937],{},"Markdown as an interface."," Making research exportable and machine-readable extends the tool beyond a browser session.",{"title":110,"searchDepth":111,"depth":111,"links":940},[941,942,943,944],{"id":230,"depth":111,"text":231},{"id":902,"depth":111,"text":903},{"id":912,"depth":111,"text":913},{"id":73,"depth":111,"text":74},"Open Source · Research · Data Visualization","Open-source research visualization tool exploring historical market seasonality across stocks, crypto, and indices.","https:\u002F\u002Feaseason.vercel.app",{},[950,951,953,954],"Server-side market-data processing, with historical OHLCV fetched from Yahoo Finance through Nitro API routes.",{"Reusable seasonal calculations":952},"daily adjusted-close returns, day-of-year classification, and election-cycle grouping.","Interactive ECharts visualizations with animated January-to-December playback and PNG export.","AI-readable Markdown endpoint so an LLM can consume the seasonal dataset with its surrounding context.","\u002Fen\u002Fprojects\u002Feaseason","5","\u002Fimg\u002Fprojects\u002Feaseason.png",{"title":889,"description":946},[806,808,474,960,715,810,811,812],"ECharts","en\u002Fprojects\u002Feaseason","Open-source research visualization tool exploring how assets have historically moved across the calendar year — including U.S. presidential election-cycle patterns — with interactive ECharts visualization and reusable seasonal calculations.","ladK8DNJmcOsvqZEike-L8Yofq4jZ2x2RJauNOqznuA",{"id":965,"title":966,"body":967,"category":1015,"date":120,"description":1016,"extension":122,"externalUrl":1017,"featured":124,"locale":125,"meta":1018,"navigation":124,"outcome":1019,"path":1023,"rank":956,"release":1024,"role":637,"screenshot":1025,"seo":1026,"stack":1027,"stem":1028,"summary":1029,"tier":145,"year":350,"__hash__":1030},"projects\u002Fen\u002Fprojects\u002Fbantuan-bpbd.md","BNPB Bantuan BPBD",{"type":8,"value":968,"toc":1010},[969,972,974,977,979,1005,1007],[11,970,971],{},"Bantuan BPBD is the aid-management side of the BNPB internship. Where Realisasi Anggaran tracked money, this system tracks relief: who the regions are, what aid is proposed and delivered, and how it is handed over.",[18,973,231],{"id":230},[11,975,976],{},"The system centers on regional entities — provinces, regencies\u002Fcities, and BPBD formations — and builds aid records on top of them. It covers aid types, aid proposals, and province- and regency-level aid distribution, keeping both detailed records and aggregate views for reporting. A BASTO-related workflow supports the handover paperwork that formalizes delivery, with PDF output for the reporting side.",[18,978,238],{"id":237},[37,980,981,987,993,999],{},[40,982,983,986],{},[43,984,985],{},"Laravel 5.7 with authentication and upload support."," Authorized data entry, with Laravel packages used for the file-handling parts such as BASTO documents.",[40,988,989,992],{},[43,990,991],{},"Entities before records."," The regional model comes first; every aid record references it, which keeps the data structured and searchable.",[40,994,995,998],{},[43,996,997],{},"User management."," Administration includes managing the users who enter and verify aid data.",[40,1000,1001,1004],{},[43,1002,1003],{},"Detail and aggregate."," Individual aid records are captured precisely, while aggregate views answer the reporting questions leadership asks.",[18,1006,189],{"id":188},[11,1008,1009],{},"Together with Realisasi Anggaran and Disposisi, this was the internship chapter about government administration systems: clear data structures, explicit status, and output that matches real reporting needs.",{"title":110,"searchDepth":111,"depth":111,"links":1011},[1012,1013,1014],{"id":230,"depth":111,"text":231},{"id":237,"depth":111,"text":238},{"id":188,"depth":111,"text":189},"Government · Aid Management","Government aid-management system for BPBD relief distribution — regional entities, aid proposals, aid records, and BASTO-related handover workflows with reporting.","https:\u002F\u002Fgithub.com\u002Framadhanep\u002Fbnpb-bantuan-bpbd",{},[1020,1021,1022],"Modeled regional structure — provinces, regencies\u002Fcities, and BPBD formations — as first-class entities.","Handled aid types, aid proposals, and province- and regency-level aid records with detail and aggregate views.","Supported BASTO-related handover workflows plus PDF and reporting output.","\u002Fen\u002Fprojects\u002Fbantuan-bpbd","Feb 2019","\u002Fimg\u002Fprojects\u002Fbantuan-bpbd.jpg",{"title":966,"description":1016},[347,284,283],"en\u002Fprojects\u002Fbantuan-bpbd","A Laravel aid-management system built during the BNPB internship — regional entities, aid types and proposals, province- and regency-level aid records, BASTO-related handover work, and reporting.","s2k39BbRAH6Kf1ppk-D9Yr0XlGkTSIsNPBD2urhiqf0",{"id":1032,"title":1033,"body":1034,"category":1074,"date":120,"description":1075,"extension":122,"externalUrl":871,"featured":200,"locale":125,"meta":1076,"navigation":124,"outcome":1077,"path":1082,"rank":1083,"release":1084,"role":1085,"screenshot":881,"seo":1086,"stack":1087,"stem":1088,"summary":1089,"tier":145,"year":350,"__hash__":1090},"projects\u002Fen\u002Fprojects\u002Fbnpb-internship.md","BNPB Administration Tools",{"type":8,"value":1035,"toc":1070},[1036,1039,1043,1063,1067],[11,1037,1038],{},"During a three-month internship at BNPB Indonesia, I built three internal administration web applications. They are early work — Laravel + MySQL CRUD systems — but they taught lessons that show up in everything since: how government data flows, why clean structures matter, and how to ship something internal users actually depend on.",[18,1040,1042],{"id":1041},"the-applications","The applications",[37,1044,1045,1051,1057],{},[40,1046,1047,1050],{},[43,1048,1049],{},"Realisasi Anggaran"," — recording budget realization and supporting the reporting flow.",[40,1052,1053,1056],{},[43,1054,1055],{},"Bantuan BPBD"," — recording BPBD aid distribution data with a clean, searchable structure.",[40,1058,1059,1062],{},[43,1060,1061],{},"Disposisi"," — tracking incoming-mail disposition (disposisi surat) and document status.",[18,1064,1066],{"id":1065},"what-they-trained","What they trained",[11,1068,1069],{},"Each one forced the same discipline: understand the reporting need before the form, model the data instead of the screen, and treat status as a first-class part of the flow. These are simple building blocks, but they are the ones production systems are made of. The same agency later engaged me as a freelancer for the SIRINE disaster alert system.",{"title":110,"searchDepth":111,"depth":111,"links":1071},[1072,1073],{"id":1041,"depth":111,"text":1042},{"id":1065,"depth":111,"text":1066},"Government · Internship","Three internal administration applications built during a BNPB internship — budget realization, aid distribution, and mail disposition tracking.",{},[1078,1079,1081],"Replaced spreadsheets with web apps for budget, aid, and document workflows.",{"Learned to model government administration data":1080},"records, statuses, and reporting.","Shipped three internal systems in a three-month internship.","\u002Fen\u002Fprojects\u002Fbnpb-internship","6","Jan – Mar 2019","Web Developer Intern",{"title":1033,"description":1075},[347,284,283],"en\u002Fprojects\u002Fbnpb-internship","Early production-adjacent work at BNPB — three internal web applications that trained the habit of building administration systems with clear data flows.","YPmgNgXpZmm058Qi1lowEYc-1-YKEMgCGmEojLOwaDQ",{"id":1092,"title":1093,"body":1094,"category":1150,"date":120,"description":1151,"extension":122,"externalUrl":562,"featured":200,"locale":125,"meta":1152,"navigation":124,"outcome":1153,"path":1157,"rank":1158,"release":209,"role":711,"screenshot":1159,"seo":1160,"stack":1161,"stem":1162,"summary":1163,"tier":145,"year":218,"__hash__":1164},"projects\u002Fen\u002Fprojects\u002Fcek-hoax-pwa.md","CekHoax",{"type":8,"value":1095,"toc":1143},[1096,1099,1101,1104,1106,1109,1111,1122,1124,1138,1140],[11,1097,1098],{},"CekHoax is a fact-checking platform built for UNICEF, where the reader has one job: find the claim, verify the clarification, and get back to their day. The product decision that mattered most was restraint — a public information platform succeeds when nothing gets between the reader and the text.",[18,1100,21],{"id":20},[11,1102,1103],{},"Misinformation is consumed on cheap phones over slow networks, often during moments of urgency. A fact-checking platform that loads heavy pages or buries articles behind busy layouts is, in practice, opting out of the job. The interface had to be fast, scannable, and readable on what its audience actually uses.",[18,1105,28],{"id":27},[11,1107,1108],{},"Frontend developer owning the public-facing interface: page structure, search, article rhythm, and PWA behavior.",[18,1110,35],{"id":34},[37,1112,1113,1116,1119],{},[40,1114,1115],{},"Kept page structure deliberately lightweight so article content stays readable on mobile.",[40,1117,1118],{},"Designed search and article-list interactions to be simple, with no decorative elements competing for attention.",[40,1120,1121],{},"Implemented PWA behavior so repeated visits feel faster.",[18,1123,74],{"id":73},[37,1125,1126,1132],{},[40,1127,1128,1131],{},[43,1129,1130],{},"Remove over add."," On a public-facing content product, a good design decision is often deleting what doesn't help. Visual weight stays on the text.",[40,1133,1134,1137],{},[43,1135,1136],{},"Small components, loose coupling."," The frontend is organized in small enough pieces that lists, cards, and detail pages can evolve without locking each other in place.",[18,1139,105],{"id":104},[11,1141,1142],{},"A public fact-checking frontend that treats readability as the product — the same discipline I bring to every interface, whether it serves a nation or a dashboard.",{"title":110,"searchDepth":111,"depth":111,"links":1144},[1145,1146,1147,1148,1149],{"id":20,"depth":111,"text":21},{"id":27,"depth":111,"text":28},{"id":34,"depth":111,"text":35},{"id":73,"depth":111,"text":74},{"id":104,"depth":111,"text":105},"Government · PWA","Fact-checking PWA for UNICEF — a public interface built around fast search and readable long-form articles.",{},[1154,1155,1156],"Built a lightweight public frontend where clarity outranked decoration.","Made search and article browsing fast on entry-level mobile devices.","Shipped PWA behavior so returning readers load faster.","\u002Fen\u002Fprojects\u002Fcek-hoax-pwa","7","\u002Fimg\u002Fprojects\u002Fcek-hoax.jpg",{"title":1093,"description":1151},[474,142],"en\u002Fprojects\u002Fcek-hoax-pwa","A public-facing fact-checking platform for UNICEF. My focus was the frontend — fast discovery, calm article reading, and an interface light enough for mobile networks.","rWxd4pWCFXOuHvQpjXsDl11xxRn6w9xB2Z5MchmVqgI",{"id":1166,"title":1167,"body":1168,"category":1178,"date":120,"description":1179,"extension":122,"externalUrl":562,"featured":200,"locale":125,"meta":1180,"navigation":124,"outcome":1181,"path":1182,"rank":1183,"release":1184,"role":135,"screenshot":803,"seo":1185,"stack":1186,"stem":1187,"summary":1188,"tier":145,"year":412,"__hash__":1189},"projects\u002Fen\u002Fprojects\u002Fsirine.md","SIRINE",{"type":8,"value":1169,"toc":1176},[1170,1173],[11,1171,1172],{},"SIRINE is a disaster alert system operated by BNPB, Indonesia's national disaster management agency. I built it as part of my freelance engagement with BNPB, which ran across the Feb 2020 – Dec 2023 period recorded on the timeline.",[11,1174,1175],{},"The takeaway from this project belongs as much to the decade as to the code: by the time this engagement ended, I had built a national alert system, a fact-checking platform, and internal administration systems for a government agency — work that runs on real constraints, real users, and real consequences if it fails.",{"title":110,"searchDepth":111,"depth":111,"links":1177},[],"Government · Freelance","Disaster alert system built for BNPB, Indonesia's national disaster management agency.",{},[],"\u002Fen\u002Fprojects\u002Fsirine","8","2020 – 2023",{"title":1167,"description":1179},[],"en\u002Fprojects\u002Fsirine","Freelance work for BNPB Indonesia — the same period that also produced the CekHoax and internal administration systems referenced on the timeline.","wlzInZkvRnhL53TvzyU5UwHGlipyKQhCJEhkmfN49oE",{"id":1191,"title":1192,"body":1193,"category":1200,"date":120,"description":1201,"extension":122,"externalUrl":1202,"featured":200,"locale":125,"meta":1203,"navigation":124,"outcome":1204,"path":1208,"rank":1209,"release":710,"role":711,"screenshot":1210,"seo":1211,"stack":1212,"stem":1213,"summary":1214,"tier":145,"year":718,"__hash__":1215},"projects\u002Fen\u002Fprojects\u002Fuang-kerja.md","Uang Kerja",{"type":8,"value":1194,"toc":1198},[1195],[11,1196,1197],{},"Uang Kerja is financial literacy platform pairs educational content mobile-first PWA. challenge specific content-heavy products: educational material needs enough structure readable, but enough lightness avoid feeling like document viewer. I focused on rhythm content — how paragraphs, headings, practical examples flow on small screen — made PWA behavior smooth enough returning readers land fast.",{"title":110,"searchDepth":111,"depth":111,"links":1199},[],"Product · PWA","Financial literacy PWA Zillennials — structured educational content in mobile-first interface.","https:\u002F\u002Fwww.uangkerja.id",{},[1205,1206,1207],"Structured educational content read cleanly on mobile devices.","Implemented PWA so returning readers load faster.","Kept UI components consistent across varied content types.","\u002Fen\u002Fprojects\u002Fuang-kerja","9","\u002Fimg\u002Fprojects\u002Fuang-kerja.webp",{"title":1192,"description":1201},[474,142],"en\u002Fprojects\u002Fuang-kerja","mobile-first financial education platform where design challenge keeping educational content scannable without losing structure.","yZcDi9i8678s3ZwkDBKM6OYvlvjDTUC4okStNWpzac8",1789641310808]