Ship #1

@jorm on jorm · 20 days ago

This project was a refresh of the website I made for myself at 14. I had to spend some time refreshing myself with the code I wrote 2 years ago, but having small things/features to add was a really fun experience.

During this event I:

Refreshed the bento grid with items that better reflect me right now. I replaced 2 cards with one for my MakerWorld account and one showing my music listening stats.
Restyled the navbar with a translucent glass theme inspired by liquid glass. It has no background before scrolling and morphs to a blurred rounded bar when content is under it.
redid the projects page to feature my 3d printing projects on MakerWorld, each complete with a link to the model itself.

Overall, the site features:

discord presence at my name through lanyard api (dnd/idle/online/offline)
links to my github, makerworld, discord, and email
makerworld stats
spotify current listening or last played song
music listening stats through lastfm, with options to display top albums/songs/artists
tools that I use on a regular basis to do things like this haha
code and cad projects
command menu (cmd + k) that has a buncha actions you can do with just keyboard shortcuts. very convenient!
built on nextjs, with tailwindcss and framer motion for styling.

do explore the site, and I hope you like it as much as I enjoyed working on it!

6 devlogs
11h
15.54x multiplier
178 Stardust

Try project → See source code →

Open comments for this post

@jorm on jorm · 21 days ago

2h 6m 5s logged

COMPLETELY overhauled projects page

Added most of the models that I designed for 3D printing, each with their name, description, image, and MakerWorld link.
Added a very cool (if i do say so myself) toggle for both “sections” that smoothly transition with Framer Motion.

KNOWN ISSUES: image preview when clicking on project image is kinda broken, and images still need to be optimised by converting to webp.

TODO: add model publishing date, and MakerWorld downloads

Open comments for this post

@jorm on jorm · about 2 months ago

2h 0m 11s logged

added music card!

fetches data from my last.fm profile through the api
displays top 5 artists/albums/tracks from the past week/month/6 months/year

unfortunately last.fm changed their api to not fetch artist and track images, and displays a generic star image intead :(

I tried to fetch artwork from MusicBrainz with the MBID from Last.fm instead, and it worked, but it was just too slow for me to be satisfied with it.

skeleton loader to prevent abrupt size shifting
gradient overflow indicators and buttons for scrolling
smooth staggered load-in animations with framer motion

i’m almost done with the first page now, next i gotta figure out what to do with the rest of the site…
if you have any cool ideas lmk 🤠

Open comments for this post

@jorm on jorm · about 2 months ago

1h 0m 37s logged

fixed navbar and command palette! ✨

navbar at the top of the page is now sticky!
added ‘pills’ behind each link that smoothly transition to each other while hovering the navbar (my fav)
navbar has a frosted glass background that appears on scroll, and disappears when at the top of the page
command palette now opens with cmd + k, and closes with esc or clicking outside the window

new navbar looks pretty clean if i do say so myself

Open comments for this post

@jorm on jorm · about 2 months ago

2h 10m 56s logged

updated tools card with dynamic variants! ✨

added my phone, laptop, 3d printer, and keyboard since they’re devices i use frequently
added ‘on’ and ‘off’ variants of images that change dynamically on hover
added size hover effect

only got 2 hours logged but i probably spent over 4h finding and editing images in affinity haha

Open comments for this post

@jorm on jorm · 5 months ago

1h 10m 40s logged

working tooltips with tippy.js!

Open comments for this post

@jorm on jorm · 5 months ago

2h 57m 48s logged

first time working on my old website in 2 years! took me a while to familarise myself with things I wrote at 13 lol

Replaced redundant socials panel with one showing my MakerWorld statistics, fetched from a Vercel Blob since there is no official API & Cloudflare is a PITA to bypass.
Next up is making some sort of script to automatically send updates to update the storage… future me problem :D