.
This commit is contained in:
parent
a0950c8138
commit
38d7094d3f
14
_data/work_skills.json
Normal file
14
_data/work_skills.json
Normal file
@ -0,0 +1,14 @@
|
||||
[
|
||||
{
|
||||
"title":"Full Stack",
|
||||
"desc":"Applications from the ground up"
|
||||
},
|
||||
{
|
||||
"title":"Embedded",
|
||||
"desc":"High-performance software on small-scale computers"
|
||||
},
|
||||
{
|
||||
"title":"Control Systems",
|
||||
"desc":"Precise and dynamic planning and execution"
|
||||
}
|
||||
]
|
||||
@ -1,3 +1,7 @@
|
||||
#raw-content-wrapper {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#software-hero {
|
||||
position: relative;
|
||||
background: rgb(18, 23, 19);
|
||||
@ -6,13 +10,13 @@
|
||||
rgba(18, 23, 19, 1) 0%,
|
||||
rgba(20, 20, 12, 1) 100%
|
||||
);
|
||||
height: 80vh;
|
||||
height: 100vh;
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 80vh;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
#content {
|
||||
@ -42,7 +46,7 @@
|
||||
|
||||
#align-wrapper {
|
||||
position: absolute;
|
||||
top: 35vh;
|
||||
top: 40vh;
|
||||
margin-left: 10vw;
|
||||
@media (min-width: 843px) {
|
||||
margin-left: 5vw;
|
||||
@ -55,6 +59,7 @@
|
||||
h1 {
|
||||
width: max-content;
|
||||
color: white;
|
||||
font-weight: bolder;
|
||||
margin: 0;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
@ -63,8 +68,8 @@
|
||||
}
|
||||
|
||||
#software-experience {
|
||||
background-color: var(--color-dark-purple);
|
||||
min-height: 100vh;
|
||||
background-color: var(--color-dark-blue);
|
||||
min-height: 80vh;
|
||||
|
||||
.content {
|
||||
color: white;
|
||||
@ -72,6 +77,7 @@
|
||||
|
||||
h1 {
|
||||
text-transform: uppercase;
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
.work-experience-list {
|
||||
@ -93,11 +99,79 @@
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
border-color: var(--color-red);
|
||||
color: var(--color-red);
|
||||
border-color: var(--color-orange);
|
||||
color: var(--color-orange);
|
||||
transition: color 0.1s cubic-bezier(0, 0, 0.58, 1),
|
||||
border 0.1s cubic-bezier(0, 0, 0.58, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#software-skills-showcase {
|
||||
background-color: var(--color-dark-blue);
|
||||
min-height: 60vh;
|
||||
|
||||
.content {
|
||||
color: white;
|
||||
padding-top: 10vh;
|
||||
|
||||
h1 {
|
||||
text-transform: uppercase;
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
.skill-heading {
|
||||
@media (max-width: 993px) {
|
||||
order: -1;
|
||||
}
|
||||
}
|
||||
|
||||
.skill-list {
|
||||
@media (max-width: 993px) {
|
||||
padding-top: 10px;
|
||||
-ms-flex: none !important;
|
||||
flex: none !important;
|
||||
max-width: none !important;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.skill-item {
|
||||
background-color: unset;
|
||||
border-color: white;
|
||||
padding: 10px;
|
||||
|
||||
h4,
|
||||
h5 {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.skill-reveal {
|
||||
hr {
|
||||
background-color: white;
|
||||
}
|
||||
text-align: right;
|
||||
overflow-y: hidden;
|
||||
max-height: 0;
|
||||
transition: max-height 1.4s cubic-bezier(0, 0, 0.58, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#software-projects {
|
||||
background-color: var(--color-dark-blue);
|
||||
min-height: 80vh;
|
||||
color: white;
|
||||
|
||||
h1 {
|
||||
text-transform: uppercase;
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
.home-project {
|
||||
background-color: unset;
|
||||
border-color:white;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
---
|
||||
title: Software
|
||||
layout: raw_page
|
||||
uses:
|
||||
- masonry
|
||||
---
|
||||
|
||||
<div id="software-hero">
|
||||
@ -26,7 +28,6 @@ layout: raw_page
|
||||
Etiam maximus velit at mauris viverra inte</h3>
|
||||
</div>
|
||||
<div class="col-7 work-experience-list">
|
||||
<!-- <ul class="list-group"> -->
|
||||
{% 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">
|
||||
@ -36,10 +37,88 @@ layout: raw_page
|
||||
<h5>{{job.employer}}</h5>
|
||||
</li><br>
|
||||
{% endfor %}
|
||||
<!-- </ul> -->
|
||||
</div>
|
||||
</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>
|
||||
Loading…
x
Reference in New Issue
Block a user