---
title: Practice Projects
layout: base.njk
css: ["/css/style.css"]
cssReset: true
---

<div class="blurb">
    {% renderFile "./src/_includes/MD/blurb.md" %}
</div>

{% for service in webprojects.services %}
    <div class="projectsDiv {{service.cssClass}}">
        <div class="alignedHeader">
            <h2 class="projectsSection__title">{{service.name}}</h2>
            {% if service.svgSource%}
                <img src="{{service.svgSource}}" alt="{{service.svgAltText}}"/>
            {% endif %}
        </div>
        {% if service.description%}
            <p>{{service.description}}</p>
        {% endif %}

        {% for difficultyLevel in service.difficulty %}
            {% if difficultyLevel.challenges | length %}
                <div class="{{difficultyLevel.cssClass}}">
                    {% if difficultyLevel.title%}
                        <h3>{{difficultyLevel.title}} Challenges</h3>
                    {% endif %}
                    {% if difficultyLevel.description%}
                        <p>{{difficultyLevel.description}}</p>
                    {% endif %}
                    <div class="projects-grid">
                        {% for challenge in difficultyLevel.challenges %}
                            {% set projectContent = challenge %}
                            {% include "components/project.njk" %}
                        {% endfor %}
                    </div>
                </div>
            {% endif %}
        {% endfor %}
    </div>
{% endfor %}

<div class="projectsDiv">
    <div class="alignedHeader">
        <h2 class="projectsSection__title">Playground</h2>
        <img style="width: 10%;" src="/svgs/purple_fedora.svg" alt="A Purple Fedora"/>
    </div>
    <p>
        Intended for just little snippets of code that look useful
    </p>
    <a href="/playground">The Playground</a>
</div>