index.html

---
layout: default
---
<style>
    body {
        background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('../img/pexels-photo-2653362.jpg');
        background-repeat: repeat; 
        background-position: center;
        background-attachment: fixed;       
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }


    .header {
        padding-top: 20px;
        text-align: left;
    }

    .name {
        font-weight: bold;
        margin-bottom: 30px;
    }

    .description {
        font-size: 40px;
        font-weight: inherit;
    }
 
    .txt-animado {
    font-size: 43px;
    font-weight: 300;


}

.txt-animado span{
    position: relative;

}

.txt-animado span::before {
    content: "";
    color: chartreuse ;
    animation: palavras 20s infinite;
}

.txt-animado span::after {
    content: "";
    position: absolute;
    height: 100%;
    border-left: 2px solid chartreuse;
    right: -10px;
    animation: cursor .8s infinite, digita 20s steps(15) infinite;
    width: calc(100% + 18px);
    background-color: rgb(0, 0, 0);
   

}
@keyframes digita {
    10%, 15%, 30%, 35%, 50%, 55%, 70%, 75%, 90%, 95%{
        width: 0;
    }
    5%, 20%, 25%, 40%, 45%, 60%, 65%, 80%, 85%{
        width: calc(100% + 18px);
    }
    
}

@keyframes cursor {
    0%{
        border-left: 2px solid black;
    }
    
}

@keyframes palavras {
    0%,20%{
        content: "💡 Undergraduate Software Engineering.";
    }

    21%,40%{
        content: "💻 Learning in areas of:";
    }
    
    41%,60%{
        content: "Software Engineering,";
    }

    61%,80%{
        content: "Cybersecurity and Data Science.";
    }

    81%,100%{
        content: "🔭 Texas Tech University Internship Student.";
    }
    
}

    .social-button {
        width: 75px;
        height: 75px;
        display: flex;
        justify-content: center;
        background-color: rgb(0, 0, 0);
        align-items: center;
        border-radius: 45%;
        color: white;
        margin-right: 25px;
        margin-top: 75px;
        text-decoration: none;
    }

    .social-button:hover {
        background-color: rgb(43, 43, 43);  
    }

    @media(min-width:992px) {
        .header {
            padding-top: 20vh;
            padding-bottom: 112px;    
        }

        span {
            padding: 15px;
            background-color: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7));
            border-radius: 20px;
        }
    }
</style>



<div class="header">
    <h1 class="name"><span>👋 Hello, I'm Amauri</span></h1>
    

<div class="txt-animado">
    <span></span>

    
        <div class="d-flex">
            <a href="https://www.linkedin.com/in/amaurihenriqueribeiro/" target="_blank" class="social-button"><i class="fab fa-linkedin-in fa-2x"></i></a>
            <a href="https://github.com/Ribeirosk8/" target="_blank" class="social-button"><i class="fab fa-github fa-2x"></i></a>
            <a href="mailto:amaurihenrique2017@gmail.com" target="_blank" class="social-button"><i class="far fa-envelope fa-2x"></i></a>
        </div>
</div>