first commit?

.eleventy.js

@@ -0,0 +1,22 @@
+const eleventySass = require("eleventy-sass");
+//const gsap = require('gsap');
+
+module.exports = function (eleventyConfig) {
+
+  // passthrus
+  //eleventyConfig.addPassthroughCopy("./src/assets/styles");
+
+  eleventyConfig.addPassthroughCopy('src/assets/fonts');
+  eleventyConfig.addPassthroughCopy("./src/assets/js");
+  eleventyConfig.addPassthroughCopy('src/assets/images/**/*.png');
+  eleventyConfig.addPassthroughCopy('src/assets/images/**/*.svg');
+  eleventyConfig.addPassthroughCopy('src/assets/images/**/*.jpg');
+  eleventyConfig.addPassthroughCopy('src/assets/images/**/*.gif');
+
+  //plugins
+  eleventyConfig.addPlugin(eleventySass);
+
+  return {
+    dir: { input: "src", output: "_site", data: "_data" },
+  };
+};

.gitignore

@@ -0,0 +1,7 @@
+# Dependencies
+/node_modules
+
+# Output directories
+/_site
+
+.env

.vscode/settings.json

@@ -0,0 +1,9 @@
+{
+  "files.associations": {
+      "*.html": "nunjucks"
+  },
+  "emmet.includeLanguages": {
+      "njk": "html",
+      "nunjucks": "html"
+  }
+}

index.js

@@ -0,0 +1,4 @@
+// Set options as a parameter, environment variable, or rc file.
+// eslint-disable-next-line no-global-assign
+require = require("esm")(module/* , options */)
+module.exports = require("./main.js")

main.js

@@ -0,0 +1,2 @@
+// ESM syntax is supported.
+export {}

package.json

@@ -0,0 +1,23 @@
+{
+  "name": "start9-landing",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "module": "main.js",
+  "scripts": {
+    "start": "eleventy --serve",
+    "build": "eleventy"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@11ty/eleventy": "^1.0.1"
+  },
+  "dependencies": {
+    "eleventy-sass": "^1.3.1",
+    "esm": "^3.2.25",
+    "gsap": "^3.10.4",
+    "webpack": "^5.72.1"
+  }
+}

readme.md

