img, html optimization; css tweaks; img tweaks; added video; service icon animation fix;

.eleventy.js

@@ -1,7 +1,18 @@
 const eleventySass = require("eleventy-sass");
-//const gsap = require('gsap');
 const lazyImagesPlugin = require('eleventy-plugin-lazyimages');
 
+// https://www.npmjs.com/package/eleventy-plugin-img2picture
+const img2picture = require("eleventy-plugin-img2picture");
+
+// https://www.npmjs.com/package/@sardine/eleventy-plugin-tinycss
+const tinyCSS = require('@sardine/eleventy-plugin-tinycss');
+
+// https://www.npmjs.com/package/@sardine/eleventy-plugin-tinysvg
+const tinysvg = require('@sardine/eleventy-plugin-tinysvg');
+
+// https://www.npmjs.com/package/@sardine/eleventy-plugin-tinyhtml
+const tinyHTML = require('@sardine/eleventy-plugin-tinyhtml');
+
 module.exports = function (eleventyConfig) {
 
   // passthrus
@@ -9,15 +20,39 @@ module.exports = function (eleventyConfig) {
 
   eleventyConfig.addPassthroughCopy('src/assets/fonts');
   eleventyConfig.addPassthroughCopy("./src/assets/js");
-  eleventyConfig.addPassthroughCopy('src/assets/images/**/*.png');
+  // eleventyConfig.addPassthroughCopy('src/assets/images/**/*.png');
-  eleventyConfig.addPassthroughCopy('src/assets/images/**/*.svg');
+  // eleventyConfig.addPassthroughCopy('src/assets/images/**/*.svg');
-  eleventyConfig.addPassthroughCopy('src/assets/images/**/*.jpg');
+  // eleventyConfig.addPassthroughCopy('src/assets/images/**/*.jpg');
-  eleventyConfig.addPassthroughCopy('src/assets/images/**/*.gif');
+  // eleventyConfig.addPassthroughCopy('src/assets/images/**/*.gif');
+
+
+  if (true) {//(process.env.ELEVENTY_ENV === "production") {
+    eleventyConfig.addPlugin(img2picture, {
+      // Should be same as Eleventy input folder set using `dir.input`.
+      eleventyInputDir: "src",
+
+      // Output folder for optimized images.
+      imagesOutputDir: "_site/assets/images",
+
+      // URL prefix for images src URLS.
+      // It should match with path suffix in `imagesOutputDir`.
+      // Eg: imagesOutputDir with `_site/images` likely need urlPath as `/images/`
+      urlPath: "/assets/images/",
+    });
+  } else {
+    // During development, copy the files to Eleventy's `dir.output`
+    eleventyConfig.addPassthroughCopy("src/assets/images");
+  }
 
   //eleventyConfig.addNunjucksFilter('bitcoin', arr => arr.filter(e => e.name == 'Synapse'));
 
   //plugins
   eleventyConfig.addPlugin(eleventySass);
+  //eleventyConfig.addPlugin(tinyCSS);
+  eleventyConfig.addPlugin(tinyHTML);
+  eleventyConfig.addPlugin(tinysvg, {
+    baseUrl: 'src/_includes/components/svg/',
+  });
 
   // eleventyConfig.addPlugin(lazyImagesPlugin, {
   //   imgSelector: 'img:not(.unlazy)', // custom image selector
@@ -28,3 +63,23 @@ module.exports = function (eleventyConfig) {
     dir: { input: "src", output: "_site", data: "_data" },
   };
 };
+
+// module.exports = function (eleventyConfig) {
+//   if (process.env.ELEVENTY_ENV === "production") {
+//     eleventyConfig.addPlugin(img2picture, {
+//       // Should be same as Eleventy input folder set using `dir.input`.
+//       eleventyInputDir: ".",
+
+//       // Output folder for optimized images.
+//       imagesOutputDir: "_site",
+
+//       // URL prefix for images src URLS.
+//       // It should match with path suffix in `imagesOutputDir`.
+//       // Eg: imagesOutputDir with `_site/images` likely need urlPath as `/images/`
+//       urlPath: "",
+//     });
+//   } else {
+//     // During development, copy the files to Eleventy's `dir.output`
+//     eleventyConfig.addPassthroughCopy("./images");
+//   }
+// };

package.json

@@ -17,6 +17,13 @@
   },
   "dependencies": {
     "@11ty/eleventy-fetch": "^3.0.0",
+    "@11ty/eleventy-img": "^2.0.1",
+    "@sardine/eleventy-plugin-tinycss": "^2.0.0",
+    "@sardine/eleventy-plugin-tinyhtml": "^0.2.0",
+    "@sardine/eleventy-plugin-tinysvg": "^1.2.0",
+    "css-declaration-sorter": "^6.3.1",
+    "eleventy-favicon": "^1.1.3",
+    "eleventy-plugin-img2picture": "^3.0.0",
     "eleventy-sass": "^1.3.1",
     "esm": "^3.2.25",
     "gsap": "^3.10.4",

readme.md

@@ -8,7 +8,7 @@
 
 ### for now...
 ```
-npm start
+npm run start
 ```
 
 Run the following command on your local environment:

src/_data/menu.json

@@ -174,6 +174,15 @@
         "target": "",
         "order": 1,
         "class": ""
+      },
+      {
+        "name": "Github",
+        "slug": "github",
+        "url": "https://github.com/Start9Labs",
+        "target": "_blank",
+        "order": 1,
+        "class": "",
+        "icon": "open-source"
       }
     ]
   },

src/_includes/components/footer.njk

@@ -12,7 +12,7 @@
                 <ul>
                     {% for item in group.items|sort(false, false, 'order') %}
                     <li>
-                        <a {{'class=' + item.class + '' if item.class}} {{'target=' + item.target + '' if item.target}} href="{{item.url}}">{{item.name}}</a>
+                        <a {{'class=' + item.class + '' if item.class}} {{'target=' + item.target + '' if item.target}} href="{{item.url}}">{{item.name}}{% if item.icon %}{% include "components/svg/" + item.icon + ".svg" %}{% endif %}</a>
                     </li>
                     {% endfor %}
                 </ul>

src/_includes/components/landing/be-your-own copy.njk

