---
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 %}