CodePen Demos CodePen is an online community for testing and showcasing user-created HTML, CSS and JavaScript code snippets. And I showcase many snippets. Design of each pen is mine unless otherwise stated in the description of the pen.

Web Design, Web Development

Partial screenshot of a style guide

CSS Grid: Style Guide

A style guide and various page layouts, inspired by the Atomic Design principle. Each pen comes with five color themes, including the precious dark mode.

My Favorite WinFavorite Wins
Partial screenshot of a front page of the Marvel Magazine

CSS Grid: Marvel Magazine

I had a lot of Marvel information/trivia at the back of my head and one day, I decided to make a magazine with 14 different layouts.

My Favorite WinFavorite Wins
Screenshot of a stats dashboard

Taylor Swift UI Designs

A collection of 8 demos, inspired by each of Taylor Swift's album covers. Concepts vary from dashboards to landing pages. evermore (2020) coming soon.

My Favorite WinFavorite Wins
  • Listened to many of her songs while working on this, eventually contributing to my 0.5% top listener stat for Taylor Swift on Spotify
Screenshot of four web toggles

Toggles

As part of a few joke pens I did, these are some toggles that I kinda want to see sometimes. Not to be taken seriously.

My Favorite WinFavorite Wins
Partial screenshot of a workout assistant app

Workout Schedule

One of the more JS-heavy projects I've done, the concept of this tool is to track workout challenges. Inspired by my lack of ability to keep up with workout challenges during quarantine.

Screenshot of a Peru map illustration with stats on the left

26 Days in Peru

I recently took interest in data visualization. But instead of using JS for graphs, I took the JS-for-graphics route. Map animated with GSAP ScrollTrigger.

My Favorite WinFavorite Wins
  • I get to show off my travel expense data
Screenshot of titles and sketch-like elements

Bullet Journal Styles

Inspired by bullet journals, this demo includes sketch-like buttons and borders, highlighter effects and washi tapes!

My Favorite WinFavorite Wins
Screenshot of the cover of the Marauder's map

Harry Potter: Marauder's Map

My favoritest Codepen deserves a spot here! Saying the words 'I solemnly swear up to no good' and 'Mischief managed' will open and close the map respectively.

My Favorite WinFavorite Wins
  • The fact that it worked, since I had zero expectations