Responsive One Pager for designer, Michael Suen, featuring an awesome load transition in a multi-layered skyline illustration. Cheers for the good build notes below.
This is a redesign that's been long overdue. Illustrated and coded in fits and bursts over a year, my personal website serves as a laboratory where I can play with design, as well as a landing page for attracting new client work. Inspired by Campo Santos' website for their upcoming video game Firewatch, I modified my own website's hero image to employ a similar parallax effect. I split my illustration into multiple layers that move at different speeds as you scroll. The result is a landscape that seems almost three-dimensional as you scroll. These kinds of additions excite me for the future of art and code intersecting on the web. The website is built with HTML, CSS3, JavaScript, and jQuery. It utilizes the responsive Skeleton boilerplate, Animate.css, Typed.js, and Waypoints. As someone who's primarily a designer by trade, this website was a enormous challenge to code. Patience, coffee, Stack Overflow, and the occasional design compromise won out in the end.
![How to build a long-scrolling Landing Page using Squarespace [video]](https://onepagelove.imgix.net/2020/05/opl-thumb-sqsp.jpg?w=360&max-h=190&fit=crop&fp-y=0)
