1 files changed, 116 insertions, 0 deletions
diff --git a/themes/cranky/layouts/shortcodes/prj.html b/themes/cranky/layouts/shortcodes/prj.html
new file mode 100644
index 0000000..246a8e1
--- /dev/null
+++ b/themes/cranky/layouts/shortcodes/prj.html
@@ -0,0 +1,116 @@
+<div class="container">
+  <!-- Loop through all projects -->
+  {{ range first 3 (where .Site.RegularPages "Section" "projects") }}
+  <a class="card" href="{{ .Permalink }}">
+    <h3 class="title">{{ .Title }}</h3>
+    <div class="bar">
+      <div class="emptybar"></div>
+      <div class="filledbar"></div>
+    </div>
+    <p class="summary">{{ .Summary | truncate 220 "..." }}</p>
+  </a>
+  <!-- End the loop -->
+  {{ end }}
+</div>
+<a class="button projects" href="/projects">More Projects</a>
+<style>
+  .container {
+    position: relative;
+    height: auto;
+    width: 600px;
+    left: calc(50% - 300px);
+    display: flex;
+    margin-bottom: 30px;
+  }
+
+  .card {
+    display: flex;
+    height: auto;
+    width: 230px;
+    margin-top: 20px;
+    /* background-color: #222d32; */
+    background: linear-gradient(-45deg, #111a1f, #222d32);
+    color: var(--text-fg);
+    border-radius: 10px;
+    box-shadow: -1rem 0 3rem #000;
+    /* margin-left: -50px; */
+    transition: 0.4s ease-out;
+    position: relative;
+    left: 0px;
+  }
+
+  .card:not(:first-child) {
+    margin-left: -50px;
+  }
+
+  .card:hover {
+    box-shadow: 0 0 4rem #554;
+    transform: translateY(-20px);
+    transition: 0.4s ease-out;
+    color: var(--text-fg);
+  }
+
+  .card:hover ~ .card {
+    position: relative;
+    left: 70px;
+    transition: 0.4s ease-out;
+  }
+
+  .title {
+    color: var(--text-fg);
+    font-weight: bold;
+    position: absolute;
+    left: 20px;
+    top: 15px;
+  }
+
+  .card:hover > .title {
+    color: var(--header-fg);
+    transition: 0.4s ease-out;
+  }
+
+  .bar {
+    position: absolute;
+    top: 70px;
+    left: 20px;
+    height: 5px;
+    width: 150px;
+  }
+
+  .summary {
+    /* position: relative; */
+    margin-top: 80px;
+    margin-left: 10px;
+    margin-right: 10px;
+    top: 70px;
+    left: 20px;
+  }
+
+  .emptybar {
+    background-color: #2e3033;
+    width: 100%;
+    height: 100%;
+  }
+
+  .filledbar {
+    position: absolute;
+    top: 0px;
+    z-index: 3;
+    width: 0px;
+    height: 100%;
+    background: linear-gradient(90deg, #66aabb 0%, #8ea374 22%, #ebcb88 100%);
+    transition: 0.6s ease-out;
+  }
+
+  .card:hover .filledbar {
+    width: 120px;
+    transition: 0.4s ease-out;
+  }
+  /* center the button */
+  .projects {
+    position: relative;
+    left: calc(50% - 50px);
+    margin-top: 30px;
+    margin-bottom: 30px;
+  }
+</style>