VOL. 1: FRONTEND ENGINEER
Haru Li — Frontend Engineer, React, Next.js, TypeScript
HARU LI
"I value product understanding and engineering quality — not just building UIs, but caring about system design."
CHARACTER
HARU LI
Frontend Developer
SKILL RADAR
Frontend engineering is my core focus. I primarily work with React and am comfortable with TypeScript, SCSS, and Tailwind CSS, turning design requirements into maintainable frontend architecture.
Core strengths: Architecture refactoring ✕ AI-assisted development workflow
ONIGIRI
Code Supervisor
PROJECT
LIST
E-COMMERCE ARC
Vue 3 + Quasar + TypeScript e-commerce platform with responsive design, Pinia state management, an Axios API layer, reCAPTCHA, SSR, and SEO.
OFFICIAL SITE SAGA
Next.js 14 App Router migration with multi-step home-inspection booking, TapPay payments, LINE LIFF login, and GA4 e-commerce tracking.
ADMIN SYSTEM ARC
React + MUI admin system with WebSocket live customer support chat, LINE sticker rendering, scheduling, orders, and member management.
CLINIC SYSTEM
Aesthetic clinic admin system with multi-step forms using React Hook Form + Zod, TanStack Query, role-based access, and canned messages.
EMS DASHBOARD
React 19 + Vite energy / environment monitoring SPA with adaptive scaling (1280px to 4K), real-time node traffic tracking, and a brand design system.
POS CHRONICLES
Tablet-optimized restaurant POS with real-time order updates over WebSocket, barcode scanning, and multi-method payment recognition.
SANATORIUM SITE
Care home website with frontend architecture from scratch, Astro + React, Swiper carousel, responsive design, and GA4 tracking.
CORPORATE SITE DESIGN
Corporate website focused on overall site design, page UI implementation, and basic SEO field checks and optimization.
TRAVCAT
Personal side project: a React Native + Expo travel journal app with an offline-first architecture, a Supabase backend, and a full EAS Build to TestFlight release.
INSPECTION FIELD APP
A React Native / Expo app for on-site property inspection, built offline-first: every screen reads local SQLite and a downloaded image bundle, while the network only pushes changes and pulls increments in the background.
FANMAP
A K-pop fan map app — event discovery, a map for finding venues and pop-ups, trip planning, and a digital ticket collection. Expo SDK 57 + Expo Router + NativeWind.
FANMAP ADMIN
The admin console behind the fan map app: admin accounts with fine-grained permissions, event and place management, support-application review, and versioned legal documents.
SIDE LAB
Work outside the commercial projects: a scroll-driven story page, plus two screens you normally only see when something goes wrong.
Blog
Traps I fell into and what the measurements said, written down for future me.
ENTER →Performance lab
10 frontend performance techniques you can drive yourself, measured live.
ENTER →Seven beats of a wave
A seven-beat GSAP ScrollTrigger narrative, with Lenis smooth scrolling on desktop.
ENTER →Onigiri, lost
The 404 page, drawn as a single manga panel where the paw prints stop.
ENTER →The napping server
The 500 page, same visual family as the 404 — Onigiri fell asleep.
ENTER →CAREER PATH
National Kaohsiung University of Science and Technology
B.S. in Computer & Communication Engineering
Ranked 20 / 112 in the department (top 17.86%). Served as art and design lead for the student association, built a foundation in frontend development and system design, and participated in real project work before graduating.
GLSoft
Frontend Intern (senior-year internship)
Worked mainly with Angular + SCSS, learning core layout and UI implementation, helping with simple bug fixes, and building practical frontend fundamentals.
A Nice Day Technology
Frontend Engineer
Led the frontend migration from Astro + React to Next.js 14 App Router; built a multi-step booking system, TapPay payments, LINE LIFF login, GA4 e-commerce tracking, and a WebSocket-powered live customer support chat.
BADGES
Course and platform badges — 20 in total. These are the ones closest to hands-on engineering; each links to the issuer's official page for verification.
TO BE
CONTINUED
Open to opportunities that value system depth and product thinking — let's talk about collaborations or roles.