How to make Portfolio Website using HTML, CSS And JavaScript | Portfolio Header with Dark Mode.

CodewithNizami February 9, 2022

0 1 7 minutes read

Dear friends in this articles we learn about How to make Portfolio Website Using HTML, CSS and JavaScript | Portfolio Website with Dark Mode Enable and Disable. If you like our article then visit more.

There are many factors that can contribute to an impressive portfolio website, but none are as imperative as the header or first section of a designer’s portfolio website. A successful portfolio website header includes 3 key elements that I find most designers and creatives leaving out.‍

The three most important elements you need for a successful portfolio website header are an attention-grabbing headline, a professional and creative image of yourself, and a clear and easily accessible call to action.‍

Including all three of these elements in your portfolio website header, will impress potential new clients visiting your website and lead to new opportunities as you grow in your design career.

Table of Contents

What Is A Website Header?

To simply put it, a website header is the very first section of your website. This section usually contains the most pertinent information that you want to convey to any visitor coming to your portfolio website. In the early web design days, the header was a narrow section at the top of a website that would likely include a logo and other information. In current day website design, the header section refers to all of the space above the bottom of the browser. Some portfolio websites I’ve seen around the web are made up of only a header section and others contain sections following the header with more expansive information spread throughout them. Either method is acceptable as long as it follows your website’s strategy, design, and goals.

Why Is A Header Section Important?

Since the website header is the very first section visitors will see when visiting your portfolio website, it can be argued that this is the most important section. You can think of the header section of your portfolio website as the first impression visitors get when they visit your portfolio website. The header section of your portfolio website should quickly summarize who you are, what it is you do or offer, and how to get in contact with you to potentially work together. When I say “quickly summarize”, and this may sound counterintuitive, this means keeping these pieces of information to the absolute bare minimum, enough so that your target demographic or ideal clients will still understand. If this sounds confusing, don’t worry we’ll go into more detail of each piece later on in this article. I know this might sound scary but also keep in mind that these 3 important pieces of information can live throughout your portfolio website and be expanded upon with larger descriptions. I have followed this format since graduating from design school and it has resulted in many new opportunities for client projects, full-time jobs, and expanding my network for future design work.

Portfolio Website Design Tip

Something that echoes in my mind whenever I review a portfolio website or even redesign my own is “if a visitor were to land on your website and never actually scroll to the information below, what would they come away with?”. Another piece of wisdom that sticks with me whenever I am designing websites that I have learned over the years being a digital designer is that people tend to land on a website page and immediately try to scroll as far as they can before returning to the top of the page. While keeping both of these bits of information in mind it is necessary to strike a balance between the two. I believe if you can create a successful header section for your portfolio website, then you can cause anyone visiting to stop and view the information before proceeding through the rest of your portfolio website.

The 3 Important Elements You Need In Your Portfolio Website Header

1. A Smashing Headline

The first element that should be most present in the header section of your portfolio website should be a headline. Some may say that this sounds obvious but the headline is very important as it should grab any new visitor’s attention and potentially stop them in their scrolling rampage. The headline also needs to perform double duty by quickly summarizing in a few words what it is you do as a designer or creative. In the past, I have seen a lot of designers use the headline as an introduction saying something along the lines of “Hello, my name is Jon” or “Hi, nice to meet you”. These are fine, I guess, but I believe this method is very overused and leaves designers missing out. My most recent portfolio headline that I have been using as of writing this article is “Business meets Design” as I have found myself working a lot within larger companies that have existing businesses as a consultant/designer. The idea for this headline came about as I have had more conversations with directors or leaders in the more “businessy” departments of companies rather than creative directors of design departments. Although this headline is simple and I’ll be the first to admit not the most elaborate, it has proven to resonate with the demographic of people I tend to meet with the most. There are few key pieces we can extract from this headline example that you can use your own headline.

It’s as simple as simple gets with only 3 words in the headline. I would recommend that your headline is no more than 8-10 words.
This headline was crafted with my “ideal” client in mind. Individuals that work in businesses that need a creative partner with good design skills but can also interface with other aspects of the business.
Finally, as you can see in the image below, my headline is the largest item in my header section and most likely the first thing visitors see when they come to my portfolio website.

As I mentioned before you can absolutely choose to elaborate on this headline in an additional section on your portfolio website or as I have done with a smaller description below the headline. In my case, this was definitely needed as I mentioned that my current headline is very very simple. Almost too simple. In the next iteration of my header section headline for my portfolio website(if I ever finish it) I have chosen to remove the description entirely and opted for a large in-your-face headline that gets directly to what I do as a designer. I’ll share it on my instagram or tiktok when I am finished.

2. Picture of YOU

Yes, the second important piece to the header section of your portfolio website is a picture of you. And I don’t mean the same photo you use for your Instagram page, or even one from your LinkedIn(which you should absolutely have). Unless you would consider it professional of course. I mean a photo that helps give any visitor a sense of your style, personality, and taste. You’ll hear me say this a lot in this article but your portfolio website is your first impression to potential new clients. This is your business card. This is your lifeline. This is pretty much everything when it comes to becoming a successful working creative. This photo of you should be of the highest quality. For reference, I have provided the one I use on my website below as an example.

