Asia/Jakarta

Gallery

A visual showcase of everything I've built and written — projects, case studies, and blog posts all in one place.

🔍

Optimizing Next.js 16: Fixing LCP Warnings, Scroll Behavior, and Real-World Performance Issues in DesignAI

A practical walkthrough of diagnosing and fixing the most common Next.js 16 console warnings — Largest Contentful Paint (LCP) image loading, smooth scroll behavior conflicts, and slow first compile times — based on real issues found while building the DesignAI platform.

Performance Optimization

View Project →

Building DesignAI — An AI-Powered Design Generation Platform with Next.js and FastAPI

A complete breakdown of building a full-featured AI design platform with text-to-image generation, multimodal AI recommendations, semantic search, CLIP deep learning scoring, genetic prompt evolution, fuzzy credit system, and Cloudflare R2 storage — built with Next.js 14, FastAPI, PostgreSQL, and Redis.

View Project →

Building a PPID Information Management System with Odoo 19

A complete breakdown of building a custom Odoo 19 module for PPID (Pejabat Pengelola Informasi dan Dokumentasi) Kota Surabaya. Covers custom addon architecture, QWeb templating, REST API design, projectsflow management for public information requests, objection handling, and dispute resolution — all running on a Dockerized Odoo stack.

View Project →

Building a City Government Website with Next.js and Backend-for-Frontend Architecture

A complete breakdown of building the official Surabaya city government website using Next.js, TypeScript, and a Backend-for-Frontend proxy pattern. Covers BFF architecture, React Query data fetching, Docker deployment, and accessibility features for a public-facing civic platform.

Real-Time ASL Hand Gesture Recognition Using MediaPipe and Geometric Landmark Analysis

A real-time American Sign Language (ASL) recognition system that detects A-Z hand gestures from a webcam using MediaPipe's 21-point hand landmarks and a purely geometric rule-based approach — no neural network, no training data required.

Machine Learning

View Project →

Building a Real-Time Chat Application with File Sharing using React and Node.js

A complete breakdown of building a full-stack real-time chat application with Socket.IO, file sharing, and user management. Covers hybrid backend architecture, real-time event handling, multi-format file uploads, and session persistence.

View Project →

Building a Comprehensive E-Learning Platform with Flutter and Firebase

A complete breakdown of building a full-featured e-learning mobile app with course management, interactive assignments, YouTube integration, e-commerce features, and offline-first architecture using Flutter, Firebase, and SQLite.

Color Image Denoising with Salt-and-Pepper Noise and Median Filter in Python

A hands-on image processing project that simulates Salt-and-Pepper noise on color images and applies a Median Filter to restore them, with PSNR-based evaluation to measure filtering quality — built with Python, OpenCV, and NumPy in Google Colab.

Machine Learning

Building a Cinematic Parallax Scroll Effect with Pure HTML, CSS, and JavaScript

A deep dive into how RamyJungle's hero section was built using five layered PNG assets and vanilla JavaScript to create a cinematic jungle parallax effect — no libraries, no frameworks.

Web Development

View Project →

Building a Scientific Calculator with API Integration in Flutter

An enterprise-grade, polyglot microservices software system designed for massive scalability. G-NEXA orchestrates independent Go, NestJS, and Express services via blazing-fast gRPC communication, robust Redis caching layers, and a centralized Kong API Gateway.

Unity Endless Runner Game

An endless runner game in Unity and C# with procedural generation, coin collection, and an AI eagle that chases the player.

Game Development

A Web App That Helps Indonesian Students Write Formal Messages

A full-stack web application that helps Indonesian students and professionals craft polite, formal messages and letters for academic communication — complete with a politeness scoring system, automatic text correction, and PDF export, built with React.js and Node.js.

Web Development

Understanding Database Fundamentals: From Tables to Transactions

A complete guide to database core concepts — from tables, relationships, and normalization to SQL queries, indexing, and ACID transactions. Everything you need to understand how modern databases store, organize, and retrieve data efficiently.

View Project →

Building a Multi-Layer Parallax Effect with Pure CSS and JavaScript

Wildlife conservation platform for Indonesia's endangered species, featuring parallax scroll effects, an interactive habitat map, and a REST API — all powered by PHP and MySQL.

Full-Stack Web Development

Simulating Dynamic Routing Networks with Cisco Packet Tracer

The complete pipeline from topology design to real-time packet forwarding simulation. Covers RIP, OSPF, and EIGRP configuration, cable selection, IP addressing, and connectivity testing across office and internet café network scenarios.