Responsive One Page portfolio for designer, Clint Forrester, that features the trendy slide-out side navigation we’re seeing a lot of these days.
Hello everyone, I'm Clint Forrester. I like to do: UX Design, UI Design, Branding, Illustration, Animation, Web Development, and epic drum fills.
I wanted to incorporate a side navigation on my portfolio, which is something I don't see much of on one-page sites. In my opinion the top>down orientation of a side nav is more reflective of how one-page sites are organized. There were numerous challenges in getting this to work seamlessly in a responsive design. When designing I always try to remember "Content is king." Since the nav is taking up extra width it will only DEFAULT to visible if a user has a wide enough display to show the content and nav at the same time. At a certain breaking point the content takes priority and the side nav will auto hide by DEFAULT. If the nav is opened and not enough width is available it will float above the content layer preventing any narrow columns. The icing on the cake with this approach is seeing the nav update as you scroll, giving you a 1 to 1 sense of where you are on the page.