![Partial screenshot of a style guide](https://assets.codepen.io/567707/codepen-styleguide_desktop.png)
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.
- #4 most hearted pen in 2019
- Probably the most retweeted
![Partial screenshot of a front page of the Marvel Magazine](https://assets.codepen.io/567707/codepen-marvel_desktop.png)
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.
- #25 most hearted pen in 2019
- Most effective for quick mental health decline
![Screenshot of a stats dashboard](https://assets.codepen.io/567707/codepen-tsui_desktop.png)
Taylor Swift UI Designs
A collection of 9 demos, inspired by each of Taylor Swift's album covers. Concepts vary from dashboards to landing pages.
- 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](https://assets.codepen.io/567707/codepen-toggle_desktop.png)
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.
- #7 most hearted pen in 2020
- I made a dog toggle
![Partial screenshot of a workout assistant app](https://assets.codepen.io/567707/codepen-workout_desktop.png)
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](https://assets.codepen.io/567707/codepen-peru_desktop.png)
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.
- I get to show off my travel expense data
![Screenshot of titles and sketch-like elements](https://assets.codepen.io/567707/codepen-sketch_desktop.png)
Bullet Journal Styles
Inspired by bullet journals, this demo includes sketch-like buttons and borders, highlighter effects and washi tapes!
- Someone else (besides me) actually used it in production
![Screenshot of the cover of the Marauder's map](https://assets.codepen.io/567707/codepen-marauder_desktop.png)
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.
- The fact that it worked, since I had zero expectations