From 95bc08bfa704f4f0e4917de1f30271b3e415cc5c Mon Sep 17 00:00:00 2001
From: Daan Jacobs <daan@videotechniek.nl>
Date: Tue, 3 Dec 2024 12:28:07 +0100
Subject: [PATCH 1/6] Fixes: added a route for the about page and made a
 standard svelte setup, closes #116

---
 src/lib/atoms/About-titles.svelte |  0
 src/routes/about/+page.svelte     | 11 +++++++++++
 2 files changed, 11 insertions(+)
 create mode 100644 src/lib/atoms/About-titles.svelte
 create mode 100644 src/routes/about/+page.svelte

diff --git a/src/lib/atoms/About-titles.svelte b/src/lib/atoms/About-titles.svelte
new file mode 100644
index 00000000..e69de29b
diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte
new file mode 100644
index 00000000..b8285ee1
--- /dev/null
+++ b/src/routes/about/+page.svelte
@@ -0,0 +1,11 @@
+<script>
+
+</script>
+
+<main>
+
+</main>
+
+<style>
+    
+</style>
\ No newline at end of file

From de97f2703ab3c3d7a755d8dab45357f772bfa17e Mon Sep 17 00:00:00 2001
From: Daan Jacobs <daan@videotechniek.nl>
Date: Tue, 3 Dec 2024 12:50:44 +0100
Subject: [PATCH 2/6] Fixes: made a span component for the about page, closes
 #117

---
 src/lib/atoms/About-titles.svelte |  0
 src/lib/atoms/Span.svelte         | 13 +++++++++++++
 src/routes/about/+page.svelte     |  7 ++++---
 3 files changed, 17 insertions(+), 3 deletions(-)
 delete mode 100644 src/lib/atoms/About-titles.svelte
 create mode 100644 src/lib/atoms/Span.svelte

diff --git a/src/lib/atoms/About-titles.svelte b/src/lib/atoms/About-titles.svelte
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/lib/atoms/Span.svelte b/src/lib/atoms/Span.svelte
new file mode 100644
index 00000000..c16aacfb
--- /dev/null
+++ b/src/lib/atoms/Span.svelte
@@ -0,0 +1,13 @@
+<script>
+    // custom variables
+    export let textColor = "var(--dark)";
+    export let textSize= "var(--h2-text-size)";
+    export let text= "";
+    export let bold ="bold"
+</script>
+
+<span style="color: {textColor}; font-size: {textSize}; font-weight: {bold};">{text}</span>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte
index b8285ee1..9bb20c45 100644
--- a/src/routes/about/+page.svelte
+++ b/src/routes/about/+page.svelte
@@ -1,11 +1,12 @@
 <script>
-
+    // Component imports
+import Heading2 from "../../lib/atoms/Span.svelte";
 </script>
 
 <main>
-
+<span text="Slam" textSize="10em" textColor="var(--secondary-color)"/>
 </main>
 
 <style>
-    
+
 </style>
\ No newline at end of file

From 11599faf1c42f10064aa5c849ef825a169cbbbca Mon Sep 17 00:00:00 2001
From: Daan Jacobs <daan@videotechniek.nl>
Date: Tue, 3 Dec 2024 14:35:27 +0100
Subject: [PATCH 3/6] Fixes: made a ul component for the about page, closes
 #118

---
 src/lib/atoms/Ul.svelte       | 30 ++++++++++++++++++++++++++++++
 src/routes/about/+page.svelte |  6 ++++--
 2 files changed, 34 insertions(+), 2 deletions(-)
 create mode 100644 src/lib/atoms/Ul.svelte

