diff --git a/.DS_Store b/.DS_Store
index 64ed2c1..b79180b 100644
Binary files a/.DS_Store and b/.DS_Store differ
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