Skip to content

Commit

Permalink
Merge pull request #25 from UR-dandyhacks/dev
Browse files Browse the repository at this point in the history 
Intelligent navbar, space before about section, and particlesJS
  • Loading branch information
@cszach
cszach authored Oct 15, 2023
2 parents e68f830 + b2d2551 commit 122ecc8
Show file tree
Hide file tree
Showing 5 changed files with 227 additions and 113 deletions.
110 changes: 110 additions & 0 deletions assets/particlesjs-config.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,110 @@
{
"particles": {
"number": {
"value": 50,
"density": {
"enable": true,
"value_area": 500
}
},
"color": {
"value": "#fed936"
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#000000"
},
"polygon": {
"nb_sides": 5
},
"image": {
"src": "img/github.svg",
"width": 100,
"height": 100
}
},
"opacity": {
"value": 1,
"random": true,
"anim": {
"enable": true,
"speed": 1,
"opacity_min": 0.1,
"sync": true
}
},
"size": {
"value": 8,
"random": true,
"anim": {
"enable": true,
"speed": 4.794898228285104,
"size_min": 0.1,
"sync": true
}
},
"line_linked": {
"enable": false,
"distance": 150,
"color": "#ffffff",
"opacity": 0.4,
"width": 1
},
"move": {
"enable": true,
"speed": 3,
"direction": "none",
"random": true,
"straight": false,
"out_mode": "out",
"bounce": false,
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": true,
"mode": "repulse"
},
"onclick": {
"enable": false,
"mode": "push"
},
"resize": true
},
"modes": {
"grab": {
"distance": 400,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 400,
"size": 40,
"duration": 2,
"opacity": 8,
"speed": 3
},
"repulse": {
"distance": 200,
"duration": 0.4
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true
}
25 changes: 9 additions & 16 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,12 @@
</head>

<body class="font-sans text-lavender bg-deep-purple">
<nav class="absolute flex flex-row items-center justify-between flex-none w-full px-5 py-5 lg:px-12 bg-deep-purple">
<nav class="fixed z-10 flex flex-row items-center justify-between flex-none w-full px-5 py-5 transition-transform ease-in-out lg:px-12 bg-deep-purple translate-y-0">
<h3 class="text-2xl">DandyHacks &OpenCurlyQuote;23</h3>
<div>
<input class="absolute z-20 w-8 h-8 opacity-0 peer lg:hidden" type="checkbox" />
<img class="lg:hidden" src="img/icons/hamburger.png" />
<ul class="fixed top-0 right-0 z-10 flex flex-col h-full pt-16 text-3xl font-bold transition-transform ease-in-out gap-8 lg:flex-row lg:text-xl px-9 lg:p-0 w-72 bg-violet peer-checked:translate-x-0 translate-x-72 lg:bg-deep-purple lg:translate-x-0 lg:w-fit lg:h-fit lg:relative lg:gap-16 lg:transition-none">
<ul class="fixed top-0 right-0 z-10 flex flex-col h-screen pt-16 text-3xl font-bold transition-transform ease-in-out gap-8 lg:flex-row lg:text-xl px-9 lg:p-0 w-72 bg-violet peer-checked:translate-x-0 translate-x-72 lg:bg-deep-purple lg:translate-x-0 lg:w-fit lg:h-fit lg:relative lg:gap-16 lg:transition-none">
<li class="text-right"><a href="#about">About</a></li>
<li class="text-right"><a href="#faq">FAQ</a></li>
<li class="hidden text-right lg:block"><a href="#sponsoring">Sponsoring</a></li>
Expand Down Expand Up @@ -49,7 +49,8 @@ <h2 class="text-2xl lg:text-4xl text-purple">November 3-5</h2>
</div>
</div>
</div>
<div id="about" class="flex flex-row items-center justify-center bg-violet gap-[77px]">
<div class="flex flex-row items-center justify-center bg-violet gap-[77px]">
<div id="about" class="absolute bottom-16 lg:bottom-[150px]"></div>
<img class="hidden lg:self-start lg:block" src="img/sticker2.png" />
<div class="px-9 lg:px-0 lg:flex-[0_0_454px] flex flex-col gap-7 lg:gap-14 mb-16 lg:mb-[150px]">
<h2 class="text-2xl lg:text-5xl">What is DandyHacks?</h2>
Expand All @@ -70,12 +71,12 @@ <h2 class="text-2xl lg:text-5xl">What is DandyHacks?</h2>
</p>
</div>
</div>
<img class="hidden lg:block lg:relative b-[150px]" src="img/sticker1.png" />
<img class="hidden lg:block lg:relative lg:b-[150px]" src="img/sticker1.png" />
</div>
<div id="faq" class="px-5 lg:bg-repeat-y lg:bg-center-top lg:bg-fireflies lg:px-0">
<div id="faq" class="relative px-5">
<div class="flex flex-col items-center py-24 box-border gap-12 lg:gap-20">
<h2 class="text-5xl">FAQS</h2>
<div class="flex flex-col px-10 py-4 lg:py-0 gap-5 lg:px-0">
<div class="flex flex-col px-10 py-4 pointer-events-none lg:py-0 gap-5 lg:px-0">
<details>
<summary>
What is a hackathon?
Expand Down Expand Up @@ -212,16 +213,8 @@ <h3 class="text-3xl text-center pb-7">Why sponsor?</h3>
<span>© 2023 DandyHacks</span>
</div>
</footer>
<script>
let navigationLinks = document.querySelectorAll('nav li');
let hamburgerCheckbox = document.querySelector('nav .peer');

navigationLinks.forEach(navigationLink => {
navigationLink.addEventListener('click', e => {
hamburgerCheckbox.checked = false;
});
});
</script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/particles.min.js"></script>
<script src="script.js"></script>
</body>

</html>
16 changes: 14 additions & 2 deletions main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,14 +27,26 @@

@layer utilities {
details {
@apply lg:w-[923px] bg-purple text-deep-purple rounded-[30px] py-2.5 lg:px-12 px-4;
@apply lg:w-[923px] bg-purple text-deep-purple rounded-[30px] py-2.5 lg:px-12 px-4 pointer-events-auto;
}

details summary {
@apply flex items-center justify-between text-2xl font-bold after:float-right marker:content-none after:content-none after:w-9 after:h-9 after:justify-self-end;
@apply flex items-center justify-between text-2xl font-bold hover:cursor-pointer after:float-right marker:content-none after:content-none after:w-9 after:h-9 after:justify-self-end;
}

details p {
@apply text-2xl;
}

canvas {
display: block;
position: absolute;
top: 0;
left: 0;
}

#faq > div > * {
position: relative;
z-index: 10;
}
}
45 changes: 45 additions & 0 deletions script.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
document.addEventListener('DOMContentLoaded', () => {
const navBar = document.querySelector('nav');
const navigationLinks = navBar.querySelectorAll('li');
const hamburgerCheckbox = navBar.querySelector('.peer');

// Hamburger navigation

navigationLinks.forEach(navigationLink => {
navigationLink.addEventListener('click', () => {
document.body.classList.remove('overflow-hidden');
hamburgerCheckbox.checked = false;
});
});

// Navbar appears on scroll down and hides on scroll up

let lastScrollY = window.scrollY;

window.addEventListener('scroll', () => {
window.scrollY - lastScrollY > 0 ? hideNavBar() : showNavBar();
lastScrollY = window.scrollY;
});

function hideNavBar() {
navBar.classList.add('-translate-y-full');
navBar.classList.remove('translate-y-0');
}

function showNavBar() {
navBar.classList.add('translate-y-0');
navBar.classList.remove('-translate-y-full');
}

// Disable scrolling when navigation menu is visible

hamburgerCheckbox.addEventListener('change', (e) => {
if (e.target.checked) {
document.body.classList.add('overflow-hidden');
}
});

// particles.js

particlesJS.load('faq', 'assets/particlesjs-config.json');
});
Loading

0 comments on commit 122ecc8

Please sign in to comment.