Portafolio esencial

1,671 Andev.web

Abrir en el editor Publica tu código

Recomendado

27 June 2025

Ejemplo de página web de portafolio

23 August 2025

Plantilla de sitio web de portafolio de diseñador web

18 May 2024

Página principal del portafolio

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>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;
    }
    
}