Wupxy v2
A refined iteration with better performance and motion.
Iterasi portfolio dengan animasi, dark mode, dan penjelasan teknis per project tanpa korbankan performa.
Visit project websiteMy role
Full-Stack Developer
My contribution
- Redesigned the UI
- Implemented animations
- Refactored to TypeScript
- Optimized SEO and performance
[01] Story
Problem [02]
[03] Approach
Goals
StageImprove UX while sustaining high performance.
Challenges
StageBalancing animation with load and interaction speed.
Context
01Audit v1 UX: key pages, reading time, and navigation patterns.
Direction
02Polished UI, clear heading hierarchy, GPU-friendly motion components.
Implementation
03- Next.js with TypeScript
- Framer Motion for animation
- component refactors
- stronger accessibility and SEO.
Delivery
04- Vercel with bundle analysis
- lazy-load heavy sections.
Collaboration
05Guide to adding new projects/pages with copy examples.
Tech Stack
Tools & libraries that power the project
next.js
typescript
tailwindcss
sass
framer
vercelResult [04]
Browsing feels more delightful without compromising speed.
- SEO
- 100/100 (Google Lighthouse)
- pageSpeed
- 99/100 (Google Lighthouse) with internet upto 50Mbps
[05] Gallery
Continue through selected work
View all
TherMemo — Photobooth & Keepsakes
A self-initiated photobooth business combining a physical booth, automated QRIS payments, and printed keepsakes. I led its development from concept to launch and café partnership negotiations.
Suka Marga — Village Tourism
A tourism and local-business platform created with a village community. As Branding Lead for Website & Digital Assets, I co-built the website and contributed hands-on development.