feat: Added featured post

note: need to find suitable images for placeholders

.gitea/workflows/deploy.yaml

@@ -13,6 +13,11 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@v3
       
+      - name: Download dependencies
+        run: |
+          npm ci
+          echo "Dependencies installed successfully."
+
       - name: Build site
         run: |
           npm run build

.gitignore

@@ -1,3 +1,6 @@
+# Node files
+node_modules/
+
 # @11ty/eleventy output
 src/_site/
 _site/

eleventy.config.js

@@ -1,9 +1,40 @@
+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) {

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

@@ -11,8 +11,15 @@
     "type": "git",
     "url": "https://git.cyper.cc/Cyper/CyBySide"
   },
-  "keywords": ["blog", "@11ty/eleventy", "eleventy"],
+  "keywords": [
+    "blog",
+    "@11ty/eleventy",
+    "eleventy"
+  ],
   "author": "Cyper",
   "license": "ISC",
-  "type": "module"
+  "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

@@ -126,6 +126,7 @@ main > :last-child {
   object-fit: cover;
   object-position: center;
   width: 100%;
+  border: 4px solid white;
 }
 .featured > h1,
 .about > h1 {
@@ -151,6 +152,14 @@ main > :last-child {
   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;
@@ -226,4 +235,7 @@ main > :last-child {
     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

@@ -61,6 +61,14 @@ footer {
   margin-right: auto;
 }
 
+.title {
+  font-size: 3rem;
+  font-weight: 400;
+}
+.text-center {
+  text-align: center;
+}
+
 .h-100 {
   height: 100%;
 }
@@ -86,7 +94,7 @@ footer {
 .nav .hamburger ion-icon {
   margin-top: 0.15rem;
 }
-.nav-logo > img {
+.nav-logo img {
   width: 64px;
   height: 64px;
 }
@@ -114,6 +122,7 @@ footer {
 }
 .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;
@@ -122,10 +131,13 @@ footer {
 .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 {
+.mobile-nav-header ion-icon:hover,
+.nav-hyperlinks a span:hover ~ ion-icon {
   color: rgba(var(--black), .86);
 }
 .nav-hyperlinks ion-icon {
@@ -149,6 +161,19 @@ footer {
   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;
@@ -296,12 +321,18 @@ footer ul li:last-child {
 }
 .footer-socials > a > ion-icon {
   color: rgba(var(--lightblue), .86);
-  background-color: rgba(var(--brown), .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;
@@ -314,6 +345,15 @@ footer ul li:last-child {
   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;
 }
@@ -321,6 +361,11 @@ footer ul li:last-child {
   margin-left: 2rem;
 }
 
+.super-center {
+  display: grid;
+  place-items: center;
+}
+
 /* -xs */
 @media (min-width: 576px) {
   .container {

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

@@ -5,14 +5,33 @@ const formattedDate = date.toLocaleDateString('en-GB', {
   year: 'numeric'
 });
 
+const rssFeedUrl = "/feed.xml";
+
 export default {
 	author: {
 		name: "Cyper",
-		url: "https://cyper.cc"
+    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,

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,248 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <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">
-  
-  <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">
-  <link rel="stylesheet" href="/css/home.css">
-
-  <title>{{ title | default: metadata.title }} - Cyper's Blog</title>
-</head>
-<body>
-  <header>
-    <nav class="container nav h-100" aria-label="Main nav">
-      <div class="nav-logo">
-        <img class="site-logo" src="/img/logo.png" alt="CyBySide logo" />
-      </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="/">
-              <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>
-    </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>
-  </header>
-  <main>
-    <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>
-
-            <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">
-        <h1>Featured Posts</h1>
-        <div>
-          <div>
-            <img src="https://dummyimage.com/1280x720/fff/aaa" alt="Featured Post Image" />
-          </div>
-          <div>
-            <h2>Latest Post Title Goes Here</h2>
-            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias nisi dolorem velit facere ea? Fugit dolor libero dolorem laborum sapiente labore quidem eos, ratione deleniti. Hic sunt ea aspernatur iusto!</p>
-            <a href="#">Read more...</a>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div>
-      <div class="container about">
-        <h1>The Skinny</h1>
-        <div>
-          <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ut dolore, architecto voluptates eaque minima doloremque aperiam quaerat quidem veniam animi earum debitis suscipit cum quod sint laudantium, dolores tempore aut. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ut dolore, architecto voluptates eaque minima doloremque aperiam quaerat quidem veniam animi earum debitis suscipit cum quod sint laudantium, dolores tempore aut.</p>
-          <br>
-          <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ut dolore, architecto voluptates eaque minima doloremque aperiam quaerat quidem veniam animi earum debitis suscipit cum quod sint laudantium, dolores tempore aut.</p>
-        </div>
-      </div>
-    </div>
-  </main>
-  <footer>
-    <div class="container">
-      <div>
-        <h3>Cyper Catalog</h3>
-        <div class="footer-links">
-          <div>
-            <h4>Websites</h4>
-            <ul>
-              <li><a href="#">Main Site</a></li>
-              <li><a href="#">Gitea</a></li>
-            </ul>
-          </div>
-          <div>
-            <h4>Consumables</h4>
-            <ul>
-              <li><a href="#">RSS Feed</a></li>
-            </ul>
-          </div>
-        </div>
-      </div>
-      <div>
-        <h3>{{ metadata.title }}</h3>
-        <p>by {{ metadata.author.name }}</p>
-        <h4>Connect with me!</h4>
-        
-        <div class="footer-socials">
-          <a href="#"><ion-icon name="logo-twitter"></ion-icon></a>
-          <a href="#"><ion-icon name="logo-youtube"></ion-icon></a>
-          <a href="#"><ion-icon name="logo-tiktok"></ion-icon></a>
-          <a href="#"><ion-icon name="logo-rss"></ion-icon></a>
-        </div>
-      </div>
-    </div>
-  </footer>
-
-  <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>
-    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);
-  </script>
-</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,8 +1,73 @@
 ---
-layout: layout.html
+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 %}
+        <div class="fill fill-tan">
-<h2><a href="{{ post.url }}">{{ post.data.title }}</a></h2>
+          <div>
-<p>{{ post.content }}</p>
+            {% squareSvg 10 %}
-{% endfor %}
+          </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.html

@@ -1,9 +0,0 @@
----
-layout: layout.html
-title: Hello World! Layout file change
----
-
-{% for post in collections.post %}
-<h2><a href="{{ post.url }}">{{ post.data.title }}</a></h2>
-<p>{{ post.content }}</p>
-{% endfor %}

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"
-}