# Building my Website – Where it started

## May 30 2026

> Depending on when you read this, you should be able to see some of the features I discuss here live [on this very site](/content/en_US/index.md). Currently, Game mode is disabled though; I'm working on it.

### A bit of Context

A while ago the service I was using to host the WordPress site I was using as an online portfolio for around 10 years (which I had set up after finishing my Architecture Masters and never really updated) closed down.

After a few months of not really having the motivation to get back into updating the ancient WordPress setup; I finally decided it was time to have a bit of fun and write my own website from scratch.  
Did I initially consider using [Statamic](https://statamic.com)? Sure; I love it. But I can't be bothered with setting up a proper web server and maintaining it when I could just as well hand-code a lightweight system that fit my needs and host it for pretty much free on [Firebase](https://firebase.google.com/).

So of course; I took the [small codebase I had started putting together over the years for static sites](/content/en_US/websites/lightweight-static/lightweight-static.md)… and immediately had a ton of ideas of cool things I could do that would essentially mean re-writing it entirely.

### Website/Game?

The thing that got me really excited about this project was the idea of finding a basic game engine and turning my online portfolio into a fun little side-scroller game/experience. So I immediately started looking up what was available; and quickly decided that [Little.js](https://github.com/KilledByAPixel/LittleJS) was going to be the best match for my needs: simple, lightweight, easy to work with, and flexible.

My main concern with this approach was one of accessibility: if I were to make the site 100% a side-scroller; then I would essentially forfeit the amazing standards that have been set for accessible usability on the web, and alienate numerous people with physical, mental or visual impairments.

So I started mapping out a structure for the site that would act as a sort of "best of both worlds", where I could separate the content from the actual rendering, and thus have the option to render content in both a "game" mode, and a "website" mode.  
Here's the rough draft I had laid down:

```
	   ┌───────────┐
	   │Site Header│
	   ├───────────┤
	   │┌─────────┐│
	  ┌│Game View││
┌───────┐ ││└─────────┘│
│Content├─┤│	or     │
└───────┘ ││┌─────────┐│
	  └│Text View││
	   │└─────────┘│
	   ├───────────┤
	   │Site Footer│
	   └───────────┘
```

Things have changed a lot since then; but the basic concept remains the same. I'm able to write and structure my content in one part of my code; and the site's engine then dynamically displays it inside either a "game" view, or a "text" view. I'll likely cover this in more detail in the next post.

### Playing Around with Little.js

But first; I had to get my head around how Little.js works.  
At a bare minimum, I needed the engine to launch, and to be able to move a character horizontally.

So I set about creating a character, moving the character left and right, and using the sprite animations based on the character velocity and whether I had initiated an interaction with a world object.  
For anyone interested; here's the part of my code that handles this over on GitHub: [player.js](https://github.com/ELowry/EricLowry-Portfolio/blob/374a8a2d8aa9b5df64310dbdf1000041bddeb5d3/src/js/modules/player.js) This links to a specific version because this script will likely start handling a few more things at some point.  
There's a lot going on in that code; but it essentially boils down to setting the correct sprite loops/animations based on the character's velocity and whether he is interacting or not.

But of course; this was much more of an iterative process; and I only really got the animations right by drawing and playing around with the sprite:

<p>
	<img class="md-img" width="429" height="36" src="/assets/sprites/eric.png?border=true" alt="The game mode character sprite sheet" style="width: 100%; height: auto; image-rendering: pixelated; image-rendering: crisp-edges;" loading="lazy" decoding="async">
</p>

Because I have very little pixel art and animation skills at this point; I took inspiration from a game I adore for the walk cycle: [Superbrothers: Sword & Sworcery EP](https://www.capybaragames.com/games/superbrothers-sword-sworcery-ep)

<!-- prettier-ignore -->
| Gallery |     |
| -- | -- |
| ![The idle animation, with randomized head movements](/assets/images/blog/20260530/idle.gif) | ![The walk cycle animation](/assets/images/blog/20260530/walk.gif) |

<!-- prettier-ignore end -->

To be clear; I tried to recreate the walk cycle through observation alone, so the final result is maybe 30% similar; and I had to improvise for the stopping and interaction animations.

I added some dummy "interaction nodes" that I later turned into actual interactive objects that get spawned based on the content structure, and ended up with a satisfactory little scene that let me walk around and interact with world objects:

<!-- prettier-ignore -->
| Gallery |
| -- |
| ![Screenshot of the early game mode view for this Portfolio](/assets/images/blog/20260530/game-mode__240-135-webp_240-135_400-225-webp_400-225_600-338-webp_600-338_820-461-webp_820-461_1400-788-webp_1400-788_1920-1080-webp_1920-1080.jpg) |

<!-- prettier-ignore end -->

### Up Next

Next time I'll cover how I set up the content structure using Markdown, and how I got it to display in both the "game" and "text" modes using [Marked](https://github.com/markedjs/marked).