Essential portfolio

Open In Editor Publish Your 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>Andev Web</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
</head>
<body>

<header>
        <div class="logo">
            <img src="https://images.unsplash.com/photo-1721323960622-124edcae5005?q=80&w=1937&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Logo">
        </div>
        <div class="navDiv">
            <label for="menu">
                <i class="fas fa-bars"></i>
            </label>
        </div>
        <input type="checkbox" id="menu">
        <ul class="nav">
            <label for="menu">
                <i class="fas fa-times"></i>
            </label>
            <li><a href="#home">Home</a></li>
            <li><a href="#skill">Skills</a></li>
            <li><a href="#project">Projects</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </header>

<div class="container">
        <div class="banner" id="home">
            <div class="content">
                <p>Welcome to my profile</p>
                <h1>
                    I am Andev Web <br>
                    a <div class="gradientText">
                        <div class="job" data-job1="Developer" data-job2="Frontend"></div>
                    </div>
                </h1>
                <p>
                    I am a passionate frontend developer with an eye for design and usability. I enjoy turning ideas into beautiful and functional websites. Always looking for creative challenges and constant learning.
                </p>
                <div class="find">
                    <h3>Follow my work</h3>
                    <ul>
                        <li><i class="fab fa-facebook-f"></i></li>
                        <li><i class="fab fa-instagram"></i></li>
                        <li><i class="fab fa-twitter"></i></li>
                    </ul>
                </div>
            </div>
            <div class="avatar">
                <img src="https://images.unsplash.com/photo-1721323960622-124edcae5005?q=80&w=1937&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Avatar">
            </div>
        </div>

<div id="skill">
            <h1 class="title">Skills</h1>
            <div class="listSkill">
                <div class="item">
                    <div class="name">HTML5</div>
                    <div class="evaluate" style="--point:80%"></div>
                </div>
                <div class="item">
                    <div class="name">CSS3</div>
                    <div class="evaluate" style="--point:70%"></div>
                </div>
                <div class="item">
                    <div class="name">JavaScript</div>
                    <div class="evaluate" style="--point:80%"></div>
                </div>
                <div class="item">
                    <div class="name">PHP</div>
                    <div class="evaluate" style="--point:60%"></div>
                </div>
                <div class="item">
                    <div class="name">Laravel</div>
                    <div class="evaluate" style="--point:70%"></div>
                </div>
                <div class="item">
                    <div class="name">React JS</div>
                    <div class="evaluate" style="--point:90%"></div>
                </div>
                <div class="item">
                    <div class="name">Vue JS</div>
                    <div class="evaluate" style="--point:60%"></div>
                </div>
                <div class="item">
                    <div class="name">Angular JS</div>
                    <div class="evaluate" style="--point:70%"></div>
                </div>
            </div>
        </div>
        <div id="project">
            <h1 class="title">PROJECTS</h1>
            <div class="listProject">
                <div class="item">
                    <img src="https://images.unsplash.com/photo-1542744173-05336fcc7ad4?q=80&w=2002&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Project 1">
                    <div class="name">
                        Data Analysis
                    </div>
                </div>
                <div class="item">
                    <img src="https://images.unsplash.com/photo-1568901346375-23c9450c58cd?q=80&w=1899&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Project 2">
                    <div class="name">
                        Burger App
                    </div>
                </div>
                <div class="item">
                    <img src="https://images.unsplash.com/photo-1519748771451-a94c596fad67?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Project 3">
                    <div class="name">
                        Magazine
                    </div>
                </div>
                <div class="item">
                    <img src="https://images.unsplash.com/photo-1605235186583-a8272b61f9fe?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Project 4">
                    <div class="name">
                        Cycling
                    </div>
                </div>
                <div class="item">
                    <img src="https://images.unsplash.com/photo-1634979150028-39f84c54d007?q=80&w=2069&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Project 5">
                    <div class="name">
                        Cryptocurrencies
                    </div>
                </div>
                <div class="item">
                    <img src="https://images.unsplash.com/44/fN6hZMWqRHuFET5YoApH_StBalmainCoffee.jpg?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Project 6">
                    <div class="name">
                        Orders
                    </div>
                </div>
            </div>
        </div>
        <div id="contact">
            <h1 class="title">Contact</h1>
            <ul class="contact">
                <li><i class="fab fa-facebook-f"></i></li>
                <li><i class="fab fa-instagram"></i></li>
                <li><i class="fab fa-twitter"></i></li>
            </ul>
        </div>
    </div>

