Projects / 2024 Portfolio

The challenge of starting over

2024 came with an unexpected problem: despite having several years of experience in frontend development, much of my work had been lost in a damaged hard drive, and my best live projects had fallen due to lack of maintenance. Yes, I was late to GitHub, and by the time I wanted to upload my files, many of them no longer existed.

When I wanted to put together my portfolio, I only had a few prototypes and a couple of functional pages I had developed in recent months. I had a lot to say but little to show, so I decided to do something a little different: I wouldn't focus on my work 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 space 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 the one designing and developing at the same time, I don't usually make very polished prototypes, nor do I use specific programs for that. However, in this case, I needed to prototype a lot to have a clear color scheme and design system. Illustrator is my favorite tool, and it offers me versatility that others like Figma or Adobe XD don't provide.

In general, I always continue designing while developing, as there are aspects that I can test much more easily through code. On the other hand, when working with designs from others, I simply adjust to the level of freedom they give me to propose improvements.

Something of the result

For the background, I wanted to emulate 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 emulate 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: