peripheral heros; jobs page; product section tweaks

src/_data/canary.json

@@ -1,3 +0,0 @@
-{
-    "text": "WE HAVE NEVER RECEIVED A SECRET GOVERNMENT REQUEST TO HAND OVER USER INFORMATION."
-}

src/_data/jobs.json

@@ -0,0 +1,33 @@
+[
+  {
+    "title": "Social Media and Content Marketing Lead",
+    "blurb": "The goal is omnipresence: Twitter threads, TikTok skits, YouTube videos, blog posts, podcasts. Any thread, conversation, or debate about Bitcoin/Lightning nodes, data privacy, or sovereign technology - Start9 is there. From shit posting on Twitter to extended essays on the moral justification for Stateless money, Start9 is a voice for freedom and for the sovereign individual.",
+    "description": [
+      "Work with CEO on content strategy",
+      "Identify opportunities to grow and foster the Start9 community",
+      "Manage social media accounts",
+      "Meme at will",
+      "Triage support issues that arise in public forums or DMs",
+      "Manage content pipelines of Start9 team members and coordinate publication for optimal engagement"
+    ],
+    "requirements": [
+      "Passion for Bitcoin and sovereign technology",
+      "Excellent written communication skills",
+      "Good sense of humor",
+      "Organized",
+      "Familiarity with various platforms and how to optimize visibility and engagement on them",
+      "In tune with the cultures and trends of Start9’s markets"
+    ],
+    "benefits": [
+      "Competitive salary",
+      "Performance-based bonuses",
+      "A healthy equity package. You’re still early!",
+      "Work from anywhere in the world, including our Denver office",
+      "Health and dental insurance",
+      "Budget for new computer",
+      "Attend conferences",
+      "Team retreats!"
+    ],
+    "how": "Email us at jobs@start9labs.com with your resume and any other information you think we should know about you."
+  }
+]

src/_data/site.js

@@ -0,0 +1,15 @@
+module.exports = {
+      products: {
+        buyUrl: "https://store.start9.com/",
+        diyUrl: "https://start9.com/latest/diy",
+      },
+      bitcoin: {
+        whyRunBitcoinUrl: "https://bitcoinmagazine.com/culture/six-reasons-you-should-run-bitcoin-node",
+        whyRunLightningUrl: "",
+      },
+      footer: {
+        copyright: "© " + new Date().getFullYear() + " by START9 LABS, INC.",
+        canary:
+          "WE HAVE NEVER RECEIVED A SECRET GOVERNMENT REQUEST TO HAND OVER USER INFORMATION.",
+      },
+    };

src/_data/team.js

