About
Hello! I'm George, a front-end web developer based in Scotland.
I specialise in building dynamic user interfaces using modern HTML, CSS, and JavaScript, with a focus on usability, accessibility, and performance.
I frequently post my experiments with front-end technologies to CodePen and GitHub.
My projects have been featured in the CodePen Spark (Issues: 80, 94, 105) and CodePen's Most Hearted for both a project and a collection of projects.
If you're interested in working with me or have any questions then don't hesitate to contact me.
Projects
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 ProjectFull-Screen Background Video
Using CSS grid and the 'object-fit' property to create a full-screen background video.
View ProjectResponsive 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 ProjectLock & Unlock With Voice
Using the JavaScript speech recognition API to retrieve a spoken note from a user and display that note on-screen.
View ProjectFilter 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 ProjectTake Notes With Voice
Using the JavaScript speech recognition API to retrieve a spoken word from a user and perform an action if valid.
View ProjectChange Element With Voice
Using the JavaScript speech recognition API to retrieve a spoken element from a user a display that element on-screen.
View ProjectPhonetic Alphabet with Speech Synthesis API
Press a letter key and get the corresponding name from the NATO phonetic alphabet.
View ProjectEmoji Temperature Slider
A temperature slider that uses emojis to aid in envisioning how you'll most likely feel at the given temperature.
View ProjectTrick 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 ProjectLive Screen Effect Using matrix3d()
Using the matrix3d() CSS function to transform an iframe in 3D space to create an interactive laptop screen effect.
View ProjectRadial Gradient Spotlight Effect
Using CSS radial gradients to create a focusable spotlight effect.
View ProjectRefracted Floating Text Effect
Using pure CSS to create an animated refracted floating text effect.
View ProjectBlack 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