All images were downloaded from Unsplash.
Landing page for fictional dental clinic "Brux". The site uses fixed header changes, scroll effects, and features a logo that follows the user's mouse movements around the page.
- Technologies used: JavaScript, HTML5/CSS3
Exercise in developing Design + Code's landing page by hand.
- Technologies used: React, Gatsby, Netlify, JavaScript, HTML5/CSS3
Responsive microsite for fictional music festival "Fifty Festival". The site implements CSS mix-blend-mode and uses CSS and JS to animate on scroll events.
- Technologies used: JavaScript, HTML5/CSS3
Responsive portfolio site for made-up photographer "Jenna Buchholz". It incoporates parallax, waypoint, and type effects to display the photographer's work artistically.
- Technologies used: JavaScript, HTML5/CSS3
Single page application allowing the user to search for GIFs using Giphy's API.
- Technologies used: JavaScript, HTML5/CSS3
Responsive microsite promoting Tokyo tourism.
- Technologies used: React, Netlify, JavaScript, HTML5/CSS3
Single page application made using the Mapbox API, showcasing an interactive map, data storage, and geolocation.
- Technologies used: React, Netlify, JavaScript, HTML5/CSS3
Landing page for a made-up plant store "Plant Life". It features a dynamic slideshow that incorporates randomness into its design while demonstrating mouseover and mouseout events. Its navigation is aided by a slide-out menu.
- Technologies used: JavaScript, HTML5/CSS3
Responsive site developed to showcase web motion graphics as SVG animations done using the Anime.js library. Tachyons classes are implemented to create a responsive grid system for the display of the animations and additionally to increase readability and loading speeds with as little CSS as possible.
- Technologies used: JavaScript, HTML5/CSS3
Type Checker is a text generator that uses text inputs, sliders, checkboxes, and select boxes to make JS interactions, dynamic typing, background colour changes, and different typefaces.
- Technologies used: JavaScript, HTML5/CSS3