push

src/components/Footer.js

@@ -8,7 +8,7 @@ function Footer() {
   return (
     <div className="footer">
       <div className="socialMedia">
-        <a href="https://www.youtube.com/channel/UC3H33ordT_-qpMjUvY95ILg" target="_blank" rel="noreferrer"><YouTubeIcon /> </a>
+        <a href="https://youtube.com/@ehchadreal?si=NS8Fk9PWINFnBCF0" target="_blank" rel="noreferrer"><YouTubeIcon /> </a>
         <a href="https://twitter.com/EhChad_real" target="_blank" rel="noreferrer"><TwitterIcon /> </a>
         <a href='https://www.instagram.com/chad.doty/' target="_blank" rel="noreferrer"><InstagramIcon /> </a>  
       </div>

src/components/SocialItem.js

@@ -0,0 +1,13 @@
+import React from "react";
+
+function SocialItem({ image, name, link, hiddenLink }) {
+  return (
+    <div className="socialItem">
+      <div style={{ backgroundImage: `url(${image})` }}> </div>
+      <h1> {name} </h1>
+      <p>{link}</p>
+    </div>
+  );
+}
+
+export default SocialItem;

src/helpers/SocialList.js

@@ -0,0 +1,42 @@
+import TwitchLogo from "../assets/TwitchLogo.png";
+import TwitterXLogo from "../assets/Twitter-XLogo.jpg";
+import InstagramLogo from "../assets/InstagramLogo.png";
+import YoutubeLogo from "../assets/youtube.png";
+import GitHubLogo from "../assets/GithubLogo.png";
+ 
+export const SocialList = [
+    {
+        hiddenLink: <a href="https://www.twitch.tv/ehchad" target="_blank" />,
+        name: "Twitch",
+        image: TwitchLogo,
+        link: <a href="https://www.twitch.tv/ehchad" target="_blank">Check Out My Twitch!</a>
+    },
+
+    {
+        hiddenLink: <a href="https://x.com/EhChad_real" target="_blank" />,
+        name: "Twitter-X",
+        image: TwitterXLogo,
+        link: <a href="https://x.com/EhChad_real" target="_blank">Check Out My Twitter-X!</a>
+    },
+
+    {
+        hiddenLink: <a href="https://www.instagram.com/chad.doty/" target="_blank" />,
+        name: "Instagram",
+        image: InstagramLogo,
+        link: <a href="https://www.instagram.com/chad.doty/" target="_blank">Check Out My Instagram!</a>
+    },
+
+    {
+        hiddenLink: <a href="https://youtube.com/@ehchadreal?si=NS8Fk9PWINFnBCF0" target="_blank" />,
+        name: "Youtube",
+        image: YoutubeLogo,
+        link: <a href="https://youtube.com/@ehchadreal?si=NS8Fk9PWINFnBCF0" target="_blank">Check Out My YouTube!</a>
+    },
+
+    {
+        hiddenLink: <a href="https://github.com/DevEhChad" target="_blank" />,
+        name: "GitHub",
+        image: GitHubLogo,
+        link: <a href="https://github.com/DevEhChad" target="_blank">Check Out My GitHub!</a>
+    }
+];

src/pages/About.js

@@ -9,10 +9,11 @@ function About() {
         style={{ backgroundImage: `url(${ChadsImage})` }}
       ></div>
       <div className="aboutBottom">
-        <h1> ABOUT US</h1>
+        <h1> ABOUT ME</h1>
         <p>
-        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! 
+        Hello, My name is Chad! Nice to meet you! I'm currently working toward my goals on trying to become a developer and a content creator. 
+        I have done a couple projects on C#, C++ and JavaScript. My Goal is to learn C#, C++, JavaScript so I can be more fluent.
+        If you have any pointers, or are a developer or even a gamer, please join the discord! Also, Don't forget to look at my YouTube channel and other Socials! 
         </p>
         <div className="discordInvAbout">
         <a class="btn" href="https://discord.gg/brQXPhQ" target="_blank" rel="noopener noreferrer">Join The Discord!</a>

src/pages/Home.js

@@ -7,11 +7,15 @@ function Home() {
   return (
     <div className="home" style={{ backgroundImage: `url(${BannerImage})` }}>
       <div className="headerContainer">
-        <h1> Eh Chad's Test Website </h1>
-        <p> For more info go to my about page! </p>
+        <h1> EhChad Services Website </h1>
+        <p> For more info go to my about pages! </p>
+        <Link to='socials'>
+          <button> Socials Page </button>
+        </Link>
         <Link to='about'>
           <button> About Page </button>
         </Link>
+
         </div>
     </div>
   );

src/pages/Socials.js

@@ -1,36 +1,25 @@
 import React from "react";
 import "../styles/Socials.css";
+import { SocialList } from "../helpers/SocialList";
+import SocialItem from "../components/SocialItem";
 
 function Socials() {
   return (
-    <div className="socialBody">
-        <div className="social1">
-        
-        <h1> Just A Test </h1>
-        <p> Test Paragraph</p>  
-        
-        <div className="socialButton1">
-
-            <a class="btn" href="https://discord.gg/brQXPhQ" target="_blank" rel="noreferrer">Join the Cord!</a>
-
-        </div>
-
-        </div>
-        
-        <div className="social2">
-
-            <h1> Just A Test 2</h1>
-            <p> Test Paragraph 2</p>
-
-            <div className="socialButton2">
-
-            <a class="btn" href="https://discord.gg/brQXPhQ" target="_blank" rel="noreferrer">Join the Cord2!</a>
-            
-            </div>
-
-        </div>
-
-        </div>
+    <div className="social">
+      <h1 className="socialTitle">Check Out My Socials</h1>
+      <div className="socialList">
+        {SocialList.map((socialItem, key) => {
+          return (
+            <SocialItem
+              key={key}
+              image={socialItem.image}
+              name={socialItem.name}
+              link={socialItem.link}
+            />
+          );
+        })}
+      </div>
+    </div>
   );
 }
 

src/styles/About.css

@@ -24,7 +24,7 @@
   }
   
   .aboutBottom p {
-    width: 90svw;
+    width: 70svw;
     font-size: 23px;
     display: flex;
     justify-content: center;

src/styles/DiscordInt.css

@@ -46,20 +46,21 @@
 
 @media only screen and (max-width: 765px) {
     .discordint .discord-minimized a {
-        width: 65px;
+       display: none;
     }
 
     .discordint .discord-opened {
-        padding-left: 50px;
+        display: none;
     }
 
 
     .discordint iframe {
+        
         display: none;
     }
 
     .discordint .discord-minimized button {
-        display: inherit;
+        display: none;
     }
 }
 
@@ -77,7 +78,7 @@
     }
     
     .discordint .discord-minimized button {
-        display: inherit;
+        display: none;
     }
 }
   
@@ -86,7 +87,7 @@
         display: none;
     }
     .discordint .discord-minimized button {
-        display: inherit;
+        display: none
     }
 }
 
