Obviously, it isn't the norm to feature a case study on your portfolio website about your portfolio website. In spite of that, I put it front and center because it was by far the project that I put the most individual effort into (don't worry, you can read all about my teamwork skills in my other case studies), as well as the project where I experimented the most.
Notion worked as a temporary solution, but couldn't support the complex interactions that make websites really sing.
Originally, I had taken advantage of Notion's ability to publish pages directly to the web and built my first ever portfolio website there. However, the structure was quite limiting, and didn't support fun interactions like scrolling animations, parallax, and so on.
SOLUTION
I experimented with different site builders until I found the right one.
After comparing all of the popular site builders on the market right now (SquareSpace, Webflow, WordPress, Shopify, etc.), I landed on Wix because I wanted the drag and drop functionality to get my site up and running quickly.
So how do you make a portfolio that stands out, highlights your style, proves you have the skillset etc. etc…
I found plenty of inspiration online on sites like Cofolios as well as designers I follow on LinkedIn, YouTube, etc., which I organized into a moodboard on Figma.
After the moodboard was pretty built out, I had come to realize that I wanted to go for a minimalistic feel that didn't conform to the grid layout that so many designers use. Of course, there's a time and place to be conventional (Jakob's law), but I felt I could still design a seamless user experience for the site without sacrificing so much of its personality.
FIRST HOME PAGE ITERATION
Taking the first leap into design.
Since I was repurposing assets for the case studies on the home page, I jumped right into high fidelity and came up with a few initial ideas. At this stage in the design process, I was going for a five section layout with three case studies, a header and a footer.
For the hero section, I was imagining a title, short description, and call to action next to some kind of graphic. I used Adobe Firefly to generate an image of a man sitting down at a desk. And for the case studies, I primarily used mockups I had made for previous projects and added a few more graphics from the Figma community for more flare.
Shown below are three variations that I came up with. I ended up publishing the middle one on Wix.
I found out too late that my initial design wasn't compatible with the Wix sitebuilder.
The problem that quickly arose with this design, however, was that content added on the standard Wix site builder is only responsive when placed in the gridlines, which have space on the left and right. Since my design had content that went all the way to the left and right edges, it wasn't resizing properly. This led to the card design that the current website feaures.
As I continued looking at other portfolios online, I took note of the emphasis on interactivity.
Once I was happy with the overall layout of the site and how it resized, I started experimenting with ways to make the site more interactive. One of the first ways I tried to do this was by creating an animated mesh gradient in Figma to add to the hero section, but currently Figma doesn't support exporting a prototype like that in a native file type. And a flat version didn't look right either.
The next thing I tried was Lottie Files. I built a grid in Figma and then imported a few publicly available files that I had made modifications to into the site. I was happy with the result, but still felt like it wasn't something particularly eye catching or different.
As my ambitions for interactive components grew bigger, I started to question if I was using the right site builder.
Still unsatisfied with the home page's lack of interactivity, I looked at portfolio after portfolio until something clicked. I finally realized that it was time to migrate to Framer. I did this for various reasons, including knowing that I wouldn't be restricted with the grid for resizing, more opportunities for interactivity, and to learn a new software that seems to be quickly becoming the industry standard.
I wanted my new website to be modern, cohesive, trendy, and sleek, so I drafted up a new version in Figma with a new hero section, bento box, and leadership case study section to talk about those as well.
With the daunting task of essentially starting over staring me in the face, I decided to get over that initial hurdle ASAP.
Knowing that it would feel more difficult to jump back into things the longer I waited, I began by skimming through some Framer tutorials online so I was at least somewhat familiar with the new software before I started designing again. Luckily, Framer's interface is very similar to Figma's, so the learning curve was not that steep.
I started with a free template that had a lot of the components I wanted to include already, such as the case study cards and testimonial section. One thing I also wanted to nail down right away was the hero section, and since I was already eager to learn Spline, I remixed a few 3D projects and made a follow cursor animation with them.
Next I tackled the bento box, which I knew would be the perfect spot to add that interactivity that I had been coveting for so long. At the same time I was figuring out what exactly I wanted to include in the bento box, I was learning more about Framer online, which is where I discovered Framer.supply, the interactive components library.
Here, I had a really fun time playing with the animator component, which I used to create the tracing effect on the 3D shapes I imported as SVGs from Figma. I also made a lot of modifications to the lines component to create the effect I was looking for. I also decided I wanted to switch from a light to dark theme to get that premium portfolio look.
The last major change I made was to the cards, which I decided to redesign because the graphics I had made for each one were contrasting each other and making it difficult to maintain the neutral color scheme I was envisioning.
To remedy that problem, I used the Figma Mockup plugin to create some 3D device mockups. And for even more pop, I added the scroll animation.
A portfolio is never finished, is it?
As a designer, it's in our nature to always envision greater heights for our creations. Frustrated with the trouble I was having to get the spline to resize properly on smaller devices (which I now know can be fixed by adding a resize interaction within Spline itself), I went through two more hero section iterations.
The first of which featured the svg of the Vision Pro as a big graphic in the background. I thought this design looked incredible with a y offset loop animation, but when I loaded it within Chrome it was super laggy for some reason (still trying to work that one out).
The final iteration just features the title, description, and CTAs for simplicity and cleanliness, as well as easy of use for resizing. I also watched a video tutorial on how to create the looping text animation.
I could go into more detail about of a couple of other design choices, such as the various button styles I experimented with, the background color for the bento box, cards, and testimonials, as well as the font and font weight for various parts of the website. I'll skip that for now, though, since this case study is already a bit long (but I had a lot to say!)
Anyway, here's the final product, which is currently being made responsive for tablet and mobile.
Make something that's built to last, first. I gravitated to Wix because of the drag and drop functionality, which I knew would allow me to get my site up and running super quick. However, since Framer is just much more capable, I should have gone with it from the beginning.
Set mini goals. I think this whole project would have seemed a lot less daunting if I had given myself individual deadlines for smaller tasks, like "today, I'm going to finish the hero section."
That's it from me. Here's some more helpful links: