Web Projects

Simple Login

April 29, 2018

This is a recreation of the login page from simple.com. It is written in pure javascript and includes a few essential features:

1. If we type in a username then delete it, we get an error notification.
2. When we click the toggle button we can show/hide our password.
3. The Sign In button is disabled until there is a username and password typed in.

Pinterest Layout with CSS

December 23, 2017

A masonry layout created with pure css.
Artwork Credits: Nina Geometrieva, Mohamed Chahin, Creative Mints, Wiktor Półtorak, Steve Wolf, Alucard, Vic Bell, Sergey Pikin, Cameron Mark Art, Winnie, Julien, Pablo Vargas, Mantas, Thunder Rockets, Michael Flarup, Creature Box.

Countdown Timer

December 17, 2017

A countdown timer written in pure javascript with no libraries. When the timer reaches 0, the countdown resets to 24 hours. With the use of flexbox, the timer elements adapt to small, medium and large displays.

Twitter Heart Animation

November 6, 2017

This is a recreation of Twitter’s Like Button animation. The entire animation lives on a single sprite sheet. The animation consists of 29 different images with only 1 image shown to the user at a time. When the user clicks on the heart, the background image quickly steps through the sprite sheet to reveal the animation. I also created a custom button using CSS. The button animates when the user clicks on it.

Silky Smooth Box Shadow

November 3, 2017

Learned a neat trick from Tobias Ahlin for animating box-shadows. The technique allows us to animate shadows while maintaining optimal performance. Instead of animating the box-shadowing expanding, we animate a pre-scaled shadow's opacity. This creates the illustion that the shadow is scaling larger while keeping our animation frame rate high.

Advanced CSS Transitions

October 24, 2017

This is a recreation of an element on Sketch's website. A toggle switch that controls advanced CSS transitions. Many elements animate with their own timing and animation curve. Continuous floating animation. When the toggle is turned off, elements intelligently reverse animate to their starting point.

Tap Counter

October 18, 2017

A tap counter written in pure javascript. Simple use of variables, functions and event listeners. The tap counter is styled with flexbox and will adapt to different screen sizes.

Color Change Animation

October 15, 2017

Using CSS transitions to animate the background and logo. The colors are sourced from Google's logo and transition to each color on an infinite loop.

Language Selector

September 15, 2017

A language selector created using a checkbox, label and css. The aesthetics heavily borrows from Stripe. The checkbox is hidden and when the label is clicked, more languages animate into view. Clicking the label again reverses the animation and hides the languages.

Google

August 16, 2017

I recreated the Google homepage and added the ability for it to be responsive. This means the site intelligently adapts to different screen sizes. The user interface rearranges itself for optimal desktop and mobile experience. For example, when viewing on a small screen, the search bar reveals a search button but hides itself on a large display.