diff --git a/_sass/_layout.scss b/_sass/_layout.scss
index b2ad200..905ead0 100644
--- a/_sass/_layout.scss
+++ b/_sass/_layout.scss
@@ -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;
diff --git a/images/smarthut.png b/images/smarthut.png
new file mode 100644
index 0000000..4361722
Binary files /dev/null and b/images/smarthut.png differ
diff --git a/portfolio.html b/portfolio.html
new file mode 100644
index 0000000..b279c38
--- /dev/null
+++ b/portfolio.html
@@ -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 %}