I'm Eric, the co-founder of Versive, an AI-powered survey platform. Before starting Versive, I worked in product and design, most recently at Vareto, Uber, and Bread.
I spent New Year’s weekend rebuilding my personal website (ericli.io) as a game-inspired interface.
Here's how I did it (with some takeaways at the end).
The idea
I’m a self-taught designer and developer who loves to learn by creating. I think a personal website is the perfect place for learning and experimenting. In fact, the last version of my website had an animated lucky cat from when I was learning 3D modeling.
Over the holidays, I read Tomorrow and Tomorrow and Tomorrow, a book about friends who start a video game company. This made me want to build a game, but I didn’t have the time. So, I tackled the more modest goal of redesigning my website with game-like features.
I treated this redesign as more of a creative outlet than as a practical way of showcasing my work and resume. As a designer who now spends most of my time writing code and talking to customers, this project was a nice escape that allowed me to explore something creative without business constraints.
I tried to keep the scope small. I’d create a site where you could use the keyboard to move a character around, like in a retro side-scrolling video game. As the user navigated, I would tell a story with text.
"I treated this redesign as more of a creative outlet than as a practical way of showcasing my work and resume. As a designer who now spends most of my time writing code and talking to customers, this project was a nice escape that allowed me to explore something creative without business constraints."
I time-boxed the project to New Year's weekend so I could return to focus entirely on Versive after the holiday break.
Charting a course
First, I decided how I would build the site. I built my last site with plain HTML, CSS, and Javascript. This time, I wanted to support more interactivity and the option to add more complex features in the future. I decided to use Next.js because I was familiar with it and knew I could get something live quickly.
I also researched libraries like Phaser and PixiJS that could help me implement game mechanics, like rendering sprites and handling physics. After getting some advice from ChatGPT, I decided these libraries were overkill and could simply implement the features I wanted with Javascript.
Creating the design
Next, I started to create some rough designs in Figma. My original thought was to keep the site minimal, with an avatar of me and some giant scrolling text telling my story.
I worked on drawing myself as a low-res avatar. I had never created pixel art or character sprites before, so I did some googling and found lots of helpful examples (🧡 Pokemon fan art).
I drew my character using the rectangle tool in Figma and created variations for standing and walking animations. I kept refining this as I built out the rest of the site (I'm still not completely happy with it).
In the midst of my rectangle-drawing struggles, I tried generating an avatar using Midjourney, but the output wasn’t great. While I was using Midjourney, though, I thought it might be cool to try generating some background images for the site. I tried creating a scene of a street in Brooklyn (where I live), and it came out beautifully on the first try.
So, I decided to generate images to accompany all of the text in my story. I created some more street scenes, a tech company office, and the University of Chicago campus. This took a bit of iteration, but I ended up with five images in the same visual style. I then edited the photos in Figma to darken them.
Time to build
I started building the site as I was designing it. I find that I get the best balance of speed and quality when I design partway and finish iterating in code.
I started by creating a project using create-next-app. I then started building out the interface and logic. I won’t go into all of the technical details, but this included:
- Rendering the avatar and animating the walking and standing states
- Handling keyboard inputs for side-to-side movement and jumping
- Building the UI to string together all of the different background images and associated text
- Building the animations for showing page elements based on the avatar’s position
- Building the navigation and the traditional text-only version of the page
Along the way, I also made some design updates. For some scenes, I made small adjustments like adding color transitions. For others, I decided to switch from using a background image to creating an animated visual using HTML, CSS, and Javascript.
Once I had most of the site working, I spent just as much time testing and fine-tuning, including:
- Making sure the site worked on all screen sizes
- Adding on-screen controls for mobile and tablet sites where the user didn’t have a keyboard
- Fine-tuning the sprite animation speed, walk speed, and gravity
- Fine-tuning the timing of transitions and animations
I used a few tools to speed up development. In addition to Next, I also used Tailwind for faster styling and shadcn/ui’s sheet component for my navigation.
Finally, I also leaned very heavily on ChatGPT and Github Copilot. I used ChatGPT to sanity-check my approach to structuring the app. I used ChatGPT to write the first draft of entire features, like enabling the avatar to jump. I used ChatGPT to debug. I used ChatGPT to do things I could have done myself when my brain was tired. I don't think I could have finished this in a weekend without the help of AI.
Launching my personal website
Three days after I started, I deployed the site using Vercel. I created a Vercel project and connected it to my Github project and the domain I bought years ago on Google Domains (RIP 🪦). An hour later, everything was up and running.
Here's the final product:
Takeaways
So, would I recommend this approach to building a personal site? Yes and no.
First of all, this redesign was more of a creative exploration and learning experience than a practical approach. If I were a designer looking for work or a founder who wanted to build a personal brand around sharing my thoughts, I’d be much better served by keeping things simple and designing my site around the content.
That said, I do think this site reflects my personality and is a demonstration of my skillset. It’s also only the second most useless website in the Li family. My brother’s website takes the cake on uselessness (be sure to click the cat a few times).
"It was worth it for me because I got to learn new things and try out new tools. But for most people, you’re probably better off using a site builder that lets you focus on the content and customizing designs without building everything from scratch."
The other thing I’ll say is that this was a lot of work. I spent way too much of my holiday weekend staring at my computer. It was worth it for me because I got to learn new things and try out new tools. But for most people, you’re probably better off using a site builder that lets you focus on the content and customizing designs without building everything from scratch.
What I definitely don’t regret is setting an aggressive deadline and getting everything done in one push. Too often, I’ve spent weeks slowly creating something, only to never put it out in the world. It’s almost always better to ship a quick first version and then iterate.
On that note, I still consider the site a work in progress and there’s a ton I want to add. I’d love for you to check out my site and let me know what you think. If you have any ideas or questions or just want to get in touch, shoot me an email at hi@ericli.io.