From f59130a25071ee5a1d42f249aa8ffcc633135368 Mon Sep 17 00:00:00 2001
From: Andrew Simonson <asimonson1125@gmail.com>
Date: Fri, 30 Sep 2022 14:49:13 -0400
Subject: [PATCH] create hexgrid

---
 src/assets/css/App.css   | 50 +++++++++++++++++++++++++++++++++++++++-
 src/componets/HexGrid.js | 50 ++++++++++++++++++++++++++++++++++++++++
 src/pages/AboutMe.js     | 10 +++++---
 src/scripts/skill.js     |  3 +++
 4 files changed, 109 insertions(+), 4 deletions(-)
 create mode 100644 src/componets/HexGrid.js
 create mode 100644 src/scripts/skill.js

diff --git a/src/assets/css/App.css b/src/assets/css/App.css
index 3a2b930..3c45242 100644
--- a/src/assets/css/App.css
+++ b/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 {
diff --git a/src/componets/HexGrid.js b/src/componets/HexGrid.js
new file mode 100644
index 0000000..5b11074
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/pages/AboutMe.js b/src/pages/AboutMe.js
index 405749a..566a5d6 100644
--- a/src/pages/AboutMe.js
+++ b/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>
diff --git a/src/scripts/skill.js b/src/scripts/skill.js
new file mode 100644
index 0000000..d12cd56
--- /dev/null
+++ b/src/scripts/skill.js
@@ -0,0 +1,3 @@
+export function skill(type){
+    document.getElementById('skillDisp').textContent = type;
+}
\ No newline at end of file