jekyll-project-stack-portfolio 0.1.2

data/README.md

@@ -0,0 +1,121 @@
+## Run demo site locally
+```
+bundle install
+bundle exec jekyll serve --livereload
+```
+![alt text](image-2.png)
+
+# jekyll-project-stack-portfolio
+
+This theme is a little retro flavored and is designed to be a portfolio for projects, rather than a blog. It displays a stack of projects on the sidebar as a visual stack of VHS tapes, notebooks or (double) CD cases.
+
+![messy stack](image.png)
+
+# Features
+
+* Dark mode toggle
+* Mobile friendly
+* SEO friendly
+* Sooo customizable you can spend so much time procrastinating
+
+# Setup/Configure/Customize
+
+There are a few things you need in place to get this theme working. The default Jekyll quickstart build will set you up with _posts directory. For this theme, you need to create a `_projects` directory in the root of your repository. Then add this to your `_config.yml` file:
+
+``` yaml
+collections:
+  projects:
+    output: true
+    permalink: /projects/:name/
+
+defaults:
+  - scope:
+      path: ""
+      type: "projects"
+    values:
+      layout: "project"
+```
+This allows Jekyll to recognize markdown files in the `_projects` directory as a collection of project pages.
+
+A project's stack style is set in the frontmatter of each project markdown page.
+
+``` yaml
+---
+layout: project
+type: vhs               #<---- makes this as a VHS tape in the stack
+stack_style: tape    #<---- style class preset
+title: "Sketches".      #<---- Text on the spine of the tape (and page title)
+show_title: true.       #<---- show the title on the page (or not)
+draft: false            #<---- if true, this project will not be displayed in the stack
+---
+```
+#### type:
+
+Valid values are `vhs`, `notebook`, `cd`. Up to you, maybe vhs for video projects, notebook for art or writing, cd for music.
+
+#### stack_style:
+
+There are a few built-in `stack_style` presets are defined in the plugin - `tape`, `notebook`, `cd`. And if you omit the stack_syle, the item will fall back to a plain default. Probably what you want to do, though, is create your own presets.
+
+Make a new file in your repository at `_sass/_stack-presets.custom.scss` and copy the following into it:
+
+``` css
+// Stack style and color customization.
+/*
+    Name styles as a single word like .tape1
+    In the project .md file set the stack_style to that value (no .) `stack_style: tape1`
+    Tape color vars map to the VHS label bars from left to right.
+
+
+*/
+.tape1 {
+  --tab_unlocked: 1; // 0 or 1 to set whether the VHS lock tab is removed
+  --color1: #305198;
+  --color2: #305198;
+  --color3: #305198;
+  --color4: #305198;
+  --color5: #305198;
+
+  --color6: #305198
+  ;
+}
+
+.notebook1 {
+  --notebook-color: #c74719;
+  --label-color: #ffa008;
+}
+
+.cd1 {
+  --color1: #5036f5;
+  --color2: #12176a;
+  --label-color: #f7f0e5;
+}
+```
+
+Each class in that file is a preset that can be used in the frontmatter of a project markdown file.
+
+You only need to specify the variables you want to override.
+
+e.g.
+```
+---- project1.md ---
+
+---
+type: vhs
+stack_style: redtape
+title: "Project One"
+---
+...
+
+---- _sass/_stack-presets.custom.scss ---
+
+.redtape {
+  --tab_unlocked: 0;
+  --color1: #be2c2c;
+  --color5: #be2c2c;
+  --color6: #be2c2c;
+}
+```
+![alt text](image-1.png)
+
+Tape and cd also have additional style variables for extra decorative text on the label. see `_sass/_stack-presets.custom.scss` for some examples

data/_includes/components/sidebar/cd.svg

