---
title: Software
layout: raw_page
uses:
- masonry
---

<div id="software-hero">

    <div id="content">
        <div id="tilt"></div>
        <div id="align-wrapper">
            <h1>Software</h1>
        </div>
    </div>

    <img src="/assets/images/dev/software-landing.jpg" alt="Me, on my computer">

</div>

<div id="software-experience">
    <div class="container">
        <div class="content">
            <div class="row">
                <div class="col">
                    <h1>Experience</h1>
                    <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris maximus a augue id egestas.
                        Etiam maximus velit at mauris viverra inte</h3>
                </div>
                <div class="col-7 work-experience-list">
                    {% for job in site.data.work_experience %}
                    <li class="card work-experience-item" onclick="document.location='{{job.url}}';">
                        <div class="d-flex w-100 justify-content-between">
                            <h4 class="mb-1">{{job.title}}</h4>
                            <small>{{job.date.min}} - {{job.date.max}}</small>
                        </div>
                        <h5>{{job.employer}}</h5>
                    </li><br>
                    {% endfor %}
                </div>
            </div>
        </div>

    </div>
</div>

<div id="software-skills-showcase">
    <div class="container">
        <div class="content">
            <div class="row">
                <div class="col-7 skill-list">
                    {% for skill in site.data.work_skills %}
                    <li class="card skill-item">
                        <h4>{{skill.title}}</h4>
                        <h5>{{skill.desc}}</h5>
                    </li><br>
                    {% endfor %}
                </div>
                <div class="col skill-heading">
                    <h1>Skills</h1>
                    <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris maximus a augue id egestas.
                        Etiam maximus velit at mauris viverra inte</h3>
                </div>
            </div>
        </div>

    </div>
</div>

<div id="software-projects">
    <div class="container">

        <h1>Projects</h1>

        <div class="row" id="project-grid">

            {% for project in site.data.projects %}
            <div class="col-sm-4 project-item">
                <div class="card home-project">
                    {% if project.hero %}
                    <img src="{{project.hero.img_src}}" class="card-img-top" alt="{{project.title}}" loading="auto">
                    {% endif %}
                    <div class="card-body" {% if project.archived %}data-toggle="tooltip" data-placement="top"
                        title="No longer actively maintained" {% endif %}>
                        <h5 class="card-title"><strong>{{project.title}} {% if project.archived %}<span
                                    class="badge badge-secondary">Archived</span>{% endif %}</strong></h5>
                        <p class="card-text">{{project.description}}</p>

                        {% for text_btn in project.text_buttons %}
                        <a href="{{text_btn.url}}" class="btn btn-{{text_btn.color}}">{{text_btn.text}}</a>
                        {% endfor %}

                        {% for icon_btn in project.icon_buttons %}
                        <a href="{{icon_btn.url}}" class="btn btn-dark"><i class="{{icon_btn.icon}}"></i></a>
                        {% endfor %}
                    </div>
                </div>
            </div>
            {% endfor %}

        </div>

    </div>
</div>

<!-- Project grid -->
<script>

    function orderProjectGrid() {
        $('#project-grid').masonry({
            // options
            itemSelector: '.project-item',
            // columnWidth: 500,
            transitionDuration: '0s'
        });
    }


    // re-order in 2 seconds in case anything was still lazy-loading
    setTimeout(orderProjectGrid, 1000);
    setTimeout(orderProjectGrid, 1500);
    setTimeout(orderProjectGrid, 2000);
    setTimeout(orderProjectGrid, 5000);
</script>