My new personal site
I made a new personal site. You can find it here.
Inspiration
For the layout, I took inspiration from two pages — the iPad Pro splash page and the Gun.io home page.
The horizontal scrolling on the iPad page captivated me. The animations and the way everything moved with the scrolling felt more like sitting through a carnival ride than browsing a website.
Gun.io’s homepage felt incredibly Sci Fi. The background images looked like they were taken straight out of Blade Runner, and the parallax scrolling effect gave the background a sense of depth. Furthermore, my own art style is very similar to Gun.io’s background art.
The idea was to combine Gun.io’s sci fi feel with the iPad page’s horizontal scrolling, to make something that felt more like a videogame than a website.
For the design of the character surfing around, I took a lot of cues from Yoji Shinkawa, the lead designer on the Metal Gear games.
Making the site
The art was all done on my iPad, using ProCreate.
I ran into a slew of problems building the site itself. Originally, I positioned each background image as it’s own layer, with its own 3D transform. That worked, until I added more background images, which brought the framerate down to 20 FPS.
I ended up having 3 background layers, each containing a series of building images. That ran a lot better.
Out of habit, I started building the site using React. Halfway through I realized I didn’t need the framework for what I was doing at all, so I ended up converting it to plain Javascript to increase performance and save space.
The final challenge I ran into was reducing file sizes — the site has a ton of images that need to be kept at a reasonable resolution. I started by reducing the resolution, but at a certain point that ruined the look of the site, and the files were still too large.The breakthrough was when I found indexing the image (reducing the number of colors supported in the image) reduced the filesize by half without impacting the resolution much at all.
I also gave up completely on converting the scroll/animation to mobile. The site displays a static page when you visit on mobile, because building all the scrolling animations and having it perform well on a mobile CPU would have been near impossible.
Next Steps
I plan on finding a way to use Medium’s API to scrape my blog posts and put them on my site automatically.
