initial commit

.eleventy.js

@@ -0,0 +1,49 @@
+const eleventySass = require("eleventy-sass");
+const path = require("path");
+require('dotenv').config();
+
+module.exports = function (eleventyConfig) {
+  
+    eleventyConfig.addPassthroughCopy('src/assets/fonts');
+    eleventyConfig.addPassthroughCopy('src/assets/js');
+    eleventyConfig.addPassthroughCopy('src/assets/images/**/*.png');
+    eleventyConfig.addPassthroughCopy('src/assets/images/**/*.svg');
+    // eleventyConfig.addPassthroughCopy('src/assets/images/**/*.jpg');
+    // eleventyConfig.addPassthroughCopy('src/assets/images/**/*.gif');
+  
+
+    const sassOptions = {
+      compileOptions: {
+        permalink: function(contents, inputPath) {
+          return path.format({
+            dir: "assets/styles",
+            name: path.basename(inputPath, path.extname(inputPath)),
+            ext: "." + process.env.VERSION + ".css"
+          });
+        }
+      },
+      // sass: {
+      //   loadPaths: ["src/_includes"],
+      //   style: "expanded",
+      //   sourceMap: true,
+      // },
+      // defaultEleventyEnv: "development"
+    };
+
+    //plugins
+    eleventyConfig.addPlugin(eleventySass, sassOptions);
+
+    // eleventyConfig.addFilter('isActive', (arr) => arr.filter(guest => guest.name != ''));
+    // eleventyConfig.addFilter('day', (arr,givenDate, givenLoc) => arr.filter(guest => guest.dates.some(e => (e.date == givenDate && e.day == givenLoc))));
+    // eleventyConfig.addFilter('night', (arr,givenDate, givenLoc) => arr.filter(guest => guest.dates.some(e => (e.date == givenDate && e.night == givenLoc))));
+    // //eleventyConfig.addFilter('total', (arr) => arr.reduce((prev,current) => ({...prev, count: current.count + prev.count})));
+    // eleventyConfig.addFilter('total', arr => arr.map(a => a.count).reduce((prev,current) => current + prev));
+    // //https://stackoverflow.com/questions/5732043/how-to-call-reduce-on-an-array-of-objects-to-sum-their-properties
+    // eleventyConfig.addFilter('byGuest', (arr, givenSlug) => arr.filter(guest => guest.slug == givenSlug));
+    // eleventyConfig.addFilter('byDate', (arr,givenDate) => arr.filter(d => d.date == givenDate));
+    // eleventyConfig.addFilter('byAbbr', (arr,givenAbbr) => arr.filter(l => l.abbr == givenAbbr));
+
+    return {
+      dir: { input: "src", output: "_site", data: "_data" },
+    };
+  };

.gitignore

@@ -0,0 +1,8 @@
+# Dependencies
+/node_modules
+
+# Output directories
+/_site
+
+# Sensitive data
+.env

.vscode/settings.json

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

package.json

@@ -0,0 +1,21 @@
+{
+  "name": "wedding-schedule",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "start": "eleventy --serve",
+    "build": "eleventy"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@11ty/eleventy": "^1.0.1"
+  },
+  "dependencies": {
+    "dotenv": "^16.0.1",
+    "eleventy-sass": "^1.3.1",
+    "path": "^0.12.7"
+  }
+}

src/_data/env.js

@@ -0,0 +1,5 @@
+require('dotenv').config();
+
+module.exports = {
+  version: process.env.VERSION
+};

src/_data/projects.json

@@ -0,0 +1,52 @@
+[
+    {
+        "slug": "flylocal",
+        "company": "FlyLocal",
+        "link": "https://start9.com",
+        "project": "data driven web application",
+        "work": "design, architecture, front end, back end, database, devops",
+        "technologies": [
+            "VueJS", "OpenStreetMaps"
+        ],
+        "basic-technologies": [
+            "HTML", "SCSS", "SQL"
+        ]
+    },
+    {
+        "slug": "start9",
+        "company": "Start9 Labs",
+        "link": "https://start9.com",
+        "project": "landing page & company website",
+        "work": "design, architecture, full stack dev",
+        "technologies": [
+            "Eleventy", "GSAP"
+        ],
+        "basic-technologies": [
+            "HTML", "SCSS"
+        ],
+        "github": "https://github.com/start9labs/start9"
+    },
+    {
+        "slug": "graphic-vizion",
+        "company": "GraphicViZion",
+        "link": "https://graphicvizion.com",
+        "project": "suite of product websites and blogs",
+        "work": "design, architecture, full stack dev",
+        "technologies": [
+            "Eleventy"
+        ],
+        "basic-technologies": [
+            "HTML", "SCSS"
+        ]
+    },
+    {
+        "slug": "the-seasteading-institute",
+        "company": "The Seasteading Institute",
+        "link": "https://seasteading.org",
+        "project": "company website and blog",
+        "work": "design, WP dev, maintenance, migration",
+        "technologies": [
+            "Wordpress"
+        ]
+    }
+]

src/_includes/components/contact.njk

