## 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. ![Regular noise](https://as1.ftcdn.net/v2/jpg/05/49/29/70/1000_F_549297047_fxiIUIxD1AM6Iaw3GjQQ9ZBRrHJQm21q.jpg) This is a regular noise ![Perlin noise](https://upload.wikimedia.org/wikipedia/commons/8/88/Perlin_noise_example.png) And this is a perlin noise\ \ Tweaking it a little with a couple filters, you can end up with stuffs like this : ![Perlin noise](https://www.researchgate.net/profile/Jiri-Kosinka-2/publication/332164251/figure/fig6/AS:745331243368449@1554712224283/Three-different-types-of-distortion-applied-to-a-Perlin-noise-field-top-left.ppm)\ \ or this : ![Perlin noise](https://sighack.com/public/images/2018-01-03-getting-creative-with-perlin-noise-fields/example-5.png)\ \ 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. ![Pixelated Perlin noise](http://anderoonies.github.io/projects/perlin/perlinnoise.png)\ \ 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 : ```typescript // 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. ```typescript 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. ```ts // 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. ![Brian Lovin Website](https://uoeohmz1cojcdmtr.public.blob.vercel-storage.com/Screenshot%20from%202024-02-26%2016-07-30-4V9vLKgYGzyJPGQGBmAuUMHXL9Weey.png)\ 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): ![my website](https://uoeohmz1cojcdmtr.public.blob.vercel-storage.com/Screenshot%20from%202024-02-26%2016-26-08-gmTimMgV2RQ03nThSMPX3bgECgClgZ.png) - On the left you can see how I can add, delete and update posts. ![admin view](https://uoeohmz1cojcdmtr.public.blob.vercel-storage.com/Screenshot%20from%202024-02-26%2016-34-17-HDuMzKefeyJf4PajdZ1OTxY6mzaqru.png) - 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. ![admin view upload image](https://uoeohmz1cojcdmtr.public.blob.vercel-storage.com/Screenshot%20from%202024-02-26%2016-35-12-2vw0sQGcCRyApiq3m6nd5qd5w6jg9W.png) - Just under that, I can add tech that are related to the post. ![my website](https://uoeohmz1cojcdmtr.public.blob.vercel-storage.com/Screenshot%20from%202024-02-26%2016-32-35-fN5MBjevRxzdsEuFhQFJz7gCsO3Mtz.png) 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 !".

Sébastien Pingal

Mes technos

Frontend

Backend