</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600&display=swap');
html{
    scroll-behavior: smooth;
}
:root{
    --light: #eaecee;
    --color-text: #3c3e41;
    --box-shadow: 
    5px 5px 15px #c1c8d3, 
    -5px -5px 15px #ffffff;
    --gradient-bg: linear-gradient(-45deg, #D000F7, #24BAE3);
}
a{
    color: #3c3e41;
    text-decoration: none;
}
body{
    margin: 0;
    background-color: var(--light);
    color: var(--color-text);
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
}
header{
    position: fixed;
    top: 0;
    width: calc(100% - 20px);
    padding: 10px;
    border-bottom: 1px solid #dce1e4;
    display: grid;
    grid-template-columns: 30% 70%;
    background-color: var(--light);
    z-index: 1;
}
header .logo img{
    height: 50px;
}
header ul{
    margin: 0;
    list-style: none;
    display: flex;
    height: 100%;
    justify-content: end;
    align-items: center;
}
header ul li{
    padding: 0 30px;
}
.container{
    width: 1200px;
    max-width: 90%;
    margin: auto;
}
.banner{
    margin-top: 150px;
    display: grid;
    grid-template-columns: 60% 40%;
    border-bottom: 1px solid #dce1e4;
    padding-bottom: 50px;
}
.banner .content{
    text-align: justify;
    padding-right: 50px;
}
.banner .content h1{
    font-size: 4.5em;
    margin: 0;
}
.gradientText{
  display: inline-block;
    background: var(--gradient-bg);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.job{
   display: inline-block;
}
.job::before{
    content: attr(data-job1);
    overflow: hidden;
    display: inline-flex;
    animation: effectText 1s linear infinite alternate,
    changeText 4s linear infinite;
}
@keyframes effectText{
    from{
        max-width: 0;
    }to{
        max-width: 500px;
    }
}
@keyframes changeText{
    from{
        content: attr(data-job1);
    }
    to{
        content: attr(data-job2);
    }
}
.find{
    margin-top: 50px;
}
.find ul{
    padding: 0;
    list-style: none;
    display: flex;
}
.find ul li{
    width: 50px;
    height: 50px;
    box-shadow: var(--box-shadow);
    margin: 10px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: 0.5s;
}
.find ul li:hover{
    color: #fff;
    background-image: var(--gradient-bg);
}
.banner .avatar{
    position: relative;
    height: max-content;
    text-align: center;
}
.banner .avatar::before{
    position: absolute;
    width: 90%;
    height: 80%;
    content: '';
    z-index: -1;
    bottom: 0;
    border-radius: 10px;
    box-shadow: var(--box-shadow);
}
.banner img{
    width: 90%;
}
header .navDiv,
header .nav label,
header input{
    display: none;
}
.title{
    text-align: center;
    padding-top: 100px;
}
.listSkill{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 20px;
    border-bottom: 1px solid #dce1e4;
    padding-bottom: 50px;
}
.listSkill .evaluate{
    width: 100%;
    height: 20px;
    box-shadow: var(--box-shadow);
    border-radius: 10px;
    margin-top: 20px;
    position: relative;
}
.listSkill .evaluate::before{
    position: absolute;
    height: 100%;
    width: var(--point);
    background-image: var(--gradient-bg);
    content: '';
    border-radius: 10px;
}
.listProject{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    border-bottom: 1px solid #dce1e4;
    padding-bottom: 50px;
}
.listProject .item{
    text-align: center;
    box-shadow: var(--box-shadow);
    padding: 20px;
}
.listProject .item img{
    width: 90%;
    border-radius: 20px;
}
.listProject .item{
    text-align: center;
    border-radius: 10px;
    font-weight: bold;
    font-size: large;
}
.contact{
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
}
.contact li{
    width: 50px;
    height: 50px;
    margin: 20px;
    box-shadow: var(--box-shadow);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    transition: 0.5s;
}
.contact li:hover{
    background-image: var(--gradient-bg);
    color: #fff;
}
/* Desktops and laptops ----------- */
@media  screen and (min-width:1224px) {
	/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen and (max-width:1024px) {
	/* Styles */
    header  ul{
    }
    .banner{
        grid-template-columns: 40% 60%;
    }
    .banner .content h1{
        font-size: 2em;
    }
    .listProject{
        grid-template-columns: repeat(2, 1fr);
    }
   
}
/* mobile */

@media screen and (max-width: 767px){
    .banner{
        grid-template-columns: 1fr;
    }
    .banner .content h1{
        font-size: 1.2em;
    }
    .banner .avatar{
        grid-row-start: 1;
    }
    header .navDiv{
        display: flex;
        justify-content: end;
    }
    header label{
        width: 50px;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: red;
        box-shadow: var(--box-shadow);
        border-radius: 50%;
    }
    header .nav{
        position: fixed;
        background-color: #F0F3F5;
        z-index: 1;
        width: 70%;
        height: 100vh;
        left: 0;
        top: 0;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(5, 70px);
        transform: translateX(-100%);
        transition: 0.5s;
    }
    input#menu:checked ~ .nav{
        transform: translateX(0%);
    }
    header .nav label{
        width: 50px;
        height: 50px;
        box-shadow: var(--box-shadow);
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        color: red;
    }
    .banner .content{
        padding-right: 0px;
    }
    .listSkill{
        grid-template-columns: 1fr;
    }
    .listProject{
        grid-template-columns: 1fr;
    }
    
}

Essential portfolio

Recommended

Awesome Portfolio Website

HTML Portfolio Website Template 2024

Portfolio geral (Step by step)

HTML

CSS

JS

Recommended

Awesome Portfolio Website

HTML Portfolio Website Template 2024

Portfolio geral (Step by step)

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS