I decided that I needed a personal website both as a learning experience, and a place to host stuff that I’m proud of. The first of which, is this website itself! After going through tutorials for every web framework under the sun, I decided to use Sveltekit becuase it was by far the easiest to understand. Hosting is handled by Github Pages with a little bit of extra work.

Hosting on Github Pages

Any Github user can host one Github Pages site for free with a few limitations. The default settings for a user site is to auto generate a Jekyll page based on markdown files in your repositiory. The real limitation is that Github will only display static pages. Since my website is meant to just show posts like this one, this isn’t a problem. Sveltekit can generate static pages by installing the static adapter and changing the adapter from auto to static in svelte.config.js

// import adapter from '@sveltejs/adapter-auto';
import adapter from '@sveltejs/adapter-static';

Then, I set up a Github Actions workflow to automatically build the website any time there’s an update. With those steps completed, the rest of this website follows a fairly normal web development workflow.

Wave Simulation

My main goal was to use the website as a place to write about my projects. But to give it a bit of flair, I created a wave simluation on the home page.

The simulation itself is fairly simple, being a subdivided plane whos vertices move according to waves generated by a shader. This tutorial on creating Gerstner Waves in Unity was a huge help in getting the math right. Since the tutorial was for Unity, however, I had to rewrite the shaders to work with three.js. This basically just meant recreating the shaders in glsl.

Storing Content

As a place to store information about my projects, I naturally need a way to manage the content. Initially, I was going to just create .html files for each page. But, keeping scalability in mind, this solution isn’t very sustainable. Leverging Sveltekit as a static site generator, allowed me to create a system to automatically populate pages with very little manual work from me. When the site is being generated, it indexes every .svx file in a content folder, and then automatically creates a new page for those. This way, adding a new page for a project is as simple as writing a new .svx file (custom markdown file from mdsvex)