- next.js
- typescript
- tailwind
- framer motion
- vercel
- figma
Preparation
I love working with Figma, so when I had to come up with a visual representation for this portfolio, it was an easy choice to layout my ideas in my favourite design tool.
Attention for detail
To make it stand out, I chose a red color that contrasts very well with the black background of the site. It easily grabs the attention, and gives a unique feel to the site. To emphasize the subtitle, I used framer motion and animated it like a mexican wave.
In the past 2 years I've experimented quite a bit with AI image generation. This portfolio website was an ideal occasion to use one of my experiments. Before this AI boom, I would make such pictures of myself in photoshop. It's amazing to see the technology advance. I'm always very eager to try out new technologies.
Two marquees grab the attention throughout the site. On the home page one displays the tech stacks I'm familiar with. The other one you can find in the footer and invites you to reach out: “Let's talk”
If you pay attention when you navigate to another browser tab, you will see the tab's title change to “Why don't you come back, no more, no more, no more...”.
Tech stack
When it comes to the tech stack, I chose Next.js because you can really hit the ground running with it. Over the years, it has become my go-to framework for building server-rendered sites. Typescript enhances this by adding strong typing, which improves code quality and maintainability. Finally, deploying on Vercel ensures fast, reliable, and hassle-free hosting, with built-in support for Next.js applications
Accessibility
The importance of accessibility cannot be overstated. By implementing alt text for images, keyboard-friendly navigation, screen reader compatibility, sufficient text contrast, proper html tags etc..., I focus on an inclusive digital environment that accommodates the diverse needs of our society. That's how you end up with a perfect Google Lighthouse report:
