hello, my name is

Callum Thomas

I am a Software Developer who is passionate about the dynamic and fast-changing world of technology. I am dedicated to continual learning and practising agile methodologies and seek to be involved in useful and impactful projects.

With a strong background in engineering and finance, I bring a unique perspective to the field of coding, combining my analytical mindset, problem-solving skills, and attention to detail to create efficient and effective software solutions.

When I'm not coding you will find me practicing jiu jitsu, playing volleyball, or cycling around the city. If you would like to get in touch send me an email at my contact below!

My Work

Next.js

TypeScript

HTML

CSS

Chakra-UI

Vercel

Traffic Tools is an open-source and free web app created for use by anyone within the town-planning industry. In developing the web app I aimed to create a tool that would be useful for professionals and laypeople, while encouraging innovation and knowledge-sharing within the profession.

I built Traffic Tools using Next.js with TypeScript, Google-firebase for user authentication, Chakra-UI for the component library, and the chart.js plugin for creating charts.

I enjoyed making each component as modular as possible, not only to eliminate repitition of code but also to use the calculators in future projects within the Traffic Engineering space.

PHP

MySQL

AWS-S3

Bootstrap

UX/UI

CentreSafe is a risk management service created for use by companies and NGOs. The CentreSafe portal allows users to quickly understand where the critical risks lie within their organisation, and to forecast upcoming risks. Risk management data within Centresafe is immutable allowing organisations to clearly see the risk treatment lifecycle from identification to mitigation and elimination.

I built CentreSafe using the LAMP software stack, which includes PHP, MySQL and hosting via AWS. I challenged myself by building the app without a component library, while using Bootstrap to fasttrack the CSS and provide a consistent feel.

Figma

Photoshop

Font End Design

UX/UI

Branding

I created brand guidelines and a web design template for CentreSafe. My primary goal was to establish a strong and consistent visual identity that would effectively convey CentreSafe's mission, values, and services. This document outlined the appropriate usage of CentreSafe's logo, defined a color palette that evoked feelings of trust, and security, and established a typography system that balanced professionalism with approachability.

Next.js

TypeScript

Vercel

Connect Five is an exciting web game built with Next.js and Tailwind CSS. The goal is to strategically connect five game pieces in a row on a 19x19 grid. Players take turns clicking on the grid to place their black or white circles. The game tracks the board state, checks for win conditions, and provides an intuitive user interface. With its seamless integration of React components and easy styling using Tailwind CSS, Connect Five offers a captivating and visually appealing gaming experience.

In its development, Tailwind CSS facilitated the creation of a modern design with offset div elements to create the grid. JavaScript and React hooks were used to implement the game logic, allowing for dynamic interaction and instant updates. With its focus on simplicity and user experience, Connect Five showcases my javascript proficiency and provides an engaging web app for players of all ages.

API

Javascript

Next.js

TypeScript

A retro and nostalgic Sliding Tile Puzzle game which brings back the excitement of your childhood. With five grid sizes to choose from, this app offers a challenging yet entertaining experience. Whether you're a puzzle enthusiast looking to sharpen your skills or a casual gamer seeking a brain-teasing pastime, this app has something for everyone.

The Sliding Tile Puzzle uses the Unsplash developer API to fetch random images for the puzzle. The image is then scaled based on its aspect ratio which allows it to fit into the puzzle pieces no matter the image or puzzle resolution.

Creating the puzzle board introduced some interesting javascript logic, as only one half of randomly generated puzzles are solvable. The solution for a randomised yet solvable puzzle comes from calculating the parity of the generated array, and swapping any two random pieces as required. More information regarding the solvability of sliding tile puzzles is referenced here.

Figma

Javascript

Next.js

TailwindCSS

This is my portfolio! I built it from a figma design by Oliver Wedd using tailwindcss and have hosted it on Vercel!

Wordpress

PHP

MySQL

Design

The New Zealand Orthotics & Prosthetics Association (NZOPA) commissioned me to revamp their website and member portal. NZOPA required that the site's would end up entirely in their hands which was a key consideration when choosing the CMS, which would ultimately need to be customisabile yet simple and maintainable. I set up a new Wordpress site and utilised plugins to:
  • Allow member sign-ups.
  • Show/hide content at different membership levels.
  • Accept online payments.
  • Allow members to upload case studies requiring a custom form.
  • Give admins access to creating new pages and blogposts.
I spent two sessions with NZOPA committee members to provide guidance and training for administering the Wordpress site. Overall the project was a success and we recieved positive feedback from members.

Wordpress

PHP

MySQL

Plugin

While working at Amber Organisation as a senior traffic engineeer, I provided key input to the design and functionality of the company website including custom HTML and CSS, implementing a child theme, upgrading to the latest version of Wordpress and PHP, optimising images for web.

A difficulty I found our clients had was the ease of signing quotes. In almost all cases our clients were unable to edit and sign PDFs which resulted in them printing off paper copies, signing by hand, scanning, and sending via email. I sought to overcome this challenge by providing a simple portal where clients could view and sign quotes on any electonic device and their details would be collected by us electronically.

I achieved this through custom Wordpress templates, a new MySQL table, and custom forms. The quote is uploaded by Amber and displayed via an iFrame.

Next.js

Chakra-UI

Wordpress

PHP

MySQL

Replatform

Modal Group had an existing Wordpress website and requested that it be replatformed using React. I chose the Next.js framework because of its speed and the ability to provide static HTML that is great for SEO.

I was able to quickly create elements across the website using the Chakra-UI component library, and customise the theme to suit the Modal colours. The result is a website that is better than 1:1, providing speed, responsiveness, and customisability while not losing out on SEO from static HTML/PHP.

Visual Basic Script

Windows OS

Productivity

File structures within large organisations can often be cumbersome and difficult to navigate. This FolderFinder short-cutting tool that I have created directly opens a folder based on a search string of the first 3 letters, as input by the user.

Code block (readme at end):
'FOLDER FINDER SCRIPT
Dim jobNumber
Dim tempString

Visual Basic for Applications

Macros

Windows OS

Productivity

Productivity is not always just about saving time and getting things done faster - often it is about saving our own sanity when doing repetitive tasks.

After nearly a decade of using Microsoft Outlook and being left without a quick filing system, I decided to make my own! It can be tedious to scroll through 10s or even 100s of email folders just to drop in a single mail item, even if you have them sorted in alphabetical or numerical order.

To use these macros they will need to be added into Outlook as macros. You can then add them to the quick access bar and run them with the keyboard shortcut Alt+[item].

The first macro will jump directly to the folder based on your search input.

Code block:
Option Explicit
Private m_Folder As MAPIFolder


The second macro will file the selected mail item(s) directly into the searched folder, without changing the screen focus.

Code block:
Option Explicit
Private m_Folder As MAPIFolder

Tech Stack

React

Nextjs

CSS

Firebase

HTML

Javascript

MySql

PhP

Bootstrap

TailwindCSS

Chakra-UI

Wordpress

Contact me

Send me a message at callumdavidthomas@gmail.com

Thanks for visiting my portfoliio!


Copyright 2023