@@ -0,0 +1,55 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="778.507" height="129.16" viewBox="-290.65 -42.581 778.507 129.16">
+  <defs>
+    <linearGradient id="a" x1="-274.755" x2="-274.755" y1="-13.373" y2="-6.218" gradientUnits="userSpaceOnUse" spreadMethod="pad">
+      <stop offset="0" stop-color="#d8d8d8"/>
+      <stop offset="1" stop-color="#7b7b7b"/>
+    </linearGradient>
+    <linearGradient id="b" x1="-274.755" x2="-274.755" y1="-13.373" y2="-6.218" gradientTransform="translate(746.188)" gradientUnits="userSpaceOnUse" spreadMethod="pad">
+      <stop offset="0" stop-color="#d8d8d8"/>
+      <stop offset="1" stop-color="#7b7b7b"/>
+    </linearGradient>
+    <linearGradient id="c" x1="98.315" x2="98.315" y1="-42.581" y2="13.228" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#d8d8d8"/>
+      <stop offset="1" stop-color="#7b7b7b"/>
+    </linearGradient>
+    <linearGradient id="d" x1="98.496" x2="98.496" y1="-31.392" y2="27.051" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#d8d8d8"/>
+      <stop offset="1" stop-color="#7b7b7b"/>
+    </linearGradient>
+    <linearGradient id="f" x1="-274.755" x2="-274.755" y1="-13.373" y2="-6.218" gradientTransform="translate(.565 -43.997)" gradientUnits="userSpaceOnUse" spreadMethod="pad">
+      <stop offset="0" stop-color="#d8d8d8"/>
+      <stop offset="1" stop-color="#7b7b7b"/>
+    </linearGradient>
+    <linearGradient id="g" x1="-274.755" x2="-274.755" y1="-13.373" y2="-6.218" gradientTransform="translate(746.754 -43.997)" gradientUnits="userSpaceOnUse" spreadMethod="pad">
+      <stop offset="0" stop-color="#d8d8d8"/>
+      <stop offset="1" stop-color="#7b7b7b"/>
+    </linearGradient>
+    <linearGradient id="h" x1="98.315" x2="98.315" y1="-42.581" y2="13.228" gradientTransform="matrix(1 0 0 -1 .565 43.997)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#d8d8d8"/>
+      <stop offset="1" stop-color="#7b7b7b"/>
+    </linearGradient>
+    <linearGradient id="e" x1="98.496" x2="98.496" y1="-31.392" y2="27.051" gradientTransform="matrix(1 0 0 -1 .565 43.997)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#d8d8d8"/>
+      <stop offset="1" stop-color="#7b7b7b"/>
+    </linearGradient>
+    <radialGradient id="i" cx="98.702" cy="21.609" r="365.552" gradientTransform="translate(.726 .56)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#d8d8d8"/>
+      <stop offset="1" stop-color="#7b7b7b"/>
+    </radialGradient>
+  </defs>
+  <path d="M-289.5-41.486h776.797V85.889H-289.5z" fill="#333"/>
+  <path d="M-280.08-13.373h10.649v7.155h-10.649z" fill="url(#a)"/>
+  <path d="M466.107-13.373h10.649v7.155h-10.649z" fill="url(#b)"/>
+  <path d="M-289.65-42.581h8.363v.057h759.619v.012h7.948a1 1 0 0 1 1 1v53.74a1 1 0 0 1-1 1h-7.363a1 1 0 0 1-1-1v-45.389h-759.204v45.32a1 1 0 0 1-1 1h-7.363a1 1 0 0 1-1-1v-53.74a1 1 0 0 1 1-1Z" fill="url(#c)" fill-rule="evenodd" fill-opacity="0.7"/>
+  <path d="M487.193 14.298v9.753a3 3 0 0 1-3 3H-287.2a3 3 0 0 1-3-3v-9.753h10.11v-45.531h10.677v45.531h735.35v-45.69h10.677v45.69Z" fill="url(#d)" fill-rule="evenodd" fill-opacity="0.73"/>
+  <path d="M487.758 29.7v-9.753a3 3 0 0 0-3-3H-286.64c-1.65 0-3 1.343-3 3V29.7h10.11v45.531h10.68V29.7h735.352v45.69h10.677V29.7z" fill="url(#e)" fill-rule="evenodd" fill-opacity="0.73"/>
+  <path d="M-279.52-57.371h10.649v7.155h-10.649z" fill="url(#f)" transform="scale(1 -1)"/>
+  <path d="M466.672-57.37h10.649v7.155h-10.649z" fill="url(#g)" transform="matrix(1 0 0 -1 0 104.725)"/>
+  <path d="M-289.09 86.579h8.37v-.057h759.617v-.012h7.948a1 1 0 0 0 1-1V31.77a1 1 0 0 0-1-1h-7.363a1 1 0 0 0-1 1v45.389H-280.72v-45.32c0-.552-.45-1-1-1h-7.37c-.55 0-1 .448-1 1v53.74c0 .552.45 1 1 1Z" fill="url(#h)" fill-rule="evenodd" fill-opacity="0.7"/>
+  <path id="label" d="M-264.55-30.294h724.834s1.999 4.75 1.763 49.654c-.276 52.505-1.763 56.071-1.763 56.071H-264.55s-1.8-6.287-1.79-52.863c0-46.576 1.79-52.862 1.79-52.862Z" fill="var(--label-color, #fff)"/>
+  <path id="color1" d="M372.384-30.413h88.658s.964 33.691.968 50.243c.004 18.692-.968 55.482-.968 55.482h-88.658s2.434-6.114 2.434-52.69-2.434-53.035-2.434-53.035Z" fill="var(--color1, #f01111)"/>
+  <path id="color2" d="M-264.32-30.406h123.41s-2.867 4.924-2.907 49.828c-.05 52.505 2.907 55.897 2.907 55.897h-123.41s-2-6.211-2-52.787 2-52.938 2-52.938Z" fill="var(--color2, #ea3333)"/>
+  <path d="M-266.86-32.502h728.398v9.434H-266.86z" fill="#2f2f2f" fill-opacity="0.6"/>
+  <path d="M-266.31-40.262h728.512v9.434H-266.31z" fill="#2f2f2f" fill-opacity="0.2" transform="scale(1 -1)"/>
+  <path d="M-266.12-30.649h731.103V74.982H-266.12z" fill="url(#i)" fill-opacity="0.2"/>
+</svg>

