Do you find it hard to develop something on yourself from scratch? You had been in all tutorials loop week after week and then you start again. Your peers and your circle of friends have a cool profiles both on GitHub, and LinkedIn, their web portfolios which God only knows when did they build it. I can lie, we are all the same only we have different structures about thinking. We wake up every day to think about the best possible way to learn. There are so many juicy guides over the internet, whether the best of this and that, how to of all roadmaps.

Refining step to building a web portfolio

Step 1

Forgot everything you know. It is time for me to share how I do it. If I have a week to build my web profile, I am sure there are so many things I must take into consideration. The most important one which I am sure everyone finds hard to consider is where to start. Lol 😀 you are right, we always want to become beginners in everything we do. I am sure if you ever start working on something, especially the one are trying to learn, you want always to pick on the beginner type.

In this step, I started by finding inspiration from different online platforms. The good one I find good for me includes Dribble, Pinterest and Figma communities. You can also peep into web profiles for other developers for instance The list is long. But wait 🤔🤔🤔, why do we need inspiration? Yeap, most of the inspiration gives you what content and flow are needed in the profiles you want to build. You will learn that you need a home, about me, services, portfolio etc on your profile and at the same time you will get to notice a consistent flow of arrangement of all sections as well as the content of each section. You will get to know what data you need to work on before you start developing. It is like getting all the necessary resources before building something.

I am sure you don't want to build a brick house only to get to notice that you don't have enough bricks along the way. Have all your content in the same place. Pictures, description and all necessary information before you start on your design.

I got my inspiration in the following links

These are just two examples you will find more than these and pick any number, compare them with each other find out the standard of developing such sites. If you have everything, it is time to come out with your design

Step 2

When you are done with step 1, I am sure you have come up with the way your web portfolio profile would look like. I know if you are like me, you might be a bit lazy to design your page. There will be always a tendency for you to recreate the design of others. It is okay for a start, but what is good is coming up with your imagination.

So, where can you start then? Right, the best thing you can do is create a wireframe. A paper wireframe is the best for me. You should try this as it will be your first sketch of what you actually will be coming up with.

My handwriting is the worst 🙀. I don't care about all the wireframing tools and principles if any exist, this is not academic work but it only acts as a way to give me direction. What I did was create each section's wireframe. I had Home, About Me, Services, Portfolio and finally contact Me section. I did this one every day, so you can guess what else could I have been doing that day. So finally these are the other section I created.

About Me section was created on day two.

That's is portfolio section created on day 4.

Step 3

Have you ever wondered how guys on the dribble and Pinterest come up with designs? Oh leave that, or have you come across a tutorial where there is a youtube guy who comes up with the crazy idea for styling a website so precisely? All length width and heights seem to add up. Yes, prototyping tools like Figma and XD design are among the best.

In this step 3, I design each section one at a time daily. When I have my wireframe, it is easy to think and used tools like Figma to design that section. Don't worry about designing using Figma, grab one of the youtube channels to learn the basic of using the tools. The one I found to be the best for me is this channel https://www.youtube.com/watch?v=HZuk6Wkx_Eg. I have never used Figma before.

I know this is not the best but it is the same as the wireframe I created. All the design and the gradient I thought might look good and catchy. The whole design look like this when I added all my four days' designs

My contact section is yet to be included. Check my design here as I updated it daily.

Step 4

Now that you have created your prototype. I want to show you some tricks when styling in the code. But first, let's delve into how we should organize our code. I love designing using React most of my front end due to its ease of use of the component-based capability. I divided each section to act as a component on its own. Look at my file structure in picture below

As you can see, each component has a jsx and css files. Like the services component. This will allow me to concentrate only on those sections when adding content as well as styling using css.

This step mainly was done each day for what I designed that day using Figma. Let's look at one example when i was designing.

This is services.jsx file

