It has taken a few months, but it’s finally here! You’re reading this post on my new personal website. Ideas for this website started flowing last fall and said I was going to post PSDs, Wireframes, etc. as I progressed through the build process. Let’s be real, it’s 2014 and design concepts are about as constant as the weather report at times.
After sketching some ideas, I came up with some initial concepts and color schemes for this new site in Photoshop. I then took those concepts to basic HTML and CSS, and the concepts quickly evolved in the browser. Whenever I’m designing in the browser, little ideas come out of nowhere, and old ideas are proven to not be as epic as once thought. Photoshop is great for *rough* ideas, but it’s just not practical for locking down true cross-device designs in this day and age.
In January I took my rough HTML prototype started to build it into a WordPress theme using Bones, an HTML5 Boilerplate theme for WordPress. If you’re looking to create a lightweight WordPress theme, definitely checkout Bones! It was created by Eddie Macho, using the HTML5 Boilerplate, making it a wonderful starting point for any project.
I coded all CSS for this site using LESS and used the CodeKit app to compile it. I didn’t start using LESS until last fall, and I must say that I wish I started using it earlier. LESS saves so much time! Why did I choose LESS over SASS? My job requires me to work with Bootstrap regularly, which is compiled via LESS. It’s always good to kill two birds with one stone when possible. With that being said, I plan to dive into using SASS and Bourbon very soon.
My favorite part of this new site is the Photo section. Believe it or not, I didn’t generate the photo gallery with Javascript or jQuery; the gallery and its transitions are pure CSS. I used jQuery to refresh the order of the images on each reload, and I did use a lightweight script called Featherlight for the slideshow. Otherwise, everything was generated with some creative CSS. To get the new site up and rolling, I hard-coded everything aside from a few helper variables in PHP. I’m anxious to get this into a WordPress plugin in the near future.
The popups on the “Work” page were also done using CSS. The ‘&target’ psuedo selector can be very useful for showing or hiding certain elements with CSS! I did use Javascript to trigger the backdrop that appears when one of the popovers appears. I also plan to turn this into a lightweight WordPress plugin soon.
Like anything on the web, this site is always going to be a work in progress. I still have some cross-browser testing to do, and I’d like to incorporate some new animations throughout the site. Nonetheless, I’m stoked about this new site. I’ll be hopefully blogging on here a lot more, and posting photos regularly now that this site has some fresh paint.
Here is a graph of the GitHub commits on this thing:
Feel free to checkout the WordPress theme behind this site, and re-purpose it for your own use if you want. Just remember to shoot me some credit!
PageGWood on GitHub
Also, please leave me some brutally honest feedback!
Leave a Comment