Growing the jungle…

Trail log Nº 002 · 14.02°N 100.53°E · Pathum Thani

PisitkornBootchada

frontend dev who builds in 3D

Frontend developer with two years of building and running a production e-commerce platform end to end: Figma prototypes, Next.js and React, a 3D PC builder in Three.js, payments, deployment and the monitoring after it ships.สาวสายโค้ด ชอบผจญภัยไปกับบั๊ก

See the expeditions ↓Say hi

psst… my PC is in pieces

Scroll down and watch it come together, or let me build it for you.

skip ↓

See the expeditions ↓Say hi

01 · About

บันทึกนักสำรวจ

Korn winking at a cafe — off-duty · cafe hunting

Who

A transgender woman and a computer engineer. Proud of both.

What

I take a feature from a Figma prototype to production, then keep an eye on it with GA4 and Search Console after release.

How

Calm under pressure, careful with sensitive data, and close with finance, audit, product and backend teams.

AI, honestly

Claude, ChatGPT, Gemini and Copilot make me faster. Every line still gets reviewed and tested by me before release.

Based in: Pathum Thani, Thailand
Now: Frontend Developer @ iHAVECPU
Experience: 2 years in production
Speaks: Thai (native), English (basic–intermediate)

02 · Education & experience

เส้นทางที่เดินมา

You are here

Nov 2024 – now

Frontend Developer

iHAVECPU

Building and maintaining the e-commerce frontend end to end: a 3D PC builder, Omise saved-card payments, AWS deployment, SEO monitoring and the ERP Prototype V1 frontend, all wired to REST APIs for product data and the cart. Started alongside a senior backend developer and moved into a dedicated frontend role after showing strength in web development.

↓ Earlier on the trail

Sep – Nov
.NET Developer
CCP Concrete · Chonburi
Developed a “Ship To” shipping submission page with ASP.NET Core MVC and an e-mail notification triggered on save.
2 months
IT Intern
Charoen Pokphand Foods PCL · Chonburi
Built a weather forecast website and an air quality index monitor for the factory: React front end, Node.js back end and Arduino sensor hardware.
2020 – 2024
B.Eng. Computer Engineering
Kasetsart University, Sriracha Campus
Senior project: Talai, a campus car tracking app shipped on Web, iOS and Android with a team of three.
2018 – 2020
High school
Sriracha School
Where the trail starts.

03 · Projects

โปรเจกต์ที่ลุยมา

Pick an expedition

At work · iHAVECPUSchool & side projects

DWG Nº 01 · blueprint

EXP-01 · iHAVECPU

3D PC Builder

จัดสเปกคอมแล้วเห็นเครื่องประกอบเป็น 3D

An interactive 3D builder where customers watch the parts they pick come together into a full PC build, with compatibility checks built in.

Three.js
React Three Fiber
drei
GSAP
Next.js
TypeScript
WebGL

My role

Frontend and 3D: scene, interaction, compatibility logic and performance.

Kind of work

3D & motionUI / UXPerformance

Read the case study →

What I built

Real-time 3D scene that colours each part from the selected product, with selection effects and spec callouts
A 7-slot bar for the main parts, plus a dock and product panel for picking
Filters products by socket and slot; RAM, M.2 and GPU picks auto-adjust when the motherboard changes, with an undo notice
Same slot-limit and stock warnings across every category; the list refreshes in the background without the page jumping
Kept it smooth with lazy loading, adaptive resolution and pausing the render when idle; fixed race conditions when switching categories
Opt-in device check (CPU threads, RAM, GPU and a tiny benchmark) that runs only in the browser and shows how well 3D mode will run, designed with Thailand's PDPA in mind

1 / 8

RECEIPT #0002 · PAID

EXP-02 · iHAVECPU

Checkout & Payments

ระบบชำระเงินและบันทึกบัตร

The store's checkout, from coupons and instalments to tax invoices and saved cards on Omise, built to be safe with real customers' money and data.

Next.js
React
TypeScript
Formik
Omise
AES-256

My role

Owned the checkout frontend, working with backend developers on the API.

Kind of work

PaymentsUI / UXData & APIs

Read the case study →

What I built

✓Coupon and monthly-instalment calculations at checkout
✓Address and tax-invoice validation so orders go out right the first time
✓Saved cards on Omise: looks up an existing customer by e-mail first, so no duplicates
✓Retries safely on network failures, since card tokens are single-use
✓Customer IDs and tokens encrypted with AES-256

1 / 8

night shift · 03

EXP-03 · iHAVECPU

Site-wide Dark Mode

โหมดมืดทั้งเว็บ

Dark mode across the whole store, without changing a single colour of the existing light theme.

next-themes
CSS variables
View Transitions API
styled-components
Emotion

My role

Designed the token system and rolled it out across the site.

Kind of work

UI / UXPerformance

Read the case study →

What I built

✦Design tokens in CSS variables so both themes come from one source
✦Light theme kept pixel-identical while dark mode was added
✦Theme toggle animated with the View Transitions API
✦Fixed third-party components such as react-select so they follow the theme

1 / 8

shop window · 04

EXP-04 · iHAVECPU

Storefront UX

ประสบการณ์หน้าร้านออนไลน์

