chad/chadsreactproject
1
0
Fork 0
mirror of https://github.com/DevEhChad/chadsreactproject.git synced 2025-11-08 13:31:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Some changes and practice

Browse Source 
Basically I just practiced on it and made some big updates to the site. Will be doing more and learning more soon.
This commit is contained in:
Chad Doty
2024-01-24 07:56:29 -05:00
parent f6cf4792e6
commit f999bc9c31
28 changed files with 124 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
build/asset-manifest.json
View File

@@ -1,21 +1,20 @@
{ {
"files": { "files": {
"main.css": "/static/css/main.3feef7de.css", "main.css": "/static/css/main.09a9229b.css",
"main.js": "/static/js/main.f75d5715.js", "main.js": "/static/js/main.85804baa.js",
"static/js/787.264b71c2.chunk.js": "/static/js/787.264b71c2.chunk.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/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/1132066.jpg": "/static/media/1132066.830e0815c15f9fb74063.jpg",
"static/media/1132065.jpg": "/static/media/1132065.5ed00e48e022b9fa51e5.jpg", "static/media/1132065.jpg": "/static/media/1132065.5ed00e48e022b9fa51e5.jpg",
"static/media/1132051.jpg": "/static/media/1132051.55dcf24d3e6ca150fab3.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", "index.html": "/index.html",
"main.3feef7de.css.map": "/static/css/main.3feef7de.css.map", "main.09a9229b.css.map": "/static/css/main.09a9229b.css.map",
"main.f75d5715.js.map": "/static/js/main.f75d5715.js.map", "main.85804baa.js.map": "/static/js/main.85804baa.js.map",
"787.264b71c2.chunk.js.map": "/static/js/787.264b71c2.chunk.js.map" "787.264b71c2.chunk.js.map": "/static/js/787.264b71c2.chunk.js.map"
}, },
"entrypoints": [ "entrypoints": [
"static/css/main.3feef7de.css", "static/css/main.09a9229b.css",
"static/js/main.f75d5715.js" "static/js/main.85804baa.js"
] ]
} }

2
build/index.html
View File

@@ -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>

2
build/static/css/main.09a9229b.css Normal file
View File

File diff suppressed because one or more lines are too long

1
build/static/css/main.09a9229b.css.map Normal file
View File

File diff suppressed because one or more lines are too long

2
build/static/css/main.3feef7de.css
View File

File diff suppressed because one or more lines are too long

1
build/static/css/main.3feef7de.css.map
View File

File diff suppressed because one or more lines are too long

3
build/static/js/main.85804baa.js Normal file
View File

File diff suppressed because one or more lines are too long

0
build/static/js/main.f75d5715.js.LICENSE.txt → build/static/js/main.85804baa.js.LICENSE.txt
View File

1
build/static/js/main.85804baa.js.map Normal file
View File

File diff suppressed because one or more lines are too long

3
build/static/js/main.f75d5715.js
View File

File diff suppressed because one or more lines are too long

1
build/static/js/main.f75d5715.js.map
View File

File diff suppressed because one or more lines are too long

BIN
build/static/media/MytwitchBanner.7e6d238fe1f72356cd5a.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 520 KiB

BIN
build/static/media/Tokyo-Ghoul-Backgrounds.a9817635323b54ab47bf.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 136 KiB

BIN
build/static/media/shityourself.4d8b9defaa102373e6c7.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 65 KiB

BIN
src/assets/MytwitchBanner.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 520 KiB

BIN
src/assets/TwitchGlitchBlackOps.eps Normal file
View File

Binary file not shown.

BIN
src/assets/TwitchGlitchBlackOps.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 40 KiB

19
src/assets/TwitchGlitchBlackOps.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 828 B

12
src/components/Footer.js
View File

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

2
src/components/Navbar.js
View File

@@ -1,6 +1,6 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import Logo from '../assets/images.png'; 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 ReorderIcon from '@mui/icons-material/Reorder';
import '../styles/Navbar.css' import '../styles/Navbar.css'

18
src/pages/About.js
View File

@@ -1,26 +1,26 @@
import React from "react"; import React from "react";
import MultiplePizzas from "../assets/shityourself.jpg"; import ChadsImage from "../assets/MytwitchBanner.png";
import "../styles/About.css"; import "../styles/About.css";
function About() { function About() {
return ( return (
<div className="about"> <div className="about">
<div <div
className="aboutTop" className="aboutTop"
style={{ backgroundImage: `url(${MultiplePizzas})` }} style={{ backgroundImage: `url(${ChadsImage})` }}
></div> ></div>
<div className="aboutBottom"> <div className="aboutBottom">
<h1> ABOUT US</h1> <h1> ABOUT US</h1>
<p> <p>
Hello, My name is Chad and I'm currently working towards my goals on trying to become a developer. 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 and are a gamer please join the discord! 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> </p>
</div> <div className="discordInvAbout">
<div className="discordinvabout"> <a class="btn" href="https://discord.gg/brQXPhQ" target="_blank" rel="noopener noreferrer">Join The Discord!</a>
<a class="btn" href="https://discord.gg/brQXPhQ" target="_blank" rel="noopener noreferrer">Join The Discord!</a> </div>
</div> <div className="discordIntAbout">
<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> <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>
</div> </div>
); );
} }

2
src/pages/Contact.js
View File

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

12
src/pages/Home.js
View File

@@ -1,20 +1,20 @@
import React from "react"; import React from "react";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import BannerImage from "../assets/Tokyo-Ghoul-Backgrounds.jpg"; import BannerImage from "../assets/MytwitchBanner.png";
import "../styles/Home.css"; import "../styles/Home.css";
function Home() { function Home() {
return ( return (
<div className="home" style={{ backgroundImage: `url(${BannerImage})` }}> <div className="home" style={{ backgroundImage: `url(${BannerImage})` }}>
<div className="headerContainer"> <div className="headerContainer">
<h1> Chad's Test Website </h1> <h1> Eh Chad's Test Website </h1>
<p> This is kinda fun</p> <p> For more info go to my about page! </p>
<Link to='shop'> <Link to='about'>
<button> Visit Our Shop </button> <button> About Page </button>
</Link> </Link>
</div> </div>
<div className="discordint"> <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>
</div> </div>
); );

2
src/pages/Shop.js
View File

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

40
src/styles/About.css
View File

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

3
src/styles/Footer.css
View File

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

45
src/styles/Home.css
View File

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

10
src/styles/Navbar.css
View File

@@ -4,7 +4,6 @@
background-color: #121619; background-color: #121619;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
z-index: 1000;
} }
.navbar .leftSide { .navbar .leftSide {
@@ -31,6 +30,15 @@
color: white; color: white;
text-decoration: none; text-decoration: none;
margin: 20px; 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 { .navbar .rightSide button {