124 lines
4.1 KiB
HTML
124 lines
4.1 KiB
HTML
---
|
|
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> |