@@ -95,6 +96,6 @@
         display: none;
     }
     .discordint .discord-minimized button {
-        display: inherit;
+        display: none;
     }
 }

src/styles/Footer.css

@@ -2,8 +2,6 @@
   bottom: 0;
   width: 100vw;
   min-height: 100%;
-  margin-top: 10px;
-  margin-top: auto;
   background-color: #000000;
   display: flex;
   justify-content: center;

src/styles/Home.css

@@ -26,7 +26,7 @@
   font-size: 90px;
   height: auto;
   font-weight: 50;
-  color: rgb(255, 247, 0);
+  color: white;
   width: auto;
 }
 
@@ -34,7 +34,7 @@
   padding: 0;
   font-size: 40px;
   font-weight: lighter;
-  color: rgb(255, 247, 0);
+  color: white;
   width: auto;
 }
 
@@ -53,7 +53,7 @@
 }
 
 .headerContainer button:hover {
-  background-color: #1500ff;
+  background-color: #ff0000;
   color: rgb(255, 255, 255);
   cursor: pointer;
   transition: 0.3s ease-in;
@@ -100,7 +100,7 @@
   }
 
   .headerContainer button:hover {
-    background-color: #1500ff;
+    background-color: #ff0000;
     color: rgb(255, 255, 255);
   }
 }
@@ -159,7 +159,7 @@
   }
 
   .headerContainer button:hover {
-    background-color: #1500ff;
+    background-color: red;
     color: rgb(255, 255, 255);
   }
   

src/styles/Socials.css

@@ -1,25 +1,70 @@
-.socialBody {
-    width: 100svw;
-    height: 90vh;
+.social {
+    width: 100%;
+    height: auto;
     display: flex;
     justify-content: center;
-    padding-left: 150px;
+    align-items: center;
     flex-direction: column;
-    background-color: gray;
-}
+  }
 
-.social1 {
-    border-radius: 15px;
+  .social .socialTitle {
+    font-family: cursive;
+    font-size: 60px;
+  }
+  
+  .socialList {
+    width: 70vw;
     height: auto;
-    width: 100px;
-    padding: 16px;
-    background-color: rgba(255, 0, 0, 0.16);
-}
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    place-items: center;
+  }
 
-.social2 {
+  /* social ITEM STYLING */
+  
+  .socialItem {
     border-radius: 15px;
-    height: auto;
-    width: 100px;
-    padding: 16px;
-    background-color: rgba(255, 0, 0, 0.16);
-}
+    width: 300px;
+    height: 350px;
+    margin: 20px;
+    box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
+  }
+  .socialItem:hover {
+    box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.5);
+    transition: 0.3s ease-in;
+    cursor: pointer;
+  }
+  
+  .socialItem div {
+    border-top-left-radius: 15px;
+    border-top-right-radius: 15px;
+    width: 100%;
+    height: 200px;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+  }
+  
+  .socialItem a {
+    text-decoration: none;
+    color: black;
+    margin: 20px;
+    font-size: 20px;
+  }
+
+  .socialItem h1, 
+  .socialItem p {
+    margin-left: 20px;
+  }
+  
+  @media only screen and (max-width: 1300px) {
+    .socialList {
+      grid-template-columns: 1fr 1fr;
+    }
+  }
+  
+  @media only screen and (max-width: 800px) {
+    .socialList {
+      grid-template-columns: 1fr;
+    }
+  }