dereklseitz
57e1bb8d9d
- change outer <div> wrapper to <article> for improved semantic HTML - add "aria-labelledby" attribute to explicitly link each demo card to its title
28 lines
1.4 KiB
Plaintext
28 lines
1.4 KiB
Plaintext
---
|
|
layout: base.njk
|
|
metaDesc: "Explore a collection of web development projects by Derek L. Seitz. Demos are coming soon! Check back to see my work."
|
|
title: "Demos"
|
|
stylesheet: /styles/demos.css
|
|
isLandingPage: false
|
|
---
|
|
|
|
<h1>A Preview of What's Comming!</h1>
|
|
{% for demo in demos.DEMOS %}
|
|
<article id="demo-{{ demo.id }}" class="{{ demo.id }}-demo-card" aria-labelledby="demo-title-{{ demo.id }}">
|
|
<div class="{{ demo.id }}-demo module">
|
|
<h2 id="demo-title-{{ demo.id }}" 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>
|
|
</article>
|
|
{% endfor %} |