Building an interactive portfolio

2026-08-03T00:00:00Z

About two months ago, I finally got around to building an interactive portfolio in the style of a 2D game (the code in the repo was written completely by me). This was inspired by a FreeCodeCamp post I saw back in 2024. In this post I’ll document the “behind the scenes” experience I had while working on the project because some aspects were trickier than I expected, despite the tutorial provided (which was very helpful, don’t get me wrong).

Foundation

First off, I did not simply fork the original project and replace the dialogue with my own – I’m more creative than that 😉. What I did was watch JSLegendDev’s YouTube tutorial in order to understand how he built his portfolio. Topics included the build tool (Vite), the game engine library (Kaboom.js or Kaplay.js; the latter is an active fork of the former), making/acquiring game assets, and the code organization. I paused and replayed segments, following along with my editor and terminal. The most significant deviation I made was during construction of the map. I arranged tiles and defined layers according to my liking. By the end of the tutorial, I had a functional static site, but there were some things that I wanted to tinker with.

Refining controls

I felt that the controls from the tutorial were a bit janky so I looked into improving them.

Mouse

There were two issues I observed with the original mouse controls (left mouse button to be exact):

When I rapidly clicked the mouse, the player character appeared to be sliding around. The fix I found was to add a mousepress handler with the initial animation speed doubled.
Supposing I held the mouse down to move the player and trigger some dialogue, if I moved my mouse cursor so that it was on the text window and let go, the player would continue to move nonstop towards my cursor until I clicked (press and release the mouse button) again. The fix I found was to pause the mousedown event upon the player colliding with a prop and resume when the user presses the mouse again.

Keyboard arrow keys

Although the tutorial did not cover how to move with the arrow keys on a keyboard, the source code in the repository did. Using that as a reference, I implemented keyboard support for player movement. One notable difference is that the sprite does not animate while multiple keys are held down. I fixed an issue where closing the dialogue with the mouse would cause the arrow keys to stop working because the canvas lost focus.

Note: one thing I didn’t figure out yet is how to prevent both mouse and keyboard input from interfering with each other. This causes extra acceleration and odd sprite animation.

Adding a guide NPC

I wanted to add a non-player character (NPC) to make things more lively. I used an elderly man sprite as my NPC and made him static, both for ease of implementation and as a design choice. Having the NPC move would make it more likely for the player to accidentally bump into him and trigger unwanted dialogue.

Adjusting for mobile experience

I applied a max-width and overflow-x: auto so that the dialogue would not cover too much of the screen on small viewports.

Closing thoughts

All in all, this was a pretty fun side project to work on. This was my first real foray with using a game engine, but I did watch some CS50G lectures (the archived 2018 version) last year so I had some rudimentary knowledge of game development concepts. An updated version, CS50 2D, was launched this year (2026) and I hope to complete that course eventually!

Starting my website!

2026-07-26T00:00:00Z

I’ve finally decided to launch a personal website. This is something I’ve wanted to do for a long time; I’m pretty sure my interest sparked around the time I learned about GitHub Pages (which would be ~2014 if memory serves me). I already know that I’m not the type to blog regularly, so I intend to use this website mainly as a repository to hold my thoughts and interests.

Why now?

Anyone reading this might wonder, why now after a decade plus of procrastinating? That’s a good question and something that I asked myself. First, I’ll go through some reasons I came up to not maintain a website. I’ll follow that with a breakdown of why I decided that it’s still worth it.

Although a personal website appealed to me, the effort in creating and maintaining one did not. When I tried starting in the past, I became finicky with all the details. You could call it analysis paralysis. I could always put this off and find something else to do with my time.
It’s 2026, so AI has been on the minds of many people these past few years. Any content uploaded to the web will be vacuumed as part of the data to train the next generation of LLMs. For reference, I’m on the fence when it comes to LLMs and generative AI at this point in time. I don’t dispute that they are useful, but their utility feels oversold. I’m also concerned about their wide-ranging impacts on the environment, economy, education, and society in general. It’s not a great feeling to know that my writing would be consumed by a few companies as part of their efforts to make everything dependent on them.
Making myself vulnerable. Sharing stuff publicly on the web invites an audience and everyone has an opinion, of which some can be expressed abrasively. Although unlikely, I hope to not be involved in any online drama. This was probably the biggest factor discouraging me from creating a personal website, but I’ve reached a point where I think it’s worthwhile.

Why I find a personal website still worth it

Public space

Having a personal website means that I have my own space on the web! A proof of my existence in the world. I can centralize my interests in one place and have it (mostly) under my control. I’d like to think that I’ve gotten wise enough that I can write meaningful posts that others may find useful or thought-provoking.

Marketing

For potential employers or clients, a personal website can demonstrate my expertise in software and document a history of it. I do have a GitHub account, but a code repository may not always be suitable for what I want to present, especially for those without a programming background.

Practicing writing

I have zero plans to include any LLM-generated text in my writing. My writing might contain awkward sentences and may meander at times, but it is also unmistakably me. I strongly agree with the phrase "why should I bother to read something you didn't bother to write?" (the earliest appearance of this I could find was from November 2024, but that itself was quoting from elsewhere), so I want to put effort into writing for potential readers. That requires dedicated practice over time.

Opportunity for self-driven learning

If I just wanted to write, it would’ve been simpler to do so on Medium or Substack. Having my own website lets me customize and tinker with it. Just from setting it up, I spent a couple of weeks researching static site generators, getting a sense of how to deploy a website, learning new templating formats, etc. Obviously it’s a lot more work (hence the procrastination I mentioned previously), but I get the benefit of learning a whole bunch of things.

With all that, I’m excited to share my thoughts, opinions, and whatever I find interesting in future posts!

Louis Tsui