@@ -0,0 +1,75 @@
+# Start9 website
+
+## Architecture
+
+- [11ty](https://www.11ty.dev) for Static Site Generator
+
+## *TO UPDATE* Getting started
+
+### for now...
+```
+npm start
+```
+
+Run the following command on your local environment:
+
+```
+git clone --depth=1 https://github.com/ixartz/Eleventy-Starter-Boilerplate.git my-project-name
+cd my-project-name
+npm install
+```
+
+Then, you can run locally in development mode with live reload:
+
+```
+npm run dev
+```
+
+Open http://localhost:8080 with your favorite browser to see your blog.
+
+## *TO UPDATE* Project structure
+
+```
+.
+├── public             # Static files
+│   └── assets
+│       └── images     # Images not needed by Webpack
+└── src
+    ├── _data          # Eleventy data folder
+    ├── _includes
+    │   └── components # HTML layout files
+    │   └── layouts    # HTML layout files
+    ├── assets         # Assets folder that needs to be processed by Webpack
+    │   ├── images
+    │   │   └── posts  # Images used in your blog posts (will be compressed by Webpack)
+    │   └── styles     # Your blog CSS files
+    └── posts          # Your blog posts
+```
+
+## *TO UPDATE* Customization
+
+You can easily configure Eleventy Starter Boilerplate. Please change the following file:
+
+- `public/assets/images/logo.png`: your blog logo
+- `public/apple-touch-icon.png`, `public/favicon.ico`, `public/favicon-16x16.png` and `public/favicon-32x32.png`: your blog favicon, you can generate from https://favicon.io/favicon-converter/
+- `src/_data/site.json`: your blog configuration
+- `src/_includes/layouts`: your blog HTML layout
+- `src/assets/styles/main.css`: your blog CSS file using Tailwind CSS
+
+## Deploy to production
+
+You can see the results locally in production mode with:
+
+```
+npm run serve
+```
+
+The generated HTML and CSS files are minified. It will also removed unused CSS from [Tailwind CSS](https://tailwindcss.com).
+
+You can create an optimized production build with:
+
+```
+npm run build
+```
+
+Now, your blog is ready to be deployed. All generated files are located at `_site` folder, which you can deploy with any hosting service.

src/_data/highlights.json

@@ -0,0 +1,26 @@
+[
+    {
+        "name": "Open Source",
+        "slug": "open-source"
+    },
+    {
+        "name": "Privacy by default",
+        "slug": "privacy"
+    },
+    {
+        "name": "World-class Customer Support",
+        "slug": "support"
+    },
+    {
+        "name": "Official and Community Marketplaces",
+        "slug": "marketplace"
+    },
+    {
+        "name": "<em>Plug 'n play</em><br>(No technical experience required)",
+        "slug": "plug-n-play"
+    },
+    {
+        "name": "Developer SDK",
+        "slug": "sdk"
+    }
+]

src/_data/menu.json

@@ -0,0 +1,138 @@
+[
+  {
+    "name": "Our Company",
+    "slug": "company",
+    "order": 0,
+    "size": "full",
+    "items": [
+      {
+        "name": "About",
+        "slug": "about",
+        "url": "",
+        "target": "",
+        "order": 0,
+        "class": ""
+      },
+      {
+        "name": "News/Media",
+        "slug": "news",
+        "url": "",
+        "target": "",
+        "order": 1,
+        "class": ""
+      },
+      {
+        "name": "Contact",
+        "slug": "contact",
+        "url": "",
+        "target": "",
+        "order": 2,
+        "class": ""
+      },
+      {
+        "name": "Team",
+        "slug": "team",
+        "url": "",
+        "target": "",
+        "order": 3,
+        "class": ""
+      },
+      {
+        "name": "Jobs",
+        "slug": "jobs",
+        "url": "",
+        "target": "",
+        "order": 4,
+        "class": ""
+      }
+    ]
+  },
+  {
+    "name": "Our Products",
+    "slug": "products",
+    "order": 1,
+    "size": "full",
+    "items": [
+      {
+        "name": "Embassy ONE",
+        "slug": "embassy-one",
+        "url": "",
+        "target": "",
+        "order": 0,
+        "class": ""
+      },
+      {
+        "name": "Embassy Pro",
+        "slug": "embassy-pro",
+        "url": "",
+        "target": "",
+        "order": 1,
+        "class": ""
+      },
+      {
+        "name": "Store",
+        "slug": "store",
+        "url": "",
+        "target": "",
+        "order": 2,
+        "class": "highlight"
+      }
+    ]
+  },
+  {
+    "name": "EmbassyOS",
+    "slug": "embassyos",
+    "order": 2,
+    "size": "half",
+    "items": [
+      {
+        "name": "Support",
+        "slug": "support",
+        "url": "",
+        "target": "",
+        "order": 0,
+        "class": ""
+      },
+      {
+        "name": "Docs",
+        "slug": "docs",
+        "url": "",
+        "target": "",
+        "order": 1,
+        "class": ""
+      },
+      {
+        "name": "Marketplace",
+        "slug": "marketplace",
+        "url": "",
+        "target": "",
+        "order": 2,
+        "class": ""
+      }
+    ]
+  },
+  {
+    "name": "Developers",
+    "slug": "developers",
+    "order": 3,
+    "size": "half",
+    "items": [
+      {
+        "name": "Contribute",
+        "slug": "contribute",
+        "url": "",
+        "target": "",
+        "order": 0,
+        "class": ""
+      },
+      {
+        "name": "Dev Docs",
+        "slug": "dev-docs",
+        "url": "",
+        "target": "",
+        "order": 1,
+        "class": ""
+      }
+    ]
+  }
+]

src/_data/pseudoservices.json

@@ -0,0 +1,122 @@
+[
+    {
+      "name": "elit ad magna",
+      "url": "https://start9.com/marketplace/175"
+    },
+    {
+      "name": "sit culpa",
+      "url": "https://start9.com/marketplace/175"
+    },
+    {
+      "name": "sunt veniam irure",
+      "url": "https://start9.com/marketplace/199"
+    },
+    {
+      "name": "cillum do",
+      "url": "https://start9.com/marketplace/148"
+    },
+    {
+      "name": "aute",
+      "url": "https://start9.com/marketplace/126"
+    },
+    {
+      "name": "voluptate",
+      "url": "https://start9.com/marketplace/186"
+    },
+    {
+      "name": "aliquip",
+      "url": "https://start9.com/marketplace/119"
+    },
+    {
+      "name": "exercitation",
+      "url": "https://start9.com/marketplace/132"
+    },
+    {
+      "name": "culpa",
+      "url": "https://start9.com/marketplace/165"
+    },
+    {
+      "name": "nisi fugiat",
+      "url": "https://start9.com/marketplace/158"
+    },
+    {
+      "name": "non culpa",
+      "url": "https://start9.com/marketplace/151"
+    },
+    {
+      "name": "cillum nostrud ad",
+      "url": "https://start9.com/marketplace/103"
+    },
+    {
+      "name": "irure",
+      "url": "https://start9.com/marketplace/181"
+    },
+    {
+      "name": "anim",
+      "url": "https://start9.com/marketplace/138"
+    },
+    {
+      "name": "consequat adipisicing",
+      "url": "https://start9.com/marketplace/157"
+    },
+    {
+      "name": "reprehenderit",
+      "url": "https://start9.com/marketplace/199"
+    },
+    {
+      "name": "sint consequat anim",
+      "url": "https://start9.com/marketplace/134"
+    },
+    {
+      "name": "fugiat id",
+      "url": "https://start9.com/marketplace/169"
+    },
+    {
+      "name": "labore officia",
+      "url": "https://start9.com/marketplace/145"
+    },
+    {
+      "name": "laboris",
+      "url": "https://start9.com/marketplace/103"
+    },
+    {
+      "name": "sunt",
+      "url": "https://start9.com/marketplace/189"
+    },
+    {
+      "name": "ex ut ipsum",
+      "url": "https://start9.com/marketplace/119"
+    },
+    {
+      "name": "adipisicing",
+      "url": "https://start9.com/marketplace/135"
+    },
+    {
+      "name": "qui",
+      "url": "https://start9.com/marketplace/172"
+    },
+    {
+      "name": "anim",
+      "url": "https://start9.com/marketplace/126"
+    },
+    {
+      "name": "do adipisicing est",
+      "url": "https://start9.com/marketplace/199"
+    },
+    {
+      "name": "et nulla",
+      "url": "https://start9.com/marketplace/118"
+    },
+    {
+      "name": "in qui",
+      "url": "https://start9.com/marketplace/123"
+    },
+    {
+      "name": "proident duis",
+      "url": "https://start9.com/marketplace/141"
+    },
+    {
+      "name": "sint Lorem velit",
+      "url": "https://start9.com/marketplace/193"
+    }
+  ]

src/_includes/components/_list-of-posts.njk

@@ -0,0 +1,5 @@
+<ul>
+{% for post in collections.posts %}
+<li><a href="{{ post.url }}">{{ post.data.title }}</a></li>
+{% endfor %}
+</ul>

src/_includes/components/footer.njk

@@ -0,0 +1,3 @@
+<footer>
+    footer
+</footer>

src/_includes/components/header.njk

@@ -0,0 +1,17 @@
+<header>
+  <nav>
+    <ul>
+      <li class="closed-menu">
+        <a href="/store" class="em">store</a>
+      </li>
+      <li class="closed-menu">
+        <a href="/store">dev community</a>
+      </li>
+      <li class="closed-menu">
+        <a id="menu-open" href="#">menu</a>
+      </li>
+      <li class="opened-menu">
+        <a id="menu-close" href="#">close</a>
+      </li>
+    </ul></nav>
+</header>

src/_includes/components/landing/community.njk

@@ -0,0 +1,5 @@
+<section id="community">
+    <h2>Join the Party</h2>
+    <input type="email" name="" id="" placeholder="email">
+    <div></div>
+</section>

src/_includes/components/landing/dev.njk

@@ -0,0 +1,18 @@
+<section id="dev">
+    <h2>Looking to Contribute?</h2>
+    <div class="cols">
+        <div class="col">
+            <div class="wrapper">
+                <div class="content">
+                    <h3>Our community runs on devs like <em>you</em>.</h3>
+                </div>
+                <div class="footer">
+                    <a href="">learn more</a>
+                </div>
+            </div>
+        </div>
+        <div class="col">
+            <img src="assets/images/dockerfile.png" alt="">
+        </div>
+    </div>
+</section>

src/_includes/components/landing/hero.njk

@@ -0,0 +1,12 @@
+<section id="hero">
+    <div id="hero-image">
+        <img src="assets/images/explosion.png" alt="">
+    </div>
+    <div id="logo">
+        <img src="assets/images/start9_logo.png" alt="">
+        <span>sovereign computing</span>
+    </div>
+    <div id="hero-to-pitch_1">
+        {% include "components/landing/lines/hero-to-pitch_1.njk" %}
+    </div>
+</section>

src/_includes/components/landing/highlights.njk

@@ -0,0 +1,20 @@
+<section id="highlights">
+    <aside>
+        <h1>Take back control of your digital life</h1>
+        <div class="content">
+            <div class="spacer"></div>
+            <div class="blurb">
+                <p>We built an operating system from the ground up so you can run your own server and own your data.</p>
+                <p><strong>This is your <em>personal cloud</em>.</strong></p>
+            </div>
+        </div>
+    </aside>
+    <ul>
+        {% for highlight in highlights %}
+        <li>
+            <div class="highlight-icon">{% include "components/svg/" + highlight.slug + ".njk" %}</div>
+            <h3>{{highlight.name|safe}}</h3>
+        </li>
+        {% endfor %}
+    </ul>
+</section>

src/_includes/components/landing/how.njk

@@ -0,0 +1,24 @@
+<section id="how">
+    <h2>How does it work?</h2>
+    <div class="cols">
+        <div class="col">
+            <h3>Simple & Fast</h3>
+            <div class="path-node">
+                <h4>For Everyone</h4>
+                <p>No assembly required.</p>
+                <p>No coding.</p>
+                <p>No command line.</p>
+                <p>Just plug it in.</p>
+            </div>
+        </div>
+        <div class="col">
+            <h3>DIY</h3>
+            <div class="path-node">
+                <h4>For the Tinkerer</h4>
+                <p>You assemble the hardware.</p>
+        <p>You download the OS or build from source.
+        </p>
+            </div>
+        </div>
+    </div>
+</section>

src/_includes/components/landing/lines/hero-to-pitch_1.njk

@@ -0,0 +1,3 @@
+<svg width="210" height="511" viewBox="0 0 210 511" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="xyz" d="M209 0V336.811H1V511" stroke="#FFF" stroke-opacity="0.8"/>
+</svg>

src/_includes/components/landing/lines/pitch-to-highlights_1.svg

@@ -0,0 +1,3 @@
+<svg width="358" height="1" viewBox="0 0 358 1" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="1" d="M0 0.5H357.5" stroke="#FFF" stroke-opacity="0.8"/>
+</svg>

src/_includes/components/landing/lines/pitch-to-highlights_2.svg

@@ -0,0 +1,3 @@
+<svg width="139" height="367" viewBox="0 0 139 367" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="2" d="M138 0V196.208H1V367" stroke="#FFF" stroke-opacity="0.8"/>
+</svg>

src/_includes/components/landing/pitch.njk

@@ -0,0 +1,5 @@
+<section id="pitch">
+    <h1>
+        We make personal servers <img class="img-inline" src="assets/images/embassy_one.png" alt=""> to make you <em>unstoppable</em>.
+    </h1>
+</section>

src/_includes/components/landing/products.njk

@@ -0,0 +1,71 @@
+<section id="products">
+    <div class="product-group">
+        <div class="product">
+            <div class="product__box">
+                <div class="front">
+                <h1>Embassy ONE</h1>
+                </div>
+                <div class="back">
+                Back
+                </div>
+                <div class="top">
+                Top
+                </div>
+                <div class="bottom">
+                Bottom
+                </div>
+                <div class="left">
+                Left
+                </div>
+                <div class="right">
+                You assemble the hardware. You download the OS or build from source.
+                </div>
+            </div>
+        </div>
+        <div class="product product--pro">
+            <div class="product__box">
+                <div class="front">
+                <h1>Embassy PRO</h1>
+                </div>
+                <div class="back">
+                Back
+                </div>
+                <div class="top">
+                Top
+                </div>
+                <div class="bottom">
+                Bottom
+                </div>
+                <div class="left">
+                Left
+                </div>
+                <div class="right">
+                You assemble the hardware. You download the OS or build from source.
+                </div>
+            </div>
+        </div>
+        <div class="product">
+            <div class="product__box">
+                <div class="front">
+                <h1>Do it yourself</h1>
+                </div>
+                <div class="back">
+                Back
+                </div>
+                <div class="top">
+                Top
+                </div>
+                <div class="bottom">
+                Bottom
+                </div>
+                <div class="left">
+                Left
+                </div>
+                <div class="right">
+                You assemble the hardware. You download the OS or build from source.
+                </div>
+            </div>
+        </div>
+    </div>
+    <aside><h3>Welcome to the <em>revolution</em>.</h3></aside>
+</section>

src/_includes/components/landing/why.njk

@@ -0,0 +1,38 @@
+<section id="why">
+    <h2>Why run your own server?</h2>
+    <div class="nodes">
+        <div class="row">
+            <div class="path-node path-node-text">
+                <p>Right now, your favorite apps send your personal data off to live on a server somewhere else - where it can be analyzed, censored, sold or worse.</p>
+            </div>
+            <div class="path-node path-node-img">
+                <img src="assets/images/big-tech-theft.gif" alt="">
+            </div>
+        </div>
+        <div class="row">
+            <div class="path-node path-node-text">
+                <p>But when you run your own server, you control your data. Your data never has to leave the privacy of your own home.</p>
+            </div>
+            <div class="path-node path-node-img">
+                <img src="assets/images/big-tech-fail.gif" alt="">
+            </div>
+        </div>
+    </div>
+    <div class="cols">
+        <div class="col">
+            <h3>When you run your own server, you are your <em>own cloud</em>.</h3>
+        </div>
+        <div class="col" id='ticker'>
+            <div id="ticker__selected-frame">
+                be your own
+            </div>
+            <div id="ticker__window">
+                <ul class='pseudoservices'>
+                    {% for pseudoservice in pseudoservices %}
+                    <li class="pseudoservice">{{pseudoservice.name}}</li>
+                    {% endfor %}
+                </ul>
+            </div>
+        </div>
+    </div>
+</section>

src/_includes/components/menu.njk

@@ -0,0 +1,19 @@
+<section id="menu">
+    <div class="menu-content">
+        <div class="header"><img src="assets/images/start9_logo.png" alt=""></div>
+        <ul class="groups">
+            {% for group in menu|sort(false, false, 'order') %}
+            <li class="{{group.size}}">
+                <h1>{{group.name}}</h1>
+                <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>
+                    </li>
+                    {% endfor %}
+                </ul>
+            </li>
+            {% endfor %}
+        </ul>
+    </div>
+</section>

src/_includes/components/svg/marketplace.njk

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-building-store" width="100" height="100" viewBox="0 0 24 24" stroke-width="var(--s-primary)" stroke="var(--c-line-accent)" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <line x1="3" y1="21" x2="21" y2="21" />
+  <path d="M3 7v1a3 3 0 0 0 6 0v-1m0 1a3 3 0 0 0 6 0v-1m0 1a3 3 0 0 0 6 0v-1h-18l2 -4h14l2 4" />
+  <line x1="5" y1="21" x2="5" y2="10.85" />
+  <line x1="19" y1="21" x2="19" y2="10.85" />
+  <path d="M9 21v-4a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v4" />
+</svg>

src/_includes/components/svg/matrix.njk

@@ -0,0 +1,3 @@
+<svg width="82" height="82" viewBox="0 0 82 82" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.16275 1.88588V80.1167H7.79256V82H0V0.00512468H7.79256V1.88844L2.16275 1.88588ZM26.2272 26.6816V30.6456H26.3323C27.317 29.1968 28.6227 27.9946 30.1478 27.1326C31.6315 26.305 33.3535 25.8924 35.2728 25.8924C37.1152 25.8924 38.8091 26.2537 40.3337 26.9609C41.8687 27.681 43.0167 28.9493 43.8162 30.7506C44.6849 29.4695 45.8739 28.3344 47.3524 27.3607C48.8361 26.387 50.5991 25.8924 52.6389 25.8924C54.0914 25.8778 55.5385 26.071 56.9362 26.4664C58.2712 26.8379 59.3936 27.4401 60.3392 28.2677C61.2745 29.1107 62.0074 30.1921 62.5429 31.527C63.0631 32.8595 63.3296 34.4763 63.3296 36.3724V55.9359H55.3116V39.3627C55.3139 38.4354 55.2729 37.5085 55.1886 36.5851C55.1398 35.7997 54.9314 35.0324 54.5761 34.3302C54.2416 33.6847 53.72 33.1551 53.0796 32.8108C52.4262 32.4213 51.5191 32.2368 50.3967 32.2368C49.2615 32.2368 48.3544 32.4495 47.6599 32.8748C46.9792 33.2987 46.4154 33.8863 46.0199 34.5839C45.6092 35.3187 45.3414 36.1247 45.2307 36.9592C45.1013 37.8487 45.0303 38.7457 45.018 39.6445V55.9384H36.9948V39.5369C36.9948 38.6683 36.982 37.815 36.9307 36.9746C36.9074 36.1689 36.7399 35.374 36.4362 34.6275C36.1687 33.9125 35.6711 33.3068 35.0217 32.9056C34.3682 32.4777 33.3919 32.2522 32.1107 32.2522C31.7238 32.2522 31.2189 32.3316 30.6039 32.5058C29.9889 32.6775 29.3765 32.9978 28.8025 33.4667C28.1532 34.0262 27.6375 34.724 27.2932 35.5089C26.8806 36.3878 26.6807 37.5485 26.6807 38.9911V55.9538H18.6576V26.6893L26.2272 26.6816ZM79.8372 80.1141V1.88332H74.2074V0H82V81.9949H74.2074V80.1116L79.8372 80.1141Z" fill="var(--c-text-primary)"/>
+</svg>

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

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-open-source" width="100" height="100" viewBox="0 0 24 24" stroke-width="var(--s-primary)" stroke="var(--c-line-accent)" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <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/components/svg/plug-n-play.njk

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-apple-arcade" width="100" height="100" viewBox="0 0 24 24" stroke-width="var(--s-primary)" stroke="var(--c-line-accent)" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <circle cx="12" cy="5" r="2" />
+  <path d="M20 12.5v4.75a0.734 .734 0 0 1 -.055 .325a0.704 .704 0 0 1 -.348 .366l-5.462 2.58a4.998 4.998 0 0 1 -4.27 0l-5.462 -2.58a0.705 .705 0 0 1 -.401 -.691l-.002 -4.75" />
+  <path d="M4.431 12.216l5.634 -2.332a5.065 5.065 0 0 1 3.87 0l5.634 2.332a0.692 .692 0 0 1 .028 1.269l-5.462 2.543a5.064 5.064 0 0 1 -4.27 0l-5.462 -2.543a0.691 .691 0 0 1 .028 -1.27z" />
+  <line x1="12" y1="7" x2="12" y2="13" />
+</svg>

src/_includes/components/svg/privacy.njk

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-eye-off" width="100" height="100" viewBox="0 0 24 24" stroke-width="var(--s-primary)" stroke="var(--c-line-accent)" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <line x1="3" y1="3" x2="21" y2="21" />
+  <path d="M10.584 10.587a2 2 0 0 0 2.828 2.83" />
+  <path d="M9.363 5.365a9.466 9.466 0 0 1 2.637 -.365c4 0 7.333 2.333 10 7c-.778 1.361 -1.612 2.524 -2.503 3.488m-2.14 1.861c-1.631 1.1 -3.415 1.651 -5.357 1.651c-4 0 -7.333 -2.333 -10 -7c1.369 -2.395 2.913 -4.175 4.632 -5.341" />
+</svg>

src/_includes/components/svg/sdk.njk

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-code" width="100" height="100" viewBox="0 0 24 24" stroke-width="var(--s-primary)" stroke="var(--c-line-accent)" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <polyline points="7 8 3 12 7 16" />
+  <polyline points="17 8 21 12 17 16" />
+  <line x1="14" y1="4" x2="10" y2="20" />
+</svg>

src/_includes/components/svg/support.njk

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-lifebuoy" width="100" height="100" viewBox="0 0 24 24" stroke-width="var(--s-primary)" stroke="var(--c-line-accent)" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <circle cx="12" cy="12" r="4" />
+  <circle cx="12" cy="12" r="9" />
+  <line x1="15" y1="15" x2="18.35" y2="18.35" />
+  <line x1="9" y1="15" x2="5.65" y2="18.35" />
+  <line x1="5.65" y1="5.65" x2="9" y2="9" />
+  <line x1="18.35" y1="5.65" x2="15" y2="9" />
+</svg>

src/_includes/components/svg/telegram.njk

@@ -0,0 +1,3 @@
+<svg width="63" height="62" viewBox="0 0 63 62" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M62.5049 31C62.5049 47.8436 48.6246 61.5 31.5049 61.5C14.3851 61.5 0.504883 47.8436 0.504883 31C0.504883 14.1564 14.3851 0.5 31.5049 0.5C48.6246 0.5 62.5049 14.1564 62.5049 31ZM32.6157 23.0166C29.601 24.2493 23.574 26.8037 14.5375 30.6772C13.0702 31.2516 12.3004 31.8133 12.2306 32.3623C12.1118 33.2926 13.295 33.6586 14.9018 34.1542C15.1214 34.2228 15.3487 34.2915 15.5812 34.3677C17.1648 34.8735 19.2935 35.4657 20.3991 35.4886C21.404 35.5089 22.5252 35.1023 23.7626 34.2686C32.205 28.6591 36.563 25.8252 36.8369 25.7642C37.0306 25.721 37.2993 25.665 37.4801 25.8252C37.661 25.9827 37.6429 26.2827 37.6248 26.364C37.506 26.8545 32.8715 31.0966 30.469 33.2926C29.7198 33.9763 29.1902 34.4618 29.0817 34.5736C28.8389 34.8201 28.5909 35.0565 28.3532 35.2827C26.8807 36.6755 25.7802 37.7227 28.4152 39.4307C29.681 40.2517 30.6937 40.9303 31.7038 41.6064C32.8069 42.346 33.9074 43.0831 35.3334 44.0032C35.695 44.237 36.0412 44.4785 36.3796 44.7148C37.6635 45.6171 38.8183 46.4254 40.2443 46.2983C41.071 46.222 41.9286 45.457 42.3626 43.172C43.3882 37.7685 45.4084 26.0666 45.876 21.2425C45.9044 20.842 45.8871 20.4396 45.8243 20.0429C45.7867 19.7225 45.6281 19.4276 45.38 19.2168C45.0105 18.9195 44.437 18.8559 44.1787 18.861C43.0136 18.8813 41.226 19.4939 32.6157 23.0166Z" fill="var(--c-text-primary)"/>
+</svg>

src/_includes/components/svg/twitter.njk

@@ -0,0 +1,3 @@
+<svg width="59" height="48" viewBox="0 0 59 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M58.5049 6.07506C56.372 7.01717 54.0807 7.65373 51.6719 7.94146C54.1573 6.45901 56.0168 4.12582 56.9033 1.37723C54.5682 2.75982 52.0125 3.73301 49.3474 4.25449C47.5552 2.34701 45.1813 1.0827 42.5944 0.657848C40.0075 0.233001 37.3522 0.671388 35.0409 1.90495C32.7295 3.13851 30.8913 5.09822 29.8118 7.47983C28.7323 9.86145 28.4717 12.5317 29.0706 15.076C24.3391 14.8392 19.7104 13.6134 15.4849 11.478C11.2594 9.34256 7.53161 6.34537 4.54337 2.68091C3.52162 4.43782 2.93411 6.47482 2.93411 8.64422C2.93297 10.5972 3.41544 12.5202 4.33871 14.2427C5.26199 15.9653 6.59752 17.434 8.22681 18.5186C6.33726 18.4586 4.48941 17.9497 2.83704 17.0341V17.1869C2.83685 19.926 3.78736 22.5808 5.52728 24.7009C7.26721 26.8209 9.68938 28.2756 12.3828 28.8182C10.6299 29.291 8.79219 29.3607 7.00836 29.0219C7.76829 31.3787 9.24855 33.4397 11.2419 34.9162C13.2353 36.3928 15.642 37.211 18.1251 37.2564C13.9099 40.5549 8.70419 42.3441 3.34537 42.3362C2.39611 42.3364 1.44765 42.2812 0.504883 42.1707C5.9444 45.6569 12.2764 47.5072 18.7432 47.5C40.6344 47.5 52.6017 29.4267 52.6017 13.752C52.6017 13.2427 52.5889 12.7284 52.5659 12.2192C54.8937 10.5411 56.9031 8.46317 58.4998 6.0827L58.5049 6.07506Z" fill="var(--c-text-primary)"/>
+</svg>

src/_includes/components/svg/youtube.njk

@@ -0,0 +1,3 @@
+<svg width="62" height="42" viewBox="0 0 62 42" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M60.2167 6.92527C59.8685 5.68313 59.1902 4.55855 58.2539 3.67109C57.2912 2.75635 56.1113 2.10201 54.8255 1.76984C50.0134 0.501476 30.7343 0.501476 30.7343 0.501476C22.6971 0.410033 14.6618 0.812223 6.67392 1.70578C5.38811 2.06249 4.21039 2.73145 3.24551 3.65316C2.29744 4.56535 1.61073 5.69022 1.25201 6.92271C0.390271 11.565 -0.0284184 16.2787 0.00158144 21.0002C-0.0291667 25.7175 0.388495 30.4296 1.25201 35.0777C1.60305 36.3051 2.28719 37.4249 3.23782 38.3294C4.18845 39.2339 5.37225 39.8873 6.67392 40.2332C11.5501 41.499 30.7343 41.499 30.7343 41.499C38.7818 41.5905 46.8273 41.1884 54.8255 40.2947C56.1113 39.9625 57.2912 39.3082 58.2539 38.3934C59.1898 37.5061 59.8673 36.3814 60.2141 35.1392C61.0983 30.4987 61.5283 25.7831 61.4978 21.0592C61.5643 16.3152 61.1349 11.5774 60.2167 6.92271V6.92527ZM24.6052 29.7737V12.2293L40.6455 21.0028L24.6052 29.7737Z" fill="var(--c-text-primary)"/>
+</svg>

src/_includes/layouts/base.njk

@@ -0,0 +1,55 @@
+{# https://11ty.rocks/posts/create-your-first-basic-11ty-website/ #}
+
+<!DOCTYPE html>
+<html lang="en" style="--scrollbarWidth: 0px; --viewportWidth: calc(100vw - var(--scrollbarWidth));">
+<head>
+    <meta charset="UTF-8">
+    <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">
+</head>
+<body>
+  
+  {% include "components/header.njk" %}
+
+  {% include "components/menu.njk" %}
+  
+  <main>
+    {{ content | safe }}
+  </main>
+
+  {% include "components/footer.njk" %}
+
+  <script>
+    window.onload = setScrollbarVariable;
+    document.onload = setScrollbarVariable;
+    window.onresize = setScrollbarVariable;
+
+    function setScrollbarVariable() {
+
+      const viewportDependantWidth = (typeof window.orientation !== "undefined") ? screen.width : window.innerWidth;
+
+      const scrollbarWidth = viewportDependantWidth - document.body.clientWidth;
+      document.documentElement.style.setProperty("--scrollbarWidth", `${scrollbarWidth}px`);
+
+      console.log(scrollbarWidth);
+    }
+
+  </script>
+
+  <style>
+    :root{
+      --viewportWidth: calc(100vw - var(--scrollbarWidth));
+    }
+  </style>
+
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
+  <script src="{{ '/assets/js/gsap.min.js' | url }}"></script>
+  <script src="{{ '/assets/js/ScrollTrigger.min.js' | url }}"></script>
+  <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>
+</body>
+</html>

src/_includes/post.njk

@@ -0,0 +1,5 @@
+---
+layout: layouts/base.njk
+---
+
+<article>{{ content | safe}}</article>

src/_includes/post.scss

@@ -0,0 +1,3 @@
+html {
+    color:green;
+}