andrew/asimonson1125.github.io
1
0
Fork 0
mirror of https://github.com/asimonson1125/asimonson1125.github.io.git synced 2026-02-25 05:09:49 -06:00
Code Issues Packages Projects Releases Wiki Activity

Stash skills hexgrid

Browse Source 
Might use hexgrid for projects instead
This commit is contained in:
Andrew Simonson
2022-10-08 13:13:26 -04:00
parent 253bbb26fe
commit 2e60042ece
5 changed files with 160 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
src/assets/css/App.css
View File

@@ -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%;

14
src/componets/HexGrid.js
View File

@@ -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>

13
src/pages/AboutMe.js
View File

@@ -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>

77
src/scripts/responsive.js
View File

@@ -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";
}
}
}
}

29
src/scripts/skill.js
View File

@@ -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
}