Welcome to my dev blog! There’s still a lot of work to be done, but everything is up and running. Right now I’ve made myself a brand new personal page (okay, it’s just a prettier version of my résumé) and a blog to go along with it.

How was it made?

Sass

My personal page is about as simple as it gets, as far as technology goes. The whole reason I wanted to create one in the first place was to practice my fundamentals in some kind of small self-contained project. The entire thing is done in plain ol’ HTML and CSS, although I did dip my toes into Sass for the first time! I’d read so much about the merits of using a CSS preprocessor, and I figured this would be a good time to give it a try. I mostly found it helpful in relatively straightforward use cases, such as creating an easy-to-reference color palette or cleaning up clutter by nesting selectors. There’s so much of the language that I didn’t utilize, so I’m definitely excited to dive deeper the next time I use it.

No JavaScript

One of the things I wanted to do on this project was practice my vanilla JavaScript when building something from scratch. At work, I’m usually working with jQuery or making modifications to something that was already built, so I was really looking for a way to make sure my base JavaScript skills didn’t regress. However, once I had gotten the main structure laid out with HTML and CSS, I realized there wasn’t a realistic need for JS at all. I certainly didn’t want my personal page to be one of those sites with extraneous nausea inducing animation. I did want to at least have a little bit of flair to my navigation bar though – just some small interaction to make the site feel more alive. I’d seen a link hovering animation on other sites in which an underline would expand from the bottom middle of the link. I always thought it looked great, and figured it would be a nice stylistic fit for my site.

After doing a quick search for ways to implement this, I found an awesome post from Tobias Ahlin’s beautiful blog. As it turns out, the effect can be achieved solely with CSS animations! For something small like this, CSS animations are faster to implement, more lightweight, and fallback more gracefully if not supported. Because of this, I ended up with a JavaScript-free site…for now!

Responsive

It’s not 2010 anymore, so of course my site has to be responsive. I’m pretty happy with how the layout worked out. After a few minutes of sketching on the back of an envelope, I had a rough idea of how I wanted the different parts of the page to move, then it was just a matter of setting up some simple media queries.

Full "Desktop" Size:

Screenshot full size

Medium "Tablet" Size:

Screenshot medium size

Small "Phone" Size:

Screnshot small size

Jekyll

I knew from the start that I wanted something very lightweight to build my blog on. I didn’t have any lofty aspirations for it – all I wanted was something that let me easily author posts and do some rudimentary sorting based on tags. A full-fledged CMS for something like that seemed like overkill. I didn’t want my site getting bogged down by a bunch of features I never planned on using. A nice bonus is that since Jekyll has relatively little going on under the hood, it’s pretty simple for me to get in and tinker with the site without the overhead of reading a novel’s worth of documentation.

I do have some concerns that I may eventually “outgrow” Jekyll and desire a more feature-rich platform to work with. However, since the blog is essentially just a collection of markdown files, I’m hoping that moving elsewhere won’t be too painful.

What’s next?

Making Everything Pretty

The base Jekyll theme is pretty barebones. While it does appeal to the minimalist in me, I think it does cross that very fine line between “sleek minimalism” and “devoid of character.” I’m planning on tweaking the template and adding some more CSS to make the blog look more integrated with my personal page.

Even though I just finished getting everything live, I already feel the urge to change my personal page as well. Especially after seeing the aforementioned blog by Tobias Ahlin, I’m feeling inspired to make the page pop a little more. That said, it’s probably not a good idea to just continually redesign the site back-to-back, so this probably isn’t going to be an immediate priority for me. I’m thinking that I’ll wait until I’ve been exposed to more libraries/frameworks before deciding on what direction I want to go with the design.

Exploring

It seems like every time I learn about some new web technology, I also discover a dozen more that sound interesting. While I definitely want to eventually specialize, for now I want to go exploring. As I learn new things, I’ll be undertaking some small-scale projects in order to use those skill in a practical setting. As of now, I’m thinking about checking out Materialize as a solution for quickly deploying simple well-designed sites.

During all this, of course I’ll also be updating this blog! Look out for more posts on what I’m working on and what has me excited in the world of web dev.