data/_includes/components/sidebar/footer.html

@@ -0,0 +1,49 @@
+<footer class="sidebar-footer">
+	<div class="sidebar-footer-left">
+		<button class="btn theme-toggle" type="button" id="theme-toggle" aria-label="Toggle dark mode" aria-pressed="false">
+			<span class="theme-pill" aria-hidden="true">
+				{% include components/sidebar/theme_toggle_icon.svg %}
+			</span>
+		</button>
+	</div>
+
+	<div class="sidebar-footer-right">
+		{% include footer-right.html %}
+	</div>
+</footer>
+
+<script>
+	(function () {
+		var storageKey = "site-theme";
+		var root = document.documentElement;
+		var toggle = document.getElementById("theme-toggle");
+
+		if (!toggle) {
+			return;
+		}
+
+		function getPreference() {
+			var saved = localStorage.getItem(storageKey);
+			return saved === "dark" ? "dark" : "light";
+		}
+
+		function setPreference(theme) {
+			localStorage.setItem(storageKey, theme);
+			root.setAttribute("data-theme", theme);
+			refreshUI();
+		}
+
+		function refreshUI() {
+			var current = getPreference();
+			toggle.setAttribute("data-theme-preference", current);
+			toggle.setAttribute("data-resolved-theme", current);
+			toggle.setAttribute("aria-pressed", current === "dark" ? "true" : "false");
+		}
+
+		toggle.addEventListener("click", function () {
+			setPreference(getPreference() === "dark" ? "light" : "dark");
+		});
+
+		refreshUI();
+	})();
+</script>

data/_includes/components/sidebar/menu_icon.svg

