feat: Added featured post

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

@@ -2,6 +2,25 @@
   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;
@@ -9,17 +28,50 @@
   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/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/_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

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

@@ -31,7 +31,7 @@ css: about.css
         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>
-        While this blog isn't my "safe space" per se, it 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.
+        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>

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

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

src/post/post-10.md

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

src/post/post-11.md

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

src/post/post-12.md

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

src/post/post-2.md

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

src/post/post-3.md

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

src/post/post-4.md

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

src/post/post-5.md

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

src/post/post-6.md

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

src/post/post-7.md

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

src/post/post-8.md

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

src/post/post-9.md

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

src/post/post.json

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

src/posts.liquid

@@ -18,17 +18,19 @@ css: posts.css
   </div>
   <div class="container posts">
     {% for post in pagination.items %}
-      <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> -->
+      <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>
-      </div>
+      </a>
     {% endfor %}
   </div>
 </div>