The parts of the store customers touch every day: finding the right product, comparing it, zooming in and getting drivers after they buy.

Next.js
React
TypeScript
styled-components
MUI
Ant Design

My role

Built and maintained these storefront features from Figma to production.

Kind of work

UI / UXPerformanceMobile

Read the case study →

What I built

Product Journey: recommends products by what you'll use them for, with purpose selection, a guideline and an interview overlay, plus a mobile journey
Benchmark product cards that show expected game performance for the spec, with skeleton loading
Redesigned image zoom: a rotary dial outside the image on wide screens and a zoom bar on tablets, applying transforms directly while dragging to cut re-renders
Driver download centre with progress bars, skeletons and driver lists
Header, mobile navigation, category menus and homepage promotion sections
Small things that matter: scroll lock without layout shift, 16px inputs so iOS doesn't zoom, notifications above modals, support for older Chrome

1 / 8

handle with care · 05

EXP-05 · iHAVECPU

Ship & Watch

ดูแล production ตั้งแต่ deploy ถึงวัดผล

Running the production Next.js site: deployment, a safe UAT server, SEO and performance monitoring, and the docs that help other teams.

AWS EC2
PM2
nginx
Cloudflare
GA4
Search Console
Figma
TablePlus

My role

Owner of deployment and post-release monitoring for the frontend.

Kind of work

Infra & opsData & APIs

Read the case study →

What I built

↑Set up and maintain production on AWS EC2 with PM2, nginx and Cloudflare
↑Stood up a UAT server that blocks bots and search-engine crawling; test every release before and after deploy
↑Figma prototypes for Product Manager approval, then built in Next.js, React and TypeScript
↑Monitor SEO with GA4 and Search Console, report to the Managing Director and fix drops with the SEO team
↑Trace issues through the database in TablePlus and report root causes to the department head
↑Write and maintain internal guidebooks on modules and known issues; built the ERP Prototype V1 frontend

1 / 8

TICKET Nº 06 · KU sriracha

EXP-06 · University project · team of 3

Talai Tracker

แอปติดตามรถตะลัย (WhereBus)

A tracking app for the campus songthaew (talai), so students know where the ride is and how full it is.

Flutter
Firebase
YOLOv9 (team)
GPS (team)

My role

Built the whole application myself: UI/UX, admin panel and the Firebase back end.

Kind of work

MobileUI / UXData & APIs

Shipped on

WebiOSAndroid

“There were a lot of problems along the way, and that is exactly why it was fun to build.”

Read the case study →Live demo ↗

What I built

University-verified registration
Lost-and-found board for items found around campus
News feed with likes and comments
Teammates handled passenger counting with YOLOv9 and GPS location capture

1 / 8

weather log · 07

EXP-07 · CP Foods internship

Factory Air Meter

เครื่องวัดคุณภาพอากาศรอบโรงงาน

An air quality index monitor for the factory, plus a weather forecast website.

React
Node.js
Arduino

My role

Front end, back end and hardware integration.

Kind of work

Hardware & IoTData & APIsUI / UX

What I built

☁︎Arduino sensor box collecting air readings on site
☁︎Node.js back end serving the results
☁︎React dashboard showing the quality index

1 / 8

side quest · 08

EXP-08 · Side project

valorant-list

เว็บรวมข้อมูลเกม Valorant

A fan web app for friends in the Valorant community that browses game data from the public valorant-api.com.

Next.js
React
TypeScript
Tailwind CSS

My role

Solo: data fetching, structure and UI.

Kind of work

Data & APIsUI / UX

GitHub ↗

What I built

Consumes and structures the public valorant-api.com REST API
Built for the community, non-commercial

1 / 8

04 · By the numbers

ข้อมูลภาคสนาม

Hand-counted from the projects on this page. No made-up numbers, no speed stats.

Plotting the map…

05 · Skills

อุปกรณ์ในเป้

Languages

JavaScript
TypeScript
C#
HTML & CSS

Frameworks

Next.js
React
ASP.NET Core MVC

Data & APIs

REST APIs
JSON
Fetch API

UI & styling

styled-components
Emotion
MUI
Ant Design
Formik
next-themes
Tailwind CSS

3D / WebGL

Three.js
React Three Fiber
drei
GSAP

Payments & analytics

Omise
GA4
Google Search Console

Deployment

AWS EC2
PM2
nginx
Cloudflare

Tools

GitHub
TablePlus
Figma
VS Code
Postman

AI tools

Claude
Gemini
ChatGPT
GitHub Copilot

Also used

Flutter
Firebase
Node.js
Arduino

06 · Contact

Basecamp

Got a trail that needs a builder? Let's go on an adventure together.

ชวนไปผจญภัยด้วยกันได้เลยค่ะ

E-mailpisitkorn.bootchada ✿ gmail→GitHub@rose-korn↗

Printable CV ↓

PisitkornBootchada

Fieldnotes

Theroute

Frontend Developer

.NET Developer

IT Intern

B.Eng. Computer Engineering

High school

Expeditions

3D PC Builder

Fielddata

Gearinthepack

Languages

Frameworks

Data & APIs

UI & styling

3D / WebGL

Payments & analytics

Deployment

Tools

AI tools

Also used

Basecamp