Complete Responsive Personal Portfolio Website using HTML CSS & JavaScript

Hey, developers welcome to Day 17 of our 90Days 90Projects challenge. And in Day 17 we are going to create a Complete Responsive personal portfolio website using HTML, CSS and JavaScript with source code.

So to run this code you just need to copy the HTML and CSS code and run it into your code Editor. 

Preview

complete responsive personal portfolio website only using html css, personal website using html and css source code,  responsive portfolio website source code, How to create a Personal portfolio website using HTML CSS and JavaScript


Image Resources: Download Now

HTML Code

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">
    <title> Raju Sheoran - Frontend Web Developer </title>
    <link rel="icon" type="image/x-icon" href="./Images/favicon.png">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" media="screen and (max-width: 821px)" href="responsive.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
</head>
<body>

    <!-- Navbar Section -->
    <nav id="navbar" class="flex s-around bg-color">
        <div class="left-nav">
            <h2 class="t-white">Raju Sheoran</h2>
        </div>
        <div class="right-nav">
            <ul class="flex">
                <li><a href="#home" class="t-white roboto">Home</a></li>
                <li><a href="#about" class="t-white roboto">About Me</a></li>
                <li><a href="#skills" class="t-white roboto">Skills</a></li>
                <li><a href="#services" class="t-white roboto">services</a></li>
                <li><a href="#projects" class="t-white roboto">Projects</a></li>
            </ul>
        </div>
    </nav>

    <!-- Bottom Navigator -->
    <section id="bottom">
        <div class="bottom-nav flex s-center items-center">
            <ul class="flex s-around items-center">
                <a href="#home">
                    <li class="bottomo-hover flex s-center items-center"><i class="fa-solid fa-house"></i></li>
                </a>
                <a href="#about">
                    <li class="bottomo-hover flex s-center items-center"><i class="fa-solid fa-user"></i></li>
                </a>
                <a href="#skills">
                    <li class="bottomo-hover flex s-center items-center"><i class="fa-solid fa-code"></i></li>
                </a>
                <a href="#services">
                    <li class="bottomo-hover flex s-center items-center">
                        <i class="fa-solid fa-rocket"></i>
                    </li>
                </a>
            </ul>
        </div>
    </section>

    <!-- Home Section -->
    <section id="home" class="flex s-around sw-80 m-auto">
        <div class="home-left flex items-center">
            <div class="home-content">
                <h6 class="poppinss">Hi, I'm</h6>
                <h1 class="t-white">Raju Sheoran</h1>
                <h4 class="poppinss">Frontend Web Developer</h4>
                <a href="#" target="_blank"><button
                        class="btn poppins">Resume</button></a>
                <a class="btn live poppins" id="hireme" href="https://in.linkedin.com/in/raju-sheoran-b220781b8"
                    target="_blank">Let's Talk</a>
            </div>
        </div>
        <div class="home-right flex s-center items-center">
            <div class="circle flex s-center items-center" id="mainImage">
                <!-- Here in src replace the given link with your image link -->
                <img src="./Images/main.png" alt="">
            </div>

        </div>
    </section>

    <!-- About Section -->
    <section id="about">
        <h1 class="t-center my-2 t-white f-2">About Me</h1>
        <div class="about-container flex s-around ">
            <div class=" about-left flex s-center items-center">
                <!-- Here in src replade the given link with your secondary image link -->
                <img src="./Images/secondary.jpg" alt="" style="width: 50%;">
            </div>

            <div class="about-right flex">
                <div class="about-content">
                    <h1 class="t-white m-b-1 poppins">Raju Sheoran</h1>
                    <p class="t-white poppins">A self-tought Frontend Web Developer BCA student looking for
                        an opportunity in Web Development. <br>
                        Who is committed to study web development. Mindset to fullfill the life with
                        wonderful memories and knowledge.</p>
                    <a class="btn live poppins" id="hireme"
                        href="https://in.linkedin.com/in/raju-sheoran-b220781b8">Hire Me</a>
                </div>
            </div>
        </div>
    </section>

    <!-- Skills Section -->
    <section id="skills">
        <h1 class="t-center my-2 t-white f-2">Skills</h1>
        <div class="services-container flex s-around h-50"">
        <div class=" skills-left flex s-center items-center">
            <img src="/Images/skills.png" alt="">
        </div>

        <div class="skills-right flex items-center">
            <div class="skillss-container">
                <div class="html bar p-relative"><span class="bar-content left t-white">HTML</span><span
                        class="bar-content right-skills t-white">90%</span></div>
                <div class="css bar p-relative"><span class="bar-content left t-white">CSS</span><span
                        class="bar-content right-skills t-white">80%</span></div>
                <div class="js bar p-relative"><span class="bar-content left t-white">JavaScript</span><span
                        class="bar-content right-skills t-white">75%</span></div>
                <div class="bootstrap bar p-relative"><span class="bar-content left t-white">Bootstrap</span><span
                        class="bar-content right-skills t-white">50%</span></div>
                <div class="reactjs bar p-relative"><span class="bar-content left t-white">ReactJs</span><span
                        class="bar-content right-skills t-white">30%</span></div>
            </div>
        </div>
        </div>
    </section>

    <!-- Services Section -->
    <section id="services">
        <h1 class=" t-center my-2 t-white f-2">Services</h1>
        <div class="services-container flex s-center">
            <div class="test-item flex f-col items-center">
                <img src="./Images//developer.png" alt="">
                <h1 class="t-white poppins">Web Development</h1>
                <p class="t-white poppins">Web Development is envolving everywhere. Every startup and every bussines
                    have their own websites. As my passion I will help you to build your clean and fast website for your
                    startup or your bussines.</p>
            </div>
            <div class="test-item flex f-col items-center">
                <img src="./Images//social-media-management.png" alt="">
                <h1 class="t-white poppins">Social Media Management</h1>
                <p class="t-white poppins">Social Media is the power of future. So I'll help in developing brand
                    awareness thow managing your social media handles and will to increase customer loyalty.</p>
            </div>
            <div class="test-item flex f-col items-center">
                <img src="./Images//startup.png" alt="">
                <h1 class="t-white poppins">Growth Strategies</h1>
                <p class="t-white poppins">As a web developer also I will help your brand to grow up . I will provide
                    the growth strategies for your brand. And also help in searching techniques for your brand.</p>
            </div>

        </div>
    </section>

    <!-- Projects Section -->
    <section id="projects">
        <h1 class=" t-center my-2 t-white f-2">Projects</h1>
        <div class="projects-container flex s-center">
            <div class="projects-item flex f-col s-center items-center">
                <div class="image-container p-one">
                    <img src="./Images/weatherApp.png" alt="">
                </div>
                <h1 class="t-white poppins">Weather App</h1>
                <p class="t-white poppins"> A weather app using HTML, CSS and JavaScript. Fetch the weather from the
                    openweather app using fetch api.</p>
                <div class="buttons flex s-around">
                    <a href="#"
                        target="_blanks" class="btn mx-1 m-top">GitHub</a>
                    <a href="#" target="_blanks" class="btn m-top live">Live
                        Link</a>
                </div>
            </div>
            <div class="projects-item flex f-col s-center items-center">
                <div class="image-container p-one">
                    <img src="./Images/burgerKing.png" alt="">
                </div>
                <h1 class="t-white poppins">Burger King</h1>
                <p class="t-white poppins">A simple landing page using HTML and CSS. This webiste is for burger shop who
                    provides all the information of thir services at this landing page.</p>
                <div class="buttons flex s-around">
                    <a href="#" target="_blanks"
                        class="btn mx-1 m-top">GitHub</a>
                    <a href="#" target="_blanks" class="btn m-top live">Live
                        Link</a>
                </div>
            </div>
            <div class="projects-item flex f-col s-center items-center">
                <div class="image-container p-two">
                    <img src="./Images/MBA.png" alt="">
                </div>

                <h1 class="t-white poppins">MBA Chai Wala</h1>
                <p class="t-white poppins">Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic obcaecati cum
                    nemo
                    recusandae voluptas ipsum.s</sp>
                <div class="buttons flex s-around">
                    <a href="#" target="_blank"
                        class="btn mx-1 m-top">GitHub</a>
                    <a href="#" target="_blank"
                        class="btn m-top live">Live Link</a>
                </div>
            </div>
            <div class="projects-item flex f-col s-center items-center">
                <div class="image-container p-three">
                    <img src="./Images/magicNotes.png" alt="">
                </div>

                <h1 class="t-white poppins">Magic Notes App</h1>
                <p class="t-white poppins">Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic obcaecati cum
                    nemo
                    recusandae voluptas ipsum.s</p>
                <div class="buttons flex s-around">
                    <a href="#" target="_blank"
                        class="btn mx-1 m-top">GitHub</a>
                    <a href="#" target="_blank" class="btn m-top live">Live
                        Link</a>
                </div>
            </div>
            <div class="projects-item flex f-col s-center items-center">
                <div class="image-container p-three">
                    <img src="./Images/login.png" alt="">
                </div>

                <h1 class="t-white poppins">Login Form</h1>
                <p class="t-white poppins">Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic obcaecati cum
                    nemo
                    recusandae voluptas ipsum.s</p>
                <div class="buttons flex s-around">
                    <a href="#" target="_blank"
                        class="btn mx-1 m-top">GitHub</a>
                    <a href="#" target="_blank" class="btn m-top live">Live
                        Link</a>
                </div>
            </div>

        </div>
    </section>

    <!-- Contact Me Section -->
    <section id="contact" class="m-b-1">
        <h1 class=" t-center my-2 t-white f-2">Contact Me</h1>
        <div class="contact-container flex s-around items-centers">
            <div class="form" id="contactForm">
                <form action="" id="contactFrom">
                    <div class="name form-div">
                        <input type="text" name="name" id="name" class="poppins" placeholder="Enter Your Name">
                    </div>
                    <div class="email form-div">
                        <input type="email" name="email" id="email" class="poppins" placeholder="Enter Your Email"
                            required>
                    </div>
                    <div class="phone form-div">
                        <input type="phone" name="phone" id="phone" class="poppins" placeholder="Enter Your Phone"
                            required>
                    </div>
                    <div class="textarea form-div">
                        <textarea name="text" id="textarea" cols="30" rows="10" class="poppins"
                            placeholder="Enter Messages"></textarea>
                    </div>
                    <button type="submit" class="btn poppins" id="submit">Send</button>
                </form>
            </div>
        </div>
    </section>

    <!-- Footer Section -->
    <footer id="footer">
        <ul class="flex s-center w-80 m-auto my-2 res">
            <li><a href="#home" class="poppinss">Home</a></li>
            <li><a href="#about" class="poppinss">About</a></li>
            <li><a href="#skills" class="poppinss">Skills</a></li>
            <li><a href="#projects" class="poppinss">Projects</a></li>
            <li><a href="#portfolio" class="poppinss">Portfolio</a></li>
        </ul>
        <ul class="flex s-center w-80 font-awesome ">
            <a href="https://in.linkedin.com/in/raju-sheoran-b220781b8" target="_blank">
                <li><i class="fa-brands fa-linkedin-in"></i></li>
            </a>
            <a href="https://github.com/rajusheoran4" target="_blank">
                <li><i class="fa-brands fa-github"></i></li>
            </a>
            <a href="https://www.instagram.com/raju_webdev" target="_blank">
                <li><i class="fa-brands fa-instagram"></i></li>
            </a>
            <a href="https://www.youtube.com/channel/UC6ScgVJbFPpHAnRdrOSJMlg" target="_blank">
                <li><i class="fa-brands fa-youtube"></i></li>
            </a>
        </ul>
        <p class="t-center my-2 poppins">&copy; All Rights Reserved - <span class="cpy-white poppins">Raju
                Sheoran</span></p>

    </footer>

    <div id="scroll-top" onclick="scrolltop()">
        <span><i class="fa-solid fa-arrow-up"></i></span>
    </div>

