Jack Thomson

A stylishly creative Frontend Web Developer who strives to create a better front for the modern web

About me

I am a stylishly creative Frontend Web Developer who strives to create a better front for the modern web. I am currently working for Applied Card Technologies as a Junior UI Software Developer. In my spare time I like to learn new skills & keep up to date with the latest trends in everything digital. Please make sure to check out my Codepen for examples of my Front End work

My skills

My work

Food Time

Shroom Boy (Multiplayer)

Shroom Boy is a little game I made using Node.js, socket.io and all written in ES6. The mission is to collect as many mushrooms as you can before the timer runs out. Good luck!

Play the game Share this
close

Shroom Boy (Multiplayer)

Shroom Boy is a little game I made using Node.js, socket.io and all written in ES6. The mission is to collect as many mushrooms as you can before the timer runs out. Good luck!

Food Time

Lorsum

Lorsum is a little plugin I made to make adding lorem ipsum text to your web applications easier. I wrote this in ES6 just for practice also. I hope this comes in use to you & makes the whole process a little easier

Get the plugin Share this
close

Lorsum

Lorsum is a little plugin I made to make adding lorem ipsum text to your web applications easier. I wrote this in ES6 just for practice also. I hope this comes in use to you & makes the whole process a little easier

Food Time

Cute Or Not

Cute or not is a rating game based on dogs. I have built the project in terms of the server and api structure so it could be adapted to other animals if need be. Make sure you go have a go and let me know what you think!

Play the game Share this
close

Cute Or Not

Cute or not is a rating game based on dogs. I have built the project in terms of the server and api structure so it could be adapted to other animals if need be. Make sure you go have a go and let me know what you think!

Food Time

Food Time

FoodTime is a simple UI concept I created for a digital menu. The idea is for a business like Deliveroo to use when people create orders. It is an easy way for customers to track there orders in a fun & simple way. I hope you like it!

View this pen Share this
close

Food Time

FoodTime is a simple UI concept I created for a digital menu. The idea is for a business like Deliveroo to use when people create orders. It is an easy way for customers to track there orders in a fun & simple way. I hope you like it!

Film Reviewer

Film Reviewer

Lately I have been going to the cinema a bit too much. This is where this idea came into play. I decided to create a film reviewer app of some of my favourites to date! Built using Angular & following John Pappas style guide

View this pen Share this
close

Film Reviewer

Lately I have been going to the cinema a bit too much. This is where this idea came into play. I decided to create a film reviewer app of some of my favourite films to date! Built using Angular JS & following John Pappas style guide

Calendar App

Calendar App

Since starting my new job I have been super busy & learning a lot of new skills! With those skills I have created a simple calendar app! It follows John Pappas Angular style guide! I hope you like it!

View this pen Share this
close

Calendar App

Since starting my new job I have been super busy & learning a lot of new skills! With those skills I have created a simple calendar app! It follows John Pappas Angular style guide! I hope you like it!

Wallet App

Wallet App

I wanted to challenge myself with another Angular JS project so I decided to create this nifty digital wallet! You can add cards & view transactions on each card. I hope you guys like it I had a great time making this!

View this pen Share this
close

Wallet App

I wanted to challenge myself with another Angular JS project so I decided to create this nifty digital wallet! You can add cards & view transactions on each card. I hope you guys like it I had a great time making this!

Pens I Love

Pens I Love

This was a simple widget I made using Nate Wileys API! Recently, I have been exposed to API's in my new job so naturally when I got home I wanted to learn some new skills! That's where this idea came in to play

View this pen Share this
close

Pens I Love

This was a simple widget I made using Nate Wileys API! Recently, I have been exposed to API's in my new job so naturally when I got home I wanted to learn some new skills! That's where this idea came in to play

Weather Widget

Weather Widget

This was a small project I made to play around with Open Weathers API & in turn make my own weather widget! For this project I focused my attention on the UI & API technology! I hope you guys like it!

View this pen Share this
close

Weather Widget

This was a small project I made to play around with API's. I decided to use Open Weathers API & make my own weather widget! This project focused on the UI & API technology! I hope you guys like it!

