> booting yao.sys... OK · loading profile... OK · rendering ▮

yao@dev:~$ whoami

YAO

// Full-Stack Developer & Builder — I build things for the web.

$ ls ./work

Selected Work

Kismet-jen preview
featured case[01]

Kismet-jen

A production e-commerce site for a Taipei fashion label, built around fast product publishing and campaign operations.

  • ▸Product catalog and brand storefront
  • ▸Admin CMS for self-service product updates
  • ▸Scheduled sale campaigns with homepage automation
Next.jsTypeScriptSupabasePrismaTailwind CSSshadcn/ui
Slides Hub preview

Slides Hub

[02]

A React-based publishing hub where each presentation is shipped like a small web app.

  • -Decks authored as React components
  • -Auto-deploys on every main branch push
  • -Fullscreen playback with thumbnail navigation
ReactTypeScriptViteVercel
Japanese N5 PK preview

Japanese N5 PK

[03]

A real-time two-player JLPT N5 quiz game with room matching, live answers, and round scoring.

  • -Room-code matchmaking for two players
  • -10-question JLPT N5 race format
  • -Live answer reveal and score updates
JavaScriptAblyWebSocketRealtimeVercel
XX Accounting Office preview

XX Accounting Office

[04]

A clear service website for a local accounting office, focused on trust, services, and contact conversion.

  • -Service pages for client scanning
  • -Company profile and trust-building copy
  • -Contact section for inquiry conversion
Next.jsTypeScriptTailwind CSS

yt-subtitle-gen

[05]

An offline subtitle pipeline that routes videos through the best ASR engine and gives creators a waveform proofing UI.

  • -Mandarin, Taiwanese, and Japanese detection
  • -Whisper and Breeze-ASR engine selection
  • -Waveform GUI for timestamp proofing
PythonWhisperMLXASRffmpeg

Remotion Playground

[06]

A programmatic video playground for terminal-style motion graphics and README hero loops.

  • -React-authored motion sequences
  • -Terminal typing and command-output scenes
  • -Beat-by-beat timing for seamless loops
RemotionReactTypeScript

Personal Portfolio

[07]

A bilingual portfolio built as a fast, localized Next.js site with terminal-inspired presentation.

  • -Bilingual routing with next-intl
  • -Terminal-inspired visual system
  • -Structured sections for work, activities, and contact
Next.jsTypeScriptTailwind CSSnext-intl
$ cat ./talks

Teaching & Talks

  1. Smart Station #3 · AI Fundamentals

    2026-06

    Offline community session in Taoyuan for non-technical audiences — co-taught, covering Antigravity, model selection (Opus vs Flash), and turning SOPs into Skills.

  2. Corporate Training · Vibe Coding × Claude Skills v2

    2026-05

    90-minute hands-on workshop for non-technical staff — every attendee left with a working Skill draft for their own daily workflow.

  3. Kainan University MIS · Backend Vibe Coding Workshop

    2026

    Formal course session for 30 students, 3 hours of live coding — the Plan → Execute → Verify methodology, from PRD to a production-grade NestJS endpoint.

  4. Taoyuan Community College · AI Language Learning

    2025-04

    Public 3-hour class for senior learners — a full self-study Japanese workflow with ChatGPT, hands-on from the very first prompt.

$ cat skills

Stack

Languages
  • › TypeScript
  • › JavaScript
  • › Python
Frameworks & Libraries
  • › Next.js
  • › React
  • › Node.js
  • › Tailwind CSS
  • › shadcn/ui
  • › Prisma
Tools
  • › Git
  • › Docker
  • › pnpm
  • › Sentry
Platforms
  • › Vercel
  • › Supabase
  • › GitHub
  • › Cloudflare
$ ./contact.sh

Contact

Got a project?
Let's connect. →