@@ -0,0 +1,11 @@
+<svg class="sidebar-menu-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
+  <g class="menu-icon-hamburger">
+    <line class="menu-line" x1="4" y1="7" x2="20" y2="7"></line>
+    <line class="menu-line" x1="4" y1="12" x2="20" y2="12"></line>
+    <line class="menu-line" x1="4" y1="17" x2="20" y2="17"></line>
+  </g>
+  <g class="menu-icon-close">
+    <line class="menu-line" x1="6" y1="6" x2="18" y2="18"></line>
+    <line class="menu-line" x1="18" y1="6" x2="6" y2="18"></line>
+  </g>
+</svg>

data/_includes/components/sidebar/notebook.svg

@@ -0,0 +1,38 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="523.6 708 1325 100">
+  <defs>
+    <filter id="notebook-weathered-edge">
+      <feTurbulence type="fractalNoise" baseFrequency="0.04" numOctaves="4" result="noise" />
+      <feDisplacementMap in="SourceGraphic" in2="noise" scale="2" />
+    </filter>
+    <filter id="dirt-alpha-map" x="524.073" y="709.92" width="1279.85" height="98.468" filterUnits="userSpaceOnUse"
+      color-interpolation-filters="sRGB">
+      <feColorMatrix in="SourceGraphic" type="luminanceToAlpha" result="lumaAlpha" />
+      <feComponentTransfer in="lumaAlpha" result="invAlpha">
+        <feFuncA type="table" tableValues="1 0" />
+      </feComponentTransfer>
+      <feComponentTransfer in="invAlpha" result="contrastAlpha">
+        <feFuncA type="linear" slope="1.35" intercept="-0.12" />
+      </feComponentTransfer>
+      <feFlood flood-color="#ffffff" result="white" />
+      <feComposite in="white" in2="contrastAlpha" operator="in" />
+    </filter>
+    <mask id="bg-dirt-mask" x="524.073" y="709.92" width="1279.85" height="98.468"
+      maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse" style="mask-type: alpha;">
+      <image href="/assets/site_media/noteback.png" x="524.073" y="709.92" width="1279.85" height="98.468"
+        preserveAspectRatio="none" filter="url(#dirt-alpha-map)" />
+    </mask>
+  </defs>
+  <g filter="url(#notebook-weathered-edge)">
+    <rect id="bg" width="1279.85" height="98.468" x="524.073" y="709.92" rx="5" ry="5"
+      fill="var(--notebook-color, #f23131)" />
+    <path id="tophighlight" d="M530.131 708.7h1268.06a5 5 0 0 1 5 5v6.926H525.131V713.7a5 5 0 0 1 5-5Z"
+      fill="#ddd" fill-opacity="0.58" />
+    <path id="bottomhighlight" d="M523.636 795.54h1278.06v3.713H523.636z" fill="#d5d5d5" fill-opacity="0.58" />
+  </g>
+  <rect id="dirt" width="1279.85" height="98.468" x="524.073" y="709.92" rx="5" ry="5"
+    fill="#000" fill-opacity="0.48" mask="url(#bg-dirt-mask)" />
+  <path id="label" d="M615.637 725.21h940.318v64.429H615.637z" fill="var(--label-color, #fff)" />
+  <path id="tape"
+    d="m574.136 710.45 9.476 5.379-7.574 8.135 9.475 5.378-7.574 8.134 9.476 5.378-7.574 8.134 9.476 5.378-7.574 8.135 9.476 5.378-7.573 8.134 9.475 5.378-7.573 8.134 9.475 5.379-7.573 8.135 4.475 3.378 1011.305 1.001-8.33-6.772 7.67-4.772-8.34-6.772 7.67-4.772-8.34-6.772 7.67-4.772-8.34-6.772 7.67-4.772-8.33-6.772 7.66-4.771-8.33-6.772 7.66-4.772-8.33-6.772 7.66-4.772-8.33-6.772 5.97-6.998z"
+    fill="#ccd0c0" fill-opacity="0.5" />
+</svg>

data/_includes/components/sidebar/project-stack.html

