Finally my portfolio site is live, and this is my first blog post. I think every designer’s greatest nightmare is probably building their own portfolio website. You have the skills, the ideas, the inspiration and all the tools in the box to pull it off, but because its yours, you find that you may never be satisfied with anything you come up with. I find that many designers would rather outsource their portfolio design to another designer because they know that if they attempt it on their own, it would become a never ending project.
Personally, I have been procrastinating on going live with so many design iterations, (Yeah, in retrospect, some of those designs had too much going on), but once I told myself :
“You can never arrive at the best version of anything at once”.
– Ifebamba
Inspiration
The idea to build this came from a Whatsapp group of designers that I belong to, and at some point many of us were sharing website designs that inspired us, then someone posted the URL to the Advanced Team website, and there it was, the gauntlet was thrown down to me! Of particular interest to me was the snazzy mouse fluid motion effects on the website, so I started to research on how they achieved it. My search lead me to a WebGL GitHub project by Pavel Dobryakov, and as they say, the rest is history as I had to figure out a way to implement and get it to work with my wordpress custom-designed theme. Integrating the effects into a my custom WordPress theme while maintaining its functionality was the most challenging part, but I figured it out!
Built With
I design very well and extensively with WordPress, and this is the platform I used to design this portfolio site, and I have to say, some of my initial design and feature implementations have changed since the first version. I decided to avoid off-the-shelf themes, and custom-made mine – the fluid motion effects would probably have been impossible with an off-the-shelf theme. WP theme development can be a frustrating but it is also creatively rewarding, as it gives you the confidence to hack and tweak any website to your design specifications. I often start with a bare-bones wordpress starter theme called Underscore (from the Automattic team) , It provides you with all the skeletal functionality of wordpress without all the baggage. With this, you can build your custom design and implement your own functionalities with plugins or custom code. To do this, you need to have a basic understanding of wordpress file hierarchy, PHP, HTML, javascript and of course CSS.
Implementation
One key lesson in using wordpress powered sites, is to limit plugin usage to just few essential plugins as much as possible (My plugin usage: Contact Form 7, breadcrumb NavXT, and in-the-box plugins such as jetpack, akismet, yoast and WP super cache) – this helps the site remain as light as possible, and reduces the complication of troubleshooting. I stayed with the standard recommendations of enqueuing Javascript files and CSS styles in the functions file etc, designed custom pages using template tags, and page templating. I have to say, that understanding the wordpress file system, taxonomy and other wordpress terminology is very important in developing and customizing wordpress themes.
Design Decisions
I got inspiration for my design by visiting different portfolio sites of designers that I love their work. I tried to use whitespace (blackspace, since my site is darkmode themeed) to achieve a clean design as much as possible. As for the icons and illustrations I used, I created them from scratch specifically for this project, drawing inspiration from resources like undraw.co, I also used the Boostrap framework (never apparent) and for interactivity, Javascript.
The next step was to put all the design ideas together into a complete design for the site. To be honest, I did quite “freestlye” on this project. I did not design any mockups or UI in figma (my favourite design tool), but rather, I decided to design-on-the-fly, of course this was probably one of the reasons why i wasn’t very satisfied with my initial iterations. As I went along, I visited other sites for inspiration and continued to improve on the code and design, but as soon as I got the landing page design right, building the other pages was a breeze.
I decided to fully customize the design of my individual pages, blog posts and categories to give the site a distinct look than what you’ll get from a typical wordpress site.
Summary
Before tech, design was my first passion, and I have basically done it freelance for years. My personal portfolio is a body of work to show potential clients or recruiters what I have done or can do. When I eventually started building, I got stuck in the cycle of constant improvement and never launching, I realized that as a creative, you would always discover more ideas you would love to implement on your website, effectively making it a never-ending project. Then it hit me, Just launch! So, here it is, hope you have a memorable stay here 🙂
