I am facing an issue where the text I included is not appearing on the website that

While developing a React version of my online portfolio, I encountered an issue. Once deployed on GitHub pages, the text on my landing and contact pages disappeared. Despite removing the background image thinking it might be hiding the text, the issue persisted. You can access my deployed portfolio and view the page source code using the links below:

Deployed Site: View Portfolio

Github Source Code: GitHub Repository


import React from "react";
// other import statements
function Home() {
  return (
    // JSX code for Home component
  );
}
export default Home;

import React from "react";
// other import statements
function Contact() {
  return (
    // JSX code for Contact component
  );
}
export default Contact;

Answer №1

Within your CSS styling, you have established the opacity of the "text" class at 85%.

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

Consider adjusting it to 0.85 for better results.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The issue of pseudo elements not functioning properly in Material-UI makeStyles with React.js has been a frustrating

The use of pseudo elements in Material-UI makeStyles is not functioning correctly. innerBox: { borderRadius: "10px", background: "#fff", boxShadow: "0px 1px 3px 0px rgba(0, 0, 0, 0.36)", maxHeight: "50px", "& ...

Launching a Material UI Modal nested within a parent component

I have a table displaying various teams. Each row in the table has a menu option that, when clicked, should open either a modal or a dialog box. I want to keep the table, menu functionality, and modals as separate components for better organization. Here&a ...

What is the best way to pass cookies between domain and subdomain using nookies?

Recently, I've been facing some challenges with sharing cookies between my app and website while using nookies. Below is the code snippet from my app.mydomain.com file: //setCookies to main domain setCookie(null, 'jwt', login ...

Encountered issue while converting half of the string array to JSON using JavaScript

I encountered an issue with the code below while trying to convert an array into JSON. Here is my code: <html> <head> </head> <body style="text-align:center;" id="body"> <p id="GFG_UP1" style="font-size: 16px;"> </p ...

What are the steps for configuring clusters in an expressjs 4.x application?

I currently have an expressjs generated app that is configured with socket io and I want to incorporate nodejs clusters into it. However, the challenge lies in the fact that in Express 4.x, the server listening configuration now resides in the bin/www file ...

What is the best way to use JavaScript in an ASP.NET Controller to navigate to a different webpage?

I'm currently developing a website using Angular 1 with an ASP.NET MVC backend. I'm trying to create a link that will gather certain parameters using JavaScript, retrieve the correct URL from a controller, and then redirect the user to a differen ...

Customizing Material-UI: A guide to overriding inner components

Looking to customize the styles of a Material UI Switch for the small variation? I have applied global styles but now want to override the styles of elements like track and thumb. Targeting the root element with the sizeSmall class is working, but unsure o ...

Adjust the ListItem's dimensions to match the ListItemText in order to resemble chat bubbles

Here is where I currently stand: and here is the code I am working with: <ListItem sx={{ textAlign: "left", bgcolor: "#f6f6f6", borderRadius: "10px", marginBottom: "1rem", }} > <ListIt ...

Using javascript to transform the entire list item into a clickable link

Currently, I am using PHP in WordPress CMS to populate slides on a slider. Each slide contains a link at the bottom, and my goal is to target each slide (li) so that when clicked anywhere inside it, the user is directed to the URL specified within that par ...

What is the best method for incorporating meta data, titles, and other information at dynamic pages using Node.js and Express?

I am currently exploring methods to efficiently pass data to the html head of my project. I require a custom title, meta description, and other elements for each page within my website. Upon initial thought, one method that comes to mind is passing the da ...

Animation of scroll progress in Next.js and Framer Motion

I am attempting to create a viewport scroll progress circle using Framer Motion in a Next.js application, incorporating Tailwind CSS. I referred to the example code provided by Framer Motion here:https://codesandbox.io/s/framer-motion-viewport-scroll-and-s ...

The directory "Users/node_modules/crypto-browserify" is not a valid directory in react

After discovering the package crypto-browserify on GitHub, I attempted to integrate it into my React Native project. Following the command npm install --save crypto-browserify, I then imported it using var crypto = require('crypto-browserify');. ...

Using `await` inside an if block does not change the type of this expression

Within my code, I have an array containing different user names. My goal is to loop through each name, verify if the user exists in the database, and then create the user if necessary. However, my linter keeps flagging a message stating 'await' h ...

Transferring information from a React application to a Node Express server

I'm having issues passing data from my React frontend to my Node/Express server using the onSubmit function. The data is not displaying in the console or on the page, and it simply shows up as "undefined." Can someone provide some assistance? App.js ...

Transferring data between modules using Ajax or services in React.js

I have a React application where I need to pass data received in one component to another. After receiving the data successfully, I set the state and then try to pass this data as a property to the next component. However, when I try to access this passed ...

Tips on identifying the method to import a module

Currently, I am including modules into my Node project like this: import * as name from "moduleName"; Instead of the old way: var name = require("moduleName"); In the past, we used require in Node projects. My question is, is there a difference in ...

Trouble with Divs and Element Placement

I am struggling to recreate this layout example. I attempted to make it align correctly, but I am having trouble looping the comment box under the review score. Can someone provide an example or guide me on how to achieve this design? Example image: http ...

Error thrown when attempting to pass additional argument through Thunk Middleware in Redux Toolkit using TypeScript

I have a question regarding customizing the Middleware provided by Redux Toolkit to include an extra argument. This additional argument is an instance of a Repository. During store configuration, I append this additional argument: export const store = con ...

Injecting CSS styles into a webpage using a Chrome extension before the page has completely loaded to achieve instant customization

As a newcomer to creating Chrome (or other browser) extensions, I am working on developing one that applies custom CSS rules to specific page elements. Overall, it seems to be functioning as intended, but with some minor issues. One issue I have encounter ...

The event listener for the hardware back button in $ionicPlatform is being triggered repeatedly

Encountering a glitch with the back button being triggered multiple times. While I'm in the "messages" $state, everything functions normally when hitting the back button. var messageIsClosed = true; $ionicPlatform.onHardwareBackButton(function(even ...