@@ -1,11 +1,46 @@
-const EleventyFetch = require("@11ty/eleventy-fetch");
+//const EleventyFetch = require("@11ty/eleventy-fetch");
 
 module.exports = async function() {
-  let url = "https://api.github.com/orgs/start9labs/public_members";
+  // let url = "https://api.github.com/orgs/start9labs/public_members";
 
-  /* This returns a promise */
-  return EleventyFetch(url, {
-    duration: "1d", // save for 1 day
-    type: "json"    // we’ll parse JSON for you
-  });
+  // /* This returns a promise */
+  // return EleventyFetch(url, {
+  //   duration: "1d", // save for 1 day
+  //   type: "json"
+  // });
+
+  return [
+    {
+      name: "Matt Hill",
+      login: "",
+      position: "co-founder & CEO",
+      avatar_url: "https://avatars.githubusercontent.com/u/9935159?v=4",
+      url: "https://github.com/MattDHill",
+      blurb: "Passionate leader by example with 12 years experience building products, teams, and companies. Matt is the founder and developer of WorkBlast, the co-creator of Borker, and the co-architect and former CTO of SALT Lending."
+    },
+    {
+      name: "Keagan McClelland",
+      login: "ProofOfKeags",
+      position: "co-founder & director of technology",
+      avatar_url: "https://avatars.githubusercontent.com/u/4033651?v=4",
+      url: "https://github.com/ProofOfKeags",
+      blurb: "Keagan has a decade of software development experience with expertise in cryptography, software security, formal methods, open-blockchain technology, and functional programming. His experience runs the gambit from large projects at the Department of Defense and Amazon, as well as small startups like Ionic Security and SALT Lending."
+    },
+    {
+      name: "Aiden McClelland",
+      login: "dr-bonez",
+      position: "co-founder & lead developer",
+      avatar_url: "https://avatars.githubusercontent.com/u/3732071?v=4",
+      url: "https://github.com/dr-bonez",
+      blurb: "Aiden is an expert developer with over a decade of experience building software applications from scratch. Aiden specializes in security, blockchain-based technologies, and performance tuning in low resource environments. Aiden possesses a highly-advanced understanding of computer science and is skilled across an incredible spectrum of languages, frameworks, and technologies."
+    },
+    {
+      name: "Lucy Cifferello",
+      login: "elvece",
+      position: "developer",
+      avatar_url: "https://avatars.githubusercontent.com/u/12953208?v=4",
+      url: "https://github.com/elvece",
+      blurb: "Having studied cognition and behavior, the processes of art, concepts of design, and the language of code, Lucy crafts with fused intent. Her background in psychology lends to a multidisciplinary approach to solving problems in both the logical and experiential realms, and this adeptness is expressed in her abilitiy to maneuver across the development stack."
+    },
+  ]
 };

src/_includes/components/footer.njk

@@ -2,7 +2,7 @@
     <div class="footer__content">
         <div class="header">
             <img src="../assets/images/start9_logo.png" alt="">
-            <div class="footer__copyright">© 2022, START9 LABS, INC.</div>
+            <div class="footer__copyright">{{ site.footer.copyright }}</div>
             <div class="footer__donate">[btcpay widget]</div>
             </div>
         <ul class="groups">
@@ -20,5 +20,5 @@
             {% endfor %}
         </ul>
     </div>
-    <div class="footer__canary">{{ canary.text }}</div>
+    <div class="footer__canary">{{ site.footer.canary }}</div>
 </footer>

src/_includes/components/landing/bitcoin.njk

@@ -5,14 +5,14 @@
         <p>
             <em>Don't trust, verify.</em>
             <br/>Run a full Bitcoin node to verify transactions and enforce the consensus rules you choose.</p>
-        <a class="btn btn--subtle" target="_blank" href="https://bitcoinmagazine.com/culture/six-reasons-you-should-run-bitcoin-node">why host a bitcoin node?</a>
+        <a class="btn btn--subtle" target="_blank" href="{{ site.bitcoin.whyRunBitcoinUrl }}">why host a bitcoin node?</a>
     </div>
     <div class="subsection">
         <h1>Become Lightning</h1>
         <p>
             <em>Not your keys, not your coins.</em>
             <br/>Run a Lightning node to take full control and custody over your Bitcoin on Lightning.</p>
-        <a class="btn btn--subtle" target="_blank" href="">why host a lightning node?</a>
+        <a class="btn btn--subtle" target="_blank" href="{{ site.bitcoin.whyRunLightningUrl }}">why host a lightning node?</a>
     </div>
     <div id="flying-icons">
         {% for service in services %}

src/_includes/components/landing/products.njk

@@ -1,6 +1,6 @@
 <section id="products">
         <div class="subsection">
-            <a class="product product--buy" href="">
+            <a class="product product--buy" href="{{ site.products.buyUrl }}">
                 <img src="../assets/images/buy.png" alt="">
                 <img class="img-shadow" src="../assets/images/buy.png" alt="">
                 <div class="heading">
@@ -11,7 +11,7 @@
             </a>
         </div>
         <div class="subsection">
