Overview
Bilingual corporate website for an aluminium manufacturer. The site is the brand's main public surface — product catalog, company story, vertical history timeline, news, and inquiry flows — deployed under a formal UAT process before going live. Built on Next.js 15 + React 19 with a heavy emphasis on motion, since a manufacturer's site has to feel premium without sacrificing performance.
What I built
Public site
- Product catalog with category filters, detail pages, and downloadable spec sheets
- Vertical company-history timeline using react-vertical-timeline-component, animated on scroll
- News / article section with editor-driven content and a hero carousel
- Contact and inquiry forms that route into the admin backend for the sales team
- Bilingual (Thai / English) via next-intl with proper locale routing
- Motion-first design: Framer Motion + react-awesome-reveal for section reveals; Embla and Slick carousels for product showcases
Content + admin
- SunEditor rich-text for marketing-managed pages so content updates don't require a deploy
- AWS Amplify backend with Express + Mongoose API for content, products, and inquiry capture
- Device-aware UX (react-device-detect) — different carousel and motion budgets on mobile vs desktop
Process
- Formal UAT cycle before launch — documented test cases, sign-off from the client, then go-live
Tech stack
- Frontend: Next.js 15 App Router with Turbopack, React 19, Tailwind CSS v4
- UI: Radix UI primitives + Radix Themes, Lucide icons
- Motion + carousels: Framer Motion, react-awesome-reveal, Embla Carousel, Slick
- i18n: next-intl
- State: Zustand
- Backend: AWS Amplify, Lambda + Express, MongoDB Atlas via Mongoose
- Editor: SunEditor for marketing-managed copy
My role
Built the public site end-to-end and the admin pieces that feed it. Worked from a designer's mockups for visual direction; everything else — i18n setup, motion budget, carousel choices, device-specific tuning — was mine to call. Took the project through the client's UAT process and shipped it to production.
What I learned
A motion-heavy corporate site is mostly an exercise in restraint. Every reveal animation, every parallax, every carousel transition is a tax on first paint and on mobile data. Making it feel premium without making it feel slow meant being deliberate: react-device-detect gates the heavier animations on mobile, motion-reveal triggers happen on intersection rather than load, and the carousels lazy-load offscreen slides. The other lesson was that going through a formal UAT for the first time changes how you write code earlier in the project — knowing every change is going to be reviewed against a numbered test case made me push for clearer feature boundaries from the start.
