I started making my portfolio website with React and wanted to deploy it. The locally served version looks and works fine. After deploying it to Github Pages and Netlify both websites don't seem to render the website correctly. Only the header logo is shown and the footer. Everything else seems to be present in the DOM but is invisible. I am also using Chakra UI to style my Components. This is the repo:

On further checking the build CSS I see styles like below.

@-webkit-keyframes Header_opacity__3wGpe {
        0% {
            opacity: 0;
        }
        to {
            opacity: 1%;
        }
    }

Are you sure opacity is 1% ? Shoudn't it be be opacity:1 ?