turned off lazy loading, refactored js, image tweaks, css tweaks, be-your-own rennovation

.eleventy.js

@@ -19,10 +19,10 @@ module.exports = function (eleventyConfig) {
   //plugins
   eleventyConfig.addPlugin(eleventySass);
 
-  eleventyConfig.addPlugin(lazyImagesPlugin, {
+  // eleventyConfig.addPlugin(lazyImagesPlugin, {
-    imgSelector: 'img:not(.unlazy)', // custom image selector
+  //   imgSelector: 'img:not(.unlazy)', // custom image selector
-    //cacheFile: '', // don't cache results to a file
+  //   //cacheFile: '', // don't cache results to a file
-  });
+  // });
 
   return {
     dir: { input: "src", output: "_site", data: "_data" },

index.js

@@ -2,3 +2,6 @@
 // eslint-disable-next-line no-global-assign
 require = require("esm")(module/* , options */)
 module.exports = require("./main.js")
+
+gsap.registerPlugin(DrawSVGPlugin);
+gsap.registerPlugin(CustomEase);

src/_data/pseudoservices.json

@@ -1,54 +1,67 @@
 [
     {
       "name": "Whatsapp",
+      "slug": "whatsapp",
       "url": "https://start9.com/marketplace/175"
     },
     {
       "name": "Twitter",
+      "slug": "twitter",
       "url": "https://start9.com/marketplace/175"
     },
     {
       "name": "Lastpass",
+      "slug": "lastpass",
       "url": "https://start9.com/marketplace/199"
     },
     {
       "name": "bank",
+      "slug": "bank",
       "url": "https://start9.com/marketplace/148"
     },
     {
       "name": "Github",
+      "slug": "github",
       "url": "https://start9.com/marketplace/126"
     },
     {
       "name": "Google Drive",
+      "slug": "google-drive",
       "url": "https://start9.com/marketplace/186"
     },
     {
       "name": "iPhotos",
+      "slug": "iphotos",
       "url": "https://start9.com/marketplace/119"
     },
     {
       "name": "Coinbase",
+      "slug": "coinbase",
       "url": "https://start9.com/marketplace/132"
     },
     {
       "name": "GoFundMe",
+      "slug": "gofundme",
       "url": "https://start9.com/marketplace/165"
     },
     {
       "name": "PayPal",
+      "slug": "paypal",
       "url": "https://start9.com/marketplace/165"
     },
     {
       "name": "iMessage",
+      "slug": "imessage",
       "url": "https://start9.com/marketplace/165"
     },
     {
       "name": "KeePass",
+      "slug": "keepass",
       "url": "https://start9.com/marketplace/165"
     },
     {
       "name": "Kickstarter",
+      "slug": "kickstarter",
       "url": "https://start9.com/marketplace/165"
     }
   ]

src/_data/services.json

@@ -2,62 +2,64 @@
   {
     "name": "Synapse",
     "slug": "synapse",
-        "description": "Synapse is the battle-tested, reference implementation of the Matrix protocol. Matrix is a next-generation, federated, full-featured, encrypted, independent messaging system. There are no trusted third parties involved. (see matrix.org for details).",
+    "description": "A battle-tested implementation of the Matrix protocol, the killer of all messaging apps.",
+    "color": "#666666",
     "categories": ["communications"],
-        "pseudoservices": [
+    "pseudoservices": ["whatsapp", "imessage"]
-            "whatsapp","imessage"
-        ]
   },
   {
     "name": "Mastodon",
     "slug": "mastodon",
-        "description": "Mastodon is a free, open-source social network server based on ActivityPub where users can follow friends and discover new ones. On Mastodon, users can publish anything they want: links, pictures, text, video. All Mastodon servers are interoperable as a federated network (users on one server can seamlessly communicate with users from another one, including non-Mastodon software that implements ActivityPub)!",
+    "description": "A free, open-source social network server",
+    "color": "#6364ff",
     "categories": ["communications"],
-        "pseudoservices": [
+    "pseudoservices": ["twitter"]
-            "twitter"
-        ]
   },
   {
     "name": "Vaultwarden",
     "slug": "vaultwarden",
-        "description": "Vaultwarden is a lightweight and secure password manager for storing and autofilling sensitive information such as usernames and passwords, credit cards, identities, and notes. It is an alternative implementation of the Bitwarden server API written in Rust and compatible with upstream Bitwarden clients. All data is stored in an encrypted vault on your Embassy.",
+    "description": "Secure password management",
+    "color": "#175ddc",
     "categories": ["data"],
-        "pseudoservices": [
+    "pseudoservices": ["lastpass", "keepass"]
-            "lastpass","keepass"
-        ]
   },
   {
     "name": "Balance of Satoshis",
     "slug": "balanceofsatoshis",
-        "description": "",
+    "description": "A tool for working with the balance of your satoshis on LND.",
+    "color": "#",
     "categories": ["plebnet-tools"],
     "pseudoservices": []
   },
   {
     "name": "Bitcoin Core",
     "slug": "bitcoind",
-        "description": "",
+    "description": "A Bitcoin Full Node by Bitcoin Core.",
+    "color": "#f2a900",
     "categories": ["bitcoin"],
     "pseudoservices": ["bank"]
   },
   {
     "name": "Bitcoin Proxy",
     "slug": "btc-rpc-proxy",
-        "description": "",
+    "description": "Super charge your Bitcoin node.",
+    "color": "#",
     "categories": ["bitcoin"],
     "pseudoservices": []
   },
   {
     "name": "BTCPay Server",
     "slug": "btcpayserver",
-        "description": "",
+    "description": "Bitcoin and cryptocurrency payment processor and POS system.",
+    "color": "#51b13e",
     "categories": ["bitcoin"],
     "pseudoservices": ["kickstarter", "gofundme"]
   },
   {
     "name": "Core Lightning",
     "slug": "c-lightning",
-        "description": "",
+    "description": "An implementation of the Lightning Network protocol by Blockstream.",
+    "color": "#ffe95f",
     "categories": ["lightning"],
     "pseudoservices": ["paypal", "coinbase"]
   },
@@ -65,6 +67,7 @@
     "name": "electrs",
     "slug": "electrs",
     "description": "",
+    "color": "#",
     "categories": ["bitcoin"],
     "pseudoservices": []
   },
@@ -72,34 +75,39 @@
     "name": "lightning Jet",
     "slug": "lightning-jet",
     "description": "",
+    "color": "#",
     "categories": ["plebnet-tools"],
     "pseudoservices": []
   },
   {
     "name": "Lightning Network Daemon",
     "slug": "lnd",
-        "description": "",
+    "description": "A complete implementation of a Lightning Network node by Lightning Labs.",
+    "color": "#338dc9",
     "categories": ["lightning"],
     "pseudoservices": ["paypal", "coinbase"]
   },
   {
     "name": "Lightning Terminal",
     "slug": "lightning-terminal",
-        "description": "",
+    "description": "Your Home for Lightning Liquidity",
+    "color": "#570380",
     "categories": ["lightning"],
     "pseudoservices": []
   },
   {
     "name": "LNDg",
     "slug": "lndg",
-        "description": "",
+    "description": "Powerful web interface for LND developed specifically for LND Routing Node Operators",
+    "color": "#",
     "categories": ["plebnet-tools"],
     "pseudoservices": []
   },
   {
     "name": "Mempool",
     "slug": "mempool",
-        "description": "",
+    "description": "A Bitcoin node and network visualizer.",
+    "color": "#8884f7",
     "categories": ["bitcoin"],
     "pseudoservices": ["bank"]
   },
