home rebase

src/App.js

@@ -13,7 +13,7 @@ import AboutMe from './pages/AboutMe';
 import Idler from './componets/Idler'
 import ErrorNotFound from './pages/Error'
 import AOS from 'aos';
-import 'aos/dist/aos.css'; // You can also use <link> for styles
+// import 'aos/dist/aos.css'; // You can also use <link> for styles
 import { toggleMenu } from './scripts/responsive'
 
 
@@ -40,7 +40,7 @@ function App() {
           <Route exact path='activities' element={<Activities />}></Route>
           <Route exact path='/about' element={<AboutMe />}></Route>
           <Route exact path='/notFound' element={<ErrorNotFound />} />
-          {/* <Route exact path="/*" element={<ErrorNotFound />} /> */}
+          <Route exact path="/*" element={<ErrorNotFound />} />
         </Routes>
         <div className='footer'>
           <Socials />

src/assets/css/App.css

@@ -159,6 +159,7 @@ a {
 }
 
 .foreground {
+  position: relative;
   padding-top: 7rem;
   padding-left: 8rem;
   width: calc(100%-8rem);
@@ -174,7 +175,38 @@ a {
   max-width: min(90%, 40rem);
 }
 
+.homeground {
+  position: relative;
+  padding-top: 7rem;
+  width: calc(100%-8rem);
+  min-height: calc(100vh - 8rem);
+  padding-bottom: 1rem;
+  overflow: hidden;
+  transition: .4s;
+}
+
+.noBackground {
+  background: none;
+}
+
+.relative {
+  position: relative;
+}
+
+.noPad {
+  padding-left: 0px !important;
+  padding-right: 0px !important;
+}
+
 .centerContent {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+}
+
+.centerContent>div {
   margin-top: 30vh;
   margin-left: auto;
   margin-right: auto;
@@ -186,6 +218,18 @@ a {
   display: inline-block;
   background-color: rgb(44, 44, 44, .75);
   border: solid black 4px;
+  text-align: center;
+}
+
+.flex {
+  display: flex;
+  justify-content: space-around;
+}
+
+.onRight {
+  position: absolute;
+  right: 0;
+  top: 0;
 }
 
 #Vertical {
@@ -527,10 +571,12 @@ a {
   justify-content: center;
 }
 
-.chess{
+.chess {
   width: 300px;
   height: calc(125px + 2em);
   border: none;
+  /* transform: scale(.8);
+  float: right; */
 }
 
 #chessProfile {
@@ -544,10 +590,22 @@ a {
 }
 
 .chessInfo {
-  background-color: rgba(0,0,0,.3);;
+  background-color: rgba(0, 0, 0, .3);
+  ;
   margin: 1em;
 }
 
+.bottomtext {
+  font-size: x-small;
+  margin: 3px;
+  color: white;
+  text-align: right;
+}
+
+.black {
+  background-color: black;
+}
+
 .identity {
   margin-right: 0px;
 }
@@ -569,7 +627,7 @@ a {
   height: 100%;
 }
 
-.pfpContainer > div {
+.pfpContainer>div {
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -673,11 +731,23 @@ a {
     padding-bottom: 36px;
   }
 
+  .homeground {
+    width: 90%;
+    padding-bottom: 36px;
+    display: flex;
+    margin: auto;
+  }
+
   .centeredForeground {
     margin-left: -1.5rem;
     /* remove .foreground excess margin */
   }
 
+  .onRight {
+    position: unset;
+    margin-top: 3rem;
+  }
+
   .col {
     width: 90%;
     margin-bottom: 3rem;

src/componets/ChessBed.js

@@ -1,6 +1,6 @@
 import React from "react";
 import bg from "../assets/chesscom-embed/diamonds.png";
-import def from '../assets/chesscom-embed/default.svg'
+import def from "../assets/chesscom-embed/default.svg";
 
 export default class ChessBed extends React.Component {
   constructor(props) {
@@ -8,15 +8,15 @@ export default class ChessBed extends React.Component {
     this.seeAccount = this.seeAccount.bind(this, props.username);
     this.addChessEmbed = this.addChessEmbed.bind(this, props.username);
     this.state = {
-      name: 'Loading..',
+      name: "Loading..",
       pic: def,
       ratings: {
-        rapid: 'Loading',
-        blitz: 'Loading',
-        bullet: 'Loading',
-        tactics: 'Loading'
-      }
-    }
+        rapid: "Loading",
+        blitz: "Loading",
+        bullet: "Loading",
+        tactics: "Loading",
+      },
+    };
     this.diamonds = {
       background: "black",
       backgroundImage: `linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .75)), url(${bg})`,
@@ -26,64 +26,78 @@ export default class ChessBed extends React.Component {
   seeAccount(username) {
     window.top.location.href = "https://chess.com/member/" + username;
   }
-  
-  async addChessEmbed(username){
+
+  async addChessEmbed(username) {
     let user = await fetch(`https://api.chess.com/pub/player/${username}`);
-    let stats = await fetch(`https://api.chess.com/pub/player/${username}/stats`);
-    if(user.status === 200){
-        user = await user.json();
-        stats = await stats.json();
-        this.setState({
-          name: user['username'],
-          pic: user.avatar,
-          ratings: {
-            rapid: stats.chess_rapid.last.rating,
-            blitz: stats.chess_blitz.last.rating,
-            bullet: stats.chess_bullet.last.rating,
-            tactics: stats.tactics.highest.rating
-          }
-        });
-    }
-    else {
-        this.setState({
-          name: "User Not Found"
-        });
+    let stats = await fetch(
+      `https://api.chess.com/pub/player/${username}/stats`
+    );
+    if (user.status === 200) {
+      user = await user.json();
+      stats = await stats.json();
+      this.setState({
+        name: user["username"],
+        pic: user.avatar,
+        ratings: {
+          rapid: stats.chess_rapid.last.rating,
+          blitz: stats.chess_blitz.last.rating,
+          bullet: stats.chess_bullet.last.rating,
+          tactics: stats.tactics.highest.rating,
+        },
+      });
+    } else {
+      this.setState({
+        name: "User Not Found",
+      });
     }
   }
 
-  componentDidMount(){
+  componentDidMount() {
     this.addChessEmbed();
   }
 
   render() {
     return (
       <>
-        <div id="chessProfile" onClick={this.seeAccount} style={this.diamonds}>
-          <div className="identity chessInfo">
-            <div className="pfpContainer">
-              <div>
-                <img className="pfp" src={this.state.pic} alt={this.username} />
+        <div className="black">
+          <div
+            id="chessProfile"
+            onClick={this.seeAccount}
+            style={this.diamonds}
+          >
+            <div className="identity chessInfo">
+              <div className="pfpContainer">
+                <div>
+                  <img
+                    className="pfp"
+                    src={this.state.pic}
+                    alt={this.username}
+                  />
+                </div>
+              </div>
+              <h5 className="chessName">{this.state.name}</h5>
+            </div>
+            <div className="vContainer chessInfo">
+              <div className="vItem">
+                <div className="chessIcon rapid">Ἓ</div>
+                <p>{this.state.ratings.rapid}</p>
+              </div>
+              <div className="vItem">
+                <div className="chessIcon blitz">Ἔ</div>
+                <p>{this.state.ratings.blitz}</p>
+              </div>
+              <div className="vItem">
+                <div className="chessIcon bullet">Ἕ</div>
+                <p>{this.state.ratings.bullet}</p>
+              </div>
+              <div className="vItem">
+                <div className="chessIcon puzzles">ἕ</div>
+                <p>{this.state.ratings.tactics}</p>
               </div>
             </div>
-            <h5 className="chessName">{this.state.name}</h5>
           </div>
-          <div className="vContainer chessInfo">
-            <div className="vItem">
-              <div className="chessIcon rapid">Ἓ</div>
-              <p>{this.state.ratings.rapid}</p>
-            </div>
-            <div className="vItem">
-              <div className="chessIcon blitz">Ἔ</div>
-              <p>{this.state.ratings.blitz}</p>
-            </div>
-            <div className="vItem">
-              <div className="chessIcon bullet">Ἕ</div>
-              <p>{this.state.ratings.bullet}</p>
-            </div>
-            <div className="vItem">
-              <div className="chessIcon puzzles">ἕ</div>
-              <p>{this.state.ratings.tactics}</p>
-            </div>
+          <div className="bottomtext">
+            Chess.com Stat Embed by Andrew Simonson
           </div>
         </div>
       </>

src/index.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 import App from './App';
-import reportWebVitals from './scripts/reportWebVitals';
 
 const container = document.getElementById('root');
 const root = createRoot(container);
@@ -10,9 +9,3 @@ root.render(
     <App />
   // </React.StrictMode>
   );
-
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();

src/pages/Home.js

@@ -1,15 +1,26 @@
-import React from 'react';
+import React from "react";
+import ChessBed from "../componets/ChessBed.js";
 
 export default function Home() {
-    return (
-        <div id='home'>
-            <div className='centerContent' data-aos="fade-up">
-                <div id='HomeContent'>
-                <h1>Andrew Simonson</h1>
-                <h3>Computer Science student at Rochester Institute of Technology</h3>
-                
-                </div>
+  return (
+    <div id="home">
+      <div className="homeground">
+        <div className="relative">
+          <div className="flex">
+            <div id="HomeContent" data-aos="fade-up">
+              <h1>Andrew Simonson</h1>
+              <h3>
+                Computer Science student at Rochester Institute of Technology
+              </h3>
             </div>
+          </div>
+          <div className="onRight" data-aos="fade-up">
+            <div className="chess">
+              <ChessBed username="asimonson1125"></ChessBed>
+            </div>
+          </div>
         </div>
-    )
-}
+      </div>
+    </div>
+  );
+}

src/scripts/reportWebVitals.js

@@ -1,13 +0,0 @@
-const reportWebVitals = onPerfEntry => {
-  if (onPerfEntry && onPerfEntry instanceof Function) {
-    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
-      getCLS(onPerfEntry);
-      getFID(onPerfEntry);
-      getFCP(onPerfEntry);
-      getLCP(onPerfEntry);
-      getTTFB(onPerfEntry);
-    });
-  }
-};
-
-export default reportWebVitals;