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>
|
||||
<!-- <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>
|
||||
|
||||
@@ -30,7 +30,7 @@
|
||||
|
||||
</main>
|
||||
|
||||
{% include "footer.html" %}
|
||||
{% include "footer.njk" %}
|
||||
|
||||
{% if pageScripts %}
|
||||
{% for script in pageScripts %}
|
||||
|
||||
@@ -1,25 +1,25 @@
|
||||
<footer>
|
||||
<ul class="social-links">
|
||||
<li class="linkedin"><a href="https://linkedin.com/in/dereklseitz" target="_blank" rel="noopener noreferrer"
|
||||
>Connect on LinkedIn</a></li>
|
||||
<li class="gitea"><a href="https://gitea.dlseitz.dev/dereklseitz" target="_blank" rel="noopener noreferrer"
|
||||
>My Project Repos</a></li>
|
||||
<li class="campfire"><a href="https://campfire.dlseitz.dev" target=_blank" rel="noopener noreferrer">Campfire Logs</a></li>
|
||||
</ul>
|
||||
|
||||
<nav aria-label="Footer navigation">
|
||||
<ul class="footer-links">
|
||||
<li><a href="#top">Back to Top</a></li>
|
||||
<li><a href="/">Home</a></li>
|
||||
<li><a href="/about/">About</a></li>
|
||||
<li><a href="/demos/">Demos</a></li>
|
||||
<li><a href="/about/#contact">Contact</a></li>
|
||||
<li><a href="/privacy-policy/" target="_blank" rel="noopener noreferrer"
|
||||
>Privacy Policy</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
|
||||
<p class="copyright">© 2025, Derek L. Seitz, All rights reserved.</p>
|
||||
|
||||
<footer>
|
||||
<ul class="social-links">
|
||||
<li class="linkedin"><a href="https://linkedin.com/in/dereklseitz" target="_blank" rel="noopener noreferrer"
|
||||
>Connect on LinkedIn</a></li>
|
||||
<li class="gitea"><a href="https://gitea.dlseitz.dev/dereklseitz" target="_blank" rel="noopener noreferrer"
|
||||
>My Project Repos</a></li>
|
||||
<li class="campfire"><a href="https://campfire.dlseitz.dev" target=_blank" rel="noopener noreferrer">Campfire Logs</a></li>
|
||||
</ul>
|
||||
|
||||
<nav aria-label="Footer navigation">
|
||||
<ul class="footer-links">
|
||||
<li><a href="#top">Back to Top</a></li>
|
||||
<li><a href="/">Home</a></li>
|
||||
<li><a href="/about/">About</a></li>
|
||||
<li><a href="/demos/">Demos</a></li>
|
||||
<li><a href="/about/#contact">Contact</a></li>
|
||||
<li><a href="/privacy-policy/" target="_blank" rel="noopener noreferrer"
|
||||
>Privacy Policy</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
|
||||
<p class="copyright">© 2025, Derek L. Seitz, All rights reserved.</p>
|
||||
|
||||
</footer>
|
||||
@@ -1,17 +1,17 @@
|
||||
<header class="main-header top">
|
||||
|
||||
<nav class="main-nav">
|
||||
<ul class="nav-list">
|
||||
<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-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-blog"><a href="https://campfire.dlseitz.dev" target="_blank" rel="noopener noreferrer"
|
||||
>Blog</a></li>
|
||||
<li class="nav-item nav-repos"><a href="https://gitea.dlseitz.dev" target="_blank" rel="noopener noreferrer"
|
||||
>My Repos</a></li>
|
||||
</ul>
|
||||
|
||||
</nav>
|
||||
|
||||
<header class="main-header top">
|
||||
|
||||
<nav class="main-nav">
|
||||
<ul class="nav-list">
|
||||
<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-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-blog"><a href="https://campfire.dlseitz.dev" target="_blank" rel="noopener noreferrer"
|
||||
>Blog</a></li>
|
||||
<li class="nav-item nav-repos"><a href="https://gitea.dlseitz.dev" target="_blank" rel="noopener noreferrer"
|
||||
>My Repos</a></li>
|
||||
</ul>
|
||||
|
||||
</nav>
|
||||
|
||||
</header>
|
||||
@@ -6,4 +6,23 @@ stylesheet: /styles/demos.css
|
||||
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;
|
||||
margin-top: 200px;
|
||||
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 {
|
||||
color: var(--secondary-color); /* This will now be applied */
|
||||
background-color: transparent; /* Override the background change */
|
||||
box-shadow: none; /* Remove the shadow */
|
||||
color: var(--secondary-color);
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/*? ↓ Start Footer ↓ */
|
||||
|
||||
Reference in New Issue
Block a user