My good friend Mike Stein contacted me recently to reboot his web presence for his design portfolio. I had built the original iterations of his website years ago and it had been a while since we had touch the design or code. The old site was on an outdated version of WordPress and was in no way mobile friendly. That has now all been taken care of.
Mike had for the longest time designed under the moniker “Titan Street” due to the fact that he owned a house on Titan Street in Philadelphia however he has since moved on and now resides in Portland Oregon “making graphics for Nike Sportswear and a small list of freelance clients” and has decided to add a more personal touch to his brand. May TitanStreet.com rest in peace! It is with great pleasure that I introduce to you MikeSteinDesign.com!
While he is missed tremendously on the east coast, his design work is World Class and he still visits often! If you are looking for a great graphic designer to work worth, I highly recommend Mike.
Some minor technical details: the site now runs on the most recent version of WordPress, 4.9.5 and was built using UnderStrap, a WordPress starter theme which combines UnderScore and BootStrap created by Holger Koenemann. This theme combine with all of it’s included functionality and additional libraries was a great resource to get Mike up and running with great custom theme from the designs he provided.
Home
The site starts with a Home Page showing recent updates. The first set of home posts display on initial page load with a “Load More” at the bottom. Upon clicking this, all of the past posts are loaded asynchronously as you scroll the page with a loading gif to indicate more posts are loading.
The 10 small images across the top below the header are the 10 most recent instagram posts of @mikesteindesign that link to their respective full size images on “the ‘gram”. These instagram images are all automatically imported to the site to provide a backup of all images posted to Mike’s instagram account.
Work
The work page features a grid of square images of all of Mike’s work that he chooses to showcase. These can be rearranged easily from the backend. All thumbnails are automatically generated from the first image added to the work entry.
When hovering over the thumbnails. they enlarge slightly with a transparent overlay with the title of the work item. Clicking the thumbnail loads the details of the work entry in a lightbox on the page, updating the URL with a hash so individual work items can still be linked to directly while avoiding a full page reload when viewing entry work detail.
Clients
The client page works similarly to the work page with respect to hovering over the images however instead of a detail lightbox, the hover overlay displays the name of the client along with an optional link to the client’s website. All Cient entries are loaded at once on this page.
Contact
The contact page is pretty simple with an image to the left, a brief description, and a link to his email and instagram.
Mobile/Responsive
Content Management
The WordPress backend was customized to streamline content management by removing any of the standard WordPress backend elements to just focus on the sections of the admin that Mike needs to use to make updates, without any additional distractions.
Check out these screenshots below of the customized WordPress Backend to see how it has been minimized to only focus on the area’s needed to update the content of the site.