</body>
<script src="/script.js"></script>

</html>



CSS Code

style.css

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&family=Ubuntu:wght@300;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&family=Roboto:wght@500&family=Ubuntu:wght@300;500;700&display=swap');

body {
    background-color: #1f1f38;
}

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    font-family: 'Ubuntu', sans-serif;
    scroll-behavior: smooth;
}

#navbar {
    line-height: 4rem;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 100;
    border-bottom: .5px solid #ffffff52;
    border-width: 80%;
    margin-bottom: 1rem;
}

#navbar ul {
    list-style: none;
}

#navbar ul li {
    margin: 0px 1rem;
}

#navbar ul li a {
    text-decoration: none;
    padding: 0.5rem 0.9rem;

}

.right {
    display: none;
}

.checkBtn {
    display: none;
}

#check {
    display: none;
}

.nav-col a:hover {
    border-radius: .4rem;
    color: #1f1f38;
    background-color: #fff;
}


/* Home Section */
.home-left,
.home-right {
    width: 48%;
    padding: 2rem;
}

.home-right {
    padding: 0;
}

.home-left h6,
h4 {
    color: hsl(240deg 8% 43%);
    margin: 1rem 0;
    margin-left: 3px;
    font-size: 1.2rem;
}

.home-left h1 {
    font-size: 2.5rem;
}

