create hexgrid

src/assets/css/App.css

@@ -245,6 +245,54 @@ a {
   color: rgb(212, 212, 212);
 }
 
+#skillList{
+  color: white;
+}
+
+.hex-wrapper {
+  display: flex;
+  flex-direction: column;
+  margin-top: 50px;
+}
+
+.hex-row {
+  display: flex;
+}
+
+.hex {
+  width: 100px;
+  height: 100px;
+  position: relative;
+  margin: 0px 5px;
+}
+
+.hex:hover {
+  transform: scaleX(1.1) scaleY(1.1);
+}
+
+.hex>* {
+  position: absolute;
+}
+
+.hex-odd {
+  margin: 0px 55px;
+}
+
+.hex-border {
+  border-left: solid black 1px;
+  border-right: solid black 1px;
+  width: 100%;
+  height: 58%;
+}
+
+.hex>.hex-border:nth-child(1) {
+  rotate: 60deg;
+}
+
+.hex>.hex-border:nth-child(2) {
+  rotate: 120deg;
+}
+
 .projectList {
   padding: 0px;
   display: flex;
@@ -301,7 +349,7 @@ a {
   vertical-align: middle;
   display: inline;
   text-align: left;
-  height:unset;
+  height: unset;
 }
 
 .project a img, .project a p {

src/componets/HexGrid.js

@@ -0,0 +1,50 @@
+import { skill } from '../scripts/skill'
+
+export default function HexGrid() {
+  return (
+    <div className="hex-wrapper">
+      <div className="hex-row hex-odd">
+        <div className="hex" onMouseOver={(event) => skill('first')}>
+          <div className="hex-border"></div>
+          <div className="hex-border"></div>
+          <div className="hex-border"></div>
+        </div>
+        <div className="hex" onMouseOver={(event) => skill('second')}>
+          <div className="hex-border"></div>
+          <div className="hex-border"></div>
+          <div className="hex-border"></div>
+        </div>
+      </div>
+      <div className="hex-row hex-even">
+        <div className="hex" onMouseOver={(event) => skill('third')}>
+          <div className="hex-border"></div>
+          <div className="hex-border"></div>
+          <div className="hex-border"></div>
+          <h3>Ahoy</h3>
+        </div>
+        <div className="hex" onMouseOver={(event) => skill('fourth')}>
+          <div className="hex-border"></div>
+          <div className="hex-border"></div>
+          <div className="hex-border"></div>
+        </div>
+        <div className="hex" onMouseOver={(event) => skill('fifth')}>
+          <div className="hex-border"></div>
+          <div className="hex-border"></div>
+          <div className="hex-border"></div>
+        </div>
+      </div>
+      <div className="hex-row hex-odd">
+        <div className="hex" onMouseOver={(event) => skill('sixth')}>
+          <div className="hex-border"></div>
+          <div className="hex-border"></div>
+          <div className="hex-border"></div>
+        </div>
+        <div className="hex" onMouseOver={(event) => skill('seventh')}>
+          <div className="hex-border"></div>
+          <div className="hex-border"></div>
+          <div className="hex-border"></div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/pages/AboutMe.js

@@ -1,6 +1,6 @@
 import React from "react";
-import Skills from "../componets/Skills";
 import MyCarousel from "../componets/Carousel.js";
+import HexGrid from "../componets/HexGrid";
 // import img1 from '../assets/photos/itsa_me.JPG'
 // import img2 from '../assets/photos/me_robot.jpeg'
 import img3 from "../assets/photos/AcademicTeam.jpg";
@@ -53,7 +53,11 @@ export default function AboutMe() {
       <div className="col">
         <div id="skills" data-aos="fade-up">
           <h2>Skills</h2>
-          <Skills>
+          <div id="skillList">
+            <HexGrid></HexGrid>
+            <div id="skillDisp"></div>
+          </div>
+          {/* <Skills>
             {[
               "Python",
               "JavaScript",
@@ -86,7 +90,7 @@ export default function AboutMe() {
               "Node.js",
               "ArcGIS"
             ]}
-          </Skills>
+          </Skills> */}
         </div>
         <div data-aos="fade-up" className="elementBlock">
           <h2>Extracirricular Awards</h2>

src/scripts/skill.js

@@ -0,0 +1,3 @@
+export function skill(type){
+    document.getElementById('skillDisp').textContent = type;
+}