Swanky Chatbox V2

Swanky Chatbox V2

Swanky Chatbox is a little project I made to test out my Angular skills! This is version 2 of my Swanky Chatbox projects & boasts a lot of new features! I learnt a lot from doing this project & really enjoyed it! I hope you like it!

View this pen Share this
close

Swanky Chatbox V2

Swanky Chatbox is a little project I made to test out my Angular skills! This is version 2 of my Swanky Chatbox projects & boasts a lot of new features! I learnt a lot from doing this project & really enjoyed it! I hope you like it!

Angular Cookbook

Angular Cookbook

This was a simple concept I had for a digital cookbook that could be used in restaraunts when choosing your meal giving customers a new way of exploring foods! This was a great project to test out my Angular skills! I hope you like it!

View this pen Share this
close

Angular Cookbook

This was a simple concept I had for a digital cookbook that could be used in restaraunts when choosing your meal giving customers a new way of exploring foods! This was a great project to test out my Angular skills! I hope you like it!

Nifty Slider

Nifty Slider

This was a little project playing around with CSS Scroll Snap Points & created this nifty little services slider :D! It only works in Safari, IE & Edge as Chrome doesn't support scroll snap points just yet (boo hoo)!

View this pen Share this
close

Nifty Slider

This was a little project playing around with CSS Scroll Snap Points & created this nifty little services slider :D! It only works in Safari, IE & Edge as Chrome doesn't support scroll snap points just yet (boo hoo)!

Flexy Product Cards

Flexy Product Cards

As you may of noticed from some of my pens I am a huge fan of Flexbox! This pen was just a little play around using flexbox techniques, creating some super slick product cards with a swanky animation! I hope you like it!

View this pen Share this
close

Flexy Product Cards

As you may of noticed from some of my pens I am a huge fan of Flexbox! This pen was just a little play around using flexbox techniques, creating some super slick product cards with a swanky animation! I hope you like it!

Anim Me

Anim Me

Anim Me is a simple CSS plugin which I created to make some funky line style animations that anyone can use on their projects! Go check them out via the link below & give them a go on your own projects!

View this pen Share this
close

Anim Me

Anim Me is a simple CSS plugin which I created to make some funky line style animations that anyone can use on their projects! Go check them out via the link below & give them a go on your own projects!

Sign Up UI

Sign Up UI

Playing around with more UI concepts - this time for a sign up page! I hope you guys like it! Really happy with how it turned out :D! Make sure to give yourself a username to get a custom greeting!

View this pen Share this
close

Sign Up UI

Playing around with more UI concepts - this time for a sign up page! I hope you guys like it! Really happy with how it turned out :D! Make sure to give yourself a username to get a custom greeting!

Play With My Toggle

Play With My Toggle

This project was a little challenge to myself to use checkboxes & CSS to create the toggle effect instead of using Javascript. I did need to use a bit of client side scripting to access the DOM & change the background colour!

View this pen Share this
close

Play With My Toggle

This project was a little challenge to myself to use checkboxes & CSS to create the toggle effect instead of using Javascript. I did need to use a bit of client side scripting to access the DOM & change the background colour!

Delivery Tracker UI

Delivery Tracker UI

I wanted to create a dashboard for a delivery courier tracking application. I went for a minimal design with a pastel colour palette. This project was built using flexbox techniques. I hope you like it

View this pen Share this
close

Delivery Tracker UI

I wanted to create a dashboard for a delivery courier tracking application. I went for a minimal design with a pastel colour palette. This project was built using flexbox techniques. I hope you like it

Swanky Chatbox UI

Swanky Chatbox

These past few days I have been learning Angular.js & wanted to create a simple project using the new skills I have learnt. I decided to create a simple chatbox application with a gorgeous UI

View this pen Share this
close

Swanky Chatbox

These past few days I have been learning Angular.js & wanted to create a simple project using the new skills I have learnt. I decided to create a simple chatbox application with a gorgeous UI

Profile Card

Profile Card

