Solo dev on this client project to produce a basic Next.js app router site for LAB. This allowed me to practise using scroll snap CSS feature while also ensuring for the most optimised experience for the end user. Utilised importing static images to help reduce the size of images.

This project helped me to:

• Create a highly optimised and accessible front end following a series of figma designs

Next.js 14 project, utilising server actions, linking a Postgresql database via a Prisma ORM. Renders sticky note data onto a canvas for optimised performance. This project is still in progress and is still being actively worked on.

This project helped me to:

• Use Next.js' new server actions
• Learn to utilise Prisma in a Next.js 14 project to connect to a Postgresql database
• Implement a canvas renderer

This project fetches predefined data and displays it in either a box plot, line graph or a bar chart. Furthermore, users can check their own statistics against this predefined data. This comparison is displayed in a custom box plot.

The graphs were implemented using SVG and animated using framer motion. This project helped me to:

• Create a fluid experience with data visualisation that seamlessly switches between graph types.
• Create a custom slider component that allows for a pleasant and intuitive UX.
• Collaborated with another developer to produce a clean implementation of this data visualisation project.

Worked in a team to create a basic dashboard presenting various data visualisations of tables, and line charts for a client.

This project helped me to:

• Develop my team working skills
• Develop a number of components that were used in this dashboard, adhering to the projects conventions for cleaner code

Worked in a team to build the xenonarc website. My responsibilities were animating the background and logo on the front page. As the project moved on, I contributed further by bug fixing.

The background and logo were animated using framer on SVGs.

This project helped me to:

• Gain experience in working in a team with a large client.
• Produce code that was being delivered on a real client project.

Worked with a local band to create a promotional webpage. The user types and submits a phrase, then an animation of any matching words with their corresponding number of submissions is displayed in a floating circle on a canvas element.

Initial data was scraped via a python reddit scraper and was developed with React, canvas, matter.js, d3 and integrated with a PostgreSQL database using knex. This project helped me to:

• Work effectively with a client to ensure their needs were met regarding functionality and design.
• Utilise matter-js to simulate the physics of the bubbles and render them with canvas.
• Learn how to use Knex to connect to a PostgreSQL database and perform simple transactions.

This passion project as part of my time at Univers Labs utilised my knowledge in machine learning to produce an image generator for shoes. The implementation gives the user the options to refine strange and wonderful designs, all in a simple and clear UI.

The model used was StyleGAN2-ADA because we only had a few thousand images to train on, each of which was 256 pixels squared. The model is loaded in and images are produced via built in nextjs API calls. We also allowed for social media sharing with each unique shoe, keeping the image in the metadata using opengraph. The fun animations were implemented using framer.

This project helped me to:

• Deploy a pretrained machine learning model on a Next.js project.
• Embed data that is used to generate each shoe.

Recreated the simple game of snake- but with bacon. Nothing serious, just a bit of fun! Uses keyboard input for movement, and tracks high scores. Also allows for multiplayer by using websockets (coming soon). This project helped me to:

• Learn the basics of game development by implementing a game loop, and separating this from the renderer.
• Use websockets for fast transmission of data.

Used threejs to render a 3D model of the solar system. It is not visually to scale, but implements a good enough approximation of gravity between bodies. The implementation allows the user to move the camera around freely to observe.

Threejs was used to render, and cannon-es to simulate the physics system. Cannon-es has no preexisting function for the force of gravity so I created a custom function that calculates the gravitational force exerted between two bodies. This project helped me to:

• Render a 3D system with lighting effects.
• Simulate spherical bodies in a system where gravity is the only force exerted.
• Experiment with time scales and other simulation related variables.

Continuing my experimentation of 3D systems and spherical bodies, this project is a very simple implementation of balls on a surface. There is friction, lighting and the user can interact with the bodies by clicking them. Collisions are simulated accurately using cannon-es again.

Just like the solar system simulation, this uses three.js for the rendering and cannon-es for the physics simulation. This project helped me to:

• Understand cameras and perspective when working in a 3D system.
• Apply a force in a system based on mouse position and camera perspective.

Fetched data from this git repository and plotted a line graph of deaths from COVID-19. Allows the user to specify any country and any time period that is in the data. Used d3 to help calculate the axes scale and plotted using SVG. Used framer-motion to animate the loading in and out animations. This project helped me to:

• Learn to scrape data from csv files using fetch.
• Use d3 (specifically d3-scale) to calculate mouse positions to allow for the hover tooltip.
• Make a simple loading animation while data was fetched and processed.
• Use framer motion to load the line plot in and out.

Using canvas to create a simple tool to doodle. Brush colour and size is randomised. Implemented using canvas again. The brush and the paint are on separate canvases which allows for much better performance. This project helped me to:

• Understand rendering on canvas and how we can separate components apart.

The user clicks on the screen which triggers a shape to be rendered at that position, expanding from a point. The shape randomises the number of sides on the regular polygon, the type of easing function, the duration (between set bounds), colour and opacity. Implemented using canvas and ensures that the shapes will always be within the bounds of the canvas and never overlap outside. This project helped me to:

• Learn how I could optimise canvas applications.
• Implement the necessary maths to calculate the possible size of the shapes without overlapping the border.
• Implement custom easing functions.