@@ -107,35 +115,72 @@
     "name": "Ride the Lightning",
     "slug": "ride-the-lightning",
     "description": "",
+    "color": "#bdbdbd",
     "categories": ["lightning"],
     "pseudoservices": ["paypal", "coinbase"]
   },
   {
     "name": "Spark Wallet",
     "slug": "spark-wallet",
-        "description": "",
+    "description": "A minimalistic wallet GUI for Core Lightning (CLN).",
+    "color": "#2c384c",
     "categories": ["lightning"],
     "pseudoservices": ["paypal"]
   },
   {
     "name": "Specter",
     "slug": "specter",
-        "description": "",
+    "description": "A desktop GUI for Bitcoin Core optimised to work with hardware wallets.",
+    "color": "#e80001",
     "categories": ["bitcoin"],
     "pseudoservices": []
   },
   {
     "name": "Sphinx Chat",
     "slug": "sphinx-relay",
-        "description": "",
+    "description": "Chat on the lightning Network.",
+    "color": "#618aff",
     "categories": ["lightning"],
     "pseudoservices": ["whatsapp", "imessage"]
   },
   {
     "name": "Thunderhub",
     "slug": "thunderhub",
-        "description": "",
+    "description": "LND Lightning Node Manager in your Browser",
+    "color": "#2b3885",
     "categories": ["bitcoin"],
     "pseudoservices": ["paypal", "coinbase"]
+  },
+  {
+    "name": "Ghost",
+    "slug": "ghost",
+    "description": "A self-hosted blogging platform.",
+    "color": "#bfbfbe",
+    "categories": ["communications"],
+    "pseudoservices": ["paypal", "coinbase"]
+  },
+  {
+    "name": "Photoview",
+    "slug": "photoview",
+    "description": "An easy way to organize and share personal photos.",
+    "color": "#ff692c",
+    "categories": ["data"],
+    "pseudoservices": ["iphotos"]
+  },
+  {
+    "name": "Syncthing",
+    "slug": "syncthing",
+    "description": "Synchronizes files between devices in real time, safely protected from prying eyes.",
+    "color": "#1191ce",
+    "categories": ["data"],
+    "pseudoservices": ["google-drive"]
+  },
+  {
+    "name": "Gitea",
+    "slug": "gitea",
+    "description": "A painless, self-hosted git service.",
+    "color": "#609926",
+    "categories": ["data"],
+    "pseudoservices": ["github"]
   }
 ]

src/_includes/components/footer.njk

@@ -1,7 +1,7 @@
 <footer>
     <div class="footer__content">
         <div class="header">
-            <img src="../assets/images/start9_logo.png" alt="">
+            {% include "components/svg/logo.svg" %}
             <div class="footer__copyright">{{ site.footer.copyright }}</div>
             <div class="footer__donate">[btcpay widget]</div>
             </div>

src/_includes/components/header.njk

@@ -1,6 +1,8 @@
 <header>
   <nav>
-    <a class="header__logo" href="/" aria-label="Return Home"><img src="../assets/images/start9_logo.png" alt=""></a>
+    <a class="header__logo" href="/" aria-label="Return Home">
+    {% include "components/svg/logo.svg" %}
+    </a>
     <ul>
       {% for group in menu|selectattr("inHeader") %}
         {% for item in group.items %}

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