.home-right {
    position: relative;
}

.home-right img {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    background-size: cover;
    border-radius: 62%;
    height: 100%;
}

.circle {
    width: 17rem;
    height: 17rem;
    border-radius: 50%;
    padding: .5rem;
    position: relative;
}

/* About Section */
.about-left,
.about-right {
    width: 48%;
}

.about-right {
    padding-right: 4rem;
}

.aboout-left {
    position: relative;
}

.about-left img {
    width: 90%;
    border-radius: 1rem;
}

.about-content p {
    margin-bottom: 2rem;
}


/* Skills */
#skills {
    margin-top: 3rem;
}

.skills-left {
    width: 50%;
}

.skills-left img {
    width: 70%;
}

.skills-right {
    width: 50%;
}

.skillss-container {
    width: 100%;
}

.html {
    width: 90%;
    height: .5rem;
    background-color: #e54c21;
    margin: 1rem 0;
    border-radius: 12px;
}

.css {
    width: 80%;
    height: .5rem;
    background-color: #00a0e4;
    margin: 1rem 0;
    border-radius: 12px;
}

.js {
    width: 65%;
    height: .5rem;
    background-color: yellow;
    margin: 1rem 0;
    border-radius: 12px;
}

.bootstrap {
    width: 50%;
    height: .5rem;
    background-color: #7952b3;
    margin: 1rem 0;
    border-radius: 12px;
}

