Stash skills hexgrid

Might use hexgrid for projects instead

src/assets/css/App.css

@@ -245,8 +245,57 @@ a {
   color: rgb(212, 212, 212);
 }
 
-#skillList{
+#skillList {
   color: white;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+#skillDisp {
+  width: 30em;
+  position: relative;
+}
+
+#skillDisp::after {
+  background-repeat: no-repeat;
+  background-size: contain;
+  background-position: right top;
+  opacity: .2;
+  position: absolute;
+  height: 60%;
+  width: 100%;
+  top: 0;
+  right: 0;
+  content: "";
+  z-index: -1;
+}
+
+#skillDisp.python::after {
+  background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/c/c3/Python-logo-notext.svg/1200px-Python-logo-notext.svg.png')
+}
+
+#skillDisp.js::after {
+  background-image: url('https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2F3.bp.blogspot.com%2F-PTty3CfTGnA%2FTpZOEjTQ_WI%2FAAAAAAAAAeo%2FKeKt_D5X2xo%2Fs1600%2Fjs.jpg&f=1&nofb=1&ipt=c8ae673676226ae40a5cd1408a5c7607e6b9725025888f4994a705309a16d1c3&ipo=images')
+}
+
+#skillDisp.html::after {
+  background-image: url('https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Flogos-download.com%2Fwp-content%2Fuploads%2F2017%2F07%2FHTML5_badge.png&f=1&nofb=1&ipt=db644f64f96f334aad37d31dc1c9dab28021476f6effaa0cb682297f8fd14240&ipo=images')
+}
+
+#skillDisp.sql::after {
+  background-image: url('https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fcdn3.iconfinder.com%2Fdata%2Ficons%2Fbasicolor-computer-tech%2F24%2F091_database_data_sql-512.png&f=1&nofb=1&ipt=cffc17203486b92c9733b992733e6934c03f984bc530c94b75bed278bc73477d&ipo=images')
+}
+
+#skillDisp.cpp::after {
+  background-image: url('https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fen.nokiawroclaw.pl%2Fwp-content%2Fuploads%2Fsites%2F5%2F2018%2F11%2Fcpp_logo.png&f=1&nofb=1&ipt=5fc23951b00bcbdec1977f3bc4591a7b8511ab29f5982963c541526902c0b4fd&ipo=images')
+}
+
+#skillDisp.other::after {
+  background-image: url('https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fcdn.freebiesupply.com%2Flogos%2Flarge%2F2x%2Fgit-icon-logo-png-transparent.png&f=1&nofb=1&ipt=834c5a11f63e26429713be2b7d9c9d1e45ce53d771862b9ab49bc35571513894&ipo=images')
+}
+
+#skillDisp.tools::after {
+  background-image: url('https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fimages.g2crowd.com%2Fuploads%2Fproduct%2Fimage%2Flarge_detail%2Flarge_detail_64636a5c446c22391d4ed719e0987cd2%2Farcgis-pro.png&f=1&nofb=1&ipt=812a2905dd03e5c68f55a9f095bfe7a54feb801bf7f3f11cc01352f45f8a4f8d&ipo=images')
 }
 
 .hex-wrapper {
@@ -279,8 +328,8 @@ a {
 }
 
 .hex-border {
-  border-left: solid black 1px;
+  border-left: solid black 3px;
-  border-right: solid black 1px;
+  border-right: solid black 3px;
   width: 100%;
   height: 58%;
 }
@@ -444,6 +493,22 @@ a {
   }
 }
 