-            <a class="product product--diy" href="">
+            <a class="product product--diy" href="{{ site.products.diyUrl }}">
                 <img src="../assets/images/diy.png" alt="">
                 <img class="img-shadow" src="../assets/images/diy.png" alt="">
                 <div class="heading">

src/about.njk

@@ -169,16 +169,20 @@ layout: layouts/peripheral.njk
         <img src="../assets/images/team.png" alt=""/>
         <img class="img-shadow" src="../assets/images/team.png" alt=""/>
     </div>
-    {% block content %}
-        <div>
-            <ul>
-                {% for member in team %}
-                    <li>
-                        {# <a href="/files/{{ member.login }}"> {{ member.thing2 }} </a> #}
-                        {{ member.login }}
-                    </li>
-                {% endfor %}
-            </ul>
-        </div>
-    {% endblock %}
+
+    <ul class="members">
+        {% for member in team %}
+            <li class="member">
+                <img class="member__avatar" src="{{ member.avatar_url }}" alt=""/>
+                <div class="member__content">
+                    <h4>{{ member.name }}</h4>
+                    <h5>{{ member.position }}</h5>
+                    <p>{{ member.blurb }}</p>
+                </div>
+            </li>
+        {% endfor %}
+    </ul>
+
+
+
 </section>

src/assets/js/main.js

@@ -208,7 +208,7 @@ 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)
-  .to('.product--buy img:first-child', {opacity:0, ease:'none', duration: 0.25}, 0);
+  .to('.product--buy img:first-child', {opacity:.4, ease:'none', duration: 0.25}, 0);
 
 buyAnchor.onmouseenter = () => buyTL.play()
 buyAnchor.onmouseleave = () => buyTL.reverse()
@@ -218,7 +218,7 @@ 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)
-  .to('.product--diy img:first-child', {opacity:0, ease:'none', duration: 0.25}, 0);
+  .to('.product--diy img:first-child', {opacity:.4, ease:'none', duration: 0.25}, 0);
 
 diyAnchor.onmouseenter = () => diyTL.play()
 diyAnchor.onmouseleave = () => diyTL.reverse()

src/assets/styles/peripheral.scss

@@ -6,7 +6,7 @@ main {
   overflow-x: clip;
 }
 
-.header__logo{
+.header__logo {
   opacity: 1 !important;
   filter: blur(0px) !important;
 }
@@ -37,7 +37,7 @@ section {
     display: flex;
     flex-direction: column;
     align-items: center;
-    margin: 2rem 0;
+    margin: 2rem 0 4rem 0;
     position: relative;
     img {
       width: 50%;
@@ -74,10 +74,10 @@ section#hero {
 }
 
 @media only screen and (max-width: 1245px) {
-    section#hero {
-        flex-direction: column;
-    }
+  section#hero {
+    flex-direction: column;
   }
+}
 
 section#virtues {
   .section__image img {
@@ -87,17 +87,17 @@ section#virtues {
 
 .section__double-image {
   position: relative;
-  .section__image{
+  .section__image {
     position: absolute;
-    top:-140%;
-    width:100%;
+    top: -140%;
+    width: 100%;
   }
-  .section__image--left{
-    left:-105%;
+  .section__image--left {
+    left: -105%;
     align-items: flex-end;
   }
-  .section__image--right{
-    right:-105%;
+  .section__image--right {
+    right: -105%;
 
     align-items: flex-start;
   }
@@ -175,3 +175,60 @@ p {
     font-weight: 700;
   }
 }
+
+/* about */
+
+.members {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 2rem;
+  .member {
+    display: flex;
+    gap: 1rem;
+
+    .member__avatar {
+      border-radius: 100%;
+      width: 10rem;
+      height: 10rem;
+      border: 1px solid var(--c-text-primary);
+    }
+    p {
+      font-size: .8rem;
+      line-height: 1.4;
+    }
+  }
+}
+
+section#jobs {
+  p{
+    line-height: 1.4;
+  }
+  .job {
+    list-style: none;
+  }
+  ul, ol { 
+    display: block;
+    list-style: disc outside none;
+    margin: 1em 0;
+    padding: 0 0 0 2rem;
+}
+ol { 
+    list-style-type: decimal;
+}
+li { 
+  display: list-item;
+  list-style: disc;
+  margin-bottom: .5rem;
+  &:last-child{
+    margin-bottom: 2rem;
+  }
+}
+ul ul, ol ul {
+  list-style-type: circle;
+  margin-left: 15px; 
+}
+ol ol, ul ol { 
+  list-style-type: lower-latin;
+  margin-left: 15px; 
+}
+}

src/assets/styles/products.scss

@@ -11,6 +11,7 @@ section#products {
 
     .heading{
       transition: var(--t-simple);
+      z-index: 1;
     }
 
     .product__header {
@@ -65,7 +66,7 @@ section#products {
       }
       background: linear-gradient(45deg, rgba(255, 255, 255, 0.0), rgba(255, 255, 255, 0.05));
       svg{
-        width: 27rem;
+        width: 27.5vw;
         position: absolute;
       }
     }
@@ -88,7 +89,7 @@ section#products {
       }
       background: linear-gradient(45deg, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.25));
       svg{
-        width: 27rem;
+        width: 27.5vw;
         position: absolute;
       }
     }

