The One Page portfolio of San Diego based designer and art director, Gabe Abadilla, features a beautiful dark color scheme, a slick arrangement of content and a very good responsive adaption.

I think he has nailed the arrangement of content bringing focus on his (well presented) work followed by very slick organization of client logos, bio, contact information and social networks.

I caught up with Gabe to talk about dark portfolios, long One Page layouts and how he tackled the lovely subtle navigation hover effect on his One Page site.

Hi Gabe! To start can you please tell our readers where you are from and what you do for a living?

Hi Rob, thanks again for showcasing my site and for wanting to know more! I’ve been a fan of One Page Love for a long time and I really like how you’ve evolved the site. I’m from San Diego, California (North County to be exact) and I’m a freelance designer. I partner up with savvy agencies and startups to produce awesome apps and websites. When I’m not designing, I am taking photos or working on my graphic novel.

Cheers for the kind words on OPL and the graphic novel sounds exciting! I love the blend of greys against the dark wood background, why did you decide to go with a dark color scheme?

I’m glad you like the dark vibe. My last portfolio was on the lighter side, so I decided to go the opposite direction. I played a lot with the grey values to find the perfect play of dark on dark. The wood texture idea came during the build and it just felt right. I then added a touch of transparency to the main content background to let it show through. I think the dark color scheme lets the work shine even brighter.

It really does. The One Pager is super long but a pleasure to scroll as the screenshots are so crisp. Why did you choose this long layout opposed to – just say – an AJAX loading portfolio with project thumbnails?

My online portfolio has always been some form of a One Pager. I want to give the viewer a solid understanding of the work I do just by scrolling down because I only have their attention for a brief moment. I could have experimented with showing project details once a thumbnail was clicked, but that goes against the simple top-to-bottom flow I had in mind. It’s kind of silly, but I like to think that my site tells a quick story. It starts off by saying “hello”, dives right into the work I do, provides a little more context and then ends with ways to reach out.

Lovely touch with the subtle fade-in navigation as the user moves their cursor towards the menu icon. I assume you built everything on the site? Were there any obstacles in the development?

Thanks! I did build everything on the site. With client work, I mainly focus on the visual execution, so a personal project is the perfect way to shake off the development cobwebs. It was a little tricky managing the hover behavior of the navigation menu, but I think I worked out all of the kinks (fingers-crossed). It all comes down to testing it as much as possible and getting feedback from friends and colleagues who are much smarter than I am. With the menu, I am constantly keeping tracking of the scroll position, the page width and whether it’s engaged or not. Adding the “hamburger” icon (sometimes I call it the “hamburglar” icon) came towards the end. When I was finessing some of the larger responsive views, I felt like the circular logo needed a counterbalance on the right side when the navigation wasn’t engaged. That new element couldn’t be too large, so the menu icon made sense. I also experimented with a blurred iOS7-style background for the navigation, but it was really sluggish wherever I tested it. The eye candy wasn’t worth the performance hit.

Thanks for chatting with us Gabe, where can our readers follow you online?

Again, thanks for everything that you do. You can follow me on Dribbble, Twitter, Behance, and Rdio. I’m always interested in meeting other creatives!

---

Much love,
Rob

Twitter: @robhope
Email: [email protected]