My animation doesn't work in the last section of my project

let animatedAbout= document.getElementById("about");
let animatedProyect= document.getElementById("proyects");
let animatedContact= document.getElementById("contact");
let darkButton= document.getElementById("dark-mode");
let root= document.querySelector(":root");
let rootStyles= getComputedStyle(root);
let primary= rootStyles.getPropertyValue("--primary");
let secundary= rootStyles.getPropertyValue("--secundary");
let stackImg= document.getElementById("stack-img");
let fbImg= document.getElementById("fb-img");
let igImg= document.getElementById("ig-img");
let gitImg= document.getElementById("git-img");

darkButton.addEventListener("click",()=>{
    document.body.classList.toggle("dark");
    if(document.body.className==="dark"){
        stackImg.src= "./img/dark-stack.png";
        fbImg.src= "./img/dark-fb.png";
        igImg.src="./img/dark-ig.png";
        gitImg.src="./img/dark-github.png";
    }else{
        stackImg.src="./img/iconmonstr-stackoverflow-4-32 (1).png"
        fbImg.src= "./img/facebook.png";
        igImg.src="./img/instagram.png";
        gitImg.src="./img/github.png";
    }
});

// funcion para las animaciones
function fadeAnimation(animatedComp){
    let scrolltop= document.documentElement.scrollTop;
    if(animatedComp.offsetHeight - 5 < scrolltop){
        animatedComp.style.opacity=1;
        animatedComp.style.top=0;
    }
}

document.addEventListener("scroll",()=>{fadeAnimation(animatedAbout)});
document.addEventListener("scroll",()=>{fadeAnimation(animatedProyect)});
document.addEventListener("scroll",()=>{fadeAnimation(animatedContact)});

.about-me{
    max-width: 1500px;
    height: 500px;
    padding: 0 100px;
    margin: 80px 0 400px;
    opacity: 0;
    position: relative;
    top: 40px;
    transition: all 1s;
    
}

.about-container{
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    
}

.text-container{
    max-width: 800px;   
    height: 300px;
    margin: 0 0 100px 0;
}

.title,.proyect-title{
    font-size: 40px;
    margin-bottom: 80px;
}

.title::after{
    content: "";
    display: inline-block;
    width: 300px;
    height: 1px;
    background-color: var(--secundary);
    position: relative;
    top: -10px;
    margin-left: 20px;
}

.about-text, .skill-item{
    font-size: 18px;
    margin-top: 0;
}

.skills-container{
    position: relative;
    padding-left: 20px;
}

.skill-item{
    list-style: none;
}
.skill-item::before{
    content: ">";
    position: absolute;
    left: 0;
    font-size: 15px;
}

.code-img{
  margin: 0 50px;
}

.proyects{
    max-width: 1500px;
    height: 1235px;
    padding: 0 100px;
    margin: 80px 0 400px;
    opacity: 0;
    position: relative;
    top: 40px;
    transition: all 1s;
}

.container-one, .container-two{
    display: grid;
    grid-template-columns: repeat(12,1fr);
    gap: 10px;
    position: relative;
    margin: 80px 0 300px 0 ;
}

.card-img{
    grid-column: 1/9;
    position: relative;
}

.proyects-img,.proyects-img-two{
    display: block;
    max-width: 100%;
    object-fit: contain;
    border-radius: .4em;
    box-shadow: rgba(2, 12, 27, 0.7) 0px 10px 30px -10px;
    position: relative;
    z-index: 1;
}

.card-img:hover .card-container,.card-container-two{
    margin: 0;
    position: absolute;
    bottom: 0;
    z-index: 3;
    background-color: rgba(2, 12, 27, .75);
    border-radius: .4em;
    width: 100%;
    height: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--animation);
    transition: 500ms;
}

.card-text{
    display: none;
}

.card-img:hover .card-text,.card-text-two{    
    display: inline-block;
    position: relative;
    z-index: 4;
    margin: 15px;
    color: var(--primary);
    background-color: var(--secundary);
    padding: 15px;
    border-radius: 3px;
}


