Refactor project date handling and sorted portfolio projects by reverse chronological order

Author: ltrush

.eleventy.js

@@ -1,10 +1,94 @@
+const MONTH_LABELS = {
+  1: "Jan.",
+  2: "Feb.",
+  3: "Mar.",
+  4: "Apr.",
+  5: "May.",
+  6: "Jun.",
+  7: "Jul.",
+  8: "Aug.",
+  9: "Sept.",
+  10: "Oct.",
+  11: "Nov.",
+  12: "Dec.",
+};
+
+function normalizeMonthYear(value) {
+  if (!value || typeof value !== "object") return null;
+  const year = Number(value.year);
+  if (Number.isNaN(year)) return null;
+
+  if (value.month === undefined || value.month === null) {
+    return { year, month: null };
+  }
+
+  const month = Number(value.month);
+  if (Number.isNaN(month) || month < 1 || month > 12) return null;
+  return { year, month };
+}
+
+function structuredDateToSortKey(dateValue) {
+  if (!dateValue || typeof dateValue !== "object") return null;
+  const start = normalizeMonthYear(dateValue.start);
+  const end = normalizeMonthYear(dateValue.end);
+  const present = Boolean(dateValue.present);
+
+  if (start) {
+    return start.year * 100 + (start.month || 1);
+  }
+  if (present) return 999912;
+  if (end) {
+    return end.year * 100 + (end.month || 12);
+  }
+  return null;
+}
+
+function formatMonthYear(value) {
+  const normalized = normalizeMonthYear(value);
+  if (!normalized) return "";
+  if (!normalized.month) return String(normalized.year);
+  return `${MONTH_LABELS[normalized.month]} ${normalized.year}`;
+}
+
+function formatStructuredDate(dateValue) {
+  if (!dateValue || typeof dateValue !== "object") return "";
+  const startText = formatMonthYear(dateValue.start);
+  const endText = formatMonthYear(dateValue.end);
+
+  if (!startText && !endText && !dateValue.present) return "";
+  if (dateValue.present && startText) return `${startText} - Present`;
+  if (startText && endText) {
+    if (startText === endText) return startText;
+    return `${startText} - ${endText}`;
+  }
+  return startText || endText;
+}
+
+function projectSortKey(project) {
+  if (!project || typeof project !== "object") return -1;
+  const structuredSortKey = structuredDateToSortKey(project.date);
+  return structuredSortKey === null ? -1 : structuredSortKey;
+}
+
 module.exports = function (eleventyConfig) {
   eleventyConfig.addPassthroughCopy({ "src/assets": "assets" });
   eleventyConfig.addPassthroughCopy({ "src/images": "images" });
+  eleventyConfig.addFilter("sortProjectsByDateDesc", (projects) => {
+    if (!Array.isArray(projects)) return [];
+    return [...projects].sort((a, b) => {
+      const keyDiff = projectSortKey(b) - projectSortKey(a);
+      if (keyDiff !== 0) return keyDiff;
+      return (a.title || "").localeCompare(b.title || "");
+    });
+  });
+  eleventyConfig.addFilter("formatProjectDate", (project) => {
+    if (!project || typeof project !== "object") return "";
+    return formatStructuredDate(project.date);
+  });
 
   return {
     dir: { input: "src", output: "_site" },
     htmlTemplateEngine: "njk",
     markdownTemplateEngine: "njk",
   };
-};
+};

src/_data/projects.json

@@ -5,7 +5,10 @@
     "image": "/images/duckwild.png",
     "alt": "Prototype wildlife tracking node with camera and LoRa mesh networking",
     "description": "A low-power wildlife monitoring system that uses on-device computer vision and a LoRa mesh network to detect and identify animals without relying on cellular or Wi-Fi connectivity.",
