You use AI — so what am I actually paying for?

The judgment. AI writes a first draft fast; it doesn't know your users, your constraints, or when 'works' isn't 'good'. You're paying for ten years of knowing the difference — plus the speed that comes from not pretending it's 2019. You get senior-level decisions delivered at AI-era pace.

What kind of projects do you take on?

Product-focused work that needs both execution and thinking — new web apps, frontend architecture overhauls, CMS platforms, design-system-to-code. I'm at my best when quality and long-term maintainability matter, not just shipping fast.

Are you available for remote work?

Yes — fully. I've been working effectively in remote-first environments for years. I'm comfortable with async communication, different time zones, and the tooling that comes with distributed teams. Most of my recent work has been fully remote.

What does your typical process look like?

I start by understanding the problem and constraints, not jumping into code. From there I propose a technical approach, align on scope, then build iteratively with frequent check-ins. I keep communication tight, share progress early, and flag blockers before they become delays.

How do I get in touch?

The easiest way is to email me at workwithtoph@gmail.com with a brief summary of what you're working on and what kind of help you're looking for. I respond within a business day and can jump on a call to discuss scope.

TAH

<section class="hero bg-paper">
  <Eyebrow status="available" location="Jakarta / Remote" />

  <h1 class="font-extrabold tracking-tight">
    <MaskReveal delay={0.25}>Code moves fast now.</MaskReveal>
    <MaskReveal delay={0.35}>
      <Scramble text="Taste doesn't." />   {/* noise → signal */}
    </MaskReveal>
    <MaskReveal delay={0.45}>I bring both.</MaskReveal>
  </h1>

  <p class="max-w-md text-ink/60">
    Ten years of frontend craft, now with AI running in the
    loop. Brainstorm → design → both ends of the stack → ship.
    The judgment stays human.
  </p>

  <nav class="cta-row">
    <Magnetic><a href="#work">See the work →</a></Magnetic>
    <Magnetic><a href="mailto:me">Say hello</a></Magnetic>
  </nav>

  <ThumbnailStrip projects={["rumkraf", "alprido", "lot-quest"]} />
</section>

{/* you found the layer behind the paper. hi. */}
<section class="hero bg-paper">
  <Eyebrow status="available" location="Jakarta / Remote" />

  <h1 class="font-extrabold tracking-tight">
    <MaskReveal delay={0.25}>Code moves fast now.</MaskReveal>
    <MaskReveal delay={0.35}>
      <Scramble text="Taste doesn't." />   {/* noise → signal */}
    </MaskReveal>
    <MaskReveal delay={0.45}>I bring both.</MaskReveal>
  </h1>

  <p class="max-w-md text-ink/60">
    Ten years of frontend craft, now with AI running in the
    loop. Brainstorm → design → both ends of the stack → ship.
    The judgment stays human.
  </p>

  <nav class="cta-row">
    <Magnetic><a href="#work">See the work →</a></Magnetic>
    <Magnetic><a href="mailto:me">Say hello</a></Magnetic>
  </nav>

  <ThumbnailStrip projects={["rumkraf", "alprido", "lot-quest"]} />
</section>

{/* you found the layer behind the paper. hi. */}

<section class="hero bg-paper">
  <Eyebrow status="available" location="Jakarta / Remote" />

  <h1 class="font-extrabold tracking-tight">
    <MaskReveal delay={0.25}>Code moves fast now.</MaskReveal>
    <MaskReveal delay={0.35}>
      <Scramble text="Taste doesn't." />   {/* noise → signal */}
    </MaskReveal>
    <MaskReveal delay={0.45}>I bring both.</MaskReveal>
  </h1>

  <p class="max-w-md text-ink/60">
    Ten years of frontend craft, now with AI running in the
    loop. Brainstorm → design → both ends of the stack → ship.
    The judgment stays human.
  </p>

  <nav class="cta-row">
    <Magnetic><a href="#work">See the work →</a></Magnetic>
    <Magnetic><a href="mailto:me">Say hello</a></Magnetic>
  </nav>

  <ThumbnailStrip projects={["rumkraf", "alprido", "lot-quest"]} />
