maggicl/maggioni.xyz
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Started work on portfolio

Browse source
This commit is contained in:
Claudio Maggioni (maggicl) 2021-01-26 23:11:24 +01:00
parent 0f0300a23a
commit 4e46051e19
3 changed files with 143 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

68
_sass/_layout.scss
View file

@ -94,6 +94,62 @@ ul.navbar-list {
}
}
.portfolio {
position: relative;
padding-top: 2rem;
.line {
position: absolute;
top: 0;
bottom: 0;
left: 1rem;
border: 3px solid #AAA;
z-index: 100;
}
.line-end, .line-end-bottom {
position: absolute;
left: .75rem;
width: 1rem;
height: 1rem;
border-radius: .25rem;
background: #AAA;
z-index: 200;
}
.line-end { top: 0 }
.line-end-bottom { bottom: 0 }
.port-elem {
display: flex;
align-items: flex-start;
> * { padding: .5rem; z-index: 200 }
.year {
background: $nav-bg;
color: $nav-col;
}
.description {
border: 2px solid $nav-bg;
.images {
background: $nav-bg;
padding: .5rem;
margin: -.5rem -.5rem .5rem -.5rem;
text-align: center;
img {
width: 175px;
margin: .25rem;
border: 3px solid $nav-col;
}
}
}
}
}
@media (max-width: 700px) {
.navbar-list .navbar-item {
width: calc(100% - 2em);
@ -123,16 +179,18 @@ footer {
background: $nav-bg;
color: $nav-col;
@include media-query($on-palm) {
flex-direction: column;
align-items: center;
}
.author {
font-size: 1rem;
text-align: right;
}
@include media-query($on-palm) {
flex-direction: column;
align-items: center;
.author { text-align: center }
}
.icons {
text-align: center;
flex: 0;

BIN
images/smarthut.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.4 MiB

80
portfolio.html Normal file
View file

@ -0,0 +1,80 @@
---
layout: page
title: Portfolio
permalink: /portfolio/
---
<div class="portfolio">
<div class="line"></div>
<div class="line-end"></div>
<div class="line-end-bottom"></div>
<section class="port-elem">
<div class="year">
2020-03 to 2020-06
</div>
<div class="description">
<div class="images">
<a href="/images/smarthut.png">
<img src="/images/smarthut.png" alt="Smarthut homepage"></a>
<a href="/images/smarthut.png">
<img src="/images/smarthut.png" alt="Smarthut homepage"></a>
<a href="/images/smarthut.png">
<img src="/images/smarthut.png" alt="Smarthut homepage"></a>
<a href="/images/smarthut.png">
<img src="/images/smarthut.png" alt="Smarthut homepage"></a>
</div>
<h2><a href="#">Smarthut</a></h2>
<p>Work done during <em>Software Atelier 4</em>. The project is a smart
device control platform complete with devices clustering and trigger
logic.</p>
</div>
</section>
<section class="port-elem">
<div class="year">
2020-03 to 2020-06
</div>
<div class="description">
<h2>Smarthut</h2>
<p>Work done during <em>Software Atelier 4</em>. The project is a smart
device control platform complete with devices clustering and trigger
logic.</p>
</div>
</section>
<section class="port-elem">
<div class="year">
2020-03 to 2020-06
</div>
<div class="description">
<h2>Smarthut</h2>
<p>Work done during <em>Software Atelier 4</em>. The project is a smart
device control platform complete with devices clustering and trigger
logic.</p>
</div>
</section>
<section class="port-elem">
<div class="year">
2020-03 to 2020-06
</div>
<div class="description">
<h2>Smarthut</h2>
<p>Work done during <em>Software Atelier 4</em>. The project is a smart
device control platform complete with devices clustering and trigger
logic.</p>
</div>
</section>
<section class="port-elem">
<div class="year">
2020-03 to 2020-06
</div>
<div class="description">
<h2>Smarthut</h2>
<p>Work done during <em>Software Atelier 4</em>. The project is a smart
device control platform complete with devices clustering and trigger
logic.</p>
</div>
</section>
</div>
{% comment %}
vim: set ts=2 sw=2 et tw=80:
{% endcomment %}