Personal Website Creation

Why make a website?

  • Present a digital identity that persists and is available to view from anywhere
  • Curate certain photographs to display, rather than only having an instagram feed
  • Play with new web technology to create something fun and not for clients

Goals and considerations

  • Performant, with static HTML code and optimised images
  • Enjoyable to develop
  • Accessible
  • Personal and customisable

Development

After considering several options, like 11ty, gatsby, nuxt, elm, I decided to use Svelte with Sapper. I'd never used Svelte before - only read the docs and played with it online, but had heard good things and liked the philosophy behind it - compiling the JS to ship without a framework (shifting the work from the user to the compiler) and having clean syntax. Sapper has proven to be good so far, providing server-side rendering, sensible routing options, and other optimisations out of the box. For styling, I'm still not sure I've settled on the best solution, but it is enjoyable to develop with - using tailwind with postCSS. I can write nested styles - scoped to components if I want, or globally if not - with utility classes on the elements themselves or @applying them quickly to components. I could just use tailwind out of the box but coming from a BEM background, I like the ability to nest styles.

It took a bit of configuration to get it working but in the end I have tailwind working nicely within style blocks in svelte files or in css files themselves, with unused styles purged after build. Negatives:

  • Doesn't use css custom properties (I guess I could set them up in the tailwind config)
  • VS code css linting doesn't like it too much.

The Eye

Falling under the goals of making the website personal and enjoyable to develop, I decided to add the eye which follows the cursor. It could be improved but I quite like it. The iris is my own as a photo fill in the svg.

Blog

I never intended to have a blog. I don't think my thoughts are valuable enough to take up space on the internet, or interesting enough to warrant having a blog, and I don't like the idea of having my words uploaded to the internet forever... But as I started developing, I thought about putting things somewhere that didn't fit in other sections, as well as a collection of links to content I found interesting myself. A bit like a digital garden, as I saw someone say recently. Where links will die evenually, but most corners of it will have something interesting. Dateless. Some more developed than others. It would also serve as a reference I could come back to to look for things, or by serving a random one, a place to find something to read or watch if bored. We'll see if it develops.

Images

Choice

A hard part of creating the website was choosing which photos to show and how. The idea was to have a more custom curation of photos than a simple instagram feed. To be able to display them as small sets, or as individual photos mixed with audio, text, or otherwise interactive. It's still a work in progress, and the selections I have started with are liable to change as they were just that - selections to start with in order to get something up.

Delivery

To organise and deliver the images, I created a script to resize all images in a source directory to various sizes, and convert them to webp as well as jpg, using sharp. This has ended up with fairly small images and hopefully fast loading.

Conclusion

There are still a lot of improvements I want to make, but I think that so far I have acheived the main aims of a performant, personal website with some content on it, which is better than the previous stasis of n o t h i n g. Time will tell whether the technology choice was the right one but it has been challenging and fun to get it set up.

Screenshot of lighthouse score for this website's blog page

Pretty pleased with the performance in the end :)

Back to blog
Random photo