From ea81f7aeef7a1a440518e22425bb77be548367f2 Mon Sep 17 00:00:00 2001
From: Naman Sood <mail@nsood.in>
Date: Wed, 11 May 2022 00:42:17 -0400
Subject: [PATCH] replace hp with clapper
Signed-off-by: Naman Sood <mail@nsood.in>
---
README.md | 2 +-
css/style.css | 36 ++++++++++++++++++++++++++++++++++++
css/style.scss | 30 ++++++++++++++++++++++++++++++
index.html | 2 ++
js/script.js | 31 ++++++++++++++++++-------------
5 files changed, 87 insertions(+), 14 deletions(-)
diff --git a/README.md b/README.md
index 64c0004..f4ea08f 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@ This is the code for my personal website and resume. The main branch of this rep
## Cool things that I never get to brag about
* The header section of the website always correctly indicates my age, as long as you have JavaScript enabled. It will calculate and display my age based on my most recent birthday.
-* There is a dark mode in this website, accessible by typing `nox`. Light mode can be restored by typing `lumos`.
+* There is a dark mode in this website, accessible by typing `clapoff`. Light mode can be restored by typing `clapon`.
* The fading gradient background thing took a surprising amount of head-banging to figure out. It's a fixed-position element in the background that fades in/out the right backgrounds based on scroll offset using `opacity` to mimic transitions (since you can't transition `background-image`s).
## License
diff --git a/css/style.css b/css/style.css
index 0a83cb5..e65c240 100644
--- a/css/style.css
+++ b/css/style.css
@@ -17,6 +17,9 @@ body.dark-mode {
body.dark-mode .image-container img {
filter: invert(100%);
}
+body.dark-mode .clapper {
+ filter: invert(100%);
+}
body.dark-mode .bg {
opacity: 0 !important;
}
@@ -451,6 +454,39 @@ footer {
will-change: opacity;
}
+.clapper {
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 10rem;
+ line-height: 10rem;
+ text-align: center;
+ z-index: 100000;
+ font-size: 5rem;
+ pointer-events: none;
+ transition: none;
+ opacity: 0;
+}
+
+.clapper.clapping {
+ animation: clap 1s ease-in-out;
+}
+
+@keyframes clap {
+ 0% {
+ opacity: 1;
+ }
+ 49% {
+ opacity: 0;
+ }
+ 51% {
+ opacity: 1;
+ }
+ 100% {
+ opacity: 0;
+ }
+}
@media (min-width: 1800px) {
html {
font-size: 20px;
diff --git a/css/style.scss b/css/style.scss
index 80fc693..b35b78a 100644
--- a/css/style.scss
+++ b/css/style.scss
@@ -18,6 +18,10 @@ body.dark-mode {
filter: invert(100%);
}
+ .clapper {
+ filter: invert(100%);
+ }
+
.bg {
opacity: 0 !important;
}
@@ -522,6 +526,32 @@ footer {
}
}
+.clapper {
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 10rem;
+ line-height: 10rem;
+ text-align: center;
+ z-index: 100000;
+ font-size: 5rem;
+ pointer-events: none;
+ transition: none;
+ opacity: 0;
+}
+
+.clapper.clapping {
+ animation: clap 1s ease-in-out;
+}
+
+@keyframes clap {
+ 0% { opacity: 1; }
+ 49% { opacity: 0; }
+ 51% { opacity: 1; }
+ 100% { opacity: 0; }
+}
+
@media(min-width: 1800px) {
html {
font-size: 20px;
diff --git a/index.html b/index.html
index d312c4f..464341c 100644
--- a/index.html
+++ b/index.html
@@ -137,6 +137,8 @@
<div class="bg-scroller"></div>
+<div class="clapper">👏👏👏</div>
+
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/script.js"></script>
</body>
diff --git a/js/script.js b/js/script.js
index 9f4578f..bd0a4d3 100644
--- a/js/script.js
+++ b/js/script.js
@@ -290,33 +290,38 @@ $('.age').html(`${tens[Math.floor(age / 10)]} ${ones[age % 10]}`);
// easter egg
var sequences = [
- [ 78, 79, 88 ],
- [ 76, 85, 77, 79, 83 ],
+ [ 99, 108, 97, 112, 111, 102, 102 ],
+ [ 99, 108, 97, 112, 111, 110 ],
];
var mode = 0;
var eei = 0;
-$(window).on('keyup', function(e) {
+$(window).on('keypress', function(e) {
+ const clapper = document.querySelector('.clapper');
var sequence = sequences[mode];
if(e.keyCode == sequence[eei]) {
eei++;
}
-
else {
eei = 0;
+ console.log(`expected ${sequence[eei]}, got ${e.keyCode}`);
}
if(eei == sequence.length) {
- if(mode === 1) {
- $('body').removeClass('dark-mode');
- mode = 0;
- }
- else {
- $('body').addClass('dark-mode');
- mode = 1;
- }
- eei = 0;
+ clapper.classList.toggle('clapping');
+ setTimeout(() => {
+ if(mode === 1) {
+ $('body').removeClass('dark-mode');
+ mode = 0;
+ }
+ else {
+ $('body').addClass('dark-mode');
+ mode = 1;
+ }
+ eei = 0;
+ setTimeout(() => clapper.classList.toggle('clapping'), 500);
+ }, 500);
}
})