Portfolio personnel

1,882 sergioarmijo30

Ouvrir dans l'éditeur Publiez votre code

Recommandé

11 March 2024

Modèle de site Web de portfolio HTML CSS

19 October 2024

Portfolio de développeur HTML V2

23 August 2025

Portfolio de développeur Web : HTML, CSS, JavaScript

HTML

<!DOCTYPE html>
<html lang="es">
<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>Sxrgio</title>
    <link rel="stylesheet" href="stylos.css">
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">
    <link rel="stylesheet" href="contactos.html">
</head>
<body>
     <div class="hero-header">
        <div class="wrapper">
            <header>
                <div class="logo">
                    <i class="fa-solid fa-s"></i>
                    <div class="logo-text">Sergio Armijo</div>
                </div>
                <nav>
                    <div class="togglebtn">
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                    <ul class="navlinks">
                        <li><a href="#">Home</a></li>
                        <li><a href="portafolio.html">Portfolio</a></li>
                        <li><a href="#">Resumen</a></li>
                        <li><a href="blog.html">Blog</a></li>
                        <li><a href="contactos.html">Contacto</a></li>
                    </ul>
                </nav>
            </header>
            <div class="container">
                 <div class="hero-pic">
                    <img src="yo.jpeg" alt="profile pic">
                 </div>
                 <div class="hero-text">
                    <h5>Hola soy <span class="input">Frontend Developer</span></h5>

<h1>Sergio Armijo Perea</h1>

<p> Hola, soy estudiante de Ingenieria de sistemas, me gusta aprender cosas nuevas y mejorar mis habilidades. Me gusta el diseño web y la programacion, tengo conocimientos en HTML, CSS, JavaScript.
                    busco oportunidades para crecer profesionalmente y aprender a desarrollar mis habilidades como Ingeniero.  </p>

<div class="btn-group">
                       <a href="#" class="btn active">Download CV</a>
                       <a href="contactos.html" class="btn">Contact</a>
                    </div>

<div class="social">
                        <a href="https://www.facebook.com/sergio.armijoperea"><i class="fa-brands fa-facebook"></i></a>
                        <a href="https://www.linkedin.com/in/sergio-alejandro-armijo-perea-b78598212/"><i class="fa-brands fa-linkedin"></i></a>
                        <a href="https://www.instagram.com/chechoooooooo/"><i class="fa-brands fa-instagram"></i></a>
                    </div>
                 </div>
            </div>
        </div>
     </div>
     
     <script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.10/typed.min.js"></script>
     <script>
        /** creacion de boton para navbar **/
        var togglebtn=document.querySelector(".togglebtn");
        var nav=document.querySelector(".navlinks");
        var links=document.querySelector(".navlinks li");

togglebtn.addEventListener("click", function(){
            this.classList.toggle("click");
            nav.classList.toggle("open");
        })

var typed=new Typed(".input",{
            strings:["Frontend Developer","UX Designer","Web Developer"],
            typedSpeed:70,
            backSpeed:55,
            loop:true
            })
     </script>
</body>
</html>

CSS

*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-family: poppins,sans-serif;
    text-decoration: none;
}
body{
    overflow-x: hidden;
}
#h1{
    font-size: 2rem;
    color: white;
    text-align: center;
    margin: 20px 0px;
}
.hero-header{
    width:100%;
    height: 100%;
    min-height: 100vh;
    background: #222;
}
.wrapper{
    width:1280px;
    max-width: 95%;
    margin: 0 auto;
    padding: 0 20px;
}
header{
    padding: 40px 0 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
.logo{
    display: inline-flex;
    justify-content: center;
    align-items: center;
}
.logo i{
    height: 45px;
    width:45px;
    background-color: #007ced;
    border-radius: 50%;
    color:#fff;
    font-weight: 700;
    font-size: 1.5rem;
    padding: 10px;
    margin-right: 5px;
    cursor: pointer;
    text-align: center;
    
}
.logo .logo-text{
    font-size: 24px;
    font-weight: 500;
    color:#fff;
}
nav .togglebtn{
    width: 35px;
    height: 35px;
    position: absolute;
    top:45px;
    right: 3%;
    z-index: 5;
    cursor: pointer;
    display: none;
}
nav .togglebtn span{
    display: block;
    background-color: #007ced;
    margin: 5px 0px;
    width:100%;
    height:3px;
    transition: 0.3s;
    transition-property:  transform, opacity;

}
nav .navlinks{
    list-style-type: none;
}
nav .navlinks li{
    display: inline-block;
}
nav .navlinks li a{
     color:#e5e5e5;
     margin-right: 2.5rem;
}
.container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding-top:4rem;
}
.container .hero-pic{
    width: 300px;
    height: 300px;
    border-radius: 50%;
    overflow: hidden;
    border: 15px solid #444;
    box-shadow: 5px 7px 25px rgba(0,0,0,0.5);
}
.hero-pic img{
    height: 100%;
    width:100%;
    transition: 0.5s;
}
.hero-pic img:hover{
    transform: scale(1.2);
}
.hero-text{
    max-width: 500px;
    display: flex;
    flex-direction: column;
}
.hero-text h5{
    color:#e5e5e5;
    font-size: 14px;
}
.hero-text h5 span{
    color:#007ced;
    font-size: 16px;
}
.hero-text h1{
    color: #007ced;
    font-size: 3rem;
}
.hero-text p{
    color:#e5e5e5;

}
.btn-group{
    margin:45px 0;
}
.btn-group .btn{
    border-color: #d5d5d5;
    color:#fff;
    background-color: #333;
    padding: 12px 25px;
    margin: 5px 0px;
    margin-right:7px;
    border-radius: 30px;
    border:2px solid #e5e5e5;
    box-shadow:  0 10px 10px -8px rgb(0 0 0 / 78%);
}
.btn.active{
    border-color: #00ed27;
}
.hero-text .social i{
    color: #e5e5e5;
    font-size: 18px;
    margin-right: 10px;
    transition: 0.5s;
}
.hero-text .social i:hover{
    color:#007ced;
    transform: rotate(360deg);
}
/* Respnosiv design & displaying navbar for small screen */
@media(max-width:930px)
{
    nav .togglebtn{
        display: initial;
    }
    /* for toggle button**/
    .click {
        top:45px;
    }
    .click span{
        position: absolute;
        margin-top:12px
    }
    .click span:first-child{
        transform: rotate(-40deg);
    }
    .click span:nth-child(2)
    {
        opacity: 0;
        margin:0;
    }
    .click span:last-child{
        transform: rotate(45deg);
        top:0;
    }
    nav .navlinks{
        position: absolute;
        top:110px;
        right:-100%;
        bottom: 0;
        width: 60%;
        height: 100vh;
        background-color: #222;
        z-index: 3;
        box-shadow: 5px 13px 30px rgba(0,0,0,0.1);
        transition: 0.5s;
        padding: 25px 0px;
    }
    nav .navlinks li{
        display: block;
    }
    nav .navlinks li a{
        display: block;
        margin-bottom: 15px;
        text-align: center;
    }
    nav .navlinks.open{
        right:0;
    }
}
@media(max-width:768px)
{
    .container{
        flex-direction: column;
        padding-top:2rem
    }
    .hero-text{
        padding:40px 0px;
    }
}

/* Efecto texto del menu*/
.navlinks li a:hover{
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 1.2rem;
    font-weight: 500;
    color: #007ced;
    transition: 0.5s;
}