Responsive Personal Portfolio Website Using HTML, CSS, and JavaScript

Do you want to reflect on your skills and experiences but don’t know how? In this article, learn how to create a personal portfolio website using HTML, CSS, and JavaScript, which is fully responsive.

A portfolio website is a unique platform that allows you to showcase your work and tell others about yourself. In other words, it is a curated online space that highlights your best work and achievements, skills, and experiences.

Introduction

The essential elements for your portfolio website using HTML include a showcase of your work, your About page, case studies conducted by you, testimonials, an effective call to action, and a blog.

We will learn how to create a portfolio website using HTML, CSS, and JavaScript. You can add an animated skills bar while incorporating this responsive personal portfolio website using HTML.

Watch the full tutorial on YouTube

Sometimes, watching a video tutorial rather than reading an article can help you understand the concept easily. If you prefer that, I have created a video on the Responsive Personal Portfolio Website Using HTML, CSS, and JavaScript on my YouTube channel. You can access the full source code here if needed. While you are at it, do subscribe and like the content.

Source code for the Responsive Personal Portfolio Website Using HTML, CSS, and JavaScript

Creating the HTML Structure

Create a file named index.html with the default HTML boilerplate code for the responsive personal portfolio website.

Refer to the following HTML code and paste it into the file named index.html:

