From 9d7b050934fac975bedb63d4200551e08aa15220 Mon Sep 17 00:00:00 2001
From: Aske Lange <44546482+AskeLange@users.noreply.github.com>
Date: Mon, 27 Jan 2025 11:49:33 +0100
Subject: [PATCH] feat: stuffs
---
.DS_Store | Bin 6148 -> 6148 bytes
.../index.html | 0
2-1-css-filters/styles.css | 62 ++++++++++++++++++
3-1-css-filters/styles.css | 62 ------------------
3-1-keyframes-hover/index.html | 17 +++++
.../styles.css | 0
4-1-svg-masks/index.html | 17 +++++
.../styles.css | 0
{2-1-svg-stroke => 6-1-svg-stroke}/index.html | 0
{2-1-svg-stroke => 6-1-svg-stroke}/scripts.js | 0
{2-1-svg-stroke => 6-1-svg-stroke}/styles.css | 0
{2-2-svg-stroke => 6-2-svg-stroke}/index.html | 0
{2-2-svg-stroke => 6-2-svg-stroke}/scripts.js | 0
{2-2-svg-stroke => 6-2-svg-stroke}/styles.css | 0
{2-3-svg-stroke => 6-3-svg-stroke}/index.html | 0
{2-3-svg-stroke => 6-3-svg-stroke}/scripts.js | 0
{2-3-svg-stroke => 6-3-svg-stroke}/styles.css | 0
.../index.html | 0
.../scripts.js | 0
.../styles.css | 0
.../index.html | 0
.../scripts.js | 6 +-
.../styles.css | 0
8-1-split-text/index.html | 17 +++++
8-1-split-text/styles.css | 0
9-1-css-perspective/index.html | 17 +++++
9-1-css-perspective/styles.css | 0
README.md | 2 +-
plan.md | 10 +++
.../ignore.css | 0
.../ignore.js | 0
.../index.html | 0
{4-3-loop-live => x-4-3-loop-live}/index.html | 0
{4-3-loop-live => x-4-3-loop-live}/scripts.js | 0
x-4-3-loop-live/styles.css | 0
.../index.html | 0
.../scripts.js | 0
.../styles.css | 0
.../index.html | 0
.../scripts.js | 0
x-4-5-loop-interpolation-live/styles.css | 0
.../index.html | 0
.../scripts.js | 0
.../styles.css | 0
44 files changed, 144 insertions(+), 66 deletions(-)
rename {3-1-css-filters => 2-1-css-filters}/index.html (100%)
create mode 100644 2-1-css-filters/styles.css
delete mode 100644 3-1-css-filters/styles.css
create mode 100644 3-1-keyframes-hover/index.html
rename {4-3-loop-live => 3-1-keyframes-hover}/styles.css (100%)
create mode 100644 4-1-svg-masks/index.html
rename {4-5-loop-interpolation-live => 4-1-svg-masks}/styles.css (100%)
rename {2-1-svg-stroke => 6-1-svg-stroke}/index.html (100%)
rename {2-1-svg-stroke => 6-1-svg-stroke}/scripts.js (100%)
rename {2-1-svg-stroke => 6-1-svg-stroke}/styles.css (100%)
rename {2-2-svg-stroke => 6-2-svg-stroke}/index.html (100%)
rename {2-2-svg-stroke => 6-2-svg-stroke}/scripts.js (100%)
rename {2-2-svg-stroke => 6-2-svg-stroke}/styles.css (100%)
rename {2-3-svg-stroke => 6-3-svg-stroke}/index.html (100%)
rename {2-3-svg-stroke => 6-3-svg-stroke}/scripts.js (100%)
rename {2-3-svg-stroke => 6-3-svg-stroke}/styles.css (100%)
rename {2-4-svg-stroke-demo => 6-4-svg-stroke-demo}/index.html (100%)
rename {2-4-svg-stroke-demo => 6-4-svg-stroke-demo}/scripts.js (100%)
rename {2-4-svg-stroke-demo => 6-4-svg-stroke-demo}/styles.css (100%)
rename {4-1-mouse => 7-1-cssvariables-mouse}/index.html (100%)
rename {4-1-mouse => 7-1-cssvariables-mouse}/scripts.js (55%)
rename {4-1-mouse => 7-1-cssvariables-mouse}/styles.css (100%)
create mode 100644 8-1-split-text/index.html
create mode 100644 8-1-split-text/styles.css
create mode 100644 9-1-css-perspective/index.html
create mode 100644 9-1-css-perspective/styles.css
create mode 100644 plan.md
rename {4-2-animation-basics => x-4-2-animation-basics}/ignore.css (100%)
rename {4-2-animation-basics => x-4-2-animation-basics}/ignore.js (100%)
rename {4-2-animation-basics => x-4-2-animation-basics}/index.html (100%)
rename {4-3-loop-live => x-4-3-loop-live}/index.html (100%)
rename {4-3-loop-live => x-4-3-loop-live}/scripts.js (100%)
create mode 100644 x-4-3-loop-live/styles.css
rename {4-4-interpolation => x-4-4-interpolation}/index.html (100%)
rename {4-4-interpolation => x-4-4-interpolation}/scripts.js (100%)
rename {4-4-interpolation => x-4-4-interpolation}/styles.css (100%)
rename {4-5-loop-interpolation-live => x-4-5-loop-interpolation-live}/index.html (100%)
rename {4-5-loop-interpolation-live => x-4-5-loop-interpolation-live}/scripts.js (100%)
create mode 100644 x-4-5-loop-interpolation-live/styles.css
rename {4-6-clippath-mouse => x-4-6-clippath-mouse}/index.html (100%)
rename {4-6-clippath-mouse => x-4-6-clippath-mouse}/scripts.js (100%)
rename {4-6-clippath-mouse => x-4-6-clippath-mouse}/styles.css (100%)
diff --git a/.DS_Store b/.DS_Store
index 64ed2c12e4ba3597361515eff5e63aa8ad37ad96..b79180bdb31474691f8caa63cc5420617c7e8542 100644
GIT binary patch
delta 105
zcmZoMXfc=|#>B)qu~2NHo}wr-0|Nsi1A_nqLncEWLkU9>Lw;HC#=_-{;vgAL1_K6N
v216i*%WgJjy}-1wL6mtjI|n}p(4ftN9N(EI^NTog05yQjV%Z!avW6J|O8^v(
delta 223
zcmZoMXfc=|#>B!ku~2NHo}wr#0|Nsi1A_nqLm5LlgDyicLkUCCW=H1b%-SF+UIqgO
zL$ENCG($c^HbZJsd2vBfPJR+l)%M9@Ood$H)zwCpItpfnCX+8PNi%j%e#0d1-G$$f
zvf!e;ocz3Wh$|TQfYzA-txE>FqZml1F=R6209};IP{dHYS&8Wa(`I%Keh#4XflmC+
VJegm_kpt*@CZKkP%@HDNm;oV9E$ILN
diff --git a/3-1-css-filters/index.html b/2-1-css-filters/index.html
similarity index 100%
rename from 3-1-css-filters/index.html
rename to 2-1-css-filters/index.html
diff --git a/2-1-css-filters/styles.css b/2-1-css-filters/styles.css
new file mode 100644
index 0000000..c12353a
--- /dev/null
+++ b/2-1-css-filters/styles.css
@@ -0,0 +1,62 @@
+.target {
+ position: relative;
+ width: 200px;
+ height: 200px;
+ transition: 1s filter linear, 1s -webkit-filter linear;
+}
+
+.target > div {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+
+ background-color: var(--color-beige);
+ background-image: url(https://images.unsplash.com/photo-1716125583397-e7cc7469c3f2?q=80&w=3387&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
+ background-size: cover;
+ background-position: center;
+}
+
+.target > span {
+ position: absolute;
+ top: -64px;
+ left: 50%;
+ transform: translateX(-50%);
+ width: max-content;
+ font-size: 12px;
+ text-align: center;
+}
+
+.target > div {
+ transition: 1s filter linear, 1s -webkit-filter linear;
+}
+
+#target-2 > div {
+ transition: 0.5s filter ease-in-out;
+ filter: hue-rotate(0deg);
+}
+#target-2:hover > div {
+ filter: hue-rotate(90deg);
+}
+#target-3 > div {
+ transition: 0.5s filter ease-in-out;
+ filter: contrast(100%);
+}
+#target-3:hover > div {
+ filter: contrast(175%);
+}
+#target-4 > div {
+ transition: 0.5s filter ease-in-out;
+ filter: brightness(100%);
+}
+#target-4:hover > div {
+ filter: brightness(75%);
+}
+#target-5 > div {
+ transition: 0.5s filter ease-in-out;
+ filter: blur(0);
+}
+#target-5:hover > div {
+ filter: blur(3px);
+}
diff --git a/3-1-css-filters/styles.css b/3-1-css-filters/styles.css
deleted file mode 100644
index 413a974..0000000
--- a/3-1-css-filters/styles.css
+++ /dev/null
@@ -1,62 +0,0 @@
-.target {
- position: relative;
- width: 200px;
- height: 200px;
- transition: 1s filter linear, 1s -webkit-filter linear;
-}
-
-.target > div {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
-
- background-color: var(--color-beige);
- background-image: url(https://unsplash.com/photos/eIGnRHHobrM/download?ixid=M3wxMjA3fDB8MXxhbGx8MTd8fHx8fHwyfHwxNzE2MzU3NjM4fA&force=true&w=640);
- background-size: cover;
- background-position: center;
-}
-
-.target > span {
- position: absolute;
- top: -64px;
- left: 50%;
- transform: translateX(-50%);
- width: max-content;
- font-size: 12px;
- text-align: center;
-}
-
-.target > div {
- transition: 1s filter linear, 1s -webkit-filter linear;
-}
-
-#target-2 > div {
- transition: 0.5s filter ease-in-out;
- filter: hue-rotate(0deg);
-}
-#target-2:hover > div {
- filter: hue-rotate(90deg);
-}
-#target-3 > div {
- transition: 0.5s filter ease-in-out;
- filter: contrast(100%);
-}
-#target-3:hover > div {
- filter: contrast(175%);
-}
-#target-4 > div {
- transition: 0.5s filter ease-in-out;
- filter: brightness(100%);
-}
-#target-4:hover > div {
- filter: brightness(75%);
-}
-#target-5 > div {
- transition: 0.5s filter ease-in-out;
- filter: blur(0);
-}
-#target-5:hover > div {
- filter: blur(3px);
-}
diff --git a/3-1-keyframes-hover/index.html b/3-1-keyframes-hover/index.html
new file mode 100644
index 0000000..235cf01
--- /dev/null
+++ b/3-1-keyframes-hover/index.html
@@ -0,0 +1,17 @@
+
+
+
+ 3.1: CSS Filters
+
+
+
+
+
+
+
+
+
+
diff --git a/4-3-loop-live/styles.css b/3-1-keyframes-hover/styles.css
similarity index 100%
rename from 4-3-loop-live/styles.css
rename to 3-1-keyframes-hover/styles.css
diff --git a/4-1-svg-masks/index.html b/4-1-svg-masks/index.html
new file mode 100644
index 0000000..235cf01
--- /dev/null
+++ b/4-1-svg-masks/index.html
@@ -0,0 +1,17 @@
+
+
+
+ 3.1: CSS Filters
+
+
+
+
+
+
+
+
+
+
diff --git a/4-5-loop-interpolation-live/styles.css b/4-1-svg-masks/styles.css
similarity index 100%
rename from 4-5-loop-interpolation-live/styles.css
rename to 4-1-svg-masks/styles.css
diff --git a/2-1-svg-stroke/index.html b/6-1-svg-stroke/index.html
similarity index 100%
rename from 2-1-svg-stroke/index.html
rename to 6-1-svg-stroke/index.html
diff --git a/2-1-svg-stroke/scripts.js b/6-1-svg-stroke/scripts.js
similarity index 100%
rename from 2-1-svg-stroke/scripts.js
rename to 6-1-svg-stroke/scripts.js
diff --git a/2-1-svg-stroke/styles.css b/6-1-svg-stroke/styles.css
similarity index 100%
rename from 2-1-svg-stroke/styles.css
rename to 6-1-svg-stroke/styles.css
diff --git a/2-2-svg-stroke/index.html b/6-2-svg-stroke/index.html
similarity index 100%
rename from 2-2-svg-stroke/index.html
rename to 6-2-svg-stroke/index.html
diff --git a/2-2-svg-stroke/scripts.js b/6-2-svg-stroke/scripts.js
similarity index 100%
rename from 2-2-svg-stroke/scripts.js
rename to 6-2-svg-stroke/scripts.js
diff --git a/2-2-svg-stroke/styles.css b/6-2-svg-stroke/styles.css
similarity index 100%
rename from 2-2-svg-stroke/styles.css
rename to 6-2-svg-stroke/styles.css
diff --git a/2-3-svg-stroke/index.html b/6-3-svg-stroke/index.html
similarity index 100%
rename from 2-3-svg-stroke/index.html
rename to 6-3-svg-stroke/index.html
diff --git a/2-3-svg-stroke/scripts.js b/6-3-svg-stroke/scripts.js
similarity index 100%
rename from 2-3-svg-stroke/scripts.js
rename to 6-3-svg-stroke/scripts.js
diff --git a/2-3-svg-stroke/styles.css b/6-3-svg-stroke/styles.css
similarity index 100%
rename from 2-3-svg-stroke/styles.css
rename to 6-3-svg-stroke/styles.css
diff --git a/2-4-svg-stroke-demo/index.html b/6-4-svg-stroke-demo/index.html
similarity index 100%
rename from 2-4-svg-stroke-demo/index.html
rename to 6-4-svg-stroke-demo/index.html
diff --git a/2-4-svg-stroke-demo/scripts.js b/6-4-svg-stroke-demo/scripts.js
similarity index 100%
rename from 2-4-svg-stroke-demo/scripts.js
rename to 6-4-svg-stroke-demo/scripts.js
diff --git a/2-4-svg-stroke-demo/styles.css b/6-4-svg-stroke-demo/styles.css
similarity index 100%
rename from 2-4-svg-stroke-demo/styles.css
rename to 6-4-svg-stroke-demo/styles.css
diff --git a/4-1-mouse/index.html b/7-1-cssvariables-mouse/index.html
similarity index 100%
rename from 4-1-mouse/index.html
rename to 7-1-cssvariables-mouse/index.html
diff --git a/4-1-mouse/scripts.js b/7-1-cssvariables-mouse/scripts.js
similarity index 55%
rename from 4-1-mouse/scripts.js
rename to 7-1-cssvariables-mouse/scripts.js
index bda2323..8448c6e 100644
--- a/4-1-mouse/scripts.js
+++ b/7-1-cssvariables-mouse/scripts.js
@@ -5,7 +5,7 @@
*
* https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
*/
-window.addEventListener("mousemove", function ({ clientX, clientY }) {
- document.body.style.setProperty("--x", clientX + "px");
- document.body.style.setProperty("--y", clientY + "px");
+window.addEventListener("mousemove", function (event) {
+ document.body.style.setProperty("--x", event.clientX + "px");
+ document.body.style.setProperty("--y", event.clientY + "px");
});
diff --git a/4-1-mouse/styles.css b/7-1-cssvariables-mouse/styles.css
similarity index 100%
rename from 4-1-mouse/styles.css
rename to 7-1-cssvariables-mouse/styles.css
diff --git a/8-1-split-text/index.html b/8-1-split-text/index.html
new file mode 100644
index 0000000..235cf01
--- /dev/null
+++ b/8-1-split-text/index.html
@@ -0,0 +1,17 @@
+
+
+
+ 3.1: CSS Filters
+
+
+
+
+
+
+
+
+
+
diff --git a/8-1-split-text/styles.css b/8-1-split-text/styles.css
new file mode 100644
index 0000000..e69de29
diff --git a/9-1-css-perspective/index.html b/9-1-css-perspective/index.html
new file mode 100644
index 0000000..235cf01
--- /dev/null
+++ b/9-1-css-perspective/index.html
@@ -0,0 +1,17 @@
+
+
+
+ 3.1: CSS Filters
+
+
+
+
+
+
+
+
+
+
diff --git a/9-1-css-perspective/styles.css b/9-1-css-perspective/styles.css
new file mode 100644
index 0000000..e69de29
diff --git a/README.md b/README.md
index f5e3b5f..afbc6e1 100644
--- a/README.md
+++ b/README.md
@@ -1 +1 @@
-# hack-your-future-workshop
\ No newline at end of file
+# Hack Your Future
diff --git a/plan.md b/plan.md
new file mode 100644
index 0000000..bb86fe8
--- /dev/null
+++ b/plan.md
@@ -0,0 +1,10 @@
+- Intro (Aske)
+- Clippath (Aske)
+- Css Filters (Tobi) \*TOBI
+- Keyframes + Hover things (+ things from iuno workshop) (Tobi) \*WØLK+TOBI
+- Svg Masks (Aske) \*ASKE
+- Svg Filters (Aske) \*ASKE
+- Svg Stroke (Tobi) \*TOBI
+- Simple JS css-variables + follow (Tobi) \*TOBI
+- Split Text Animation (Tobi) \*TOBI+WØLK
+- Css Perspective & 3d transforms + skew, if you're craazy (Aske) \*ASKE
diff --git a/4-2-animation-basics/ignore.css b/x-4-2-animation-basics/ignore.css
similarity index 100%
rename from 4-2-animation-basics/ignore.css
rename to x-4-2-animation-basics/ignore.css
diff --git a/4-2-animation-basics/ignore.js b/x-4-2-animation-basics/ignore.js
similarity index 100%
rename from 4-2-animation-basics/ignore.js
rename to x-4-2-animation-basics/ignore.js
diff --git a/4-2-animation-basics/index.html b/x-4-2-animation-basics/index.html
similarity index 100%
rename from 4-2-animation-basics/index.html
rename to x-4-2-animation-basics/index.html
diff --git a/4-3-loop-live/index.html b/x-4-3-loop-live/index.html
similarity index 100%
rename from 4-3-loop-live/index.html
rename to x-4-3-loop-live/index.html
diff --git a/4-3-loop-live/scripts.js b/x-4-3-loop-live/scripts.js
similarity index 100%
rename from 4-3-loop-live/scripts.js
rename to x-4-3-loop-live/scripts.js
diff --git a/x-4-3-loop-live/styles.css b/x-4-3-loop-live/styles.css
new file mode 100644
index 0000000..e69de29
diff --git a/4-4-interpolation/index.html b/x-4-4-interpolation/index.html
similarity index 100%
rename from 4-4-interpolation/index.html
rename to x-4-4-interpolation/index.html
diff --git a/4-4-interpolation/scripts.js b/x-4-4-interpolation/scripts.js
similarity index 100%
rename from 4-4-interpolation/scripts.js
rename to x-4-4-interpolation/scripts.js
diff --git a/4-4-interpolation/styles.css b/x-4-4-interpolation/styles.css
similarity index 100%
rename from 4-4-interpolation/styles.css
rename to x-4-4-interpolation/styles.css
diff --git a/4-5-loop-interpolation-live/index.html b/x-4-5-loop-interpolation-live/index.html
similarity index 100%
rename from 4-5-loop-interpolation-live/index.html
rename to x-4-5-loop-interpolation-live/index.html
diff --git a/4-5-loop-interpolation-live/scripts.js b/x-4-5-loop-interpolation-live/scripts.js
similarity index 100%
rename from 4-5-loop-interpolation-live/scripts.js
rename to x-4-5-loop-interpolation-live/scripts.js
diff --git a/x-4-5-loop-interpolation-live/styles.css b/x-4-5-loop-interpolation-live/styles.css
new file mode 100644
index 0000000..e69de29
diff --git a/4-6-clippath-mouse/index.html b/x-4-6-clippath-mouse/index.html
similarity index 100%
rename from 4-6-clippath-mouse/index.html
rename to x-4-6-clippath-mouse/index.html
diff --git a/4-6-clippath-mouse/scripts.js b/x-4-6-clippath-mouse/scripts.js
similarity index 100%
rename from 4-6-clippath-mouse/scripts.js
rename to x-4-6-clippath-mouse/scripts.js
diff --git a/4-6-clippath-mouse/styles.css b/x-4-6-clippath-mouse/styles.css
similarity index 100%
rename from 4-6-clippath-mouse/styles.css
rename to x-4-6-clippath-mouse/styles.css