Search code examples
htmlcssreactjschakra-ui

Production React website not rendering properly

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: https://github.com/ShreeyansB/shreeyansb.github.io/tree/main

The problem: https://i.sstatic.net/6EcqS.jpg

All the buttons seem to work correctly, its just that they are invisible.

My bet would be some mistake while using Chakra UI but I cant seem to find the problem. Any help would be appreciated.

Solution

  • This looks like an issue with CSS. If I remove the CSS include from build it works fine

    <link href="/static/css/main.a21f9a4b.chunk.css" rel="stylesheet">

    enter image description here

    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 ?