.content-proyect,.content-proyect-two{
    width: 100%;
    padding: 20px;
    background-color: var(--secundary);
    border-radius: .4em;
    grid-column: 7/-1;
    grid-row: 1/-1;
    position: absolute;
    z-index: 10;
    align-self: center;
    box-shadow: rgba(2, 12, 27, 0.7) 0px 10px 30px -15px;
    text-align: right;

}

.proyect-title{
    font-size: 30px;
    color: var(--primary);
    margin: 2px;
}

.proyects-text{
    font-size: 18px;
    color: var(--primary);
}

.card-img-two{
    grid-column: 5/-1;
    position: relative;
}

.card-img-two:hover .card-container-two{
    transition: var(--animation);
}

.content-proyect-two{
    grid-column: 1/6;
    text-align: left;
}

.card-text-two{
    display: none;
}

.card-container-two{
    display: none;
}

.card-img-two:hover .card-container-two{
    display: flex;
    transition: var(--animation);
    transition: 500ms;
}

.card-img-two:hover .card-text-two{
    display: inline-block;
}

/* AQUI SE ENCUENTRA LA SECCION DE CONTACTO*/

.contact{
    margin: 150px 0 80px ;
    max-width: 1500px;
    padding: 0 100px;
    position: relative;
    z-index: 6;
    top: 40px;
    opacity: 0;
    transition: all 1s;
    
}

.contact-grid{
    display: flex;
    flex-direction: column;
}

.input-one{
    margin: 20px 0 0 0;
    max-width: 100%;
    height: 40px;
    padding: 10px 15px;
    border-radius: .3em;
    background-color: var(--background-input);
    border: 1px solid var(--border-input);
}

.input-two{
    margin: 20px 0 0 0;
    max-width: 100%;
    height: 50px;
    padding: 10px 15px;
    border-radius: .3em;
    background-color: var(--background-input);
    border: 1px solid var(--border-input);
}

.input-three{
    margin: 20px 0 0 0;
    min-width: 100%; 
    height: 400px;
    padding: 10px 15px;
    border-radius: .3em;
    background-color: var(--background-input);
    border: 1px solid var(--border-input);
    overflow-wrap: break-word;  
}

.submit{
    margin: 20px 0 0 0;
    min-width: 100%;
    height: 50px;
    border-radius: 25px;
    font-family: 'Montserrat', sans-serif;
    color: var(--secundary);;
    background-color: var(--primary);
    border: 1px solid var(--secundary);
    cursor: pointer;
}

.submit:hover{
    color: var(--primary);
    background-color: var(--secundary);
    transition: var(--animation);
    transition: 500ms;
}

