Svelte redesign

.github/workflows/deploy.yml

@@ -0,0 +1,54 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches:
+      - main
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: pages
+  cancel-in-progress: true
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 24
+          cache: npm
+
+      - name: Configure GitHub Pages
+        uses: actions/configure-pages@v5
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build site
+        run: npm run build
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: build
+
+  deploy:
+    needs: build
+    runs-on: ubuntu-latest
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.gitignore

@@ -1,7 +1,5 @@
+node_modules
+.svelte-kit
+build
 _site
-.sass-cache
-.jekyll-cache
-.jekyll-metadata
-vendor
-
-Gemfile.lock
+.DS_Store

README.md

@@ -1,23 +1,23 @@
-# 5of12 Github Pages site
-For blogs and content relating to our projects and open source repositories.
+# 5of12 Site
 
-## Setup instructions
+This repository now builds the 5of12 site as a static SvelteKit app.
 
-The site is built with Jekyll, setup instructions here: [Jekyll Installation](https://jekyllrb.com/docs/installation/)
-That will take you through making sure Homebrew, Ruby and Jekyl are installed.
+## Development
 
-Once that's all setup install the github pages gem `gem install github-pages`
+```bash
+npm install
+npm run dev
+```
 
-### Local testing
+## Quality checks
 
-You can build and serve the files locally with Jekyll using `bundle exec jekyll serve` optionally with `--livereload`
+```bash
+npm run check
+npm run build
+```
 
-### Remote builds
+## Content
 
-Merges to main will trigger a github action to build the site using the same Jekyll config.
-
-# New Content
-
-New pages are created as Markdown files that get converted to html following the rules of the Theme.
-
-New blogs can be added by placing them in the `_posts` directory with a name formatted as `YYYY-MM-DD-title-of-blog`
+- Home and about pages live in `src/routes`
+- Journal posts remain in `_posts` and are parsed at build time
+- Static images and media are served from `static/assets/`

_posts/2025-04-07-a-cacophony-of-gestures.markdown

@@ -4,7 +4,7 @@ author: Pete Nancollis
 ---
 
 # TL;DR
-We built a gesture control library for Unity. One that isn’t tied to a particular source of input data and works outside XR. It is modelled on an Anticipation, Action, Reaction cycle to help development run smoothly. It’s called [Cacophony](https://github.com/5of12/cacophony) as a nod to the complexity that arises from the interactions between gestures when building applications with multiple controls.
+We built a gesture control library for Unity. One that isn’t tied to a particular source of input data and works outside XR. It is modelled on an Anticipation, Action, Reaction cycle to help development run smoothly. It’s called <a href="https://github.com/5of12/cacophony">Cacophony</a> as a nod to the complexity that arises from the interactions between gestures when building applications with multiple controls.
 
 ![Hands in a range of poses. forming confusing gestures](/assets/CacophonyOfGestures.png "Cacophony of gesturing hands")
 
@@ -60,5 +60,4 @@ With restraint and careful design however you can build some fun and engaging ap
 
 
 ## Try it yourself
-If you’ve read this far you are probably interested in trying the system out for yourself. The good news is you can! Check out the [Cacophony](https://github.com/5of12/cacophony) project on github and take a look at the example projects in our [Cacophony Playground](https://github.com/5of12/Cacophony-Playground) for some inspiration.
-
+If you’ve read this far you are probably interested in trying the system out for yourself. The good news is you can! Check out the <a href="https://github.com/5of12/cacophony">Cacophony</a> project on github and take a look at the example projects in our <a href="https://github.com/5of12/Cacophony-Playground">Cacophony Playground</a> for some inspiration.

_posts/2025-09-04-playtonik-looping.md

@@ -5,7 +5,7 @@ author: Tom Cartwright
 
 <iframe width="100%" src="https://www.youtube.com/embed/ByBfa3axGeE?si=slml7JWGrF8-ROK1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen style="border-radius: 15px; aspect-ratio: 1.78"></iframe>
 
-Get Playtonik on the [App Store](https://apple.co/4oTOgyW)
+Get Playtonik on the <a href="https://apple.co/4oTOgyW">App Store</a>
 
 ---
 
@@ -44,7 +44,7 @@ Now we're getting notes out, but they're not as we performed them - which for a
 
 To get around this, I thought of using the playback thread as a lookahead process instead of triggering the notes directly. Each fixed update frame, the thread will run and gather all the notes that should be played in the following frame. These notes are then collected into a buffer which can be read from the main thread, meaning that each frame only plays notes that should be played in that window of time.
 
-<img src="/assets//looper/lookahead_diagram.jpg" style="width: 100%">
+<img src="/assets/looper/lookahead_diagram.jpg" style="width: 100%">
 
 Success! The notes being played back now feel much more in time with how they were originally performed and the feature feels much more useful.
 

_posts/2025-09-05-musical-physics-poster.markdown

@@ -25,6 +25,7 @@ Unity is a great choice for this, due to its highly performant and flexible 2D &
 <video width="100%" controls loop style="border-radius: 15px" alt="">
   <source src="/assets/ADC_Playground_Clip.mp4" />
 </video>
+
 **Get Started:** link audio sources to collisions and make the engine your playground.
 
 
@@ -80,7 +81,7 @@ For example, swiping a finger over the shape in Playtonik will alter its angular
 
 It's super simple to target multiple platforms, with support for most common platforms built into the engine. Any area that the built-in tooling doesn't cover likely has a plugin, tailor-made by the vast Unity developer community.
 
-We've used plugins to handle [MIDI connectivity](https://assetstore.unity.com/packages/tools/audio/midi-plugin-for-mobile-and-desktop-198917) and [musical scale theory](https://melanchall.github.io/drywetmidi/).
+We've used plugins to handle <a href="https://assetstore.unity.com/packages/tools/audio/midi-plugin-for-mobile-and-desktop-198917">MIDI connectivity</a> and <a href="https://melanchall.github.io/drywetmidi/">musical scale theory</a>.
 
 ### Going native
 

_posts/2025-09-29-how-to-connect-ios-to-midi.md

@@ -38,7 +38,7 @@ iOS supports MIDI connections across a local network. This works over WiFi and c
 
 <img src="/assets/iOSmidi/NetworkMIDISetup.png" style="border-radius: 15px" alt=""/>
 
-Ableton have a nice guide for [Setting up a virtual MIDI network](https://help.ableton.com/hc/en-us/articles/209071169-Setting-up-a-virtual-MIDI-network) which has some details of how it works on different platforms
+Ableton have a nice guide for <a href="https://help.ableton.com/hc/en-us/articles/209071169-Setting-up-a-virtual-MIDI-network">Setting up a virtual MIDI network</a> which has some details of how it works on different platforms
 
 # Bluetooth MIDI
 
@@ -76,5 +76,5 @@ Note: As of Playtonik 1.5 the app doesn't show up as a virtual MIDI port. Playto
 
 # Find out more
 
-To find out more about Playtonik check out our website [5of12.co.uk](https://www.5of12.co.uk/#Playtonik) <br>
-For examples of how we integrate Playtonik into our music check out our [Playtonik Playlist on YouTube](https://www.youtube.com/playlist?list=PL4zuBsU0ueMlLnphaBhRjQ5iLQO9R2qMJ)
+To find out more about Playtonik check out our website <a href="https://www.5of12.co.uk/#Playtonik">5of12.co.uk</a> <br>
+For examples of how we integrate Playtonik into our music check out our <a href="https://www.youtube.com/playlist?list=PL4zuBsU0ueMlLnphaBhRjQ5iLQO9R2qMJ">Playtonik Playlist on YouTube</a>