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.
2025-11-08 13:31:35 +00:00 · 2024-01-24 07:56:29 -05:00
parent f6cf4792e6
commit f999bc9c31
28 changed files with 124 additions and 76 deletions
--- a/build/asset-manifest.json
+++ b/build/asset-manifest.json
@@ -1,21 +1,20 @@
 {
  "files": {
-    "main.css": "/static/css/main.3feef7de.css",
-    "main.js": "/static/js/main.f75d5715.js",
+    "main.css": "/static/css/main.09a9229b.css",
+    "main.js": "/static/js/main.85804baa.js",
    "static/js/787.264b71c2.chunk.js": "/static/js/787.264b71c2.chunk.js",
+    "static/media/MytwitchBanner.png": "/static/media/MytwitchBanner.7e6d238fe1f72356cd5a.png",
    "static/media/Tokyo-Ghoul-Wallpaper-For-PC.jpg": "/static/media/Tokyo-Ghoul-Wallpaper-For-PC.3a4eb3e1677a0231dbb6.jpg",
    "static/media/1132066.jpg": "/static/media/1132066.830e0815c15f9fb74063.jpg",
    "static/media/1132065.jpg": "/static/media/1132065.5ed00e48e022b9fa51e5.jpg",
    "static/media/1132051.jpg": "/static/media/1132051.55dcf24d3e6ca150fab3.jpg",
-    "static/media/Tokyo-Ghoul-Backgrounds.jpg": "/static/media/Tokyo-Ghoul-Backgrounds.a9817635323b54ab47bf.jpg",
-    "static/media/shityourself.jpg": "/static/media/shityourself.4d8b9defaa102373e6c7.jpg",
    "index.html": "/index.html",
-    "main.3feef7de.css.map": "/static/css/main.3feef7de.css.map",
-    "main.f75d5715.js.map": "/static/js/main.f75d5715.js.map",
+    "main.09a9229b.css.map": "/static/css/main.09a9229b.css.map",
+    "main.85804baa.js.map": "/static/js/main.85804baa.js.map",
    "787.264b71c2.chunk.js.map": "/static/js/787.264b71c2.chunk.js.map"
  },
  "entrypoints": [
-    "static/css/main.3feef7de.css",
-    "static/js/main.f75d5715.js"
+    "static/css/main.09a9229b.css",
+    "static/js/main.85804baa.js"
  ]
 }
--- a/build/index.html
+++ b/build/index.html
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>React App</title><script defer="defer" src="/static/js/main.f75d5715.js"></script><link href="/static/css/main.3feef7de.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>React App</title><script defer="defer" src="/static/js/main.85804baa.js"></script><link href="/static/css/main.09a9229b.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
--- a/build/static/css/main.09a9229b.css
+++ b/build/static/css/main.09a9229b.css
--- a/build/static/css/main.09a9229b.css.map
+++ b/build/static/css/main.09a9229b.css.map
--- a/build/static/css/main.3feef7de.css
+++ b/build/static/css/main.3feef7de.css
--- a/build/static/css/main.3feef7de.css.map
+++ b/build/static/css/main.3feef7de.css.map
--- a/build/static/js/main.85804baa.js
+++ b/build/static/js/main.85804baa.js
--- a/build/static/js/main.85804baa.js.LICENSE.txt
+++ b/build/static/js/main.85804baa.js.LICENSE.txt
--- a/build/static/js/main.85804baa.js.map
+++ b/build/static/js/main.85804baa.js.map
--- a/build/static/js/main.f75d5715.js
+++ b/build/static/js/main.f75d5715.js
--- a/build/static/js/main.f75d5715.js.map
+++ b/build/static/js/main.f75d5715.js.map
--- a/build/static/media/MytwitchBanner.7e6d238fe1f72356cd5a.png
+++ b/build/static/media/MytwitchBanner.7e6d238fe1f72356cd5a.png
--- a/build/static/media/Tokyo-Ghoul-Backgrounds.a9817635323b54ab47bf.jpg
+++ b/build/static/media/Tokyo-Ghoul-Backgrounds.a9817635323b54ab47bf.jpg
--- a/build/static/media/shityourself.4d8b9defaa102373e6c7.jpg
+++ b/build/static/media/shityourself.4d8b9defaa102373e6c7.jpg
--- a/src/assets/MytwitchBanner.png
+++ b/src/assets/MytwitchBanner.png
--- a/src/assets/TwitchGlitchBlackOps.eps
+++ b/src/assets/TwitchGlitchBlackOps.eps
--- a/src/assets/TwitchGlitchBlackOps.png
+++ b/src/assets/TwitchGlitchBlackOps.png
--- a/src/assets/TwitchGlitchBlackOps.svg
+++ b/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>
--- a/src/components/Footer.js
+++ b/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>
  );
 }
--- a/src/components/Navbar.js
+++ b/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>
--- a/src/pages/About.js
+++ b/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>
  );
 }
--- a/src/pages/Contact.js
+++ b/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>
--- a/src/pages/Home.js
+++ b/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>
  );
--- a/src/pages/Shop.js
+++ b/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 (
--- a/src/styles/About.css
+++ b/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;
  }
--- a/src/styles/Footer.css
+++ b/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 {
--- a/src/styles/Home.css
+++ b/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;
--- a/src/styles/Navbar.css
+++ b/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 {