Stash skills hexgrid

Might use hexgrid for projects instead
2026-02-24 21:09:49 -06:00 · 2022-10-08 13:13:26 -04:00
parent 253bbb26fe
commit 2e60042ece
5 changed files with 160 additions and 44 deletions
--- a/src/assets/css/App.css
+++ b/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-right: solid black 1px;
+  border-left: solid black 3px;
+  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%;
--- a/src/componets/HexGrid.js
+++ b/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>
--- a/src/pages/AboutMe.js
+++ b/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>
-          {/* <Skills>
+            <div id="skillDisp">
+              <h2></h2>
+              <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>
--- a/src/scripts/responsive.js
+++ b/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 { // mobile view
-    window.onscroll = '';
-    document.querySelector('.header').style.backgroundColor = '#1a1a1a';
-    document.querySelectorAll('.header .name h1').forEach(function(x){x.style.fontSize = "1.5rem";});
+  } else {
+    // mobile view
+    window.onscroll = "";
+    document.querySelector(".header").style.backgroundColor = "#1a1a1a";
+    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';
-    e.style.maxHeight = '0px';
-    document.querySelectorAll('.navElement *').forEach(x => { x.style.paddingTop = '.3rem'; x.style.paddingBottom = '.3rem'; x.style.fontSize = '1rem' });
+    document.querySelector(".header").style.borderBottomWidth = "3px";
+    e.style.maxHeight = "0px";
+    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.querySelectorAll('.header .name h1').forEach(function(x){x.style.fontSize = "1.5rem";});
-    document.querySelectorAll('.navElement *').forEach(x => { x.style.paddingTop = '.3rem'; x.style.paddingBottom = '.3rem'; x.style.fontSize = '1rem' });
+    document.querySelector(".header").style.backgroundColor = "#1a1a1a";
+    document.querySelectorAll(".header .name h1").forEach(function (x) {
+      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.querySelectorAll('.header .name h1').forEach(function(x){x.style.fontSize = "2rem";});
+    document.querySelector(".header").style.backgroundColor = "rgba(0,0,0,0)";
+    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';
-      bar.style.borderBottomWidth = '3px';
+      e.style.maxHeight = "0px";
+      bar.style.borderBottomWidth = "3px";
    }
  }
-}
+}
--- a/src/scripts/skill.js
+++ b/src/scripts/skill.js
@@ -1,3 +1,26 @@
-export function skill(type){
-    document.getElementById('skillDisp').textContent = type;
-}
+let currentType = "";
+
+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
+}