<!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">
    <link rel="stylesheet" href="style.css">
    <title>DevFolio Website - Coding Power</title>

    <!-- typed.js  -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.12/typed.min.js"></script>

    <!-- font awesome link -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>

    <!-- scroll to top button -->
    <button class="scrollbtn" id="btn" type="button" onclick="scrolltoTop()"><i class="fa fa-arrow-up"></i></button>

    <!-- navbar code start here -->
    <nav class="navbar" id="navbar">
        <div class="logo">
            <a href="#home">DevFolio</a>
        </div>
        <ul class="menu" id="menu">
            <li><a href="#home" onclick="menu()">Home</a></li>
            <li><a href="#about" onclick="menu()">About</a></li>
            <li><a href="#services" onclick="menu()">Services</a></li>
            <li><a href="#portfolio" onclick="menu()">PortFolio</a></li>
            <li><a href="#blog" onclick="menu()">Blog</a></li>
            <li><a href="#contact" onclick="menu()">Contact</a></li>
        </ul>
        <div class="menu-btn" onclick="menu()"><i class="fa fa-bars"></i></div>
    </nav>

    <!-- home section start here -->
    <div class="home" id="home">
        <div class="home-content">
            <h1 class="name">I am Morgan Freeman</h1>
            <p><span class="typing"></span></p>
        </div>
    </div>

    <!-- about section start here -->
    <section class="about" id="about">
        <div class="container">
            <div class="about-content">
                <div class="info">
                    <div class="personal">
                        <div class="photo">
                            <img src="images/testimonial-2.jpg" alt="">
                        </div>
                        <div class="name">
                            <p><span>Name:</span> Morgan Freeman</p>
                            <p><span>Profile:</span> Full Stack Developer</p>
                            <p><span>Email:</span> contact@example.com</p>
                            <p><span>Phone:</span> 1234567890</p>
                        </div>
                    </div>
                    <div class="skills">
                        <h4>Skills</h4>
                        <div class="skill">
                            <span>HTML</span>
                            <span>95%</span>
                        </div>
                        <div class="progress-line"><span class="html"></span></div>
                        <div class="skill">
                            <span>CSS</span>
                            <span>85%</span>
                        </div>
                        <div class="progress-line"><span class="css"></span></div>
                        <div class="skill">
                            <span>JavaScript</span>
                            <span>75%</span>
                        </div>
                        <div class="progress-line"><span class="javascript"></span></div>
                        <div class="skill">
                            <span>Php</span>
                            <span>70%</span>
                        </div>
                        <div class="progress-line"><span class="php"></span></div>
                    </div>
                </div>
                <div class="aboutme">
                    <h5>About me</h5>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iste ipsa rerum aliquam, sit quam id. Quisquam, tempora exercitationem ut porro rem dolores temporibus aperiam incidunt consectetur.</p>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iste ipsa rerum aliquam, sit quam id. Quisquam, tempora exercitationem ut porro rem dolores temporibus aperiam incidunt consectetur.</p>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iste ipsa rerum aliquam, sit quam id. Quisquam, tempora exercitationem ut porro rem dolores temporibus aperiam incidunt consectetur.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- services section start here -->
    <section class="services" id="services">
        <div class="container">
            <h3 class="title">Services</h3>
            <div class="line"></div>
            <div class="services-content">
                <div class="card">
                    <div class="card-content">
                        <div class="icon"><i class="fa fa-code"></i></div>
                        <div class="card-title">Web Development</div>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum, reprehenderit.</p>
                    </div>
                </div>
                <div class="card">
                    <div class="card-content">
                        <div class="icon"><i class="fa fa-mobile"></i></div>
                        <div class="card-title">App Development</div>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum, reprehenderit.</p>
                    </div>
                </div>
                <div class="card">
                    <div class="card-content">
                        <div class="icon"><i class="fa fa-paint-brush"></i></div>
                        <div class="card-title">Web Design</div>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum, reprehenderit.</p>
                    </div>
                </div>
                <div class="card">
                    <div class="card-content">
                        <div class="icon"><i class="fa fa-laptop"></i></div>
                        <div class="card-title">Responsive Design</div>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum, reprehenderit.</p>
                    </div>
                </div>
                <div class="card">
                    <div class="card-content">
                        <div class="icon"><i class="fa fa-line-chart"></i></div>
                        <div class="card-title">Advertising</div>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum, reprehenderit.</p>
                    </div>
                </div>
                <div class="card">
                    <div class="card-content">
                        <div class="icon"><i class="fa fa-wordpress"></i></div>
                        <div class="card-title">Wordpress</div>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum, reprehenderit.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- portfolio section start here -->
    <section class="portfolio" id="portfolio">
        <div class="container">
            <h3 class="title">Portfolio</h3>
            <div class="line"></div>
            <div class="portfolio-content">
                <div class="card">
                    <div class="card-content">
                        <div class="photo">
                            <img src="images/work-1.jpg" alt="">
                        </div>
                        <div class="info">
                            <h3>Project 1</h3>
                            <p><span class="category">Web Design</span> / 20 Apr 2020</p>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-content">
                        <div class="photo">
                            <img src="images/work-2.jpg" alt="">
                        </div>
                        <div class="info">
                            <h3>Project 2</h3>
                            <p><span class="category">Web Design</span> / 20 Apr 2020</p>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-content">
                        <div class="photo">
                            <img src="images/work-3.jpg" alt="">
                        </div>
                        <div class="info">
                            <h3>Project 3</h3>
                            <p><span class="category">Web Design</span> / 20 Apr 2020</p>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-content">
                        <div class="photo">
                            <img src="images/work-4.jpg" alt="">
                        </div>
                        <div class="info">
                            <h3>Project 4</h3>
                            <p><span class="category">Web Design</span> / 20 Apr 2020</p>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-content">
                        <div class="photo">
                            <img src="images/work-5.jpg" alt="">
                        </div>
                        <div class="info">
                            <h3>Project 5</h3>
                            <p><span class="category">Web Design</span> / 20 Apr 2020</p>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-content">
                        <div class="photo">
                            <img src="images/work-6.jpg" alt="">
                        </div>
                        <div class="info">
                            <h3>Project 6</h3>
                            <p><span class="category">Web Design</span> / 20 Apr 2020</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- blog section start here -->
    <section class="blog" id="blog">
        <div class="container">
            <h3 class="title">Blog</h3>
            <div class="line"></div>
            <div class="blog-content">
                <div class="card">
                    <div class="card-content">
                        <div class="photo">
                            <img src="images/post-1.jpg" alt="">
                        </div>
                        <div class="info">
                            <h3>Travel Blog</h3>
                            <div class="category">Travel</div>
                            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ex, quos tenetur magni cumque corporis mollitia!</p>
                        </div>
                        <div class="author">
                            <div class="name">
                                <img src="images/testimonial-2.jpg" alt="">
                                <p>Morgan Freeman</p>
                            </div>
                            <div class="date">
                                <p>15 Aug 2020</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-content">
                        <div class="photo">
                            <img src="images/post-2.jpg" alt="">
                        </div>
                        <div class="info">
                            <h3>Web Design Blog</h3>
                            <div class="category">Web Design</div>
                            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ex, quos tenetur magni cumque corporis mollitia!</p>
                        </div>
                        <div class="author">
                            <div class="name">
                                <img src="images/testimonial-2.jpg" alt="">
                                <p>Morgan Freeman</p>
                            </div>
                            <div class="date">
                                <p>15 Aug 2020</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-content">
                        <div class="photo">
                            <img src="images/post-3.jpg" alt="">
                        </div>
                        <div class="info">
                            <h3>Web Design Blog</h3>
                            <div class="category">Web Design</div>
                            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ex, quos tenetur magni cumque corporis mollitia!</p>
                        </div>
                        <div class="author">
                            <div class="name">
                                <img src="images/testimonial-2.jpg" alt="">
                                <p>Morgan Freeman</p>
                            </div>
                            <div class="date">
                                <p>15 Aug 2020</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- contact section start here -->
    <section class="contact" id="contact">
        <div class="overlay"></div>
        <div class="container">
            <div class="contact-content">
                <div class="message">
                    <form>
                        <h3 class="heading">Send Message us</h3>
                        <div class="line"></div>
                        <div class="field">
                            <input type="text" placeholder="Your Name">
                        </div>
                        <div class="field">
                            <input type="email" placeholder="Your Email">
                        </div>
                        <div class="field">
                            <input type="text" placeholder="Subject">
                        </div>
                        <div class="field">
                            <textarea cols="30" rows="10" placeholder="Message"></textarea>
                        </div>
                        <button type="submit">Send Message</button>
                    </form>
                </div>
                <div class="gettouch">
                    <h3 class="heading">Get in Touch</h3>
                    <div class="line"></div>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis dolorum dolorem soluta quidem expedita aperiam aliquid at. Totam magni ipsum suscipit amet? Autem nemo esse laboriosam ratione nobis mollitia inventore?</p>
                    <div class="info"><i class="fa fa-map-marker"></i>329 WASHINGTON ST BOSTON, MA 02108</div>
                    <div class="info"><i class="fa fa-phone"></i>1234567890</div>
                    <div class="info"><i class="fa fa-envelope"></i>contact@example.com</div>
                    <div class="social">
                        <i class="fa fa-facebook"></i>
                        <i class="fa fa-instagram"></i>
                        <i class="fa fa-twitter"></i>
                        <i class="fa fa-youtube-play"></i>
                    </div>
                </div>
            </div>
        </div>
        <footer class="footer">
            <p>© Copyright DevFolio. All Rights Reserved</p>
            <p>Designed by <a href="https://bootstrapmade.com/">BootstrapMade</p>
        </footer>
    </section>
    
    <script src="main.js"></script>
