Projects in Awesome Lists by georgewpark

This project demonstrates how CSS grid and the 'object-fit' CSS property can be used to create a background video that scales to cover the full screen while maintaining its aspect ratio.

css css-grid design layout video

Last synced: 05 Mar 2025

https://github.com/georgewpark/css-gradient-rounded-borders

This project demonstrates a simple method of applying a CSS gradient to a rounded border using background-clip, providing a solution to the problem where border-radius alone won't create rounded corners when a gradient is applied using border-image.

border border-radius css css-gradients design rounded-corners

Last synced: 05 Mar 2025

https://github.com/georgewpark/pizza-builder

A 'create your own' style visual pizza builder using React.

css javascript pizza react typescript

Last synced: 24 Feb 2025

https://github.com/georgewpark/refracted-floating-text-effect

This project demonstrates how pure CSS can be used to create an animated refracted floating text effect.

3d animation css refraction text-effect

Last synced: 05 Mar 2025

https://github.com/georgewpark/responsive-emoji-toggles

This project demonstrates how pure CSS checkbox functionality can be used to create a variety of responsive emoji toggles.

checkbox css emoji toggle toggle-switches

Last synced: 05 Mar 2025

https://github.com/georgewpark/css-gradient-clip-path-borders

This project demonstrates how the CSS clip-path property can be used to create a variety of shaped gradient borders.

border clip-path css css-gradients design

Last synced: 05 Mar 2025

https://github.com/georgewpark/cosmic-coder

Game-based learning environment designed to teach programming concepts.

Last synced: 05 Mar 2025

https://github.com/georgewpark/spacex-launches-table

This project demonstrates how React and the fetch API can be used to retrieve mission/launch data from the SpaceX REST API and display that data in a responsive table.

css fetch-api javascript react spacex spacex-api table typescript

Last synced: 05 Mar 2025

https://github.com/georgewpark/change-color-with-voice

This project demonstrates how the JavaScript speech recognition API can be used to take a spoken color from a user and display that color on screen.

color javascript speech-recognition web-speech-api

Last synced: 05 Mar 2025

https://github.com/georgewpark/3d-paper-shredder

This project combines the power of 3D CSS, background-clip, and a touch of JS to create a functional 3D paper shredder. Type to edit the text on the paper then press the green button to shred your text.

3d css text-effects

Last synced: 05 Mar 2025

https://github.com/georgewpark/free-to-play-games

Using React to display and filter free-to-play games retrieved from the FreeToGame API.

free-to-play games react tailwindcss typescript

Last synced: 05 Mar 2025

https://github.com/georgewpark/visual-studio-code-settings

My settings.json file for Visual Studio Code.

Last synced: 05 Mar 2025

https://github.com/georgewpark/simple-image-minifier

A simple image minifier using npm scripts.

image-minification image-optimisation imagemin imagemin-cli npm-scripts

Last synced: 05 Mar 2025

https://github.com/georgewpark/accessibility-demo

This site has been created as part of a technical talk and contains accessibility issues to demonstrate how to perform an accessibility review to identify these issues and determine appropriate fixes.

Last synced: 05 Mar 2025

https://github.com/georgewpark/giphy-search

This project demonstrates how React and the GIPHY search API can be used to retrieve GIFs based on a search parameter and display them in a masonry grid layout using pure CSS columns.

css fetch-api giphy giphy-api javascript react typescript

Last synced: 05 Mar 2025

https://github.com/georgewpark/decision-tree

This project demonstrates how a decision tree can be created using Tailwind CSS.

css decision-tree tablist tailwindcss

Last synced: 05 Mar 2025

https://github.com/georgewpark/time-agent

HTML5 build of game (WebGL required for rendering).

Last synced: 05 Mar 2025

https://github.com/georgewpark/halo-odst-superintendent-loader

An animated loader based on the superintendent AI from Halo ODST.

animation css halo loader odst

Last synced: 05 Mar 2025

https://github.com/georgewpark/filter-image-with-voice

This project demonstrates how the JavaScript speech recognition API can be used to take a spoken filter from a user and apply that filter to an image.

css css-filters image-manipulation javascript speech-recognition web-speech-api

Last synced: 05 Mar 2025

https://github.com/georgewpark/emoji-temperature-slider

A temperature slider that uses emojis to envision how you'll likely feel at the given temperature.

css emoji range slider temperature

Last synced: 05 Mar 2025

https://github.com/georgewpark/take-notes-with-voice

This project demonstrates how the speech recognition API can be used to retrieve a spoken note from a user and display that note on-screen with the ability to edit/delete notes and save them to local storage for later viewing.

javascript notes speech-recognition web-speech-api

Last synced: 05 Mar 2025

https://github.com/georgewpark/trello-board-layout

This project demonstrates how CSS Grid (with flexbox fallback) can be used to re-create the layout of a Trello board.

css css-grid design flexbox layout

Last synced: 05 Mar 2025

https://github.com/georgewpark/lock-and-unlock-with-voice

This project demonstrates how the JavaScript speech recognition API can be used to retrieve a spoken word from a user and perform an action (e.g. locking/unlocking a padlock) if that word is valid.

css javascript speech-recognition web-speech-api

Last synced: 05 Mar 2025

https://github.com/georgewpark/youtube-channel-layout

This project demonstrates how CSS Grid (with flexbox fallback) can be used to re-create the layout of a YouTube channel page.

css css-grid design flexbox layout

Last synced: 05 Mar 2025

https://github.com/georgewpark/black-mirror-cracked-text-effect

This project demonstrates how pure CSS can be used to re-create the cracked text effect from the Black Mirror TV show intro.

animation black-mirror css text-effect

Last synced: 05 Mar 2025

https://github.com/georgewpark/svg-theming-with-currentcolor

This project demonstrates how the currentColor value can be applied to SVG attributes allowing SVG elements to inherit the CSS color property defined on the nearest parent element.

color css currentcolor svg theming

Last synced: 05 Mar 2025

https://github.com/georgewpark/netlify-forms-test

Testing the functionality of Netlify forms.

netlify netlify-forms

Last synced: 05 Mar 2025

https://github.com/georgewpark/radial-gradient-spotlight-effect

This project demonstrates how CSS radial gradients can be used to create a focusable spotlight effect.

css css-gradients radial-gradient spotlight

Last synced: 05 Mar 2025