Posandu

Posted on Jan 2, 2022

How to create a portfolio using HTML

#css #webdev #javascript #showdev

Hello developers! Happy new year. In this tutorial let's create a portfolio like this.

Getting started

Let's first create the basic HTML structure with the libraries.
I am using this library to create the portfolio.

<!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>John doe | Portfolio</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
    <link href="https://unpkg.com/tronic247-material@3.0.0/dist/material.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@6.5.95/css/materialdesignicons.min.css">
</head>
<body>

    <script src="https://unpkg.com/tronic247-material@3.0.0/dist/material.min.js"></script>
    <script>
        Material.Forms.init();
    </script>
</body>
</html>

After that, we have all our libraries added to the package.

Now let's create the header.

<header class="appbar elevating">
    <div class="left">
        <span class="title animated">John Doe</span>
    </div>
    <div class="right">
        <a href="#!" class="btn hide-on-mobile animated text">Home</a>
        <a href="#!" class="btn hide-on-mobile animated text">About</a>
        <a href="#!" class="btn hide-on-mobile animated text">Projects</a>
        <a href="#!" class="btn hide-on-mobile animated text">Contact</a>
        <a href="#!" onclick="Material.Dialog.open(document.querySelector('#hamburger'))" class="show-on-mobile icon">
                <i class="mdi mdi-menu"></i>
            </a>
    </div>
</header>

We will have a result like this:

Now we will make it more nice using some CSS

 body {
     margin: 0;
     padding: 0;
 }

 .appbar {
     position: sticky;
     top: 0;
     left: 0;
     z-index: 9999;
     background: #fff !important;
 }

this looks nice

Now let's make the menu responsive.

.show-on-mobile {
    display: none;
}

@media (max-width: 768px) {
    .hide-on-mobile {
        display: none !important;
    }
    .show-on-mobile {
        display: inline-flex !important;
    }
}

<header class="appbar elevating">
    <div class="left">
        <span class="title animated">John Doe</span>
    </div>
    <div class="right">
        <a href="#!" class="btn hide-on-mobile animated text">Home</a>
        <a href="#!" class="btn hide-on-mobile animated text">About</a>
        <a href="#!" class="btn hide-on-mobile animated text">Projects</a>
        <a href="#!" class="btn hide-on-mobile animated text">Contact</a>
        <a href="#!" onclick="Material.Dialog.open(document.querySelector('#hamburger'))" class="show-on-mobile icon">
                <i class="mdi mdi-menu"></i>
            </a>
    </div>
</header>

<div class="dialog" id="hamburger">
    <div class="content">
        <a href="#!" class="btn unelevated">Home</a>
        <br>
        <a href="#!" class="btn unelevated">About</a>
        <br>
        <a href="#!" class="btn unelevated">Projects</a>
        <br>
        <a href="#!" class="btn unelevated">Contact</a>
    </div>
</div>

Okay. Now let's create the hero section.

And add the CSS.

 #main {
     min-height: 80vh;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
 }

 #main .box {
     display: flex;
     flex-direction: column;
     justify-content: center;
 }

Then let's create a container for the bottom stuff.

<div class="container">
</div>

Inside that let's add the about section.

<div class="row mb-5">
    <div class="col-12 col-lg-6">
        <img src="https://images.unsplash.com/flagged/photo-1570612861542-284f4c12e75f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" class="rounded">
    </div>
    <div class="col-12 col-lg-6">
        <h1 class="mt-0">About me</h1>
        <p>Hey, I'm John Doe. I'm a web developer and designer based in London, UK. I'm a self-taught developer and designer, and I love what I do. I'm currently working as a freelancer, and I'm looking for new opportunities to work on exciting projects.</p>

        <p>Here are some of my skills:</p>
        <ul>
            <li>Responsive web design</li>
            <li>HTML5</li>
            <li>CSS3</li>
            <li>JavaScript</li>
            <li>PHP</li>
            <li>WordPress</li>
            <li>SASS</li>
            <li>Gulp</li>
        </ul>
    </div>
</div>

<div class="p-5"></div>

Then let's add a latest projects section

<div class="row">
    <h2 style="text-align: center;">My latest projects</h2>
    <div class="row">
        <a class="card col-md-4 p-2 ripple-e hoverable" href="#!">
                    <img
                        src="https://images.unsplash.com/photo-1496181133206-80ce9b88a853?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1471&q=80" class="rounded">
                    <h4>Project 1</h4>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquid laboriosam raeos.</p>
                </a>
        <a class="card col-md-4 p-2 ripple-e hoverable" href="#!">
                    <img
                        src="https://images.unsplash.com/photo-1517694712202-14dd9538aa97?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80" class="rounded">
                    <h4>Project 1</h4>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquid laboriosam raeos.</p>
                </a>
        <a class="card col-md-4 p-2 ripple-e hoverable" href="#!">
                    <img
                        src="https://images.unsplash.com/photo-1537498425277-c283d32ef9db?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1478&q=80" class="rounded">
                    <h4>Project 1</h4>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquid laboriosam raeos.</p>
                </a>
    </div>
    <div class="row mt-5">
        <a class="card col-md-4 p-2 ripple-e hoverable" href="#!">
                    <img
                        src="https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80" class="rounded">
                    <h4>Project 1</h4>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquid laboriosam raeos.</p>
                </a>
        <a class="card col-md-4 p-2 ripple-e hoverable" href="#!">
                    <img
                        src="https://images.unsplash.com/photo-1547082299-de196ea013d6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80" class="rounded">
                    <h4>Project 1</h4>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquid laboriosam raeos.</p>
                </a>
        <a class="card col-md-4 p-2 ripple-e hoverable" href="#!">
                    <img
                        src="https://images.unsplash.com/photo-1499951360447-b19be8fe80f5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80" class="rounded">
                    <h4>Project 1</h4>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquid laboriosam raeos.</p>
                </a>
    </div>
