feat: Added featured post

note: need to find suitable images for placeholders

.gitea/workflows/deploy.yaml

@@ -3,7 +3,7 @@ name: Deploy Blog to Folder
 on:
   push:
     branches:
-      - main  # or your target branch
+      - main
 
 jobs:
   deploy:
@@ -13,10 +13,15 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@v3
       
+      - name: Download dependencies
+        run: |
+          npm ci
+          echo "Dependencies installed successfully."
+
       - name: Build site
         run: |
-          cd ./src
-          npx @11ty/eleventy
+          npm run build
+          echo "Site built successfully."
 
       - name: Deploy folder
         run: |
@@ -24,4 +29,4 @@ jobs:
           rm -rf /var/sites/cy.cyper.cc/www/html/*
           
           echo "Deploying new site files from src/_site folder..."
-          mv ./src/_site/* /var/sites/cy.cyper.cc/www/html
+          mv ./_site/* /var/sites/cy.cyper.cc/www/html

.gitignore

@@ -1 +1,9 @@
+# Node files
+node_modules/
+
+# @11ty/eleventy output
 src/_site/
+_site/
+
+# MacOS files
+.DS_Store

eleventy.config.js

@@ -0,0 +1,102 @@
+import { feedPlugin } from "@11ty/eleventy-plugin-rss";
+import filtersPlugin from "./src/_config/filters.js";
+
+/** @param {import("@11ty/eleventy").UserConfig} eleventyConfig */
+export default async function(eleventyConfig) {
+  eleventyConfig.addDateParsing(function(dateValue) {
+    if (dateValue != null && typeof(dateValue) === 'object') {
+      dateValue = new Date(dateValue.getFullYear(), dateValue.getMonth(), dateValue.getDate() + 1);
+    }
+    
+    return dateValue; // fallback
+  });
+
+  eleventyConfig.addPassthroughCopy(
+    {'./public/': '/'}
+  );
+
+  eleventyConfig.addPlugin(feedPlugin, {
+		type: "atom",
+		outputPath: "/feed.xml",
+		collection: {
+			name: "posts", // iterate over `collections.posts`
+			limit: 25,     // 0 means no limit
+		},
+		metadata: {
+			language: "en",
+			title: "Cy-by-Side",
+			subtitle: "Cy by Side with Cyper: Tangents, Tech, and Thoughtful Takes.",
+			base: "https://cy.cyper.cc/",
+			author: {
+				name: "Cyper"
+			}
+		}
+	});
+
+  eleventyConfig.addPlugin(filtersPlugin);
+
+  eleventyConfig.addShortcode("triangleSvg", function(strokeWidth = 10) {
+    const w = parseFloat(strokeWidth);
+    if (isNaN(w) || w <= 0) {
+      throw new Error("strokeWidth must be a positive number");
+    }
+
+    // Scale offsets based on strokeWidth
+    const topInset = +(w * 1.05).toFixed(2);
+    const bottomInset = +(w * 0.5).toFixed(2);
+    const sideInset = +(w * 0.8).toFixed(2);
+
+    const topPoint = `50,${topInset}`;
+    const leftPoint = `${sideInset},${100 - bottomInset}`;
+    const rightPoint = `${100 - sideInset},${100 - bottomInset}`;
+
+    const points = `${topPoint} ${leftPoint} ${rightPoint}`;
+
+    return `
+<svg viewBox="0 0 100 100" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" aria-hidden="true" focusable="false">
+  <polygon
+    points="${points}"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="${w}"
+    stroke-linejoin="miter"
+  />
+</svg>`;
+  });
+
+  eleventyConfig.addShortcode("squareSvg", function(strokeWidth = 10, className = "square") {
+    const w = parseFloat(strokeWidth);
+    if (isNaN(w) || w <= 0) {
+      throw new Error("strokeWidth must be a positive number");
+    }
+
+    const inset = +(w / 2).toFixed(2);
+    const x1 = inset;
+    const y1 = inset;
+    const x2 = 100 - inset;
+    const y2 = 100 - inset;
+
+    return `
+<svg
+  class="${className}"
+  viewBox="0 0 100 100"
+  width="100%"
+  height="100%"
+  preserveAspectRatio="xMidYMid meet"
+  aria-hidden="true"
+  focusable="false"
+>
+  <rect
+    class="${className}__shape"
+    x="${x1}"
+    y="${y1}"
+    width="${(x2 - x1).toFixed(2)}"
+    height="${(y2 - y1).toFixed(2)}"
+    stroke="currentColor"
+    fill="none"
+    stroke-width="${w}"
+    stroke-linejoin="miter"
+  />
+</svg>`;
+  });
+}

package-lock.json