.submit:active{
    transition: 200ms;
    transform: scale(.95);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="portfolio">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>My portfolio</title>
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="main.css">
</head>
<body>
    
    <nav class="nav-bar">
        <ul class="nav-list">
            <li class="nav-item"><a href="#header" class="nav-link">HOME</a></li>
            <li class="nav-item"><a href="#about" class="nav-link">ABOUT</a></li>
            <li class="nav-item"><a href="#proyects" class="nav-link">PROYECTS</a></li>
            <li class="nav-item"><a href="#contact" class="nav-link">CONTACT ME</a></li>
        </ul>
        <input type="checkbox" name="dark-mode" id="dark-mode" class="dark-mode" value="not-checked">
    </nav>

    <header class="headerContainer" id="header">
        <div class="header-data">
            <div class="text-container">
                <p class="header-para">Hi, My name is</p>
                <h1 class="header-text">Facundo</h1>
                <h1 class="header-text">And i'm a web dev.</h1>
                <p class="header-para">Hi,I'm Facundo Ferreria and i'm a beginner web developer who is learning and trying to do the best high-quality websites and applications.</p>
            </div>
            <img src="" alt="" class="photo">
        </div>  
    </header>

    <section class="socials-links">
        <a href="https://www.instagram.com/facuferreria/" target="about:blank"><img src="./img/instagram.png" alt="ig" class="socials" id="ig-img"></a>
        <a href="https://www.facebook.com/profile.php?id=100006821357397" target="about:blank"><img src="./img/facebook.png" alt="fb" class="socials" id="fb-img"></a>
        <a href="https://github.com/facuferreria" target="about:blank"><img src="./img/github.png" alt="github" class="socials" id="git-img"></a>
        <a href="https://es.stackoverflow.com/users/151888/ferre-facu" target="about:blank"><img src="./img/iconmonstr-stackoverflow-4-32 (1).png" alt="stack overflow" class="socials" id="stack-img"></a>
    </section>

    <section class="gmail">
        <div class="gmail-container">
            <a href="https://mail.google.com/mail/u/0/#inbox?compose=CllgCKCBkmnKmjJPdHSSBSQFtlDPXZQGsmzSncfxWgvmWtwhVdKLzszQRSRFRlCnnNwvzBRlGVB" class="gmail-text" target="about:blank">[email protected]</a>
        </div>
    </section>

    <section id="about" class="about-me">
        <h1 class="title">About Me</h1>
        <div class="about-container">
            <div class="text-container">
                <p class="about-text">Hi, My name is Facundo Ferreria, i'm a web developer who is now just a beginner and still learning the basics but with some new things. I'm just 16 years old boy from Argentina who got interested in web development and just wanna get started.</p>
                <p class="about-text">I started with "the programing world" last year but since i was studying i just started practicing in this vacations. I already have done just two projects because after the last one i thought that i should learn new thing, put them in practice and repeat that routine. My goal is to work as a freelancer and someday also develop my own personal proyects to sell</p>
                <p class="about-text">Here are all technologies i work with:</p>
                <ul class="skills-container">
                    <li class="skill-item">HTML5</li>
                    <li class="skill-item">CSS3</li>
                    <li class="skill-item">Javascript (ES6)</li>
                </ul>
            </div>
            <img src="./img/web-development.png" alt="code-brackets" class="code-img">
        </div>
    </section>

    <section id="proyects" class="proyects">
        <h1 class="title">Some Things I've Built</h1>
        <div class="container-one" id="container-one">
            <div class="card-img">
                <img src="./img/todolist.png" alt="TO-DO-LIST" class="proyects-img">
                <div class="card-container">
                    <div class="contain-card-text">
                        <p class="card-text">HTML</p>
                        <p class="card-text">CSS</p>
                        <p class="card-text">JS</p>
                    </div>
                </div>
            </div>
            <div class="content-proyect">
                <h2 class="proyect-title">To Do List</h2>
                <p class="proyects-text">This is my first project and it's a TO-DO-LIST where you can put the tasks you have to  do and it will appear on the list that you can edit, delete, give them and order and more.</p>
            </div>
        </div>
        <div class="container-two" id="container-two">
            <div class="content-proyect-two">
                <h2 class="proyect-title">Rock, Paper and Scissors's Game</h2>
                <p class="proyects-text">The second proyect that i did was a game of rock, paper and scissors where you can play against the computer or against a local player</p>
            </div>  
            <div class="card-img-two">
                <img src="./img/game.png" alt="ROCK-PAPER-SCISSORS-GAME" class="proyects-img-two">
                <div class="card-container-two">
                    <div class="contain-card-text">
                        <p class="card-text-two">HTML</p>
                        <p class="card-text-two">CSS</p>
                        <p class="card-text-two">JS</p>
                    </div>
                </div>
            </div>
        </div> 
    </section>

    <section id="contact" class="contact">
        <h1 class="title">Contact Me</h1>
        <div class="contact-grid">
            <input type="text" class="input-one" placeholder="First Name">
            <input type="email" class="input-one" placeholder="E-mail">
            <input type="text" class="input-two" placeholder="Subject">
            <textarea name="" id="" cols="1" rows="1" class="input-three"></textarea>
            <button class="submit">SUBMIT</button>
        </div>
    </section>

    <footer>
        <div class="footer-container">
            <p class="credits">Made By Facundo Ferreria <span class="span">© 2020</span></p>
        </div>
    </footer>

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