</body>
</html>

Styling with CSS

Create a CSS file named style.css and then link it to the HTML file. Do not forget this step; otherwise, the CSS styles won’t be applied.

Copy and paste the following CSS code into the file named style.css:

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}


/* common code here */
.container{
    max-width: 1100px;
    margin: auto;
}

section{
    padding: 80px 0;
}

body,html{
    scroll-behavior: smooth;
}

body{
    background: #f5f5f5;
}

.title{
    width: 100%;
    text-align: center;
    font-size: 2.5rem;
    text-transform: uppercase;
    font-weight: 500;
}

.line{
    width: 80px;
    background: #0078ff;
    height: 4px;
    margin: 0 auto;
    margin-top: 10px;
}

.menu-btn{
    color: white;
    font-size: 23px;
    cursor: pointer;
    display: none;
}

.scrollbtn{
    height: 40px;
    width: 40px;
    position: fixed;
    right: 20px;
    bottom: 40px;
    background: #0078ff;
    padding: 8px;
    border: none;
    outline: none;
    border-radius: 50%;
    cursor: pointer;
    z-index: 500;
    pointer-events: auto;
}

.scrollbtn i{
    text-align: center;
    font-size: 20px;
    color: white;
}

/* navbar styling */
.navbar{
    position: fixed;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2rem 8rem;
    z-index: 500;
    transition: 0.4s;
}

.navbar.sticky{
    position: fixed;
    top: 0;
    width: 100%;
    background: white;
    color: #0078ff;
    padding: 1.1rem 8rem;
    box-shadow: 0px 6px 9px 0px rgb(0 0 0 /6%);
}

.navbar .logo a{
    text-decoration: none;
    font-weight: 600;
    font-size: 30px;
    color: white;
}

.navbar.sticky .logo a{
    color: #0078ff;
}

.navbar .menu li{
    list-style: none;
    display: inline-block;
    margin-left: 35px;
    position: relative;
}