@@ -0,0 +1,14 @@
+{% assign stack_projects = include.projects | default: site.projects %}
+
+<div class="project-stack">
+{% if stack_projects.size > 0 %}
+  {% for project in stack_projects %}
+    {% if project.draft != true %}
+      {% stack_row type=project.type project=project current_url=include.current_url %}
+    {% endif %}
+  {% endfor %}
+  {% else %}
+  <p style="color: #9898b8; font-style: italic; margin-top: 2rem;">Projects incoming - check back soon.</p>
+  {% endif %}
+  {% include components/sidebar/shelf.html %}
+</div>

data/_includes/components/sidebar/shelf.html

@@ -0,0 +1,5 @@
+<div class="shelf"></div>
+<div class="brackets">
+  <div class="bracket"></div>
+  <div class="bracket"></div>
+</div>

data/_includes/components/sidebar/sidebar.html

@@ -0,0 +1,83 @@
+<aside class="site-sidebar" id="site-sidebar" data-menu-open="false">
+  <header class="sidebar-header">
+    <div class="sidebar-name">
+      <a
+      {% if page.url contains '/about' or page.url contains 'projects' %}
+        href="{{ '/' | relative_url }}"
+      {% else %}
+        href="{{ '/about' | relative_url }}" style="cursor:help"
+      {% endif %}>
+        <h1>{{ site.title }}</h1>
+      </a>
+    </div>
+
+    <button
+      class="sidebar-menu-toggle"
+      id="sidebar-menu-toggle"
+      type="button"
+      aria-controls="sidebar-menu-content"
+      aria-expanded="false"
+      aria-label="Open menu">
+      {% include components/sidebar/menu_icon.svg %}
+    </button>
+  </header>
+
+  <div class="sidebar-menu-content" id="sidebar-menu-content">
+    {% include components/sidebar/project-stack.html projects=site.projects current_url=page.url %}
+  </div>
+  {% include components/sidebar/footer.html %}
+</aside>
+
+<script>
+  (function () {
+    var mobileQuery = window.matchMedia("(max-width: 800px)");
+    var sidebar = document.getElementById("site-sidebar");
+    var toggle = document.getElementById("sidebar-menu-toggle");
+
+    if (!sidebar || !toggle) {
+      return;
+    }
+
+    function setOpenState(isOpen) {
+      sidebar.setAttribute("data-menu-open", isOpen ? "true" : "false");
+      toggle.setAttribute("aria-expanded", isOpen ? "true" : "false");
+      toggle.setAttribute("aria-label", isOpen ? "Close menu" : "Open menu");
+      document.body.classList.toggle("sidebar-menu-open", isOpen && mobileQuery.matches);
+    }
+
+    function closeOnDesktop() {
+      if (!mobileQuery.matches) {
+        setOpenState(false);
+      }
+    }
+
+    toggle.addEventListener("click", function () {
+      var currentlyOpen = sidebar.getAttribute("data-menu-open") === "true";
+      setOpenState(!currentlyOpen);
+    });
+
+    sidebar.addEventListener("click", function (event) {
+      if (!mobileQuery.matches || sidebar.getAttribute("data-menu-open") !== "true") {
+        return;
+      }
+
+      if (event.target.closest("a")) {
+        setOpenState(false);
+      }
+    });
+
+    document.addEventListener("keydown", function (event) {
+      if (event.key === "Escape" && sidebar.getAttribute("data-menu-open") === "true") {
+        setOpenState(false);
+      }
+    });
+
+    if (typeof mobileQuery.addEventListener === "function") {
+      mobileQuery.addEventListener("change", closeOnDesktop);
+    } else if (typeof mobileQuery.addListener === "function") {
+      mobileQuery.addListener(closeOnDesktop);
+    }
+
+    setOpenState(false);
+  })();
+</script>

data/_includes/components/sidebar/tape.svg

