DAVID FOSKETT

Why was this website created

I wanted somewhere where I could document and share my thoughts and experiences on designing, creating and maintaining software solutions. Some of the things I’ll be writing about include:

• Software architecture
• Software design and development
• Cloud architecture and development
• Technical ideas and innovation
• The Agile mindset and values
• Process improvement
• Software testing and quality assurance
• Software support, maintenance and DevOps

What is this website created with:

• Astro - web framework
• W3.CSS - CSS framework
• Three.js - 3D library
• NodeJs - JavaScript runtime environment
• Visual Studio Code - IDE
• Goxel - voxel model designer
• Cloudflare - website host
• Monster Markdown - a desktop app to write my posts

The Home Page

The home page was inspired by the Amiga demo ‘Elysium by Sanity’. I liked the idea of the individual cubes making up a shape, rotating in 3D space and then transitioning to a new shape. The voxel shapes were created with Goxel, exported and using a bespoke transformation tool converted to JSON objects. Three.js is used as the 3D library to display and rotate the cubes and the individual cubes positions move to their new location (the next voxel shape) using easing functions as does the change in cube colour.

The textual descriptions that fly in and out are again using easing functions, easeOutElastic is used for incoming text which is an oscillating curve that shrinks in magnitude while overshooting its bounds and easeInQuint is used for the outgoing text which is a cubic animation curve that starts slowly and ends quickly.

The starfield is GPU shader code rendered using Three.js. The starfield shader code was written by P_Malin and ‘borrowed’ from ShaderToy under the Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

The About and CV Pages

These pages are just HTML that use W3.CSS for layout and styling.

The Blog Page

The web framework used to create the blog (and website) is Astro. I had no experience with using Astro but there were some good templates to follow and learn from e.g. Frosti, Astrogen and Astro Micro. A lot of the features that I needed came ‘out-of-the-box’ e.g. static page creation, searching posts, icons, code syntax highlighting, reading times, RSS feeds, sitemap generation and site compression. Also supported is writing posts in md or mdx format, adding tags and categories to a post, pinning posts, draft posts and pagination. These are all the features I need to hopefully create interesting, informative and well written posts.

The Contact Page

Again Three.js provides the 3D library for displaying and rotating the cubes. The fractals that are on the faces of two of the cubes were going to be generated in real time but this proved to be too slow when loading the page. This meant they had to be pre-rendered using appropriate fractal math and code and saved as images, so when the page loads it just selects which set of fractal image files to load. Some of the fractals you see are the Mandlebrot set, a fractal tree, a Koch snowflake, a Sierpinski triangle and a dragon curve.