.navbar .menu li a{
    display: block;
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    color: white;
}

.navbar.sticky .menu li a{
    color: #0078ff;
}

.navbar .menu li a::before{
    content: "";
    position: absolute;
    width: 0%;
    left: 0;
    bottom: -10px;
    height: 2px;
    background: white;
    transition: 0.2s;
}

.navbar.sticky .menu li a::before{
    background: #0078ff;
}

.navbar .menu li a:hover:before{
    width: 35px;
}

/* home styling */
.home{
    position: relative;
    left: 0;
    top: 0;
    height: 100vh;
    background: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.8)), url(images/intro-bg.jpg) center center/cover no-repeat;
    background-attachment: fixed;
    color: white;
}

.home .home-content{
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.home .home-content h1{
    font-size: 4.2rem;
    margin-bottom: 1.5rem;
}

.home .home-content span{
    font-size: 45px;
}

/* about me styling */
.about-content{
    background: white;
    width: 100%;
    padding: 2.5rem 3rem;
    display: flex;
    box-shadow: 0 1px 1px 0 rgb(0 0 0 /6%), 0 2px 5px 0 rgb(0 0 0 / 20%);
}

.about-content .info{
    width: 50%;
    padding: 5px;
    display: flex;
    flex-direction: column;
}

.about-content .info .personal{
    display: flex;
    align-items: center;
    width: 100%;
}

.about-content .info .personal .photo{
    width: 40%;
    display: flex;
}

.about-content .info .personal .photo img{
    border-radius: 5px;
}

.about-content .info .personal .name{
    align-items: flex-start;
    width: 60%;
}

.about-content .info .personal .name p{
    margin-bottom: 15px;
    font-size: 18px;
}

.about-content .info .personal .name p span{
    font-weight: 600
}

.about-content .info .skills{
    margin-top: 25px;
}

.about-content .info .skills h4{
    font-size: 20px;
    margin-bottom: 20px;
}

.about-content .info .skills .skill{
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.about-content .info .skills .progress-line{
    margin-top: 10px;
    height: 8px;
    width: 100%;
    background: #cde1f8;
    position: relative;
    margin-bottom: 25px;
}

.about-content .info .skills .progress-line span{
    position: absolute;
    height: 100%;
    background: #0078ff;
}

.about-content .info .skills .progress-line .html{
    width: 95%;
}

.about-content .info .skills .progress-line .css{
    width: 85%;
}

.about-content .info .skills .progress-line .javascript{
    width: 75%;
}

.about-content .info .skills .progress-line .php{
    width: 70%;
}

.about-content .aboutme{
    width: 50%;
    padding: 0 20px;
}

.about-content .aboutme h5{
    font-size: 2rem;
    position: relative;
    font-weight: 500;
    margin-bottom: 2.5rem;
}

.about-content .aboutme h5::before{
    content: "";
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 80px;
    height: 4px;
    background: #0078ff;
}

.about-content .aboutme p{
    font-weight: 300;
    margin-bottom: 15px;
    font-size: 20px;
}

/* services section styling */
.services{
    background: #111;
    color: white;
}

.services .services-content{
    margin-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}

.services .services-content .card{
    width: 330px;
    text-align: center;
    background: #222;
    padding: 20px 15px;
    margin-bottom: 30px;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.3s;
}

.services .services-content .card:hover{
    background: #0078ff;
}

.services .services-content .card .card-content{
    transition: 0.3s;
}

.services .services-content .card:hover .card-content{
    transform: scale(1.07);
}

.services .services-content .card .card-content .icon{
    padding: 5px 0;
    color: white;
}

.services .services-content .card .card-content .icon i{
    font-size: 5rem;
}

.services .services-content .card .card-content .card-title{
    padding: 5px 0;
    font-size: 25px;
    font-weight: 500;
    color: #0078ff;
}

.services .services-content .card:hover .card-content .card-title{
    color: white;
}


/* portfolio section styling */
.portfolio-content{
    margin-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}

.portfolio-content .card{
    width: 330px;
    background: white;
    box-shadow: 0 13px 8px -10px rgb(0 0 0 / 10%);
    margin-bottom: 30px;
}

.portfolio-content .card .photo{
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.portfolio-content .card .photo img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.5s;
}

.portfolio-content .card:hover .photo img{
    transform: scale(1.2);
}

.portfolio-content .card .info{
    width: 100%;
    padding: 15px;
}

.portfolio-content .card .info h3{
    margin-bottom: 10px;
}

.portfolio-content .card .info .category{
    color: #0078ff;
}

/* blog section styling */
.blog-content{
    margin-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}

.blog-content .card{
    width: 340px;
    box-shadow: 0 13px 8px -10px rgb(0 0 0 / 10%);
    margin-bottom: 30px;
    border-radius: 5px;
    border: 1px solid rgba(0,0,0,0.125);
}

.blog-content .card .photo{
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.blog-content .card .photo img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.5s;
}

.blog-content .card:hover .photo img{
    transform: scale(1.2);
}

.blog-content .card .info{
    width: 100%;
    padding: 30px 20px 20px 20px;
    position: relative;
}

.blog-content .card .info h3{
    margin-bottom: 10px;
}

.blog-content .card .info .category{
    position: absolute;
    left: 50%;
    top: -14px;
    transform: translate(-50px);
    border-radius: 5px;
    background: #0078ff;
    color: white;
    padding: 5px 10px;
    z-index: 105;
}

.blog-content .card .info p{
    color: rgba(0,0,0,0.6);
}

.blog-content .card .author{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background-color: rgba(0,0,0,0.03);
    border-top: 1px solid rgba(0,0,0,0.125);
}

.blog-content .card .author .name{
    display: flex;
    align-items: center;
}

.blog-content .card .author .name img{
    width: 30px;
    margin-right: 10px;
    border-radius: 50%;
}

/* contact section styling */
.contact{
    position: relative;
    color: white;
    width: 100%;
    background: url(images/overlay-bg.jpg) center center/cover no-repeat;
    background-attachment: fixed;
    z-index: 0;
    padding-bottom: 30px;
}

.contact .overlay{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #0078ff;
    opacity: 0.7;
    z-index: -1;
    pointer-events: none;
}

.contact .contact-content{
    background: white;
    color: black;
    z-index: 100;
    width: 100%;
    padding: 2.5rem;
    display: flex;
}

.contact .contact-content .heading{
    font-size: 2rem;
    font-weight: 500;
}

.contact .contact-content .line{
    margin: 0;
    width: 100px;
    height: 4px;
    margin-top: 12px;
    margin-bottom: 25px;
}

.contact .contact-content .message{
    width: 50%;
    padding: 0 15px;
}

.contact .contact-content .message .field{
    width: 100%;
    margin-bottom: 20px;
}

.contact .contact-content .message .field input,
.contact .contact-content .message .field textarea{
    width: 100%;
    height: 40px;
    border: 1px solid #888;
    outline: none;
    border-radius: 5px;
    padding-left: 15px;
    font-size: 16px;
}

.contact .contact-content .message .field textarea{
    height: 100px;
    padding-top: 5px;
}

.contact .contact-content .message button{
    padding: 15px 25px;
    background: #0078ff;
    color: white;
    font-size: 20px;
    border-radius: 10px;
    outline: none;
    border: none;
    cursor: pointer;
}

.contact .contact-content .gettouch{
    width: 50%;
    padding: 0 15px;
}

.contact .contact-content .gettouch p{
    color: rgba(0,0,0,0.6);
    font-weight: 300;
    margin-bottom: 20px;
    font-size: 20px;
    line-height: 1.5;
}

.contact .contact-content .gettouch .info{
    margin-bottom: 15px;
}

.contact .contact-content .gettouch .info i{
    font-size: 18px;
    color: #0078ff;
    margin-right: 15px;
}

.contact .contact-content .gettouch .social{
    width: 100%;
}

.contact .contact-content .gettouch .social i{
    width: 45px;
    font-size: 25px;
    color: white;
    background: #444;
    padding: 10px;
    text-align: center;
    margin: 20px 5px 0 0;
    cursor: pointer;
    border-radius: 5px;
    transition: 0.5s;
} 

.contact .contact-content .gettouch .social i:hover{
    background: #0078ff;
    transform: translateY(-10px);
}

.contact .footer{
    margin-top: 35px;
}

.contact .footer p{
    text-align: center;
    font-size: 18px;
}

.contact .footer p a{
    text-transform: none;
    color: white;
}

/* responsive styling start here */
@media (max-width:1024px){
    .navbar,
    .navbar.sticky{
        padding: 0.5rem 1.5rem;
    }

    .about .container{
        padding: 0 1.5rem;
    }

    .contact .container{
        padding: 0 1.5rem;
    }
}

@media (max-width:890px){
    .about .container{
        padding: 0 1rem;
    }

    .about-content{
        display: block;
        padding: 25px;
    }

    .about-content .info{
        width: 100%;
        display: flex;
        padding: 0;
    }

    .about-content .aboutme{
        width: 100%;
        padding: 0;
    }
}

@media (max-width:768px){
    .navbar,
    .navbar.sticky{
        padding: 0.5rem 2.5rem;
    }

    .navbar .menu{
        position: fixed;
        height: 100vh;
        width: 100%;
        left: -100%;
        top: 0;
        background: #0078ff;
        color: white;
        text-align: center;
        padding-top: 50px;
        transition: 0.5s;
    }

    .navbar .menu.active{
        left: 0;
    }

    .navbar .menu li{
        display: block;
        margin: 0;
    }

    .navbar .menu li a{
        display: inline-block;
        margin: 20px 0;
        font-size: 25px;
    }

    .navbar .menu li a:hover::before{
        width: 0vh;
    }

    .navbar .menu li a,
    .navbar.sticky .menu li a{
        color: white;
    }

    .navbar .menu-btn{
        display: block;
        z-index: 999;
    }

    .navbar.sticky .menu-btn i{
        color: black;
    }

    .navbar .menu-btn i.active:before{
        content: "f00d";
    }

    .navbar.sticky .menu-btn i.active{
        color: white;
    }

    .home .home-content h1{
        text-align: center;
        padding: 0 20px;
        font-size: 3.2rem;
        margin-bottom: 1.5rem;
    }

    .home .home-content span{
        font-size: 40px;
    }

    .contact .container{
        padding: 0 15px;
    }

    .contact .contact-content{
        display: block;
    }

    .contact .contact-content .message{
        width: 100%;
        padding: 0;
        margin-bottom: 30px;
    }

    .contact .contact-content .message button{
        padding: 10px 15px;
    }

    .contact .contact-content .gettouch{
        width: 100%;
        padding: 0;
    }
}

@media (max-width:500px){
    .home .home-content h1{
        font-size: 2.5rem;
    }

    .home .home-content span{
        font-size: 30px;
    }

    .about-content .info .personal{
        display: block;
    }

    .about-content .info .personal .photo{
        width: 100%;
        margin-bottom: 20px;
    }

    .about-content .info .personal .name{
        width: 100%;
    }
}

Adding functionality with JavaScript

Create a JavaScript file named main.js and then link it to the HTML file. Do not forget this step; otherwise, the animations or functional elements won’t be applied.

Refer to the following JavaScript code and paste it into the file named main.js:

// typing animation
var typing = new Typed (".typing",{

    strings : ["Web Developer", "Youtuber", "Web Designer", "Blogger", "Freelancer"],
    typeSpeed:100,
    backSpeed :60,
    loop:true

});

// sticky navbar
window.onscroll = function(){

    var navbar = document.getElementById("navbar");

    if(window.scrollY > 55){
        navbar.classList.add("sticky");
    }
    else{
        navbar.classList.remove("sticky");
    }

    // scroll to top
    let button = document.getElementById("btn");

    if(document.documentElement.scrollTop > 90){
        button.style.display = "block";
    }
    else{
        button.style.display = "none";
    }

};

function scrolltoTop(){
    document.documentElement.scrollTop = 0;
}

// menu toggle bar
function menu(){
    let menu = document.getElementById("menu");
    let menubar = document.querySelector(".menu-btn i");

    menu.classList.toggle("active");
    menubar.classList.toggle("active");
}

After following the above steps, you can easily create a personal portfolio website using HTML, CSS, and JavaScript. The video tutorial’s complete source code with images can be accessed by clicking the button below.

Conclusion

Now that we have learned how to create a personal portfolio website using HTML, CSS, and JavaScript, if you still have any doubts regarding it, feel free to leave your questions in the comment section. I will be happy to clarify them as soon as possible.

Now, I encourage you to create your personal portfolio website using HTML with other features, unique animations, and features.

Must Visit: Responsive Testimonial Design Using HTML and CSS

FAQ

How do I structure my portfolio website?

To structure your portfolio website, determine a goal and choose the most suitable framework for your website. You should then highlight your best work and create an About section.

Make sure to use a strong call to action button and make your portfolio user-friendly.

Leave a Comment