From 3c22c883965eab2ab54f3016cb3e40f2b74dbd5c Mon Sep 17 00:00:00 2001 From: dereklseitz Date: Sun, 7 Sep 2025 17:24:16 -0500 Subject: [PATCH] feat: Add demo card on demos page for first showcased demo - add _data/demos.js data file - add Nunjucks logic for dynamically injecting demo attributes into demo cards - add style rules for demo cards --- src/_data/demos.js | 55 +++++++++++ src/_includes/base.njk | 4 +- src/_includes/{footer.html => footer.njk} | 48 ++++----- src/_includes/{header.html => header.njk} | 32 +++--- src/demos.njk | 21 +++- .../bloom-valley-nursery-demo.jpg | Bin 0 -> 233261 bytes src/styles/demos.css | 92 ++++++++++++++++++ src/styles/header-footer.css | 6 +- 8 files changed, 212 insertions(+), 46 deletions(-) create mode 100644 src/_data/demos.js rename src/_includes/{footer.html => footer.njk} (96%) rename src/_includes/{header.html => header.njk} (96%) create mode 100644 src/images/_demo-thumbs/bloom-valley-nursery-demo.jpg diff --git a/src/_data/demos.js b/src/_data/demos.js new file mode 100644 index 0000000..2f1824f --- /dev/null +++ b/src/_data/demos.js @@ -0,0 +1,55 @@ +/** + * @fileoverview This file holds the data for demo cards served on https://dlseitz.dev/demos/ + */ + +const DEMOS = [ +    { +        "title": "Bloom Valley Nursery", + "id": "bvn", +        "imageFile": "bloom-valley-nursery-demo.jpg", +        "altText": "A screenshot of the Bloom Valley Nursery Demo landing page", +        "description": "This demo is a modern e-commerce website (front end) designed to help a fictional family-owned business expand its reach to a broader online audience. It focuses on clean design, data-driven interactivity, and a personal, community-focused touch.", +        "demoUrl": "https://bloomvalleydemo.dlseitz.dev", +        "repoUrl": "https://gitea.dlseitz.dev/dereklseitz/BloomValleyNursery", +        "techstack": [ + "11ty", + "HTML", + "CSS", + "JavaScript", + "Nunjucks", + "Node.js", + "Font Awesome", + "Zoho Calendar API" + ], + "featuresShort": [ + "Data-driven content", + "Interactive carousels", + "Shopping cart functionality", + "Customer feedback & newsletter subscription", + "Third-party API integration", + "Web performance optimizations", + "Accessibility features", + "Modular design" + ], + "featuresLong": [ + "Data-driven content for products, promotions, testimonials, and events.", + "Interactive carousels on the homepage and gallery to showcase featured items, promotions, and testimonials.", + "Shopping cart functionality with temporary session storage.", + "Customer feedback form with client-side validation and local storage.", + "Newsletter subscription with client-side validation.", + "Dynamic integration with the Zoho Calendar API to display community events.", + "Responsive design that adapts to various screen sizes.", + "Accessibility features, including ARIA labels and semantic HTML.", + "Web performance optimizations, such as lazy loading for images.", + "Modular code and file structure for improved scalability and maintenance." + ], +        "category": "e-commerce", +        "problemStatement": "To help a small, family-owned and operated business with deep roots in community involvement and public service expand their reach to customers who may prefer shopping online.", +        "solutionSummary": "This front end site is built to emulate a seamless online shopping experience that captures the fictional brand's community-focused story. The design prioritizes accessibility, visual harmony, and usability, while the data-driven functionality allows for a scalable and easily updatable web application.", + "isLive": false +    } +] + +module.exports = { +    DEMOS +}; \ No newline at end of file diff --git a/src/_includes/base.njk b/src/_includes/base.njk index 11a5115..90e82ab 100644 --- a/src/_includes/base.njk +++ b/src/_includes/base.njk @@ -22,7 +22,7 @@ - {% include "header.html" %} + {% include "header.njk" %}
@@ -30,7 +30,7 @@
- {% include "footer.html" %} + {% include "footer.njk" %} {% if pageScripts %} {% for script in pageScripts %} diff --git a/src/_includes/footer.html b/src/_includes/footer.njk similarity index 96% rename from src/_includes/footer.html rename to src/_includes/footer.njk index b4765de..5407a96 100644 --- a/src/_includes/footer.html +++ b/src/_includes/footer.njk @@ -1,25 +1,25 @@ -