Skip to main content
<panpan✱/>
// 00 — hero.tsx
v1.0 Production
AVAILABLE FOR WORK • AVAILABLE FOR WORK •★

PANPAN

>Full-Stack Developer

Senior-minded creative engineer bridging expressive design with solid full-stack architecture. Zero boring templates.

Let's Talk
panpan@devbox:~
1const panpan = {
2 role: "developer",
3 stack: ["Next.js", "TypeScript", "Node.js"],
4 builds: ["web apps", "bots", "automation"],
5 coffee: Infinity,
6 openToWork: true,
7};
CHIPS:
$
FULL-STACK DEVELOPERNEO-BRUTALISMNEXT.JS 15REACT 19TYPESCRIPT STRICTMOTION NERDTAILWIND V4WHATSAPP BOTSSUPABASECLEAN ARCHITECTUREZERO COMPROMISEFULL-STACK DEVELOPERNEO-BRUTALISMNEXT.JS 15REACT 19TYPESCRIPT STRICTMOTION NERDTAILWIND V4WHATSAPP BOTSSUPABASECLEAN ARCHITECTUREZERO COMPROMISEFULL-STACK DEVELOPERNEO-BRUTALISMNEXT.JS 15REACT 19TYPESCRIPT STRICTMOTION NERDTAILWIND V4WHATSAPP BOTSSUPABASECLEAN ARCHITECTUREZERO COMPROMISEFULL-STACK DEVELOPERNEO-BRUTALISMNEXT.JS 15REACT 19TYPESCRIPT STRICTMOTION NERDTAILWIND V4WHATSAPP BOTSSUPABASECLEAN ARCHITECTUREZERO COMPROMISE
// 01 — about.md

WHO IS PANPAN?

Developer, builder, and enthusiast for loud, expressive interfaces.

PP
DEV // 2026
★ DEV
panpan // 2026BUILD IT LOUD
README.md
# panpan.md

CRAFTING LOUD, FAST & UNFORGETTABLE CODE.

Hey, I am panpan.I build unapologetically bolddigital products, performant webapplications, and resilient automationbots.

I believe developer portfoliosshould not look likeboring corporate resumes. Instead,code should feel tactile,interactive, and bursting withpersonality.

When not pushing commits,I explore interactive physics,tune bot engines, andcraft clean design systemsthat leave a mark.

Architecture Discipline:
feat(frontend): reactive micro-interactions & fluid motion at 60fps
feat(backend): modular bot architectures, REST endpoints & Supabase sync
perf(delivery): zero-layout-shift builds, clean accessibility & fast LCP
18+
PROJECTS SHIPPED
Production web apps, bots & tools
4+
YEARS CODING
From first scripts to full-stack engines
850+
CUPS OF COFFEE
Fueling late-night git pushes
420
BUGS SQUASHED
Zero remorse, zero lingering errors
CURRENTLY BUILDING
LAB
ACTIVE:Renvy Bot — High-Performance WhatsApp Automation Engine
LOCAL STATION TIME
--:--:--
WIB
// 02 — stack.json

TECHNICAL ARSENAL

Tools, languages, and frameworks curated for high performance and clean code.

frontend.json
"frontend"6 items
Next.js 15
React 19
TypeScript
Tailwind CSS v4
Motion
HTML5/CSS3
status: loaded200 OK
backend.json
"backend"6 items
Node.js
Supabase
PostgreSQL
REST APIs
WhatsApp Bot Engines
Baileys
status: loaded200 OK
tools.json
"tools"6 items
Git & GitHub
Vercel
Docker (Basics)
VS Code & Terminals
Postman
Figma
status: loaded200 OK
learning.json
"learning"3 items
Rust (CLI & Tools)
WebSockets Scale
Three.js / Shaders
status: loaded200 OK
CURRENTLY EXPERIMENTING:
Rust for high-throughput microservices & WebGL shaders
Active R&D
NEXT.JS 15REACT 19TYPESCRIPTTAILWIND CSS V4NODE.JSMOTION FOR REACTSUPABASEPOSTGRESQLNEXT.JS 15REACT 19TYPESCRIPTTAILWIND CSS V4NODE.JSMOTION FOR REACTSUPABASEPOSTGRESQLNEXT.JS 15REACT 19TYPESCRIPTTAILWIND CSS V4NODE.JSMOTION FOR REACTSUPABASEPOSTGRESQLNEXT.JS 15REACT 19TYPESCRIPTTAILWIND CSS V4NODE.JSMOTION FOR REACTSUPABASEPOSTGRESQL
WHATSAPP AUTOMATIONRESTFUL APISDOCKER ENGINEGIT VERSION CONTROLHIGH PERFORMANCECLEAN CODE ARCHITECTURERUST EXPLORATIONSWHATSAPP AUTOMATIONRESTFUL APISDOCKER ENGINEGIT VERSION CONTROLHIGH PERFORMANCECLEAN CODE ARCHITECTURERUST EXPLORATIONSWHATSAPP AUTOMATIONRESTFUL APISDOCKER ENGINEGIT VERSION CONTROLHIGH PERFORMANCECLEAN CODE ARCHITECTURERUST EXPLORATIONSWHATSAPP AUTOMATIONRESTFUL APISDOCKER ENGINEGIT VERSION CONTROLHIGH PERFORMANCECLEAN CODE ARCHITECTURERUST EXPLORATIONS
// 03 — projects.ts