@@ -0,0 +1,30 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-375.83 -543.84 1280.31 182.217" width="1280.31" height="182.217">
+  <defs>
+    <filter id="weathered-edge">
+      <feTurbulence type="fractalNoise" baseFrequency="0.04" numOctaves="4" result="noise"></feTurbulence>
+      <feDisplacementMap in="SourceGraphic" in2="noise" scale="2"></feDisplacementMap>
+    </filter>
+    <filter id="ink-grain">
+      <feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="3" result="rawNoise"></feTurbulence>
+      <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 5 -2.5" in="rawNoise" result="grainMask"></feColorMatrix>
+      <feComposite operator="in" in="SourceGraphic" in2="grainMask"></feComposite>
+    </filter>
+  </defs>
+  <rect id="shading" x="-375.83" y="-543.84" width="1280.31" height="182.217" stroke="#000" stroke-width="6px" fill="#3b3b3b" rx="21" ry="21"></rect>
+  <rect id="bg" x="-348.03" y="-540.85" width="1224.63" height="176.764" fill="#252525" rx="21" ry="21"></rect>
+  <path id="tabhole" fill="#000" d="M-243.58-455.95h63.673v78.748h-63.673z"></path>
+  <rect id="tab" x="-235.46" y="-433.93" width="47.428" height="59.515" style="opacity: var(--tab_unlocked, 1); fill: rgb(37, 37, 37);" rx="1" ry="1"></rect>
+  <path id="midline" stroke="#000" d="m-375.146-456.012 1278.06-.984"></path>
+  <g filter="url(#weathered-edge)">
+    <rect id="label" x="-148.48" y="-524.14" width="962.097" height="144.125" fill="#fff" rx="9" ry="9"></rect>
+  </g>
+  <path id="color1" style="fill: var(--color1, #fff);" d="M-106.04-524.28h-33.736a9 9 0 0 0-9 9v126.407a9 9 0 0 0 9 9H-106.04z"></path>
+  <path id="color2" style="fill: var(--color2, #fff);" d="M -108.14 -379.87 L -65.4 -379.87 L -65.4 -524.28 L -108.14 -524.28 L -108.14 -379.87 Z"></path>
+  <path id="color3" style="fill: var(--color3, #fff);" d="M -69 -379.87 L -26.264 -379.87 L -26.264 -524.28 L -69 -524.28 L -69 -379.87 Z"></path>
+  <path id="color4" style="fill: var(--color4, #fff);" d="M 689.914 -524.28 L 732.65 -524.28 L 732.65 -379.87 L 689.914 -379.87 L 689.914 -524.28 Z"></path>
+  <path id="color5" style="fill: var(--color5, #fff);" d="M 730.006 -524.28 L 772.742 -524.28 L 772.742 -379.87 L 730.006 -379.87 L 730.006 -524.28 Z"></path>
+  <path id="color6" style="fill: var(--color6, #fff);" d="M770.654-524.28h33.736a9 9 0 0 1 9 9v126.407a9 9 0 0 1-9 9h-33.736z"></path>
+  <g filter="url(#ink-grain)" >
+    <rect id="bg-2" x="-348.03" y="-540.85" width="1224.63" height="176.764" style="fill-opacity:.1;fill:#777" rx="21" ry="21"></rect>
+  </g>
+</svg>

data/_includes/components/sidebar/theme_toggle_icon.svg

@@ -0,0 +1,14 @@
+<svg viewBox="0 0 64 32" role="presentation" focusable="false">
+  <rect class="theme-pill-track" x="1" y="1" width="62" height="30" rx="15" stroke-width="2"></rect>
+  <g class="theme-pill-sun" transform="translate(10 10)" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
+    <circle cx="6" cy="6" r="3.4"></circle>
+    <line x1="6" y1="0.2" x2="6" y2="-2.2"></line>
+    <line x1="6" y1="12.2" x2="6" y2="14.6"></line>
+    <line x1="0.2" y1="6" x2="-2.2" y2="6"></line>
+    <line x1="12.2" y1="6" x2="14.6" y2="6"></line>
+  </g>
+  <g class="theme-pill-moon" transform="translate(42 10)" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
+    <path d="M9.2 2.2a5.8 5.8 0 1 0 0 7.6 6.9 6.9 0 1 1 0-7.6z"></path>
+  </g>
+  <circle class="theme-pill-thumb" cx="16" cy="16" r="11"></circle>
+</svg>

