Back to blog
[Build series]
Rebuilding my portfolio: creativity, code, and iteration
From static page to animated React/Vite experience, this documents how I balance personality, performance, and accessibility.
- Format
- Build series
- Stack
- React + Vite
- Focus
- Motion, a11y, performance
[01]
Approach pillars
- Ship in slices: design → scaffold → animate → test.
- Accessibility first: focus, contrast, and test coverage.
- Measure and tune with Lighthouse and bundle/perf checks.
[02]
What I have built so far
React/Vite SPA
Fast dev loop with route-driven rendering.
Animated hero
Intentional motion and scrolling cues.
Dynamic projects
Data-driven cards and case-study routing.
Automation
Content experiments via Zapier and Sheets.
Tests + SEO
Playwright + metadata + performance guardrails.
[03]
Challenges and solutions
Personality vs performance
Scoped motion and reused primitives to keep interactions expressive but fast.
Lighthouse consistency
Tuned image formats, loading behavior, and route prefetch strategy.
Iteration speed
Tokenized spacing/type/color and kept components composable.
[04]
What is next in the series
- Publish deeper posts on layout, motion, automation, and accessibility.
- Add interactive case studies with process toggles.
- Refine analytics around inquiries, not vanity pageviews.
Launching a Live Kids Party Shop + Rental Portal ERP