</section>

{/* you found the layer behind the paper. hi. */}
<section class="hero bg-paper">
  <Eyebrow status="available" location="Jakarta / Remote" />

  <h1 class="font-extrabold tracking-tight">
    <MaskReveal delay={0.25}>Code moves fast now.</MaskReveal>
    <MaskReveal delay={0.35}>
      <Scramble text="Taste doesn't." />   {/* noise → signal */}
    </MaskReveal>
    <MaskReveal delay={0.45}>I bring both.</MaskReveal>
  </h1>

  <p class="max-w-md text-ink/60">
    Ten years of frontend craft, now with AI running in the
    loop. Brainstorm → design → both ends of the stack → ship.
    The judgment stays human.
  </p>

  <nav class="cta-row">
    <Magnetic><a href="#work">See the work →</a></Magnetic>
    <Magnetic><a href="mailto:me">Say hello</a></Magnetic>
  </nav>

  <ThumbnailStrip projects={["rumkraf", "alprido", "lot-quest"]} />
</section>

{/* you found the layer behind the paper. hi. */}

Available for work — Jakarta / Remote

Code moves fast now.Taste doesn't.I bring both.

I'm Taufik — ten years of frontend craft, now with AI running in the loop. I brainstorm, design, build both ends of the stack, and ship. The judgment stays human.

Selected work

Gamification Platform

Scroll↓

01 / About

I'mTaufik.Tenyearsin,I'velearnedthehardpartwasnevertypingthecode—it'sknowingwhattobuild,whattorefuse,and—whenit'sactuallydone.

A decade of web apps, CMS platforms, and frontend architecture — leading teams, setting standards, shipping products people rely on daily. These days AI handles the typing speed. I handle everything that makes it worth shipping. Open to freelance and full-time remote.

How I actually work→

0+Years exp.

0+Projects

0Teams led

02 / Method

AI is in every step.
So am I.

One person, full pipeline — idea to production. AI brings the speed. I bring the ten years that tell it no.

Brainstorm

I kill nineteen. The one left becomes the product.

Design

I decide what feels right — hierarchy, rhythm, restraint.

Backend

I make sure the data model won't haunt anyone in a year.

Frontend

I sweat the details it never will.

Deliver

I make the only call that matters: it's ready.

Ten years of engineering didn't get cheaper. It became the part AI can't do.

03 / Work

Things I've shipped.

Yours next? →

FigmaNext.jsCMS

Brand site for an architecture studio — design and build, CMS-driven content.

Rumkraf

Architecture Studio · Web

2026View Project→

ReactSupabaseMobile

Mobile-first habit builder — every legend started at Level 1.

Level Up

Habit App · Mobile

2026View Project→

ReactPWAUI/UX

Attendance & activity tracker for field sales teams. Installable PWA.

Alprido

Sales Tracker · PWA

2025View Project→

Next.jsSupabaseCloudflare R2

Turns property agents' performance into quests & XP — gamified from the ground up.

Lot Quest

Gamification Platform

2026View Project→

04 / Services

What I do.

In plain language on the left, as source on the right. Hover a service to find it in the code.

Frontend Engineering

React to full Next.js apps — fast, accessible, and still pleasant to work on in year two.

Backend & Platform

APIs, data models, integrations — the unglamorous half that keeps everything standing.

Product Design

Figma to code without the telephone game — shaped with an engineer's eye.

services.tsUTF-8 · TypeScript

01// services.ts

02// what you can hire me for

04export function frontendEngineering(idea: Idea): Interface {

05// React, Next.js, TypeScript, Tailwind

06return build(fast, accessible, maintainable);// still pleasant in year two

07}

