Skip to content

Software Engineer & systems builder turning ideas into working products; from landing pages and web apps to touchscreen kiosks and the hardware behind them.

01 // OVERVIEW

I build software that makes ideas real.

Portrait of Yovan Gunardio Darmawan

Hello, I'm Yovan. I build things for the world wide web and occasionally things that talk to machines.

  • A little bit of webapp in my life
  • A little bit of vscode by my side
  • A little bit of dashboard all I need
  • A little bit of touchscreen kiosk what I see
  • A little bit of 12v in the sun
  • A little bit of solder all night long
  • A little bit of LED, here I am
  • A little bit of git makes me your guy

I enjoy building things across the stack, from the interface people see to the systems making everything run behind the scenes.

Core Stack

6 core • 27 supporting
  • Laravel
    Backend Architecture
  • React
    UI Engineering
  • Electron
    Desktop & Kiosk OS
  • Astro
    Static & Content Web
  • Google Cloud Platform
    Cloud Infrastructure
  • Docker
    Containerization

Ecosystem & Supporting Tech

  • TypeScript
  • JavaScript
  • PHP
  • C# / .NET
  • Node.js
  • Vite
  • WPF & WebView2
  • Tailwind CSS
  • CSS Modules
  • Zustand
  • WebSockets
  • RESTful APIs
  • Filament
  • SQLite
  • MySQL
  • Google Cloud Storage
  • SNAP API
  • Three.js
  • GSAP
  • Anime.js
  • Leaflet.js
  • Chart.js
  • Git & GitHub
  • GitHub Pages
  • OWASP Guidelines
  • SEO & Metadata
  • Accessibility (a11y)
02 // FEATURED WORKView Full Index→

Things I've built

A collection of projects, and products where I tried to solve a problem, learn something new, or just some SaaS Milti-tenant B2B Ecosystem

HYPE-BOX

A connected photo booth platform, built from kiosk to backend.

An integrated hardware-software pipeline orchestrating physical printers, camera hardware, a touchscreen Electron client, real-time WebSocket telemetry, and cloud fleet management.

Edge → API

Touch & QRIS Payment

Kiosk generates order. Laravel REST API generates dynamic QRIS via SNAP API with webhook confirmation.

Protocol:REST / SNAP
  • ELECTRON
  • LARAVEL
  • SNAP API

Camera Engine

Viewfinder & FX

Camera via USB, captures images with countdown burst. Canvas compositor renders multi-frame layouts and color grading.

Performance:Fast / GPU Accel
  • REACT
  • CANVAS API
  • NODE IPC

Live Reverb & GCS

WebSocket Push & GCS

Composited strips sync to Google Cloud Storage while Laravel Reverb broadcasts real-time telemetry to connected operator dashboards.

Telemetry:WebSocket / WSS
  • REVERB
  • GCS BUCKET
  • SQLITE

STANDALONE APP

Touchscreen Kiosk Client

Electron-based self-service UI for event guests or public spaces. Offline-tolerant state machine, print spooler, and countdown capture loop.

Photobooth Kiosk UI Screenshot
Electron
LAUNCH DEMO

FLEET MANAGER

Vendor Portal & Telemetry

Operator web portal for real-time kiosk fleet telemetry, custom print frame asset designers, coupon engines, and sales analytics.

Vendor Portal UI Screenshot
React • Laravel • ReverbEXPLORE ECOSYSTEM

Other(s)

mcTextureGhost
mcTextureGhost

DESKTOP & GAMEDEV

mcTextureGhost

Minecraft Bedrock texture workspace & ghost asset scanner with live 3D block and entity visualizers.

  • C# / WPF
  • WebView2
  • React 19
  • Three.js
  • GSAP
  • Zustand
mctextureghost.git
VIEW REPO
mcTextureGhost
<yovan
gunardio;
//darmawan/>

DESIGN SYSTEM

Component Library

Design system, typography specimens, color tokens, and interactive UI primitives architected for this Portfolio.

  • Astro v5
  • Tailwind v4
  • UI Tokens
  • Components
component-library
EXPLORE SYSTEM
PROTOTYPE

GIS & SPATIAL

Interactive Map

Geospatial visualization and tracking platform with custom assets and telemetry.

  • Laravel
  • Leaflet.js
  • AJAX
  • Tailwind
interactive-map.git
VIEW REPO
HYPE-BOX

PHOTOBOOTH ASSETS

Frame & Cutout Studio

Interactive photobooth frame cutout layout editor with drag-and-drop slot positioning, and alpha mask detection.

  • React 19
  • Canvas API
  • Layout Telemetry
  • Vector Masks
frame-cutout-studio
EXPLORE STUDIO
HYPE-BOX

IMAGE PROCESSING

Color Grading & Textures

Realtime CSS filter color grading studio with grain, scratches, and custom texture blend mode layering.

  • CSS Filters
  • SVG Noise
  • Blend Modes
  • Color Lab
color-grading-engine
03 // WHAT I CAN BUILD

From simple pages to systems that do stuff.

Landing Pages & Websites

Fast, accessible, and search-optimized websites for products, businesses, campaigns, and personal brands. Built with structured SEO, semantic markup, and responsive UI.

  • Astro
  • Tailwind
  • SEO
  • Accessibility (a11y)
  • Responsive UI

Web Applications

Dashboards, internal tools, SaaS products, MVP projects, authentication, APIs, and the logic behind them.

  • React / Vue
  • Full-Stack
  • Auth & RBAC
  • REST APIs

Interfaces & User Experience

Designing and building user experiences across different platforms, from web interfaces with mobile optimized interface, touchscreen kiosks, and interactive environments.

  • Web Interfaces
  • Mobile Experiences
  • Touchscreen Kiosks
  • Interactive UI

Connected Systems

Realtime communication, payment integrations, cloud services, and software that needs to talk to hardware.

  • WebSockets
  • Payment Gateways
  • Cloud Storage
  • IPC / Hardware I/O
04 // PHILOSOPHY

I build for the thing, not the stack.

Understanding the whole problem before deciding how to solve it. The interface, the backend, the hardware, the weird edge cases; they're all part of the same product.

Start with the actual use case.

Technology is just the tool. I care about what the product needs to accomplish, who is using it, and what could get in their way.

Keep complexity earned.

Not every project needs a giant architecture. I use what the problem calls for, it doesnt have to be over-engineered but still hitting the spot.

Make the pieces work together.

A good interface is only one part of a good product. I like connecting the things behind it: databases, realtime systems, devices, payments, and everything in between; see them in broad, see them in granular level, all of 'em are part of the same product.

Sweat the details that matter.

Loading states, feedback, transitions, edge cases, awkward workflows; the little things are often what separate something that technically works from something that actually feels good to use.

And the final product should make someone say:

"_"

Nothing. That's how I know I built it for the actual use case: when the software gets out of the way, and does what it's supposed to do, it leaves nothing for the user to complain about.

05 // ABOUT

A little bit about myself.

My journey started with modding Java games back when I was in elementary school and Android games in high school, but curiosity pulled me into everything around it, like- designing interfaces, building backend, connecting hardware, and creating intuitive experiences for users.

I enjoy working on projects where software isn't just sitting on a screen, but where it interacts with people, devices, and the real world.

06 // GET IN TOUCH

Have an idea or a project in mind? Let's build it.

Whether you want to build a custom web platform, a touchscreen kiosk, or explore a hardware experiment, I'm always open to discussing new engineering challenges.