Projects / 2024 Portfolio

A limited inventory

2024 came with a particular challenge: despite accumulating several years of experience, the personal projects I could actually show were relatively few. Much of my work that had once been live had gone down from lack of maintenance, and when I went to gather material for my portfolio, the inventory turned out to be thinner than I expected. I had several prototypes, but only a couple of functional pages I had built in recent months.

I had a lot to say but little to show, so I decided to do something a little different: the portfolio wouldn't focus on my projects but rather tell a bit of my story while demonstrating some technical skills. A storytelling journey would run through my career, from my studies to app development, leaving room for future projects.

Design references

I browsed through several sources of inspiration, saving screenshots of other portfolios and websites that I found awesome. One of those screenshots was from a video by Programador X, where he analyzed the portfolio of Oluwadare Oluwaseyi: a sober design with a dark background and huge gray letters, very attractive. The interesting thing was how the YouTuber highlighted details by drawing colorful boxes with a macOS app. The combination of the colorful rectangles and the neutral background caught my attention: there was the style I had been looking for. I decided that multi-colored bordered boxes would frame some phrases in my storytelling.

Another important reference was the GitHub landing page at the time, and its path that guided the user through different points with smooth transitions. I also really liked an animation I saw in a video from the DesignCourse channel, where a red silhouette was drawn on the screen while scrolling. All these ideas fused into what would become my Following Path: a line of vibrant colors starting by framing my name in the hero section and then tracing my professional journey.

Finally, the product pages of Apple were a great inspiration. Although there were many elements I liked, the callouts were one of the simplest, most useful, and attractive things I could have emulated: descriptive paragraphs floating in space and lines that appeared with a slide effect as they entered the viewport.

The prototype

Generally, when I'm in charge of both design and development, I don't tend to make very polished prototypes — let alone use dedicated tools for it. However, in this case I needed to prototype extensively to nail down a clear color scheme and design system. Illustrator is my go-to tool, and it gives me a flexibility that others like Figma or Adobe XD simply don't. From there, I keep designing as I develop, since there are aspects I can test much more easily through code.

Something of the result

For the background, I wanted to simulate the surface of a graphic tablet that lights up with the cursor's presence. I achieved this by using two overlapping backgrounds and a circular mask that reveals the light one following the mouse coordinates.
After a horizontal scroll, the storytelling begins. It was important that this section remained empty beyond the opening phrase, to focus on it as if it were the epigraph of a book. The Following Path may seem like a continuous line, but it consists of small interconnected segments with well-defined positions and scroll progress percentages, animated with Framer Motion.
Instead of presenting all technologies together and classifying them by my level of experience, I preferred to show which ones I used at each step, without assigning meaningless ranges like “90% JavaScript”.
I had a lot of graphic material to feed this portfolio. I had to pace it out and choose wisely so it wouldn't turn into the portfolio of a designer per se. At the end of the journey, I wanted the focus to be on my role as a developer.
I needed a well-thought-out color scheme to create gradients without overwhelming the eye with too many different shades. I chose two colors per section, following the criteria in order of importance: they should match the content displayed in the viewport at each moment, they shouldn't be too different from the colors of the technologies presented, and they should complement the general scheme in sections where there wasn't such a well-defined need.

Something of the result

For the background, I wanted to simulate the surface of a graphic tablet that lights up with the cursor's presence. I achieved this by using two overlapping backgrounds and a circular mask that reveals the light one following the mouse coordinates.

After a horizontal scroll, the storytelling begins. It was important that this section remained empty beyond the opening phrase, to focus on it as if it were the epigraph of a book. The Following Path may seem like a continuous line, but it consists of small interconnected segments with well-defined positions and scroll progress percentages, animated with Framer Motion.

Instead of presenting all technologies together and classifying them by my level of experience, I preferred to show which ones I used at each step, without assigning meaningless ranges like “90% JavaScript”.

I had a lot of graphic material to feed this portfolio. I had to pace it out and choose wisely so it wouldn't turn into the portfolio of a designer per se. At the end of the journey, I wanted the focus to be on my role as a developer.

I needed a well-thought-out color scheme to create gradients without overwhelming the eye with too many different shades. I chose two colors per section, following the criteria in order of importance: they should match the content displayed in the viewport at each moment, they shouldn't be too different from the colors of the technologies presented, and they should complement the general scheme in sections where there wasn't such a well-defined need.

A few nice words

After finishing my portfolio, I sent it to the YouTuber Midudev and here was his reaction: