A New Look for Blinding Stars

Blinding Stars has a brand-new site! This has been a long time coming; there have been two other major redesigns between the old site and this version, but neither felt quite right.

The previous site was built with WordPress, as it had been since I started Blinding Stars. I’d gone through a few premade themes, then got heavy with the customizations… but I found myself wanting to hand-code all the features I wanted.

I began working on my own theme using the Genesis framework, and it was gorgeous, but had so much bulk for what I needed. Did I really need a full database running just for a portfolio site? I loved how easy it was to create templates and include little bits of content, but PHP/WordPress is not the only option for that.

Goodbye, Database

My next iteration was a static site version of my custom WordPress theme. I used Gatsby, a React.js static site generator. I’ve become much more comfortable with React through working on bridge21, so this felt achieveable—and also lightning-fast. I loved the no-refresh page transitions, live reloading while I was developing, and ability to write straight in Markdown and have everything rendered out correctly.

See the pen on CodePen.

I created these image-free rainbow-bordered buttons for the site, which I still think are a ton of fun (and also a tricky thing to pull off with CSS alone). I also created a fun animation for my splash page; it was especially awesome because of some time-based classes. I used these on my previous WordPress site to change the headline and color of emphasized text (with a “Good morning” sort of message early in the day with sunny yellow text, for example). I took that a step further in the Gatsby version: the header not only changed its background, but the position of sun rays and even constellations changed based on the time of day.

Gatsby is still under development, though, and I ran into a few bugs that killed my motivation to finish the redesign.

“Just bugs!” you say. “Those can be squished!”

Absolutely true.

After working on the design for so long, though, it just didn’t feel right. I’m still very happy with its components, but the overall look and feel wasn’t entirely me.

Starting Again

I recently worked on a static site for Toothless using Jekyll, Gulp, and Bootstrap 4, and I ended up really liking that combination of utilities. Since I was ditching the database anyway, I could also get rid of hosting costs by hosting my static site on GitHub Pages. Gulp builds and deploys my code after Jekyll does its magic to parse Markdown, include content, and so on.

One big advantage from the Gatsby design: my content was mostly in Markdown, so I could port all of that over to a new version easily enough. That left only the design.

I knew I wanted to use Bootstrap 4 as the basis for my project, but an important aspect to me was also creating a look-and-feel that reflected my personality. I also knew that I wanted to update my color palette and do something interesting with my typography. I chose “Blog Script” by Sudtipos for my headlines; it’s playful, friendly, and a little inconsistent (in a good way). I paired that with “Nunito” by Vernon Adams; its rounded terminals felt right at home with the softness of Blog Script. When I saw it typed out in the seafoams and aquas that I’m always drawn to, I knew I was on to something.

My guilty pleasure is doing really, really elaborate things with CSS. I like tinkering with CSS properties and seeing what I can come up with. I can make something pretty and essentially solve puzzles along the way. So, this redesign has some delightful details. From the image blurs to doodled dividers, material design shadows, and pops of color, this redesign has personality.

Is it the most traditional or corporate-looking? Nope. Am I? Nope.

There were certainly some hurdles along the way and things I’d still like to work on; for example, Jekyll supports tags and categories for blog posts, but not for custom collections of posts (like my portfolio items). There’s a pull request for this feature, so I hope it’s incoming! I also had a few hiccups with included Liquid shortcodes and GitHub Pages trying to build my site (it was already built!). But, it’s up, it’s running, and it makes me smile every time I play with the little hover animations.

This can be used for work, too!

I’m helping to create a new course at McHenry County College with the working title “Command Line for Web Developers”; my redesign here uses a lot of the things we’ll cover.

In [the new course], students will become familiar with UNIX command line tools. Using automated build tools and task runners, students will be able to create and deploy static websites. Students will also learn how to use version control to work with teams and manage projects.

With git, gulp, and some good design, I’m excited to see what my students will come up with.

PREVIOUS NEXT
© Stephy Miehle as Blinding Stars