I tasked myself with using only css to create tooltips! I achieved this using the :after pseudo selector & targeting a data attribute to show on hover. This was also a good project for me to play around with UI concepts!

View this pen Share this
close

Profile Card

I tasked myself with using only css to create tooltips! I achieved this using the :after pseudo selector & targeting a data attribute to show on hover. This was also a good project for me to play around with UI concepts!

Funky Loader

Funky Loader

I wanted to work on some nice looking UI stuff so I created this cool little download button with a real slick animation. I've always wanted to make something like this & I think it turned out really well! I hope you like it

View this pen Share this
close

Funky Loader

I wanted to work on some nice looking UI stuff so I created this cool little download button with a real slick animation. I've always wanted to make something like this & I think it turned out really well! I hope you like it

Diploma MSc Blog

Diploma MSc Blog

After the huge revamp of the Diploma MSc website, I was tasked to design and develop the companies new blog. This task involved me using Wordpress and creating a custom theme that matched our main design

View website
Local Storage To Do List

Local Storage To Do List

Just the other day I came across something called Local Storage. After hearing about this technology I went ahead and created a slick to do list which takes advantage of this new technology. I really enjoyed this little project I hope you like it too

View this pen Share this
close

Local Storage To Do List

Just the other day I came across something called Local Storage. After hearing about this technology I went ahead and created a slick to do list which takes advantage of this new technology. I really enjoyed this little project I hope you like it too

Smart Pipe Solutions

Smart Pipe Solutions

I was tasked to design and develop Smart Pipe Solutions website via a good friend of mine Dan Hawkins. For this project I had to use the Foundation grid layout and design a custom mobile navigation system

View website
Cherry Bean

Cherry Bean

Cherry Bean is the largest vending machine supplier in the UK and came to me to design and develop their new website. I was tasked to create a custom back end system and give them a way to manage their content with an easy to use CMS

View website
Shroom Boy

Shroom Boy

Shroom Boy is a simple game which I made to teach myself new skills such as Collision Detection and how to insert and retrieve data from a MySQL table via PHP. This game was inspired after competing in the Worldskills Finals

Play the game Share this
close

Shroom Boy

Shroom Boy is a simple game which I made to teach myself new skills such as Collision Detection and how to insert and retrieve data from a MySQL table via PHP. This game was inspired after competing in the Worldskills UK Finals

Diploma MSc

Diploma MSc

Diploma MSc is an award winning medical education learning platform for students around the world. This site was designed and developed alongside my working partner Richy Thomas. This site was revamped for Learna Ltd

View website
Keycode Finder

Keycode Finder

After countless times of needing to find a keycode I decided to make a tool which people can use to make the process that little bit easier. I hope this comes in handy for you! It sure has for me and has saved me a lot of time

View this pen Share this
close

Keycode Finder

After countless times of needing to find a keycode I decided to make a tool which people can use to make the process that little bit easier. I hope this comes in handy for you! It sure has for me and has saved me a lot of time

Jelly Monster

Jelly Monster

Jelly Monster is a simple yet really addictive game! For the past month I have been teaching myself jQuery and built this game to use all the new techniques I have learnt! I am looking to build a second game and cannot wait to release it

View this pen Share this
close

Jelly Monster

Jelly Monster is a simple yet really addictive game! For the past month I have been teaching myself jQuery and built this game to use all the new techniques I have learnt! I am looking to build a second game and cannot wait to release it

3D Paper

3D Paper

If your like me you've most probably heard of Apple TV's new OS, right? When watching the keynote I noticed the cool animation that happens when you hover over menu items. After seeing this I had to recreate it using pure CSS

View this pen Share this
close

3D Paper

If your like me you've most probably heard of Apple TV's new OS, right? When watching the keynote I noticed the cool animation that happens when you hover over menu items. After seeing this I had to recreate it using pure CSS

Funky Generator

Funky Generator

As I do, I played around with Sass, the pre processing language for CSS, and created this funky generator! You can create lines, lasers, flowers and circles! I had a lot of fun with this pen and looking to do a V2 for it

View this pen Share this
close

Funky Generator