data/_layouts/default.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>{% if page.title %}{{ page.title }} | {{ site.title }}{% else %}{{ site.title }}{% endif %}</title>
+  <meta name="description" content="{% if page.description %}{{ page.description }}{% else %}{{ site.description }}{% endif %}">
+  <script>
+    (function () {
+      var storageKey = "site-theme";
+      var savedTheme = localStorage.getItem(storageKey);
+      var initialTheme = savedTheme === "light" || savedTheme === "dark" || savedTheme === "system" ? savedTheme : "light";
+      document.documentElement.setAttribute("data-theme", initialTheme);
+    })();
+  </script>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="{{ '/assets/css/main.css' | relative_url }}">
+  <link rel="icon" type="image/png" href="{{ '/assets/site_media/favicon.png' | relative_url }}">
+  {% seo %}
+</head>
+<body>
+  <div class="site-wrapper">
+    {% include components/sidebar/sidebar.html %}
+    <main class="site-main" id="main-content">
+      {% include content-top.html %}
+      {{ content }}
+    </main>
+  </div>
+
+</body>
+</html>

data/_layouts/page.html

@@ -0,0 +1,21 @@
+---
+layout: default
+---
+<article class="article">
+  <header class="page-header">
+    <div class="header-text-wrapper">
+      <h1 class="page-title">{{ page.title }}</h1>
+      {% if page.description %}
+      <p class="page-desc">{{ page.description }}</p>
+      {% endif %}
+    </div>
+    {% if page.image %}
+      <div class="header-image-wrapper">
+        <img src="{{ page.image | relative_url }}" alt="{{ page.title }}" style="height: 300px; width: auto;">
+      </div>
+    {% endif %}
+  </header>
+  <div class="page-content">
+    {{ content }}
+  </div>
+</article>

data/_layouts/project.html

@@ -0,0 +1,19 @@
+---
+layout: default
+---
+<article class="article">
+  <header class="page-header">
+    <div class="header-text-wrapper">
+      {% if page.show_title %}
+      <h1 class="page-title">{{ page.title }}</h1>
+      {% endif %}
+      {% include page_hero.html %}
+      {% if page.description %}
+        <p class="page-desc" style="color: var(--text-secondary, #9898b8); font-size: 1.1rem; margin-top: 0.5rem;">{{ page.description }}</p>
+      {% endif %}
+    </div>
+  </header>
+  <div class="page-content">
+    {{ content }}
+  </div>
+</article>

data/_plugins/stack_row.rb

