From 8a5a4bb40e488a09b962c9df703f9781c38a6c22 Mon Sep 17 00:00:00 2001
From: saiminh <saiminh@gmail.com>
Date: Wed, 4 Oct 2023 16:08:54 +0200
Subject: [PATCH] ch ch ch changes

---
 src/lib/components/ContactCanvas.svelte |  31 ++-
 src/lib/components/HomeCanvas.svelte    |   2 +-
 src/lib/components/HomeIlluShape.svelte |   1 +
 src/lib/styles/global.scss              |  19 +-
 src/routes/+page.svelte                 |  15 +-
 src/routes/contact/+page.svelte         | 250 ++++++++++++++----------
 src/routes/service/ServiceCanvas.svelte |   4 +-
 7 files changed, 202 insertions(+), 120 deletions(-)

diff --git a/src/lib/components/ContactCanvas.svelte b/src/lib/components/ContactCanvas.svelte
index 54acd9b..3154622 100644
--- a/src/lib/components/ContactCanvas.svelte
+++ b/src/lib/components/ContactCanvas.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 import * as PIXI from 'pixi.js';
-import { BulgePinchFilter } from 'pixi-filters';
+import { BulgePinchFilter, TwistFilter } from 'pixi-filters';
 import gsap from 'gsap';
 import ScrollTrigger from 'gsap/dist/ScrollTrigger';
 import SplitText from 'gsap/dist/SplitText';
