Today I'm launching my new website, which might be a bit overdue. I wouldn't say it's perfect just yet, but it's finally in a position to meet my own high standards that kept it hidden until now.
Maintaining an online portfolio is incredibly important as a designer and I’ve always been a little envious of designers that are more than happy with a templated portfolio site. There are plenty of really great, out-of-the-box portfolio websites out there but as a designer that specializes in branding and user interface, I wanted a unique website that showcases some of those skills.
When I visit a new website, and especially when I’m critiquing its design and development, I have a habit of trying to break it. I find ways to stress test the code and find unanticipated flaws. It’s definitely more frustrating when I’m responsible for the design and development of the site but, with a few small exceptions, I’m satisfied that I’ve been able to make my site pretty watertight.
One fairly niche example of this attention to detail: there’s a couple lines of code that specifically target iPads that are large enough to display the desktop site—the code shrinks the entire right side of any page with a side-by-side layout just to keep the distance above and below the ‘home indicator’ at the bottom of the screen symmetrical.
Beyond that, I’m excited about some of the delightful micro-interactions I’ve included. I think micro-interactions are some of the most endearing elements of user-interface design and here are a few from this site that I’m proud of:
- Hovering the logo presents it in an isometric view, and its animation remains smooth no matter how soon your mouse leaves it.
- Links, menus, and buttons all subtly gravitate towards your mouse cursor, as if they’re begging to be clicked
- Certain hover animations have been reimagined as scroll animations on mobile to improve the user’s experience even on touch devices
- Each project page subtly shifts its color palette to match the brand’s primary color—maintaining the high contrast seen throughout my site while receding into each brand I feature
- A site-wide dark mode works across all pages, even the color palettes introduced in each project. Your device’s preference is seamlessly used as the default mode for my portfolio until you override it in the menu.
- The contact page uses Typeforms, which not only allows you to navigate the entire form with your keyboard, but also means that I can ask additional questions to potential clients without affecting everyone else
Surprisingly, this is my very first online portfolio with dedicated project pages, and I’m excited to have a place where I can continue adding projects without much friction. I’d love any feedback you might have on how I’m presenting each project and the tone I’ve written them with.
.jpeg)
If I had to choose a favorite page it’d be the Logo Design page. After a lot of trial and error, I managed to get the scrolling interaction just right. Each logo animates as you scroll, sticks to the center as the animation finishes, then—just before it’s covered by the next logo—the geometry used to build it is revealed. I think it does a good job of showcasing my work, attention to detail, and a bit of motion graphics work in a nice package—and I’m looking forward to adding more logos.
Finally, building my portfolio means I can have a bit of fun too. I’ve hidden a secret that you can only access with a certain cheat code. Try it on my home page if you’re feeling adventurous and let me know if you manage to find it.
Have fun, and thank you for visiting my portfolio.