-    "dates": "Sept. 2025 – Present",
+    "date": {
+      "start": { "month": 9, "year": 2025 },
+      "present": true
+    },
     "tags": [
       "Embedded Systems",
       "Computer Vision",
@@ -114,7 +117,10 @@
     "image": "/images/camera-flowchart.png",
     "alt": "Flowchart for digital camera firmware",
     "description": "Built a STM32-based digital camera by integrating camera, LCD screen, and SD card storage.",
-    "dates": "May. 2025 - Jun. 2025",
+    "date": {
+      "start": { "month": 5, "year": 2025 },
+      "end": { "month": 6, "year": 2025 }
+    },
     "tags": ["STM32", "DMA", "SPI", "I2C", "Firmware/Hardware Debugging"],
     "projectPage": {
       "url": "/projects/bare-metal-digital-camera.html",
@@ -144,7 +150,9 @@
     "image": "/images/thread-process-meme.png",
     "alt": "Meme about Linux threads and processes",
     "description": "A small user‑level threading library written in C with a round‑robin scheduler.",
-    "dates": "Jan. 2026",
+    "date": {
+      "start": { "month": 1, "year": 2026 }
+    },
     "tags": ["Linux", "C", "Threads"],
     "projectPage": {
       "url": "/projects/ieee-grid-stabilization.html",
@@ -164,7 +172,10 @@
     "image": "/images/bull_robot.png",
     "alt": "Bull robot",
     "description": "An autonomous mobile robot that detects humans, recognizes red objects, and follows a target in real time using stereo vision and onboard AI.",
-    "dates": "Nov. 2025 - Dec. 2025",
+    "date": {
+      "start": { "month": 11, "year": 2025 },
+      "end": { "month": 12, "year": 2025 }
+    },
     "tags": ["Robotics", "Artificial intelligence", "Python", "ROS 2"],
     "projectPage": { 
       "url": "/projects/bull-robot.html", 
@@ -274,7 +285,10 @@
     "image": "/images/IEEE_logo.png",
     "alt": "IEEE logo",
     "description": "An officially published IEEE paper documenting the work our team completed in the 2025 WERC Environmental Engineering Competition to stabilize grid operations using green hydrogen technology",
-    "dates": "Oct. 2024 - Apr. 2025",
+    "date": {
+      "start": { "month": 10, "year": 2024 },
+      "end": { "month": 4, "year": 2025 }
+    },
     "tags": ["Multidisciplinary", "Experimental design", "Technical writing"],
     "projectPage": {
       "url": "/projects/ieee-grid-stabilization.html",
@@ -294,7 +308,10 @@
     "image": "/images/Pipelined RISCV Otter.png",
     "alt": "RISCV Otter diagram",
     "description": "A five-stage, pipelined and cached MCU capable of handling data/control hazards by stalling, forwarding, and flushing.",
-    "dates": "Sept. 2024 – Dec. 2024",
+    "date": {
+      "start": { "month": 9, "year": 2024 },
+      "end": { "month": 12, "year": 2024 }
+    },
     "tags": ["Computer Architecture", "RISC-V", "FPGA", "SystemVerilog"],
     "projectPage": {
       "url": "/projects/pipelined-riscv.html",
@@ -314,7 +331,10 @@
     "image": "/images/dtmf.jpg",
     "alt": "Keypad",
     "description": "A dual-tone multi-frequency decoder coded in Python using integer-based digital signal processing.",
-    "dates": "Sept. 2024 - Dec. 2024",
+    "date": {
+      "start": { "month": 9, "year": 2024 },
+      "end": { "month": 12, "year": 2024 }
+    },
     "tags": [
       "Digital signal processing",
       "Signal processing",
@@ -336,7 +356,9 @@
     "image": "/images/Sliding-Window-Protocol.jpg",
     "alt": "Sliding Window Protocol diagram",
     "description": "Built a reliable file transfer protocol on top of UDP using a Selective Reject sliding window. The project includes a client and forked server that handle packet loss, reordering, and corruption via checksums, cumulative ACKs (RR), targeted NACKs (SREJ), and an EOF/ACK teardown.",
-    "dates": "May. 2025",
+    "date": {
+      "start": { "month": 5, "year": 2025 }
+    },
     "tags": ["Networks", "Protocol design", "UDP", "C"],
     "projectPage": {
       "url": "/projects/reliable-udp-transfer.html",
@@ -372,7 +394,9 @@
     "image": "/images/SLOinformeddemo.gif",
     "alt": "Me at the Hackathon",
     "description": "A weekend long hackathon where our group presented an app to improve civic engagement in SLO. We won an award for best pitch!",
-    "dates": "Mar. 2025",
+    "date": {
+      "start": { "month": 3, "year": 2025 }
+    },
     "tags": ["Hackathon", "Pitching", "Rapid prototyping"],
     "projectPage": {
       "url": "/projects/sloinformed-polyhacks.html",
@@ -392,7 +416,10 @@
     "image": "/images/customdefinitions logo.png",
     "alt": "CustomDefinitions logo",
     "description": "A digital shop where I sell custom-made wall decor.",
-    "dates": "2020 – Present",
+    "date": {
+      "start": { "year": 2020 },
+      "present": true
+    },
     "tags": ["Entrepreneurship", "Design"],
     "projectPage": {
       "url": "/projects/customdefinitions.html",
@@ -412,7 +439,9 @@
     "image": "/images/Shortcut Logo Icon.png",
     "alt": "Apple Shortcuts logo",
     "description": "An Apple shortcut to take and send photos and videos that you don't want around forever.",
-    "dates": "2023",
+    "date": {
+      "start": { "month": 4, "year": 2023 }
+    },
     "tags": ["Automation", "Productivity"],
     "projectPage": {
       "url": "/projects/temporary-media-shortcut.html",
@@ -431,7 +460,10 @@
     "image": "/images/website.png",
     "alt": "Image representing a website",
     "description": "A website built using HTML, CSS, and JavaScript.",
-    "dates": "Sept. 2024 – Present",
+    "date": {
+      "start": { "month": 9, "year": 2024 },
+      "present": true
+    },
     "tags": ["Web Development", "HTML/CSS/JS", "Node.js", "Eleventy"],
     "projectPage": {
       "url": "/projects/personal-website.html",

src/assets/css/styles.min.css

@@ -348,8 +348,9 @@ img {
 
 /* Portfolio Section */
 .portfolio {
-  column-width: 300px;
-  column-gap: 20px;
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 20px;
 }
 .portfolio.currently-building-list{display:flex;flex-direction:column;gap:1.5rem;width:100%;column-width:auto;column-gap:0}
 
@@ -373,7 +374,7 @@ img {
   align-content: start;
   break-inside: avoid;
   -webkit-column-break-inside: avoid;
-  margin-bottom: 20px;
+  margin-bottom: 0;
 }
 
 .project:hover {
@@ -481,9 +482,13 @@ footer p {
   }
 
   .portfolio {
-    column-count: 1;
-    column-gap: 0;
-    column-width: 100%;
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 1100px) and (min-width: 769px) {
+  .portfolio {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 }
 

src/portfolio.njk

@@ -6,8 +6,9 @@ title: Portfolio
 <h1 class="page-title">Projects & Proof-of-Concepts</h1>
 <p class="section-lead">Some of my passion projects, extracurricular activities, and classwork—from published research to weekend prototypes.</p>
 
+{% set sortedProjects = projects | sortProjectsByDateDesc %}
 {% set hasBuilding = false %}
-{% for project in projects %}
+{% for project in sortedProjects %}
     {% if project.currentlyBuilding %}
         {% set hasBuilding = true %}
     {% endif %}
@@ -22,7 +23,7 @@ title: Portfolio
     </div>
 
     <div class="portfolio currently-building-list">
-        {% for project in projects %}
+        {% for project in sortedProjects %}
             {% if project.currentlyBuilding %}
             <div class="project project-wide">
                 <div class="project-media">
@@ -36,8 +37,9 @@ title: Portfolio
                         <span class="pill">Currently building</span>
                     </div>
                     <p class="project-name">{{ project.title }}</p>
-                    {% if project.dates %}
-                    <p class="project-date">{{ project.dates }}</p>
+                    {% set projectDateText = project | formatProjectDate %}
+                    {% if projectDateText %}
+                    <p class="project-date">{{ projectDateText }}</p>
                     {% endif %}
                     <p class="project-description">{{ project.description }}</p>
 
@@ -74,7 +76,7 @@ title: Portfolio
 </div>
 
 <div class="portfolio">
-    {% for project in projects %}
+    {% for project in sortedProjects %}
     {% if not project.currentlyBuilding %}
     <div class="project">
         <a>
@@ -83,8 +85,9 @@ title: Portfolio
 
         <div class="project-details">
             <p class="project-name">{{ project.title }}</p>
-            {% if project.dates %}
-            <p class="project-date">{{ project.dates }}</p>
+            {% set projectDateText = project | formatProjectDate %}
+            {% if projectDateText %}
+            <p class="project-date">{{ projectDateText }}</p>
             {% endif %}
             <p class="project-description">{{ project.description }}</p>
 

src/projects/project-page.njk

@@ -10,8 +10,9 @@ permalink: "/projects/{{ project.slug }}/index.html"
 {# If project pages are disabled for this project, output a simple message #}
 {% if not project.projectPage or not project.projectPage.enabled %}
   <h1 class="page-title">{{ project.title }}</h1>
-  {% if project.dates %}
-    <p class="project-date">{{ project.dates }}</p>
+  {% set projectDateText = project | formatProjectDate %}
+  {% if projectDateText %}
+    <p class="project-date">{{ projectDateText }}</p>
   {% endif %}
   <p class="section-lead">This project page isn’t available yet.</p>
   <div class="cta-row">
@@ -21,8 +22,9 @@ permalink: "/projects/{{ project.slug }}/index.html"
 {% else %}
 
   <h1 class="page-title">{{ project.title }}</h1>
-  {% if project.dates %}
-    <p class="project-date">{{ project.dates }}</p>
+  {% set projectDateText = project | formatProjectDate %}
+  {% if projectDateText %}
+    <p class="project-date">{{ projectDateText }}</p>
   {% endif %}
   <p class="section-lead">{{ project.description }}</p>