As I do, I played around with Sass, the pre processing language for CSS, and created this funky generator! You can create lines, lasers, flowers and circles! I had a lot of fun with this pen and looking to do a V2 for it

ReflectOnCPD

ReflectOnCPD

ReflectOnCPD was my second commercial site build. It is a simple one page website which promotes the new app at Learna Ltd. Perch was installed in the backend so the team could update the website without any help from the tech team

View website
Touch Me Babey

Touch Me Babey

Inspired by of course, Googles Material Design. I've always seen this type of animation and wanted to try it myself! So here's my take! Thought I'd give it a clever title because I know you can't resist but touch it now

View this pen Share this
close

Touch Me Babey

Inspired by of course, Googles Material Design. I've always seen this type of animation and wanted to try it myself! So here's my take! Thought I'd give it a clever title because I know you can't resist but touch it now

Sass Generated Swatches

Sass Generated Swatches

Lately I have been getting into colour theory and get a real kick out of making kick ass colour palettes! I wanted to create a little colour palette generator using pure Sass! I achieved this using Sass' random() function

View this pen Share this
close

Sass Generated Swatches

Lately I have been getting into colour theory and get a real kick out of making kick ass colour palettes! I wanted to create a little colour palette generator using pure Sass! I achieved this using Sass' random() function

Expense Calulator

Expense Calculator

Lately I have found myself going overdrawn and I keep wondering why. I had to do something about it so I created this expense calculator! This was a great jQuery challenge to myself and I had a lot of fun doing it

View this pen Share this
close

Expense Calculator

Lately I have found myself going overdrawn and I keep wondering why. I had to do something about it so I created this expense calculator! This was a great jQuery challenge to myself and I had a lot of fun doing it

Solar System

Solar System

As I am a fan of everything space I decided to create a solar system using nothing but Sass and CSS3 animations! Along the way I learnt the use of Sass @for directives and how to use inset box shadows to make my planets look more realistic

View this pen Share this
close

Solar System

As I am a fan of everything space I decided to create a solar system using nothing but Sass and CSS3 animations! Along the way I learnt the use of Sass @for directives and how to use inset box shadows to make my planets look more realistic

Dashboard UI

Dashboard UI

Everyone loves dashboard ui's and I wanted to create a modern, fresh and responsive one. This was a little challenge to myself and the outcome was pretty cool! I used the Chart JS plugin for the chart data and visualisations

View this pen Share this
close

Dashboard UI

Everyone loves dashboard ui's and I wanted to create a modern, fresh and responsive one. This was a little challenge to myself and the outcome was pretty cool! I used the Chart JS plugin for the chart data and visualisations

Todo List

Todo List

Hands down my most favourite pen of all time. Why? This was my first project I ever made whilst learning jQuery. It took me about two days to complete and along the way I learnt a lot of new jQuery skills and had a lot of fun

View this pen Share this
close

Todo List

Hands down my most favourite pen of all time. Why? This was my first project I ever made whilst learning jQuery. It took me about two days to complete and along the way I learnt a lot of new jQuery skills and had a lot of fun

Red Planet

Red Planet

Focusing on the details of the planet using inset box shadows was my key aim with this pen. I wanted to create a great looking planet with pure CSS and create a realistic orbit using Sass' @for directives

View this pen Share this
close

Red Planet

Focusing on the details of the planet using inset box shadows was my key aim with this pen. I wanted to create a great looking planet with pure CSS and create a realistic orbit using Sass' @for directives

Learna Ltd

Learna Ltd

When I started at Learna Ltd I was tasked to redesign the companys main website. From this I learnt Perch (the really small content management system) and a bit of PHP / MySQL. It also taught me about the importance of accessibility

View website
Semantic Blog

Semantic Blog

My aim for this project was to create a semantic, modern blog design taking advantage of Flexbox techniques! This was my first project playing around with Flexbox and ever since then I have been in love

View this pen Share this
close

Semantic Blog

My aim for this project was to create a semantic, modern blog design taking advantage of Flexbox techniques! This was my first project playing around with Flexbox and ever since then I have been in love