@@ -0,0 +1,251 @@
+{
+  "name": "cybyside",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "cybyside",
+      "version": "1.0.0",
+      "license": "ISC",
+      "dependencies": {
+        "@11ty/eleventy-plugin-rss": "^2.0.4"
+      }
+    },
+    "node_modules/@11ty/eleventy-plugin-rss": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@11ty/eleventy-plugin-rss/-/eleventy-plugin-rss-2.0.4.tgz",
+      "integrity": "sha512-LF60sGVlxGTryQe3hTifuzrwF8R7XbrNsM2xfcDcNMSliLN4kmB+7zvoLRySRx0AQDjqhPTAeeeT0ra6/9zHUQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@11ty/eleventy-utils": "^2.0.0",
+        "@11ty/posthtml-urls": "^1.0.1",
+        "debug": "^4.4.0",
+        "posthtml": "^0.16.6"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/11ty"
+      }
+    },
+    "node_modules/@11ty/eleventy-utils": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@11ty/eleventy-utils/-/eleventy-utils-2.0.7.tgz",
+      "integrity": "sha512-6QE+duqSQ0GY9rENXYb4iPR4AYGdrFpqnmi59tFp9VrleOl0QSh8VlBr2yd6dlhkdtj7904poZW5PvGr9cMiJQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/11ty"
+      }
+    },
+    "node_modules/@11ty/posthtml-urls": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@11ty/posthtml-urls/-/posthtml-urls-1.0.1.tgz",
+      "integrity": "sha512-6EFN/yYSxC/OzYXpq4gXDyDMlX/W+2MgCvvoxf11X1z76bqkqFJ8eep5RiBWfGT5j0323a1pwpelcJJdR46MCw==",
+      "license": "MIT",
+      "dependencies": {
+        "evaluate-value": "^2.0.0",
+        "http-equiv-refresh": "^2.0.1",
+        "list-to-array": "^1.1.0",
+        "parse-srcset": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/debug": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
+      "integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/dom-serializer": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
+      "integrity": "sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==",
+      "license": "MIT",
+      "dependencies": {
+        "domelementtype": "^2.0.1",
+        "domhandler": "^4.2.0",
+        "entities": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/dom-serializer/node_modules/entities": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
+      "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
+      "license": "BSD-2-Clause",
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/domelementtype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/domhandler": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.3.1.tgz",
+      "integrity": "sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "domelementtype": "^2.2.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/domutils": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
+      "integrity": "sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "dom-serializer": "^1.0.1",
+        "domelementtype": "^2.2.0",
+        "domhandler": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
+    "node_modules/entities": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-3.0.1.tgz",
+      "integrity": "sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/evaluate-value": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/evaluate-value/-/evaluate-value-2.0.0.tgz",
+      "integrity": "sha512-VonfiuDJc0z4sOO7W0Pd130VLsXN6vmBWZlrog1mCb/o7o/Nl5Lr25+Kj/nkCCAhG+zqeeGjxhkK9oHpkgTHhQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/htmlparser2": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-7.2.0.tgz",
+      "integrity": "sha512-H7MImA4MS6cw7nbyURtLPO1Tms7C5H602LRETv95z1MxO/7CP7rDVROehUYeYBUYEON94NXXDEPmZuq+hX4sog==",
+      "funding": [
+        "https://github.com/fb55/htmlparser2?sponsor=1",
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "domelementtype": "^2.0.1",
+        "domhandler": "^4.2.2",
+        "domutils": "^2.8.0",
+        "entities": "^3.0.1"
+      }
+    },
+    "node_modules/http-equiv-refresh": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/http-equiv-refresh/-/http-equiv-refresh-2.0.1.tgz",
+      "integrity": "sha512-XJpDL/MLkV3dKwLzHwr2dY05dYNfBNlyPu4STQ8WvKCFdc6vC5tPXuq28of663+gHVg03C+16pHHs/+FmmDjcw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/is-json": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-json/-/is-json-2.0.1.tgz",
+      "integrity": "sha512-6BEnpVn1rcf3ngfmViLM6vjUjGErbdrL4rwlv+u1NO1XO8kqT4YGL8+19Q+Z/bas8tY90BTWMk2+fW1g6hQjbA==",
+      "license": "ISC"
+    },
+    "node_modules/list-to-array": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/list-to-array/-/list-to-array-1.1.0.tgz",
+      "integrity": "sha512-+dAZZ2mM+/m+vY9ezfoueVvrgnHIGi5FvgSymbIgJOFwiznWyA59mav95L+Mc6xPtL3s9gm5eNTlNtxJLbNM1g==",
+      "license": "MIT"
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "license": "MIT"
+    },
+    "node_modules/parse-srcset": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/parse-srcset/-/parse-srcset-1.0.2.tgz",
+      "integrity": "sha512-/2qh0lav6CmI15FzA3i/2Bzk2zCgQhGMkvhOhKNcBVQ1ldgpbfiNTVslmooUmWJcADi1f1kIeynbDRVzNlfR6Q==",
+      "license": "MIT"
+    },
+    "node_modules/posthtml": {
+      "version": "0.16.6",
+      "resolved": "https://registry.npmjs.org/posthtml/-/posthtml-0.16.6.tgz",
+      "integrity": "sha512-JcEmHlyLK/o0uGAlj65vgg+7LIms0xKXe60lcDOTU7oVX/3LuEuLwrQpW3VJ7de5TaFKiW4kWkaIpJL42FEgxQ==",
+      "license": "MIT",
+      "dependencies": {
+        "posthtml-parser": "^0.11.0",
+        "posthtml-render": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/posthtml-parser": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/posthtml-parser/-/posthtml-parser-0.11.0.tgz",
+      "integrity": "sha512-QecJtfLekJbWVo/dMAA+OSwY79wpRmbqS5TeXvXSX+f0c6pW4/SE6inzZ2qkU7oAMCPqIDkZDvd/bQsSFUnKyw==",
+      "license": "MIT",
+      "dependencies": {
+        "htmlparser2": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/posthtml-render": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/posthtml-render/-/posthtml-render-3.0.0.tgz",
+      "integrity": "sha512-z+16RoxK3fUPgwaIgH9NGnK1HKY9XIDpydky5eQGgAFVXTCSezalv9U2jQuNV+Z9qV1fDWNzldcw4eK0SSbqKA==",
+      "license": "MIT",
+      "dependencies": {
+        "is-json": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    }
+  }
+}

package.json

@@ -0,0 +1,25 @@
+{
+  "name": "cybyside",
+  "version": "1.0.0",
+  "description": "My personal blog",
+  "scripts": {
+    "start": "npx @11ty/eleventy --input ./src --serve",
+    "build": "npx @11ty/eleventy --input ./src",
+    "clean": "rm -rf {_site,./src/_site}"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://git.cyper.cc/Cyper/CyBySide"
+  },
+  "keywords": [
+    "blog",
+    "@11ty/eleventy",
+    "eleventy"
+  ],
+  "author": "Cyper",
+  "license": "ISC",
+  "type": "module",
+  "dependencies": {
+    "@11ty/eleventy-plugin-rss": "^2.0.4"
+  }
+}

public/css/about.css

@@ -0,0 +1,41 @@
+.title {
+  display: flex;
+  flex-direction: column;
+}
+.title h1 {
+  font-size: 3rem;
+  font-weight: 300;
+  text-align: center;
+  margin: 0 2rem 2rem 2rem;
+}
+.title img {
+  width: 100%;
+}
+.content {
+  padding: 2rem 2rem;
+  font-size: 1.25rem;
+}
+.content > p {
+  text-align: center;
+}
+.content > p:not(:first-child) {
+  margin-top: 2rem;
+}
+
+@media (min-width: 992px) {
+  .title {
+    flex-direction: row;
+  }
+  .title-reverse {
+    flex-direction: row-reverse;
+  }
+  .title > div {
+    width: 50%;
+  }
+  .content {
+    padding: 0 2rem;
+  }
+  .alternating-background-container > div {
+    padding: 4rem 0;
+  }
+}

public/css/home.css

@@ -0,0 +1,241 @@
+/* Rounded border radius classes */
+.border-round-1 {
+  --border-radius: 40%;
+}
+.border-round-2 {
+  --border-radius: 85%;
+}
+.border-round-tl {
+  border-top-left-radius: var(--border-radius);
+}
+.border-round-tr {
+  border-top-right-radius: var(--border-radius);
+}
+.border-round-bl {
+  border-bottom-left-radius: var(--border-radius);
+}
+.border-round-br {
+  border-bottom-right-radius: var(--border-radius);
+}
+.border-round {
+  border-radius: var(--border-radius);
+}
+
+/* Fill color classes */
+.fill-teal {
+  --fill-color: rgba(var(--teal), 0.86);
+}
+.fill-teal:hover,
+.fill-teal:active {
+  --fill-color: rgba(var(--teal), 0.96);
+}
+.fill-black {
+  --fill-color: rgba(var(--black), 0.86);
+}
+.fill-black:hover,
+.fill-black:active {
+  --fill-color: rgba(var(--black), 0.96);
+}
+.fill-lightblue {
+  --fill-color: rgba(var(--lightblue), 0.86);
+}
+.fill-lightblue:hover,
+.fill-lightblue:active {
+  --fill-color: rgba(var(--lightblue), 0.96);
+}
+.fill-brown {
+  --fill-color: rgba(var(--brown), 0.86);
+}
+.fill-brown:hover,
+.fill-brown:active {
+  --fill-color: rgba(var(--brown), 0.96);
+}
+.fill-tan {
+  --fill-color: rgba(var(--tan), 0.86);
+}
+.fill-tan:hover,
+.fill-tan:active {
+  --fill-color: rgba(var(--tan), 0.96);
+}
+
+.fill {
+  color: var(--fill-color);
+}
+.fill-background {
+  background-color: var(--fill-color);
+}
+
+/* Shape classes */
+.diamond {
+  width: 100%;
+  aspect-ratio: 1 / 1;
+  margin: auto;
+  animation: spin-in 1s forwards;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+.diamond::after {
+  content: "";
+  position: absolute;
+  width: calc(100% / sqrt(2)); /* Shrink so rotated square fits inside wrapper */
+  aspect-ratio: 1 / 1;
+  background: var(--fill-color);
+  transform: rotate(45deg);
+}
+
+.circle {
+  border-radius: 75%;
+}
+
+main {
+  display: flex;
+  flex-direction: column;
+}
+main > * {
+  padding: 3rem;
+}
+main > :nth-child(2n) {
+  background-color: rgba(var(--brown), 0.21);
+}
+main > :last-child {
+  flex: 1 0 auto;
+}
+
+.home-text {
+  display: grid;
+  place-items: center;
+  text-align: center;
+}
+.home-text > div > * {
+  margin: 2rem 0;
+}
+.home-text h1 {
+  font-size: 3rem;
+  font-weight: 600;
+}
+
+.featured,
+.about {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.featured img {
+  object-fit: cover;
+  object-position: center;
+  width: 100%;
+  border: 4px solid white;
+}
+.featured > h1,
+.about > h1 {
+  font-size: 2.5rem;
+  font-weight: 400;
+  color: rgba(var(--black), 0.86);
+}
+.featured > div {
+  display: flex;
+  flex-direction: column;
+  margin-top: 2rem;
+  width: 100%;
+}
+.featured p, .featured a {
+  margin-top: 1rem;
+  display: inline-block;
+}
+.featured > div > * {
+  text-align: center;
+}
+.featured h2 {
+  font-size: 2.25rem;
+  font-weight: 300;
+  margin-top: 1rem;
+}
+.featured .featured-text {
+  display: flex;
+  flex-direction: column;
+}
+.featured-text span {
+  color: rgba(var(--black), .56);
+  font-size: .85rem;
+}
+
+.about > div {
+  margin-top: 2rem;
+}
+
+.about * {
+  text-align: center;
+}
+
+/* Grid Pattern */
+.home-grid-container {
+  padding: 0 15% 2rem 15%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.home-grid {
+  display: grid;
+  aspect-ratio: 1 / 1;
+  width: 30rem;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 1fr);
+  box-sizing: border-box;
+}
+.home-grid > * {
+  animation: spin-out 0.5s cubic-bezier(0.67, -0.02, 0.23, 0.99);
+}
+.home-grid > *:hover,
+.home-grid > *:active {
+  animation: spin-in 0.5s cubic-bezier(0.67, -0.02, 0.23, 0.99);
+}
+.home-grid svg {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+@keyframes spin-in {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes spin-out {
+  from {
+    transform: rotate(360deg);
+  }
+  to {
+    transform: rotate(0deg);
+  }
+}
+
+/* -md */
+@media (min-width: 992px) {
+  .home-grid-container {
+    padding: 0;
+  }
+  .home-text {
+    padding: 0 2rem;
+  }
+  .home-text h1 {
+    font-size: 3rem;
+  }
+  .featured > h1 {
+    font-size: 3rem;
+  }
+  .featured > div {
+    flex-direction: row;
+  }
+  .featured > div > * {
+    text-align: end;
+    padding-left: 2rem;
+  }
+  .featured > div > div {
+    width: 50%;
+  }
+}

public/css/posts.css

@@ -0,0 +1,77 @@
+.mb-2 {
+  margin-bottom: 2rem;
+}
+
+.post-layout {
+  display: flex;
+  flex-direction: column;
+}
+.post-layout main {
+  flex: 1;
+}
+.post-layout main .thumbnail {
+  width: 100%;
+  height: 300px;
+  object-fit: contain;
+  object-position: center;
+}
+.post-layout main > div {
+  background-color: rgba(255, 255, 255, .71);
+  padding: 2rem;
+  height: 100%;
+}
+
+.posts {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr;
+  grid-column-gap: 2rem;
+  grid-row-gap: 2rem;
+}
+.posts > a {
+  text-decoration: none;
+  color: rgba(var(--black), .76);
+}
+.posts > div {
+  width: 100%;
+}
+.post-card {
+  background-color: white;
+  border-radius: 1rem;
+  box-shadow: 0 2px 4px rgba(var(--black), .21);
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  margin: 0 1rem;
+}
+.post-card:hover {
+  transform: translate(-4px, -4px); /* Up and left by 4px */
+  box-shadow: 0 8px 16px rgba(var(--black), 0.3); /* deeper shadow for “lifted” look */
+}
+.post-card > img {
+  width: 100%;
+  object-fit: cover;
+  object-position: center;
+  border-top-left-radius: 1rem;
+  border-top-right-radius: 1rem;
+}
+.post-card .post-body {
+  padding: 2rem;
+}
+
+@media (min-width: 768px) {
+  .post-layout main .thumbnail {
+    height: 375px;
+    margin: 1rem 0;
+  }
+}
+@media (min-width: 992px) {
+  .posts {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .post-card {
+    margin: 0;
+  }
+  .post-layout main .thumbnail {
+    height: 375px;
+    margin: 2rem 0;
+  }
+}

public/css/style.css

@@ -0,0 +1,429 @@
+:root {
+  --navbar-height: 96px;
+
+  --teal: 162, 223, 203;
+  --black: 25, 23, 30;
+  --brown: 81, 73, 65;
+  --tan: 158, 144, 112;
+  --lightblue: 147, 225, 242;
+
+  --background-color: rgba(var(--tan), .12);
+  --header-color: var(--background-color);
+  --footer-color: rgba(var(--teal));
+  --borders: 1px solid rgba(var(--black), .86);
+}
+
+* {
+  font-family: "Lato", sans-serif;
+  box-sizing: border-box;
+}
+
+html, body {
+  height: 100vh;
+  width: 100vw;
+  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
+}
+
+html, body, p, h1, h2, h3, h4, h5, h6 {
+  padding: 0;
+  margin: 0;
+}
+
+body {
+  background-color: var(--background-color);
+}
+
+header {
+  background-color: var(--header-color);
+  border-bottom: var(--borders);
+  font-variant: small-caps;
+  height: var(--navbar-height);
+}
+footer {
+  background-color: var(--footer-color);
+  border-top: var(--borders);
+}
+
+.color-teal {
+  color: rgba(var(--teal), .86);
+  text-shadow: -1px -1px 0 rgba(var(--black), .52),
+                1px -1px 0 rgba(var(--black), .52),
+               -1px 1px 0 rgba(var(--black), .52), 
+                1px 1px 0 rgba(var(--black), .52);
+}
+.color-tan {
+  color: rgba(var(--tan), .86);
+}
+
+.container {
+  max-width: 1200px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.title {
+  font-size: 3rem;
+  font-weight: 400;
+}
+.text-center {
+  text-align: center;
+}
+
+.h-100 {
+  height: 100%;
+}
+
+.nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.nav > div:first-child {
+  margin-left: 1.25rem;
+}
+.nav > div:last-child {
+  margin-right: 1rem;
+}
+.nav > * {
+  width: 33.33%;
+}
+.nav .hamburger {
+  border: none;
+  background-color: transparent;
+}
+.nav .hamburger ion-icon {
+  margin-top: 0.15rem;
+}
+.nav-logo img {
+  width: 64px;
+  height: 64px;
+}
+.nav-title {
+  align-items: center;
+}
+.nav-hyperlinks, .nav-title {
+  display: flex;
+  flex-direction: column;
+}
+.nav-hyperlinks {
+  align-items: end;
+}
+.nav-hyperlinks > ul {
+  list-style: none;
+  margin: 0.5rem 0;
+  padding: 0;
+}
+.nav-hyperlinks > ul > li {
+  display: inline;
+  float: left;
+}
+.nav-hyperlinks > ul > li > a {
+  padding: 0 1rem;
+}
+.nav-hyperlinks a {
+  display: flex;
+  flex-direction: row-reverse; /* row-reverse so `:hover ~ ion-icon` works */
+  align-items: center;
+  align-content: center;
+  text-decoration: none;
+}
+.nav-hyperlinks a,
+.nav-hyperlinks ion-icon,
+.mobile-nav-header ion-icon {
+  color: rgba(var(--black), .52);
+  transition: color 0.25s ease-in-out,
+              background-color 0.25s ease-in-out;
+}
+.nav-hyperlinks a:hover,
+.nav-hyperlinks ion-icon:hover,
+.mobile-nav-header ion-icon:hover,
+.nav-hyperlinks a span:hover ~ ion-icon {
+  color: rgba(var(--black), .86);
+}
+.nav-hyperlinks ion-icon {
+  font-size: 28px;
+}
+.nav-hyperlinks li:not([data-mobile]) {
+  display: none;
+}
+.nav-hyperlinks li[data-mobile] {
+  display: list-item;
+}
+.nav-hyperlinks a span {
+  display: inline-block;
+  overflow: hidden;
+  white-space: nowrap;
+  max-width: 0;
+  transition: max-width 0.25s linear;
+  margin-left: 0.25rem;
+}
+.nav-hyperlinks a:hover span {
+  max-width: 100px;
+}
+
+.alternating-background-container > :nth-child(2n-1) {
+  background-color: var(--primary-alternating-color);
+}
+.alternating-background-container > :nth-child(2n) {
+  background-color: var(--secondary-alternating-color);
+}
+.alternating-background-container > div {
+  padding: 2rem 0;
+}
+.alternating-primary-brown {
+  --primary-alternating-color: rgba(var(--brown), .21);
+}
+
+.mobile-nav {
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  bottom: 0;
+  top: 0;
+  right: 0;
+  width: min(400px, 95%);
+  border-left: var(--borders);
+  transform: translateX(100%);
+  transition: transform 0.25s ease-in-out;
+  z-index: 1000;
+
+  /* I want the background to be white with a tan overlay.
+   * TODO: see if there's a way to do this without linear-gradient so I can change the base "white" color for dark mode */
+  background-color: white;
+  background-image: linear-gradient(rgba(var(--tan), 0.12), rgba(var(--tan), 0.12));
+  background-blend-mode: multiply;
+}
+.mobile-nav.show {
+  transform: none;
+}
+.mobile-nav .hamburger {
+  border: none;
+  background-color: transparent;
+}
+.mobile-nav .hamburger ion-icon {
+  margin-top: 0.15rem;
+  font-size: 28px;
+}
+.mobile-nav-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: rgba(var(--tan), 1);
+  width: 100%;
+  padding: 1rem;
+}
+.mobile-nav-header h1 {
+  font-size: 1.5rem;
+  font-weight: 800;
+}
+.mobile-nav ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.mobile-nav ul li {
+  border-bottom: var(--borders);
+  font-size: 1.25rem;
+}
+.mobile-nav ul li:first-child {
+  border-top: var(--borders);
+}
+.mobile-nav ul li:hover {
+  background-color: rgba(var(--lightblue), .52);
+}
+.mobile-nav ul li a {
+  text-decoration: none;
+  color: rgba(var(--black), .52);
+  display: flex;
+  align-items: center;
+  padding: 1rem;
+}
+.mobile-nav ul li span {
+  margin-left: 0.5rem;
+}
+.mobile-nav-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgb(var(--black));
+  opacity: 0;
+  z-index: 999;
+  transition: opacity 0.25s ease-in-out;
+}
+.mobile-nav-backdrop.show {
+  opacity: 0.5;
+}
+nav li[data-mobile], button {
+  cursor: pointer;
+}
+
+.flex-adaptive {
+  display: flex;
+  flex-direction: column-reverse;
+}
+.flex-1 {
+  flex: 1;
+}
+
+footer {
+  padding: 3rem 1.5rem;
+  color: rgba(var(--black), .86);
+}
+footer a {
+  text-decoration: none;
+  color: rgba(var(--black), .52);
+}
+footer a:hover {
+  color: rgba(var(--black), .86);
+}
+footer h3 {
+  font-size: 2rem;
+}
+footer h4 {
+  font-size: 1.25rem;
+  font-weight: 400;
+  margin-bottom: 1rem;
+}
+footer p {
+  margin: 0 0 0.5rem 0;
+  font-size: 0.85rem;
+  color: rgba(var(--black), .52);
+}
+footer > div {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  width: 100%;
+}
+footer > div > * {
+  width: 100%;
+  text-align: center;
+}
+footer > div > :last-child {
+  margin-top: 1rem;
+}
+footer ul {
+  width: 100%;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+footer ul li {
+  margin: 0.5rem 0;
+}
+footer ul li:first-child {
+  margin-top: 0;
+}
+footer ul li:last-child {
+  margin-bottom: 0;
+}
+.footer-socials > a > ion-icon {
+  color: rgba(var(--lightblue), .86);
+  background-color: rgba(var(--brown), .52);
+  border-radius: 100%;
+  border: var(--borders);
+  box-sizing: content-box;
+  padding: 0.5rem;
+  margin: 0 0.5rem;
+
+  transition: color 0.25s ease-in-out,
+              background-color 0.25s ease-in-out;
+}
+.footer-socials > a > ion-icon:hover {
+  background-color: rgba(var(--brown), .86);
+}
+.footer-socials > a:first-child > ion-icon {
+  margin-left: 0;
+}
+.footer-socials > a:last-child > ion-icon {
+  margin-right: 0;
+}
+.footer-links {
+  display: flex;
+  text-align: center;
+  margin: 1rem 0 0 0;
+}
+.footer-links ul li a {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+.footer-links ul li a ion-icon {
+  position: relative;
+  top: 0.05em;
+}
+.footer-links > * {
+  flex-grow: 1;
+}
+.footer-links > :last-child {
+  margin-left: 2rem;
+}
+
+.super-center {
+  display: grid;
+  place-items: center;
+}
+
+/* -xs */
+@media (min-width: 576px) {
+  .container {
+    max-width: 540px;
+  }
+}
+/* -sm */
+@media (min-width: 768px) {
+  .container {
+    max-width: 720px;
+  }
+}
+/* -md */
+@media (min-width: 992px) {
+  .container {
+    max-width: 960px;
+  }
+  nav > div:first-child,
+  nav > div:last-child {
+    margin: 0;
+  }
+  .nav-hyperlinks li[data-mobile] {
+    display: none;
+  }
+  .nav-hyperlinks li:not([data-mobile]) {
+    display: list-item;
+  }
+  .flex-adaptive {
+    flex-direction: row;
+  }
+  footer ul {
+    width: fit-content;
+  }
+  footer > div {
+    flex-direction: row;
+  }
+  footer > div > * {
+    width: fit-content;
+  }
+  footer > div > *:first-child {
+    text-align: start;
+  }
+  footer > div > :last-child {
+    margin-top: 0;
+  }
+  .footer-links {
+    text-align: start;
+  }
+}
+/* -lg */
+@media (min-width: 1200px) {
+  .container {
+    max-width: 1140px;
+  }
+}
+/* -xl */
+@media (min-width: 1400px) {
+  .container {
+    max-width: 1320px;
+  }
+}

public/js/navbar.js

@@ -0,0 +1,38 @@
+const mobileNav = document.getElementById('mobile-nav');
+
+function toggleMobileNav() {
+  if (mobileNav.classList.contains('show')) {
+    removeBackdrop()
+  } else {
+    const backdrop = document.createElement('div');
+    backdrop.className = 'mobile-nav-backdrop';
+    document.body.appendChild(backdrop);
+    backdrop.addEventListener('click', () => {
+      mobileNav.classList.remove('show');
+      removeBackdrop();
+    });
+    setTimeout(() => backdrop.classList.add('show'), 10);
+  }
+  mobileNav.classList.toggle('show');
+}
+
+function removeBackdrop() {
+  const backdrop = document.querySelector('.mobile-nav-backdrop');
+  if (backdrop) {
+    backdrop.classList.remove('show');
+    setTimeout(() => {
+      backdrop.remove();
+    }, 250);
+  }
+}
+
+document.addEventListener('keydown', (event) => {
+  if (event.key === 'Escape') {
+    if (mobileNav.classList.contains('show')) {
+      mobileNav.classList.remove('show');
+      removeBackdrop();
+    }
+  }
+});
+document.getElementById('mobile-nav-btn').addEventListener('click', toggleMobileNav);
+document.getElementById('mobile-nav-close-btn').addEventListener('click', toggleMobileNav);

src/_config/filters.js

@@ -0,0 +1,15 @@
+export default function(eleventyConfig) {
+	// Get the first element of a collection.
+	eleventyConfig.addFilter("head", (array) => {
+		if(!Array.isArray(array) || array.length === 0) {
+			return null;
+		}
+
+    return array[0];
+	});
+
+  eleventyConfig.addFilter("firstWords", function (content, numWords = 100) {
+    if (!content) return "";
+    return content.split(/\s+/).slice(0, numWords).join(" ");
+  });
+};

src/_data/metadata.js

@@ -0,0 +1,39 @@
+const date = new Date();
+const formattedDate = date.toLocaleDateString('en-GB', {
+  day: '2-digit',
+  month: 'short',
+  year: 'numeric'
+});
+
+const rssFeedUrl = "/feed.xml";
+
+export default {
+	author: {
+		name: "Cyper",
+    socials: [
+      { name: "Twitter", url: "https://twitter.com/cyperita", icon: "logo-twitter" },
+      { name: "YouTube", url: "https://www.youtube.com/@cyperita", icon: "logo-youtube" },
+      { name: "TikTok", url: "https://www.tiktok.com/@cyperita", icon: "logo-tiktok" },
+      { name: "Instagram", url: "https://www.instagram.com/cyperita/", icon: "logo-instagram" },
+      { name: "RSS", url: rssFeedUrl, icon: "logo-rss" },
+    ],
+
+		sites: [
+      { name: "Main Site", url: "https://cyper.cc", icon: "home-sharp" },
+      { name: "Gitea", url: "https://git.cyper.cc", icon: "code-slash-sharp" },
+    ],
+
+    // TODO: email / newsletter sign up?
+    consumables: [
+      { name: "RSS Feed", url: rssFeedUrl, icon: "logo-rss" },
+    ]
+	},
+  
+	title: "Cy-by-Side",
+	url: "https://cy.cyper.cc/",
+  rss: rssFeedUrl,
+	language: "en",
+	description: "Cy by Side with Cyper: Tangents, Tech, and Thoughtful Takes.",
+  date: formattedDate,
+  year: date.getFullYear()
+}

src/_data/wordCount.js

@@ -0,0 +1,11 @@
+export default function (data) {
+  if (typeof data.content === 'string') {
+    const words = data.content.trim().split(/\s+/).length;
+    const minutes = Math.ceil(words / 200); // avg reading speed
+    data.wordCount = words;
+    data.readingTime = `${minutes} min read`;
+    data.readingTimeMinutes = minutes;
+  }
+
+  return data;
+}

src/_includes/components/footer.liquid

@@ -0,0 +1,46 @@
+<div class="container">
+      <div>
+        <h3>Cyper Catalog</h3>
+        <div class="footer-links">
+          <div>
+            <h4>Websites</h4>
+            <ul>
+              {%- for site in metadata.author.sites -%}
+                <li>
+                  <a href="{{ site.url }}">
+                    <ion-icon name="{{ site.icon }}"></ion-icon>
+                    <span>{{ site.name }}</span>
+                  </a>
+                </li>
+              {%- endfor -%}
+            </ul>
+          </div>
+          <div>
+            <h4>Consumables</h4>
+            <ul>
+              {%- for item in metadata.author.consumables -%}
+                <li>
+                  <a href="{{ item.url }}">
+                    <ion-icon name="{{ item.icon }}"></ion-icon>
+                    <span>{{ item.name }}</span>
+                  </a>
+                </li>
+              {%- endfor -%}
+            </ul>
+          </div>
+        </div>
+      </div>
+      <div>
+        <h3>{{ metadata.title }}</h3>
+        <p>by {{ metadata.author.name }}</p>
+        <h4>Connect with me!</h4>
+        
+        <div class="footer-socials">
+          {%- for social in metadata.author.socials -%}
+            <a href="{{ social.url }}" target="_blank" rel="noopener noreferrer">
+              <ion-icon name="{{ social.icon }}"></ion-icon>
+            </a>
+          {%- endfor -%}
+        </div>
+      </div>
+    </div>

src/_includes/components/headers.liquid

@@ -0,0 +1,9 @@
+{% include "components/meta-tags.liquid" %}
+  
+<link rel="icon" href="/img/favicon.ico" type="image/x-icon">
+
+<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=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap" rel="stylesheet">
+
+<link rel="stylesheet" href="/css/style.css">

src/_includes/components/meta-tags.liquid

@@ -0,0 +1,29 @@
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<meta name="generator" content="{{ eleventy.generator }}">
+
+<meta property="og:title" content="{{ metadata.title }}">
+<meta property="og:site_name" content="Cyper's Blog">
+<meta property="og:type" content="website">
+<meta property="og:description" content="{{ metadata.description }}">
+<meta property="og:image" content="https://dummyimage.com/350x350/19171E/a2dfcb">
+<meta property="og:image:type" content="image/png">
+<meta property="og:image:width" content="350">
+<meta property="og:image:height" content="350">
+<meta property="og:url" content="{{ metadata.url }}">
+<meta name="twitter:card" content="summary_large_image">
+<meta name="twitter:title" content="{{ title | default: metadata.title }}">
+<meta name="twitter:description" content="{{ metadata.description }}">
+<meta name="twitter:image" content="https://dummyimage.com/350x350/19171E/a2dfcb">
+<meta name="twitter:site" content="@CyperWoof">
+<meta name="twitter:creator" content="@CyperWoof">
+<meta name="description" content="{{ metadata.description }}">
+<meta name="author" content="{{ metadata.author.name }}">
+<meta name="keywords" content="blog,tech,food,photos,photography,cyber,cybersecurity,cyper,cyperita,art,3d,2d">
+<meta name="theme-color" content="#A2DFCB">
+<meta name="name" content="{{ metadata.title }}">
+<meta itemprop="name" content="{{ metadata.title }}">
+<meta itemprop="description" content="{{ metadata.description }}">
+<meta itemprop="image" content="https://dummyimage.com/350x350/19171E/a2dfcb">
+<meta itemprop="url" content="{{ metadata.url }}">
+<meta itemprop="thumbnailUrl" content="https://dummyimage.com/350x350/19171E/a2dfcb">

src/_includes/components/navbars.liquid

@@ -0,0 +1,66 @@
+<nav class="container nav h-100" aria-label="Main nav">
+<div class="nav-logo">
+  <a href="/">
+    <img class="site-logo" src="/img/logo.png" alt="CyBySide logo" />
+  </a>
+</div>
+<div class="nav-title">
+  <h1>{{ metadata.title }}</h1>
+</div>
+<div class="nav-hyperlinks">
+  <ul>
+    <li data-mobile>
+      <button id="mobile-nav-btn" class="hamburger" aria-label="Toggle menu">
+        <ion-icon name="menu-sharp"></ion-icon>
+      </button>
+    </li>
+    <li>
+      <a href="/" style="display: flex; flex-direction: row-reverse">
+        <span>Home</span>
+        <ion-icon name="home-sharp"></ion-icon>
+      </a>
+    </li>
+    <li>
+      <a href="/posts">
+        <span>Posts</span>
+        <ion-icon name="newspaper-sharp"></ion-icon>
+      </a>
+    </li>
+    <li>
+      <a href="/about">
+        <span>About</span>
+        <ion-icon name="help-circle-sharp"></ion-icon>
+      </a>
+    </li>
+  </ul>
+</div>
+</nav>
+<nav id="mobile-nav" class="mobile-nav" aria-label="Mobile nav">
+<div class="mobile-nav-header">
+  <h1>{{ metadata.title }}</h1>
+  <button id="mobile-nav-close-btn" class="hamburger" aria-label="Toggle menu">
+    <ion-icon name="close-sharp"></ion-icon>
+  </button>
+</div>
+<div class="mobile-nav-links">
+  <ul>
+    <li>
+      <a href="/">
+        <ion-icon name="home-sharp"></ion-icon>
+        <span>Home</span>
+      </a>
+    </li>
+    <li>
+      <a href="/posts">
+        <ion-icon name="newspaper-sharp"></ion-icon>
+        <span>Posts</span>
+      </a>
+    </li>
+    <li>
+      <a href="/about">
+        <ion-icon name="help-circle-sharp"></ion-icon>
+        <span>About</span>
+      </a>
+    </li>
+  </ul>
+</div>

src/_includes/components/scripts.liquid

@@ -0,0 +1,3 @@
+<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
+<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
+<script src="/js/navbar.js"></script>

src/_includes/layout.html

@@ -1,17 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Document</title>
-</head>
-<body>
-  <header>
-    <h1>{{ title | default: "Bloggy" }}</h1>
-  </header>
-  <main>
-    {{ content }}
-  </main>
-  <footer></footer>
-</body>
-</html>

src/_includes/layout.liquid

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  
+  {% include "components/meta-tags.liquid" %}
+  {% include "components/headers.liquid" %}
+
+  {% if css %}
+    <link rel="stylesheet" href="/css/{{ css }}">
+  {% endif %}
+
+  <title>{{ title | default: metadata.title }} - Cyper's Blog</title>
+</head>
+<body>
+  <header>
+    {% include "components/navbars.liquid" %}
+  </header>
+  <main>
+    {{ content }}
+  </main>
+  <footer>
+    {% include "components/footer.liquid" %}
+  </footer>
+
+  {% include "components/scripts.liquid" %}
+</body>
+</html>

src/_includes/post-layout.liquid

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  
+  {% include "components/meta-tags.liquid" %}
+  {% include "components/headers.liquid" %}
+
+  <link rel="stylesheet" href="/css/posts.css">
+
+  <title>{{ title | default: metadata.title }} - Cyper's Blog</title>
+</head>
+<body class="post-layout">
+  <header>
+    {% include "components/navbars.liquid" %}
+  </header>
+  <main>
+    <div class="container">
+      <h1>{{ title }}</h1>
+      <p class="timestamp">{{ date | date: "%B %-d, %Y" }}</p>
+      <img class="thumbnail" src="{{ thumbnail }}">
+      {{ content }}
+    </div>
+  </main>
+  <footer>
+    {% include "components/footer.liquid" %}
+  </footer>
+
+  {% include "components/scripts.liquid" %}
+</body>
+</html>

src/about.liquid

@@ -0,0 +1,64 @@
+---
+layout: layout.liquid
+title: About Cyper
+css: about.css
+---
+<div class="alternating-background-container alternating-primary-brown">
+  <div>
+    <div class="title container">
+      <div class="super-center">
+        <h1>What Is This Place?</h1>
+      </div>
+      <div>
+        <img src="https://dummyimage.com/1280x720/fff/aaa" alt="Placeholder">
+      </div>
+    </div>
+  </div>
+  <div>
+    <div class="content container">
+      <p>
+        This is my personal blog, where I share my thoughts, experiences, and projects or other things I find interesting. I don't really focus on any particular topic, but there will definitely
+        be a heavier focus on technology, programming, and game development. However, I may also share posts about other topics I feel like writing about. This could be art, music, food, or anything else I'm currently
+        interested in learning more about!
+      </p>
+      <p>
+        I have far too many interests and want to learn all of them yesterday. Being only a single creature with a limited amount of time and resources, I am usually only able to focus on a small amount of topics at once. 
+        I also have a tendency to jump from topic to topic, based off whatever "thing" I currently find the most interesting. Because of this, I want to use this blog as both a way to share my findings, as well as serve as a
+        reminder to where I left off on projects or topics, maybe even re-igniting my spark for what led me to starting down a path for a specific topic in the first place.
+      </p>
+      <p>
+        Being a chronic yapper, I want to spare some of my friends who politely listen to my ramblings, while at the same, hoping to to find any like-minded individuals who may find my posts interesting or helpful. If I can
+        help even one person or introduce a new perspective to someone, then this blog has served its purpose and I can be happy.
+      </p>
+      <p>
+        This blog is a place where I will express my unfiltered thoughts and opinions. I encourage everyone else to do the same, and to please be respectful of others' opinions while doing so.
+      </p>
+    </div>
+  </div>
+  <div>
+    <div class="title title-reverse container">
+      <div class="super-center">
+        <h1>About Me</h1>
+      </div>
+      <div>
+        <img src="https://dummyimage.com/1280x720/fff/aaa" alt="Placeholder">
+      </div>
+    </div>
+  </div>
+  <div>
+    <div class="content container">
+      <p>
+        I am a late 20-something-year old internet creature who has been programming since I was 12 years old. I have a passion for technology, creating things, and sharing my knowledge with others. I have held many titles in life,
+        but as of late, that title has been "Software Engineer". From microcontrollers and microcomputers, to native applications and games, to web development and mobile apps, I find all aspects of technology fascinating. I love to tinker, 
+        build, and create things for the sake of learning how they work. I've always had a passion for learning new things, and as I got older, I found I enjoy teaching others what I learn. 
+      </p>
+      <p>
+        I enjoy playing video games, cooking, finding new music, kayaking, and programming. I can sometimes play the piano, and am currently learning both how to draw and 3D model. Had I never gotten into computing, I would have most likely
+        pursued psychology, as I love learning about mental illnesses and how to help people live better, more fulfilling lives.  
+      </p>
+      <p>
+        I hope you'll stay a while and join me on this journey of exploration and discovery!
+      </p>
+    </div>
+  </div>
+</div>

src/index.html

@@ -1,9 +1,73 @@
 ---
-layout: layout.html
-title: Hello World! Layout file change
+layout: layout.liquid
+css: home.css
 ---
+<div>
+  <div class="container flex-adaptive">
+    <div class="flex-1 home-text">
+      <div>
+        <h1 class="color-teal">Cyper's Blog</h1>
+        <p>Where you can experience stories <span class="">side-by-side</span> with <span class="">Cyper</span></p>
+      </div>
+    </div>
+    <div class="flex-1 home-grid-container">
+      <div class="home-grid">
+        <div class="fill-background fill-teal border-round-1 border-round-tl border-round-bl"></div>
+        <div class="fill-black diamond"></div>
+        <div class="fill-background fill-brown border-round-2 border-round-tr"></div>
 
-{% for post in collections.post %}
-<h2><a href="{{ post.url }}">{{ post.data.title }}</a></h2>
-<p>{{ post.content }}</p>
-{% endfor %}
+        <div class="fill fill-tan">
+          <div>
+            {% squareSvg 10 %}
+          </div>
+        </div>
+        <div class="fill-background fill-lightblue border-round border-round-2"></div>
+        <div class="fill-background fill-brown border-round-2 border-round-br"></div>
+
+        <div class="fill-background fill-tan border-round-1 border-round-tl border-round-tr border-round-bl"></div>
+        <div class="fill fill-lightblue">
+          {% triangleSvg 12 %}
+        </div>
+        <div class="fill-background fill-tan border-round-2 border-round-tr"></div>
+      </div>
+    </div>
+  </div>
+</div>
+<div>
+  <div class="container featured">
+    {% assign latestPost = collections.posts | last %}
+    <h1>Featured Posts</h1>
+    <div>
+      <div>
+        <img class="featured-image" src="{{ latestPost.data.thumbnail }}" alt="{{ latestPost.data.title }}" />
+      </div>
+      <div class="featured-text">
+        <h2>{{ latestPost.data.title }}</h2>
+        <span>{{ latestPost.data.date | date: "%B %-d, %Y" }}</span>
+        <p>{{ latestPost.templateContent | strip_html | firstWords: 25 }}</p>
+        <a href="{{ latestPost.url }}">Read more...</a>
+      </div>
+    </div>
+  </div>
+</div>
+<div>
+  <div class="container about">
+    <h1>The Skinny</h1>
+    <div>
+      <p>Welcome to my blog!</p>
+      <br>
+      <p>
+        This is a place where I, Cyper, will post my yappings, ventings, and random findings I feel like sharing to the world, and I hope you find some enjoyment from my findings. The content I'm writing is for myself, but
+        I hope you may find my some of my posts helpful, entertaining, or a good use of your time. I'd love to hear you find something here that resonates with you, but if not, that's okay too!
+      </p>
+      <br>
+      <p>
+        Currently, this is only a simple static site. At some point in the future, I would love to add in a comment or forum system to hear your feedback and thoughts. However, in the mean time, if you want to reach out, head on over to
+        <a href="/about/">about</a> page, or check the footer of the site to see all of my socials. I am a creature of the internet, so I will eventually see your comments if you reach out. However, I also have random streaks of going dark.
+        If I take too long to respond, please feel free to reach out again. I am always happy to hear from you, and I will do my best to respond as soon as I can!
+      </p>
+      <br>
+      <p>If you're interested in staying up to date with my posts, please find my Atom/RSS feed link in the site footer below! It automatically updates every time I add new posts, so you'll always have the most up to date information with that feed.</p>
+    </div>
+  </div>
+</div>

src/post/post-1.md

@@ -0,0 +1,7 @@
+---
+title: Example post 1
+date: 2025-08-01
+thumbnail: https://dummyimage.com/1280x720/ccc/fff
+---
+
+First post! Content change

src/post/post-10.md

@@ -0,0 +1,7 @@
+---
+title: Example post 10
+date: 2025-08-10
+thumbnail: https://dummyimage.com/1280x720/ccc/fff
+---
+
+Second post!

src/post/post-11.md

@@ -0,0 +1,7 @@
+---
+title: Example post 3
+date: 2025-08-11
+thumbnail: https://dummyimage.com/1280x720/ccc/fff
+---
+
+Second post!

src/post/post-12.md

@@ -0,0 +1,7 @@
+---
+title: Example post 12
+date: 2025-08-12
+thumbnail: https://dummyimage.com/1280x720/ccc/fff
+---
+
+Second post!

src/post/post-2.md

@@ -0,0 +1,7 @@
+---
+title: Example post 2 - for Paz
+date: 2025-08-02
+thumbnail: https://dummyimage.com/1280x720/ccc/fff
+---
+
+Second post!

src/post/post-3.md

@@ -0,0 +1,7 @@
+---
+title: Example post 3
+date: 2025-08-03
+thumbnail: https://dummyimage.com/1280x720/ccc/fff
+---
+
+Second post!

src/post/post-4.md

@@ -0,0 +1,7 @@
+---
+title: Example post 4
+date: 2025-08-04
+thumbnail: https://dummyimage.com/1280x720/ccc/fff
+---
+
+Second post!

src/post/post-5.md

@@ -0,0 +1,7 @@
+---
+title: Example post 5
+date: 2025-08-05
+thumbnail: https://dummyimage.com/1280x720/ccc/fff
+---
+
+Second post!

src/post/post-6.md

@@ -0,0 +1,7 @@
+---
+title: Example post 6
+date: 2025-08-06
+thumbnail: https://dummyimage.com/1280x720/ccc/fff
+---
+
+Second post!

src/post/post-7.md

@@ -0,0 +1,7 @@
+---
+title: Example post 7
+date: 2025-08-07
+thumbnail: https://dummyimage.com/1280x720/ccc/fff
+---
+
+Second post!

src/post/post-8.md

@@ -0,0 +1,7 @@
+---
+title: Example post 8
+date: 2025-08-08
+thumbnail: https://dummyimage.com/1280x720/ccc/fff
+---
+
+Second post!

src/post/post-9.md

@@ -0,0 +1,7 @@
+---
+title: Example post 9
+date: 2025-08-09
+thumbnail: https://dummyimage.com/1280x720/ccc/fff
+---
+
+Second post!

src/post/post.json

@@ -0,0 +1,4 @@
+{
+  "layout": "post-layout.liquid",
+  "tags": "posts"
+}

src/posts.liquid

@@ -0,0 +1,49 @@
+---
+pagination:
+  data: collections.posts
+  size: 10
+  alias: post
+  reverse: true
+permalink: "/posts{% if pagination.pageNumber != 0 %}/{{ pagination.pageNumber }}{% endif %}/"
+layout: layout.liquid
+title: Posts
+css: posts.css
+---
+
+<div class="alternating-background-container alternating-primary-brown">
+  <div>
+    <div class="contaier">
+      <h1 class="title text-center">All Posts</h1>
+    </div>
+  </div>
+  <div class="container posts">
+    {% for post in pagination.items %}
+      <a href="{{ post.url }}">
+        <div class="post-card">
+          {% if post.data.thumbnail %}
+            <img src="{{ post.data.thumbnail }}" alt="{{ post.data.title }}" />
+          {% endif %}
+          <div class="post-body">
+            <p class="post-date">{{ post.date | date: "%B %-d, %Y" }}</p>
+            <h1>{{ post.data.title }}</h1>
+            <p>{{ post.data.context }}</p>
+            <!-- <p>Views {} | Likes {}</p> -->
+          </div>
+        </div>
+      </a>
+    {% endfor %}
+  </div>
+</div>
+<div class="container">
+  <div class="pagination mb-2">
+    {% if pagination.href.previous %}
+      <a href="{{ pagination.href.previous }}">← Previous</a>
+    {% endif %}
+
+    Page {{ pagination.pageNumber | plus: 1 }} of {{ pagination.pages | size }}
+
+    {% if pagination.href.next %}
+      <a href="{{ pagination.href.next }}">Next →</a>
+    {% endif %}
+  </div>
+</div>

src/posts/post-1.md

@@ -1,5 +0,0 @@
----
-title: Example post 11111
----
-
-First post! Content change

src/posts/post-2.md

@@ -1,5 +0,0 @@
----
-title: Example post 2 - for Paz
----
-
-Second post!

src/posts/posts.json

@@ -1,4 +0,0 @@
-{
-  "layout": "layout.html",
-  "tags": "post"
-}