Ketty Shan

  • Design,
  • Front-end

Ketty Shan is a Principal Architect in Soho House Hong Kong.

Client
Ketty Shan
Year
2020

Ketty has a great experience and she wanted a simple, yet visually pleasing website where she could showcase her work.

Since I'm in the process of learning design, I offered to made website design by myself. I used a variety of pastel color palettes in conjunction with simple Swiss-inspired layout and typography.

Next, I mixed design with appropriate animations and page transitions. Motion is partly done with custom SVG on-the-fly generation, partly made with GSAP animation engine. The website also has custom smooth scrolling animation with a subtle skewing effect (pure vanilla Javascript). No visual effects external libraries besides GSAP were used, and thanks to that, the final bundle weight is pretty small. Combining with properly configured nginx server, CDN and browser caching this allowed us to hit 99/100 Google PageSpeed Score.

01 Front-end
  • Design
  • Vue.js
  • Nuxt.js for server-rendering
02 Animations
  • Custom vanilla SVG animation
  • GSAP powered
  • Custom vanilla smooth scrolling with skew
  • Organic page transitions using native Vue.js hooks
  • Every element have reveal animation
03 Speed
  • Minimum libraries used
  • Responsive images
  • Browser and CDN caching
  • 99/10 Google PageSpeed