DEV Community

Cover image for How to create a portfolio using HTML
Posandu
Posandu

Posted on

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

We will have a result like this:
image

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;
 }
Enter fullscreen mode Exit fullscreen mode

this looks nice
image

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;
    }
}
Enter fullscreen mode Exit fullscreen mode 
<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>
Enter fullscreen mode Exit fullscreen mode

Okay. Now let's create the hero section.
image
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;
 }
Enter fullscreen mode Exit fullscreen mode

image

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

<div class="container">
</div>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

image

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>
Enter fullscreen mode Exit fullscreen mode

We will get this result.
image
Don't worry we'll fix it.

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

.card:hover {
    z-index: 9;
}
Enter fullscreen mode Exit fullscreen mode

image

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>
Enter fullscreen mode Exit fullscreen mode

image

Let's fix the form.

.textbox .input {
    width: 300px !important;
}
Enter fullscreen mode Exit fullscreen mode

image

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>
Enter fullscreen mode Exit fullscreen mode

And we will make the date update automatically.

document.querySelector('#year').innerHTML = new Date().getFullYear();
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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);
 }
Enter fullscreen mode Exit fullscreen mode

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

GitHub logo Tronic247 / material

Modern material design framework

Modern Material design framework for just vanilla JS!

image

Demos

image image image image

Getting started

See how to getting started here.


View on GitHub


Top comments (0)

Read next

hitesh_developer profile image

Angular vs Next.js: A Detailed Comparison

Hitesh Chauhan -

rwxpat profile image

Must-Know Ruby on Rails Gems for Improved Productivity

Patrick Gramatowski -

hitesh_developer profile image

Angular vs Next.js vs Nuxt.js: Choosing the Right Framework for Your Project

Hitesh Chauhan -

abhay_yt_52a8e72b213be229 profile image

Implementing Route Guards in React: Protecting Your Routes with Authentication and Roles

Abhay Singh Kathayat -