@@ -25,7 +25,7 @@
                         <li class="service slide">
                             {# <a href="">{% include "components/svg/chevron-left.svg" %}</a> #}
                             <a class="service__content" href="https://marketplace.start9.com/{{service.slug}}" target="_blank">
-                                <img class="service__image" src="../assets/images/service-icons/{{ service.slug }}.png" alt="{{ service.name }} emabssyos service icon" title="{{ service.name }} service icon"/>
+                                <img class="service__image" src="assets/images/service-icons/{{ service.slug }}.png" alt="{{ service.name }} emabssyos service icon" title="{{ service.name }} service icon"/>
                                 <div class="service__name">{{ service.name }}</div>
                                 {# <div class="service__desc">{{ service.description }}</div> #}
                             </a>

src/_includes/components/landing/be-your-own.njk

@@ -23,7 +23,7 @@
                         {% if pseudoservice.slug in service.pseudoservices %}
                             <div class="service__content" >
                                 <a class="service__link" href="https://marketplace.start9.com/{{service.slug}}" target="_blank">
-                                    <img class="service__image service__image--{{ service.slug }}" src="../assets/images/service-icons/{{ service.slug }}.png" alt="{{ service.name }} embassyOS service icon" title="{{ service.name }} embassyOS service icon"
+                                    <img class="service__image service__image--{{ service.slug }}" src="assets/images/service-icons/{{ service.slug }}.png" alt="{{ service.name }} embassyOS service icon" title="{{ service.name }} embassyOS service icon"
                                     style="filter: drop-shadow(0px 0px 3rem {{ service.color }}C0)"/>
                                     <div class="service__info">
                                         <h3 class="service__name">{{ service.name }}</h3>

src/_includes/components/landing/bitcoin.njk

@@ -20,7 +20,7 @@
                 {% if (category == "bitcoin") or (category == "lightning") or (category == "plebnet-tools") %}
                     <img
                         class="service-icon service-icon--{{ service.slug }}"
-                        src="../assets/images/service-icons/{{ service.slug }}.png"
+                        src="assets/images/service-icons/{{ service.slug }}.png"
                         alt="{{ service.name }} embassyOS service icon"
                         alt="{{ service.name }} embassyOS service icon"/>
                 {% endif %}

src/_includes/components/landing/pitch.njk

@@ -5,5 +5,6 @@
     <p>
         We make a personal server called an <em>Embassy</em> that puts you in control of your data, your money, and your digital life.
     </p>
-    <a class="btn" href="{{ site.pitch.url }}">learn more</a>
+    {# <a class="btn" href="{{ site.pitch.url }}">learn more</a> #}
+    <iframe id="odysee-iframe" width="560" height="315" src="https://odysee.com/$/embed/@purism:8/introducing-pureboot-basic:d?r=B2sJWhwiPNQDy457RV1NjAYxDb6uiHGm" allowfullscreen></iframe>
 </section>

src/_includes/components/landing/powered-by.njk

@@ -9,13 +9,15 @@
         </p>
     </div>
     <div class="image-with-shadow">
-        {% include "components/svg/stack-new.svg" %}
+        {% include "components/svg/stack-new4.svg" %}
-        <div class="img-shadow">{% include "components/svg/stack-new.svg" %}</div>
+        <div class="img-shadow">{% include "components/svg/stack-new2.svg" %}</div>
     </div>
-    <a class="source-link" href="{{ site.poweredBy.url }}" target="_blank">
+
+    {# <a class="source-link" href="{{ site.poweredBy.url }}" target="_blank">
     <div class="image-with-shadow">
-        <img src="../assets/images/code1.png" alt="html tag icon" title="html tag icon"/>
+        <img src="assets/images/code1.png" alt="html tag icon" title="html tag icon"/>
-        <img class="img-shadow" src="../assets/images/code1.png" style="filter: blur(.8rem) brightness(0)" alt=""/>
+        <img class="img-shadow" src="assets/images/code1.png" style="filter: blur(.8rem) brightness(0)" alt=""/>
     </div>
-    check out the <span>source code</span></a>
+    check out the <span>source code</span></a> #}
+
 </section>

src/_includes/components/landing/products.njk

@@ -1,8 +1,8 @@
 <section id="products">
-        <div class="subsection">
+        <div class="subsection subsection--buy">
             <a class="product product--buy" href="{{ site.products.buyUrl }}">
-                <img src="../assets/images/buy-centered.png" alt="prefab embassy, represented in voxels" title="prefab embassy, represented in voxels">
+                <img src="assets/images/buy-centered.png" alt="prefab embassy, represented in voxels" title="prefab embassy, represented in voxels">
-                <img class="img-shadow" src="../assets/images/buy-centered.png" alt="">
+                <img class="img-shadow" src="assets/images/buy-centered.png" alt="">
                 <div class="heading">
                     <h1 class="product__header">buy</h1>
                     <span class="product__subheader">your embassy</span>
@@ -10,15 +10,15 @@
                 {% include "components/svg/buy-lines.svg" %}
             </a>
         </div>
-        <div class="subsection">
+        <div class="subsection subsection--diy">
             <a class="product product--diy" href="{{ site.products.diyUrl }}">
-                <img src="../assets/images/diy.png" alt="partially assembled embassy, represented in voxels" title="partially assembled embassy, represented in voxels">
+                {# <img src="assets/images/diy.png" alt="partially assembled embassy, represented in voxels" title="partially assembled embassy, represented in voxels">
-                <img class="img-shadow" src="../assets/images/diy.png" alt="">
+                <img class="img-shadow" src="assets/images/diy.png" alt=""> #}
                 <div class="heading">
-                    <h1 class="product__header">diy</h1>
+                    <span class="product__subheader"><strong>like to tinker?</strong></span>
-                    <span class="product__subheader">your embassy</span>
+                    <span class="product__subheader">DIY your embassy</span>
                 </div>
-                {% include "components/svg/diy-lines.svg" %}
+                {# {% include "components/svg/diy-lines.svg" %} #}
             </a>
         </div>
 </section>

src/_includes/components/landing/support.njk

@@ -15,8 +15,8 @@
     </div>
     <div class="col">
       <div class="image-with-shadow">
-        <img src="../assets/images/support1.png" alt="life preserver icon" title="life preserver icon">
+        <img src="assets/images/support1.png" alt="life preserver icon" title="life preserver icon">
-        <img class="img-shadow" src="../assets/images/support1.png" alt=""></div>
+        <img class="img-shadow" src="assets/images/support1.png" alt=""></div>
     </div>
   </div>
   <a class="btn" href="{{ site.support.url }}">meet the team</a>

src/_includes/components/menu.njk

@@ -1,6 +1,6 @@
 <section id="menu">
     <div class="menu-content">
-        {# <div class="header"><a href="/"><img src="../assets/images/start9_logo.png" alt=""/></a></div> #}
+        {# <div class="header"><a href="/"><img src="assets/images/start9_logo.png" alt=""/></a></div> #}
         <ul class="groups">
             {% for group in menu|selectattr("inFlyout")|sort(false, false, 'order') %}
             <li class="{{group.size}}">

src/_includes/components/svg/open-source.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-open-source" width="60" height="60" viewBox="0 0 24 24" stroke-width="1.5" stroke="#ffffff" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M12 3a9 9 0 0 1 3.618 17.243l-2.193 -5.602a3 3 0 1 0 -2.849 0l-2.193 5.603a9 9 0 0 1 3.617 -17.244z" />
+</svg>

src/_includes/layouts/base.njk

@@ -8,7 +8,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{{ title }}</title>
-    <link rel="stylesheet" href="../assets/styles/main.css">
+    <link rel="stylesheet" href="/assets/styles/main.css">
 </head>
 <body>
   

src/_includes/layouts/peripheral.njk

@@ -2,7 +2,7 @@
 layout: layouts/base.njk
 ---
 
-<link rel="stylesheet" href="../assets/styles/peripheral.css"/>
+<link rel="stylesheet" href="/assets/styles/peripheral.css"/>
 
 {{ content | safe }}
 

src/about.njk

@@ -6,8 +6,8 @@ layout: layouts/peripheral.njk
 {# <script src="{{ '/assets/js/getTeam.js' | url }}"></script> #}
 <section id="hero" class="hero--about">
     <div id="hero-image">
-        <img src="../assets/images/about-hero.png" alt="about page hero image: a robot emerging from the embasssy" title="about page hero image: a robot emerging from the embasssy"/>
+        <img src="assets/images/about-hero.png" alt="about page hero image: a robot emerging from the embasssy" title="about page hero image: a robot emerging from the embasssy"/>
-        <img class="img-shadow" src="../assets/images/about-hero.png" alt=""/>
+        <img class="img-shadow" src="assets/images/about-hero.png" alt=""/>
     </div>
     <div id="logo">
         <h1>
@@ -49,13 +49,13 @@ layout: layouts/peripheral.njk
     <h2>mission</h2>
     <div class="section__double-image">
         <div class="section__image section__image--left">
-            <img src="../assets/images/mission1.png" alt="mission section hero: a rocketship trail" title="mission section hero: a rocketship trail"/>
+            <img src="assets/images/mission1.png" alt="mission section hero: a rocketship trail" title="mission section hero: a rocketship trail"/>
-            <img class="img-shadow" src="../assets/images/mission1.png" alt=""/>
+            <img class="img-shadow" src="assets/images/mission1.png" alt=""/>
         </div>
         <h3>To eliminate the need for trusted third parties in the human/computer relationship.</h3>
         <div class="section__image section__image--right">
-            <img src="../assets/images/mission2.png" alt="mission section hero: a rocketship with trail" title="mission section hero: a rocketship with trail"/>
+            <img src="assets/images/mission2.png" alt="mission section hero: a rocketship with trail" title="mission section hero: a rocketship with trail"/>
-            <img class="img-shadow" src="../assets/images/mission2.png" alt=""/>
+            <img class="img-shadow" src="assets/images/mission2.png" alt=""/>
         </div>
     </div>
     {# <img src="" alt="" class="section__img section__img--bkg"/> #}
@@ -63,8 +63,8 @@ layout: layouts/peripheral.njk
 <section id="values">
     <h2>values</h2>
     <div class="section__image">
-        <img src="../assets/images/values.png" alt="values section hero: an eye with a slash through it" title="values section hero: an eye with a slash through it"/>
+        <img src="assets/images/values.png" alt="values section hero: an eye with a slash through it" title="values section hero: an eye with a slash through it"/>
-        <img class="img-shadow" src="../assets/images/values.png" alt=""/>
+        <img class="img-shadow" src="assets/images/values.png" alt=""/>
     </div>
     <p>
         <strong>This list of values is not comprehensive. It does not encapsulate all the values of all the members of Start9.
@@ -93,8 +93,8 @@ layout: layouts/peripheral.njk
 <section id="virtues">
     <h2>virtues</h2>
     <div class="section__image">
-        <img src="../assets/images/virtues.png" alt="virtues section hero: a sunrise between mountains" title="virtues section hero: a sunrise between mountains"/>
+        <img src="assets/images/virtues.png" alt="virtues section hero: a sunrise between mountains" title="virtues section hero: a sunrise between mountains"/>
-        <img class="img-shadow" src="../assets/images/virtues.png" alt=""/>
+        <img class="img-shadow" src="assets/images/virtues.png" alt=""/>
     </div>
     <p>
         <strong>Below are the virtues or qualities of character needed to achieve our values and accomplish our mission.</strong>
@@ -118,8 +118,8 @@ layout: layouts/peripheral.njk
 <section id="origin">
     <h2>origin story</h2>
     <div class="section__image">
-        <img src="../assets/images/origin.png" alt="origin section hero: pikachu" title="origin section hero: pikachu"/>
+        <img src="assets/images/origin.png" alt="origin section hero: pikachu" title="origin section hero: pikachu"/>
-        <img class="img-shadow" src="../assets/images/origin.png" alt=""/>
+        <img class="img-shadow" src="assets/images/origin.png" alt=""/>
     </div>
     <p>
         <strong>Pokemon is a game for Gameboy.</strong>
@@ -166,8 +166,8 @@ layout: layouts/peripheral.njk
 <section id="team">
     <h2>our team</h2>
     <div class="section__image">
-        <img src="../assets/images/team2.png" alt="team section hero: robots being printed" title="team section hero: robots being printed"/>
+        <img src="assets/images/team2.png" alt="team section hero: robots being printed" title="team section hero: robots being printed"/>
-        <img class="img-shadow" src="../assets/images/team2.png" alt=""/>
+        <img class="img-shadow" src="assets/images/team2.png" alt=""/>
     </div>
 
     <ul class="members">

src/assets/js/main.js

@@ -1,5 +1,6 @@
 var bodyRect = document.body.getBoundingClientRect();
 
+// TODO: pull these from data js
 const sections = [
   "pitch",
   "products",
@@ -45,8 +46,8 @@ const defaultActions = "play none none none"; //onEnter, onLeave, onEnterBack, a
 //   sections.forEach((slug) => {
 //     ScrollTrigger.create({
 //       trigger: "#" + slug,
-//       start: "top 75%",
+//       start: "top 25%",
-//       end: "bottom 75%",
+//       end: "bottom 25%",
 //       //markers: { startColor: "white", endColor: "white" },
 //       onEnter: () => {
 //         window.location.href = "#" + slug;
@@ -58,9 +59,6 @@ const defaultActions = "play none none none"; //onEnter, onLeave, onEnterBack, a
 //   });
 // }, 2000);
 
-
-
-
 //gsap.config({trialWarn: false});
 
 // create the smooth scroller FIRST!
@@ -74,8 +72,6 @@ const defaultActions = "play none none none"; //onEnter, onLeave, onEnterBack, a
 // backdrop-filter: blur(10px);
 //background-color: rgba(0,0,0,0.1);
 
-
-
 gsap.from("#hero-to-pitch path:first-child", {
   drawSVG: 0,
   ease: "none",
@@ -96,7 +92,6 @@ gsap.from("#pitch h1, #pitch p", {
   y: "5rem",
   scale: 0.9,
   opacity: 0,
-  //delay: 0.75,
   scrollTrigger: {
     trigger: "#pitch",
     start: "top 75%", // "triggerElement page"
@@ -104,11 +99,10 @@ gsap.from("#pitch h1, #pitch p", {
   },
 });
 
-gsap.from("#pitch a", {
+gsap.from("#pitch iframe", {
   duration: 0.5,
   opacity: 0,
   filter: "blur(10px)",
-  //delay: 0.75,
   scrollTrigger: {
     trigger: "#pitch",
     start: "top 75%", // "triggerElement page"
@@ -123,7 +117,6 @@ gsap.from("#products .subsection:nth-child(1)", {
   duration: 0.5,
   opacity: 0,
   outline: "1px solid rgba(255,255,255,1)",
-  //filter: "blur(10px)",
   scrollTrigger: {
     trigger: "#products",
     start: "top 75%", // "triggerElement page"
@@ -136,7 +129,6 @@ gsap.from("#products .subsection:nth-child(2)", {
   delay: 0.25,
   opacity: 0,
   outline: "1px solid rgba(255,255,255,1)",
-  //filter: "blur(10px)",
   scrollTrigger: {
     trigger: "#products",
     start: "top 75%", // "triggerElement page"
@@ -144,26 +136,41 @@ gsap.from("#products .subsection:nth-child(2)", {
   },
 });
 
-const buyAnchor = document.querySelector('.product--buy')
+const buyAnchor = document.querySelector(".product--buy");
 
 const buyTL = gsap
   .timeline({ paused: true })
-  .from('#buy-lines path:first-child', {drawSVG:0, ease:'none', duration: 0.75}, 0)
+  .from(
-  .to('.product--buy img:first-child', {opacity:.4, ease:'none', duration: 0.25}, 0);
+    "#buy-lines path:first-child",
+    { drawSVG: 0, ease: "none", duration: 0.75 },
+    0
+  )
+  .to(
+    ".product--buy img:first-child",
+    { opacity: 0.4, ease: "none", duration: 0.25 },
+    0
+  );
 
-buyAnchor.onmouseenter = () => buyTL.play()
+buyAnchor.onmouseenter = () => buyTL.play();
-buyAnchor.onmouseleave = () => buyTL.reverse()
+buyAnchor.onmouseleave = () => buyTL.reverse();
 
-const diyAnchor = document.querySelector('.product--diy')
+const diyAnchor = document.querySelector(".product--diy");
 
 const diyTL = gsap
   .timeline({ paused: true })
-  .from('#diy-lines path:first-child', {drawSVG:0, ease:'none', duration: 0.75}, 0)
+  .from(
-  .to('.product--diy img:first-child', {opacity:.4, ease:'none', duration: 0.25}, 0);
+    "#diy-lines path:first-child",
-
+    { drawSVG: 0, ease: "none", duration: 0.75 },
-diyAnchor.onmouseenter = () => diyTL.play()
+    0
-diyAnchor.onmouseleave = () => diyTL.reverse()
+  )
+  .to(
+    ".product--diy img:first-child",
+    { opacity: 0.4, ease: "none", duration: 0.25 },
+    0
+  );
 
+diyAnchor.onmouseenter = () => diyTL.play();
+diyAnchor.onmouseleave = () => diyTL.reverse();
 
 gsap.from("#products-to-info path:first-child", {
   drawSVG: 0,
@@ -203,13 +210,8 @@ gsap.from("#products-to-info path:nth-child(3)", {
 
 gsap.from("#infographics .subsection:nth-child(1)", {
   duration: 0.5,
-  //y: "5rem",
-  //scale: 0.8,
-  //rotateX: 15,
   opacity: 0,
-  //delay: 0.75,
   outline: "1px solid rgba(255,255,255,1)",
-  //filter: "blur(10px)",
   scrollTrigger: {
     trigger: "#infographics .subsection:nth-child(1)",
     start: "top 75%", // "triggerElement page"
@@ -219,13 +221,8 @@ gsap.from("#infographics .subsection:nth-child(1)", {
 
 gsap.from("#infographics .subsection:nth-child(2)", {
   duration: 0.5,
-  //y: "5rem",
-  //scale: 0.8,
-  //rotateX: 15,
   opacity: 0,
-  //delay: 0.75,
   outline: "1px solid rgba(255,255,255,1)",
-  //filter: "blur(10px)",
   scrollTrigger: {
     trigger: "#infographics .subsection:nth-child(2)",
     start: "top 75%", // "triggerElement page"
@@ -239,7 +236,6 @@ gsap.from("#infographics .subsection:nth-child(2)", {
 gsap.from("#bitcoin .subsection:nth-of-type(1)", {
   duration: 1,
   opacity: 0,
-  //outline: "1px solid rgba(255,255,255,1)",
   filter: "blur(10px)",
   y: "5rem",
   scrollTrigger: {
@@ -252,7 +248,6 @@ gsap.from("#bitcoin .subsection:nth-of-type(1)", {
 gsap.from("#bitcoin .subsection:nth-of-type(2)", {
   duration: 1,
   opacity: 0,
-  //outline: "1px solid rgba(255,255,255,1)",
   filter: "blur(10px)",
   y: "-5rem",
   scrollTrigger: {
@@ -272,13 +267,29 @@ function getRandomNumber(min, max) {
   return Math.random() * (max - min) + min;
 }
 
-positionServiceIcons();
+//positionServiceIcons();
+
+const timelineServiceIcons = gsap.timeline({
+  onComplete() {
+    //deleteSplit();
+    //scroll.update();
+    //resolve();
+    console.log("complete");
+  },
+});
 
 function positionServiceIcons() {
-  bitcoinServices.forEach((service) => {
+  console.log("positionServiceIcons");
-    const serviceElement = document.querySelector(".service-icon--" + service);
+
+  bitcoinServices.forEach((service, i) => {
+    var serviceClass = ".service-icon--" + service;
+
+    gsap.set(serviceClass, {});
+    gsap.to(serviceClass, {});
+
+    const serviceElement = document.querySelector(serviceClass);
     const bitcoinSectionElement = document.querySelector("#bitcoin");
-    const upOrDown = getRandomInt(0, 1);
+    const upOrDown = i % 2;
     const bitcoinHeight = bitcoinSectionElement.clientHeight;
 
     serviceElement
@@ -286,14 +297,15 @@ function positionServiceIcons() {
       : "";
 
     if (upOrDown) {
-      gsap.set(".service-icon--" + service, {
+      gsap.set(serviceClass, {
         y: getRandomInt(0, bitcoinHeight / 2) + "px",
       });
-      gsap.to(".service-icon--" + service, {
+      gsap.to(serviceClass, {
         y: getRandomInt(bitcoinHeight / 2, bitcoinHeight) + "px",
         //x: getRandomInt(0, 100) + "vw",
         ease: "in",
         delay: getRandomNumber(0, 1),
+        overwrite: true,
         scrollTrigger: {
           trigger: "#bitcoin",
           scrub: true,
@@ -303,32 +315,47 @@ function positionServiceIcons() {
         },
       });
     } else {
-      gsap.set(".service-icon--" + service, {
+      gsap.set(serviceClass, {
         y: getRandomInt(bitcoinHeight / 2, bitcoinHeight) + "px",
       });
-      gsap.to(".service-icon--" + service, {
+      gsap.to(serviceClass, {
         y: getRandomInt(0, bitcoinHeight / 2) + "px",
         //x: getRandomInt(0, 100) + "vw",
         ease: "in",
         delay: getRandomNumber(0, 1),
+        overwrite: true,
         scrollTrigger: {
           trigger: "#bitcoin",
           scrub: true,
           start: "top bottom",
           end: "90% center",
+          //markers: { startColor: "lime", endColor: "blue" },
         },
       });
     }
   });
 }
 
+const tickerTL = gsap.timeline();
+
 function onResizeComplete() {
   positionServiceIcons();
+  initializeSizes();
+  //gsap.delayedCall(next, crossfade);
+  //tickerTL.resizePlay ? tickerTL.resizePlay.restart(true) : "";
 }
+
 var resizeTimeout = setTimeout(onResizeComplete, 400);
 window.onresize = function () {
+  // if (tickerTL.isActive()) tickerTL.pause();
+  // if (!tickerTL.resizePlay)
+  //   tickerTL.resizePlay = gsap.delayedCall(0.2, function () {
+  //     tickerTL.play();
+  //   });
+
   clearTimeout(resizeTimeout);
   resizeTimeout = setTimeout(onResizeComplete, 400);
+  console.log("onresize");
 };
 
 gsap.from("#bitcoin-to-be path:first-child", {
@@ -348,9 +375,7 @@ gsap.from("#bitcoin-to-be path:first-child", {
 gsap.from("#be-your-own h1", {
   duration: 0.5,
   y: "5rem",
-  //scale: 0.8,
   opacity: 0,
-  //delay: 0.75,
   scrollTrigger: {
     trigger: "#be-your-own",
     start: "top 75%", // "triggerElement page"
@@ -363,7 +388,6 @@ gsap.from("#be-your-own p", {
   y: "5rem",
   filter: "blur(10px)",
   opacity: 0,
-  //delay: 0.75,
   scrollTrigger: {
     trigger: "#be-your-own h1",
     start: "top 75%", // "triggerElement page"
@@ -375,7 +399,6 @@ gsap.from("#be-your-own #ticker", {
   duration: 1.5,
   filter: "blur(20px)",
   opacity: 0,
-  //delay: 0.75,
   scrollTrigger: {
     trigger: "#be-your-own #ticker",
     start: "top 75%", // "triggerElement page"
@@ -383,14 +406,17 @@ gsap.from("#be-your-own #ticker", {
   },
 });
 
-let pseudoserviceArray, next, itemHeight, listHeight, windowHeight, kerplunk, kerplunk2;
+// TICKER
 
-pseudoserviceArray = gsap.utils.toArray(".pseudoservice");
+let pseudoserviceArray = gsap.utils.toArray(".pseudoservice"),
-
+  next = 4,
-next = 4;
+  itemHeight,
+  listHeight,
+  windowHeight,
+  kerplunk,
+  kerplunk2;
 
 function initializeSizes() {
-
   itemHeight = document
     .querySelector(".pseudoservice")
     .getBoundingClientRect().height;
@@ -400,11 +426,8 @@ function initializeSizes() {
     .getBoundingClientRect().height;
 
   windowHeight = document.getElementById("ticker__window").clientHeight;
-
 }
 
-initializeSizes();
-
 kerplunk = CustomEase.create(
   "custom",
   "M0,0 C0.126,0.382 0.066,0.863 0.198,1.036 0.25,1.104 0.264,0.982 0.326,0.982 0.344,0.982 0.489,0.998 0.516,1 0.65,1.007 0.863,1 1,1 "
@@ -416,26 +439,24 @@ kerplunk2 = CustomEase.create(
 );
 
 function crossfade() {
-  var action = gsap
+  var action = tickerTL
-    .timeline()
     .to(pseudoserviceArray, {
       id: "thunk",
       y: "-=" + itemHeight,
       duration: 1,
       ease: kerplunk2,
+      overwrite: true
     })
     .to(pseudoserviceArray[0], { y: "+=" + listHeight, duration: 0 }); // the first to the end
 
   pseudoserviceArray.push(pseudoserviceArray.shift()); // the first (shift) to the end (push) from the array
-  //console.log(pseudoserviceArray);
-  //console.log(itemHeight);
 
   // start endless run
   gsap.delayedCall(next, crossfade);
 
   var thisPseudoservice = pseudoserviceArray[2].innerHTML,
     thisElement = document.querySelector(
-      ".service-container--" + thisPseudoservice.toLowerCase().replace(' ','-')
+      ".service-container--" + thisPseudoservice.toLowerCase().replace(" ", "-")
     );
 
   var slidesContainerArray = document.querySelectorAll(".service-container");
@@ -448,109 +469,8 @@ function crossfade() {
   }
 }
 
-// start the crossfade after next = 3 sec
 gsap.delayedCall(next, crossfade);
 
-// document.querySelector(".services").addEventListener("mouseenter", pauseThunk);
-// // TODO: pause not working - Id not found
-// function pauseThunk() {
-//   console.log("asfd");
-//   gsap.getById("thunk").kill();
-// }
-
-// CAROUSEL
-
-// var slideDelay = 1.5;
-// var slideDuration = 0.3;
-// var wrap = true;
-
-// var slides = document.querySelectorAll(".slide");
-// var prevButton = document.querySelector("#prevButton");
-// var nextButton = document.querySelector("#nextButton");
-// var progressWrap = gsap.utils.wrap(0, 1);
-
-// var numSlides = slides.length;
-
-// gsap.set(slides, {
-//   xPercent: (i) => i * 100,
-// });
-
-// var wrapX = gsap.utils.wrap(-100, (numSlides - 1) * 100);
-
-// var animation = gsap.to(slides, {
-//   xPercent: "+=" + numSlides * 100,
-//   duration: 1,
-//   ease: "none",
-//   paused: true,
-//   repeat: -1,
-//   modifiers: {
-//     xPercent: wrapX,
-//   },
-// });
-
-// var proxy = document.createElement("div");
-// var slideAnimation = gsap.to({}, {});
-// var slideWidth = 0;
-// var wrapWidth = 0;
-
-resize();
-
-window.addEventListener("resize", resize);
-
-// prevButton.addEventListener("click", function () {
-//   animateSlides(1);
-// });
-
-// nextButton.addEventListener("click", function () {
-//   animateSlides(-1);
-// });
-
-// function updateDraggable() {
-//   slideAnimation.kill();
-//   this.update();
-// }
-
-// function animateSlides(direction) {
-//   slideAnimation.kill();
-//   var x = snapX(gsap.getProperty(proxy, "x") + direction * slideWidth);
-
-//   slideAnimation = gsap.to(proxy, {
-//     x: x,
-//     duration: slideDuration,
-//     onUpdate: updateProgress,
-//   });
-// }
-
-// function updateProgress() {
-//   animation.progress(progressWrap(gsap.getProperty(proxy, "x") / wrapWidth));
-// }
-
-// function snapX(value) {
-//   let snapped = gsap.utils.snap(slideWidth, value);
-//   return wrap
-//     ? snapped
-//     : gsap.utils.clamp(-slideWidth * (numSlides - 1), 0, snapped);
-// }
-
-function resize() {
-  initializeSizes();
-  
-  // var norm = gsap.getProperty(proxy, "x") / wrapWidth || 0;
-
-  // slideWidth = slides[0].offsetWidth;
-  // wrapWidth = slideWidth * numSlides;
-
-  // wrap; // || draggable.applyBounds({minX: -slideWidth * (numSlides - 1), maxX: 0});
-
-  // gsap.set(proxy, {
-  //   x: norm * wrapWidth,
-  // });
-
-  // animateSlides(0);
-  // slideAnimation.progress(1);
-
-}
-
 gsap.from("#be-to-powered path", {
   drawSVG: 0,
   ease: "none",
@@ -568,9 +488,7 @@ gsap.from("#be-to-powered path", {
 gsap.from("#powered-by h1", {
   duration: 0.5,
   y: "-5rem",
-  //scale: 0.8,
   opacity: 0,
-  //delay: 0.75,
   scrollTrigger: {
     trigger: "#powered-by h1",
     start: "top 75%", // "triggerElement page"
@@ -580,10 +498,8 @@ gsap.from("#powered-by h1", {
 
 gsap.from("#powered-by p", {
   duration: 0.5,
-  //y: "-10rem",
   filter: "blur(10px)",
   opacity: 0,
-  //delay: 0.75,
   scrollTrigger: {
     trigger: "#powered-by h1",
     start: "top 75%", // "triggerElement page"
@@ -593,10 +509,8 @@ gsap.from("#powered-by p", {
 
 gsap.from("#powered-by svg", {
   duration: 1,
-  //y: "-10rem",
   filter: "blur(20px)",
   opacity: 0,
-  //delay: 0.75,
   scrollTrigger: {
     trigger: "#powered-by svg",
     start: "top 75%", // "triggerElement page"
@@ -620,13 +534,8 @@ gsap.from("#powered-to-support path", {
 
 gsap.from("#support", {
   duration: 0.5,
-  //y: "5rem",
-  //scale: 0.8,
-  //rotateX: 15,
   opacity: 0,
-  //delay: 0.75,
   outline: "1px solid rgba(255,255,255,1)",
-  //filter: "blur(10px)",
   scrollTrigger: {
     trigger: "#support",
     start: "top 75%", // "triggerElement page"
@@ -650,12 +559,8 @@ gsap.from("#support-to-dev path", {
 
 gsap.from("#dev h1", {
   duration: 0.5,
-  //y: "5rem",
   scale: 0.8,
-  //rotateX: 15,
   opacity: 0,
-  //delay: 0.75,
-  //outline: "1px solid rgba(255,255,255,1)",
   filter: "blur(10px)",
   scrollTrigger: {
     trigger: "#dev",
@@ -667,11 +572,9 @@ gsap.from("#dev h1", {
 gsap.from("#dev .col:nth-child(1)", {
   duration: 0.5,
   x: "5rem",
-  //scale: 0.8,
-  //rotateX: 15,
   opacity: 0,
   delay: 0.5,
-  //outline: "1px solid rgba(255,255,255,1)",
+  outline: "1px solid rgba(255,255,255,1)",
   filter: "blur(10px)",
   scrollTrigger: {
     trigger: "#dev",
@@ -684,10 +587,8 @@ gsap.from("#dev .col:nth-child(2)", {
   duration: 0.5,
   x: "-5rem",
   scale: 0.5,
-  //rotateX: 15,
   opacity: 0,
   delay: 0.75,
-  //outline: "1px solid rgba(255,255,255,1)",
   filter: "blur(10px)",
   scrollTrigger: {
     trigger: "#dev",
@@ -712,11 +613,8 @@ gsap.from("#dev-to-contact path", {
 
 gsap.from("#community", {
   duration: 0.5,
-  //y: "5rem",
   scale: 0.8,
-  //rotateX: 15,
   opacity: 0,
-  //delay: 0.75,
   //outline: "1px solid rgba(255,255,255,1)",
   filter: "blur(10px)",
   scrollTrigger: {
@@ -725,379 +623,3 @@ gsap.from("#community", {
     toggleActions: defaultActions,
   },
 });
-
-//Librarys
-
-/*
-var imagesLoaded = require('imagesloaded');
-import barba from '@barba/core';
-import LocomotiveScroll from 'locomotive-scroll';
-import { gsap } from "gsap";
-import { Draggable } from "gsap/Draggable";
-import { ScrollToPlugin } from "gsap/ScrollToPlugin";
-import { ScrollTrigger } from "gsap/ScrollTrigger";
-import { InertiaPlugin } from "gsap/InertiaPlugin";
-import { SplitText } from "gsap/SplitText";
-
-gsap.registerPlugin(Draggable, ScrollToPlugin, ScrollTrigger, InertiaPlugin, SplitText);
-
-
-
-
-// Locomotive Scroll
-const scroll = new LocomotiveScroll({
-    el: document.querySelector('[data-scroll-container]'),
-    smooth: true,
-    tablet: {
-        breakpoint: 961
-    }
-});
-
-
-
-
-// Use Locomotive Scroll with ScrollTrigger
-scroll.on("scroll", ScrollTrigger.update);
-
-ScrollTrigger.scrollerProxy(".locomotive", {
-  scrollTop(value) {
-    return arguments.length ? scroll.scrollTo(value, 0, 0) : scroll.scroll.instance.scroll.y;
-  }, 
-  getBoundingClientRect() {
-    return {top: 0, left: 0, width: window.innerWidth, height: window.innerHeight};
-  },
-  pinType: document.querySelector(".locomotive").style.transform ? "transform" : "fixed"
-});
-
-
-
-
-// Mobile Menu Toggle
-const menuIcon = document.querySelector('.navBtnContainer');
-const mobileNav = document.querySelector('.mobileNav');
-
-const menuToggle = function () {
-    menuIcon.addEventListener(`click`, function() {
-        if(this.classList.contains(`active`)) {
-            this.classList.remove(`active`);
-            mobileNav.classList.remove(`active`);
-        } else {
-            this.classList.add(`active`);
-            mobileNav.classList.add(`active`);
-        }
-    });
-}
-
-menuToggle();
-
-
-
-
-// Custom cursor
-const cursorAnimate = function () {
-    const cursors = document.querySelector('.cursors')
-    const cursor = cursors.querySelector('.cursor')
-    const cursorLinks = document.querySelectorAll('a, video, .resumeItem')
-    let cursorX = 0
-    let cursorY = 0
-    let aimX = 0
-    let aimY = 0
-    let speed = 0.2
-
-    const cursorEase = function () {
-        cursorX += (aimX - cursorX) * speed
-        cursorY += (aimY - cursorY) * speed
-
-        cursor.style.left = cursorX + "px"
-        cursor.style.top = cursorY + "px"
-
-        requestAnimationFrame(cursorEase)
-    }
-
-    cursorEase()
-
-    document.addEventListener('mousemove', function (event) {
-        aimX = event.pageX
-        aimY = event.pageY
-    })
-
-    cursorLinks.forEach(cursorLink => {
-        cursorLink.addEventListener('mouseover', function () {
-            cursor.classList.add(`hover`)
-        })
-        cursorLink.addEventListener('mouseout', function () {
-            cursor.classList.remove(`hover`)
-        })
-    })
-}
-
-
-
-
-// Scroll Trigger Hero Image
-const heroImgInnerAnimate = function () {
-    const heroImgInner = document.querySelectorAll('.heroImgInner');
-    heroImgInner.forEach(function (heroImgInner){
-        gsap.to(heroImgInner, {
-            scrollTrigger: {
-                trigger: heroImgInner,
-                scroller: ".locomotive",
-                start: "top bottom",
-                end: "bottom top",
-                scrub: 1,
-            },
-            y: "-43.75%",
-            ease: "none"
-        })
-    })
-}
-
-
-
-
-// Footer Marquee
-const footerMarqueeAnimate = function () {
-    const footerMarquee = document.querySelector('.footerMarqueeItem');
-    const footerMarqueeTrack = document.querySelector('.footerMarqueeTrack');
-    const footerMarqueeItemWidth = footerMarquee.offsetWidth;
-    //console.log(footerMarqueeItemWidth);
-    const footerMarqueeTL = gsap.timeline({repeat:-1, defaults:{ease:"none"}});
-    footerMarqueeTL.to(footerMarqueeTrack,{x:-footerMarqueeItemWidth, duration:20});  
-}
-
-
-
-
-// Scroll Trigger Marquee
-const marqueeAnimate = function () {
-    const marquee = document.querySelectorAll('.marqueeTrack');
-    marquee.forEach(function (marquee){
-        gsap.to(marquee, {
-            scrollTrigger: {
-                trigger: marquee,
-                scroller: ".locomotive",
-                start: "top bottom",
-                end: "bottom top",
-                scrub: 1,
-            },
-            x: "-33.33%",
-            ease: "none"
-        })
-    })
-}
-
-
-
-
-// Scroll Trigger Spin
-const spinTextAnimate = function () {
-    const spinText = document.querySelectorAll('.spinText');
-    spinText.forEach(function (spinText){
-        gsap.to(spinText, {
-            scrollTrigger: {
-                trigger: spinText,
-                scroller: ".locomotive",
-                start: "top bottom",
-                end: "bottom top",
-                scrub: 1,
-            },
-            rotation:360,
-            ease: "none"
-        })
-    })
-}
-
-
-
-
-// Work Experience Dropdown
-const experienceToggle = function () {
-    const resumeItems = document.querySelectorAll('.resumeItem');
-    resumeItems.forEach(function (item) {
-        let jobTitleHeight = item.offsetHeight;
-        item.addEventListener('click', function () {
-            let jobDescHeight = this.children[4].offsetHeight;
-            if(this.classList.contains('active')) {
-                this.classList.remove('active')
-                this.style.height = jobTitleHeight + "px"
-            } else {
-                this.classList.add('active')
-                this.style.height = jobTitleHeight + jobDescHeight + "px"
-            }
-            setTimeout(function () { scroll.update(); }, 1000)
-        })
-    });
-}
-experienceToggle();
-
-
-
-
-// Update scroll height after Images Load
-imagesLoaded( 'body', function() {
-    scroll.update();
-    cursorAnimate();
-    footerMarqueeAnimate();
-    marqueeAnimate();
-    spinTextAnimate();
-    ScrollTrigger.matchMedia({
-        "(min-width: 960px)": function() {
-            heroImgInnerAnimate();
-        }
-    })
-});
-
-
-
-
-
-
-
-
-// Barba
-
-const transitionPanel1 = document.querySelector('#transitionPanel1');
-const loadPanel = document.querySelector('.loadPanel');
-
-barba.hooks.after(() => {
-    marqueeAnimate();
-    spinTextAnimate();
-    experienceToggle();
-    cursorAnimate();
-    ScrollTrigger.matchMedia({
-        "(min-width: 960px)": function() {
-            heroImgInnerAnimate();
-        }
-    })
-    scroll.update();
-});
-
-
-barba.init({
-
-    transitions: [{
-        name: 'default',
-
-
-
-        once({ next }) {
-
-            return new Promise(resolve => {
-
-                const timeline = gsap.timeline({
-                    onComplete() {
-                        deleteSplit();
-                        scroll.update();
-                        resolve();
-                    }
-                });
-
-                const splitHeadline = new SplitText('h1', {type:'words'})
-                function deleteSplit() {
-                    splitHeadline.revert()
-                }
-
-
-                timeline
-                    .set('.load-content', {opacity: 0})
-                    .set('main', {y: 200, opacity: 0})
-                    .set('header', {y: -100, opacity: 0})
-                    .set(splitHeadline.words, {opacity: 0, y: 48})
-                    .to('.load-content', {duration: 1, opacity: 1}, 0.5)
-                    .to('.loadPanel', {duration: 1, height: 0, ease: "power4.inOut"}, '+=1')
-                    .to('.load-content', {duration: 1, opacity: 0}, '-=1')
-                    .to('header', {duration: 1, y: 0, opacity: 1, ease: "power4.out"}, '-=0.5')
-                    .to('main', {duration: 1, y: 0, opacity: 1, ease: "power4.out"}, '-=1')
-                    .to(splitHeadline.words, {duration: 1, y: 0, opacity: 1, ease: "power3.out", stagger: 0.04}, '-=1')
-                    .set('.loadPanel', {opacity: 0, display:'none'})
-
-            });
-            
-        },
-
-
-
-        leave({ current, next, trigger }) {
-
-            return new Promise(resolve => {
-
-                const timeline = gsap.timeline({
-                    onComplete() {
-                        resolve();
-                    }
-                });
-
-                transitionPanel1.classList.add(`active`);
-                mobileNav.classList.remove(`active`);
-                menuIcon.classList.remove(`active`);
-
-                timeline
-                    .to('footer', {duration: 0.5, opacity: 0}, 0)
-                    .to(current.container, {duration: 0.5, opacity: 0}, 0)
-                    .to(current.container, {display: 'none'})
-
-            });
-
-        },
-
-
-
-        beforeEnter({ current, next, trigger }) {
-
-            scroll.scrollTo(0, 0);
-
-        },
-
-
-
-        enter({ current, next, trigger }) {
-
-            imagesLoaded( 'body', function() {
-                scroll.update();
-            });
-
-            return new Promise(resolve => {
-                
-                const timeline = gsap.timeline({
-                    onComplete() {
-                        transitionPanel1.classList.remove(`active`);
-                        resolve();
-                    }
-                });
-
-                timeline
-                    .set(current.container, {opacity: 0})
-                    .set(next.container, {opacity: 0})
-
-            });
-        },
-
-
-
-        afterEnter({ current, next, trigger }) {
-
-            return new Promise(resolve => {
-                
-                const timeline = gsap.timeline({
-                    onComplete() {
-                        resolve();
-                    }
-                });
-
-                timeline
-                    .to(next.container, {duration: 1, opacity: 1}, 0.5)
-                    .to('footer', {duration: 1, opacity: 1}, 0.5)
-
-            });
-        },
-
-
-        
-    }],
-
-    views: [{}],
-
-    //debug: true
-});
-
-*/

src/assets/js/peripheral.js

@@ -0,0 +1,30 @@
+const defaultActions = "play none none none";
+
+gsap.from("section#hero+section", {
+    duration: 0.5,
+    y: "5rem",
+    opacity: 0,
+    delay: 1,
+    filter: "blur(10px)",
+    scrollTrigger: {
+      trigger: "section#hero+section",
+      start: "top 75%", // "triggerElement page"
+      toggleActions: defaultActions,
+    },
+  });
+
+const sections = document.querySelectorAll("section:not(#hero):not(#blurb)");
+
+sections.forEach(function (section) {
+  gsap.from(section, {
+    duration: 0.5,
+    y: "5rem",
+    opacity: 0,
+    filter: "blur(10px)",
+    scrollTrigger: {
+      trigger: section,
+      start: "top 75%", // "triggerElement page"
+      toggleActions: defaultActions,
+    },
+  });
+});

src/assets/styles/be-your-own copy.scss

@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 6rem;
+  gap: 3rem;
   //margin: 0 0 6rem 0;
   padding: 0 6rem 0 6rem;
   box-sizing: border-box;

src/assets/styles/be-your-own.scss

@@ -20,7 +20,7 @@
     margin: 0 0 0 1rem !important;
     &::before{
       top: 25% !important;
-      left: -4rem !important;
+      left: calc(-4rem + 2px) !important;
       align-self: flex-start !important;
       justify-content: center !important;
       border-top: 2rem transparent solid !important;
@@ -40,11 +40,12 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 6rem;
+  gap: 3rem;
   //margin: 0 0 6rem 0;
   padding: 0 6rem 0 6rem;
   box-sizing: border-box;
   width: 100%;
+  //transform: translate(0px,0px);
 
   //--size: 3rem;
   --p-t: calc(0.2 * var(--size));
@@ -170,7 +171,7 @@
             position: relative;
             display: flex;
             flex-direction: column;
-            box-shadow: 0 3rem 2rem 0rem rgb(0 0 0 / 40%);
+            box-shadow: var(--sh-2);
             
             &::before{
               position: absolute;

src/assets/styles/bitcoin.scss

@@ -103,7 +103,7 @@ section#bitcoin {
     z-index: -2;
     backdrop-filter: blur(48px);
     mix-blend-mode: soft-light;
-    box-shadow: 0 37px 50px rgb(0 0 0 / 20%);
+    box-shadow: 0 2rem 3rem var(--c-shadow-3);
 
     &.service-icon--balanceofsatoshis {
       width: 5rem;

src/assets/styles/dev.scss

@@ -58,7 +58,7 @@
 }
   img {
     width: 20rem;
-    box-shadow: 0 3rem 2rem 0rem rgb(0 0 0 / 40%);
+    box-shadow: var(--sh-2);
     border-radius: 1.3rem;
   }
 }

src/assets/styles/footer.scss

@@ -55,10 +55,15 @@ footer{
         letter-spacing: .1em;
         color: var(--c-text-primary);
         position: relative;
-        display: flex;
+        display: inline-flex;
-        flex-direction: column;
+        flex-wrap: nowrap;
-        display: inline-block;
+        align-items: center;
+        gap: 0.3em;
         white-space: nowrap;
+
+        path{
+            transition: var(--t-simple);
+        }
         // &::after{
         //     content: '';
         //     position: absolute;
@@ -77,6 +82,9 @@ footer{
             //     left: -5%;
             //     opacity: 1;
             // }
+            path {
+                stroke: var(--c-text-accent);
+            }
         }
         &.highlight{
             color: var(--c-text-bright);
@@ -93,6 +101,10 @@ footer{
                 position: absolute;
             }
         }
+        svg{
+            height: 1em;
+            width: 1em;
+        }
 
     }
 }

src/assets/styles/infographics.scss

@@ -13,6 +13,7 @@ section#infographics{
     outline: 1px solid rgba(255,255,255,0);
     svg{
       width: min(110%, 1000px);
+      //width: clamp(500px, 50vw, 1000px);
     }
     &:first-child{
       &::before {

src/assets/styles/landing.scss

@@ -18,7 +18,7 @@
 
 body, .ScrollSmoother-wrapper {
   margin: 0;
-  background: linear-gradient(0deg, #333333, #333333),
+  background: linear-gradient(0deg, var(--c-bkg), var(--c-bkg)),
     url("../../assets/images/bkg.jpg");
   background-blend-mode: color, normal;
   background-size: cover;
@@ -62,7 +62,7 @@ section {
 }
 
 [class*="section--"]{
-  box-shadow: rgb(0 0 0 / 50%) 0 3rem 3rem;
+  box-shadow: var(--c-shadow-1) 0 3rem 3rem;
 }
 
 .section--inverse{
@@ -96,7 +96,7 @@ section {
 .line svg{
   width: calc(100vw - (2 * 6rem));
   max-width: 50vw;
-  max-height: 60vh;
+  max-height: 50vh;
 }
 
 nav {
@@ -104,6 +104,8 @@ nav {
 }
 
 #logo {
+  transform: translateY(-5rem);
+  opacity: 0;
   display: inline-flex;
   flex-direction: column;
   align-items: center;
@@ -208,7 +210,7 @@ a.btn {
   &:hover{
     transform: rotateX(30deg);
     &::before {
-      box-shadow: inset 0 1rem 1rem -0.5rem rgb(0 0 0 / 50%);
+      box-shadow: inset 0 1rem 1rem -0.5rem var(--c-shadow-1);
     }
   }
 
@@ -235,7 +237,7 @@ a.btn {
     height: 1rem;
     z-index: -1;
     transform: rotateX(90deg) translateY(2px);
-    box-shadow: inset 0 0.3rem 0.5rem 0rem rgb(0 0 0 / 50%);
+    box-shadow: inset 0 0.3rem 0.5rem 0rem var(--c-shadow-1);
   }
 
   &.btn--subtle{
@@ -294,6 +296,9 @@ a.btn {
   }
 }
 
+#bitcoin-to-be, #be-to-powered, #powered-to-support, #support-to-dev {
+  transform: scaleX(-1);
+}
 
 
 $pastels: (red, pink) (blue, purple) (green, yellow)

src/assets/styles/main.scss

@@ -1,7 +1,7 @@
-@use 'normalize';
+@use "normalize";
-@use 'fonts';
+@use "fonts";
-@use 'menu';
+@use "menu";
-@use 'footer';
+@use "footer";
 /* @use 'post'; */
 
 :root {
@@ -12,14 +12,14 @@
   --c-text-primary: var(--c-1);
   --c-line-primary: var(--c-1);
 
-    --c-2: #EF4B63;
+  --c-2: #ef4b63;
   --c-text-accent: var(--c-2);
   --c-line-accent: var(--c-2);
 
   --c-3: #333;
   --c-bkg: var(--c-3);
 
-    --c-4: #BA1930;
+  --c-4: #ba1930;
   --c-3d-shadow: var(--c-4);
 
   --c-5: rgba(255, 255, 255, 1);
@@ -27,21 +27,28 @@
 
   --c-6: rgb(194, 194, 194);
 
-    --c-spacer: rgba(255,255,255,.05);
+  --c-shadow-1: rgb(0 0 0 / 50%);
+  --c-shadow-2: rgb(0 0 0 / 40%);
+  --c-shadow-3: rgb(0 0 0 / 20%);
+
+  --c-spacer: rgba(255, 255, 255, 0.05);
+
+  --sh-2: 0 3rem 2rem 0rem var(--c-shadow-2);
+
   --s-primary: 0.5;
   --b-primary: 1px solid var(--c-line-primary);
   --b-secondary: 1px dashed var(--c-line-primary);
 
   --f-hero: "Basis Grotesque Pro";
   --f-bold: "Tusker Grotesk 5500";
-    --f-accent: 'Montserrat';
+  --f-accent: "Montserrat";
-    --f-accent2: 'Arkibal Mono';
+  --f-accent2: "Arkibal Mono";
-    --f-accent-bold: 'Montserrat';
+  --f-accent-bold: "Montserrat";
-    --f-accent2-bold: 'Arkibal Mono Rg';
+  --f-accent2-bold: "Arkibal Mono Rg";
-    --f-copy: 'Liberation Mono';
+  --f-copy: "Liberation Mono";
-    --f-button: 'Basis Grotesque Mono Pro';
+  --f-button: "Basis Grotesque Mono Pro";
 
-    --t-simple: all .2s ease-in-out;
+  --t-simple: all 0.2s ease-in-out;
 }
 
 html {
@@ -85,7 +92,7 @@ html {
 }
 
 body {
-    background: #333333;
+  background: var(--c-bkg);
 }
 
 img {
@@ -95,6 +102,14 @@ img {
   height: auto;
 }
 
+picture {
+  display: contents;
+}
+
+picture + picture {
+  position: absolute;
+}
+
 main {
   //transform: translateY(-100vh);
   perspective: 1000px;
@@ -105,6 +120,18 @@ a {
   transition: var(--t-simple);
 }
 
+a.link-in-svg{
+  fill: var(--c-text-accent);
+  path{
+    transition: var(--t-simple);
+  }
+  &:hover{
+    path{
+      fill: var(--c-text-primary);
+    }
+  }
+}
+
 p a {
   color: var(--c-text-primary);
   text-decoration: underline;
@@ -113,7 +140,11 @@ p a {
   }
 }
 
-h1, h2, h3, h4, h5 {
+h1,
+h2,
+h3,
+h4,
+h5 {
   margin: 0;
   text-transform: uppercase;
   em {
@@ -152,6 +183,9 @@ header{
         stroke-width: 0;
         stroke: transparent;
       }
+      path:last-child{
+        //filter: drop-shadow(0 0 0.6rem rgb(0 0 0 / 80%));
+      }
     }
     &:hover {
       svg path {
@@ -219,10 +253,10 @@ nav{
 
 #menu-open {
   display: flex;
-    gap: .5em;
+  gap: 0.5em;
   align-items: center;
   svg {
-        height: .7em;
+    height: 0.7em;
     margin-top: -2px;
   }
 }
@@ -258,7 +292,7 @@ nav{
   z-index: -1;
   position: absolute;
   top: 5rem;
-    opacity: .5;
+  opacity: 0.5;
 }
 
 @media only screen and (max-width: 500px) {

src/assets/styles/peripheral.scss

@@ -6,11 +6,11 @@ main {
   flex-direction: column;
   align-items: center;
   overflow-x: clip;
-  background-color: #333;
+  background-color: var(--c-bkg);
 }
 
 #menu {
-  box-shadow: inset 0 -5rem 5rem -2rem rgb(0 0 0 / 40%);
+  box-shadow: inset 0 -5rem 5rem -2rem var(--c-shadow-2);
 }
 
 .header__logo {
@@ -226,7 +226,7 @@ section#origin {
       border-radius: 100%;
       width: 10rem;
       height: 10rem;
-      box-shadow: 0 3rem 2rem 0rem rgb(0 0 0 / 40%);
+      box-shadow: var(--sh-2);
     }
     p {
       font-size: 0.8rem;
@@ -309,5 +309,7 @@ section#news {
     font-size: 1.2rem;
     line-height: 1.4;
     margin: 0;
+    width: 100%;
+    overflow: hidden;
   }
 }

src/assets/styles/pitch.scss

@@ -9,9 +9,15 @@ section#pitch {
     h1 {
       margin: 0;
       display: inline-block;
-      max-width: 73vw;
+      max-width: min(16ch,64vw);
     }
     p{
-      max-width: min(50ch, 73vw);
+      max-width: min(50ch, 64vw);
+    }
+    iframe{
+      border:0;
+      width: max(500px,50vw);
+      height: max(282px,28.2vw);
+      box-shadow: var(--c-shadow-1) 0 3rem 3rem;
     }
   }

src/assets/styles/powered-by.scss

@@ -84,5 +84,13 @@ section#powered-by {
         color: var(--c-text-accent);
       }
     }
+    &.source-link--floated{
+      position: absolute;
     }
   }
+}
+
+svg|a:link,
+svg|a:visited {
+  cursor: pointer;
+}

src/assets/styles/products.scss

@@ -1,7 +1,8 @@
 section#products {
   transform-style: preserve-3d;
   display: flex;
-  align-items: center;
+  flex-direction: column;
+  align-items: flex-end;
   justify-content: center;
   gap: 3rem;
 
@@ -35,7 +36,7 @@ section#products {
       padding: 2rem;
       //transition: var(--t-simple);
       .heading h1 {
-        line-height: .8;
+        line-height: 0.8;
       }
       &:hover {
         .heading {
@@ -50,8 +51,9 @@ section#products {
         // }
       }
     }
-    &:first-of-type a {
+    &.subsection--buy a {
       align-items: center;
+
       .heading {
         //left: 6rem;
         //top: 6rem;
@@ -62,15 +64,30 @@ section#products {
         flex-direction: column;
       }
       .product__subheader {
-
       }
-      background: linear-gradient(45deg, rgba(255, 255, 255, 0.0), rgba(255, 255, 255, 0.05));
+      background: linear-gradient(
+        45deg,
+        rgba(255, 255, 255, 0),
+        rgba(255, 255, 255, 0.05)
+      );
       svg {
         width: 27.5vw;
         position: absolute;
       }
     }
-    &:last-of-type a {
+    &.subsection--diy {
+      position: absolute;
+      bottom: -5rem;
+      background-color: var(--c-bkg);
+      a {
+
+        &:hover {
+          .heading {
+            transform: none;
+          }
+        }
+
+        padding: 1rem;
         align-items: flex-start;
         .heading {
           // right: 6rem;
@@ -78,22 +95,25 @@ section#products {
           // position: absolute;
           display: flex;
           flex-direction: column;
-        text-align: center;
           align-self: center;
         }
         h1 {
-        letter-spacing: .5rem;
+          letter-spacing: 0.5rem;
         }
         .product__subheader {
-
         }
-      background: linear-gradient(45deg, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.25));
+        background: linear-gradient(
+          45deg,
+          rgba(0, 0, 0, 0),
+          rgba(0, 0, 0, 0.25)
+        );
         svg {
           width: 27.5vw;
           position: absolute;
         }
       }
     }
+  }
   // &::after{
   //   content: '';
   //   left:0;

src/assets/styles/support.scss

@@ -5,6 +5,7 @@ section#support {
   padding: 6rem;
   //margin-bottom: 6rem;
   gap: 3rem;
+  //transform: translate(0px,0px);
   .cols {
     display: flex;
     align-items: center;

src/contact.njk

@@ -5,8 +5,8 @@ layout: layouts/peripheral.njk
 
 <section id="hero">
     <div id="hero-image">
-        <img src="../assets/images/contact-hero.png" alt="contact page hero: @ symbol emerging from an embassy" title="contact page hero: @ symbol emerging from an embassy"/>
+        <img src="assets/images/contact-hero.png" alt="contact page hero: @ symbol emerging from an embassy" title="contact page hero: @ symbol emerging from an embassy"/>
-        <img class="img-shadow" src="../assets/images/contact-hero.png" alt=""/>
+        <img class="img-shadow" src="assets/images/contact-hero.png" alt=""/>
     </div>
     <div id="logo">
         <h1>

src/dev.njk

@@ -5,8 +5,8 @@ layout: layouts/peripheral.njk
 
 <section id="hero">
     <div id="hero-image">
-        <img src="../assets/images/dev-hero.png" alt="dev page hero: html tag emerging from an embassy" title="dev page hero: html tag emerging from an embassy"/>
+        <img src="assets/images/dev-hero.png" alt="dev page hero: html tag emerging from an embassy" title="dev page hero: html tag emerging from an embassy"/>
-        <img class="img-shadow" src="../assets/images/dev-hero.png" alt=""/>
+        <img class="img-shadow" src="assets/images/dev-hero.png" alt=""/>
     </div>
     <div id="logo">
         <h1>

src/index.njk

@@ -31,7 +31,7 @@ layout: layouts/base.njk
     
 </script> #}
 
-<link rel="stylesheet" href="assets/styles/landing.css">
+<link rel="stylesheet" href="/assets/styles/landing.css">
 <link rel="preload" as="image" href="assets/images/explosion.png">
 
 <div class="cube">

src/jobs.njk

@@ -5,8 +5,8 @@ layout: layouts/peripheral.njk
 
 <section id="hero">
     <div id="hero-image">
-        <img src="../assets/images/jobs-hero.png" alt="jobs page hero: laptop emerging from an embassy" title="jobs page hero: laptop emerging from an embassy"/>
+        <img src="assets/images/jobs-hero.png" alt="jobs page hero: laptop emerging from an embassy" title="jobs page hero: laptop emerging from an embassy"/>
-        <img class="img-shadow" src="../assets/images/jobs-hero.png" alt=""/>
+        <img class="img-shadow" src="assets/images/jobs-hero.png" alt=""/>
     </div>
     <div id="logo">
         <h1>

src/news.njk

@@ -5,8 +5,8 @@ layout: layouts/peripheral.njk
 
 <section id="hero">
     <div id="hero-image">
-        <img src="../assets/images/news-hero.png" alt="news page hero: tv emerging from an embassy" title="news page hero: tv emerging from an embassy"/>
+        <img src="assets/images/news-hero.png" alt="news page hero: tv emerging from an embassy" title="news page hero: tv emerging from an embassy"/>
-        <img class="img-shadow" src="../assets/images/news-hero.png" alt=""/>
+        <img class="img-shadow" src="assets/images/news-hero.png" alt=""/>
     </div>
     <div id="logo">
         <h1>