feat: Added featured post

note: need to find suitable images for placeholders

.gitea/workflows/deploy.yaml

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

.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%;
 }
@@ -153,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;
@@ -340,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,31 +5,33 @@ const formattedDate = date.toLocaleDateString('en-GB', {
   year: 'numeric'
 });
 
+const rssFeedUrl = "/feed.xml";
+
 export default {
 	author: {
 		name: "Cyper",
     socials: [
-      { name: "Twitter", url: "https://twitter.com/Cyperita", icon: "logo-twitter" },
+      { name: "Twitter", url: "https://twitter.com/cyperita", icon: "logo-twitter" },
-      { name: "YouTube", url: "https://www.youtube.com/@Cyperita", icon: "logo-youtube" },
+      { 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: "https://cy.cyper.cc/rss.xml", icon: "logo-rss" },
+      { name: "RSS", url: rssFeedUrl, icon: "logo-rss" },
     ],
 
 		sites: [
-      { name: "Main Site", url: "https://cy.cyper.cc", icon: "home-sharp" },
+      { name: "Main Site", url: "https://cyper.cc", icon: "home-sharp" },
-      { name: "Gitea", url: "https://gitea.cyper.cc", icon: "code-slash-sharp" },
+      { name: "Gitea", url: "https://git.cyper.cc", icon: "code-slash-sharp" },
     ],
 
     // TODO: email / newsletter sign up?
     consumables: [
-      { name: "RSS Feed", url: "https://cy.cyper.cc/rss.xml", icon: "logo-rss" },
+      { name: "RSS Feed", url: rssFeedUrl, icon: "logo-rss" },
     ]
 	},
   
 	title: "Cy-by-Side",
 	url: "https://cy.cyper.cc/",
-  rss: "https://cy.cyper.cc/rss.xml",
+  rss: rssFeedUrl,
 	language: "en",
 	description: "Cy by Side with Cyper: Tangents, Tech, and Thoughtful Takes.",
   date: formattedDate,

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/scripts.liquid

@@ -1,2 +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 nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
+<script src="/js/navbar.js"></script>

src/_includes/layout.liquid

@@ -3,15 +3,11 @@
 <head>
   
   {% include "components/meta-tags.liquid" %}
-  
+  {% include "components/headers.liquid" %}
-  <link rel="icon" href="/img/favicon.ico" type="image/x-icon">
 
-  <link rel="preconnect" href="https://fonts.googleapis.com">
+  {% if css %}
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link rel="stylesheet" href="/css/{{ css }}">
-  <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">
+  {% endif %}
-
-  <link rel="stylesheet" href="/css/style.css">
-  <link rel="stylesheet" href="/css/home.css">
 
   <title>{{ title | default: metadata.title }} - Cyper's Blog</title>
 </head>
@@ -27,46 +23,5 @@
   </footer>
 
   {% include "components/scripts.liquid" %}
-  <script>
-    // TODO: move to script file
-    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/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

@@ -1,8 +1,64 @@
 ---
 layout: layout.liquid
 title: About Cyper
+css: about.css
 ---
-
+<div class="alternating-background-container alternating-primary-brown">
-<div class="container">
+  <div>
-  <h1>About page!</h1>
+    <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,7 +1,7 @@
 ---
 layout: layout.liquid
+css: home.css
 ---
-
 <div>
   <div class="container flex-adaptive">
     <div class="flex-1 home-text">
@@ -35,15 +35,17 @@ layout: layout.liquid
 </div>
 <div>
   <div class="container featured">
+    {% assign latestPost = collections.posts | last %}
     <h1>Featured Posts</h1>
     <div>
       <div>
-        <img src="https://dummyimage.com/1280x720/fff/aaa" alt="Featured Post Image" />
+        <img class="featured-image" src="{{ latestPost.data.thumbnail }}" alt="{{ latestPost.data.title }}" />
       </div>
-      <div>
+      <div class="featured-text">
-        <h2>Latest Post Title Goes Here</h2>
+        <h2>{{ latestPost.data.title }}</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>
+        <span>{{ latestPost.data.date | date: "%B %-d, %Y" }}</span>
-        <a href="#">Read more...</a>
+        <p>{{ latestPost.templateContent | strip_html | firstWords: 25 }}</p>
+        <a href="{{ latestPost.url }}">Read more...</a>
       </div>
     </div>
   </div>
@@ -52,9 +54,20 @@ layout: layout.liquid
   <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>
+      <p>Welcome to my blog!</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>
+      <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

@@ -1,11 +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">
-  {% for post in collections.post %}
+  <div class="pagination mb-2">
-  <h2><a href="{{ post.url }}">{{ post.data.title }}</a></h2>
+    {% if pagination.href.previous %}
-  <p>{{ post.content }}</p>
+      <a href="{{ pagination.href.previous }}">← Previous</a>
-  {% endfor %}
+    {% 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.liquid",
-  "tags": "post"
-}