home rebase

package.json

@@ -12,17 +12,18 @@
     "node-dom": "^0.1.0",
     "on-resize": "^2.0.0",
     "react": "^18.0.0",
+    "react-aos": "^1.0.1",
     "react-bootstrap": "^2.2.3",
     "react-dom": "^18.0.0",
     "react-ga": "^3.3.1",
-    "react-image-gallery": "^1.2.7",
+    "react-image-gallery": "^1.2.11",
     "react-p5": "^1.3.30",
-    "react-responsive-carousel": "^3.2.23",
     "react-router-dom": "^6.3.0",
-    "react-scripts": "5.0.0",
+    "react-scripts": "^5.0.1",
     "sass": "^1.55.0",
     "semver": "^7.3.7",
-    "web-vitals": "^2.1.4"
+    "set-value": "^4.1.0",
+    "update": "^0.4.2"
   },
   "devDependencies": {
     "gh-pages": "^3.2.3"

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',
+        rapid: "Loading",
-        blitz: 'Loading',
+        blitz: "Loading",
-        bullet: 'Loading',
+        bullet: "Loading",
-        tactics: 'Loading'
+        tactics: "Loading",
-      }
+      },
-    }
+    };
     this.diamonds = {
       background: "black",
       backgroundImage: `linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .75)), url(${bg})`,
@@ -27,42 +27,52 @@ export default class ChessBed extends React.Component {
     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`);
+    let stats = await fetch(
-    if(user.status === 200){
+      `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'],
+        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
+          tactics: stats.tactics.highest.rating,
-          }
+        },
       });
-    }
+    } else {
-    else {
       this.setState({
-          name: "User Not Found"
+        name: "User Not Found",
       });
     }
   }
 
-  componentDidMount(){
+  componentDidMount() {
     this.addChessEmbed();
   }
 
   render() {
     return (
       <>
-        <div id="chessProfile" onClick={this.seeAccount} style={this.diamonds}>
+        <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} />
+                  <img
+                    className="pfp"
+                    src={this.state.pic}
+                    alt={this.username}
+                  />
                 </div>
               </div>
               <h5 className="chessName">{this.state.name}</h5>
@@ -86,6 +96,10 @@ export default class ChessBed extends React.Component {
               </div>
             </div>
           </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 id="home">
-            <div className='centerContent' data-aos="fade-up">
+      <div className="homeground">
-                <div id='HomeContent'>
+        <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>
+              <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;