1

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.stack.imgur.com/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.

Ballistic Swami
  • 176
  • 1
  • 11

1 Answers1

2

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 ?

kiranvj
  • 32,342
  • 7
  • 71
  • 76
  • Its opacity: 100% on my end. Any Idea how I can fix the CSS issue? – Ballistic Swami Nov 08 '21 at 07:14
  • 1
    Can you check in your code if you are setting opacity anywhere? But if this happens only in the build the issue could be elsewhere. – kiranvj Nov 08 '21 at 07:24
  • I solved the issue. I changed **opacity: 100%** to **opacity: 1** everywhere and that fixed the issue. Don't know why React changes 100% to 1% for the production build. – Ballistic Swami Nov 08 '21 at 07:28
  • Good to know its fixed. Yours looks like a known issue. Please check [this post](https://stackoverflow.com/questions/58853844/the-opacity-value-was-changed-to-1-after-building-the-reacjs-project) for more details. – kiranvj Nov 08 '21 at 07:38