diff --git a/src/lib/atoms/Ul.svelte b/src/lib/atoms/Ul.svelte
new file mode 100644
index 00000000..1e555d85
--- /dev/null
+++ b/src/lib/atoms/Ul.svelte
@@ -0,0 +1,30 @@
+<script>
+    import Button from "./Button.svelte";
+  
+    export let numberOfLi = 0;
+    export let text = [ ];
+    export let textColor = "var(--dark)";
+    export let textSize = "var(--text-size)";
+    export let textDecoration = "none";
+    export let bold = "";
+    export let styleType = "none";
+    export let href = [ ];
+    export let label = [ ];
+  </script>
+  
+  <ul>
+    {#each Array(numberOfLi) as _, index}
+      <li style="list-style-type: {styleType};">
+        <a href={href[index] || "#"} aria-label={label[index]}>
+          <p style="color: {textColor}; font-size: {textSize}; text-decoration: {textDecoration}; font-weight: {bold};">{text[index]}</p>
+        </a>
+      </li>
+    {/each}
+  </ul>
+  
+  <style>
+    /* Voeg je eigen styling hier toe */
+  a {
+    cursor: pointer;
+  }
+  </style>
\ No newline at end of file
diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte
index 9bb20c45..296b9f8e 100644
--- a/src/routes/about/+page.svelte
+++ b/src/routes/about/+page.svelte
@@ -1,10 +1,12 @@
 <script>
     // Component imports
-import Heading2 from "../../lib/atoms/Span.svelte";
+import Span from "../../lib/atoms/Span.svelte";
+import Ul from "../../lib/atoms/Ul.svelte";
 </script>
 
 <main>
-<span text="Slam" textSize="10em" textColor="var(--secondary-color)"/>
+<Span text="Slam" textSize="10em" textColor="var(--secondary-color)"/>
+<Ul numberOfLi= {3} href={["https://www.facebook.com/slamfm/?locale=nl_NL", "https://www.instagram.com/slamofficial/?hl=nl", "https://x.com/i/flow/login?redirect_after_login=/slamofficial"]} text= {["FACEBOOK", "INSTAGRAM", "X"]} textSize= "1.5em" textColor="var(--secondary-color)" label= {["FACEBOOK", "INSTAGRAM", "X"]}  textDecoration= "underline" bold= "bold"/>
 </main>
 
 <style>

From 435b9e952869f5a7ad8bd699e2af18c807c770b8 Mon Sep 17 00:00:00 2001
From: Daan Jacobs <daan@videotechniek.nl>
Date: Wed, 4 Dec 2024 12:27:04 +0100
Subject: [PATCH 4/6] Fixes: added a title element to the ul component, closes
 #120

---
 src/lib/atoms/Span.svelte     |  2 +-
 src/lib/atoms/Ul.svelte       | 26 +++++++++++++++++++-----
 src/routes/about/+page.svelte | 38 +++++++++++++++++++++++++++++++++--
 3 files changed, 58 insertions(+), 8 deletions(-)

diff --git a/src/lib/atoms/Span.svelte b/src/lib/atoms/Span.svelte
index c16aacfb..00f14273 100644
--- a/src/lib/atoms/Span.svelte
+++ b/src/lib/atoms/Span.svelte
@@ -6,7 +6,7 @@
     export let bold ="bold"
 </script>
 
-<span style="color: {textColor}; font-size: {textSize}; font-weight: {bold};">{text}</span>
+<span class="span-component" style="color: {textColor}; font-size: {textSize}; font-weight: {bold};">{text}</span>
 
 <style>
 
diff --git a/src/lib/atoms/Ul.svelte b/src/lib/atoms/Ul.svelte
index 1e555d85..d5e36039 100644
--- a/src/lib/atoms/Ul.svelte
+++ b/src/lib/atoms/Ul.svelte
@@ -1,6 +1,9 @@
-<script>
-    import Button from "./Button.svelte";
-  
+<script>  
+    
+    export let title = false;
+    export let titleText = "";
+    export let titleSize = "var(--h2-text-size)";
+    export let titleColor = "var(--dark)";
     export let numberOfLi = 0;
     export let text = [ ];
     export let textColor = "var(--dark)";
@@ -12,7 +15,13 @@
     export let label = [ ];
   </script>
   
-  <ul>
+<section class="ul-component">
+  {#if title}
+  <h2 style="font-size:{titleSize}; color: {titleColor};">{titleText}</h2> 
+  {:else}
+<!-- geen title -->
+  {/if}
+  <ul class="ul-component-list">
     {#each Array(numberOfLi) as _, index}
       <li style="list-style-type: {styleType};">
         <a href={href[index] || "#"} aria-label={label[index]}>
@@ -21,10 +30,17 @@
       </li>
     {/each}
   </ul>
+</section>
   
   <style>
     /* Voeg je eigen styling hier toe */
-  a {
+  section {
+    display: flex;
+    flex-direction: column;
+    width: fit-content;
+  }
+  
+    a {
     cursor: pointer;
   }
   </style>
\ No newline at end of file
diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte
index 296b9f8e..e0ce7404 100644
--- a/src/routes/about/+page.svelte
+++ b/src/routes/about/+page.svelte
@@ -5,10 +5,44 @@ import Ul from "../../lib/atoms/Ul.svelte";
 </script>
 
 <main>
-<Span text="Slam" textSize="10em" textColor="var(--secondary-color)"/>
-<Ul numberOfLi= {3} href={["https://www.facebook.com/slamfm/?locale=nl_NL", "https://www.instagram.com/slamofficial/?hl=nl", "https://x.com/i/flow/login?redirect_after_login=/slamofficial"]} text= {["FACEBOOK", "INSTAGRAM", "X"]} textSize= "1.5em" textColor="var(--secondary-color)" label= {["FACEBOOK", "INSTAGRAM", "X"]}  textDecoration= "underline" bold= "bold"/>
+    <section class="slam-fm-container">
+        <Span text="SLAM" textSize="13em" textColor="var(--secondary-color)"/>
+        <Span text="FM" textSize="13em" textColor="var(--secondary-color)"/>
+        <Ul title= true; titleText="SOCIALS" titleSize="5em" titleColor="var(--secondary-color)" numberOfLi= {3} href={["https://www.facebook.com/slamfm/?locale=nl_NL", "https://www.instagram.com/slamofficial/?hl=nl", "https://x.com/i/flow/login?redirect_after_login=/slamofficial"]} text= {["FACEBOOK", "INSTAGRAM", "X"]} textSize= "4em" textColor="var(--secondary-color)" label= {["FACEBOOK", "INSTAGRAM", "X"]}  textDecoration= "underline" bold= "bold"/>
+    </section>
 </main>
 
 <style>
+.slam-fm-container {
+    width: 100vw;
+    height: 100vh;
+}
+
+:global(.span-component, .ul-component) {
+    position: absolute;
+}
+
+:global(.span-component:nth-of-type(2)) {
+bottom: 0;
+left: 5%;
+}
+
+:global(.span-component:first-of-type) {
+    top: 1;
+    right: 5%;
+}
+
+:global(.span-component:nth-of-type(2)) {
+    position: absolute;
+
+bottom: 0;
+left: 5%;
+}
+
+:global(.ul-component){
+bottom: 10%;
+right: 5%;
+
+}
 
 </style>
\ No newline at end of file

From 5e3328f312b0bb77ca3935953f041f457dc574e3 Mon Sep 17 00:00:00 2001
From: Daan Jacobs <daan@videotechniek.nl>
Date: Wed, 4 Dec 2024 13:07:31 +0100
Subject: [PATCH 5/6] Fixes: added a slide in animation on load in the slam fm
 section, closes #121

---
 src/routes/about/+page.svelte | 48 +++++++++++++++++++++++++++--------
 1 file changed, 37 insertions(+), 11 deletions(-)

diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte
index e0ce7404..c02eac75 100644
--- a/src/routes/about/+page.svelte
+++ b/src/routes/about/+page.svelte
@@ -8,7 +8,7 @@ import Ul from "../../lib/atoms/Ul.svelte";
     <section class="slam-fm-container">
         <Span text="SLAM" textSize="13em" textColor="var(--secondary-color)"/>
         <Span text="FM" textSize="13em" textColor="var(--secondary-color)"/>
-        <Ul title= true; titleText="SOCIALS" titleSize="5em" titleColor="var(--secondary-color)" numberOfLi= {3} href={["https://www.facebook.com/slamfm/?locale=nl_NL", "https://www.instagram.com/slamofficial/?hl=nl", "https://x.com/i/flow/login?redirect_after_login=/slamofficial"]} text= {["FACEBOOK", "INSTAGRAM", "X"]} textSize= "4em" textColor="var(--secondary-color)" label= {["FACEBOOK", "INSTAGRAM", "X"]}  textDecoration= "underline" bold= "bold"/>
+        <Ul title= true; titleText="SOCIALS" titleSize="5.5em" titleColor="var(--secondary-color)" numberOfLi= {3} href={["https://www.facebook.com/slamfm/?locale=nl_NL", "https://www.instagram.com/slamofficial/?hl=nl", "https://x.com/i/flow/login?redirect_after_login=/slamofficial"]} text= {["FACEBOOK", "INSTAGRAM", "X"]} textSize= "4em" textColor="var(--secondary-color)" label= {["FACEBOOK", "INSTAGRAM", "X"]}  textDecoration= "underline" bold= "bold"/>
     </section>
 </main>
 
@@ -22,27 +22,53 @@ import Ul from "../../lib/atoms/Ul.svelte";
     position: absolute;
 }
 
-:global(.span-component:nth-of-type(2)) {
-bottom: 0;
-left: 5%;
-}
 
 :global(.span-component:first-of-type) {
+    animation: slam-fm-slide-in-right 1.5s ease-out forwards;
     top: 1;
     right: 5%;
 }
 
 :global(.span-component:nth-of-type(2)) {
-    position: absolute;
-
-bottom: 0;
-left: 5%;
+    animation: slam-fm-slide-in-left 1.5s ease-in forwards;    
+    bottom: 0;
+    left: 5%;
 }
 
 :global(.ul-component){
-bottom: 10%;
-right: 5%;
+    animation: socials-slide-up 1.6s ease-in forwards;
+    bottom: 10%;
+    right: 5%;
+}
+
 
+@keyframes slam-fm-slide-in-right {
+    from {
+        right: 101%;
+    }
+
+    to {
+        right: 5%;
+    }
+}
+
+@keyframes slam-fm-slide-in-left {
+    from {
+        left: 101%;
+    }
+
+    to {
+        left: 5%;
+    }
 }
 
+@keyframes socials-slide-up {
+    from {
+        bottom: -60%;
+    }
+
+    to{ 
+        bottom: 10%;
+    }
+}
 </style>
\ No newline at end of file

From 8b97b37309f60d7895b6a75d0f7642339cb9e6e4 Mon Sep 17 00:00:00 2001
From: Daan Jacobs <daan@videotechniek.nl>
Date: Fri, 6 Dec 2024 13:22:30 +0100
Subject: [PATCH 6/6] made a slam grow animation

---
 src/lib/atoms/Ul.svelte       |   4 +-
 src/routes/about/+page.svelte | 136 ++++++++++++++++++++++++++++++----
 2 files changed, 126 insertions(+), 14 deletions(-)

diff --git a/src/lib/atoms/Ul.svelte b/src/lib/atoms/Ul.svelte
index d5e36039..59cd8887 100644
--- a/src/lib/atoms/Ul.svelte
+++ b/src/lib/atoms/Ul.svelte
@@ -1,5 +1,4 @@
 <script>  
-    
     export let title = false;
     export let titleText = "";
     export let titleSize = "var(--h2-text-size)";
@@ -43,4 +42,7 @@
     a {
     cursor: pointer;
   }
+
+  /* Polygon 2 */
+
   </style>
\ No newline at end of file
diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte
index c02eac75..eb0734cd 100644
--- a/src/routes/about/+page.svelte
+++ b/src/routes/about/+page.svelte
@@ -8,41 +8,123 @@ import Ul from "../../lib/atoms/Ul.svelte";
     <section class="slam-fm-container">
         <Span text="SLAM" textSize="13em" textColor="var(--secondary-color)"/>
         <Span text="FM" textSize="13em" textColor="var(--secondary-color)"/>
-        <Ul title= true; titleText="SOCIALS" titleSize="5.5em" titleColor="var(--secondary-color)" numberOfLi= {3} href={["https://www.facebook.com/slamfm/?locale=nl_NL", "https://www.instagram.com/slamofficial/?hl=nl", "https://x.com/i/flow/login?redirect_after_login=/slamofficial"]} text= {["FACEBOOK", "INSTAGRAM", "X"]} textSize= "4em" textColor="var(--secondary-color)" label= {["FACEBOOK", "INSTAGRAM", "X"]}  textDecoration= "underline" bold= "bold"/>
+        <Ul title= true; titleText="SOCIALS" titleSize="5.5em" titleColor="var(--secondary-color)" numberOfLi= {3} href={["https://www.facebook.com/slamfm/?locale=nl_NL", "https://www.instagram.com/slamofficial/?hl=nl", "https://x.com/i/flow/login?redirect_after_login=/slamofficial"]} text= {["FACEBOOK", "INSTAGRAM", "X"]} textSize= "4em" textColor="var(--secondary-color)" label= {["FACEBOOK", "INSTAGRAM", "X"]} bold= "bold"/>
+        <svg class="slam-fm-logo" width="144" height="191" viewBox="0 0 144 191" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M129.699 107.939L32.2479 180.391C22.0218 187.994 7.5 180.695 7.5 167.952L7.5 23.0477C7.5 10.3048 22.0218 3.00589 32.248 10.6088L129.699 83.0612C138.035 89.2588 138.035 101.741 129.699 107.939Z" fill="white" stroke="#FF0967" stroke-width="15"/>
+            </svg>
+            
+    </section>
+    
+    
+    
+    <section class="veronica-container">
+<h1>veronica</h1>
     </section>
 </main>
 
 <style>
+main {
+    scroll-behavior: smooth;
+}
+
 .slam-fm-container {
-    width: 100vw;
-    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: start;
+   position: relative;
+    width: 100%;
+    height: 300vh;
+    clip-path: inset(0 0 0 0);
 }
 
 :global(.span-component, .ul-component) {
-    position: absolute;
+   
 }
 
 
+
 :global(.span-component:first-of-type) {
+    position: sticky;
     animation: slam-fm-slide-in-right 1.5s ease-out forwards;
-    top: 1;
-    right: 5%;
+    top: 10%;
+    left: 60%;
 }
 
 :global(.span-component:nth-of-type(2)) {
+    position: sticky;
     animation: slam-fm-slide-in-left 1.5s ease-in forwards;    
-    bottom: 0;
-    left: 5%;
+    top: 70%;
+    right: 75%;
 }
 
 :global(.ul-component){
+    position: sticky;
     animation: socials-slide-up 1.6s ease-in forwards;
-    bottom: 10%;
-    right: 5%;
+    top: 60%;
+    left: 70%;
+}
+
+:global(.ul-component a) {
+    position: relative; /* Optioneel, afhankelijk van stylingvoorkeur */
+}
+
+:global(.ul-component a::after) {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 5px;
+    bottom: 0;
+    left: 0;
+    background-color: var(--secondary-color);
+    transform: scaleX(0); /* Start met geen breedte */
+    transform-origin: bottom right; /* Animatie start vanaf rechts */
+    transition: transform 0.25s ease-out; /* Transitie-instelling */
+}
+
+:global(.ul-component a:hover::after) {
+    transform: scaleX(1); /* Volledig zichtbaar maken bij hover */
+    transform-origin: bottom left; /* Eindigt aan de linkerkant */
+}
+
+
+.slam-fm-logo {
+    position: sticky;
+    top: 40%;
+    right: 45%; 
+    transition: transform 10s ease-in-out;
+    transform-origin: center center;
+    
+    /* Vergroot animatie wanneer in de eerste sectie */
+    scroll-timeline-name: logo-timeline;
+    scroll-timeline-axis: block;
+    animation: enlarge-logo 10s ease-out forwards;
+    animation-timeline: scroll(y);
+    animation-range: 0% 100%;
+    clip-path: inset(0 0 0 0); /* Dit zorgt ervoor dat de afbeelding alleen binnen de container zichtbaar is */
+
+}
+
+
+
+.veronica-container {
+  display: flex;
+  justify-content: center;
+  position: relative;
+  align-items: center;
+  height: 100vh;
+  width: 100vw;
+  background-color: #e20074; /* SLAM kleur */
+  color: white;
+  text-align: center;
+
+  animation: fade linear;
+  animation-timeline: view();
 }
 
 
-@keyframes slam-fm-slide-in-right {
+
+/* animations */
+/* @keyframes slam-fm-slide-in-right {
     from {
         right: 101%;
     }
@@ -60,7 +142,7 @@ import Ul from "../../lib/atoms/Ul.svelte";
     to {
         left: 5%;
     }
-}
+} */
 
 @keyframes socials-slide-up {
     from {
@@ -68,7 +150,35 @@ import Ul from "../../lib/atoms/Ul.svelte";
     }
 
     to{ 
-        bottom: 10%;
+        bottom: 4%;
+    }
+}
+
+@keyframes enlarge-logo {
+    from {
+        transform: scale(1); /* Start op normale grootte */
+    }
+    to {
+        transform: scale(50); /* Vergroot het logo tot twee keer de grootte */
+    }
+}
+
+@keyframes shrink-logo {
+    from {
+        transform: scale(2); /* Begin bij vergrootte versie */
+    }
+    to {
+        transform: scale(1); /* Krimp terug naar de originele grootte */
     }
 }
+
+@keyframes fade {
+    from {
+        transform: opacity(0); /* Begin bij vergrootte versie */
+    }
+    to {
+        transform: opacity(1); /* Krimp terug naar de originele grootte */
+    }
+}
+
 </style>
\ No newline at end of file