.reactjs {
    width: 30%;
    height: .5rem;
    background-color: #61dafb;
    margin: 1rem 0;
    border-radius: 12px;
}

.learning {
    width: 100%;
    height: .5rem;
    background-color: #61dbfb;
    margin: 1rem 0;
    border-radius: 12px;
}

.bar {
    margin: 2rem 0;
}

.bar-content {
    position: absolute;
    bottom: 10px;
}

.left {
    left: 0;
}

.right-skills {
    right: 0;
}


/* Services Container */
.services-container {
    margin: auto;
    overflow: hidden;
    width: 80%;
}

.test-item {
    width: 20rem;
    margin: 0 2rem;
    background: #2c2c6c;
    border: .5px solid #2c2c6c;
    border-radius: 1.5rem;
    padding: 2rem 1rem;
    text-align: center;
    transition: all .5s;
}

.test-item:hover {
    background-color: transparent;
}

.test-item img {
    margin-bottom: 1.3rem;
    width: 80%;
}

.test-item h1 {
    font-size: 1.2rem;
    margin-bottom: 1rem;
}

.services li .fa-solid {
    font-size: 2rem;
    color: white;
    margin-bottom: 1.3rem;
}

.test-item p {
    line-height: 20px;
    font-size: .9rem;
}


/* Projects Section */
.projects-container {
    justify-content: center;
    align-items: center;
    margin: auto;
    flex-wrap: wrap;
}

