less talking more memeing

src/App.js

@@ -1,21 +1,20 @@
-import { Route, Link, Routes, BrowserRouter as Router } from 'react-router-dom'
+import { Route, Link, Routes, BrowserRouter as Router } from "react-router-dom";
 
-import './assets/css/App.css';
-import './assets/css/head.scss'
-import menu from './assets/icons/menu.svg'
-import Nav from './componets/Nav.js'
-import Socials from './componets/Socials.js'
-import Name from './componets/Name.js'
-import Home from './pages/Home.js'
-import Projects from './pages/Projects';
-import Activities from './pages/Activities';
-import AboutMe from './pages/AboutMe';
-import Idler from './componets/Idler'
-import ErrorNotFound from './pages/Error'
-import AOS from 'aos';
+import "./assets/css/App.css";
+import "./assets/css/head.scss";
+import menu from "./assets/icons/menu.svg";
+import Nav from "./componets/Nav.js";
+import Socials from "./componets/Socials.js";
+import Name from "./componets/Name.js";
+import Home from "./pages/Home.js";
+import Projects from "./pages/Projects";
+import Activities from "./pages/Activities";
+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 { toggleMenu } from './scripts/responsive'
-
+import { toggleMenu } from "./scripts/responsive";
 
 AOS.init();
 function App() {
@@ -25,24 +24,26 @@ function App() {
       <div className="App">
         <div className="header">
           <Name />
-          <img src={menu} alt="menu" id='menu' onClick={toggleMenu}/>
-          <Nav id='navbar'>
-            <Link to='/'>Home</Link>
-            <a href='Resume.pdf' target='_blank'>Resume</a>
-            <Link to='/projects'>Projects</Link>
-           {/* <Link to='/activities'>Activities</Link> */}
-            <Link to='/about'>About Me</Link>
+          <img src={menu} alt="menu" id="menu" onClick={toggleMenu} />
+          <Nav id="navbar">
+            <Link to="/">Home</Link>
+            <a href="Resume.pdf" target="_blank">
+              Resume
+            </a>
+            <Link to="/projects">Projects</Link>
+            {/* <Link to="/activities">Activities</Link> */}
+            <Link to="/about">About Me</Link>
           </Nav>
         </div>
         <Routes>
-          <Route exact path='/' element={<Home />}></Route>
-          <Route exact path='/projects' element={<Projects />}></Route>
-          <Route exact path='activities' element={<Activities />}></Route>
-          <Route exact path='/about' element={<AboutMe />}></Route>
-          <Route exact path='/notFound' element={<ErrorNotFound />} />
+          <Route exact path="/" element={<Home />}></Route>
+          <Route exact path="/projects" element={<Projects />}></Route>
+          <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 />} />
         </Routes>
-        <div className='footer'>
+        <div className="footer">
           <Socials />
         </div>
       </div>

src/assets/css/App.css

@@ -178,7 +178,6 @@ a {
 .homeground {
   position: relative;
   padding-top: 7rem;
-  width: calc(100%-8rem);
   min-height: calc(100vh - 8rem);
   padding-bottom: 1rem;
   overflow: hidden;

src/pages/AboutMe.js

@@ -1,6 +1,8 @@
 import React from "react";
 import MyCarousel from "../componets/Carousel.js";
-import HexGrid from "../componets/HexGrid";
+import ChessBed from "../componets/ChessBed.js";
+// import HexGrid from "../componets/HexGrid";
+import Skills from "../componets/Skills";
 // import img1 from '../assets/photos/itsa_me.JPG'
 // import img2 from '../assets/photos/me_robot.jpeg'
 import img3 from "../assets/photos/AcademicTeam.jpg";
@@ -27,7 +29,7 @@ export default function AboutMe() {
             reading up on some recent geopolitical development, or haphazardly
             expanding my list of unusable, yet bizzarely wise quotes.
           </p>
-          <p>
+          {/* <p>
             My goal is to strive to make the biggest positive impact on the
             world that I can. I'm here to improve and optimize what we have so
             that we can spend more time on the things that matter.
@@ -46,9 +48,12 @@ export default function AboutMe() {
             promotes dedication and enables an in-depth understanding, I can
             take pride in each of my projects, bridging the gap between the the
             multifaceted purpose present in everything around us.
-          </p>
+          </p> */}
           {/*<img src={img1} alt='Me' className='boxedImg' />*/}
         </div>
+        <div className="chess">
+          <ChessBed username="asimonson1125"></ChessBed>
+        </div>
       </div>
       <div className="col">
         <div id="skills" data-aos="fade-up">
@@ -91,7 +96,7 @@ export default function AboutMe() {
               "Google API",
               "React",
               "Node.js",
-              "ArcGIS"
+              "ArcGIS",
             ]}
           </Skills>
         </div>