@@ -29,6 +29,7 @@ onMount(()=>{
     let is_coarse = window.matchMedia('(pointer:coarse)').matches
     let is_landscape = window.matchMedia('(orientation:landscape)').matches
     let is_portrait = window.matchMedia('(orientation:portrait)').matches
+    let is_twisted = false;
 
     gsap.registerPlugin(PixiPlugin, ScrollTrigger, SplitText);
     
@@ -69,7 +70,24 @@ onMount(()=>{
     bulgefilter.center = is_landscape ? center : [0.5, 0];
     bulgefilter.resolution = 2;
 
-    bulgegroup.filters = [bulgefilter];
+    let twistfilter = new TwistFilter();
+    twistfilter.angle = 0;
+    twistfilter.radius = window.innerWidth/2;
+    twistfilter.offset = new PIXI.Point(window.innerWidth/2, window.innerHeight/2);
+    twistfilter.resolution = 2;
+
+    bulgegroup.filters = [bulgefilter, twistfilter];
+
+    gsap.to(twistfilter, {
+      angle: .75,
+      duration: 1,
+      ease: 'elastic.out',
+      delay: 2,
+      onComplete: () => {
+        is_twisted = true;
+      }
+    })
+
 
     /*----------------------------------
     * Convert text to canvas using 
@@ -169,9 +187,8 @@ onMount(()=>{
           ease: 'power3.out',
           overwrite: true,
           x: 0.5 + pointerXfrac/2,
-          y: 0.5 + pointerYfrac/2,
+          y: 0.5 + pointerYfrac/6,
         })
-    
       })
     }
   
@@ -185,10 +202,12 @@ onMount(()=>{
       elapsed += delta;
       if (!is_landscape) {
         // bulgefilter.center = [(tween.x + Math.sin(elapsed/200)/20 ),(tween.y + Math.cos(elapsed/200)/20 )];
-        bulgefilter.center = [(0.5 + Math.sin(elapsed/200)/20 ),(0.25 + Math.cos(elapsed/200)/20 )];
+        bulgefilter.center = [(0.5 + Math.sin(elapsed/200)/20 ),(0.4 + Math.cos(elapsed/200)/20 )];
+        twistfilter.offset = new PIXI.Point( twistfilter.offset.x + Math.sin(elapsed/100) - Math.sin(elapsed/100) * 2, twistfilter.offset.y );
         // bulgefilter.center = [0.5, 0.25];
       } else {
-        bulgefilter.center = [tween.x, 0.5];
+        bulgefilter.center = [tween.x, tween.y];
+        twistfilter.offset = new PIXI.Point(mouse.x, mouse.y);
       }
       updateImgs();
       updateText();
diff --git a/src/lib/components/HomeCanvas.svelte b/src/lib/components/HomeCanvas.svelte
index d8ea244..9955457 100644
--- a/src/lib/components/HomeCanvas.svelte
+++ b/src/lib/components/HomeCanvas.svelte
@@ -207,7 +207,7 @@ onMount(()=>{
         bulgefilter.center = [(0.5 + Math.sin(elapsed/200)/20 ),(0.45 + Math.cos(elapsed/200)/20 )];
         // bulgefilter.center = [0.5, 0.45];
       } else {
-        bulgefilter.center = [tween.x, 0.5];
+        bulgefilter.center = [tween.x, tween.y];
       }
       updateImgs();
       updateText();
diff --git a/src/lib/components/HomeIlluShape.svelte b/src/lib/components/HomeIlluShape.svelte
index f9b8deb..0f2f053 100644
--- a/src/lib/components/HomeIlluShape.svelte
+++ b/src/lib/components/HomeIlluShape.svelte
@@ -14,6 +14,7 @@
   }
   .shape > * {
     transform-origin: 50% 50%;
+    fill: var(--color-highlight, #000);
   }
   .sphere, .quartercirc, .triangle, .rectangle {
     fill: none;
diff --git a/src/lib/styles/global.scss b/src/lib/styles/global.scss
index dde6ba1..5d5715d 100644
--- a/src/lib/styles/global.scss
+++ b/src/lib/styles/global.scss
@@ -1,9 +1,9 @@
 :root {
   --spacing-outer: 5vw;
   --spacing-nav: 5vw;
-  --color-bg: #3c71c8;
-  --color-text: #ffeee6;
-  --color-highlight: #000000;
+  --color-bg: #2085e3;
+  --color-text: #ffe9e6;
+  --color-highlight: #1d0c12;
   // --color-bg: #000000;
   // --color-text: #FFFFFF;
   // --color-highlight: #FF4D00;
@@ -86,11 +86,20 @@ a {
   padding: .75em;
   text-decoration: none;
   box-sizing: border-box;
+  border: none;
   color: var(--color-text);
   line-height: 1.2;
+  cursor: url('/pointer.svg'), auto;
   position: relative;
   z-index: 2;
   transition: all .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+
+  &:hover {
+    @media screen and (min-width: 768px) {
+      // font-size: 1.05em;
+      letter-spacing: 0.01em;
+    }
+  }
   
   &:before {
     content: '';
@@ -114,7 +123,7 @@ a {
     transition: all .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
   }
   &.button--primary {
-    color: var(--color-bg);
+    color: var(--color-text);
 
     &:before {
       background-color: var(--color-highlight);
@@ -125,9 +134,7 @@ a {
     font-size: clamp(24px, 3.2vw, 3.2vw);
     padding: 0.5em;
     letter-spacing: -0.02em;
-    // display: block;
     margin: 0 auto;
-    max-width: 40vw;
     text-align: center;
 
     &:hover {
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 6d06086..10530b7 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -76,7 +76,7 @@
 {/if}
 <article class="scroller">
   <section class="splash"> 
-    <h1 class="align-middle">Hallo! I'm Simon. I forge websites that stand out with exemplary beauty.</h1>
+    <h1 class="align-middle">Hallo! I'm Simon. I forge websites that <em>stand out</em> with exemplary beauty.</h1>
   </section>
   <section class="intro">
     <figure class="intro-image">
@@ -86,7 +86,7 @@
     <p class="toCanvas">I fashion exquisitly tailored web experiences for discerning enterprises and their audiences.</p> 
     <div class="cta">
       <a href="/service" class="button">My Services</a>
-      <a href="/work" class="button button--primary">Hire Simon</a>
+      <a href="/contact" class="button button--primary">Get in touch!</a>
     </div>
   </section>
   <section class="design">
@@ -96,13 +96,13 @@
     <h2>Visual Design</h2> 
     <p class="toCanvas">I'm also a seasoned designer, sculpting communication that's wickedly nice, full of jaw-dropping surprises, and utterly delightful.</p>
     <div class="cta">
-      <a href="/service" class="button">My Services</a> <a href="/work" class="button button--primary">Hire Simon</a>
+      <a href="/service" class="button">My Services</a> <a href="/contact" class="button button--primary">Get in touch!</a>
     </div>
   </section>
   <section class="more">
-    <h2 class="align-middle">I work as a free agent. Both companies and noble causes can enlist my services for a reasonable wage.</h2>
+    <h2 class="align-middle">I work as a free agent. Both companies and noble causes can <em>enlist my services</em> for a reasonable wage.</h2>
     <div class="cta">
-      <a href="/work" class="button button--xl">Enlist my services</a>
+      <a href="/contact" class="button button--xl">Enlist my services</a>
     </div>
   </section>
 </article>
@@ -199,6 +199,11 @@
        -moz-user-select: none; /* Firefox */
         -ms-user-select: none; /* Internet Explorer/Edge */
             user-select: none; 
+    & > em {
+      font-style: normal;
+      font-weight: 400;
+      color: var(--color-highlight);
+    }
   }
   h1 {
     line-height: .9;
diff --git a/src/routes/contact/+page.svelte b/src/routes/contact/+page.svelte
index 0fa75e6..0e0d2a1 100644
--- a/src/routes/contact/+page.svelte
+++ b/src/routes/contact/+page.svelte
@@ -6,12 +6,38 @@
   import ScrollTrigger from 'gsap/dist/ScrollTrigger';
 
   let canvasTexts: Array<HTMLElement> = [];
+  let contactFormVisible = false;
+  let contactFormClickHandler = (e: Event) => {
+    if (contactFormVisible) {
+      gsap.to('.wordChildren', { opacity: 1, yPercent: 0, duration: 1, ease: 'power4.inOut' })
+      gsap.to('.alternatives > *', { opacity: 1, scale: 1, duration: .5, stagger: 0.1, ease: 'power4.inOut' })
+      gsap.fromTo('.formwrapper', 
+      { opacity: 1, yPercent: 0 }, 
+      { opacity: 0, yPercent: 50, duration: .6, ease: 'power4.inOut', onComplete: ()=>{
+        gsap.set('.formwrapper', { zIndex: -1 })
+      } }
+      )
+    } else {
+      gsap.to('.wordChildren', { opacity: 1, yPercent: -200, duration: 1, ease: 'power4.inOut' })
+      gsap.to('.alternatives > *', { opacity: 0, scale: 0.5, duration: .5, stagger: 0.1, ease: 'power4.inOut' })
+      gsap.set('.formwrapper', { zIndex: 2 })
+      gsap.fromTo('.formwrapper', 
+      { opacity: 1, yPercent: 100 }, 
+      { opacity: 1, yPercent: 0, duration: 1, ease: 'power4.inOut' }
+      )
+      gsap.fromTo('.formwrapper label > *', 
+      { opacity: 0, yPercent: 100 }, 
+      { opacity: 1, yPercent: 0, duration: .5, stagger: 0.0125, ease: 'power4.out', delay: .25}
+      )
+    }
+    contactFormVisible = !contactFormVisible;
+  }
 
   onMount( () => {
 
     gsap.registerPlugin( SplitText, ScrollTrigger );
     
-    let split = new SplitText('.toCanvas', { type: 'lines', linesClass: 'lineChildren' });
+    let split = new SplitText('.toCanvas', { type: 'words, lines', wordsClass: 'wordChildren', linesClass: 'lineChildren' });
     
     let alignmiddles: Array<HTMLElement> = Array.from(document.querySelectorAll('.toCanvas'));
     alignmiddles.forEach( (toCanvas) => {
@@ -28,188 +54,210 @@
       toCanvas.style.left = (toCanvas.offsetWidth - longestSpan) / 2 + 'px';
     })
 
-    canvasTexts = Array.from(document.querySelectorAll('.lineChildren'));
+    canvasTexts = Array.from(document.querySelectorAll('.wordChildren'));
 
-    const introIn = document.querySelector('.contact') as HTMLElement;
-    gsap.fromTo(introIn.querySelectorAll('.lineChildren'), {
+    const introInElem = document.querySelector('.pagewrapper') as HTMLElement;
+    gsap.fromTo(introInElem.querySelectorAll('.wordChildren'), {
       opacity: 0, yPercent: -100
     }, {
-      opacity: 1, yPercent: 0, duration: 1.5, stagger: 0.05, ease: 'power4.inOut',
+      opacity: 1, yPercent: 0, duration: 1.5, stagger: 0.025, ease: 'power4.inOut',
     })
-    gsap.fromTo(introIn?.querySelectorAll('p, input, .button'), {
+    gsap.fromTo(introInElem?.querySelectorAll('.alternatives p, .alternatives .button'), {
       opacity: 0, yPercent: 100
     }, {
-      opacity: 1, yPercent: 0, duration: 1, stagger: 0.05, ease: 'power4.inOut',
+      opacity: 1, yPercent: 0, duration: 1, stagger: 0.025, ease: 'power4.inOut',
     })
 
-    const scrollIns = document.querySelectorAll('.scrollIn');
-    scrollIns.forEach( scrollIn => {
-      gsap.set(scrollIn.querySelectorAll('p, input, textarea, .button'), { opacity: 0, y: 100 });
-      gsap.to(scrollIn.querySelectorAll('p, input, textarea, .button'), { opacity: 1, y: 0, duration: 1, stagger: 0.05, ease: 'power4.inOut', 
-        scrollTrigger: { trigger: scrollIn, start: 'top 66%', end: 'bottom 50%', scrub: false }
-      })  
-      gsap.fromTo(scrollIn.querySelectorAll('.lineChildren'), {
-        opacity: 0, yPercent: 100
-      },{
-        opacity: 1, yPercent: 0, duration: 1, stagger: 0.05, ease: 'power4.inOut', 
-        scrollTrigger: { trigger: scrollIn, start: 'top 66%', end: 'bottom 50%', scrub: false }
-      })
-    })
-
-    let textarea = document.querySelector('textarea') as HTMLElement
-
-    textarea?.addEventListener('focus', () => {
-      window.scrollTo(0, textarea.offsetTop - 100);
-    })
-    
     return () => {
-      gsap.killTweensOf('.toCanvas, .lineChildren');
+      gsap.killTweensOf('.toCanvas, .wordChildren');
     }
   })
 
 </script>
 
-<div class="formwrapper">
-  <form name="contact" action="/success" method="POST" data-netlify="true">
-    <input type="hidden" name="form-name" value="contact">
-    <section class="contact">
-      <h1 class="toCanvas">Don't be a stranger. Let's get acquainted.</h1>
-      <div class="alternatives">
-        <p>You can fill in the form below or:</p>
-        <ul>
-          <li><a class="button" href="mailto:simon@floter.design">Send an Email</a></li>
-          <li><a class="button" href="https://www.linkedin.com/in/floter/">Connect on LinkedIn</a></li>
+<div class="pagewrapper">
+  <div class="intro">
+    <h1 class="toCanvas">Life is weird. <em>Let's be weird together.</em></h1>
+    <div class="alternatives">
+      <p>Choose your flavour of contact:</p>
+      <ul>
+        <li><span class="button" on:click={contactFormClickHandler} on:keydown={contactFormClickHandler} role="button" tabindex="0">Contact form</span></li>
+        <li><a class="button" href="mailto:simon@floter.design">Email</a></li>
+        <li><a class="button" href="https://www.linkedin.com/in/floter/">LinkedIn</a></li>
+      </ul>
+    </div>
+  </div>
+  <div class="formwrapper">
+    <span class="button button-back" on:click={contactFormClickHandler} on:keydown={contactFormClickHandler} role="button" tabindex="0">← Back</span>
+    <form name="contact" action="/success" method="POST" data-netlify="true">
+      <input type="hidden" name="form-name" value="contact">
+      <div class="inputs-flex-row">
+        <label for="name">
+          <!-- <p>How would you like to be addressed?</p> -->
+          <input type="text" name="name" id="name" placeholder="Your name">
+        </label>
+        <label for="email">
+          <!-- <p>For receiving a reply, add your Email address:</p> -->
+          <input type="email" name="email" id="email" placeholder="Your Email?*" required>
+        </label>
       </div>
-      <label for="name">
-        <p>How would you like to be addressed?</p>
-        <input type="text" name="name" id="name" placeholder="Your name">
-      </label>
-      <label for="email">
-        <p>For receiving a reply, add your Email address:</p>
-        <input type="email" name="email" id="email" placeholder="Your Email?*" required>
-      </label>
-    </section>
-    <section class="message scrollIn">
-      <h3 class="toCanvas contactheadline">How can I assist in your noble cause?</h3>
       <label for="contact">
-        <p>Please describe your plight in a few words</p>
-        <textarea rows="6" name="contact" id="contact" />
+        <!-- <p>Please describe your plight in a few words</p> -->
+        <textarea rows="6" name="contact" id="contact" placeholder="Your business propositions, praise, complaints and/or threats" required />
       </label>
-      <button class="button" type="submit">Send it!</button>
-    </section>
-  </form>
+      <div class="send">
+        <button class="button button--xl button--primary" type="submit">Send it!</button>
+      </div>
+    </form>
+  </div>
 </div>
 <ContactCanvas textsToCanvas={canvasTexts} />
 
 <style lang="scss">
-  h1, h3 {
+  h1 {
     visibility: hidden;
-    font-size: 2.5em;
+    font-size: 12vw;
     line-height: .9;
     letter-spacing: -0.04em;
     margin: 1em var(--spacing-nav) 1em var(--spacing-nav);
     
     @media screen and (min-width: 768px) {
-      margin: 1em var(--spacing-outer) 0.33em var(--spacing-outer);
+      margin: 1em var(--spacing-outer) .75em var(--spacing-outer);
       font-size: 4.5em;
     }
-  }
-  h3 {
-    font-size: 2em;
-    @media screen and (min-width: 768px) {
-      font-size: 3em;
+
+    & em {
+      font-style: normal;
+      font-weight: 400;
+      color: var(--color-highlight);
     }
   }
-  .contact p, .contact input {
-    opacity: 0;
+  .intro {
+    width: 100%;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding-bottom: 4em;
+    @media screen and (min-width: 768px) {
+      padding-bottom: 0;
+    }
   }
   .formwrapper {
-    margin: 0 auto;
-    padding: 1em 1em calc(4 * var(--spacing-outer)) 1em;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: var(--spacing-outer) var(--spacing-outer) 4em var(--spacing-outer);
+    background-color: var(--color-bg);
+    z-index: 0;
+    opacity: 0;
+    overflow-y: scroll;
+
+    --form-maxwidth: 1000px;
+  }
+  .button-back {
+    margin: 0;
   }
   form {
     box-sizing: border-box;
     max-width: inherit;
     margin: 0 auto;
     overflow: hidden;
+    padding: 1em 0;
+  }
+  .inputs-flex-row {
+    @media screen and (min-width: 768px) {
+      display: flex;
+      gap: 1em;
+      justify-content: center;
+      max-width: var(--form-maxwidth);
+      margin: auto;
+  
+      & label {
+        flex-basis: 50%;
+      }
+    }
   }
   .alternatives {
-    margin: 4em auto 1em auto; 
+    margin: 0em auto 1em auto; 
     width: 100%;
+    text-align: center;
     
     @media screen and (min-width: 768px) {
       margin: 0 auto 2em auto; 
       padding-bottom: 1em;
-      max-width: 640px;
     }
-
+    & p, & .button {
+      opacity: 0;
+    }
     & p {
-      margin: 0;
+      margin: 0 0 .5em 0;
     }
     & ul {
-      list-style-type: none;
-      display: flex;
-      gap: .5em;
+      margin: 0 var(--spacing-outer);
+      
+      // @media screen and (min-width: 768px) {
+        list-style-type: none;
+        display: flex;
+        justify-content: center;
+        gap: .25em;
+      // }
+    }
+    & ul li {
+      display: block;
       margin: 0;
     }
     & .button {
-      margin-top: 0.5em;
-    }
-  }
-  section {
-    box-sizing: border-box;
-    margin: 0;
-    min-height: 70vh;
-    
-    @media screen and (min-width: 768px) {
-      // display: flex;
-      // flex-direction: column;
-      // justify-content: center;
-      max-width: 75vw;
-      margin: 0 auto;
-      gap: 0;      
+      margin: 0.25em 0;
+      display: block;
+      font-size: .9em;
     }
   }
   label {
-    font-size: 1.25em;
+    font-size: 1em;
+    @media screen and (min-width: 768px) {
+      font-size: 1.25em;
+    }
   }
   input[type='text'], input[type='email'], textarea {
     width: 100%;
-    border: 0px solid var(--color-text);
-    background-color: rgba(255, 205, 205, 0.2);
-    color: var(--color-text);
+    border: 3px solid var(--color-text);
+    background-color: var(--color-text);
+    color: var(--color-bg);
     border-radius: 4px;
     font-family: 'Stratos', sans-serif;
     font-size: 1em;
+    line-height: 1.2;
     padding: .75em;
     transition: all 0.3s ease-out;
     margin: 0 auto 1em auto;
     display: block;
-    max-width: 640px;
+    max-width: var(--form-maxwidth);
     
     &:focus {
       outline: none;
       color: var(--color-bg);
       background-color: var(--color-text);
     }
+    &:placeholder-shown {
+      background-color: rgba(255, 205, 205, 0);
+    }
     &::placeholder {
       color: var(--color-text);
       opacity: .7;
     }
   }
   label p {
-    max-width: 640px;
+    max-width: var(--form-maxwidth);
     margin: 0 auto 1em auto;
     display: block;
     font-size: .75em;
     margin-bottom: .5em;
   }
-  button {
-    display: block;
-    width: 100%;
-    margin: 0 auto;
-    font-size: 1.25em;
-    max-width: 640px;
-    opacity: 0;
+  .send {
+    max-width: var(--form-maxwidth);
+    margin: auto;
   }
 </style>
\ No newline at end of file
diff --git a/src/routes/service/ServiceCanvas.svelte b/src/routes/service/ServiceCanvas.svelte
index 0a8ac10..120e2ec 100644
--- a/src/routes/service/ServiceCanvas.svelte
+++ b/src/routes/service/ServiceCanvas.svelte
@@ -10,6 +10,8 @@
 
   onMount( () => {
 
+    let highLightColor = window.getComputedStyle(document.body).getPropertyValue('--color-highlight');
+
     let is_fine = window.matchMedia('(pointer:fine)').matches
     let is_landscape = window.matchMedia('(orientation:landscape)').matches
   
@@ -44,7 +46,7 @@
           // fontWeight: '800',
           lineHeight: 0,
           letterSpacing: -20,
-          fill: `#000`, 
+          fill: highLightColor, 
           padding: 0          
         }
       );