09export function backendPlatform(product: Product): Platform {

10// Node.js, Supabase, REST APIs, AWS

11return wire(apis, dataModels, integrations);// the half that keeps it standing

12}

14export function productDesign(figma: Figma): Code {

15// UI/UX, Design Systems, Prototyping

16return translate(figma, { telephoneGame: false });// engineer's eye included

17}

3 exports · 0 outsourcingresponse: < 1 business day

05 / Stack

One engineer, ten majors.

The stack, released as versions of me. Semantic, mostly backwards compatible, actively maintained.

v1.0

2015

Initial release

featfirst production code, agency pace
fixlearned the hard way that IE11 exists

+ HTML/CSS+ jQuery+ SASS+ Gulp+ Grunt+ Bower

v3.0

2016

The framework era

BREAKINGdropped jQuery. no regrets
featcomponent thinking installed

+ Angular+ Vue+ Git− jQuery

v5.0

2018

React rewrite

refactoreverything is a component now
feattypescript adopted — any deprecated

+ React+ TypeScript+ Node.js

v5.1

2019

The design minor

featstarted designing it, not just building it
featreviewing designs as a lead — so I learned the craft

+ Figma+ Sketch+ Photoshop

v7.0

2019

The leadership patch

featled a team — shipping through others
featcode standards, reviews, mentoring

+ Architecture+ Design Systems

v9.0

2023

Full-stack expansion

featthe backend stopped being someone else's job
featcopilot arrives — first AI in the editor
refactorone person, both ends of the stack

+ Next.js+ Supabase+ Firebase+ AWS+ Tailwind+ Copilot

v10.0

2026HEAD → main

AI-augmented

featfrom autocomplete to agents — ai in the loop, idea to production
BREAKINGjudgment now required. not auto-installed

+ Claude Code+ Codex+ ChatGPT− Typing speed as a metric

v11 in development — roadmap: whatever the job needs next

06 / Experience

Ten years, stacked.

Scroll through a decade — each role lands on the last. The story ends where it is now: on top.

Jun 2015 — Aug 201601 / 06

Frontend Developer

We Are Definite

First production code — modern web interfaces at agency pace.

Sep 2016 — Sep 201802 / 06

Mid Frontend Developer

MNC Innovation Center

Complex UI features, performance work, component library groundwork.

Sep 2018 — Nov 201903 / 06

Senior Frontend Developer

MNC Innovation Center

Large-scale web apps, hand in hand with product and design.

Nov 2019 — Sep 202304 / 06

Frontend Supervisor

MNC Innovation Center

Led the frontend team — architecture calls, code standards, and mentoring.

Sep 2023 — Jul 202405 / 06

Technical Expert

PT Infokom Elektrindo

Deep technical guidance on frontend architecture and standards across product squads.

Jul 2024 — PresentCurrent

Freelance Frontend Engineer

Remote

Greenfield builds to legacy rescues — shipped solo at team speed, AI in the loop end to end.

07 / FAQ

Fair
questions.

08 / Contact

Got something
worth building?

Freelance projects or full-time remote — one email, and I reply within a business day.

workwithtoph@gmail.com↗

GitHubLinkedIn

Code moves fast now.Taste doesn't.I bring both.

AI is in every step. So am I.

Brainstorm

Design

Backend

Frontend

Deliver

Things I've shipped.

Rumkraf

Level Up

Alprido

Lot Quest

What I do.

Frontend Engineering

Backend & Platform

Product Design

One engineer, ten majors.

Initial release

The framework era

React rewrite

The design minor

The leadership patch

Full-stack expansion

AI-augmented

Ten years, stacked.

Frontend Developer

Mid Frontend Developer

Senior Frontend Developer

Frontend Supervisor

Technical Expert

Freelance Frontend Engineer

Fair questions.

Got somethingworth building?

AI is in every step.
So am I.

Fair
questions.

Got something
worth building?