@@ -0,0 +1,46 @@
+<section id="be-your-own">
+    <h1>be
+        <em>your own</em>
+        everything</h1>
+    <p>Anything you can do in the <a href="https://en.wikipedia.org/wiki/Censorship_by_Apple#App_Store" target="_blank">permissioned</a>, <a href="https://www.computerworld.com/article/3634591/the-problem-with-the-subscription-economy.html" target="_blank">subscription-based</a>, <a href="https://en.wikipedia.org/wiki/Privacy_concerns_regarding_Google" target="_blank">privacy-invading</a>, <a target="_blank" href="https://dataprot.net/articles/biggest-data-breaches/">insecure</a> model of cloud computing, you
+        can also do in the open, free, private, secure model of <em>sovereign computing</em>.</p>
+    <div id='ticker'>
+        <div id="ticker__selected-frame">
+            <span>be your own</span>
+            {# <div id="services"></div> #}
+        </div>
+        <div id="ticker__window">
+            <ul class='pseudoservices'>
+                {% for pseudoservice in pseudoservices %}
+                    <li class="pseudoservice">{{ pseudoservice.name }}</li>
+                {% endfor %}
+            </ul>
+        </div>
+        <div class="services">
+            {% for pseudoservice in pseudoservices %}
+            <div class="slides-container slides-container--{{ pseudoservice.slug }}">
+                <ul class="slides-inner">
+                    {% for service in services %}
+                        {% if pseudoservice.slug in service.pseudoservices %}
+                        <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"/>
+                                <div class="service__name">{{ service.name }}</div>
+                                {# <div class="service__desc">{{ service.description }}</div> #}
+                            </a>
+                            {# <a href="">{% include "components/svg/chevron-right.svg" %}</a> #}
+                        </li>
+                        {% endif %}
+                    {% endfor %}
+                </ul>
+            </div>
+            {% endfor %}
+            <div class="slides-controls">
+                <button id="prevButton">{% include "components/svg/chevron-left.svg" %}</button>
+                <button id="nextButton">{% include "components/svg/chevron-right.svg" %}</button>
+            </div>
+        </div>
+    </div>
+    <a href="{{ site.beYourOwn.url }}" class="btn">browse the start9 marketplace</a>
+</section>

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

@@ -2,8 +2,8 @@
     <h1>be
         <em>your own</em>
         everything</h1>
-    <p>Anything you can do in the permissioned, subscription-based, privacy-invading, insecure model of cloud computing, you
+    <p>Anything you can do in the <a href="https://en.wikipedia.org/wiki/Censorship_by_Apple#App_Store" target="_blank">permissioned</a>, <a href="https://www.computerworld.com/article/3634591/the-problem-with-the-subscription-economy.html" target="_blank">subscription-based</a>, <a href="https://en.wikipedia.org/wiki/Privacy_concerns_regarding_Google" target="_blank">privacy-invading</a>, <a target="_blank" href="https://dataprot.net/articles/biggest-data-breaches/">insecure</a> model of cloud computing, you
-        can also do in the open, free, private, secure model of sovereign computing</p>
+        can also do in the open, free, private, secure model of <em>sovereign computing</em>.</p>
     <div id='ticker'>
         <div id="ticker__selected-frame">
             <span>be your own</span>
@@ -18,28 +18,24 @@
         </div>
         <div class="services">
             {% for pseudoservice in pseudoservices %}
-            <div class="slides-container slides-container--{{ pseudoservice.name.toLowerCase() }}">
+            <div class="service-container service-container--{{ pseudoservice.slug }}">
-                <ul class="slides-inner">
                     {% for service in services %}
-                        {% if pseudoservice.name.toLowerCase() in service.pseudoservices %}
+                        {% if pseudoservice.slug in service.pseudoservices %}
-                        <li class="service slide">
+                            <div class="service__content" >
-                            {# <a href="">{% include "components/svg/chevron-left.svg" %}</a> #}
                                 <a class="service__link" href="https://marketplace.start9.com/{{service.slug}}" target="_blank">
-                                <img class="service__image" src="../assets/images/service-icons/{{ service.slug }}.png" alt=""/>
+                                    <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"
-                                <div class="service__name">{{ service.name }}</div>
+                                    style="filter: drop-shadow(0px 0px 3rem {{ service.color }}C0)"/>
-                                {# <div class="service__desc">{{ service.description }}</div> #}
+                                    <div class="service__info">
+                                        <h3 class="service__name">{{ service.name }}</h3>
+                                        <p class="service__desc">{{ service.description }}</p>
+                                    </div>
                                 </a>
-                            {# <a href="">{% include "components/svg/chevron-right.svg" %}</a> #}
+                                <div class="service__bkg" style="background: linear-gradient(180deg, {{ service.color }}00 0%, {{ service.color }}C0 30%, {{ service.color }}FF 50%, {{ service.color }}C0 66%, {{ service.color }}00 100%);"></div>
-                        </li>
+                            </div>
                         {% endif %}
                     {% endfor %}
-                </ul>
             </div>
             {% endfor %}
-            <div class="slides-controls">
-                <button id="prevButton">{% include "components/svg/chevron-left.svg" %}</button>
-                <button id="nextButton">{% include "components/svg/chevron-right.svg" %}</button>
-            </div>
         </div>
     </div>
     <a href="{{ site.beYourOwn.url }}" class="btn">browse the start9 marketplace</a>

src/_includes/components/landing/bitcoin.njk

@@ -21,7 +21,8 @@
                     <img
                         class="service-icon service-icon--{{ service.slug }}"
                         src="../assets/images/service-icons/{{ service.slug }}.png"
-                        alt=""/>
+                        alt="{{ service.name }} embassyos service icon"
+                        alt="{{ service.name }} embassyos service icon"/>
                 {% endif %}
             {% endfor %}
         {% endfor %}

src/_includes/components/landing/dev.njk

@@ -4,8 +4,9 @@
         <div class="col">
             <div class="wrapper">
                 <div class="content">
-                    <p style="color: black;">Interested in packaging a service?</p>
+                    <p>Interested in packaging a service?<br/><em>Our community runs on devs like you.</em></p>
-                    <p style="color: black;">Our community runs on devs like <em>you</em>.</p>
+                    <p>There are <a href="https://github.com/awesome-selfhosted/awesome-selfhosted" target="_blank">thousands</a> of wonderful open-source services out there - just waiting to be added to the Embassy Marketplace.</p>
+                    <p>If you're familiar with Docker or Rust (or want to learn!), check out our step-by-step packaging tutorials.</p>
                 </div>
                 <div class="footer">
                     <a class="btn" href="{{ site.dev.url }}">learn more</a>
@@ -13,7 +14,7 @@
             </div>
         </div>
         <div class="col">
-            <div class="code-wrapper"><img src="assets/images/dockerfile.png" alt=""></div>
+            <div class="code-wrapper"><img src="assets/images/dockerfile.png" alt="screenshot of dockerfile" title="screenshot of dockerfile"></div>
         </div>
     </div>
 </section>

src/_includes/components/landing/hero.njk

@@ -1,10 +1,10 @@
 <section id="hero">
     <div id="hero-image">
-        <img rel="preload" as="image" src="assets/images/explosion.png" alt="">
+        <img src="assets/images/explosion.png" alt="voxel explosion" title="voxel explosion">
-        <img rel="preload" as="image" class="img-shadow" src="assets/images/explosion.png" alt="">
+        <img as="image" class="img-shadow" src="assets/images/explosion.png" alt="">
     </div>
     <div id="logo">
-        <img class="unlazy" src="assets/images/start9_logo.png" alt="">
+        {% include "components/svg/logo.svg" %}
         <span>sovereign computing</span>
     </div>
 </section>

src/_includes/components/landing/infographics.njk

@@ -8,11 +8,11 @@
             App companies can see your pictures, read your documents, listen to your conversations, track your location, sell your
             private information, permanently delete your data, or cut you off at any time. Even if the companies behind these apps
             are not malicious, they are prime targets for hackers and are vulnerable to political winds.</p>
-        {# <div class="image-with-shadow">
+        <div class="image-with-shadow">
             {% include "components/svg/big-tech-network-diagram.svg" %}
             <div class="img-shadow">{% include "components/svg/big-tech-network-diagram.svg" %}</div>
-        </div> #}
+        </div>
-        {% include "components/svg/big-tech-network-diagram.svg" %}
+        {# {% include "components/svg/big-tech-network-diagram.svg" %} #}
     </div>
     <div class="subsection">
         <h1>Take back
@@ -25,10 +25,10 @@
                     namely software developers, corporations, wealthy individuals, and politicians.
                     <em>Start9 levels the playing field</em>
                     by making it possible for the rest of us.</p>
-                {# <div class="image-with-shadow">
+                <div class="image-with-shadow">
-                    {% include "components/svg/embassyos-network-diagram.svg" %}
-                    <div class="img-shadow">{% include "components/svg/embassyos-network-diagram.svg" %}</div>
-                </div> #}
                     {% include "components/svg/embassyos-network-diagram_red_extended.svg" %}
+                    <div class="img-shadow">{% include "components/svg/embassyos-network-diagram_red_extended.svg" %}</div>
+                </div>
+                {# {% include "components/svg/embassyos-network-diagram_red_extended.svg" %} #}
             </div>
         </section>

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

@@ -2,23 +2,20 @@
     <h1>Powered by <em>EmbassyOS</em></h1>
     <div>
         <p>
-            In the past, running a server was only possible for highly technical people or those who could afford to hire them;
+            EmbassyOS (EOS) is a browser-based, graphical operating system for a personal server, designed to <em>
-            namely software developers, corporations, wealthy individuals, and politicians. Start9 levels the playing field by
+                turn anyone into a
-            making it possible for the rest of us.
+                system administrator
-        </p>
+            </em> capable of managing their own server.
-        <p>
-            EmbassyOS (EOS) is a browser-based, graphical operating system for a personal server, designed to turn anyone into a
-            system’s administrator capable of managing their own server.
         </p>
     </div>
     <div class="image-with-shadow">
-        {% include "components/svg/stack.svg" %}
+        {% include "components/svg/stack-new.svg" %}
-        <div class="img-shadow">{% include "components/svg/stack.svg" %}</div>
+        <div class="img-shadow">{% include "components/svg/stack-new.svg" %}</div>
     </div>
     <a class="source-link" href="{{ site.poweredBy.url }}" target="_blank">
     <div class="image-with-shadow">
-        <img src="../assets/images/code1.png" alt=""/>
+        <img src="../assets/images/code1.png" alt="html tag icon" title="html tag icon"/>
-        <img class="img-shadow" src="../assets/images/code1.png" 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>
 </section>

src/_includes/components/landing/products.njk

@@ -1,7 +1,7 @@
 <section id="products">
         <div class="subsection">
             <a class="product product--buy" href="{{ site.products.buyUrl }}">
-                <img src="../assets/images/buy-centered.png" alt="">
+                <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="">
                 <div class="heading">
                     <h1 class="product__header">buy</h1>
@@ -12,7 +12,7 @@
         </div>
         <div class="subsection">
             <a class="product product--diy" href="{{ site.products.diyUrl }}">
-                <img src="../assets/images/diy.png" alt="">
+                <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="">
                 <div class="heading">
                     <h1 class="product__header">diy</h1>

src/_includes/components/landing/support.njk

@@ -14,7 +14,9 @@
       </p>
     </div>
     <div class="col">
-      <img src="../assets/images/support1.png" alt="">
+      <div class="image-with-shadow">
+        <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>
     </div>
   </div>
   <a class="btn" href="{{ site.support.url }}">meet the team</a>

src/_includes/layouts/peripheral.njk

@@ -12,4 +12,6 @@ layout: layouts/base.njk
 <script src="{{ '/assets/js/ScrollSmoother.min.js' | url }}"></script>
 <script src="{{ '/assets/js/DrawSVGPlugin.min.js' | url }}"></script>
 <script src="{{ '/assets/js/CustomEase.min.js' | url }}"></script>
-<script src="{{ '/assets/js/main.js' | url }}"></script>
+<script src="{{ '/assets/js/_header.js' | url }}"></script>
+<script src="{{ '/assets/js/_menu.js' | url }}"></script>
+<script src="{{ '/assets/js/peripheral.js' | url }}"></script>

src/about.njk

@@ -6,7 +6,7 @@ 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=""/>
+        <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=""/>
     </div>
     <div id="logo">
@@ -49,12 +49,12 @@ 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=""/>
+            <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=""/>
         </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=""/>
+            <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=""/>
         </div>
     </div>
@@ -63,7 +63,7 @@ layout: layouts/peripheral.njk
 <section id="values">
     <h2>values</h2>
     <div class="section__image">
-        <img src="../assets/images/values.png" alt=""/>
+        <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=""/>
     </div>
     <p>
@@ -93,7 +93,7 @@ layout: layouts/peripheral.njk
 <section id="virtues">
     <h2>virtues</h2>
     <div class="section__image">
-        <img src="../assets/images/virtues.png" alt=""/>
+        <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=""/>
     </div>
     <p>
@@ -118,7 +118,7 @@ layout: layouts/peripheral.njk
 <section id="origin">
     <h2>origin story</h2>
     <div class="section__image">
-        <img src="../assets/images/origin.png" alt=""/>
+        <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=""/>
     </div>
     <p>
@@ -166,14 +166,14 @@ layout: layouts/peripheral.njk
 <section id="team">
     <h2>our team</h2>
     <div class="section__image">
-        <img src="../assets/images/team2.png" alt=""/>
+        <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=""/>
     </div>
 
     <ul class="members">
         {% for member in team %}
             <li class="member">
-                <img class="member__avatar" src="{{ member.avatar_url }}" alt=""/>
+                <img class="member__avatar" src="{{ member.avatar_url }}" alt="{{ member.name }}'s avatar" title="{{ member.name }}'s avatar"/>
                 <div class="member__content">
                     <h4>{{ member.name }}</h4>
                     <h5>{{ member.position }}</h5>

src/assets/js/_header.js

@@ -0,0 +1,26 @@
+//////////////////////////////////////////
+// HEADER
+
+gsap.to("header", {
+    duration: 0.5,
+    backgroundColor: "rgba(0,0,0,0.1)",
+    backdropFilter: "blur(10px)",
+    scrollTrigger: {
+      trigger: "#hero-image",
+      scrub: true,
+      start: "center top", // "triggerElement page"
+      end: "bottom top", // "triggerElement page"
+    },
+  });
+  
+  gsap.to(".header__logo", {
+    duration: 0.5,
+    opacity: "1",
+    filter: "blur(0px)",
+    scrollTrigger: {
+      trigger: "#hero-image",
+      scrub: true,
+      start: "center top", // "triggerElement page"
+      end: "bottom top", // "triggerElement page"
+    },
+  });

src/assets/js/_hero.js

@@ -0,0 +1,18 @@
+//////////////////////////////////////////
+// HERO
+
+gsap.from("#hero-image", {
+    duration: 1,
+    //y: "-10rem",
+    scale: 0.95,
+    opacity: 0,
+    filter: "blur(10px)",
+    delay: 0.5,
+  });
+  gsap.from("#logo", {
+    duration: 0.5,
+    y: "-5rem",
+    opacity: 0,
+    delay: 1.25,
+    //ease: "in-out"
+  });

src/assets/js/_menu.js

@@ -0,0 +1,30 @@
+//////////////////////////////////////////
+// MENU
+
+let menuOpen = document.getElementById("menu-open"),
+  menuClose = document.getElementById("menu-close"),
+  openedMenuArray = gsap.utils.toArray(".opened-menu"),
+  closedMenuArray = gsap.utils.toArray(".closed-menu");
+
+menuOpen.addEventListener("click", (e) => openMenu(e));
+menuClose.addEventListener("click", (e) => closeMenu(e));
+
+function openMenu(e) {
+  e.preventDefault();
+  gsap.to("#menu", { y: "0vh" });
+  gsap.to("main", { y: "100vh" });
+  gsap.to(openedMenuArray, { x: "0", opacity: 1, width: "auto" });
+  gsap.to(closedMenuArray, { x: "3rem", opacity: 0, width: 0 });
+  gsap.to("html", { overflow: "hidden" });
+  document.querySelector('html').classList.add("menu-is-open");
+}
+function closeMenu(e) {
+  e.preventDefault();
+  gsap.to("#menu", { y: "-100vh" });
+  gsap.to("main", { y: "0vh" });
+  gsap.to(closedMenuArray, { x: "0", opacity: 1, width: "auto" });
+  gsap.to(openedMenuArray, { x: "3rem", opacity: 0, width: 0 });
+  gsap.to("html", { overflow: "scroll" });
+  gsap.to("html", { overflow: "overlay" });
+  document.querySelector('html').classList.remove("menu-is-open");
+}

src/assets/js/main.js

@@ -1,6 +1,3 @@
-gsap.registerPlugin(DrawSVGPlugin);
-gsap.registerPlugin(CustomEase);
-
 var bodyRect = document.body.getBoundingClientRect();
 
 const sections = [
@@ -61,55 +58,9 @@ const defaultActions = "play none none none"; //onEnter, onLeave, onEnterBack, a
 //   });
 // }, 2000);
 
-//////////////////////////////////////////
-// MENU
 
-let menuOpen = document.getElementById("menu-open"),
-  menuClose = document.getElementById("menu-close"),
-  openedMenuArray = gsap.utils.toArray(".opened-menu"),
-  closedMenuArray = gsap.utils.toArray(".closed-menu");
 
-menuOpen.addEventListener("click", (e) => openMenu(e));
-menuClose.addEventListener("click", (e) => closeMenu(e));
 
-function openMenu(e) {
-  e.preventDefault();
-  gsap.to("#menu", { y: "0vh" });
-  gsap.to("main", { y: "100vh" });
-  gsap.to(openedMenuArray, { x: "0", opacity: 1, width: "auto" });
-  gsap.to(closedMenuArray, { x: "3rem", opacity: 0, width: 0 });
-  gsap.to("html", { overflow: "hidden" });
-  document.querySelector('html').classList.add("menu-is-open");
-}
-function closeMenu(e) {
-  e.preventDefault();
-  gsap.to("#menu", { y: "-100vh" });
-  gsap.to("main", { y: "0vh" });
-  gsap.to(closedMenuArray, { x: "0", opacity: 1, width: "auto" });
-  gsap.to(openedMenuArray, { x: "3rem", opacity: 0, width: 0 });
-  gsap.to("html", { overflow: "scroll" });
-  gsap.to("html", { overflow: "overlay" });
-  document.querySelector('html').classList.remove("menu-is-open");
-}
-
-//////////////////////////////////////////
-// HERO
-
-gsap.from("#hero-image", {
-  duration: 1,
-  //y: "-10rem",
-  scale: 0.95,
-  opacity: 0,
-  filter: "blur(10px)",
-  delay: 0.5,
-});
-gsap.from("#logo", {
-  duration: 0.5,
-  y: "-5rem",
-  opacity: 0,
-  delay: 1.25,
-  //ease: "in-out"
-});
 //gsap.config({trialWarn: false});
 
 // create the smooth scroller FIRST!
@@ -123,32 +74,7 @@ gsap.from("#logo", {
 // backdrop-filter: blur(10px);
 //background-color: rgba(0,0,0,0.1);
 
-//////////////////////////////////////////
-// HEADER
 
-gsap.to("header", {
-  duration: 0.5,
-  backgroundColor: "rgba(0,0,0,0.1)",
-  backdropFilter: "blur(10px)",
-  scrollTrigger: {
-    trigger: "#hero-image",
-    scrub: true,
-    start: "center top", // "triggerElement page"
-    end: "bottom top", // "triggerElement page"
-  },
-});
-
-gsap.to(".header__logo", {
-  duration: 0.5,
-  opacity: "1",
-  filter: "blur(0px)",
-  scrollTrigger: {
-    trigger: "#hero-image",
-    scrub: true,
-    start: "center top", // "triggerElement page"
-    end: "bottom top", // "triggerElement page"
-  },
-});
 
 gsap.from("#hero-to-pitch path:first-child", {
   drawSVG: 0,
@@ -398,7 +324,7 @@ function positionServiceIcons() {
 
 function onResizeComplete() {
   positionServiceIcons();
-};
+}
 var resizeTimeout = setTimeout(onResizeComplete, 400);
 window.onresize = function() {
   clearTimeout(resizeTimeout);
@@ -457,19 +383,33 @@ gsap.from("#be-your-own #ticker", {
   },
 });
 
-let pseudoserviceArray = gsap.utils.toArray(".pseudoservice"),
+let pseudoserviceArray, next, itemHeight, listHeight, windowHeight, kerplunk, kerplunk2;
-  next = 3, // time to change
+
+pseudoserviceArray = gsap.utils.toArray(".pseudoservice");
+
+next = 4;
+
+function initializeSizes() {
+
   itemHeight = document
     .querySelector(".pseudoservice")
-    .getBoundingClientRect().height,
+    .getBoundingClientRect().height;
+  
   listHeight = document
     .querySelector(".pseudoservices")
-    .getBoundingClientRect().height,
+    .getBoundingClientRect().height;
-  windowHeight = document.getElementById("ticker__window").clientHeight,
+  
+  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 "
-  ),
+);
+
 kerplunk2 = CustomEase.create(
   "custom",
   "M0,0 C0.126,0.382 0.178,0.802 0.288,1.052 0.303,1.088 0.372,0.99 0.434,0.99 0.502,0.99 0.497,1 0.524,1 0.664,1 0.863,1 1,1 "
@@ -495,10 +435,10 @@ function crossfade() {
 
   var thisPseudoservice = pseudoserviceArray[2].innerHTML,
     thisElement = document.querySelector(
-      ".slides-container--" + thisPseudoservice.toLowerCase()
+      ".service-container--" + thisPseudoservice.toLowerCase().replace(' ','-')
     );
 
-  var slidesContainerArray = document.querySelectorAll(".slides-container");
+  var slidesContainerArray = document.querySelectorAll(".service-container");
   slidesContainerArray.forEach((thisContainer) => {
     thisContainer.style.display = "none";
   });
@@ -511,101 +451,104 @@ function crossfade() {
 // start the crossfade after next = 3 sec
 gsap.delayedCall(next, crossfade);
 
-document.querySelector(".services").addEventListener("mouseenter", pauseThunk);
+// document.querySelector(".services").addEventListener("mouseenter", pauseThunk);
-// TODO: pause not working - Id not found
+// // TODO: pause not working - Id not found
-function pauseThunk() {
+// function pauseThunk() {
-  console.log("asfd");
+//   console.log("asfd");
-  gsap.getById("thunk").kill();
+//   gsap.getById("thunk").kill();
-}
+// }
 
 // CAROUSEL
 
-var slideDelay = 1.5;
+// var slideDelay = 1.5;
-var slideDuration = 0.3;
+// var slideDuration = 0.3;
-var wrap = true;
+// var wrap = true;
 
-var slides = document.querySelectorAll(".slide");
+// var slides = document.querySelectorAll(".slide");
-var prevButton = document.querySelector("#prevButton");
+// var prevButton = document.querySelector("#prevButton");
-var nextButton = document.querySelector("#nextButton");
+// var nextButton = document.querySelector("#nextButton");
-var progressWrap = gsap.utils.wrap(0, 1);
+// var progressWrap = gsap.utils.wrap(0, 1);
 
-var numSlides = slides.length;
+// var numSlides = slides.length;
 
-gsap.set(slides, {
+// gsap.set(slides, {
-  xPercent: (i) => i * 100,
+//   xPercent: (i) => i * 100,
-});
+// });
 
-var wrapX = gsap.utils.wrap(-100, (numSlides - 1) * 100);
+// var wrapX = gsap.utils.wrap(-100, (numSlides - 1) * 100);
 
-var animation = gsap.to(slides, {
+// var animation = gsap.to(slides, {
-  xPercent: "+=" + numSlides * 100,
+//   xPercent: "+=" + numSlides * 100,
-  duration: 1,
+//   duration: 1,
-  ease: "none",
+//   ease: "none",
-  paused: true,
+//   paused: true,
-  repeat: -1,
+//   repeat: -1,
-  modifiers: {
+//   modifiers: {
-    xPercent: wrapX,
+//     xPercent: wrapX,
-  },
+//   },
-});
+// });
 
-var proxy = document.createElement("div");
+// var proxy = document.createElement("div");
-var slideAnimation = gsap.to({}, {});
+// var slideAnimation = gsap.to({}, {});
-var slideWidth = 0;
+// var slideWidth = 0;
-var wrapWidth = 0;
+// var wrapWidth = 0;
 
 resize();
 
 window.addEventListener("resize", resize);
 
-prevButton.addEventListener("click", function () {
+// prevButton.addEventListener("click", function () {
-  animateSlides(1);
+//   animateSlides(1);
-});
+// });
 
-nextButton.addEventListener("click", function () {
+// nextButton.addEventListener("click", function () {
-  animateSlides(-1);
+//   animateSlides(-1);
-});
+// });
 
 // function updateDraggable() {
 //   slideAnimation.kill();
 //   this.update();
 // }
 
-function animateSlides(direction) {
+// function animateSlides(direction) {
-  slideAnimation.kill();
+//   slideAnimation.kill();
-  var x = snapX(gsap.getProperty(proxy, "x") + direction * slideWidth);
+//   var x = snapX(gsap.getProperty(proxy, "x") + direction * slideWidth);
 
-  slideAnimation = gsap.to(proxy, {
+//   slideAnimation = gsap.to(proxy, {
-    x: x,
+//     x: x,
-    duration: slideDuration,
+//     duration: slideDuration,
-    onUpdate: updateProgress,
+//     onUpdate: updateProgress,
-  });
+//   });
-}
+// }
 
-function updateProgress() {
+// function updateProgress() {
-  animation.progress(progressWrap(gsap.getProperty(proxy, "x") / wrapWidth));
+//   animation.progress(progressWrap(gsap.getProperty(proxy, "x") / wrapWidth));
-}
+// }
 
-function snapX(value) {
+// function snapX(value) {
-  let snapped = gsap.utils.snap(slideWidth, value);
+//   let snapped = gsap.utils.snap(slideWidth, value);
-  return wrap
+//   return wrap
-    ? snapped
+//     ? snapped
-    : gsap.utils.clamp(-slideWidth * (numSlides - 1), 0, snapped);
+//     : gsap.utils.clamp(-slideWidth * (numSlides - 1), 0, snapped);
-}
+// }
 
 function resize() {
-  var norm = gsap.getProperty(proxy, "x") / wrapWidth || 0;
+  initializeSizes();
   
-  slideWidth = slides[0].offsetWidth;
+  // var norm = gsap.getProperty(proxy, "x") / wrapWidth || 0;
-  wrapWidth = slideWidth * numSlides;
 
-  wrap; // || draggable.applyBounds({minX: -slideWidth * (numSlides - 1), maxX: 0});
+  // slideWidth = slides[0].offsetWidth;
+  // wrapWidth = slideWidth * numSlides;
 
-  gsap.set(proxy, {
+  // wrap; // || draggable.applyBounds({minX: -slideWidth * (numSlides - 1), maxX: 0});
-    x: norm * wrapWidth,
+
-  });
+  // gsap.set(proxy, {
+  //   x: norm * wrapWidth,
+  // });
+
+  // animateSlides(0);
+  // slideAnimation.progress(1);
 
-  animateSlides(0);
-  slideAnimation.progress(1);
 }
 
 gsap.from("#be-to-powered path", {

src/assets/js/peripheral.js

@@ -1,14 +0,0 @@
-gsap.to(
-    "header",
-    {
-      duration: 0.5,
-      backgroundColor: "rgba(0,0,0,0.1)",
-      backdropFilter: "blur(10px)",
-      scrollTrigger: {
-          trigger: "#hero-image",
-          scrub: true,
-          start: "center top", // "triggerElement page"
-          end: "bottom top", // "triggerElement page"
-      },
-    }
-  );

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

@@ -0,0 +1,147 @@
+#be-your-own {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6rem;
+  //margin: 0 0 6rem 0;
+  padding: 0 6rem 0 6rem;
+  box-sizing: border-box;
+  width: 100%;
+
+  --size: 3rem;
+  --p-t: calc(0.2 * var(--size));
+  --p-b: calc(0 * var(--size));
+  --p: var(--p-t) 0 var(--p-b) calc(0.2 * var(--size));
+  --line: calc(var(--p-t) + var(--p-b) + var(--size));
+
+  h2 {
+    text-align: center;
+  }
+
+
+    #ticker {
+      height: 50vh;
+      position: relative;
+      width: 100%;
+
+      #ticker__selected-frame {
+        //outline: 1px solid white;
+        //outline-offset: calc(0.1 * var(--size));
+        font-size: var(--size);
+        text-transform: uppercase;
+        line-height: var(--size);
+        position: absolute;
+        top: calc(2 * var(--line));
+        left: -.5ch;
+        right: 0;
+        display: flex;
+        align-items: center;
+        height: var(--size);
+        padding: var(--p);
+        background-color: #353535;
+        border-bottom: 0.5rem #353535 solid;
+      }
+      #ticker__window {
+        height: 50vh;
+        width: calc(100vw - 12rem - 11.5ch);
+        overflow: hidden;
+        font-size: var(--size);
+        left: 11.5ch;
+        position: relative;
+      }
+
+      ul.pseudoservices {
+        margin: 0;
+        padding: 0;
+        li {
+          list-style: none;
+          font-size: var(--size);
+          line-height: 1;
+          display: flex;
+          align-items: center;
+          height: var(--size);
+          padding: var(--p);
+          white-space: nowrap;
+          overflow: hidden;
+        }
+      }
+
+      .services{
+        display: none;
+        position: absolute;
+        top: calc(3 * var(--line));
+        background-color: #353535;
+        padding: 2rem;
+        width: calc(11.5ch - 4rem);
+        font-size: var(--size);
+        left: -1rem;
+
+        img{
+          border-radius: 100%;
+          width: 5rem;
+        }
+        
+        .service{
+          display: flex;
+          align-items: center;
+
+          .service__content{
+            color: var(--c-1);
+            font-size: 1rem;
+            font-weight: 400;
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+          }
+        }
+      }
+    }
+  a.btn{
+    align-self: center;
+  }
+}
+
+.slides-controls {
+  padding: 10px;  
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 70px;
+  min-height: 70px;
+  gap: 2rem;
+
+  button{
+    background: none;
+    padding: 0;
+    border: 0;
+    cursor: pointer;
+  }
+}
+
+.slides-container {
+  position: relative;
+  overflow: hidden;  
+  display: none;
+  flex: 1;
+}
+
+.slide {
+  position: absolute;
+  font-size: 90px;
+  font-weight: 700;
+  color: rgba(255,255,255,0.9);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  
+  width: calc(100% / 3);
+  width: 100%;
+}
+
+.slides-inner {
+  position: relative;
+  height: 7rem;
+  width: 100%;  
+  overflow: hidden;
+}

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

@@ -1,3 +1,41 @@
+@media screen and (min-width: 900px) {
+  #be-your-own { --size: 3rem;
+    --rows-above: 2; 
+    --rows-height: 7;}
+}
+
+@media screen and (max-width: 1300px) {
+  #be-your-own { 
+    --rows-above: 1; 
+    --rows-height: 3;
+  }
+  .service__content{
+    justify-content: center !important;
+  }
+  .service__link{
+    margin: 10rem 0 0 0 !important;
+    flex-direction: row !important;
+  }
+  .service__info{
+    margin: 0 0 0 1rem !important;
+    &::before{
+      top: 25% !important;
+      left: -4rem !important;
+      align-self: flex-start !important;
+      justify-content: center !important;
+      border-top: 2rem transparent solid !important;
+              border-right: 2rem var(--c-text-accent) solid !important;
+              border-bottom: 2rem transparent solid !important;
+              border-left: 2rem transparent solid !important;
+    }
+  }
+
+}
+
+@media screen and (max-width: 900px) {
+  #be-your-own { --size: 2rem; }
+}
+
 #be-your-own {
   display: flex;
   flex-direction: column;
@@ -8,7 +46,7 @@
   box-sizing: border-box;
   width: 100%;
 
-  --size: 3rem;
+  //--size: 3rem;
   --p-t: calc(0.2 * var(--size));
   --p-b: calc(0 * var(--size));
   --p: var(--p-t) 0 var(--p-b) calc(0.2 * var(--size));
@@ -18,7 +56,6 @@
     text-align: center;
   }
 
-
   #ticker {
     height: 50vh;
     position: relative;
@@ -31,8 +68,8 @@
       text-transform: uppercase;
       line-height: var(--size);
       position: absolute;
-        top: calc(2 * var(--line));
+      top: calc(var(--rows-above) * var(--line));
-        left: -.5ch;
+      left: -0.5ch;
       right: 0;
       display: flex;
       align-items: center;
@@ -42,7 +79,7 @@
       border-bottom: 0.5rem #353535 solid;
     }
     #ticker__window {
-        height: 50vh;
+      height: calc(var(--rows-height) * var(--line));
       width: calc(100vw - 12rem - 11.5ch);
       overflow: hidden;
       font-size: var(--size);
@@ -67,31 +104,110 @@
     }
 
     .services {
-        display: none;
       position: absolute;
-        top: calc(3 * var(--line));
+      top: 0;
-        background-color: #353535;
+      bottom: 0;
+      //background-color: #353535;
       padding: 2rem;
-        width: calc(11.5ch - 4rem);
       font-size: var(--size);
       left: -1rem;
+      right: 0;
 
       img {
         border-radius: 100%;
         width: 5rem;
       }
 
-        .service{
+      .service-container {
-          display: flex;
+        display: none;
-          align-items: center;
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
 
-          .service__link{
+        .service__content {
+          width: 100%;
           color: var(--c-1);
           font-size: 1rem;
           font-weight: 400;
           display: flex;
           align-items: center;
+          justify-content: flex-end;
           gap: 1rem;
+          width: 100%;
+          position: absolute;
+          top: 0;
+          bottom: 0;
+          
+          .service__link{
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            margin-top: 2rem;
+            margin-right: 5rem;
+            transition: var(--t-simple);
+            &:hover{
+              transform: scale(1.05);
+            }
+          }
+
+          .service__image{
+            width: 12rem;
+            &.service__image--gitea, &.service__image--photoview{
+              background-color: var(--c-1);
+              padding: 1rem;
+              box-sizing: border-box;
+            }
+          }
+
+          .service__info{
+            background-color: var(--c-text-accent);
+            width: 20ch;
+            padding: 1rem;
+            margin-top: 1rem;
+            position: relative;
+            display: flex;
+            flex-direction: column;
+            box-shadow: 0 3rem 2rem 0rem rgb(0 0 0 / 40%);
+            
+            &::before{
+              position: absolute;
+              top: -4rem;
+              content: '';
+              display: block;
+              //width: 0;
+              //height: 0;
+              border-top: 2rem transparent solid;
+              border-right: 2rem transparent solid;
+              border-bottom: 2rem var(--c-text-accent) solid;
+              border-left: 2rem transparent solid;
+              align-self: center;
+            }
+            *{
+              color: var(--c-text-primary);
+            }
+            p{
+              font-size: .75rem;
+              height: 4em;
+              overflow: hidden;
+            }
+          }
+
+          .service__bkg{
+            filter: opacity(0.25) blur(2rem);
+            width: 100%;
+          position: absolute;
+          top: 0;
+          bottom: 0;
+          z-index: -1;
+          }
+
+          &:nth-child(n + 2) {
+            outline: 1px solid orange;
+            display: none !important;
+          }
         }
       }
     }

src/assets/styles/dev.scss

@@ -16,10 +16,11 @@
     gap:1rem;
   }
   .wrapper{
-    background-color: var(--c-1);
+    background: linear-gradient(45deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.05));
     max-width: 35ch;
+    padding: 2rem;
     .content {
-      padding: 1rem;
+      //padding: 1rem;
       h3{
         margin: 0;
         font-family: var(--f-accent);
@@ -33,7 +34,7 @@
     }
     .footer{
       padding: 1rem;
-      background: var(--c-spacer);
+      //background: var(--c-spacer);
       display: flex;
       justify-content: center;
     }
@@ -42,7 +43,7 @@
     position: relative;
     &::before{
       position: absolute;
-      top: 17rem;
+      top: 15rem;
       left: -4rem;
     content: '';
     display: block;
@@ -58,5 +59,6 @@
   img {
     width: 20rem;
     box-shadow: 0 3rem 2rem 0rem rgb(0 0 0 / 40%);
+    border-radius: 1.3rem;
   }
 }

src/assets/styles/footer.scss

@@ -7,8 +7,8 @@ footer{
         display: flex;
         .header{
             align-self: flex-start;
-            margin: 5rem 0 0 5rem;
+            margin: 1.8rem 0 0 5rem;
-            img{
+            svg{
                 width: 12rem;
             }
         }
@@ -105,19 +105,28 @@ footer{
   }
 
   @media only screen and (max-width: 650px) {
-    footer .groups li > a {
+
+    footer .footer__content {
+        flex-direction: column;
+        .header{
+            margin: 5rem 0 2.5rem 2.5rem;
+        }
+        .groups .full {
+            grid-row: auto;
+        }
+        .groups li > a {
             font-size: 3.5vmin;
           }
-    footer .groups{
+          .groups{
             display: grid;
             grid-template-columns: 1fr 1fr;
             grid-template-rows: 1fr 1fr 1fr;
-    }
+            li {
-
-    footer .groups li {
                 border: 0 !important;
             }
         }
+    }
+  }
 
   @media only screen and (max-width: 500px) {
     footer .groups li > a {

src/assets/styles/infographics.scss

@@ -39,4 +39,15 @@ section#infographics{
       }
     }
   }
+
+  .image-with-shadow{
+    width: 100%;
+    z-index: 1;
+    .img-shadow{
+      width: 100%;
+      svg{
+        width: 100%;
+      }
+    }
+  }
 }

src/assets/styles/landing.scss

@@ -107,8 +107,9 @@ nav {
   display: inline-flex;
   flex-direction: column;
   align-items: center;
-  img {
+  svg {
     width: 15rem;
+    margin-top: 0.6rem;
   }
   span{
     text-transform: uppercase;

src/assets/styles/main.scss

@@ -104,6 +104,14 @@ a {
     transition: var(--t-simple);
 }
 
+p a {
+    color: var(--c-text-primary);
+    text-decoration: underline;
+    &:hover{
+        color: var(--c-text-accent);
+    }
+}
+
 h1, h2, h3, h4, h5 {
     margin: 0;
     text-transform: uppercase;
@@ -127,15 +135,32 @@ header{
     z-index: 2;
     top:0;
 
-    .header__logo{
+    a.header__logo{
         opacity: 0;
         filter: blur(10px);
-        margin-top: -.9rem;
-        margin-bottom: -1rem;
         margin-left: 1rem;
-        height: fit-content;
+        display: flex;
-        img{
+        align-items: center;
+        position: relative;
+
+        svg{
            width:8rem; 
+           position: absolute;
+           path{
+        transition: var(--t-simple);
+                stroke-width: 0;
+              stroke: transparent;
+           }
+        }
+        &:hover{
+            svg path{
+              stroke-width: 0.4rem;
+              stroke: var(--c-text-primary);
+            }
+            svg path:last-child{
+              stroke-width: 0.4rem;
+              stroke: var(--c-text-accent);
+            }
           }
     }
 }

src/assets/styles/menu.scss

@@ -14,7 +14,7 @@
         .header{
             align-self: flex-start;
             margin: 5rem 0 0 5rem;
-            img{
+            svg{
                 width: 12rem;
             }
         }
@@ -60,6 +60,10 @@
         flex-direction: column;
         display: inline-block;
         white-space: nowrap;
+        --hover-padding: .5rem;
+        --hover-width: calc(100% + (2 * var(--hover-padding)));
+        --hover-nudge: calc(-1 * var(--hover-padding));
+
         &::after{
             content: '';
             position: absolute;
@@ -75,8 +79,8 @@
 
             &::after{
                 border: var(--b-primary);
-                width: 110%;
+                width: var(--hover-width);
-                left: -5%;
+                left: var(--hover-nudge);
                 opacity: 1;
             }
         }
@@ -88,8 +92,8 @@
                 z-index: -1;
                 //border: var(--b-primary);
                 background-color: var(--c-text-accent);
-                width: 110%;
+                width: var(--hover-width);
-                left: -5%;
+                left: var(--hover-nudge);
                 top: 6%;
                 display: inline-block; 
                 height: 85%; 

src/assets/styles/powered-by.scss

@@ -54,14 +54,14 @@ section#powered-by {
   svg {
     width: 45rem;
     max-width: calc(100vw - 12rem);
-    margin-top: 6rem;
+    //margin-top: 6rem;
   }
 
   a.source-link{
     margin-top: 5rem;
     display: flex;
     align-items: center;
-    font-size: 2rem;
+    font-size: 1.7rem;
     font-weight: 500;
     color: var(--c-text-bright);
     line-height: 1;
@@ -75,6 +75,7 @@ section#powered-by {
       border-radius: 999px;
       padding: .15em .6em;
       transition: var(--t-simple);
+      white-space: nowrap;
     }
     &:hover{
       transform: scale(1.05);

src/contact.njk

@@ -5,7 +5,7 @@ layout: layouts/peripheral.njk
 
 <section id="hero">
     <div id="hero-image">
-        <img src="../assets/images/contact-hero.png" alt=""/>
+        <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=""/>
     </div>
     <div id="logo">

src/dev.njk

@@ -5,7 +5,7 @@ layout: layouts/peripheral.njk
 
 <section id="hero">
     <div id="hero-image">
-        <img src="../assets/images/dev-hero.png" alt=""/>
+        <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=""/>
     </div>
     <div id="logo">

src/index.njk

@@ -32,6 +32,7 @@ layout: layouts/base.njk
 </script> #}
 
 <link rel="stylesheet" href="assets/styles/landing.css">
+<link rel="preload" as="image" href="assets/images/explosion.png">
 
 <div class="cube">
   <div class="cube__face"></div>
@@ -97,4 +98,6 @@ layout: layouts/base.njk
 <script defer src="{{ '/assets/js/ScrollSmoother.min.js' | url }}"></script>
 <script defer src="{{ '/assets/js/DrawSVGPlugin.min.js' | url }}"></script>
 <script defer src="{{ '/assets/js/CustomEase.min.js' | url }}"></script>
+<script defer src="{{ '/assets/js/_header.js' | url }}"></script>
+<script defer src="{{ '/assets/js/_menu.js' | url }}"></script>
 <script defer src="{{ '/assets/js/main.js' | url }}"></script>

src/jobs.njk

@@ -5,7 +5,7 @@ layout: layouts/peripheral.njk
 
 <section id="hero">
     <div id="hero-image">
-        <img src="../assets/images/jobs-hero.png" alt=""/>
+        <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=""/>
     </div>
     <div id="logo">

src/news.njk

@@ -5,7 +5,7 @@ layout: layouts/peripheral.njk
 
 <section id="hero">
     <div id="hero-image">
-        <img src="../assets/images/news-hero.png" alt=""/>
+        <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=""/>
     </div>
     <div id="logo">