My text is not displaying on deployed github pages site

Question

I have been working on a React version of my online portfolio and I have run into some problems. After deploying my portfolio to GitHub pages, I've noticed that I can no longer see any of the text on my landing and contact pages. The links in the home and contact component pages are still there but are not visible. I assumed that they were hidden underneath the background image of the pages, but after removing the background image from on of the pages, the text still remains hidden. I have provided links to my deployed portfolio and code for both pages. Any thoughts?

Deployed Site: https://swordspeare09.github.io/react_portfolio_site

Github Source Code: https://github.com/Swordspeare09/react_portfolio_site

import React from "react";
import Pic from "../../images/HeadSnipePic.jpg";
import LinkedInIcon from "@material-ui/icons/LinkedIn";
import GitHubIcon from "@material-ui/icons/GitHub";
import { teal } from "@material-ui/core/colors";
import Background from "../../images/CityPic.jpg";

import "../../CSS/Styles.css";


function Home() {
  return (
    <div>
      <div className="text">
        <h1>Full Stack Web Developer</h1>
      </div>

      <img className="headSnipe" src={Pic} alt="avatar" />

      <div className="text">
        <p>
          HTML/CSS | JavaScript | C++ | Java | ReactJS | NodeJS | Express |
          MongoDB | mySQL | Bootstrap | Materialize | Bulma
        </p>
        <p>
          US Air Force veteran turned Full Stack Web Developer hoping to use
          experience and logic acquired over the years to help create
          technologies and applications that will change the world.
        </p>
      </div>
      <div className="Social-Links">
        <a
          href="https://www.linkedin.com/in/franciscojcortez2009/"
          target="_blank"
          rel="noreferrer noopener"
        >
          <LinkedInIcon style={{ fontSize: 80, color: teal[300] }} />
        </a>
        <a
          href="https://github.com/Swordspeare09"
          target="_blank"
          rel="noreferrer noopener"
        >
          <GitHubIcon style={{ fontSize: 80, color: teal[300] }} />
        </a>
      </div>
    </div>
  );
}

export default Home;

import React from "react";
import LinkedInIcon from "@material-ui/icons/LinkedIn";
import MailOutlineIcon from "@material-ui/icons/MailOutline";
import GitHubIcon from "@material-ui/icons/GitHub";
import { teal} from "@material-ui/core/colors";
import Background from "../../images/CityPic.jpg";

function Contact() {
  return (
    <div
      style={{
        height: "100vh",
        width: "100%",
        margin: "auto",
        backgroundImage: `url(${Background})`,
        backgroundSize: `cover`,
        backgroundRepeat: "no-repeat",
        zIndex: "-1"
      }}
    >
      <h1 className="text2">Connect With Me</h1>
      <div className="Social-Links2">
        <a
          href="https://www.linkedin.com/in/franciscojcortez2009/"
          target="_blank"
          rel="noreferrer noopener"
        >
          <LinkedInIcon style={{ fontSize: 100, color: teal[300] }} />
        </a>
      </div>

      <div className="Social-Links2">
        <a
          href="mailto:cortez.francisco.j.2009@gmail.com?subject:subject text"
          target="_blank"
          rel="noreferrer noopener"
        >
          <MailOutlineIcon style={{ fontSize: 100, color: teal[300] }} />
        </a>
      </div>

      <div className="Social-Links2">
        <a
          href="https://github.com/Swordspeare09"
          target="_blank"
          rel="noreferrer noopener"
        >
          <GitHubIcon style={{ fontSize: 100, color: teal[300] }} />
        </a>
      </div>
    </div>
  );
}

export default Contact;

Answer 1

In your CSS you set the opacity of the "text" class to 85%.

.text, .text2 {
    text-align: center;
    background-color: #4db6ac;
    opacity: 85%;
    margin-top: 3px;
    margin-right: 25px;
    margin-left: 25px;
}

Try to set it to 0.85.