MandalaTV
Personal and Professional Blog of Rich Hauck

My Portfolio Site and the Long Hiatus

by: Rich Hauck

hii-site

After a two-year hiatus marked by large projects and life in general, I finally (and quietly) re-launched the most challenging project any designer HAS EVER FACED.

One’s own portfolio site.

Many years ago, I was contracted to design and build such a site for an agency. It was a genius move in my opinion, as the internal politics are often set aside with such an approach.

My previous company site was completed in 2012, right around the time that responsive web design was becoming inescapable. It wasn’t long before my site was caught feeling stale, and I quickly moved to redo it.

Then, some large contract jobs pushed my portfolio to the backburner, and my new site went from being 95 percent complete to an afterthought. Nearly two years later, I sought to finish what I’d started, and I found it rather introspective to revisit my own development process.

2012.

This site relied exclusively on JQuery to make what was essentially a single-page app. Ultimately, it wasn’t tremendously SEO friendly, and there was no minification going on, so the download wasn’t necessarily heavy, but it was cumbersome.

Yes, I was using a reflection in the design, which only added more wrinkles to the elder face of my non-responsive site.

2013.

I truly believe the future of front-end development is one that uses object-oriented programming principles, so I decided to build my site foundation in Angular JS, which was gaining a lot of popularity at the time. My problem was, while Angular was evolving quickly, it was still pretty cutting edge, leading me to some unmarked roads. I started with a pre-1.0 version, and at the time, handling transition animations (now accomplished with ngAnimate) was still in a nightly build and making things search engine-friendly had me looking into headless browsers.

For layout, I was using Bootstrap. For icons, I was using Font Awesome for general icons and Foundation’s icon library for social icons. For animations, I was dabbling with the handly little Animate.css.

2015.

I returned to my working portfolio site which was 95 percent complete, yet settled in Angular 1.2. Thankfully, the time away allowed browsers to catch up, and I am confident that IE9 and below needn’t be supported any longer.

News had been revolving around Angular 2.0, and I think Google really blindsided their community when they announced Angular 2.0 as being a completely different animal than the current Angular 1.3, one with an entirely different architecture and syntax. Not wanting to be on a sinking ship, I chose Facebook’s React for a similar project and basked in the glow of its simplicity. I definitely wanted to rebuild my portfolio with React, but time won out and I needed something up.

I proceeded to update Angular in my project from 1.2 to 1.3. This Angular migration guide made a world of difference, as controller instantiations are completely different.

For layout, I migrated to Bourbon Neat. Besides having a cooler name (Mmm…bourbon), I liked that it was in SASS and didn’t require so many appended classes on my markup.

With the inclusion of social media icons in FontAwesome I removed Foundation as a dependency. Perhaps the biggest change, though was the inclusion of Yeoman into my workflow. It just brings so much to the table–Bower package management (so I’m no longer hunting and gathering plugins), JSHint for testing Javascript validation, LiveReload to refresh my browser upon file save, and image optimization.

I chose the Gulp flavor over Grunt simply because I like the simplicity of the code. While there are several generators for creating projects in Angular, I tested them all out and settled on the vanilla generator-gulp-webapp.

I don’t necessarily like the “magic” that comes with Yeoman’s gulp-load-plugins, as having a ‘$’ in the code to represent all plugins loaded really dumbs down my understanding of which particular plugin is called. That said, I found that, unlike in 2013, the Angulartics module was waiting for me to solve my headless browser/SEO problem. I also discovered that ng-annotate was essential to wiring up with generator-gulp-webapp to get it to publish.


So, as I said, introspective. Is this all too technical for me to be called a designer? I hope not.

Following a brief conversation the other day a designer responded to me with “…so, you’re more a developer.”

While I know the industry pigeonholes folks these days, I think it’s the responsibility of a designer to know how things work and appreciate the design of process and code in the projects they are a part of. With posts like this, I’m just hoping to create more of a dialogue about it, too.


Categories:webdesign
Comments: 3

3 thoughts on “My Portfolio Site and the Long Hiatus

  1. I as well as my guys were going through the nice items from
    your web blog and then quickly I got an awful feeling I had not thanked you for those secrets.
    Those young boys are actually certainly joyful to
    see all of them and now have in truth been making
    the most of them. Thanks for simply being so thoughtful as well as for going for such really good subjects most people are
    really desperate to understand about. Our sincere regret for not expressing appreciation to
    sooner.

Leave a Reply

About Rich Hauck

Rich Hauck

I'm a creative technologist at Hauck Interactive, Inc. and an adjunct instructor at HACC. I live in Harrisburg, Pa. with my wife and two boys. I enjoy good coffee, Trappist beers, Orioles baseball, and good design.