A year in pixels (using CSS Grid), inspired by Bullet Journal.
I find Bullet Journaling a fascinating and modernized twist to traditional scrapbooking. It is at an intersection of a diary, a to-do list, a goal-setter, a notebook– really anything you want it to be.
Bullet Journaling is usually done in a physical journal, but I wanted to use it in a different context.
I was inspired to take this physical journal with me and transpose a template part of it onto the web: A year in pixels, where you can at a glance see how your day went.
- The nav is simple: "Home" takes you to the landing page seen here.
- The grid is a calendar, the letters along the x-axis are the months in the year, the numbers are minimalist and count by 5s to placemark the day of the month.
- The colors are chosen by the user corresponding with the moods in the key. On hover, the squares bounce so users can easily see what day they are choosing and it also functions as a more aesthetic appeal.
- Click on any day on the calendar to go directly to the entry posted that day and see why your mood was the way it was.
- Clicking on "Journal" goes to all the journal entries posted so far, most recent entry on top.
- There is a search bar to browse by category or keyword.
- Click the + button to open the About section and credits (currently in progress).
- HTML
- CSS
- PHP
- Wordpress
Currently working on an about me (the + sign at the top right), as well as streamlining the search engine. Trying to figure out how to display which color if there are multiple entries in one day.
This is my reference:
