jacobs.blue is an attempt at being the best representation of my work, art, interests and thoughts at any given time. Like myself, jacobs.blue is a constant work in progress.
Without the feedback of many great designers and the JSON CMS my good friend built and hooked up for me, jacobs.blue would not exist. Other than these contributions I designed and built this site myself. All of it is open source and can be found on github.
In 2020 jacobs.blue 1.0 was built with vanilla HTML, CSS and Javascript. It's goal was to promote and showcase my debut album. The UX was simple, direct and optimized for getting inbound users (mainly from instagram) to their preferred streaming service quickly. This was an awesome site but didn’t age beyond the release of my next song. The more things I made and the more disenfranchised I grew with traditional sharing mediums, the more it became apparent I needed my own true home for Jacob's Blue.
In hopes to carve out a representative corner of the internet, and greatly test my dev skills, over two years ago I set out to build that home.
Many iterations and 500+ working hours later I've reached a version I'm happy with. What you see now is a culmination of that work.
Approach
My approach is to create with care, every time. In order to meet that standard I developed a few criteria and principles meant to guide my work.
jacobs.blue needed to:
- support my ability to make anything and quickly share it
- be fluid enough to house any creative format yet robust enough for a person to intuitively navigate.
- showcase my UX preferences and experiments.
- consider a user's time and privacy
Guiding principles:
Bias towards action: Post early and often. Perfectionism is a crutch of mine and we’re not doing that here.
Zero downtime: No “under construction” or “we’ll be back later” sign means friends, family, listeners, fellow interneters, prospective collaborators, and future employers always have access to an up to date version of my work.
Easily managed: Make it as easy as possible to update and ship changes quickly - everything from content to components.
Lastly, most importantly…
Have fun: When play is infused into the work everyone feels it. I get to enjoy the process of making and users get to enjoy a delightful experience.
Technologies
This site uses Next.js, Tailwind CSS, and is written in React. I host on Vercel and use privacy first analytics provider, Simple Analytics. Content is managed locally using a couple JSON files and many MDX files. It’s easy for me to write content in VS Code, and push changes to main. For the most part, animations are built leveraging Framer Motion.
These days I'm splitting time between using Figma and designing in-browser as I code.
Typography
Both header and body copy is set in Neue Montreal from Pangram Pangram foundry. I have plans to upgrade to my own font in the future.
How to
The primary function of jacobs.blue is a feed of work. As a user, I should be able to browse this feed and see any meaningful work ever published by Jacob's Blue. As of now users can filter my work by medium.
You’ll notice a typewriter effect subheader on the main page. This component is my version of a Now page, streamlined for my own uses. I regularly update this component with what I’m up-to, including but not limited to training for a marathon and recently becoming a father - woohoo!
Beyond the main feed pages this site is designed to be explored via the footer. I’m the type of video game player that plays all the side quests and tries to explore 100% of the map. The UX intentionally rewards the explorer. This is a behavior I want to champion over the typical kite-lite social media users (myself included) that blows whichever way the algorithmic wind blows them.
Other than the "blog" parts of my site - where I’m regularly writing and spending entirely too much time rewriting css- the footer contains many regularly updated indexes. These indexes break down into detail pages that signal turn-around points for the user. Some cool indexes include, every song I’ve ever released, past versions of the website and valuable book recommendations. These pages are a lot of fun to make and hopefully fun for you to look through.
Of several specific use cases, the original use case for my site and one of the most regularly utilized is the song page. Song pages are really cool. I’ve never seen an artist with one like mine. On the song page a user can primarily find all streaming links but they can also sing along with lyrics, read through the credits and one day soon play the music in-browser. Check it out!
Project status
Similar to Maggie Appleton, despite regularly updating this site I'm also bad at finishing things. In the name of biasing towards action I came up with a taxonomy for a written works “doneness” so-to-speak, in order to push un-refined thoughts worth-sharing.
Essays start as WIPs, become Drafts, and finish as Essays.
Note: perfectly reflecting why this is important, I’ve changed the naming conventions of the project status 3 times just since starting this essay.
Inspirations
There are many exceptional designers sharing their work on the internet that helped shaped this project. Ranging from small to very large sources of inspiration, jacobs.blue would not exist in it's current form without the following:
- Maggie Appleton
- Jordan Singer
- Eike Drescher
- Marco Cornacchia
- Paco Coursey
- Rauno Freiberg
- Rikitesh Nighot
- Brian Lovin
- Joseph Zhang
- Ethan
- Sebastian
Thank you for your work!
Next
Making this site has made me more comfortable being all the things I am under one umbrella. Social media has made me feel like I'm only a musician, but in the real world I am many things. Jacobs.blue is not only a good representation of this but helped me own it. I used to keep two websites, one for my design work, one for music. Now I'm comfortable with them in the same space. Like myself, jacobs.blue is a constant work in progress. Expect jacobs.blue to evolve and change shape as much as I do.
If you’ve made it this far please share some feedback either on twitter or email me directly.