It's been a while since the last time I woke up and decided my portfolio wasn't what I wanted anymore.
My personal website has two purposes:
- Serving as references when recruiters ask for my résumé or projects
- Trying out new things that I might not be able to professionally at the time
The first one is the core purpose of the site, but the second one is far more entertaining.
Last time, I discovered Analog as a way to create static website with Static Site Generation (or SSG), and decided to try it out:
This time, I noticed a lot has been going on with Svelte and SvelteKit for the past releases: a new major version, a great i18n library with Paraglide JS, their own signal variants with runes and so on.
Moreover, Tailwind released its v4 at the beginning of this year. In the meantime, I also discovered neobrutalism, a specific aesthetic that I wanted to try out.
With the tech stack being set (Svelte + SvelteKit, Paraglide JS, TailwindCSS v4), and a goal (attempting to use neobrutalism), I was all set:
This article is less about the technical details of the rewrite, and more about what I've done and how.
Prefer to see the result first? You can visit it here:
What is Neobrutalism
Before jumping straight to my editor, I first had to clearly identify what neobrutalism was for me.
I'm not very good at designing sleek UIs (and have a lot of respect for people who can), but I do enjoy building interfaces that stand out, even if ‘polished’ isn’t the first word that comes to mind.
Luckily, I found a lot of great resources that cover and explain what neobrutalism is about. The best definition I've found, is the quote from this article:
As a UI design style, neobrutalism focuses on raw, unrefined elements like bold colors, simple shapes, and intentionally "unfinished" aesthetics.
Unlike Material Design, it’s not a rigid system. It’s more about breaking conventional design rules intentionally.
Neobrutalism isn’t one-size-fits-all. These sites, for example, share its hallmarks: bold contrasts, raw edges, and big elements:
Contrasting with the minimalistic, rounded designs we often see, such as LinkedIn's:
My Attempt at it
My main goal was still clarity: recruiters need to grasp my profile quickly. But that didn’t mean sacrificing personality, and that's an important point for me.
Main Section
I started with the main section, as a way to condense a short presentation and the main external links, using rough borders and light animations to make everything more pleasant to interact with:
Experiences
Experiences are usually sections with a lot of details, and packing in duration, title, location, content, and type (pro/personal) without overwhelming visitors wasn't easy.
I explored different options (cards, lists, ...) and decided that a timeline would let me organize this visually, balancing details with simplicity, allowing me to express some of these information as visual elements as well:
- The duration is presented as a label on the top of the card
- The title and location (if present) as headers
- The content as ... content
- The experience type with the type of line that is being drawn on the timeline.
Here's the result:
As a bonus, the current experience's landmark has a nice "ping" animation!
Articles
In the past few years, I've written a few articles on DEV (and even published a book!).
It was important for me to feature this section on the website, as it shows that I'm still interested and publishing about things in tech.
DEV.to has a great API and made it easy to pull article data. There is a lot you can do with it but I kept it simple: title, date, description, and a link to the article.
With a nice animation, and by playing with the colors, I was able to create this overview:
It's also absolutely possible to load more article if the user wants to, thanks to a button at the end.
Projects
Finally, aside from work and writing from time to time, I get occasionally involved in some other projects.
These are usually things I'm proud of, or just happy to share, but the main difficulty was to find a way to present projects that can be widely different: what layout could suit both a coding project and a teaching experience while tying them together cohesively?
In the end, I picked a simple card but with a label to categorize them, as well as an optional link to the original resource:
Conclusion
All in all, I'm pretty happy with the result: it does a better job of showcasing my work and adding context.
Of course, things could be better, but so far everything is generated during the build step, published on GitHub with a CI/CD pipeline, with a French and an English version available, and I find it much clearer than the former version ... until next year probably!
Check out the website and see for yourself!