Some changes and practice

Basically I just practiced on it and made some big updates to the site. Will be doing more and learning more soon.

src/assets/TwitchGlitchBlackOps.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.6, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 2400 2800" style="enable-background:new 0 0 2400 2800;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<title>Asset 3</title>
+<g>
+	<polygon class="st0" points="2200,1300 1800,1700 1400,1700 1050,2050 1050,1700 600,1700 600,200 2200,200 	"/>
+	<g>
+		<g id="Layer_1-2">
+			<path d="M500,0L0,500v1800h600v500l500-500h400l900-900V0H500z M2200,1300l-400,400h-400l-350,350v-350H600V200h1600V1300z"/>
+			<rect x="1700" y="550" width="200" height="600"/>
+			<rect x="1150" y="550" width="200" height="600"/>
+		</g>
+	</g>
+</g>
+</svg>

src/components/Footer.js

@@ -1,20 +1,18 @@
 import React from "react";
 import InstagramIcon from '@mui/icons-material/Instagram';
 import TwitterIcon from '@mui/icons-material/Twitter';
-import FacebookIcon from '@mui/icons-material/Facebook';
-import LinkedInIcon from '@mui/icons-material/LinkedIn';
+import YouTubeIcon from '@mui/icons-material/YouTube';
 import "../styles/Footer.css";
 
 function Footer() {
   return (
     <div className="footer">
       <div className="socialMedia">
-        <a href="https://www.instagram.com/"><InstagramIcon /> </a> 
-        <a href="https://twitter.com/home"><TwitterIcon /> </a> 
-        <a href="https://www.facebook.com/"><FacebookIcon /> </a> 
-        <a href="https://www.linkedin.com/"><LinkedInIcon /> </a>
+        <a href="https://www.youtube.com/channel/UC3H33ordT_-qpMjUvY95ILg" target="_blank"><YouTubeIcon /> </a>
+        <a href="https://twitter.com/EhChad_real" target="_blank"><TwitterIcon /> </a>
+        <a href='https://www.instagram.com/chad.doty/' target="_blank"><InstagramIcon /> </a>  
       </div>
-      <p> &copy; 2023 ehchadservices.com</p>
+      <p> &copy; 2024 ehchadservices.com</p>
     </div>
   );
 }

src/components/Navbar.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import Logo from '../assets/images.png';
-import { Link } from 'react-router-dom';
+import { Link, NavLink } from 'react-router-dom';
 import ReorderIcon from '@mui/icons-material/Reorder';
 import '../styles/Navbar.css'
 