import React from 'react';
import './services.css';
const Services = () => {
  return (
    <div className="services-main">
        <div className='services-title'>
            <div className="services-title-heading">
                <h1>Services</h1>
            </div>
            <div className="services-title-paragraph">
                <p>I have specialization in the following areas. </p>
            </div>
        </div>
        <div className="services-body">
            <div className="services-body-card">
                <div className="services-body-card-heading">
                    <h2>UI/UX design</h2>
                </div>
                <div className="services-body-card-body">
                    <p>Get the best design. Make your users enjoy your product. Attractive and minimalist design. Modernize your web with new design coming down into the market.</p>
                </div>
                <div className="services-body-card-button">
                    <button type="submit">Find more</button>
                </div>
            </div>


            <div className="services-body-card">
                <div className="services-body-card-heading">
                    <h2>Front end Development</h2>
                </div>
                <div className="services-body-card-body">
                    <p>Make your user interfaces stand out. Use the latest technologies to make your web sites and web apps come alive. Is React,Vue or angular. .</p>
                </div>
                <div className="services-body-card-button">
                    <button type="submit">Find more</button>
                </div>
            </div>


            <div className="services-body-card">
                <div className="services-body-card-heading">
                    <h2>Back end Development </h2>
                </div>
                <div className="services-body-card-body">
                    <p>Make your back end technologies compliment your front end. Ask anything any problem and  be given the best tech stack suited. Is it speed.. </p>
                </div>
                <div className="services-body-card-button">
                    <button type="submit">Find more</button>
                </div>
            </div>


            <div className="services-body-card">
                <div className="services-body-card-heading">
                    <h2>Android Development</h2>
                </div>
                <div className="services-body-card-body">
                    <p>Make your website run on android apps. With knowledge of UI/UX design your product can be whole round. Java, or react native or Flutter. Build your apps in....</p>
                </div>
                <div className="services-body-card-button">
                    <button type="submit">Find more</button>
                </div>
            </div>
        </div>
        <div className="services-extra-info">
            <p>I am also open to discussion to multiple software related services. I have a strong background in computer science</p>
        </div>
    </div>
  )
}

export default Services

This is services.css file

.services-main{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.services-title{
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.services-title-heading h1{
    font-family: var(--font-family);
    background: var(--gradient-text);
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.services-body{
    height:  426.31px;
    margin: 0rem 1.5rem;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}
.services-body-card{
    height: 100%;
    flex: 1;
    display: flex;
    justify-content: flex-start;
    flex-wrap: nowrap;
    align-items: center;
    flex-direction: column;

    font-family: 'Roboto';
    font-weight: 400;
    font-size: 15px;
    line-height: 29px;
    text-align: center;
    letter-spacing: 0.05em;
    margin: 20px;

    color: rgba(41, 33, 33, 0.79);

    background: linear-gradient(128.78deg, rgba(111, 134, 255, 0.47) 13.65%, rgba(78, 100, 215, 0) 92%, #571A6D 92%, #6F8BD4 92%);
    box-shadow: 0px 4px 30px -1px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(15px);
    /* Note: backdrop-filter has minimal browser support */

    border-radius: 0px 0px 50px 0px;
    }
.services-body-card-heading h2{
    padding: 4rem 1rem;
}

Oh, this looks so long!

But wait, I want to refer to some design in figma which i copy direct.

.services-body-card

Is a class that would be used to define the card for each service. In Figma, let's take a look at some gradient as well as the content of each card.

Rectangle 13 forms the service card in react code. When I clicked inspect, if you checked css, you will note that .service-card-body class contains some of the design from that inspect section in Figma. This is to conclude that Figma design makes you only concentrate on the content in the code and not worry about the design. The whole code you can find it in https://github.com/lakiarANIT/mywebportofolio. The project is under development. It is not complete.

Conclusion

Iterating through micro designing of your site whether a website or web app or android app using tools like Figma make your development even faster. At some point you don't need to concentrate so much, just focus on what you can do a little day by day and make your development even better.

This is my first blog, help me write better by commenting and asking questions for more clarification.