February 13, 2020

My Setup’ Page

Like my favorites page, I wanted to put together an illustration of what my current computing setup’ looks like in terms of devices and go-to software. I initially started this journey in Omnigraffle, as I often do, to create a pretty illustration of what my setup looks like. As I got part way through the design, an idea jumped out at me; I should try to build it as native html rather than a vector illustration! Building it natively would make for a good learning experience, and would also make it much more accessibility friendly.

I knew what I wanted it to look like, so I saved the Omnigraffle document, closed it, and opened Nova to set out on my (self imposed) web challenge!

Building in Omnigraffle
The beginnings of the Omnigraffle design work

I had a basic shell of what it would be within about the first hour. Then it was time to tweak tweak tweak tweak! After working on it in between other things I had to do that day, I got it almost all the way done relatively quickly. I just needed to get the layout of the individual boxes working correctly. Valerie (@alcedine) to the rescue! She helped me get display: inline-flex; working properly and some other css changes to clean things up a bit and get it looking right! And now, I have this!

It’s definitely not anything super advanced, but I am quite proud of it!
I added it to my CodePen, in case anyone is interested in that kind of thing.

Building in Nova
What it looked like in Nova

html css My Setup Omnigraffle Nova

Previous post
Let There Be.. Dark! I have been wanting to give this place a facelift for some time and that time has arrived! I went with a Dracula inspired theme because I absolutely
Next post
Music Blast From The Past A long long long time ago (like 20 years ago) I once thought I could make music. More specifically, electronic music. I had a lot of stuff going on
Jason Burk | 1999-2022
blot.im! | 🧛‍♂️
📦 Blog Archives 📦