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
This commit is contained in:
55
src/_data/demos.js
Normal file
55
src/_data/demos.js
Normal file
@@ -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
|
||||||
|
};
|
||||||
@@ -22,7 +22,7 @@
|
|||||||
<body>
|
<body>
|
||||||
<!-- <a href="https://www.svgbackgrounds.com/set/free-svg-backgrounds-and-patterns/">Free SVG Backgrounds and Patterns by SVGBackgrounds.com</a> -->
|
<!-- <a href="https://www.svgbackgrounds.com/set/free-svg-backgrounds-and-patterns/">Free SVG Backgrounds and Patterns by SVGBackgrounds.com</a> -->
|
||||||
|
|
||||||
{% include "header.html" %}
|
{% include "header.njk" %}
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
|
|
||||||
@@ -30,7 +30,7 @@
|
|||||||
|
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
{% include "footer.html" %}
|
{% include "footer.njk" %}
|
||||||
|
|
||||||
{% if pageScripts %}
|
{% if pageScripts %}
|
||||||
{% for script in pageScripts %}
|
{% for script in pageScripts %}
|
||||||
|
|||||||
@@ -1,25 +1,25 @@
|
|||||||
<footer>
|
<footer>
|
||||||
<ul class="social-links">
|
<ul class="social-links">
|
||||||
<li class="linkedin"><a href="https://linkedin.com/in/dereklseitz" target="_blank" rel="noopener noreferrer"
|
<li class="linkedin"><a href="https://linkedin.com/in/dereklseitz" target="_blank" rel="noopener noreferrer"
|
||||||
>Connect on LinkedIn</a></li>
|
>Connect on LinkedIn</a></li>
|
||||||
<li class="gitea"><a href="https://gitea.dlseitz.dev/dereklseitz" target="_blank" rel="noopener noreferrer"
|
<li class="gitea"><a href="https://gitea.dlseitz.dev/dereklseitz" target="_blank" rel="noopener noreferrer"
|
||||||
>My Project Repos</a></li>
|
>My Project Repos</a></li>
|
||||||
<li class="campfire"><a href="https://campfire.dlseitz.dev" target=_blank" rel="noopener noreferrer">Campfire Logs</a></li>
|
<li class="campfire"><a href="https://campfire.dlseitz.dev" target=_blank" rel="noopener noreferrer">Campfire Logs</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<nav aria-label="Footer navigation">
|
<nav aria-label="Footer navigation">
|
||||||
<ul class="footer-links">
|
<ul class="footer-links">
|
||||||
<li><a href="#top">Back to Top</a></li>
|
<li><a href="#top">Back to Top</a></li>
|
||||||
<li><a href="/">Home</a></li>
|
<li><a href="/">Home</a></li>
|
||||||
<li><a href="/about/">About</a></li>
|
<li><a href="/about/">About</a></li>
|
||||||
<li><a href="/demos/">Demos</a></li>
|
<li><a href="/demos/">Demos</a></li>
|
||||||
<li><a href="/about/#contact">Contact</a></li>
|
<li><a href="/about/#contact">Contact</a></li>
|
||||||
<li><a href="/privacy-policy/" target="_blank" rel="noopener noreferrer"
|
<li><a href="/privacy-policy/" target="_blank" rel="noopener noreferrer"
|
||||||
>Privacy Policy</a></li>
|
>Privacy Policy</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
|
|
||||||
<p class="copyright">© 2025, Derek L. Seitz, All rights reserved.</p>
|
<p class="copyright">© 2025, Derek L. Seitz, All rights reserved.</p>
|
||||||
|
|
||||||
</footer>
|
</footer>
|
||||||
@@ -1,17 +1,17 @@
|
|||||||
<header class="main-header top">
|
<header class="main-header top">
|
||||||
|
|
||||||
<nav class="main-nav">
|
<nav class="main-nav">
|
||||||
<ul class="nav-list">
|
<ul class="nav-list">
|
||||||
<li class="nav-item nav-logo"><a href="/">Derek L. Seitz</a></li>
|
<li class="nav-item nav-logo"><a href="/">Derek L. Seitz</a></li>
|
||||||
<li class="nav-item nav-about"><a href="/about/">About</a></li>
|
<li class="nav-item nav-about"><a href="/about/">About</a></li>
|
||||||
<li class="nav-item nav-demos"><a href="/demos/">Demos</a></li>
|
<li class="nav-item nav-demos"><a href="/demos/">Demos</a></li>
|
||||||
<li class="nav-item nav-contact"><a href="/about/#contact">Contact</a></li>
|
<li class="nav-item nav-contact"><a href="/about/#contact">Contact</a></li>
|
||||||
<li class="nav-item nav-blog"><a href="https://campfire.dlseitz.dev" target="_blank" rel="noopener noreferrer"
|
<li class="nav-item nav-blog"><a href="https://campfire.dlseitz.dev" target="_blank" rel="noopener noreferrer"
|
||||||
>Blog</a></li>
|
>Blog</a></li>
|
||||||
<li class="nav-item nav-repos"><a href="https://gitea.dlseitz.dev" target="_blank" rel="noopener noreferrer"
|
<li class="nav-item nav-repos"><a href="https://gitea.dlseitz.dev" target="_blank" rel="noopener noreferrer"
|
||||||
>My Repos</a></li>
|
>My Repos</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
</header>
|
</header>
|
||||||
@@ -6,4 +6,23 @@ stylesheet: /styles/demos.css
|
|||||||
isLandingPage: false
|
isLandingPage: false
|
||||||
---
|
---
|
||||||
|
|
||||||
<h1>Demos Coming Soon!</h1>
|
<h1>A Preview of What's Comming!</h1>
|
||||||
|
{% for demo in demos.DEMOS %}
|
||||||
|
<div class="{{ demo.id }}-demo-card">
|
||||||
|
<div class="{{ demo.id }}-demo module">
|
||||||
|
<h2 class="demo-title">{{ demo.title }}</h2>
|
||||||
|
<img class="demo-image" src="/images/_demo-thumbs/{{ demo.imageFile }}" alt="{{ demo.altText }}">
|
||||||
|
<p class="demo-description">{{ demo.description}}</p>
|
||||||
|
<h3>Business Problem</h3>
|
||||||
|
<p class="demo-problem">{{ demo.problemStatement }}</p>
|
||||||
|
<h3>Solution</h3>
|
||||||
|
<p class="demo-solution">{{ demo.solutionSummary }}</p>
|
||||||
|
{% if demo.isLive === false %}
|
||||||
|
<p class="coming-soon">Check back soon for full access to this demo!</p>
|
||||||
|
{% else %}
|
||||||
|
<a href="{{ demo.demoUrl }}" class="demo-link" target="_blank" rel="noopener noreferrer">Access the live demo here!</a>
|
||||||
|
{% endif %}
|
||||||
|
<a href="{{ demo.repoUrl }}" class="demo-repo" target="_blank" rel="noopener noreferrer">View Demo's Source Code</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endfor %}
|
||||||
BIN
src/images/_demo-thumbs/bloom-valley-nursery-demo.jpg
Normal file
BIN
src/images/_demo-thumbs/bloom-valley-nursery-demo.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 228 KiB |
@@ -16,4 +16,96 @@ h1, h2 {
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
margin-top: 200px;
|
margin-top: 200px;
|
||||||
font-size: 2.5rem;
|
font-size: 2.5rem;
|
||||||
|
margin-top: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo-card {
|
||||||
|
box-shadow: var(--shadow-small);
|
||||||
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo-card:hover {
|
||||||
|
transform: translateY(-5px);
|
||||||
|
box-shadow: var(--shadow-medium);
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo-title {
|
||||||
|
margin-top: 0;
|
||||||
|
font-size: 2rem;
|
||||||
|
color: var(--primary-color);
|
||||||
|
margin-bottom: var(--margin-small);
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo-image {
|
||||||
|
width: 70%;
|
||||||
|
height: auto;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: var(--shadow-small);
|
||||||
|
margin-bottom: var(--margin-medium);
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo-description,
|
||||||
|
.demo-problem,
|
||||||
|
.demo-solution,
|
||||||
|
.coming-soon {
|
||||||
|
line-height: 1.6;
|
||||||
|
margin-bottom: var(--margin-small);
|
||||||
|
font-size: 1.25rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo-problem,
|
||||||
|
.demo-solution {
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-weight: bold;
|
||||||
|
color: var(--primary-color);
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.coming-soon {
|
||||||
|
font-weight: bold;
|
||||||
|
color: var(--secondary-color);
|
||||||
|
text-align: center;
|
||||||
|
font-style: italic;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo-link,
|
||||||
|
.demo-repo {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 8px 25px;
|
||||||
|
margin: 20px 10px;
|
||||||
|
background-color: var(--secondary-color);
|
||||||
|
color: var(--light-bg-color);
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: 600;
|
||||||
|
border-radius: 50px;
|
||||||
|
transition: background-color 0.3s ease, box-shadow 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo-link:hover,
|
||||||
|
.demo-repo:hover {
|
||||||
|
background-color: var(--primary-color);
|
||||||
|
box-shadow: 0 4px 8px rgba(46, 151, 190, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive tweaks */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
h1 {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo-card {
|
||||||
|
padding: var(--padding-medium);
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo-link,
|
||||||
|
.demo-repo {
|
||||||
|
display: block;
|
||||||
|
margin: 10px auto;
|
||||||
|
width: fit-content;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@@ -56,9 +56,9 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.nav-logo a:hover {
|
.nav-logo a:hover {
|
||||||
color: var(--secondary-color); /* This will now be applied */
|
color: var(--secondary-color);
|
||||||
background-color: transparent; /* Override the background change */
|
background-color: transparent;
|
||||||
box-shadow: none; /* Remove the shadow */
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*? ↓ Start Footer ↓ */
|
/*? ↓ Start Footer ↓ */
|
||||||
|
|||||||
Reference in New Issue
Block a user