About
Hello! I'm George, a front-end web developer based in the west of Scotland, UK.
I specialise in building interactive user experiences using modern HTML, CSS, and JavaScript, with a focus on usability, accessibility, and performance.
Feel free to check out my portfolio to see examples of my previous work.
I frequently post my experiments with front-end technologies to CodePen and GitHub.
My projects have been featured in various web publications such as the CodePen Spark (Issues: 80, 94, 105), CodePen's Most Hearted 2018 for both a project and a collection of projects, and the Codrops Collective.
If you're interested in working with me or have any questions then don't hesitate to contact me.
Portfolio
Change Color With Voice
Using the JavaScript speech recognition API to take a spoken color from a user and apply that color to an element.
View Project
LastPass Vault Layout
Using CSS grid with flexbox fallback to re-create the LastPass vault layout.
View Project
Instagram Profile Layout
Using CSS grid with flexbox fallback to re-create an Instagram profile layout.
View Project
YouTube Channel Layout
Using CSS grid with flexbox fallback to re-create the layout of a YouTube channel page.
View Project
Image Gallery
Using CSS grid with flexbox fallback to create a responsive image gallery with no media queries.
View Project
Trello Board Layout
Using CSS grid with flexbox fallback to re-create the layout of a Trello board.
View Project
Full-Screen Background Video
Using CSS grid and the 'object-fit' property to create a full-screen background video.
View Project
Responsive Emoji Toggles
Using the CSS checkbox hack to create a variety of responsive emoji toggles.
View Project
GIPHY Search API
Using React to search for and display gifs fetched from the GIPHY Search API.
View Project
Rick and Morty Character Search
Using React to search for and display character information fetched from the Rick & Morty API.
View Project
Lock & Unlock With Voice
Using the JavaScript speech recognition API to retrieve a spoken note from a user and display that note on-screen.
View Project
Filter Image With Voice
Using the JavaScript speech recognition API can be used to take a spoken filter from a user and apply that filter to an image.
View Project
Take Notes With Voice
Using the JavaScript speech recognition API to retrieve a spoken word from a user and perform an action if valid.
View Project
Change Element With Voice
Using the JavaScript speech recognition API to retrieve a spoken element from a user a display that element on-screen.
View Project
Phonetic Alphabet with Speech Synthesis API
Press a letter key and get the corresponding name from the NATO phonetic alphabet.
View Project
Emoji Temperature Slider
A temperature slider that uses emojis to aid in envisioning how you'll most likely feel at the given temperature.
View Project
Trick or Treat Surprise Box
A Halloween "Trick or Treat" surprise box. Click to open the box with a 50/50 chance of getting a trick or a treat.
View Project
Live Screen Effect Using matrix3d()
Using the matrix3d() CSS function to transform an iframe in 3D space to create an interactive laptop screen effect.
View Project
Radial Gradient Spotlight Effect
Using CSS radial gradients to create a focusable spotlight effect.
View Project
Refracted Floating Text Effect
Using pure CSS to create an animated refracted floating text effect.
View Project
Black Mirror Cracked Text Effect
Using pure CSS can be used to re-create the cracked text effect from the Black Mirror TV show intro.
View Project
CSS Gradient Rounded Borders
Using the CSS background-clip property to rounded gradient borders.
View Project
CSS Gradient Clip-Path Borders
Using the CSS clip-path property to create a variety of shaped gradient borders.
View Project