Building My Portfolio With Webflow: A Love Story
Serendipity.
My first encounter with this word made me feel weirdly safe. It was almost as if the word was letting me know I could trust it.
I had read that guessing the meaning of a word before looking it up in a dictionary helps with vocabulary development, so the part of me that still holds on to Akeelah and the Bee shared the word into two: serene- and -dipity.
Now, -dipity I didn’t even bother guessing, but serene, that was easier. It meant calmness or something related, but the English language has been known to switch it up when it pleases.
The dictionary defines serendipity as
a combination of events which have come together by chance to make a surprisingly good or wonderful outcome. The opposite of Murphy’s law.
Serendipity was the word that came to mind when Webflow released their Figma to Webflow plugin.
I remember smiling sheepishly at how awesome this move was and how I could finally use it to build my long-procrastinated design portfolio. But before the plugin, I met a man who made me fall in love.
Here’s that story.
A long, long time ago. In a far, far away galaxy… Sorry. Wrong blog.
Start here:
Throughout my design journey, I’ve heard of the importance of a portfolio because people want to see your work.
They may ask for a resume but in the end, will need your visual portfolio to access your skills and thinking process.
Skills and thinking process? Check. Portfolio? Kinda. I started with Behance which is the most universal portfolio website I’ve seen in a while. I still have it, of course, but a friend advised that I try Notion. So I did.
When you’re a designer who’s seeking job opportunities in the design sector, it’ll take the wisdom of Solomon, the strength of Hercules, the stamina of Atlas, the power of Zeus, and the courage of Achilles not to implement every flying advice.
You’re not trying to absorb everything like Spongebob because you want to but because you’re trying to cover all bases.
The last thing you want is for an opportunity to come your way, and the reply goes, “Hey, we would have loved to work with you, but unfortunately, you don’t have a Notion or website portfolio.”
If this were to happen, you’ll kick yourself in the gut and curse at how you could have easily taken the advice and gotten the opportunity.
This is where filtering becomes key, but the problem now becomes who and how do you filter?
For me, I tally the opinions. I have this mental sheet where I keep a tally of ideas from others. When one tally gets enough strokes, I try it.
Sometimes it pans out. Other times it doesn’t.
The Call
I had an adplist session with an amazing and lovely mentor who was so empathetic, relatable, and understanding. She was oozing concern and advised that I get something better like a website.
I said, “Okay. I’ll do so.”
She suggested I go and learn Elementor for WordPress, and I was like, “Sure. I have a WordPress site. It’s no biggy. I’ll do that and come back in some weeks to update you.”
People, it was a biggy.
I currently use free WordPress and can’t have Elementor on it.
Thank God I didn’t swear I would call back in two weeks. That would have been awkward.
I tried the Bubble tutorial, and I just didn’t know what I was doing. I wasn’t grasping it at all. I scanned the internet for ideas until I went back to a forgotten cause.
The Man That Made Me Fall In Love
I had dipped my toes into Webflow late last year but hurriedly undipped them as I could feel myself drowning even though I only put my toes.
With the pressing need for a website-built portfolio, I was so sure I would drown again if I didn’t try another angle.
Another Angle
I rushed to my friends and went, “Hey, guys. What if we learnt Webflow and used it to build our portfolio.” They said yes, and we met once and have never met again.🤣🤣🤣🤣🤣 The best part of that one meeting was the link a friend dropped.
Webflow University
I’ve always admired teachers who can captivate their students while educating them. There’s also a psychological thing where if a wonderful teacher takes on a course you naturally hate, you find yourself liking that course.
So you can imagine how sceptical I was about watching a development course. Whether no-code, all-code, half-code, missing-code, or micro-code, development is still technical, and I don’t do well with technical, but I sucked it up and attempted.
The Classes
Less than five minutes into the first video from Webflow University and my lungs had given up on me. Was I learning development or in a comedy club? Premium quality education in the most unplanned, unstaged comedic method.
“Here’s an image of a box. An Obama in a box and a box in a box.” Dude!😂🤣🤣
McGuire and Grimur made me fall in love with Webflow. Not because I could use the software but because their teaching method is effective.
They know that learning something like that could prove difficult, so why make it more difficult for people by being too serious?
In the Joker’s words, “Why so serious?”
The delivery of the lines is just exceptionally effective. One minute I’m writing what he’s saying, and when I get the joke I just drop my pen, throw my head back, and laugh like a crazy person.
This singular reason is why I kept watching that video. I went through Webflow 101, and boy was it a lot, but McGuire made it feel easy.
Every section had dark humour that lessened the pressure to understand. After 101, I still couldn’t do diddly-squat. Though I loved the teachings, I was struggling. Figma I could handle but replicating it on Webflow.
Jeez!
Precisely days after I came to the realisation that I was about to drown once more, the Figma to Webflow plugin was released.
Do you now see why serendipity was the word that came to mind?
The announcement could not have come at a better time. I did what all curious designers do when a new product is released: Get as many details as I can.
I first watched the Flux video on the plugin then 20 other designers and finally McGuire’s video.
All videos were around 5 minutes long and that reinforced the simplicity in my mind.
I took out some days and came up with my design. The plugin tutorials made it sound easy: Design with autolayout on Figma. Copy and paste.
Yeah, right.🙄
I Fall Out of Love
I could swear I was doing something wrong because I almost cried using the plugin.
Nothing worked. I “autolayouted” my entire Figma space and after copying, it was an eyesore.
Oh, did I also forget to mention that before using Webflow, I thought all one had to do was design the larger breakpoint, and the others will automatically update themselves?
Imagine my shock at realising that I had to retouch each breakpoint for it to be responsive.
At this point, only my head was above water, and John Legend’s song kept coming to me.
I copied for days. Days. And it still wasn’t going well. My serendipity switched to Murphy’s Law, and I was back to square one.
I had to make a choice: rely on Notion and Behance — I know people who have only those two, and they still get gigs — or try to design from scratch.
I Start Again
I chose to design from scratch scouring the internet for new inspirations, and this almost became my undoing.
The designs I saw were intimidating. Whether as one-pagers or full websites, I just couldn’t wrap my head around them. The worse part was that a majority were designed on Webflow. What the what!
I was so close to backing out yet again that is until I saw this LinkedIn post from Zander Whitehurst founder of Memorisely alias Superfast.
The post
I don’t know what prompted him to write this, but it gave me all the strength I needed to do what was in my heart and forge ahead.
Ahead Ahead
I started again with the portfolio course and built a cake website for a baker with 15 years of experience. As the site began to take shape I asked myself, “Why don’t you just start with yours rather than mastering it with a dummy site?”
Designing My Portfolio
After ensuring my design on Figma was what I wanted, I went back to the basics of Webflow and got a hang of div blocks, sections and containers, how to add elements, remove, undo (very important function), side panel, designer, layout, etc.
With that in hand, I started with my design. For every section, I would go to the course and watch, pause, return to Webflow and replicate in my style.
I continued like this until CMS. For CMS, I encountered some issues. Webflow doesn’t allow images higher than 4 MB. I, on the other hand, export my Behance presentation in ×4 export which meant I had to re-export everything to fit into Webflow.
Fast forward a week later, and I was done with all the images. I’m not even joking.
I built out the CMS, and it looked good. I also got the hang of adjusting everything to look good on all breakpoints. According to McGuire, “changes on the breakpoints cascade down” so it helped, unless when I needed the mobile version to look different.
After getting here, I paused it and finished up a redesign case study I was working on. I had been procrastinating because I knew the case study would need to be detailed, but I got the chance and uploaded it.
Once I was done, I went back to Webflow. Again, I had to re-export the new case study to fit — that stuff is stressful. The case study: https://www.behance.net/gallery/166731469/02TVSERIES-WEBSITE-REDESIGN-CASE-STUDY
I finished the CMS, and it was time for Analytics. Again, I also thought Webflow just did it for you as WordPress did, but nope. Had to do that. Fortunately, it didn’t take that long. Just lots of pauses and plays between different tabs.
I could almost smell the finished line, but I dared not celebrate yet. I published the site and it looked good. I included my laptop as a breakpoint in the design because of its 17" screen size. It looked good but needed some tweaking.
Wait. I skipped a part.
Before the whole Analytics stuff, I tried linking the CTA on my project snippets to the CMS, and it refused.
After searching YouTube for a while, I finally asked for help from my design community, and I found it.
The community referred me to someone, and that someone took his time to point out what I did wrong.
Turns out, as the overachiever that my brain wants to be, I manually designed elements that are supposed to be linked with the CMS rather than using a collection list.
When he told me, I thought I would get a heart attack.
Mind you, manual design is hard, but for some reason, I found it interesting to painstakingly design the snippets from scratch. I guess I thought I was flexing my brain power and mastery of Webflow.
I deleted all that, not before using the collection list, that is. The collection list made life easy. A few minutes and all six snippets were up. Just like that.
I faced another issue with the CTA. Some of my designs are case studies, and some are regular designs, but because of the lockstep nature of the collection list, one change affects the others so all cards had “read case study” despite all cards not having case studies.
I had wanted to reach out back to my helper, but I don’t like reaching out if I haven’t tried to solve the issue by myself. I have to be desperate to ask for help.
I played around YouTube, and though nothing concrete popped up, I thought to myself, “Since the collection list draws data from the CMS and the CMS is editable and can have fields added. Why not just add the CTA content as a field and link it to the collection list?”
I tried it, and it worked. I kid you not, I felt like taking myself out. And if you’re an expert at Webflow, you’re probably laughing at how I’m feeling proud over a small feat, but it wasn’t a small feat for me. It meant a lot. So I hold on to it.
The final look
I haven’t mastered Webflow animation, so the only interactions on the card are for hover and click. There are no tumbling cards or mind-melting interactions, but I’m happy because it means there’s still room for improvement.
If I had waited to learn animation before publishing this, my birthday may as well come and go because that’ll only give me reasons to stall. As Superfast said, there’s no perfect portfolio; just show your thoughts, and I think I show mine well enough. Maybe too well.
Here’s my design portfolio proudly made by me on Webflow: https://damian-anastasia-portfolio.webflow.io/
Reviews So far
Some like the font combinations, while others think it looks weird.
Some are in love with the “about me” but don’t think the illustrations are necessary.
Some think the illustrations are nice, but should be gotten for ui8.net.
Others like the documentation and others feel it may be too long. I love all the reviews. They just make me feel prouder.
Do let me know what you think about the portfolio.
Phew. This was a lot, but I’m happy. I feel good checking it off my list.
It’s an April win for me, and I can’t wait to see what else I get to accomplish this month.
If you read all that this far, I’m sending you virtual high-fives. I didn’t realise how long this documentation process was going to be. But oh, well. It is what it is.
P.S.
I tried another software, Vzy. It’s good, no doubt, and easy, but I like playing around with fonts and colours, and I couldn’t get over how it would still redirect people out of the site. I’ll be using it for my writing portfolio instead.
P.S.S.
Webflow just started a new 101 session for 2023, and of course, it started with the box method and a dash of humour. Can’t wait to design the new interface they have for the course. I loved his response to Ryan Reynolds and his reaction to Huge Jackman's site.😂😂😂
Till I come your way next time with some very unusual recounting of design tales, keep pushing pixels, but don’t forget to rest.
#NotYourUsualDesignBlog