@@ -0,0 +1,134 @@
+# frozen_string_literal: true
+
+require 'cgi'
+
+# Registers the `stack_row` Liquid tag.
+#
+# Usage:
+#   {% stack_row project=project current_url=include.current_url %}
+#   {% stack_row tape project=project current_url=include.current_url %}
+#   {% stack_row notebook project=project current_url=include.current_url %}
+#   {% stack_row cd project=project current_url=include.current_url %}
+#
+# The row type can be passed explicitly or inferred from the project's `type`
+# front matter. Supported types: tape/vhs, notebook, and cd.
+# Named parameters are resolved as Liquid variables from the calling context.
+#
+# Transform limits and seed are read from _config.yml:
+#   stack_transform:
+#     seed: 42
+#     translate_max: 20
+
+module Jekyll
+  class StackRowTag < Liquid::Tag
+    STACK_SVG_FILES = {
+      'tape' => 'tape.svg',
+      'vhs' => 'tape.svg',
+      'notebook' => 'notebook.svg',
+      'cd' => 'cd.svg'
+    }.freeze
+
+    def initialize(tag_name, markup, tokens)
+      super
+      parts = markup.strip.split(/\s+/, 2)
+
+      if parts[0].to_s.include?('=')
+        @row_type = ''
+        @raw_params = markup.to_s
+      else
+        @row_type = parts[0].to_s.strip
+        @raw_params = parts[1].to_s
+      end
+    end
+
+    def render(context)
+      params = {}
+      @raw_params.scan(/(\w+)=([\w.]+)/) do |key, val|
+        params[key] = context[val]
+      end
+
+      project     = params['project']
+      current_url = params['current_url'].to_s
+      return '' if project.nil?
+
+      site        = context.registers[:site]
+      cfg         = Jekyll.configuration.dig("project-stack-portfolio", "stack_transform") || {}
+      seed        = cfg.fetch('seed', 42).to_i
+      tx_max      = cfg.fetch('translate_max', 20).to_f
+
+      project_url = project.url.to_s
+      translate_x = seeded_rand("#{project_url}tx", seed, -tx_max, tx_max)
+
+      is_current  = current_url.include?(project_url)
+      link_class  = is_current ? 'project-stack-item disabled' : 'project-stack-item'
+      style_class = project['stack_style'].to_s.strip
+      stack_type  = normalize_stack_type(params['type'] || @row_type || project['type'])
+      art_class   = ['project-stack-item-art', style_class].reject(&:empty?).join(' ')
+      row_class   = ['project-stack-item-row', "project-stack-item-row--#{stack_type}"].join(' ')
+      link_class  = [link_class, "project-stack-item--#{stack_type}"].join(' ')
+      baseurl     = site.config['baseurl'].to_s
+      href        = "#{baseurl}#{project_url}"
+      title       = CGI.escape_html(project['title'].to_s.upcase)
+      stack_svg   = read_stack_svg(site, stack_type)
+
+      <<~HTML
+        <div class="#{row_class}">
+          <a class="#{link_class}" style="transform: translateX(#{translate_x}px);" href="#{href}">
+            <div class="#{art_class}" aria-hidden="true">
+              #{stack_svg}
+              <div class="stack-item-text stack-item-text1 stack-item-text1--#{stack_type}"></div>
+              <div class="stack-item-text stack-item-text2 stack-item-text2--#{stack_type}"></div>
+              <div class="stack-item-text stack-item-text3 stack-item-text3--#{stack_type}"></div>
+              <div class="stack-item-text stack-item-text4 stack-item-text4--#{stack_type}"></div>
+              <div class="stack-item-text stack-item-text5 stack-item-text5--#{stack_type}"></div>
+              <div class="stack-item-text stack-item-text6 stack-item-text6--#{stack_type}"></div>
+              </div>
+            <div class="project-stack-item-label" aria-hidden="true">
+              <svg viewBox="0 0 500 50" width="100%" role="presentation" focusable="false">
+                <text x="0" y="40" font-size="40" font-weight="700" textLength="100%" lengthAdjust="spacingAndGlyphs">#{title}</text>
+              </svg>
+            </div>
+          </a>
+        </div>
+      HTML
+    end
+
+    private
+
+    def normalize_stack_type(value)
+      case value.to_s.downcase.strip
+      when 'notebook'
+        'notebook'
+      when 'cd'
+        'cd'
+      when 'vhs', 'tape'
+        'tape'
+      else
+        'tape'
+      end
+    end
+
+    # Deterministic pseudo-random float in [min, max] keyed on input string + seed.
+    # Byte-based hash is stable across Ruby versions (String#hash is randomized).
+    def seeded_rand(input, seed, min, max)
+      stable = input.bytes.each_with_index.inject(0) { |acc, (b, i)| acc + b * (31**i) }
+      rng    = Random.new(seed + stable)
+      (rng.rand * (max - min) + min).round(2)
+    end
+
+    def read_stack_svg(site, stack_type)
+      svg_file = STACK_SVG_FILES.fetch(stack_type, STACK_SVG_FILES['tape'])
+      site_svg_path = File.join(site.source, '_includes', 'components', 'sidebar', svg_file)
+      return File.read(site_svg_path).strip if File.exist?(site_svg_path)
+
+      gem_svg_path = File.expand_path("../_includes/components/sidebar/#{svg_file}", __dir__)
+      return File.read(gem_svg_path).strip if File.exist?(gem_svg_path)
+
+      ''
+    rescue Errno::ENOENT
+      ''
+    end
+  end
+end
+
+Liquid::Template.register_tag('stack_row', Jekyll::StackRowTag)