SHIPPED WORK

Real-world web apps, automation bots, and experiments delivered to production.

01// Bot
LIVE

Renvy Bot

High-Performance WhatsApp Automation Engine

Feature-rich modular WhatsApp bot built with a plugin-based architecture, multi-device socket management, automated media processing, and command routing.

#Node.js#WhatsApp#Automation#Baileys#TypeScript
renvy-core@daemon
ONLINE
> baileys_session: ESTABLISHED [multi-device]
> plugins: [media_stream, auto_reply, qr_auth, scheduler]
> message_in: +62812... "!help"
> dispatch_ack: 200 OK (12ms latency)
SOCKET: TLS_AES_256
CLUSTER: ACTIVE
AUTO-RECONNECT: TRUE
02// Web
SHIPPED

Graviton

Smart School Attendance & Analytics Platform

Modern, high-velocity school attendance web application equipped with real-time biometric and geo-logging, instant reporting, and role-based student/teacher dashboards.

#Next.js#Supabase#Framer Motion#Vercel#Tailwind
SMART ATTENDANCE RADAR99.4% PRESENT
SCAN #048: Grade 12-A VERIFIED
SCAN #049: Grade 10-C VERIFIED
GEO-FENCE: ACTIVESYNC: SUPABASE REALTIME
03// Web
SHIPPED

Absensi Kelas

Ultra-Fast Single-File Class Attendance System

Engineered as an ultra-portable single-file vanilla HTML/CSS/JS architecture with local storage persistence, responsive dark-mode styling, and zero runtime dependencies.

#HTML5#Vanilla CSS#JavaScript#LocalStorage
ROLL CALL SHEET36 STUDENTS
H
H
H
H
H
A
H
H
H
H
H
H
H
H
S
H
H
H
H
H
H
H
H
H
ZERO DEPENDENCIESOFFLINE LOCALSTORAGE
04// App
LIVE

PanPan POS App

Lightweight Cashier & Inventory Web App

Dynamic point-of-sale system featuring instant barcode search, receipt generation, daily sales reconciliation, and automated stock deduction.

#JavaScript#Web App#CSS Grid#IndexedDB
PANPAN CASHIER V2INV-2026
01. Espresso Double$4.50
02. Croissant Butter$3.20
TOTAL PAID$7.70 [PAID]
BARCODE SCAN: READYPRINTER: THERMAL 58MM
05// Web
WIP

Portal OSIS

Community Hub & Activity Portal for Student Council

Comprehensive student portal with announcement feeds, activity proposals, real-time voting, live event schedule clocks, and CDN-backed media galleries.

#Next.js#Supabase#Framer Motion#Tailwind#PostgreSQL
COMMUNITY HUB // OSISACTIVE POLL
VOTE: Sport Fest 202678%
VOTE: Art Exhibition64%
ROLE: ADMIN + STUDENTCDN MEDIA SYNC
// 04 — journey.log

GIT LOG TIMELINE

Tracking key development commits, architectural transitions, and engineering milestones.

2026
c0de001
v0.0.1
Apr 10, 2022

init: first line of code written

Discovered the thrill of writing code. Built simple HTML/CSS pages, fell in love with turning raw ideas into interactive screens.

b47ch02
milestone
Jan 15, 2023

feat(web): deep dive into modern JavaScript & DOM manipulation

Mastered asynchronous JavaScript, APIs, and built interactive single-page utility apps for school and community members.

d89a103
v1.0.0
Nov 20, 2023

feat(automation): architectural launch of Renvy Bot engine

Constructed an extensible WhatsApp automation bot. Handled concurrent sessions, plug-and-play handler commands, and live media streaming.

e92f204
v2.0.0
Aug 4, 2024

feat(fullstack): transitioned to Next.js, TypeScript & Supabase

Adopted strict TypeScript discipline and modern cloud backends. Developed high-availability database schemas and full-stack authentication.

f14c305
v2.5.0
Sep 12, 2025

ship(platform): launched Graviton Smart Attendance & Portal OSIS

Shipped production platforms used by real students and organizations. Optimized performance, UI responsiveness, and real-time syncing.

a98e406
HEAD
Oct 3, 2026

HEAD -> main: published Neo-Brutalism developer portfolio

Crafted this raw, unapologetic Neo-Brutalist IDE portfolio. Ready for the next high-impact engineering challenge.

// 05 — contact.sh
Open to Collaborate

LET'SBUILDSOMETHINGLOUD.

Have an ambitious web application, custom bot automation, or creative engineering project in mind? Let's turn complex ideas into tangible, high-speed reality.

dispatch_message.sh