src/contact.njk

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

@@ -0,0 +1,16 @@
+---
+title: Developers | Start9 
+layout: layouts/peripheral.njk
+---
+
+<section id="hero">
+    <div id="hero-image">
+        <img src="../assets/images/dev-hero.png" alt=""/>
+        <img class="img-shadow" src="../assets/images/dev-hero.png" alt=""/>
+    </div>
+    <div id="logo">
+        <h1>
+            <span>Developers</span>
+        </h1>
+    </div>
+</section>

src/jobs.njk

@@ -0,0 +1,48 @@
+---
+title: Jobs | Start9 
+layout: layouts/peripheral.njk
+---
+
+<section id="hero">
+    <div id="hero-image">
+        <img src="../assets/images/jobs-hero.png" alt=""/>
+        <img class="img-shadow" src="../assets/images/jobs-hero.png" alt=""/>
+    </div>
+    <div id="logo">
+        <h1>
+            <span>Jobs</span>
+        </h1>
+    </div>
+</section>
+
+<section id="jobs">
+    <h2>{{ jobs|length }} {{ "Open Position" if jobs|length == 1 else "Open Positions" }}</h2>
+    <ul class="jobs">
+        {% for job in jobs %}
+        <li class="job">
+            <h3>{{ job.title }}</h3>
+            <p>{{ job.blurb }}</p>
+            <h4>Job Description</h4>
+            <ul>
+                {% for item in job.description %}
+                    <li>{{ item }}</li>
+                {% endfor %}
+            </ul>
+            <h4>Requirements</h4>
+            <ul>
+                {% for requirement in job.requirements %}
+                    <li>{{ requirement }}</li>
+                {% endfor %}
+            </ul>
+            <h4>Benefits</h4>
+            <ul>
+                {% for benefit in job.benefits %}
+                    <li>{{ benefit }}</li>
+                {% endfor %}
+            </ul>
+            <h4>How to Apply</h4>
+            <p>{{ job.how }}</p>
+        </li>
+        {% endfor %}
+    </ul>
+</section>

src/news.njk

@@ -0,0 +1,16 @@
+---
+title: News | Start9 
+layout: layouts/peripheral.njk
+---
+
+<section id="hero">
+    <div id="hero-image">
+        <img src="../assets/images/news-hero.png" alt=""/>
+        <img class="img-shadow" src="../assets/images/news-hero.png" alt=""/>
+    </div>
+    <div id="logo">
+        <h1>
+            <span>News</span>
+        </h1>
+    </div>
+</section>