.image-container {
    bottom: 2rem;
    height: 10rem;
    position: relative;
}

.image-container img {
    border-radius: 1rem;
}

.image-container .p-one {
    width: 200px;
}

.p-three {
    background: url('project.png');
}

.p-four {
    background: url('project.png');
}

.projects-item {
    overflow: hidden;
    width: 20rem;
    margin: 1rem;
    background: #2c2c6c;
    border-radius: 1.5rem;
    padding: 2rem 1rem;
    text-align: center;
}

.projects-item h1 {
    font-size: 1.2rem;
    margin-bottom: 1rem;
}

.projects-item p {
    line-height: 20px;
    font-size: .9rem;
}



/* Contact me Section */
.form {
    display: flex;
    width: 80%;
    padding: 0 2rem;
    margin: auto;
    justify-content: center;
    align-items: center;
}

.form-div input,
textarea {
    border: 2px solid rgba(77, 181, 255, .4);
    border-radius: .5rem;
    width: 100%;
    margin: 0.5rem 0rem;
    font-size: .9rem;
    background: transparent;
    margin: 0.5rem 0rem;
    padding: 0.5rem 1rem;
    color: white;
    resize: none;
}



/* Footer Section  */
#footer {
    background-color: #4db5ff;
    padding: 2rem;
    padding-bottom: 4rem;
}

ul li {
    list-style: none;
    margin: 0 1rem;
}

ul li a {
    text-decoration: none;
    font-size: 1.2rem;
    color: #1f1f38;
    transition: all .5s;
}

ul li a:hover {
    color: #fff;
}


.font-awesome {
    margin: 1.1rem auto;
}

.font-awesome li i {
    background-color: #1f1f38;
    padding: 0.6rem;
    border: 1px solid #1f1f38;
    color: #fff;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all .4s ease-in-out;
}

.font-awesome li i:hover {
    border: 1px solid #1f1f38;
    border-radius: .5rem;
    background: transparent;
    color: #1f1f38;
}

#footer p {
    color: #1f1f38;
    font-size: .9srem;
}


/* Scroll Top */
#scroll-top {
    background-color: #4db5ff;
    color: #151527;
    padding: 9px;
    border-radius: 9px;
    width: 35px;
    height: 35px;
    position: fixed;
    bottom: 1rem;
    right: 4%;
    font-size: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 2000;
}



/* Bottom Navigator */
#bottom {
    position: fixed;
    width: 100%;
    height: 6rem;
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    bottom: 0rem;
}

#bottom .bottom-nav {
    height: 4rem;
    padding: 0 2rem;
    background-color: #151527;
    border-radius: 3rem;
    z-index: 1000;
    display: -webkit-inline-box;
}

#bottom .bottom-nav li {
    color: #fff;
    width: 3rem;
    height: 3rem;
    cursor: pointer;
    padding: 1rem;
    border-radius: 50%;
    transition: all .4s ease-in-out;
}

#bottom .bottom-nav ul a {
    text-decoration: none;

}

#bottom .bottom-nav li:hover {
    background-color: #4db5ff;
}

#bottom .bottom-nav li:active {
    background-color: #4db5ff;
}

.cpy-white {
    color: white;
}


/* Utility Classes */
.poppins {
    font-family: 'Poppins', sans-serif;
}

.roboto {
    font-family: 'Roboto', sans-serif;
}

.flex {
    display: flex;
}

.s-between {
    justify-content: space-between;
}

.s-around {
    justify-content: space-around;
}

.s-center {
    justify-content: center;
}

.items-center {
    align-items: center;
}

.f-col {
    flex-direction: column;
}


.p-relative {
    position: relative;
}

.t-white {
    color: #fff;
}

.bg-color {
    background-color: #1f1f38;
}

