diff --git a/src/assets/css/App.css b/src/assets/css/App.css index 3c45242..9ab2d9a 100644 --- 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%; diff --git a/src/componets/HexGrid.js b/src/componets/HexGrid.js index 5b11074..76aecd7 100644 --- a/src/componets/HexGrid.js +++ b/src/componets/HexGrid.js @@ -4,42 +4,42 @@ export default function HexGrid() { return (
-
skill('first')}> +
skill('python')}>
-
skill('second')}> +
skill('js')}>
-
skill('third')}> +
skill('html')}>

Ahoy

-
skill('fourth')}> +
skill('sql')}>
-
skill('fifth')}> +
skill('cpp')}>
-
skill('sixth')}> +
skill('other')}>
-
skill('seventh')}> +
skill('tools')}>
diff --git a/src/pages/AboutMe.js b/src/pages/AboutMe.js index 566a5d6..5e9346a 100644 --- a/src/pages/AboutMe.js +++ b/src/pages/AboutMe.js @@ -53,11 +53,14 @@ export default function AboutMe() {

Skills

-
+ {/*
-
-
- {/* +
+

+

+
+
*/} + {[ "Python", "JavaScript", @@ -90,7 +93,7 @@ export default function AboutMe() { "Node.js", "ArcGIS" ]} - */} +

Extracirricular Awards

diff --git a/src/scripts/responsive.js b/src/scripts/responsive.js index d9fcc98..c41f9f7 100644 --- 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"; } } -} \ No newline at end of file +} diff --git a/src/scripts/skill.js b/src/scripts/skill.js index d12cd56..612e65e 100644 --- a/src/scripts/skill.js +++ b/src/scripts/skill.js @@ -1,3 +1,26 @@ -export function skill(type){ - document.getElementById('skillDisp').textContent = type; -} \ No newline at end of file +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 +}