How I create my portfolio for Web developer
Tags: Website, Figma, Web Development, Portfolio, Web Design

Hi, With this story, I try to show you how I create my WebSite.

Little presentation and disclaimer:

At least, I need to make a little presentation of your humble servant, yes it’s my first post on Medium and I need to put some context. I’m a web dev for a web Agency near Lyon in France. I’m 28, I fully passionate about web culture in general. Social media, web technologies, Cryptocurrencies(And even more when the BTC take 40k :)), 3D print, mechanical Keyboard, Web design, and a lot of other things.

With these stories, I try to document my experience during reforge my website. This is not a tutorial, I do not claim to have the only truth.

Most important things:

At first, we need to define what we do on this site. The target’s and goals .for me the most important thing when you create something. In my case, it’s simple.

To define the way you can use the Five W: who what when where why. For this site, I just use Why/Who/What.

Why: My objective was principally to share my work and try something on the real website.

Who: My target is more difficult to define. At first, it’s for me and someone else(Who??? Someone like you, I guess). But my website can be seen by some recruiter’s and this part has more scary for me. Yes, I’m a web developer and I can’t make Big mistake on my website…

What: I just want to create a nice website to practice my “Desing” skills and post some side projects. Like my Picture, graphic creation, or something like this.

I start with these objectives.

For the second time, define techno how you use it. In this case, I want to start from scratch. Why? Because I’m a Developer and I use many frameworks, CMS, or whatever every day. And for this time I want to start from scratch. This is not the best option I can be more productive with some lib’s or frameworks. But, I want try to make something juicy from scratch. So I just start whit Html/CSS/js in my backpack.

Now, we know our target, our technos and our objectives.

Let’s Go.

Research, ideas, And creations:

For my prototype and mockup. I use Figma. It’s really simple and powerful. You can try your idea faster.

But Before starting on Figma I spend a Loooooonnnnggggg time finding and regroup ideas.

I really like to spend much time per week to scroll and scroll on different websites like awwward.com, minimalny.com, dribbble.com, codrops, instagram.com. Yes, you can find some good stuff on Instagram if you follow the good persons. And create on your browser a folder to pin a website when you like it. You can find the agency or freelancer who makes a site you like. In general, they have a wonderful portfolio.

I reached my inspiration on “classic” art, picture, film, painting follow some artistes, museums, youtube. It doesn’t matter as long as it’s inspiring.

Before starting to try something I like to make a mood board to create a direction. For example, I want to try to make something “graphic".

For this, I create a few mood boards to help me with my creation.

At the same time, I research font and color. For my color, I’m not original I really really like #003366(my medium background) and I put it everywhere. But for the font, I have a little plugin on chrome “whatfont”. And I have another folder on my browser. I pick up on this when I need it.

You can use pixelsurplus.com. It’s a good site. you can find a lot of things.

If you want to create a Wonderful portfolio, keep in mind, the moment mode. Don’t make something outdated. On the web, we have a trend try to follow if you are a “designer”, “UI/UX”.

But for me it’s ok. I have a magic card. “I’M NOT A DESIGNER I’M A DEV”

Try try try ANDDDD try again:

Open Figma. And let’s go. I try some stuff. I really like the VERY BIG TITLE trend, so I try.

Reading grid, I like to use a “reading grid” to create my site. I am simplifying but the principle is rather simple. When you open a web page, your eyes see the top left corner and after that, it makes a Z on the page. I put the most important thing in the upper left corner. And I’m trying to configure my webpage according to that. You can find a lot of information with eye-tracking study, on google scholar.

I like this first try. But I’m not confident… So let’s go again.

Oh, this sounds great. But we need to tweak. Change font color to make a good contrast, for this I use “color contrast checker” on Figma. This plugin’s very good. This page needs some “life” I add a few images. And I make my inner pages. At this time I need to have a global vision.

Ok you’re right I love this picture of me but I don't have another one…

I’m not totally satisfied with my gallery and project page. But it’s ok at this moment (I need a lines of code in my blood).

Never Forget One:

Your first idea is the worst. Do many iterations of your idea. Your first idea is the worst. Do many iterations of your idea. You can share, with your lover/mum/dad/brother/sister (your cat can’t help you… sorry). You can share on Instagram/Discord/Twitter or whatever. If they can’t use the website or it’s too difficult to figure out. Trust them. Keep in mind that you are not the user of your website.

Never Forget Two:

Your site has not frozen, he can evolve during the creation. But, you can’t change everything between each iteration. I try this before, and spoiler alert this is the worst idea. Yes, you can trust me.

Never Forget Three:

When your project is stable, make a graphic charter (I don’t do it because I’m lazy… but I have my font/color, etc. fixed on my CSS page). You should also choose your domain name for your website. If you spend a lot of time creating your identity and can’t buy your DN, your Fu… up

Welcome, Part 2:

Let’s go, I start to love it. It’s time to go on. I open my Vscode and let’s go to make some line of code.

See you in the next part.