Loading panpan portfolio. Press Escape to skip.
boot.sh
> booting panpan.biz.id...
[░░░░░░░░░░] 0%
panpan-bios v2.0tap anywhere to skip
Skip to content
<p/>panpan
// 00. INIT_IDENTITY

PANPAN

Panpan is a Full-Stack Developer, WhatsApp Bot Builder, UI Tinkerer, and Motion Nerd.

I build loud, playful web apps and intelligent automation bots. Crafting pixel-sharp interfaces with Next.js, Node.js, and high-energy motion. No cookie-cutter templates.

See my work
Let's talk
hero.tsx
Developer profile object: Next.js, TypeScript, Node.js; builds web apps, bots, and automation.
Next.js, React 19, TypeScript, Tailwind CSS, Motion, Node.js, Supabase, PostgreSQL, Git, Vercel, REST APIs, WhatsApp Bots, Automation
// 01. ABOUTREADME.md

ABOUT.MD

A quick breakdown of who I am, what I care about, and how I build things.

README.md

# Code should be loud, responsive, and feel alive.

v2.0

Hey, I'm panpan. I'm a developer obsessed with crafting interfaces that don't feel like another corporate template. I bridge modern front-end mechanics with resilient backend architectures.

My playground covers everything from high-performance Next.js web applications to headless WhatsApp automation bots and student community tools. When I'm not writing code, I'm tinkering with interaction physics and terminal aesthetics.

## What I Enjoy Building:

  • High-velocity web apps with instant reactivity
  • Automated WhatsApp bots and event-driven microservices
  • Interactive neo-brutalist interfaces with tight tactile physics
  • Developer utilities, single-file tools, and custom workflow scripts
  • Accessible design systems with zero bloat
panpan avatar
Identity: panpan

Developer & Tinkerer

Building snappy web systems and intelligent automation bots.

Projects Shipped
10+ Projects Shipped
Full-stack apps & bots
Years Coding
4+ Years Coding
Since 2022 JavaScript
Cups of Coffee
1,337 Cups of Coffee
Fueling midnight deployments
Bugs Squashed
999+ Bugs Squashed
Zero tolerance for memory leaks
// 02. STACKJSON

STACK.JSON

The languages, runtimes, and engineering frameworks I use to ship production software.

stack.json
{// developer dependencies & toolchains
"frontend": [
▲Next.js: App Router, SSR, Server Components
⚛React 19: Modern React architecture
TSTypeScript: Strictly typed codebases
≈Tailwind CSS: Utility-first design systems
✦Motion: Production gesture physics & spring animations
],
"backend": [
⬡Node.js: Event-driven runtime & CLI scripting
⚡Supabase: Postgres, Auth & Realtime engine
⛃PostgreSQL: Relational modeling & queries
⇄REST APIs: Structured endpoint architecture
],
"tools": [
ᛘGit: Version control & trunk branching
▲Vercel: Edge deployments & CI/CD
⬢npm: Package management & scripts
⌗WhatsApp APIs: Headless bot protocols
],
"learning": [[ACTIVE STUDY]
⚙Rust: Systems programming & high-performance tools
❖AI Agents: Autonomous workflows & tool invocation
]
}
// 03. PROJECTSSHIPPED

PROJECTS.TS

A selection of web apps, bots, and digital products I have engineered.

#01Bot2023
SHIPPED

Renvy Bot

Feature-rich WhatsApp automation bot built with modular plugin architecture and resilient socket handlers.

Node.jsWhatsAppAutomation
renvy-socket.sockbaileys-v6.5

> listening on port 8080...

> connection state: open [WhatsApp]

> [MSG_IN] /menu --user 62812xxxx

> [RESP_OUT] command executed in 14ms

UPTIME: 99.98%MEMORY: 42MB
#02Web2024
SHIPPED

Graviton

Smart School Attendance web application with real-time logging, teacher verification, and seamless UI.

Next.jsSupabaseMotionVercel
GRAVITON // ATTENDANCEREALTIME
PRESENT34
LATE02
ABSENT00
DATABASE: Supabase SyncLATENCY: 12ms
#03Web2023
SHIPPED

Absensi Kelas

Class attendance tracker built as a zero-dependency vanilla HTML/CSS/JS experience with a dark aesthetic.

HTMLCSSJavaScript
index.html [Single-File]VANILLA JS
01. Adit Pratama✓ HADIR
02. Bella Safira✓ HADIR
03. Dimas Arya~ IZIN
ZERO BUILD STEP • PORTABLE RUNTIME
#04Web2024
SHIPPED

POS App

Snappy point-of-sale cashier web application designed for fast order calculations and receipt generation.

JavaScriptWeb AppCSS
CASHIER_TERMINALREADY
Item: Kopi Susu x2Rp 36.000
Item: Roti Bakar x1Rp 18.000
TOTAL DUE:Rp 54.000
TAX: 0%RECEIPT: #9401
#05Web2024
SHIPPED

Portal OSIS

Community student-council portal featuring announcement boards, agenda calendars, and submission feeds.

Next.jsSupabaseMotion
PORTAL OSIS // COMMUNITYAGENDA
Rapat Pleno EkstrakurikulerJumat, 15:30 WIB • Aula Utama
Porseni Sekolah 2024Registration Open
MEMBERS: ActiveVERIFIED HUB
// 04. JOURNEYGIT LOG

JOURNEY.LOG

Chronological commit log of milestones, key projects, and learning leaps.

commit a4f891b
March 2022

feat: started learning JavaScript

Wrote the first lines of DOM manipulation and fell in love with code.

commit c720e34
Late 2022

feat: shipped first website

Deployed the first public project to the web. Got hooked on developer tools.

commit 8bf92da
tag: v1.0
Mid 2023

feat: built Renvy Bot

Architected a WhatsApp bot with multi-module commands and automated triggers.

commit e512c09
Early 2024

feat: shipped school projects & POS

Created Absensi Kelas and Cashier POS tooling for real school use cases.

commit 308b4ea
tag: v2.0
Late 2024

feat: shipped Graviton & Portal OSIS

Elevated frontend craft with Next.js, Supabase real-time databases, and Motion.

commit 9e3d23a
HEAD -> main
Present

chore: building this portfolio

Neo-brutalist rebuild from the ground up for panpan.biz.id.

// 05. CONTACTTRANSMISSION

CONTACT.SH

Got an idea, a project, or a system to build? Open a transmission line.

$ ./contact.sh --recipient panpan.biz.id

LET'SBUILDSOMETHINGLOUD.

Got an ambitious project, a bot to automate, or a question? Send a transmission.

contact.sh
Runs client-side via mailto protocol