It’s out !!!! I wanted to write a blog post to celebrate the launch of this new version that I’ve been working on for about 2 months now, so here it is!
Motivation
After taking a break from working on v1 on my site for a while, I went and looked back at it and realized just how,, dated it looked. During the time I spent working on it I learned so many things, so many better ways I could do stuff. The main page of v1 was just this tiny rectangle in the middle of the screen with a mobile version that was shoddily put together. I could do better than this.
So with that, I started working on version 2. At first, it was just the homepage, I intended to make it in the same style as the rest of the pages and just, make it look more modern. But as I was working on this and iterating with different kinds of looks and stuff I realized I wanted to do it differently and that keeping the design of the other pages was holding me back.
Inspiration
I went through all of the pages I link on my “cool links” page, looking for any design elements that stood out for inspiration. I took lots of notes and screenshots, slowly figuring out what I wanted to do. If your page is on my links page, you’ve inspired me. With that said, I probably took the most inspiration from beeps, freeplay and swifty. at this point I knew I wanted to make something clean, but also fun.
Iteration
At first I focused solely on the homepage, writing everything from scratch because the original homepage code was a mess. By test 3 I had put together a functioning version of the main page, laid out exactly as I wanted it. At that point I moved on to redesigning the rest of the pages. I tried doing it from scratch, but that code wasn’t as bad and could definitely be built on top of, so that’s the route I went with.
I went through lots of different designs, color schemes, etc., trying out different things to see what would stick. I ended up really liking a neutral dark color scheme. I decided I’d get rid of the reactive 3d buttons, because while cool looking, they didn’t really fit in anymore and the javascript code for them was a huge mess that I did not want to continue maintaining.
Eventually I was done with a version of the main pages I was happy with, but now the homepage was out of date and written differently from the rest of it. I had used two different stylesheet files, one for the homepage and one for the rest, a holdover from how I was doing v1. I decided this wasn’t really working.
I ended up having to rewrite the homepage completely with code from the rest of the pages. Internally it’s now laid out like a wide version of a regular page, only without the sidebar and with a custom header bar. This was very much worth it, it made it so much easier to add and edit stuff down the line.
Now that I had a functioning base, I started working on the blog. It was surprisingly easy to get it working! With all the pieces in place I just had to assemble them together and thanks to 11ty I had a functioning blog system. After that I spent about a week writing different elements to use on the blog, like different column layouts, inline images, textboxes, etc. I ported over the BIID explainer article I wrote to test things out, and it worked great!
At that point, I realized the look of the page was kind of bland and sterile. It was all dark and gray, with only little bits of yellow and no personality. I had just finished signalis at this point and I was watching a friend play through it, when I saw a really cool view and I took a quick screenshot. I liked this view a ton, I figured it’d make a good background for my site, so I remade it in high resolution and tried using it. And it worked !!! It looked so good on its own, but after adjusting the color scheme a little it was perfect.
The last thing I worked on was the gallery. I left this for last because I initially wanted to go with a lightweight plugin and I really do not like working with javascript. I iterated with this for a bit, and I got it to work, but it was a mess and really clunky and it did not bring me joy. Instead, I decided to go with a very simple system that’ll open the image you click on in a new tab. It works, it’s lightweight, and I can always iterate on it later.
With that, I had a release candidate, and after squashing a few bugs it was ready for release !!
Closing thoughts
Working on this was a ton of fun !! I got to explore lots of different ways of doing things and I’m so happy with how things ended up looking. There’s a bunch I ended up moving from the “before release” list to the “after release” list, like themes and comments and a projects page, but now I’ll be able to work on those things knowing my live page isn’t looking like ass :D
Thanks for reading !!!
Version list
I put together a bunch of live test versions throughout the development process. You can have a look at them yourself, if you want to!
I recommend opening these in a new tab as none of the navigation buttons on them will take you back here.
v2_test1 // v2_test2 // v2_test3 // v2_test4 // v2_test5 // v2_test6-1 // v2_test6-2 // v2_test6-3 // v2_test6-4 // v2_test6-5 // v2_test6-6 // v2_rc1 //
LISTENING TO
femtanyl
PLAYING
in stars and time, just finished signalis
FEELING
anxious
OUTSIDE IT IS
sunny & windy, getting cold
more reading
previous post:
my history with social media as an artist
comments
press "sign-in" to add your name - no login needed!