+@keyframes swipeIn {
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+
+  0% {
+    opacity: 0;
+    transform: translateX(100px);
+  }
+}
+
+.swipeIn {
+  animation: swipeIn 1s 1;
+}
+
 .fPage {
   height: 100vh;
   width: 100%;

src/componets/HexGrid.js

@@ -4,42 +4,42 @@ 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" onMouseOver={(event) => skill('python')}>
           <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" onMouseOver={(event) => skill('js')}>
           <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" onMouseOver={(event) => skill('html')}>
           <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" onMouseOver={(event) => skill('sql')}>
           <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" onMouseOver={(event) => skill('cpp')}>
           <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" onMouseOver={(event) => skill('other')}>
           <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" onMouseOver={(event) => skill('tools')}>
           <div className="hex-border"></div>
           <div className="hex-border"></div>
           <div className="hex-border"></div>

src/pages/AboutMe.js

@@ -53,11 +53,14 @@ export default function AboutMe() {
       <div className="col">
         <div id="skills" data-aos="fade-up">
           <h2>Skills</h2>
-          <div id="skillList">
+          {/* <div id="skillList">
             <HexGrid></HexGrid>
-            <div id="skillDisp"></div>
+            <div id="skillDisp">
-          </div>
+              <h2></h2>
-          {/* <Skills>
+              <p></p>
+            </div>
+          </div> */}
+          <Skills>
             {[
               "Python",
               "JavaScript",
@@ -90,7 +93,7 @@ export default function AboutMe() {
               "Node.js",
               "ArcGIS"
             ]}
-          </Skills> */}
+          </Skills>
         </div>
         <div data-aos="fade-up" className="elementBlock">
           <h2>Extracirricular Awards</h2>

src/scripts/responsive.js

@@ -1,51 +1,76 @@
-window.onload = function () { onLoaded() };
+window.onload = function () {
+  onLoaded();
+};
 function onLoaded() {
   document.body.scrollTop = 0; // For Safari
   document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
-  let navs = document.querySelectorAll('.navElement');
+  let navs = document.querySelectorAll(".navElement");
   navs.forEach(function (element) {
     element.onclick = function () {
       window.scrollTo(0, 0);
       toggleMenu();
-    }
+    };
   });
 
-  window.onresize = function () { resizer() };
+  window.onresize = function () {
+    resizer();
+  };
   resizer();
   if (window.innerWidth < 1200) {
     const e = document.querySelector(".navControl");
-    e.style.maxHeight = '0px';
+    e.style.maxHeight = "0px";
   }
 }
 
 function resizer() {
   const e = document.querySelector(".navControl");
-  if (window.innerWidth > 1200) { // desktop view
+  if (window.innerWidth > 1200) {
+    // desktop view
     scrollFunction();
-    window.onscroll = function () { scrollFunction() };
+    window.onscroll = function () {
+      scrollFunction();
+    };
     e.style.maxHeight = `${e.scrollHeight + 10}px`;
-  }
+  } else {
-  else { // mobile view
+    // mobile view
-    window.onscroll = '';
+    window.onscroll = "";
-    document.querySelector('.header').style.backgroundColor = '#1a1a1a';
+    document.querySelector(".header").style.backgroundColor = "#1a1a1a";
-    document.querySelectorAll('.header .name h1').forEach(function(x){x.style.fontSize = "1.5rem";});
+    document.querySelectorAll(".header .name h1").forEach(function (x) {
+      x.style.fontSize = "1.5rem";
+    });
     // document.querySelector('.header > h1').style.color = "#ecebeb";
-    document.querySelector(".header").style.borderBottomWidth = '3px';
+    document.querySelector(".header").style.borderBottomWidth = "3px";
-    e.style.maxHeight = '0px';
+    e.style.maxHeight = "0px";
-    document.querySelectorAll('.navElement *').forEach(x => { x.style.paddingTop = '.3rem'; x.style.paddingBottom = '.3rem'; x.style.fontSize = '1rem' });
+    document.querySelectorAll(".navElement *").forEach((x) => {
+      x.style.paddingTop = ".3rem";
+      x.style.paddingBottom = ".3rem";
+      x.style.fontSize = "1rem";
+    });
   }
 }
 
 function scrollFunction() {
   if (document.body.scrollTop > 10 || document.documentElement.scrollTop > 10) {
-    document.querySelector('.header').style.backgroundColor = '#1a1a1a';
+    document.querySelector(".header").style.backgroundColor = "#1a1a1a";
-    document.querySelectorAll('.header .name h1').forEach(function(x){x.style.fontSize = "1.5rem";});
+    document.querySelectorAll(".header .name h1").forEach(function (x) {
-    document.querySelectorAll('.navElement *').forEach(x => { x.style.paddingTop = '.3rem'; x.style.paddingBottom = '.3rem'; x.style.fontSize = '1rem' });
+      x.style.fontSize = "1.5rem";
+    });
+    document.querySelectorAll(".navElement *").forEach((x) => {
+      x.style.paddingTop = ".3rem";
+      x.style.paddingBottom = ".3rem";
+      x.style.fontSize = "1rem";
+    });
   } else {
-    document.querySelector('.header').style.backgroundColor = 'rgba(0,0,0,0)';
+    document.querySelector(".header").style.backgroundColor = "rgba(0,0,0,0)";
-    document.querySelectorAll('.header .name h1').forEach(function(x){x.style.fontSize = "2rem";});
+    document.querySelectorAll(".header .name h1").forEach(function (x) {
+      x.style.fontSize = "2rem";
+    });
     // document.querySelector('.header > h1').style.color = "#ecebeb";
-    document.querySelectorAll('.navElement *').forEach(x => { x.style.paddingTop = '.5rem'; x.style.paddingBottom = '.5rem'; x.style.fontSize = '1.2rem' });
+    document.querySelectorAll(".navElement *").forEach((x) => {
+      x.style.paddingTop = ".5rem";
+      x.style.paddingBottom = ".5rem";
+      x.style.fontSize = "1.2rem";
+    });
   }
 }
 
@@ -53,12 +78,12 @@ export function toggleMenu() {
   if (window.innerWidth < 1200) {
     const e = document.querySelector(".navControl");
     const bar = document.querySelector(".header");
-    if (e.style.maxHeight === '0px') {
+    if (e.style.maxHeight === "0px") {
       e.style.maxHeight = `${e.scrollHeight + 10}px`;
-      bar.style.borderBottomWidth = '0px';
+      bar.style.borderBottomWidth = "0px";
     } else {
-      e.style.maxHeight = '0px';
+      e.style.maxHeight = "0px";
-      bar.style.borderBottomWidth = '3px';
+      bar.style.borderBottomWidth = "3px";
     }
   }
-}
+}

src/scripts/skill.js

@@ -1,3 +1,26 @@
-export function skill(type){
+let currentType = "";
-    document.getElementById('skillDisp').textContent = type;
+
-}
+const dict = {
+    'python': {'name': 'Python', 'info': 'Python and shit'},
+    'js': {'name': 'Javascript', 'info': 'JS and shit'},
+    'html': {'name': 'HTML/CSS', 'info': 'also SCSS'},
+    'sql': {'name': 'HTML/CSS', 'info': 'also SCSS'},
+    'cpp': {'name': 'HTML/CSS', 'info': 'also SCSS'},
+    'other': {'name': 'HTML/CSS', 'info': 'also SCSS'},
+    'tools': {'name': 'HTML/CSS', 'info': 'also SCSS'}
+}
+
+export function skill(type) {
+  if (currentType === type) {
+    return;
+  }
+  currentType = type;
+  let disp = document.getElementById("skillDisp");
+  disp.classList = [];
+  let ugh = disp.offsetWidth; // without this delay the animation doesn't begin.  idfk.
+  disp.querySelector('h2').textContent = dict[type]['name'];
+  disp.querySelector('p').textContent = dict[type]['info'];
+  disp.classList.add(type);
+  disp.classList.add('swipeIn');
+  return ugh; // gets rid of unused variable warning
+}