How I designed my current portfolio website
A story of its evolution
After 2+ years of refinement, I finally unveiled my portfolio website. This is the story of its evolution.
The current version of the site, as shown here, is probably ‘attempt 58’ (I’ve lost count!), but I’ll share two previous attempts that stuck with me and survived the “Delete” button in Figma.
Attempt 1
Obsessed with having something different from the norm, I designed what you see in the image below. My mantra at the time was “Live. Design. Thrive.” It made sense to put it in the hero section.
I also created a logo — or at least something that could pass for one. (Trust me, as a designer, it’s incredibly hard to design your stuff!) It is not shown on the image but that logo is what inspired the preloader on the current website. I was convinced this direction was the right one… until it wasn’t.
It didn’t take long, maybe just a day, for me to realize it didn’t pass the ‘awesomeness’ test. What’s the metric for ‘awesomeness’? Honestly, it was just a combination of my imagination, emotions, and the infamous imposter syndrome. Also, it just didn’t say anything about me or what I do, just some words that could mean anything to anyone.
I revisit that design once in a while for nostalgia.
Attempt 2 — Version 0
This attempt became the foundation for my current portfolio. I had just learned Framer and quickly whipped up a Framer version of the design (which I haven’t published yet, partly because I fear I didn’t follow Framer’s best practices).
The homepage featured a portrait — something I’ve always wanted to include but never fully committed to. I kept telling myself I needed a proper photoshoot, although I’ve got enough portraits in my storage to work with.
Here’s the funny part: it featured a picture of my boss and mentor (who doesn’t know he’s my mentor, so don’t snitch on me!). I still haven’t mustered the energy to replace it.
Some elements, like the hero text arrangement, the portfolio cards, and the floating buttons, have remained in the final version. Check it out here.
Current version — Version 1
Inspiration
The text and image mask design technique is widely known in graphic design, but I hadn’t seen a single UI implementation of it — so I thought it was my cue to be the first (or at least the first I know) to implement it.
I even referenced work from Sonny Zaccaro and agency.gg as inspiration. Did I proceed with the idea? Well, yes, I tried it in Version 0. However, in the current version, only portions of it remain — the text and content alignment, for example.
The puzzle
Remember I mentioned the logo? It was a puzzle featuring my first, middle, and last names. I wanted something to reflect that idea, and the puzzle came to mind. Even better, I could throw in a bunch of design buzzwords and create a gamified experience for designers and recruiters. I’ve always been a proponent of gamification — it’s a huge motivator for me. So, it made sense to incorporate it into the portfolio.
Besides, I’ve got my eyes set on game development. I’ve dabbled in it before, but I’m going full-time now. You heard it here first.
The icons
2 sets of icons were used in the project: the Phosphor icon pack and some custom-designed 3D vector icons.
Shoutout to Helena Zhang and Tobias Fried for the incredible icon pack. (Fun fact: I use it in all my projects since discovering it)
The 3D icon creation was a spontaneous idea on a Saturday. I was on a call with my co-founder when inspiration struck. I told him I had to hop off to work on it. Before the day was over, the icons were uploaded to the Figma community, and they’ve been getting some love ever since. You can find them here.
Of course, I had to showcase my creations on my portfolio. I have big plans for the 3D icon pack (now 3D Social Media Icons) — including a plugin and a massive code and design library.
Why not Framer?
I am more confident in my Framer skills — I now build Framer templates on Resource Kit. I consider myself an expert in Framer now and that is validated by being a Framer partner.
But…
I had thought up a million interactions and features which might be impossible to do in Framer without a lot of code overrides. Besides, the pricing model is yet to be favourable. Shelling out tens of dollars monthly without any ROI yet is not something I’d love to do. I could pay off a developer and handle domain and hosting costs with less than the yearly cost I’d have to pay on Framer, and my imagination can run wild and free without considering the constraints of Framer.
Development
I’d say it over and over again, Ugochukwu Okeke might be the best Frontend Developer I have ever come across. We’ve collaborated on a lot of projects — a lot, and more on the way, believe me. Great guy with great skills, and chill too. You can call him my personal development buddy.
Ugochukwu handled the development of the website using the Nuxt/VueJS framework. Check him out here.
What next?
While I’m happy with the current website and the progress, I already have some updates in mind. I will be introducing a blog to the website, porting all essays and posts from Medium. Of course, I will still cross-post on both platforms as I love the community I’m building here on Medium.
I have worked on some personal projects and still working on others. I would like to have a showcase of these projects, also a kit section showing all the gear I use for work and a tools section showing my favourite design and productivity tools.
I hope to share more updates with you as they come. That is if I don’t jump on the next shiny idea for version 2.
