This portfolio

The Idea

I wanted a portfolio that would be both beautiful, handy, and fun to make.

• Beautiful because it is important to me to work on a project that doesn't look junky. I want it to look polished and curated.
• Handy because I need to display a lot of stuffs there; I have a lot to tell you about and to show you !
• Fun to make basically explain itself. Developing app and websites are something that is more than a job for me. I really enjoy tinkering stuffs.

Let's make it pretty

the Perlin noise

Before even thinking about a portfolio, I was fascinating with perlin noises. I once stumbled upon a video about biome generation in minecraft and at this time I knew that I was going to use this in a future project.
So what it perlin noise ?
Well it is a complex mathematical tool that basically generate a noise but with changes in density.

This is a regular noise

And this is a perlin noise

Tweaking it a little with a couple filters, you can end up with stuffs like this :

or this :
\

In my case I wanted something that would not be too hard to compute for the computer, so I decided to pixelate it, and I end up with something like that.

Afterward, I wanted it to be animated, so the user can realize that is being generated live.

The color palette

When starting this portfolio, I didn't really know what would be the color palette. I wanted calm colors and a chill vibe.
When I was tweaking the perlin noise, I quickly found this purplish color (light theme) by offsetting the multiplier of one color :

// see how the second value is multiply by 12 instead of 10
rgba(${255 - yn * 10}, ${255 - yn * 12}, ${255 - yn * 10}, 1)

Then, using the same multiplier on the dark theme formula, I ended up with this greenish color.

rgba(${yn * 10 + 30}, ${yn * 12 + 30}, ${yn * 10 + 30}, 1)

All was great except the background in the dark theme that was too dark, it was pure black.
using a threshold on my RGB values, I could dampen the black.

// Math.max allow me to assure that no rgb values go under 40 (notice the slight offset of the greens)
rgba(${Math.max(yn * 10 + 30, 40)}, ${Math.max(yn * 12 + 30, 45)}, ${Math.max(yn * 10 + 30, 40)}, 1)

The glass panels

I was happy with my color and my background and wanted to emphasize on this. So I decided to go for a glass look on my card and my navigation menu on the left.

The layout inspiration

I got a lot of inspiration for my portfolio from Brian Lovin's one.
From there I got my vertical navigation bar, my stack page, the integration of like and comments.
I think this website is brilliant, I could make a whole post about it.
It is well-designed and full of interactions. You can really feel that Brian is passionate about his work.

I find also crazy that people submit pull request to his website ! He got people so much passionate with his website that they help him with it !

A Post Driven Portfolio

I wanted my portfolio to easy to maintain and to update. So I decided to base most of my pages around Blog Post in Markdown format. That way it is standardized, clean, minimalist and scalable. I went crazy about the little features that no one would see.
But then, a good friend of mine, Guillaume Bonnefoy advise me to focus on features that people would actually see.

\Here you can see how it looks like on my side (admin):

• On the left you can see how I can add, delete and update posts.

• And in the middle top you can see how I can upload images on the go to include them on the go in the markdown.

• Just under that, I can add tech that are related to the post.

I was so focused on tinkering my little website that I lost track of my main objective : Display my work, so people actually see what I can do !

So I added the ability to comment, to like posts and to say (just like on Brian's website) "Hey, I use this tech too !".