.t-center {
    text-align: center;
}

.my-2 {
    margin: 2rem 0;
}

.f-2 {
    font-size: 2rem;
}

.m-b-1 {
    margin-bottom: 1rem;
}

.w-50 {
    width: 50%;
}

.w-80 {
    width: 80%;
}

.h-50 {
    height: 50vh;
}

.mx-1 {
    margin: 0 1rem;
}

.m-top {
    margin-top: 1rem;
}

.m-auto {
    margin: auto;
}

.btn {
    margin-left: 0 .5rem;
    font-size: 1rem;
    color: #4db5ff;
    cursor: pointer;
    padding: 0.75rem 1.2rem;
    border: 1px solid #4db5ff;
    border-radius: 0.4rem;
    background: transparent;
    font-family: 'Poppins', sans-serif;
}

.buttons a,
#hireme {
    text-decoration: none;
}

.btn:hover {
    color: #1f1f38;
    border-color: #fff;
    background-color: #fff;
}

.live {
    color: #1f1f38;
    background-color: #4db5ff;
}


Responsive CSS Code

responsive.css

#bottom {
    display: flex;
}

#navbar {
    display: none;
}

.right {
    display: block;
}

.list {
    width: 100%;
    height: 100vh;
    background-color: #1f1f38;
    text-align: center;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0rem;
    justify-content: center;
    left: 100%;
    transition: all 1s;
    z-index: 8000;
}

.fa-bars {
    color: #fff;
    font-size: 2rem;
}

#check {
    display: none;
}

.checkBtn {
    display: block;
}

.nav-col a {
    color: #fff;
}

#check:checked~ul {
    left: 0%;
}

.cross {
    position: absolute;
    top: 1rem;
    right: 1rems;
}

.cross i {
    font-size: 2rem;
    color: white;
    position: absolute;
    top: 2rem;
    left: 2rem;
}

.right-nav {
    display: block;
}

.right-nav .flex {
    display: none;
}

.services-container,
#home,
.services-container {
    flex-direction: column;
}

.services-container {
    align-items: center;
}

.about-container {
    flex-direction: column-reverse;
}

#home,
.about-container,
.services-container {
    align-items: center;
}

.home-left,
.home-right {
    width: auto;
}

.services-container {
    height: auto;
}

.about-left,
.about-right {
    width: auto;
}

.about-right img {
    width: 70%;
}

.skills-left {
    width: 80%;
}

.skills-right {
    width: 80%;
}

.about-right {
    margin-bottom: 1rem;
    text-align: center;
    padding: .5rem 1rem;

}

.test-item {
    margin-bottom: 1rem;
    width: 100%;
}

.test-item img {
    width: 50%;
}

@media only screen and (max-width: 470px) {
    #footer .res {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    #footer .res li {
        margin-bottom: 1rem;
    }

    #bottom .bottom-nav {
        padding: 0;
    }
}

JavaScript

script.js

function scrolltop() {
    let a = window.document;
    a = location.href = '#home';
}
let contact = document.getElementById('contactForm');
contact.addEventListener('submit', function (e) {
    e.preventDefault();
    alert(`Sorry Request cannot be accepted due to some technical errors`);
})


Learn HTML- Learn Now

Learn CSS- Learn Now

Visit our 90Days 90Projects Page- Visit Now

Post a Comment

11 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.
  1. keep doing sir
    thanks for the code

    ReplyDelete
    Replies
    1. Most Welcome stay connected with Geeks Help for more projects

      Delete
  2. can u please tell me from where responsive.css starts

    ReplyDelete
    Replies
    1. Sorry for the inconvenience you faced there was an error on our end now it is fixed. Now you can copy the responsive CSS code.

      Delete
  3. hi raju can u please share me the images which u have used in your portfolio

    ReplyDelete
    Replies
    1. Check now images are included before html code

      Delete
  4. Thanks for code

    ReplyDelete
  5. bro js ka code run kyu nhi ho ra ??

    ReplyDelete

Top Post Ad

Below Post Ad