@@ -15,7 +15,7 @@ function Navbar() {
       <div className='navbar'>
         <div className='leftSide' id={openLinks ? "open" : "close"}>
             <img src={Logo} />
-            <div className='hiddenLinks'>
+            <div className='hiddenLinks'>        
             <Link to="/"> Home </Link>
             <Link to="/shop"> Shop </Link>
             <Link to="/about"> About </Link>

src/pages/About.js

@@ -1,26 +1,26 @@
 import React from "react";
-import MultiplePizzas from "../assets/shityourself.jpg";
+import ChadsImage from "../assets/MytwitchBanner.png";
 import "../styles/About.css";
 function About() {
   return (
     <div className="about">
       <div
         className="aboutTop"
-        style={{ backgroundImage: `url(${MultiplePizzas})` }}
+        style={{ backgroundImage: `url(${ChadsImage})` }}
       ></div>
       <div className="aboutBottom">
         <h1> ABOUT US</h1>
         <p>
-          Hello, My name is Chad and I'm currently working towards my goals on trying to become a developer.
-          If you have any pointers and are a gamer please join the discord! 
+        Hello, My name is Chad! Nice to meet you! I'm currently working towards my goals on trying to become a developer and a content creator.
+          If you have any pointers, are a developer, and or a gamer, please join the discord! Also, Don't forget to look at my YouTube channel and other Socials! 
         </p>
-      </div>
-      <div className="discordinvabout">
-      <a class="btn" href="https://discord.gg/brQXPhQ" target="_blank" rel="noopener noreferrer">Join The Discord!</a>
-    </div>
-      <div className="discordintabout">
+        <div className="discordInvAbout">
+        <a class="btn" href="https://discord.gg/brQXPhQ" target="_blank" rel="noopener noreferrer">Join The Discord!</a>
+        </div>
+        <div className="discordIntAbout">
         <iframe src="https://discord.com/widget?id=573633846587817992&theme=dark" allowtransparency="true" frameborder="0" sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"></iframe>
         </div>
+        </div>
     </div>
   );
 }

src/pages/Contact.js

@@ -10,7 +10,7 @@ function Contact() {
         style={{ backgroundImage: `url(${TrainLeft})` }}
       ></div>
       <div className="rightSide">
-        <h1> Contact Us</h1>
+        <h1>*Page Currently Doesn't Work*</h1>
 
         <form id="contact-form" method="POST">
           <label htmlFor="name">Full Name</label>

src/pages/Home.js

@@ -1,20 +1,20 @@
 import React from "react";
 import { Link } from "react-router-dom";
-import BannerImage from "../assets/Tokyo-Ghoul-Backgrounds.jpg";
+import BannerImage from "../assets/MytwitchBanner.png";
 import "../styles/Home.css";
 
 function Home() {
   return (
     <div className="home" style={{ backgroundImage: `url(${BannerImage})` }}>
       <div className="headerContainer">
-        <h1> Chad's Test Website </h1>
-        <p> This is kinda fun</p>
-        <Link to='shop'>
-          <button> Visit Our Shop </button>
+        <h1> Eh Chad's Test Website </h1>
+        <p> For more info go to my about page! </p>
+        <Link to='about'>
+          <button> About Page </button>
         </Link>
         </div>
         <div className="discordint">
-        <iframe src="https://discord.com/widget?id=573633846587817992&theme=dark" allowtransparency="true" frameborder="0" sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"></iframe>
+        <iframe src="https://discord.com/widget?id=573633846587817992&theme=dark"></iframe>
         </div>
     </div>
   );

src/pages/Shop.js

@@ -6,7 +6,7 @@ import "../styles/Shop.css";
 function Shop() {
   return (
     <div className="shop">
-      <h1 className="shopTitle">Test Shop</h1>
+      <h1 className="shopTitle">Not Actually A Shop</h1>
       <div className="shopList">
         {ShopList.map((shopItem, key) => {
           return (

src/styles/About.css

@@ -24,6 +24,7 @@
   
   .aboutBottom p {
     width: 90svw;
+    font-size: 23px;
     display: flex;
     justify-content: center;
   }
@@ -38,26 +39,33 @@
     transform: translateY(-40px);
   }
 
-  .about .discordinvabout {
-    color: black;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
-    justify-content: center;
+  .discordInvAbout, .discordInvAbout a {
+    font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
     background-color: #121619;
-    height: 50px;
-    width: 180px;
+    display: flex;
+    justify-content: center;
+    border: none;
     color: white;
+    padding: 10px;
+    text-align: center;
     text-decoration: none;
-    font-size: 20px;
+    font-size: 25px;
+    border-radius: 15px;  
+  }
+  
+  .discordInvAbout a:hover {
+    background-color: black;
+    text-decoration: none;
+    font-size: 28px;
+    cursor: pointer;
+    border-radius: 30px;
+    transition: 0.3s ease-in;
   }
 
-  .discordintabout iframe {
-    /*position: fixed;
-    top: 50%;
-    left: 5%;
-    width: 300px;
-    height: 300px;
-    z-index: 1000;*/
+  .discordIntAbout iframe {
+    /*display: flex;
+    justify-content: center;
+    width: 400px;
+    height: 300px;*/
     display: none;
   }

src/styles/Footer.css

@@ -10,11 +10,12 @@
   z-index: 1000;
 }
 
-.socialMedia svg {
+.socialMedia svg, .socialMedia a {
   color: white;
   margin: 20px;
   font-size: 70px;
   cursor: pointer;
+  text-decoration: none;
 }
 
 .footer p {

src/styles/Home.css

@@ -12,42 +12,47 @@
 }
 
 .headerContainer {
+  border-radius: 10px;
+  height: auto;
   width: auto;
-  margin-left: 50px;
+  margin-left: 30px;
 }
 
 .headerContainer h1 {
   justify-content: center;
   align-items: center;
   font-size: 90px;
-  height: 60px;
+  height: auto;
   font-weight: 50;
-  color: black;
+  color: rgb(255, 247, 0);
+  width: auto;
 }
 
 .headerContainer p {
   padding: 0;
   font-size: 40px;
   font-weight: lighter;
-  color: black;
+  color: rgb(255, 247, 0);
+  width: auto;
 }
 
 .headerContainer button {
-  color: black;
+  color: rgb(0, 0, 0);
   border: none;
-  border-radius: 5px;
+  border-radius: 18px;
   cursor: pointer;
   justify-content: center;
-  background-color: #121619;
+  background-color: hsla(0, 0%, 0%, 0.765);
   height: 50px;
   width: 180px;
-  color: white;
+  color: rgb(255, 255, 255);
   text-decoration: none;
   font-size: 20px;
 }
 
 .headerContainer button:hover {
-  background-color: #07090a;
+  background-color: #1500ff;
+  color: rgb(255, 255, 255);
   cursor: pointer;
   transition: 0.3s ease-in;
 }
@@ -63,7 +68,7 @@
   border: 1px solid black;
   padding: 5px;
   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
-  z-index: 500;
+  z-index: 1001;
 }
 
 @media only screen and (max-width: 765px) {
@@ -80,7 +85,7 @@
     margin-left: 0px;
     border-radius: 10px;
     padding: 10px;
-    width: 80%;
+    width: auto;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -101,20 +106,30 @@
   }
 
   .headerContainer button {
-    background-color: white;
-    color: #121619;
+    background-color: rgb(255, 255, 255);
+    color: #000000;
     margin-bottom: 30px;
   }
 
   .headerContainer button:hover {
-    background-color: rgb(225, 225, 225);
-    color: #121619;
+    background-color: #1500ff;
+    color: rgb(255, 255, 255);
   }
 
   .discordint iframe {
     display: none;
   }
 }
+
+@media only screen and (max-width: 500px) {
+  .headerContainer,
+  .headerContainer h1,
+  .headerContainer p {
+    justify-content: center;
+    display: flex;
+  }
+}
+
 @media only screen and (max-height: 500px) {
   .discordint iframe {
     display: none;

src/styles/Navbar.css

@@ -4,7 +4,6 @@
     background-color: #121619;
     display: flex;
     flex-direction: row;
-    z-index: 1000;
   }
   
   .navbar .leftSide {
@@ -26,11 +25,20 @@
     align-items: center;
     justify-content: center;
   }
-  
+ 
   .navbar a {
     color: white;
     text-decoration: none;
     margin: 20px;
+    font-size: 20px;
+  }
+
+  .navbar a:active, .navbar a:hover {
+    font-size: 22px;
+    border-radius: 15%;
+    background-color: white;
+    padding: 10px;
+    color: black;
   }
   
   .navbar .rightSide button {