@@ -0,0 +1,91 @@
+<ul class="contact">
+    <li>
+        <span id="eeb-674867-207741"></span>
+        <script type="text/javascript">
+            (function () {
+                var ml = "kln-3Egfi2Fpo%hw0AameCs4.rtcD",
+                    mi = "=4EB=9@>ID7=4L=99CB81J<=4A?<I0=G@F;D2KDI71B66HK<C=99=9@K1BFF=4L=99CB8131820=99=45?<I0=G@F;D2KDI71B66HK<C=4E=9:B=45",
+                    o = "";
+                for (var j = 0, l = mi.length; j < l; j++) {
+                    o += ml.charAt(mi.charCodeAt(j) - 48);
+                }
+                document.getElementById("eeb-674867-207741").innerHTML = decodeURIComponent(o);
+            }());
+        </script>
+        <noscript>*protected email*</noscript>
+    </li>
+    <li>
+        <a href="tel:+15182076939">
+            <span>+1.518.207.6939</span>
+        </a>
+    </li>
+    <li>
+        <button class="btn" id="show-button" onclick="copyText()">find me on NOSTR</button>
+        <div id="input-container" style="display: none;">
+            <textarea
+                type="text"
+                id="input-text"
+                onclick="selectText()">npub1skj3cm05l26sjg8w8lxa5z4k6kueh0mccykp6zchf2wacu7mslfsney3cq</textarea>
+                <button class="btn" onclick="copyToClipboard()">
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        class="icon icon-tabler icon-tabler-copy"
+                        width="24"
+                        height="24"
+                        viewBox="0 0 24 24"
+                        stroke-width="1.5"
+                        stroke="var(--c-text)"
+                        fill="none"
+                        stroke-linecap="round"
+                        stroke-linejoin="round">
+                        <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+                        <rect x="8" y="8" width="12" height="12" rx="2"/>
+                        <path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"/>
+                    </svg>
+                </button>
+            </div>
+            <script>
+                function selectText() {
+                    document.getElementById("input-text").select();
+                }
+                function copyToClipboard() {
+                    var copyText = document.getElementById("input-text");
+                    copyText.select();
+                    copyText.setSelectionRange(0, 99999); // For mobile devices
+                    document.execCommand("copy");
+                    // alert("Copied to clipboard: " + copyText.value);
+                    document
+                        .getElementById("input-container")
+                        .style
+                        .display = "none";
+                    document
+                        .getElementById("show-button")
+                        .style
+                        .display = "flex";
+                    document.getElementById("show-button").innerHTML = `
+                        pubkey copied <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-clipboard-check" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="var(--c-text)" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                            <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+                            <path d="M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2" />
+                            <rect x="9" y="3" width="6" height="4" rx="2" />
+                            <path d="M9 14l2 2l4 -4" />
+                        </svg>
+                    `;
+                    document
+                        .getElementById("show-button")
+                        .classList
+                        .add("nostr-copied");
+                }
+                function copyText() {
+                    document
+                        .getElementById("input-container")
+                        .style
+                        .display = "flex";
+                    document
+                        .getElementById("show-button")
+                        .style
+                        .display = "none";
+                    selectText();
+                }
+            </script>
+        </li>
+    </ul>

src/_includes/components/header.njk

@@ -0,0 +1,12 @@
+<header>
+    <h2 class="left">
+        designer / developer
+    </h2>
+    <h1>
+        {# Loremip Sumpr #}
+        Spencer Flagg
+    </h1>
+    <h2 class="right">
+        est. 2007
+    </h2>
+</header>

src/_includes/components/list.njk

@@ -0,0 +1,5 @@
+<ul class="projects">
+    {% for project in projects %}
+        {% include "components/project.njk" %}
+    {% endfor %}
+</ul>

src/_includes/components/project.njk

@@ -0,0 +1,24 @@
+<li class="project" id="{{ project.slug }}">
+    <a class="project__image-wrapper" href="{{ project.link }}"><img class="project__image" src="./assets/images/{{ project.slug }}.png" alt=""></a>
+    <div class="project__content">
+        <label>company</label>
+        <div class="content__field"><strong>{{ project.company }}</strong></div>
+        <label>project</label>
+        <div class="content__field"><a href="{{ project.link }}">{{ project.project }}</a></div>
+        <label>work</label>
+        <div class="content__field">{{ project.work }}</div>
+        <label>tech stack</label>
+        <ul class="content__field tags">
+            {% for tech in project.technologies %}
+                <li class="tag">
+                    <span>{{ tech }}</span>
+                </li>
+            {% endfor %}
+            {% for tech in project['basic-technologies'] %}
+                <li class="tag tag--basic">
+                    <span>{{ tech }}</span>
+                </li>
+            {% endfor %}
+        </ul>
+    </div>
+</li>

src/_includes/layouts/base.njk

@@ -0,0 +1,42 @@
+{# https://11ty.rocks/posts/create-your-first-basic-11ty-website/ #}
+
+<!DOCTYPE html>
+<html lang="en">
+<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.{{env.version}}.css">
+</head>
+<body>
+  
+  <div id="wrapper">
+    <div id="content">
+      <main>
+        {{ content | safe }}
+      </main>
+    </div>
+  </div>
+
+  {# <script>
+
+    window.addEventListener('scroll', function() {
+      let boxes = document.querySelectorAll('img.project__image');
+      let scrollTop = window.scrollY;
+      let windowHeight = window.innerHeight;
+      boxes.forEach(box => {
+        let boxTop = box.offsetTop;
+        let boxBottom = boxTop + box.offsetHeight;
+        let midpoint = boxTop + (box.offsetHeight/2);
+        let diffFromMidpoint = Math.abs(scrollTop - midpoint);
+        let maxDiff = (windowHeight/2) + (box.offsetHeight/2);
+        let shadowAmount = (diffFromMidpoint/maxDiff * 20) - 10;
+        box.style.boxShadow = `10px ${shadowAmount}px 0 0 var(--c-offset)`;
+      });
+    });
+
+  </script> #}
+
+</body>
+</html>