feat: Added featured post

note: need to find suitable images for placeholders

eleventy.config.js

@@ -3,13 +3,21 @@ 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: "/atom.xml",
+		outputPath: "/feed.xml",
 		collection: {
 			name: "posts", // iterate over `collections.posts`
 			limit: 25,     // 0 means no limit

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

@@ -7,4 +7,9 @@ export default function(eleventyConfig) {
 
     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,7 +5,7 @@ const formattedDate = date.toLocaleDateString('en-GB', {
   year: 'numeric'
 });
 
-const rssFeedUrl = "https://cy.cyper.cc/feed.xml";
+const rssFeedUrl = "/feed.xml";
 
 export default {
 	author: {
@@ -19,7 +19,7 @@ export default {
     ],
 
 		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://git.cyper.cc", icon: "code-slash-sharp" },
     ],
 

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 src="/js/navbar.js"></script>

src/_includes/layout.liquid

@@ -23,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

@@ -3,11 +3,62 @@ layout: layout.liquid
 title: About Cyper
 css: about.css
 ---
-<div>
-  <div class="container">
-    <h1>What is this place?</h1>
+<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 class="container">
-    <h1>About me</h1>
+  <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

@@ -35,15 +35,17 @@ css: home.css
 </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>
-        <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 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>

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="container">
-  {% for post in collections.post %}
-  <h2><a href="{{ post.url }}">{{ post.data.title }}</a></h2>
-  <p>{{ post.content }}</p>
-  {% endfor %}
+<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.liquid",
-  "tags": "posts"
-}