Source Code..

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfolio Header</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Kanit&family=Poppins:wght@200&family=Righteous&family=Russo+One&family=Ubuntu+Mono&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: rgb(235,235,235);
}
.header{
    width: 80%;
    height: 550px;
    background-color: white;
    box-shadow: 0 0 15px rgba(0,0,0,0.404),
    0 0 20px rgba(0,0,0,0.267);
    border-radius: 10px;
}
.header .nav .logo{
    margin: 30px 0 0 50px;
    font-size: 30px;
    font-family: verdana;
    color: rgb(221,2,2);
}
.header .nav ul{
    display: flex;
    position: absolute;
    right: 230px;
    top: 75px;
}
.header .nav ul li{
    list-style: none;
    margin-right: 25px;
}
.header .nav ul li a{
    text-decoration: none;
    color: black;
    padding: 3px 5px 3px 5px;
}
.header .nav ul li a:hover{
    border-bottom: 2px solid rgb(221,2,2);
}
.header .nav .icon{
    display: flex;
    position: absolute;
    right: 170px;
    top: 70px;
}
.header .nav .icon .dark-icon{
    display: flex;
    justify-content: center;
    align-items: center;
}
.header .nav .icon .dark-icon ion-icon{
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: rgb(41,41,41);
    color: white;
    font-size: 10px;
    padding: 5px;
    cursor: pointer;
}
.header .nav .icon .light-icon{
    display: flex;
    justify-content: center;
    align-items: center;
    display: none;
}
.header .nav .icon .light-icon ion-icon{
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: rgb(221,2,2);
    color: white;
    font-size: 10px;
    padding: 5px;
    cursor: pointer;
}
.header .center-content{
    display: flex;
}
.header .center-content .content{
    margin: 200px 0 0 150px;
}
.header .center-content .content span{
    font-weight: bold;
    font-size: 30px;
    font-family: verdana;
}
.header .center-content .content p{
    margin-bottom: 20px;
}
.header .center-content .content .download-btn{
    padding: 5px 20px 5px 20px;
    border-radius: 5px;
    text-decoration: none;
    background-color: rgb(221,2,2);
    color: white;
    margin: 20px 0 0 0;
    transition: 0.5s;
}
.header .center-content .content .download-btn:hover{
    background-color: rgb(250, 86, 86);
}
.header .center-content .img{
    position: absolute;
    top: 130px;
    right: 170px;
    background-image: url(./bgportfolio.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 450px;
    height: 430px;
}
.header .center-content .content  .social-icons{
    position: absolute;
    bottom: 70px;
    left: 180px;
}
.header .center-content .content  .social-icons ion-icon{
    font-size: 20px;
    color: black;
    margin-left: 10px;
}
    </style> 
</head>
<body>
<div id="bgcolor">
    <div>
        <div>Designer</div>
        <ul>
            <li><a id="menu-1" href="#">HOME</a></li>
            <li><a id="menu-2" href="#">ABOUT</a></li>
            <li><a id="menu-3" href="#">SERVICES</a></li>
            <li><a id="menu-4" href="#">CONTACT</a></li>
        </ul>
        <div>
            <div onclick="dk()" id="drk"><ion-icon name="moon-outline"></ion-icon></div>
            <div onclick="lt()" id="lght"><ion-icon name="sunny-outline"></ion-icon></div>
        </div>
    </div>
    <div>
        <div>
            <span id="main-content">I'm UI Designer</span>
            <p id="content">Here you can get my information</p>
            <a href="#">Download CV</a>
            <div>
                <a href="#"><ion-icon id="fb" name="logo-facebook"></ion-icon></a>
                <a href="#"><ion-icon id="insta" name="logo-instagram"></ion-icon></a>
                <a href="#"><ion-icon id="twt" name="logo-twitter"></ion-icon></a>
                <a href="#"><ion-icon id="pint" name="logo-pinterest"></ion-icon></a>
            </div>
        </div>
        <div>
        </div>
    </div>
</div>
<script>
    function dk(){
        document.getElementById('drk').style.display="none";
        document.getElementById('lght').style.display="block";
        document.getElementById('bgcolor').style.backgroundColor="black";
        document.getElementById('menu-1').style.color="white";
        document.getElementById('menu-2').style.color="white";
        document.getElementById('menu-3').style.color="white";
        document.getElementById('menu-4').style.color="white";
        document.getElementById('main-content').style.color="white";
        document.getElementById('content').style.color="white";
        document.getElementById('fb').style.color="white";
        document.getElementById('insta').style.color="white";
        document.getElementById('twt').style.color="white";
        document.getElementById('pint').style.color="white";
    }
    function lt(){
        document.getElementById('lght').style.display="none";
        document.getElementById('drk').style.display="block";
        document.getElementById('bgcolor').style.backgroundColor="white";
        document.getElementById('menu-1').style.color="black";
        document.getElementById('menu-2').style.color="black";
        document.getElementById('menu-3').style.color="black";
        document.getElementById('menu-4').style.color="black";
        document.getElementById('main-content').style.color="black";
        document.getElementById('content').style.color="black";
        document.getElementById('fb').style.color="black";
        document.getElementById('insta').style.color="black";
        document.getElementById('twt').style.color="black";
        document.getElementById('pint').style.color="black";
    }
</script>
    <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
</body>
</html>