</div>

<div class="p-5 m-5"></div>

We will get this result.

Don't worry we'll fix it.

.card:not(:hover, :focus-visible) {
    box-shadow: none;
}

.card:hover {
    z-index: 9;
}

Yay. Now let's create the contact section.

<div class="row mb-5">
    <div class="col-12 col-lg-6">
        <h1>Let's Connect</h1>
        <p>I'm currently looking for new opportunities to work on exciting projects. If you're interested in working with me, please get in touch.</p>

        <div class="mt-2 mb-4">
            <a href="#!" class="icon">
                        <i class="i mdi mdi-github"></i>
                    </a>
            <a href="#!" class="icon">
                        <i class="i mdi mdi-codepen"></i>
                    </a>
            <a href="#!" class="icon">
                        <i class="i mdi mdi-dev-to"></i>
                    </a>
            <a href="#!" class="icon">
                        <i class="i mdi mdi-twitch"></i>
                    </a>
            <a href="#!" class="icon">
                        <i class="i mdi mdi-twitter"></i>
                    </a>
        </div>

        <div class="textbox">
            <div class="left">
            </div>
            <div class="middle">
                <label for="name" class="label">Name</label>
                <input type="text" id="name" class="input">
            </div>
            <div class="right"></div>
        </div>
        <div class="p-2"></div>
        <div class="textbox">
            <div class="left">
            </div>
            <div class="middle">
                <label for="email" class="label">Email</label>
                <input type="text" id="email" class="input">
            </div>
            <div class="right"></div>
        </div>
        <div class="p-2"></div>
        <div class="textbox textarea">
            <div class="left">
            </div>
            <div class="middle">
                <label for="message" class="label">Message</label>
                <textarea id="message" class="input"></textarea>
            </div>
            <div class="right"></div>
        </div>
        <div class="p-2"></div>
        <button class="btn primary">Send</button>
    </div>
    <div class="col-12 col-lg-6">
        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2482.90781809816!2d-0.120873984689908!3d51.5135695798898!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487604c8f8f8f8f%3A0x8f8f8f8f8f8f8f8f!2sLondon%2C%20UK!5e0!3m2!1sen!2sus!4v1588795909872!5m2!1sen!2sus"
            width="100%" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
    </div>
</div>

Let's fix the form.

.textbox .input {
    width: 300px !important;
}

And for the final part. The footer.

<footer class="container-fluid p-5 mt-5 bg-dark-1">
    <p>John Doe &copy; <span id="year">future</span>. All rights reserved. Created with <a href="https://material.tronic247.com/" target="_blank" id="link">Tronic247 Material</a>.
</footer>

And we will make the date update automatically.

document.querySelector('#year').innerHTML = new Date().getFullYear();

Yay! We're done. If you want to add a smooth animation, add this CSS.

.animated {
    opacity: 0;
    animation: fadeup 0.8s ease forwards;
}

@keyframes fadeup {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.animated:nth-child(1) {
    animation-delay: 0.1s;
}

.animated:nth-child(2) {
    animation-delay: 0.2s;
}

.animated:nth-child(3) {
    animation-delay: 0.3s;
}

.animated:nth-child(4) {
    animation-delay: 0.4s;
}

.animated:nth-child(5) {
    animation-delay: 0.5s;
}

.animated:nth-child(6) {
    animation-delay: 0.6s;
}

.animated:nth-child(7) {
    animation-delay: 0.7s;
}

.animated:nth-child(8) {
    animation-delay: 0.8s;
}

.animated:nth-child(9) {
    animation-delay: 0.9s;
}

.animated:nth-child(10) {
    animation-delay: 1s;
}

And for the links add this CSS

 body {
     overflow-x: hidden;
 }

 #link {
     color: rgb(5, 40, 199);
 }

 #link:focus {
     box-shadow: 0 0 0 0.2rem rgba(5, 40, 199, 0.5);
 }

And thanks for reading this tutorial! If you like the template, you can star the framework here.

DEV Community

How to create a portfolio using HTML

Getting started

Tronic247 / material

Modern material design framework

Demos

Getting started

Top comments (0)

Read next

What is an Abstract Syntax Tree in Programming?

jComponent — Total.js

How I linked my Kali Linux to my github account through SSH

How to showcase your GitHub repositories on LinkedIn 🐱