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!
Top comments (2)
Looks neat! Out of curiosity how did old one look like? :))
Thanks 🙌
I haven't keep both online, but here is a screenshot of the "experience" section in the old one:
It now looks like this, in its own layout: