initial project commit

css/animations.css

@@ -0,0 +1,232 @@
+.fade-in-left {
+  opacity: 0;
+  transition: opacity 0.4s ease; }
+  .fade-in-left.animate {
+    -webkit-animation: fade-in-left 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) both;
+    animation: fade-in-left 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) both;
+    transition: opacity 0.4s ease; }
+
+.fade-in-right {
+  opacity: 0;
+  transition: opacity 0.4s ease; }
+  .fade-in-right.animate {
+    -webkit-animation: fade-in-right 1s cubic-bezier(0.39, 0.575, 0.565, 1) both;
+    animation: fade-in-right 1s cubic-bezier(0.39, 0.575, 0.565, 1) both;
+    transition: opacity 0.4s ease; }
+
+.fade-in-fwd {
+  opacity: 0;
+  transition: opacity 0.4s ease; }
+  .fade-in-fwd.animate {
+    -webkit-animation: fade-in-fwd 1s cubic-bezier(0.39, 0.575, 0.565, 1) both;
+    animation: fade-in-fwd 1s cubic-bezier(0.39, 0.575, 0.565, 1) both;
+    transition: opacity 0.4s ease; }
+
+.swing-in-top-fwd {
+  opacity: 0;
+  transition: opacity 0.4s ease; }
+  .swing-in-top-fwd.animate {
+    -webkit-animation: swing-in-top-fwd 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
+    animation: swing-in-top-fwd 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
+    transition: opacity 0.4s ease; }
+
+.fade-out {
+  -webkit-animation: fade-out 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both !important;
+  animation: fade-out 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both !important;
+  transition: opacity 0.4s ease; }
+
+.slide-in-left {
+  -webkit-animation: slide-in-left 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) both;
+  animation: slide-in-left 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) both;
+  transition: opacity 0.4s ease; }
+
+.slide-out-left {
+  -webkit-animation: slide-out-left 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) both;
+  animation: slide-out-left 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) both;
+  transition: opacity 0.4s ease; }
+
+.animate.delay_01 {
+  -webkit-animation-delay: 0.1s;
+  animation-delay: 0.1s; }
+
+.animate.delay_02 {
+  -webkit-animation-delay: 0.2s;
+  animation-delay: 0.2s; }
+
+.animate.delay_03 {
+  -webkit-animation-delay: 0.3s;
+  animation-delay: 0.3s; }
+
+.animate.delay_04 {
+  -webkit-animation-delay: 0.4s;
+  animation-delay: 0.4s; }
+
+.animate.delay_05 {
+  -webkit-animation-delay: 0.5s;
+  animation-delay: 0.5s; }
+
+.animate.delay_06 {
+  -webkit-animation-delay: 0.6s;
+  animation-delay: 0.6s; }
+
+.animate.delay_07 {
+  -webkit-animation-delay: 0.7s;
+  animation-delay: 0.7s; }
+
+.animate.delay_08 {
+  -webkit-animation-delay: 0.8s;
+  animation-delay: 0.8s; }
+
+.animate.delay_09 {
+  -webkit-animation-delay: 0.9s;
+  animation-delay: 0.9s; }
+
+.animate.delay_10 {
+  -webkit-animation-delay: 1s;
+  animation-delay: 1s; }
+
+.animate.delay_11 {
+  -webkit-animation-delay: 1.1s;
+  animation-delay: 1.1s; }
+
+.animate.delay_12 {
+  -webkit-animation-delay: 1.2s;
+  animation-delay: 1.2s; }
+
+.animate.delay_13 {
+  -webkit-animation-delay: 1.3s;
+  animation-delay: 1.3s; }
+
+.animate.delay_14 {
+  -webkit-animation-delay: 1.4s;
+  animation-delay: 1.4s; }
+
+.animate.delay_15 {
+  -webkit-animation-delay: 1.5s;
+  animation-delay: 1.5s; }
+
+@-webkit-keyframes fade-out {
+  0% {
+    -webkit-transform: translateZ(0);
+    transform: translateZ(0);
+    opacity: 1; }
+  100% {
+    -webkit-transform: translateZ(-80px);
+    transform: translateZ(-80px);
+    opacity: 0; } }
+/**
+ * ----------------------------------------
+ * animation fade-in-left
+ * ----------------------------------------
+ */
+@-webkit-keyframes fade-in-left {
+  0% {
+    -webkit-transform: translateX(-50px);
+    transform: translateX(-50px);
+    opacity: 0; }
+  100% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+    opacity: 1; } }
+@keyframes fade-in-left {
+  0% {
+    -webkit-transform: translateX(-50px);
+    transform: translateX(-50px);
+    opacity: 0; }
+  100% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+    opacity: 1; } }
+/**
+ * ----------------------------------------
+ * animation fade-in-fwd
+ * ----------------------------------------
+ */
+@-webkit-keyframes fade-in-fwd {
+  0% {
+    -webkit-transform: translateZ(-80px);
+    transform: translateZ(-80px);
+    opacity: 0; }
+  100% {
+    -webkit-transform: translateZ(0);
+    transform: translateZ(0);
+    opacity: 1; } }
+@keyframes fade-in-fwd {
+  0% {
+    -webkit-transform: translateZ(-80px);
+    transform: translateZ(-80px);
+    opacity: 0; }
+  100% {
+    -webkit-transform: translateZ(0);
+    transform: translateZ(0);
+    opacity: 1; } }
+/**
+ * ----------------------------------------
+ * animation fade-in-right
+ * ----------------------------------------
+ */
+@-webkit-keyframes fade-in-right {
+  0% {
+    -webkit-transform: translateX(50px);
+    transform: translateX(50px);
+    opacity: 0; }
+  100% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+    opacity: 1; } }
+@keyframes fade-in-right {
+  0% {
+    -webkit-transform: translateX(50px);
+    transform: translateX(50px);
+    opacity: 0; }
+  100% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+    opacity: 1; } }
+/**
+ * ----------------------------------------
+ * animation swing-in-top-fwd
+ * ----------------------------------------
+ */
+@-webkit-keyframes swing-in-top-fwd {
+  0% {
+    -webkit-transform: rotateX(-100deg);
+    transform: rotateX(-100deg);
+    -webkit-transform-origin: top;
+    transform-origin: top;
+    opacity: 0; }
+  100% {
+    -webkit-transform: rotateX(0deg);
+    transform: rotateX(0deg);
+    -webkit-transform-origin: top;
+    transform-origin: top;
+    opacity: 1; } }
+@keyframes swing-in-top-fwd {
+  0% {
+    -webkit-transform: rotateX(-100deg);
+    transform: rotateX(-100deg);
+    -webkit-transform-origin: top;
+    transform-origin: top;
+    opacity: 0; }
+  100% {
+    -webkit-transform: rotateX(0deg);
+    transform: rotateX(0deg);
+    -webkit-transform-origin: top;
+    transform-origin: top;
+    opacity: 1; } }
+@-webkit-keyframes slide-in-left {
+  0% {
+    -webkit-transform: translateX(-175px);
+    transform: translateX(-175px); }
+  100% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0); } }
+@-webkit-keyframes slide-out-left {
+  0% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0); }
+  100% {
+    -webkit-transform: translateX(-175px);
+    transform: translateX(-175px); } }
+
+/*# sourceMappingURL=animations.css.map */

css/animations.css.map

@@ -0,0 +1,7 @@
+{
+"version": 3,
+"mappings": "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",
+"sources": ["animations.scss"],
+"names": [],
+"file": "animations.css"
+}

css/animations.scss

@@ -0,0 +1,292 @@
+.fade-in-left {
+    opacity: 0;
+    transition: opacity 0.4s ease;
+
+    &.animate {
+        -webkit-animation: fade-in-left 1s cubic-bezier(0.680, -0.550, 0.265, 1.550) both;
+        animation: fade-in-left 1s cubic-bezier(0.680, -0.550, 0.265, 1.550) both;
+        transition: opacity 0.4s ease;
+    }
+}
+.fade-in-right {
+    opacity: 0;
+    transition: opacity 0.4s ease;
+
+    &.animate {
+        -webkit-animation: fade-in-right 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
+        animation: fade-in-right 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
+        transition: opacity 0.4s ease;
+    }
+}
+.fade-in-fwd {
+    opacity: 0;
+    transition: opacity 0.4s ease;
+
+    &.animate {
+        -webkit-animation: fade-in-fwd 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
+        animation: fade-in-fwd 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
+        transition: opacity 0.4s ease;
+    }
+}
+.swing-in-top-fwd {
+    opacity: 0;
+    transition: opacity 0.4s ease;
+
+    &.animate {
+        -webkit-animation: swing-in-top-fwd 0.8s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
+        animation: swing-in-top-fwd 0.8s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
+        transition: opacity 0.4s ease;
+    }
+}
+
+.fade-out {
+    -webkit-animation: fade-out 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both !important;
+    animation: fade-out 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both !important;
+    transition: opacity 0.4s ease;
+}
+
+.slide-in-left {
+    -webkit-animation: slide-in-left 1s cubic-bezier(0.680, -0.550, 0.265, 1.550) both;
+    animation: slide-in-left 1s cubic-bezier(0.680, -0.550, 0.265, 1.550) both;
+    transition: opacity 0.4s ease;
+}
+.slide-out-left {
+    -webkit-animation: slide-out-left 1s cubic-bezier(0.680, -0.550, 0.265, 1.550) both;
+    animation: slide-out-left 1s cubic-bezier(0.680, -0.550, 0.265, 1.550) both;
+    transition: opacity 0.4s ease;
+}
+
+
+.animate.delay_01 {
+    -webkit-animation-delay: 0.1s;
+    animation-delay: 0.1s;
+}
+.animate.delay_02 {
+    -webkit-animation-delay: 0.2s;
+    animation-delay: 0.2s;
+}
+.animate.delay_03 {
+    -webkit-animation-delay: 0.3s;
+    animation-delay: 0.3s;
+}
+.animate.delay_04 {
+    -webkit-animation-delay: 0.4s;
+    animation-delay: 0.4s;
+}
+.animate.delay_05 {
+    -webkit-animation-delay: 0.5s;
+    animation-delay: 0.5s;
+}
+.animate.delay_06 {
+    -webkit-animation-delay: 0.6s;
+    animation-delay: 0.6s;
+}
+.animate.delay_07 {
+    -webkit-animation-delay: 0.7s;
+    animation-delay: 0.7s;
+}
+.animate.delay_08 {
+    -webkit-animation-delay: 0.8s;
+    animation-delay: 0.8s;
+}
+.animate.delay_09 {
+    -webkit-animation-delay: 0.9s;
+    animation-delay: 0.9s;
+}
+.animate.delay_10 {
+    -webkit-animation-delay: 1s;
+    animation-delay: 1s;
+}
+.animate.delay_11 {
+    -webkit-animation-delay: 1.1s;
+    animation-delay: 1.1s;
+}
+.animate.delay_12 {
+    -webkit-animation-delay: 1.2s;
+    animation-delay: 1.2s;
+}
+.animate.delay_13 {
+    -webkit-animation-delay: 1.3s;
+    animation-delay: 1.3s;
+}
+.animate.delay_14 {
+    -webkit-animation-delay: 1.4s;
+    animation-delay: 1.4s;
+}
+.animate.delay_15 {
+    -webkit-animation-delay: 1.5s;
+    animation-delay: 1.5s;
+}
+
+// Fade out all
+@-webkit-keyframes fade-out {
+    0% {
+        -webkit-transform: translateZ(0);
+        transform: translateZ(0);
+        opacity: 1;
+    }
+    100% {
+        -webkit-transform: translateZ(-80px);
+        transform: translateZ(-80px);
+        opacity: 0;
+    }
+}
+/**
+ * ----------------------------------------
+ * animation fade-in-left
+ * ----------------------------------------
+ */
+@-webkit-keyframes fade-in-left {
+    0% {
+        -webkit-transform: translateX(-50px);
+        transform: translateX(-50px);
+        opacity: 0;
+    }
+    100% {
+        -webkit-transform: translateX(0);
+        transform: translateX(0);
+        opacity: 1;
+    }
+}
+@keyframes fade-in-left {
+    0% {
+        -webkit-transform: translateX(-50px);
+        transform: translateX(-50px);
+        opacity: 0;
+    }
+    100% {
+        -webkit-transform: translateX(0);
+        transform: translateX(0);
+        opacity: 1;
+    }
+}
+
+/**
+ * ----------------------------------------
+ * animation fade-in-fwd
+ * ----------------------------------------
+ */
+@-webkit-keyframes fade-in-fwd {
+    0% {
+        -webkit-transform: translateZ(-80px);
+        transform: translateZ(-80px);
+        opacity: 0;
+    }
+    100% {
+        -webkit-transform: translateZ(0);
+        transform: translateZ(0);
+        opacity: 1;
+    }
+}
+@keyframes fade-in-fwd {
+    0% {
+        -webkit-transform: translateZ(-80px);
+        transform: translateZ(-80px);
+        opacity: 0;
+    }
+    100% {
+        -webkit-transform: translateZ(0);
+        transform: translateZ(0);
+        opacity: 1;
+    }
+}
+
+/**
+ * ----------------------------------------
+ * animation fade-in-right
+ * ----------------------------------------
+ */
+@-webkit-keyframes fade-in-right {
+    0% {
+        -webkit-transform: translateX(50px);
+        transform: translateX(50px);
+        opacity: 0;
+    }
+    100% {
+        -webkit-transform: translateX(0);
+        transform: translateX(0);
+        opacity: 1;
+    }
+}
+@keyframes fade-in-right {
+    0% {
+        -webkit-transform: translateX(50px);
+        transform: translateX(50px);
+        opacity: 0;
+    }
+    100% {
+        -webkit-transform: translateX(0);
+        transform: translateX(0);
+        opacity: 1;
+    }
+}
+
+/**
+ * ----------------------------------------
+ * animation swing-in-top-fwd
+ * ----------------------------------------
+ */
+@-webkit-keyframes swing-in-top-fwd {
+    0% {
+        -webkit-transform: rotateX(-100deg);
+        transform: rotateX(-100deg);
+        -webkit-transform-origin: top;
+        transform-origin: top;
+        opacity: 0;
+    }
+    100% {
+        -webkit-transform: rotateX(0deg);
+        transform: rotateX(0deg);
+        -webkit-transform-origin: top;
+        transform-origin: top;
+        opacity: 1;
+    }
+}
+@keyframes swing-in-top-fwd {
+    0% {
+        -webkit-transform: rotateX(-100deg);
+        transform: rotateX(-100deg);
+        -webkit-transform-origin: top;
+        transform-origin: top;
+        opacity: 0;
+    }
+    100% {
+        -webkit-transform: rotateX(0deg);
+        transform: rotateX(0deg);
+        -webkit-transform-origin: top;
+        transform-origin: top;
+        opacity: 1;
+    }
+}
+
+// Mobile nav slide left
+
+@-webkit-keyframes slide-in-left {
+    0% {
+        -webkit-transform: translateX(-175px);
+        transform: translateX(-175px);
+        //opacity: 0;
+    }
+    100% {
+        -webkit-transform: translateX(0);
+        transform: translateX(0);
+        //opacity: 1;
+    }
+}
+@-webkit-keyframes slide-out-left {
+    0% {
+        -webkit-transform: translateX(0);
+        transform: translateX(0);
+        //opacity: 1;
+    }
+    100% {
+        -webkit-transform: translateX(-175px);
+        transform: translateX(-175px);
+        //opacity: 0;
+    }
+}
+
+
+
+
+

css/layout.css

@@ -0,0 +1,43 @@
+.page-wrapper {
+  width: 100%;
+  margin: 0 auto; }
+
+main {
+  scroll-snap-type: y mandatory;
+  height: 100vh;
+  overflow-y: scroll; }
+  @media screen and (min-width: 768px) {
+    main {
+      padding-left: 175px; } }
+  @media screen and (min-width: 920px) {
+    main {
+      padding-left: 280px; } }
+
+section {
+  width: 100%;
+  scroll-snap-align: start;
+  scroll-snap-stop: always;
+  height: 100vh; }
+  @media screen and (max-width: 767px) {
+    section {
+      padding-top: 80px; } }
+  section .content {
+    width: 100%;
+    height: 100%;
+    padding: var(--gap);
+    overflow-x: hidden;
+    overflow-y: auto; }
+    section .content .wrapper .title {
+      position: relative;
+      line-height: 1;
+      padding-bottom: var(--gap-s); }
+      section .content .wrapper .title:after {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100px;
+        height: 2px;
+        background: var(--green); }
+
+/*# sourceMappingURL=layout.css.map */

css/layout.css.map

@@ -0,0 +1,7 @@
+{
+"version": 3,
+"mappings": "AAAA,aAAc;EACV,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,MAAM;;AAGlB,IAAK;EACD,gBAAgB,EAAE,WAAW;EAC7B,MAAM,EAAE,KAAK;EACb,UAAU,EAAE,MAAM;EAElB,oCAAqC;IALzC,IAAK;MAMG,YAAY,EAAE,KAAK;EAGvB,oCAAqC;IATzC,IAAK;MAUG,YAAY,EAAE,KAAK;;AAI3B,OAAQ;EACJ,KAAK,EAAE,IAAI;EACX,iBAAiB,EAAE,KAAK;EACxB,gBAAgB,EAAE,MAAM;EACxB,MAAM,EAAE,KAAK;EAEb,oCAAqC;IANzC,OAAQ;MAOA,WAAW,EAAE,IAAI;EAGrB,gBAAS;IACL,KAAK,EAAE,IAAI;IACX,MAAM,EAAE,IAAI;IACZ,OAAO,EAAE,UAAU;IACnB,UAAU,EAAE,MAAM;IAClB,UAAU,EAAE,IAAI;IAGZ,gCAAO;MACH,QAAQ,EAAE,QAAQ;MAClB,WAAW,EAAE,CAAC;MACd,cAAc,EAAE,YAAY;MAE5B,sCAAQ;QACJ,OAAO,EAAE,EAAE;QACX,QAAQ,EAAE,QAAQ;QAClB,MAAM,EAAE,CAAC;QACT,IAAI,EAAE,CAAC;QACP,KAAK,EAAE,KAAK;QACZ,MAAM,EAAE,GAAG;QACX,UAAU,EAAE,YAAY",
+"sources": ["layout.scss"],
+"names": [],
+"file": "layout.css"
+}

css/layout.scss

@@ -0,0 +1,55 @@
+.page-wrapper {
+    width: 100%;
+    margin: 0 auto;
+}
+
+main {
+    scroll-snap-type: y mandatory;
+    height: 100vh;
+    overflow-y: scroll;
+
+    @media screen and (min-width: 768px) {
+        padding-left: 175px;
+    }
+
+    @media screen and (min-width: 920px) {
+        padding-left: 280px;
+    }
+}
+
+section {
+    width: 100%;
+    scroll-snap-align: start;
+    scroll-snap-stop: always;
+    height: 100vh;
+
+    @media screen and (max-width: 767px) {
+        padding-top: 80px;
+    }
+
+    .content {
+        width: 100%;
+        height: 100%;
+        padding: var(--gap);
+        overflow-x: hidden;
+        overflow-y: auto;
+
+        .wrapper {
+            .title {
+                position: relative;
+                line-height: 1;
+                padding-bottom: var(--gap-s);
+
+                &:after {
+                    content: '';
+                    position: absolute;
+                    bottom: 0;
+                    left: 0;
+                    width: 100px;
+                    height: 2px;
+                    background: var(--green);
+                }
+            }
+        }
+    }
+}

css/reset.css

@@ -0,0 +1,91 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box; }
+
+body,
+h1,
+h2,
+h3,
+h4,
+p,
+figure,
+blockquote,
+dl,
+dd {
+  margin: 0; }
+
+html {
+  --scroll-behavior: smooth;
+  scroll-behavior: smooth;
+  overflow-x: hidden; }
+
+body {
+  text-rendering: optimizeSpeed;
+  -webkit-font-smoothing: antialiased;
+  line-height: 1.6;
+  font-family: "KoHo", sans-serif;
+  font-size: var(--font-size__base);
+  background: var(--dark);
+  color: var(--light);
+  overflow-x: hidden; }
+
+h1 {
+  font-size: 45px; }
+
+h2 {
+  font-size: 32px;
+  margin-bottom: var(--gap-s); }
+  @media screen and (min-width: 768px) {
+    h2 {
+      font-size: 38px; } }
+
+h3 {
+  font-size: 20px;
+  margin-bottom: 10px; }
+  @media screen and (min-width: 768px) {
+    h3 {
+      font-size: 24px; } }
+
+h4 {
+  font-size: var(--font-size__base); }
+
+ul,
+ol {
+  list-style: none;
+  margin: 0;
+  padding: 0; }
+
+a, a:visited {
+  text-decoration: none;
+  cursor: pointer;
+  transition: all 0.4s ease;
+  color: var(--green-lighter); }
+
+a:hover {
+  color: var(--blue-lighter);
+  transition: all 0.4s ease; }
+
+img,
+picture {
+  max-width: 100%;
+  display: block; }
+
+/* Firefox */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--green) transparent; }
+
+/* Chrome, Edge, and Safari */
+*::-webkit-scrollbar {
+  width: 5px; }
+
+*::-webkit-scrollbar-track {
+  background: none; }
+
+*::-webkit-scrollbar-thumb {
+  background-color: var(--green);
+  border-radius: 5px;
+  border: none; }
+
+/*# sourceMappingURL=reset.css.map */

css/reset.css.map

@@ -0,0 +1,7 @@
+{
+"version": 3,
+"mappings": "AAAA;;QAES;EACL,UAAU,EAAE,UAAU;;AAG1B;;;;;;;;;EASG;EACC,MAAM,EAAE,CAAC;;AAGb,IAAK;EACD,iBAAiB,CAAC,OAAO;EACzB,eAAe,EAAE,MAAM;EACvB,UAAU,EAAE,MAAM;;AAGtB,IAAK;EACD,cAAc,EAAE,aAAa;EAC7B,sBAAsB,EAAE,WAAW;EACnC,WAAW,EAAE,GAAG;EAChB,WAAW,EAAE,kBAAkB;EAC/B,SAAS,EAAE,sBAAsB;EACjC,UAAU,EAAE,WAAW;EACvB,KAAK,EAAE,YAAY;EACnB,UAAU,EAAE,MAAM;;AAGtB,EAAG;EACC,SAAS,EAAE,IAAI;;AAGnB,EAAG;EACC,SAAS,EAAE,IAAI;EACf,aAAa,EAAE,YAAY;EAE3B,oCAAqC;IAJzC,EAAG;MAKK,SAAS,EAAE,IAAI;;AAIvB,EAAG;EACC,SAAS,EAAE,IAAI;EACf,aAAa,EAAE,IAAI;EAEnB,oCAAqC;IAJzC,EAAG;MAKK,SAAS,EAAE,IAAI;;AAIvB,EAAG;EACC,SAAS,EAAE,sBAAsB;;AAGrC;EACG;EACC,UAAU,EAAE,IAAI;EAChB,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;;AAGd,YAAa;EACT,eAAe,EAAE,IAAI;EACrB,MAAM,EAAE,OAAO;EACf,UAAU,EAAE,aAAa;EACzB,KAAK,EAAE,oBAAoB;;AAG/B,OAAQ;EACJ,KAAK,EAAE,mBAAmB;EAC1B,UAAU,EAAE,aAAa;;AAG7B;OACQ;EACJ,SAAS,EAAE,IAAI;EACf,OAAO,EAAE,KAAK;;AAKlB,aAAa;AACb,CAAE;EACE,eAAe,EAAE,IAAI;EACrB,eAAe,EAAE,wBAAwB;;AAG7C,8BAA8B;AAC9B,oBAAqB;EACjB,KAAK,EAAE,GAAG;;AAGd,0BAA2B;EACvB,UAAU,EAAE,IAAI;;AAGpB,0BAA2B;EACvB,gBAAgB,EAAE,YAAY;EAC9B,aAAa,EAAE,GAAG;EAClB,MAAM,EAAE,IAAI",
+"sources": ["reset.scss"],
+"names": [],
+"file": "reset.css"
+}

css/reset.scss

@@ -0,0 +1,109 @@
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
+body,
+h1,
+h2,
+h3,
+h4,
+p,
+figure,
+blockquote,
+dl,
+dd {
+    margin: 0;
+}
+
+html {
+    --scroll-behavior: smooth;
+    scroll-behavior: smooth;
+    overflow-x: hidden;
+}
+
+body {
+    text-rendering: optimizeSpeed;
+    -webkit-font-smoothing: antialiased;
+    line-height: 1.6;
+    font-family: "KoHo", sans-serif;
+    font-size: var(--font-size__base);
+    background: var(--dark);
+    color: var(--light);
+    overflow-x: hidden;
+}
+
+h1 {
+    font-size: 45px;
+}
+
+h2 {
+    font-size: 32px;
+    margin-bottom: var(--gap-s);
+
+    @media screen and (min-width: 768px) {
+        font-size: 38px;
+    }
+}
+
+h3 {
+    font-size: 20px;
+    margin-bottom: 10px;
+
+    @media screen and (min-width: 768px) {
+        font-size: 24px;
+    }
+}
+
+h4 {
+    font-size: var(--font-size__base);
+}
+
+ul,
+ol {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+a, a:visited {
+    text-decoration: none;
+    cursor: pointer;
+    transition: all 0.4s ease;
+    color: var(--green-lighter);
+}
+
+a:hover {
+    color: var(--blue-lighter);
+    transition: all 0.4s ease;
+}
+
+img,
+picture {
+    max-width: 100%;
+    display: block;
+}
+
+
+// Scrollbar
+/* Firefox */
+* {
+    scrollbar-width: thin;
+    scrollbar-color: var(--green) transparent;
+}
+
+/* Chrome, Edge, and Safari */
+*::-webkit-scrollbar {
+    width: 5px;
+}
+
+*::-webkit-scrollbar-track {
+    background: none;
+}
+
+*::-webkit-scrollbar-thumb {
+    background-color: var(--green);
+    border-radius: 5px;
+    border: none;
+}

css/sections/about.css

@@ -0,0 +1,107 @@
+#about .content .wrapper {
+  height: 100%; }
+
+@media screen and (min-width: 920px) {
+  .about-wrapper {
+    display: flex;
+    flex-direction: column;
+    max-height: calc(100% - 40px); } }
+.about-wrapper .row {
+  width: 100%;
+  min-height: 360px;
+  padding-bottom: var(--gap);
+  margin-bottom: 20px;
+  overflow: auto; }
+  @media screen and (min-width: 920px) {
+    .about-wrapper .row {
+      display: flex;
+      overflow: hidden;
+      margin-bottom: 0;
+      height: 100%;
+      max-height: 50%; } }
+  .about-wrapper .row .col {
+    background: var(--dark-lighter);
+    padding: var(--gap);
+    overflow: auto;
+    will-change: transform, opacity; }
+    .about-wrapper .row .col.about-history {
+      position: relative; }
+      .about-wrapper .row .col.about-history p:not(:last-child) {
+        padding-bottom: var(--gap-s);
+        margin-bottom: var(--gap-s);
+        border-bottom: 2px solid var(--green); }
+    .about-wrapper .row .col.about-info, .about-wrapper .row .col.about-img {
+      position: relative;
+      background: none;
+      border: 2px solid var(--green); }
+      @media screen and (min-width: 920px) {
+        .about-wrapper .row .col.about-info, .about-wrapper .row .col.about-img {
+          min-width: 340px; } }
+    @media screen and (max-width: 919px) {
+      .about-wrapper .row .col.about-img {
+        display: none; } }
+    .about-wrapper .row .col.about-intro {
+      display: grid;
+      grid-gap: var(--gap) var(--gap); }
+      @media screen and (min-width: 1095px) {
+        .about-wrapper .row .col.about-intro {
+          grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+          grid-template-rows: minmax(min-content, max-content); } }
+      .about-wrapper .row .col.about-intro > p:first-child {
+        position: relative; }
+        .about-wrapper .row .col.about-intro > p:first-child:after {
+          content: '';
+          position: absolute;
+          left: 0;
+          bottom: -20px;
+          display: inline-block;
+          width: 100%;
+          height: 2px;
+          background: var(--green); }
+          @media screen and (min-width: 1390px) {
+            .about-wrapper .row .col.about-intro > p:first-child:after {
+              bottom: unset;
+              left: unset;
+              top: 0;
+              right: -20px;
+              width: 2px;
+              height: 100%; } }
+      @media screen and (max-width: 919px) {
+        .about-wrapper .row .col.about-intro > p:last-child {
+          margin-top: var(--gap-s); } }
+    @media screen and (min-width: 920px) {
+      .about-wrapper .row .col:not(:last-child) {
+        margin-right: var(--gap); } }
+    .about-wrapper .row .col .about-image {
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: auto;
+      height: 100%;
+      max-width: 340px;
+      opacity: 0.5;
+      filter: drop-shadow(5px 5px 15px var(--dark-darker));
+      object-fit: contain;
+      object-position: bottom right; }
+
+@media screen and (max-width: 1009px) {
+  .info-list {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center; } }
+@media screen and (min-width: 1010px) {
+  .info-list {
+    width: 250px;
+    line-height: 1.4; } }
+.info-list li {
+  padding: var(--gap-s) 0; }
+  .info-list li:first-child {
+    padding-top: 0; }
+  .info-list li:last-child {
+    padding-bottom: 0; }
+  .info-list li:not(:last-child) {
+    border-bottom: 1px solid; }
+
+/*# sourceMappingURL=about.css.map */

css/sections/about.css.map

@@ -0,0 +1,7 @@
+{
+"version": 3,
+"mappings": "AAEQ,wBAAS;EACL,MAAM,EAAE,IAAI;;AAKpB,oCAAqC;EADzC,cAAe;IAEP,OAAO,EAAE,IAAI;IACb,cAAc,EAAE,MAAM;IACtB,UAAU,EAAE,iBAAiB;AAGjC,mBAAK;EACD,KAAK,EAAE,IAAI;EACX,UAAU,EAAE,KAAK;EACjB,cAAc,EAAE,UAAU;EAC1B,aAAa,EAAE,IAAI;EACnB,QAAQ,EAAE,IAAI;EAEd,oCAAqC;IAPzC,mBAAK;MAQG,OAAO,EAAE,IAAI;MACb,QAAQ,EAAE,MAAM;MAChB,aAAa,EAAE,CAAC;MAChB,MAAM,EAAE,IAAI;MACZ,UAAU,EAAE,GAAG;EAGnB,wBAAK;IACD,UAAU,EAAE,mBAAmB;IAC/B,OAAO,EAAE,UAAU;IACnB,QAAQ,EAAE,IAAI;IACd,WAAW,EAAE,kBAAkB;IAE/B,sCAAgB;MACZ,QAAQ,EAAE,QAAQ;MAElB,yDAAmB;QACf,cAAc,EAAE,YAAY;QAC5B,aAAa,EAAE,YAAY;QAC3B,aAAa,EAAE,sBAAsB;IAI7C,uEACY;MACR,QAAQ,EAAE,QAAQ;MAClB,UAAU,EAAE,IAAI;MAChB,MAAM,EAAE,sBAAsB;MAE9B,oCAAqC;QANzC,uEACY;UAMJ,SAAS,EAAE,KAAK;IAKpB,oCAAqC;MADzC,kCAAY;QAEJ,OAAO,EAAE,IAAI;IAIrB,oCAAc;MACV,OAAO,EAAE,IAAI;MACb,QAAQ,EAAE,qBAAqB;MAE/B,qCAAsC;QAJ1C,oCAAc;UAKN,qBAAqB,EAAE,oCAAoC;UAC3D,kBAAkB,EAAE,gCAAgC;MAIxD,oDAAgB;QACZ,QAAQ,EAAE,QAAQ;QAElB,0DAAQ;UACJ,OAAO,EAAE,EAAE;UACX,QAAQ,EAAE,QAAQ;UAClB,IAAI,EAAE,CAAC;UACP,MAAM,EAAE,KAAK;UACb,OAAO,EAAE,YAAY;UACrB,KAAK,EAAE,IAAI;UACX,MAAM,EAAE,GAAG;UACX,UAAU,EAAE,YAAY;UAExB,qCAAsC;YAV1C,0DAAQ;cAWA,MAAM,EAAE,KAAK;cACb,IAAI,EAAE,KAAK;cACX,GAAG,EAAE,CAAC;cACN,KAAK,EAAE,KAAK;cACZ,KAAK,EAAE,GAAG;cACV,MAAM,EAAE,IAAI;MAMpB,oCAAqC;QADzC,mDAAe;UAEP,UAAU,EAAE,YAAY;IAMhC,oCAAqC;MADzC,yCAAmB;QAEX,YAAY,EAAE,UAAU;IAIhC,qCAAa;MACT,QAAQ,EAAE,QAAQ;MAClB,GAAG,EAAE,CAAC;MACN,KAAK,EAAE,CAAC;MACR,KAAK,EAAE,IAAI;MACX,MAAM,EAAE,IAAI;MACZ,SAAS,EAAE,KAAK;MAChB,OAAO,EAAE,GAAG;MACZ,MAAM,EAAE,4CAA4C;MACpD,UAAU,EAAE,OAAO;MACnB,eAAe,EAAE,YAAY;;AAQzC,qCAAsC;EAD1C,UAAW;IAEH,MAAM,EAAE,IAAI;IACZ,OAAO,EAAE,IAAI;IACb,cAAc,EAAE,MAAM;IACtB,eAAe,EAAE,MAAM;IACvB,WAAW,EAAE,MAAM;AAGvB,qCAAsC;EAT1C,UAAW;IAUH,KAAK,EAAE,KAAK;IACZ,WAAW,EAAE,GAAG;AAGpB,aAAG;EACC,OAAO,EAAE,cAAc;EAEvB,yBAAc;IACV,WAAW,EAAE,CAAC;EAGlB,wBAAa;IACT,cAAc,EAAE,CAAC;EAGrB,8BAAmB;IACf,aAAa,EAAE,SAAS",
+"sources": ["about.scss"],
+"names": [],
+"file": "about.css"
+}

css/sections/about.scss

@@ -0,0 +1,156 @@
+#about {
+    .content {
+        .wrapper {
+            height: 100%;
+        }
+    }
+}
+.about-wrapper {
+    @media screen and (min-width: 920px) {
+        display: flex;
+        flex-direction: column;
+        max-height: calc(100% - 40px);
+    }
+
+    .row {
+        width: 100%;
+        min-height: 360px;
+        padding-bottom: var(--gap);
+        margin-bottom: 20px;
+        overflow: auto;
+
+        @media screen and (min-width: 920px) {
+            display: flex;
+            overflow: hidden;
+            margin-bottom: 0;
+            height: 100%;
+            max-height: 50%;
+        }
+
+        .col {
+            background: var(--dark-lighter);
+            padding: var(--gap);
+            overflow: auto;
+            will-change: auto;
+
+            &.about-history {
+                position: relative;
+
+                p:not(:last-child) {
+                    padding-bottom: var(--gap-s);
+                    margin-bottom: var(--gap-s);
+                    border-bottom: 2px solid var(--green);
+                }
+            }
+
+            &.about-info,
+            &.about-img {
+                position: relative;
+                background: none;
+                border: 2px solid var(--green);
+
+                @media screen and (min-width: 920px) {
+                    min-width: 340px;
+                }
+            }
+
+            &.about-img {
+                @media screen and (max-width: 919px) {
+                    display: none;
+                }
+            }
+
+            &.about-intro {
+                display: grid;
+                grid-gap: var(--gap) var(--gap);
+
+                @media screen and (min-width: 1095px) {
+                    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+                    grid-template-rows: minmax(min-content, max-content);
+                }
+
+
+                > p:first-child {
+                    position: relative;
+
+                    &:after {
+                        content: '';
+                        position: absolute;
+                        left: 0;
+                        bottom: -20px;
+                        display: inline-block;
+                        width: 100%;
+                        height: 2px;
+                        background: var(--green);
+
+                        @media screen and (min-width: 1390px) {
+                            bottom: unset;
+                            left: unset;
+                            top: 0;
+                            right: -20px;
+                            width: 2px;
+                            height: 100%;
+                        }
+                    }
+                }
+
+                > p:last-child {
+                    @media screen and (max-width: 919px) {
+                        margin-top: var(--gap-s);
+                    }
+                }
+            }
+
+            &:not(:last-child) {
+                @media screen and (min-width: 920px) {
+                    margin-right: var(--gap);
+                }
+            }
+
+            .about-image {
+                position: absolute;
+                top: 0;
+                right: 0;
+                width: auto;
+                height: 100%;
+                max-width: 340px;
+                opacity: 0.5;
+                filter: drop-shadow(5px 5px 15px var(--dark-darker));
+                object-fit: contain;
+                object-position: bottom right;
+            }
+        }
+    }
+
+}
+
+.info-list {
+    @media screen and (max-width: 1009px) {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+    }
+
+    @media screen and (min-width: 1010px) {
+        width: 250px;
+        line-height: 1.4;
+    }
+
+    li {
+        padding: var(--gap-s) 0;
+
+        &:first-child {
+            padding-top: 0;
+        }
+
+        &:last-child {
+            padding-bottom: 0;
+        }
+
+        &:not(:last-child) {
+            border-bottom: 1px solid;
+        }
+    }
+}

css/sections/experience.css

@@ -0,0 +1,82 @@
+.work-wrapper .work .info {
+  display: flex; }
+  .work-wrapper .work .info .duration {
+    min-width: 50px;
+    text-align: center;
+    display: inline-flex;
+    flex-direction: column;
+    justify-content: center;
+    background: var(--green); }
+    @media screen and (min-width: 500px) {
+      .work-wrapper .work .info .duration {
+        min-width: 100px;
+        height: 80px; } }
+    .work-wrapper .work .info .duration .separator {
+      line-height: 10px; }
+  .work-wrapper .work .info .company {
+    position: relative;
+    display: inline-flex;
+    width: 100%;
+    flex-direction: column;
+    justify-content: center;
+    padding: 10px 110px 10px 20px;
+    background: var(--dark-lighter); }
+    .work-wrapper .work .info .company .office {
+      position: absolute;
+      top: 20px;
+      right: 20px;
+      font-size: 14px;
+      padding: 10px;
+      background: var(--dark); }
+.work-wrapper .work .description {
+  padding: 20px;
+  margin-left: 50px;
+  border-top: 1px solid var(--green);
+  border-left: 1px solid var(--green); }
+  @media screen and (min-width: 500px) {
+    .work-wrapper .work .description {
+      margin-left: 100px; } }
+  .work-wrapper .work .description summary {
+    position: relative;
+    outline: 0;
+    cursor: pointer; }
+    .work-wrapper .work .description summary::before {
+      content: "+";
+      position: absolute;
+      font-size: 30px;
+      width: 45px;
+      height: 45px;
+      padding: 10px;
+      line-height: 20px;
+      text-align: center;
+      left: -70px;
+      top: calc(50% - 22px);
+      transform-origin: center;
+      transition: 200ms linear;
+      cursor: pointer; }
+      @media screen and (min-width: 500px) {
+        .work-wrapper .work .description summary::before {
+          left: -95px; } }
+  .work-wrapper .work .description[open] .dots {
+    display: none; }
+  .work-wrapper .work .description[open] summary::before {
+    transform: rotate(45deg);
+    font-size: 32px; }
+
+details summary::-webkit-details-marker,
+details summary::marker {
+  display: none;
+  content: ""; }
+
+details[open] summary ~ * {
+  animation: open 0.4s ease-in-out; }
+
+@keyframes open {
+  0% {
+    opacity: 0;
+    height: 0; }
+  100% {
+    opacity: 1;
+    height: 100%; } }
+
+/*# sourceMappingURL=experience.css.map */

css/sections/experience.css.map

@@ -0,0 +1,7 @@
+{
+"version": 3,
+"mappings": "AAEQ,yBAAM;EACF,OAAO,EAAE,IAAI;EAEb,mCAAU;IACN,SAAS,EAAE,IAAI;IACf,UAAU,EAAE,MAAM;IAClB,OAAO,EAAE,WAAW;IACpB,cAAc,EAAE,MAAM;IACtB,eAAe,EAAE,MAAM;IACvB,UAAU,EAAE,YAAY;IAExB,oCAAqC;MARzC,mCAAU;QASF,SAAS,EAAE,KAAK;QAChB,MAAM,EAAE,IAAI;IAGhB,8CAAW;MACP,WAAW,EAAE,IAAI;EAIzB,kCAAS;IACL,QAAQ,EAAE,QAAQ;IAClB,OAAO,EAAE,WAAW;IACpB,KAAK,EAAE,IAAI;IACX,cAAc,EAAE,MAAM;IACtB,eAAe,EAAE,MAAM;IACvB,OAAO,EAAE,oBAAoB;IAC7B,UAAU,EAAE,mBAAmB;IAE/B,0CAAQ;MACJ,QAAQ,EAAE,QAAQ;MAClB,GAAG,EAAE,IAAI;MACT,KAAK,EAAE,IAAI;MACX,SAAS,EAAE,IAAI;MACf,OAAO,EAAE,IAAI;MACb,UAAU,EAAE,WAAW;AAKnC,gCAAa;EACT,OAAO,EAAE,IAAI;EACb,WAAW,EAAE,IAAI;EACjB,UAAU,EAAE,sBAAsB;EAClC,WAAW,EAAE,sBAAsB;EAEnC,oCAAqC;IANzC,gCAAa;MAOL,WAAW,EAAE,KAAK;EAGtB,wCAAQ;IACJ,QAAQ,EAAE,QAAQ;IAClB,OAAO,EAAE,CAAC;IACV,MAAM,EAAE,OAAO;IAEf,gDAAU;MACN,OAAO,EAAE,GAAG;MACZ,QAAQ,EAAE,QAAQ;MAClB,SAAS,EAAE,IAAI;MACf,KAAK,EAAE,IAAI;MACX,MAAM,EAAE,IAAI;MACZ,OAAO,EAAE,IAAI;MACb,WAAW,EAAE,IAAI;MACjB,UAAU,EAAE,MAAM;MAClB,IAAI,EAAE,KAAK;MACX,GAAG,EAAE,gBAAgB;MACrB,gBAAgB,EAAE,MAAM;MACxB,UAAU,EAAE,YAAY;MACxB,MAAM,EAAE,OAAO;MAEf,oCAAqC;QAfzC,gDAAU;UAgBF,IAAI,EAAE,KAAK;EAOnB,4CAAM;IACF,OAAO,EAAE,IAAI;EAGjB,sDAAgB;IACZ,SAAS,EAAE,aAAa;IACxB,SAAS,EAAE,IAAI;;AAOnC;uBACwB;EACpB,OAAO,EAAE,IAAI;EACb,OAAO,EAAE,EAAE;;AAEf,yBAA0B;EACtB,SAAS,EAAE,qBAAqB;;AAGpC,eASC;EARG,EAAG;IACC,OAAO,EAAE,CAAC;IACV,MAAM,EAAE,CAAC;EAEb,IAAK;IACD,OAAO,EAAE,CAAC;IACV,MAAM,EAAE,IAAI",
+"sources": ["experience.scss"],
+"names": [],
+"file": "experience.css"
+}

css/sections/experience.scss

@@ -0,0 +1,113 @@
+.work-wrapper {
+    .work {
+        .info {
+            display: flex;
+
+            .duration {
+                min-width: 50px;
+                text-align: center;
+                display: inline-flex;
+                flex-direction: column;
+                justify-content: center;
+                background: var(--green);
+
+                @media screen and (min-width: 500px) {
+                    min-width: 100px;
+                    height: 80px;
+                }
+
+                .separator {
+                    line-height: 10px;
+                }
+            }
+
+            .company {
+                position: relative;
+                display: inline-flex;
+                width: 100%;
+                flex-direction: column;
+                justify-content: center;
+                padding: 10px 110px 10px 20px;
+                background: var(--dark-lighter);
+
+                .office {
+                    position: absolute;
+                    top: 20px;
+                    right: 20px;
+                    font-size: 14px;
+                    padding: 10px;
+                    background: var(--dark);
+                }
+            }
+        }
+
+        .description {
+            padding: 20px;
+            margin-left: 50px;
+            border-top: 1px solid var(--green);
+            border-left: 1px solid var(--green);
+
+            @media screen and (min-width: 500px) {
+                margin-left: 100px;
+            }
+
+            summary {
+                position: relative;
+                outline: 0;
+                cursor: pointer;
+
+                &::before {
+                    content: "+";
+                    position: absolute;
+                    font-size: 30px;
+                    width: 45px;
+                    height: 45px;
+                    padding: 10px;
+                    line-height: 20px;
+                    text-align: center;
+                    left: -70px;
+                    top: calc(50% - 22px);
+                    transform-origin: center;
+                    transition: 200ms linear;
+                    cursor: pointer;
+
+                    @media screen and (min-width: 500px) {
+                        left: -95px;
+                    }
+
+                }
+            }
+
+            &[open] {
+                .dots {
+                    display: none;
+                }
+
+                summary::before {
+                    transform: rotate(45deg);
+                    font-size: 32px;
+                }
+            }
+        }
+    }
+}
+
+details summary::-webkit-details-marker,
+details summary::marker {
+    display: none;
+    content: "";
+}
+details[open] summary ~ * {
+    animation: open 0.4s ease-in-out;
+}
+
+@keyframes open {
+    0% {
+        opacity: 0;
+        height: 0;
+    }
+    100% {
+        opacity: 1;
+        height: 100%;
+    }
+}

css/sections/intro.css

@@ -0,0 +1,50 @@
+#intro .content {
+  position: relative; }
+  #intro .content .intro-content {
+    will-change: transform, opacity; }
+    @media screen and (max-width: 767px) {
+      #intro .content .intro-content {
+        position: absolute;
+        bottom: 15%;
+        height: auto; } }
+    @media screen and (min-width: 768px) {
+      #intro .content .intro-content {
+        display: inline-flex;
+        flex-direction: column;
+        height: 100%;
+        justify-content: center; } }
+    #intro .content .intro-content .subtitle {
+      position: relative;
+      padding: 10px 15px; }
+      #intro .content .intro-content .subtitle::after {
+        content: '';
+        width: 93%;
+        height: 60px;
+        display: block;
+        position: absolute;
+        top: -1px;
+        background: var(--green);
+        z-index: -1;
+        left: 0; }
+  #intro .content .intro-image {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0.5;
+    filter: drop-shadow(5px 5px 15px var(--dark-darker));
+    object-fit: contain;
+    object-position: bottom right;
+    will-change: transform, opacity; }
+    #intro .content .intro-image__wrapper {
+      position: absolute;
+      right: 0;
+      bottom: 2px;
+      width: 100%;
+      height: 100%; }
+      @media screen and (min-width: 768px) {
+        #intro .content .intro-image__wrapper {
+          max-width: 50%; } }
+
+/*# sourceMappingURL=intro.css.map */

css/sections/intro.css.map

@@ -0,0 +1,7 @@
+{
+"version": 3,
+"mappings": "AACI,eAAS;EACL,QAAQ,EAAE,QAAQ;EAElB,8BAAe;IACX,WAAW,EAAE,kBAAkB;IAE/B,oCAAqC;MAHzC,8BAAe;QAIP,QAAQ,EAAE,QAAQ;QAClB,MAAM,EAAE,GAAG;QACX,MAAM,EAAE,IAAI;IAGhB,oCAAqC;MATzC,8BAAe;QAUP,OAAO,EAAE,WAAW;QACpB,cAAc,EAAE,MAAM;QACtB,MAAM,EAAE,IAAI;QACZ,eAAe,EAAE,MAAM;IAG3B,wCAAU;MACN,QAAQ,EAAE,QAAQ;MAClB,OAAO,EAAE,SAAS;MAElB,+CAAS;QACL,OAAO,EAAE,EAAE;QACX,KAAK,EAAE,GAAG;QACV,MAAM,EAAE,IAAI;QACZ,OAAO,EAAE,KAAK;QACd,QAAQ,EAAE,QAAQ;QAClB,GAAG,EAAE,IAAI;QACT,UAAU,EAAE,YAAY;QACxB,OAAO,EAAE,EAAE;QACX,IAAI,EAAE,CAAC;EAKnB,4BAAa;IACT,QAAQ,EAAE,QAAQ;IAClB,KAAK,EAAE,CAAC;IACR,MAAM,EAAE,CAAC;IACT,KAAK,EAAE,IAAI;IACX,MAAM,EAAE,IAAI;IACZ,OAAO,EAAE,GAAG;IACZ,MAAM,EAAE,4CAA4C;IACpD,UAAU,EAAE,OAAO;IACnB,eAAe,EAAE,YAAY;IAC7B,WAAW,EAAE,kBAAkB;IAE/B,qCAAW;MACP,QAAQ,EAAE,QAAQ;MAClB,KAAK,EAAE,CAAC;MACR,MAAM,EAAE,GAAG;MACX,KAAK,EAAE,IAAI;MACX,MAAM,EAAE,IAAI;MAEZ,oCAAqC;QAPzC,qCAAW;UAQH,SAAS,EAAE,GAAG",
+"sources": ["intro.scss"],
+"names": [],
+"file": "intro.css"
+}

css/sections/intro.scss

@@ -0,0 +1,64 @@
+#intro {
+    .content {
+        position: relative;
+
+        .intro-content {
+            will-change: auto;
+
+            @media screen and (max-width: 767px) {
+                position: absolute;
+                bottom: 15%;
+                height: auto;
+            }
+
+            @media screen and (min-width: 768px) {
+                display: inline-flex;
+                flex-direction: column;
+                height: 100%;
+                justify-content: center;
+            }
+
+            .subtitle {
+                position: relative;
+                padding: 10px 15px;
+
+                &::after {
+                    content: '';
+                    width: 93%;
+                    height: 60px;
+                    display: block;
+                    position: absolute;
+                    top: -1px;
+                    background: var(--green);
+                    z-index: -1;
+                    left: 0;
+                }
+            }
+        }
+
+        .intro-image {
+            position: absolute;
+            right: 0;
+            bottom: 0;
+            width: 100%;
+            height: 100%;
+            opacity: 0.5;
+            filter: drop-shadow(5px 5px 15px var(--dark-darker));
+            object-fit: contain;
+            object-position: bottom right;
+            will-change: auto;
+
+            &__wrapper {
+                position: absolute;
+                right: 0;
+                bottom: 2px;
+                width: 100%;
+                height: 100%;
+
+                @media screen and (min-width: 768px) {
+                    max-width: 50%;
+                }
+            }
+        }
+    }
+}

css/sections/projects.css

@@ -0,0 +1,186 @@
+.projects-wrapper {
+  display: grid;
+  grid-gap: var(--gap) var(--gap);
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
+  .projects-wrapper .project {
+    will-change: transform; }
+    .projects-wrapper .project-info {
+      position: relative; }
+    .projects-wrapper .project-more {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      padding: 100px;
+      font-size: 60px;
+      text-align: center;
+      opacity: 0;
+      visibility: hidden;
+      background: rgba(11, 122, 117, 0.5);
+      transition: all 0.4s ease; }
+    .projects-wrapper .project-image img {
+      width: 100%;
+      height: auto; }
+    .projects-wrapper .project-name {
+      position: absolute;
+      bottom: 0;
+      width: 100%;
+      background: rgba(51, 59, 72, 0.5);
+      padding: 10px var(--gap-s);
+      text-shadow: 1px 1px 1px var(--dark-darker);
+      transition: all 0.4s ease; }
+    .projects-wrapper .project > .tags {
+      background: var(--dark-lighter);
+      padding: var(--gap-s);
+      font-size: 12px;
+      transition: all 0.4s ease; }
+      .projects-wrapper .project > .tags .tag {
+        background: var(--dark);
+        padding: 10px; }
+        .projects-wrapper .project > .tags .tag:not(:last-child) {
+          margin-right: 5px; }
+    .projects-wrapper .project:hover {
+      cursor: pointer; }
+      .projects-wrapper .project:hover .project-more {
+        opacity: 1;
+        visibility: visible;
+        transition: all 0.4s ease; }
+      .projects-wrapper .project:hover .project-name {
+        background: rgba(11, 122, 117, 0.5);
+        transition: all 0.4s ease; }
+      .projects-wrapper .project:hover > .tags {
+        background: var(--green);
+        transition: all 0.4s ease; }
+
+.projects-modals .project-modal {
+  position: fixed;
+  z-index: -1;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background: rgba(51, 59, 72, 0.6);
+  opacity: 0;
+  visibility: hidden;
+  transition: all 0.4s ease; }
+  .projects-modals .project-modal.open {
+    opacity: 1;
+    visibility: visible;
+    z-index: 2; }
+  .projects-modals .project-modal__inner {
+    position: relative;
+    background-color: var(--dark);
+    padding: var(--gap);
+    border: 2px solid var(--green);
+    cursor: initial; }
+    @media screen and (max-width: 919px) {
+      .projects-modals .project-modal__inner {
+        width: calc(100% - 100px);
+        height: calc(100% - 100px);
+        margin: 70px auto 5%;
+        transform: translateY(-50%);
+        top: 50%; } }
+    @media screen and (min-width: 920px) {
+      .projects-modals .project-modal__inner {
+        margin: 5% auto;
+        width: 80%;
+        height: 100%;
+        max-height: 80%;
+        max-width: 1720px; } }
+    .projects-modals .project-modal__inner .close-modal {
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 40px;
+      height: 40px;
+      font-size: 38px;
+      line-height: 34px;
+      text-align: center;
+      background: var(--green);
+      cursor: pointer; }
+  @media screen and (max-width: 919px) {
+    .projects-modals .project-modal__wrapper {
+      height: 100%;
+      overflow: auto; } }
+  @media screen and (min-width: 920px) {
+    .projects-modals .project-modal__wrapper {
+      display: flex;
+      height: 100%; } }
+  @media screen and (min-width: 920px) {
+    .projects-modals .project-modal__image {
+      width: 100%; } }
+  .projects-modals .project-modal__image .project-image,
+  .projects-modals .project-modal__image img {
+    height: auto; }
+    @media screen and (min-width: 920px) {
+      .projects-modals .project-modal__image .project-image,
+      .projects-modals .project-modal__image img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        object-position: top; } }
+  .projects-modals .project-modal__content {
+    position: relative;
+    width: 100%;
+    overflow: auto; }
+    @media screen and (min-width: 920px) {
+      .projects-modals .project-modal__content {
+        margin-left: var(--gap);
+        margin-bottom: 60px; } }
+    .projects-modals .project-modal__content .green-tag {
+      background: #0B7A75;
+      padding: 2px 5px;
+      font-size: 12px; }
+    .projects-modals .project-modal__content > p {
+      margin-top: var(--gap-s); }
+    .projects-modals .project-modal__content + .tags {
+      width: 100%;
+      font-size: 12px;
+      transition: all 0.4s ease; }
+      @media screen and (min-width: 920px) {
+        .projects-modals .project-modal__content + .tags {
+          position: absolute;
+          bottom: var(--gap);
+          right: var(--gap);
+          max-width: calc(50% - 30px); } }
+      @media screen and (min-width: 1010px) {
+        .projects-modals .project-modal__content + .tags {
+          max-width: calc(50% - 60px); } }
+      .projects-modals .project-modal__content + .tags .tag {
+        display: inline-block;
+        background: var(--dark-lighter);
+        padding: 5px 10px; }
+        .projects-modals .project-modal__content + .tags .tag:not(:last-child) {
+          margin-right: 5px; }
+  .projects-modals .project-modal__arrow {
+    position: absolute;
+    top: 50%;
+    width: 40px;
+    height: 40px;
+    background: var(--green);
+    z-index: 2;
+    cursor: pointer;
+    transform: translateY(-50%); }
+    .projects-modals .project-modal__arrow:before {
+      display: inline-block;
+      width: 40px;
+      height: 40px;
+      color: var(--light);
+      font-size: 32px;
+      font-weight: bold;
+      line-height: 36px;
+      text-align: center; }
+    .projects-modals .project-modal__arrow.prev {
+      left: -40px; }
+      .projects-modals .project-modal__arrow.prev:before {
+        content: '<'; }
+    .projects-modals .project-modal__arrow.next {
+      right: -40px; }
+      .projects-modals .project-modal__arrow.next:before {
+        content: '>'; }
+  .projects-modals .project-modal:first-child .project-modal__arrow.prev {
+    display: none; }
+  .projects-modals .project-modal:last-child .project-modal__arrow.next {
+    display: none; }
+
+/*# sourceMappingURL=projects.css.map */

css/sections/projects.css.map

@@ -0,0 +1,7 @@
+{
+"version": 3,
+"mappings": "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",
+"sources": ["projects.scss"],
+"names": [],
+"file": "projects.css"
+}

css/sections/projects.scss

@@ -0,0 +1,265 @@
+.projects-wrapper {
+    display: grid;
+    grid-gap: var(--gap) var(--gap);
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+
+    .project {
+        will-change: auto;
+
+        &-info {
+            position: relative;
+        }
+
+        &-more {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            padding: 100px;
+            font-size: 60px;
+            text-align: center;
+            opacity: 0;
+            visibility: hidden;
+            background: rgba(11, 122, 117, 0.5);
+            transition: all 0.4s ease;
+        }
+
+        &-image img {
+            width: 100%;
+            height: auto;
+        }
+
+        &-name {
+            position: absolute;
+            bottom: 0;
+            width: 100%;
+            background: rgba(51, 59, 72, 0.5);
+            padding: 10px var(--gap-s);
+            text-shadow: 1px 1px 1px var(--dark-darker);
+            transition: all 0.4s ease;
+        }
+
+        > .tags {
+            background: var(--dark-lighter);
+            padding: var(--gap-s);
+            font-size: 12px;
+            transition: all 0.4s ease;
+
+            .tag {
+                background: var(--dark);
+                padding: 10px;
+
+                &:not(:last-child) {
+                    margin-right: 5px;
+                }
+            }
+        }
+
+        &:hover {
+            cursor: pointer;
+
+            .project-more {
+                opacity: 1;
+                visibility: visible;
+                transition: all 0.4s ease;
+            }
+
+            .project-name {
+                background: rgba(11, 122, 117, 0.5);
+                transition: all 0.4s ease;
+            }
+
+            > .tags {
+                background: var(--green);
+                transition: all 0.4s ease;
+            }
+        }
+    }
+}
+
+.projects-modals {
+    .project-modal {
+        position: fixed;
+        z-index: -1;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        overflow: auto;
+        background: rgba(51, 59, 72, 0.6);
+        opacity: 0;
+        visibility: hidden;
+        transition: all 0.4s ease;
+
+
+        &.open {
+            opacity: 1;
+            visibility: visible;
+            z-index: 2;
+        }
+
+        &__inner {
+            position: relative;
+            background-color: var(--dark);
+            padding: var(--gap);
+            border: 2px solid var(--green);
+            cursor: initial;
+
+            @media screen and (max-width: 919px) {
+                width: calc(100% - 100px);
+                height: calc(100% - 100px);
+                margin: 70px auto 5%;
+                transform: translateY(-50%);
+                top: 50%;
+            }
+
+            @media screen and (min-width: 920px) {
+                margin: 5% auto;
+                width: 80%;
+                height: 100%;
+                max-height: 80%;
+                max-width: 1720px;
+            }
+
+            .close-modal {
+                position: absolute;
+                top: 0;
+                right: 0;
+                width: 40px;
+                height: 40px;
+                font-size: 38px;
+                line-height: 34px;
+                text-align: center;
+                background: var(--green);
+                cursor: pointer;
+            }
+        }
+
+        &__wrapper {
+            @media screen and (max-width: 919px) {
+                height: 100%;
+                overflow: auto;
+            }
+
+            @media screen and (min-width: 920px) {
+                display: flex;
+                height: 100%;
+            }
+        }
+
+        &__image {
+            @media screen and (min-width: 920px) {
+                width: 100%;
+            }
+
+            .project-image,
+            img {
+                height: auto;
+
+                @media screen and (min-width: 920px) {
+                    width: 100%;
+                    height: 100%;
+                    object-fit: cover;
+                    object-position: top;
+                }
+            }
+        }
+
+        &__content {
+            position: relative;
+            width: 100%;
+            overflow: auto;
+
+            @media screen and (min-width: 920px) {
+                margin-left: var(--gap);
+                margin-bottom: 60px;
+            }
+
+            .green-tag {
+                background: #0B7A75;
+                padding: 2px 5px;
+                font-size: 12px;
+            }
+
+            > p {
+                margin-top: var(--gap-s);
+            }
+
+            + .tags {
+                width: 100%;
+                font-size: 12px;
+                transition: all 0.4s ease;
+
+                @media screen and (min-width: 920px) {
+                    position: absolute;
+                    bottom: var(--gap);
+                    right: var(--gap);
+                    max-width: calc(50% - 30px);
+                }
+
+                @media screen and (min-width: 1010px) {
+                    max-width: calc(50% - 60px);
+                }
+
+                .tag {
+                    display: inline-block;
+                    background: var(--dark-lighter);
+                    padding: 5px 10px;
+
+                    &:not(:last-child) {
+                        margin-right: 5px;
+                    }
+                }
+            }
+        }
+
+        &__arrow {
+            position: absolute;
+            top: 50%;
+            width: 40px;
+            height: 40px;
+            background: var(--green);
+            z-index: 2;
+            cursor: pointer;
+            transform: translateY(-50%);
+
+            &:before {
+                display: inline-block;
+                width: 40px;
+                height: 40px;
+                color: var(--light);
+                font-size: 32px;
+                font-weight: bold;
+                line-height: 36px;
+                text-align: center;
+            }
+
+            &.prev {
+                left: -40px;
+
+                &:before {
+                    content: '<';
+                }
+            }
+
+            &.next {
+                right: -40px;
+
+                &:before {
+                    content: '>';
+                }
+            }
+        }
+
+        &:first-child {
+            .project-modal__arrow.prev {
+                display: none;
+            }
+        }
+
+        &:last-child {
+            .project-modal__arrow.next {
+                display: none;
+            }
+        }
+    }
+}

css/sections/skills.css

@@ -0,0 +1,71 @@
+@charset "UTF-8";
+#skills .content .wrapper {
+  height: 100%; }
+
+.skills-wrapper {
+  display: flex;
+  flex-direction: column;
+  max-height: calc(100% - 80px); }
+  @media screen and (max-width: 1094px) {
+    .skills-wrapper .skills.technical {
+      display: flex;
+      align-items: center;
+      min-height: 300px;
+      overflow-x: auto; } }
+  @media screen and (min-width: 1095px) {
+    .skills-wrapper .skills.technical {
+      display: grid;
+      grid-gap: 5px;
+      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }
+  @media screen and (min-width: 1445px) {
+    .skills-wrapper .skills.technical {
+      grid-gap: var(--gap) var(--gap); } }
+  .skills-wrapper .skills.technical .skill {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: var(--gap-s);
+    border: 2px solid var(--green);
+    transition: all 0.4s ease; }
+    @media screen and (max-width: 1094px) {
+      .skills-wrapper .skills.technical .skill {
+        flex: 1;
+        min-width: 140px;
+        min-height: 230px;
+        justify-content: center; } }
+    .skills-wrapper .skills.technical .skill-logo {
+      border-radius: 50%; }
+    .skills-wrapper .skills.technical .skill-name {
+      font-size: 20px;
+      text-align: center;
+      margin: 0 auto; }
+    .skills-wrapper .skills.technical .skill:last-child .skill-name {
+      font-size: var(--font-size__base); }
+  .skills-wrapper .other-skills {
+    margin-top: var(--gap); }
+    @media screen and (min-width: 768px) {
+      .skills-wrapper .other-skills {
+        display: flex;
+        overflow: hidden; } }
+    .skills-wrapper .other-skills .skills {
+      width: 100%;
+      background: var(--dark-lighter);
+      padding: var(--gap);
+      overflow: auto; }
+      @media screen and (min-width: 768px) {
+        .skills-wrapper .other-skills .skills.non-technical {
+          max-width: 340px;
+          margin-right: var(--gap); } }
+      .skills-wrapper .other-skills .skills.responsibilities h4 {
+        margin-bottom: var(--gap-s); }
+      .skills-wrapper .other-skills .skills.responsibilities ol li {
+        padding-left: var(--gap-s);
+        margin-left: var(--gap-s); }
+        .skills-wrapper .other-skills .skills.responsibilities ol li:not(:last-child) {
+          margin-bottom: var(--gap-s); }
+        .skills-wrapper .other-skills .skills.responsibilities ol li::marker {
+          content: '☉';
+          color: var(--green-lighter); }
+
+/*# sourceMappingURL=skills.css.map */

css/sections/skills.css.map

@@ -0,0 +1,7 @@
+{
+"version": 3,
+"mappings": ";AAEQ,yBAAS;EACL,MAAM,EAAE,IAAI;;AAKxB,eAAgB;EACZ,OAAO,EAAE,IAAI;EACb,cAAc,EAAE,MAAM;EACtB,UAAU,EAAE,iBAAiB;EAIrB,qCAAsC;IAD1C,iCAAY;MAEJ,OAAO,EAAE,IAAI;MACb,WAAW,EAAE,MAAM;MACnB,UAAU,EAAE,KAAK;MACjB,UAAU,EAAE,IAAI;EAGpB,qCAAsC;IAR1C,iCAAY;MASJ,OAAO,EAAE,IAAI;MACb,QAAQ,EAAE,GAAG;MACb,qBAAqB,EAAE,oCAAoC;EAG/D,qCAAsC;IAd1C,iCAAY;MAeJ,QAAQ,EAAE,qBAAqB;EAGnC,wCAAO;IACH,IAAI,EAAE,CAAC;IACP,OAAO,EAAE,IAAI;IACb,cAAc,EAAE,MAAM;IACtB,WAAW,EAAE,MAAM;IAEnB,OAAO,EAAE,YAAY;IACrB,MAAM,EAAE,sBAAsB;IAC9B,UAAU,EAAE,aAAa;IAEzB,qCAAsC;MAV1C,wCAAO;QAWC,IAAI,EAAE,CAAC;QACP,SAAS,EAAE,KAAK;QAChB,UAAU,EAAE,KAAK;QACjB,eAAe,EAAE,MAAM;IAG3B,6CAAO;MACH,aAAa,EAAE,GAAG;IAGtB,6CAAO;MACH,SAAS,EAAE,IAAI;MACf,UAAU,EAAE,MAAM;MAClB,MAAM,EAAE,MAAM;IAId,+DAAY;MACR,SAAS,EAAE,sBAAsB;EAQrD,6BAAc;IACV,UAAU,EAAE,UAAU;IAEtB,oCAAqC;MAHzC,6BAAc;QAIN,OAAO,EAAE,IAAI;QACb,QAAQ,EAAE,MAAM;IAGpB,qCAAQ;MACJ,KAAK,EAAE,IAAI;MACX,UAAU,EAAE,mBAAmB;MAC/B,OAAO,EAAE,UAAU;MACnB,QAAQ,EAAE,IAAI;MAGV,oCAAqC;QADzC,mDAAgB;UAER,SAAS,EAAE,KAAK;UAChB,YAAY,EAAE,UAAU;MAK5B,yDAAG;QACC,aAAa,EAAE,YAAY;MAI3B,4DAAG;QACC,YAAY,EAAE,YAAY;QAC1B,WAAW,EAAE,YAAY;QAEzB,6EAAmB;UACf,aAAa,EAAE,YAAY;QAG/B,oEAAU;UACN,OAAO,EAAE,GAAG;UACZ,KAAK,EAAE,oBAAoB",
+"sources": ["skills.scss"],
+"names": [],
+"file": "skills.css"
+}

css/sections/skills.scss

@@ -0,0 +1,114 @@
+#skills {
+    .content {
+        .wrapper {
+            height: 100%;
+            //overflow: hidden;
+        }
+    }
+}
+.skills-wrapper {
+    display: flex;
+    flex-direction: column;
+    max-height: calc(100% - 80px);
+
+    .skills {
+        &.technical {
+            @media screen and (max-width: 1094px) {
+                display: flex;
+                align-items: center;
+                min-height: 300px;
+                overflow-x: auto;
+            }
+
+            @media screen and (min-width: 1095px) {
+                display: grid;
+                grid-gap: 5px;
+                grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+            }
+
+            @media screen and (min-width: 1445px) {
+                grid-gap: var(--gap) var(--gap);
+            }
+
+            .skill {
+                flex: 1;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                //background: var(--dark-lighter);
+                padding: var(--gap-s);
+                border: 2px solid var(--green);
+                transition: all 0.4s ease;
+
+                @media screen and (max-width: 1094px) {
+                    flex: 1;
+                    min-width: 140px;
+                    min-height: 230px;
+                    justify-content: center;
+                }
+
+                &-logo {
+                    border-radius: 50%;
+                }
+
+                &-name {
+                    font-size: 20px;
+                    text-align: center;
+                    margin: 0 auto;
+                }
+
+                &:last-child {
+                    .skill-name {
+                        font-size: var(--font-size__base);
+                    }
+                }
+
+            }
+        }
+    }
+
+    .other-skills {
+        margin-top: var(--gap);
+
+        @media screen and (min-width: 768px) {
+            display: flex;
+            overflow: hidden;
+        }
+
+        .skills {
+            width: 100%;
+            background: var(--dark-lighter);
+            padding: var(--gap);
+            overflow: auto;
+
+            &.non-technical {
+                @media screen and (min-width: 768px) {
+                    max-width: 340px;
+                    margin-right: var(--gap);
+                }
+            }
+
+            &.responsibilities {
+                h4 {
+                    margin-bottom: var(--gap-s);
+                }
+
+                ol {
+                    li {
+                        padding-left: var(--gap-s);
+                        margin-left: var(--gap-s);
+
+                        &:not(:last-child) {
+                            margin-bottom: var(--gap-s);
+                        }
+
+                        &::marker {
+                            content: '☉';
+                            color: var(--green-lighter);
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

css/sidebar.css

@@ -0,0 +1,66 @@
+@charset "UTF-8";
+aside {
+  position: fixed;
+  width: 175px;
+  height: 100vh;
+  background: #181E25; }
+  @media screen and (max-width: 767px) {
+    aside {
+      transform: translateX(-175px);
+      z-index: 5; } }
+  @media screen and (min-width: 920px) {
+    aside {
+      width: 280px; } }
+  aside .logo-wrapper {
+    display: flex;
+    align-items: center;
+    width: 100px;
+    height: 100px;
+    margin: var(--gap) auto;
+    font-size: 50px;
+    background: linear-gradient(to bottom, var(--green-lighter) 0%, var(--green) 50%, var(--dark) 50%, var(--dark-darker) 100%); }
+    @media screen and (min-width: 920px) {
+      aside .logo-wrapper {
+        width: 200px;
+        height: 200px;
+        font-size: 100px; } }
+    aside .logo-wrapper .logo {
+      margin: 0 auto;
+      text-shadow: 5px 5px 5px var(--dark-lighter); }
+
+.copyright-wrapper {
+  position: absolute;
+  bottom: 0;
+  padding: var(--gap);
+  font-size: 16px;
+  text-align: center; }
+
+nav {
+  overflow-y: auto;
+  height: calc(100% - 250px); }
+
+.nav-btn {
+  display: block;
+  margin: var(--gap-s) var(--gap);
+  padding: 10px 20px;
+  color: var(--light);
+  text-align: center;
+  border: 2px solid var(--green); }
+  .nav-btn:hover {
+    background: var(--green);
+    color: var(--light); }
+  .nav-btn:before {
+    content: '⇩';
+    margin-right: 20px; }
+
+.nav-link {
+  display: inline-block;
+  padding: var(--gap-s) var(--gap);
+  font-size: 18px; }
+  @media screen and (min-width: 920px) {
+    .nav-link {
+      font-size: 22px; } }
+  .nav-link.active {
+    color: var(--blue-lighter); }
+
+/*# sourceMappingURL=sidebar.css.map */

css/sidebar.css.map

@@ -0,0 +1,7 @@
+{
+"version": 3,
+"mappings": ";AAAA,KAAM;EAKF,QAAQ,EAAE,KAAK;EACf,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,KAAK;EACb,UAAU,EAAE,OAAO;EAPnB,oCAAqC;IADzC,KAAM;MAEE,SAAS,EAAE,kBAAkB;MAC7B,OAAO,EAAE,CAAC;EAOd,oCAAqC;IAVzC,KAAM;MAWE,KAAK,EAAE,KAAK;EAGhB,mBAAc;IACV,OAAO,EAAE,IAAI;IACb,WAAW,EAAE,MAAM;IACnB,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE,KAAK;IACb,MAAM,EAAE,eAAe;IAGvB,SAAS,EAAE,IAAI;IACf,UAAU,EAAE,+GAMX;IAED,oCAAqC;MAjBzC,mBAAc;QAkBN,KAAK,EAAE,KAAK;QACZ,MAAM,EAAE,KAAK;QACb,SAAS,EAAE,KAAK;IAGpB,yBAAM;MACF,MAAM,EAAE,MAAM;MACd,WAAW,EAAE,+BAA+B;;AAKxD,kBAAmB;EACf,QAAQ,EAAE,QAAQ;EAClB,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,UAAU;EACnB,SAAS,EAAE,IAAI;EACf,UAAU,EAAE,MAAM;;AAGtB,GAAI;EACA,UAAU,EAAE,IAAI;EAChB,MAAM,EAAE,kBAAkB;;AAG9B,QAAS;EACL,OAAO,EAAE,KAAK;EACd,MAAM,EAAE,uBAAuB;EAC/B,OAAO,EAAE,SAAS;EAClB,KAAK,EAAE,YAAY;EACnB,UAAU,EAAE,MAAM;EAClB,MAAM,EAAE,sBAAsB;EAE9B,cAAQ;IACJ,UAAU,EAAE,YAAY;IACxB,KAAK,EAAE,YAAY;EAGvB,eAAS;IACL,OAAO,EAAE,GAAG;IACZ,YAAY,EAAE,IAAI;;AAI1B,SAAU;EACN,OAAO,EAAE,YAAY;EACrB,OAAO,EAAE,uBAAuB;EAChC,SAAS,EAAE,IAAI;EAEf,oCAAqC;IALzC,SAAU;MAMF,SAAS,EAAE,IAAI;EAGnB,gBAAS;IACL,KAAK,EAAE,mBAAmB",
+"sources": ["sidebar.scss"],
+"names": [],
+"file": "sidebar.css"
+}

css/sidebar.scss

@@ -0,0 +1,150 @@
+aside {
+    @media screen and (max-width: 767px) {
+        transform: translateX(-175px);
+        z-index: 5;
+    }
+    position: fixed;
+    display: flex;
+    flex-direction: column;
+    width: 175px;
+    height: 100vh;
+    background: var(--dark-darker);
+
+    @media screen and (min-width: 920px) {
+        width: 280px;
+    }
+
+    .logo-wrapper {
+        display: flex;
+        align-items: center;
+        width: 100px;
+        height: 100px;
+        margin: var(--gap) auto;
+        //border: 2px solid var(--green);
+        //border-radius: 50%;
+        font-size: 50px;
+        background: linear-gradient(
+                        to bottom,
+                        var(--green-lighter) 0%,
+                        var(--green) 50%,
+                        var(--dark) 50%,
+                        var(--dark-darker) 100%
+        );
+
+        @media screen and (min-width: 920px) {
+            width: 200px;
+            height: 200px;
+            font-size: 100px;
+        }
+
+        .logo {
+            margin: 0 auto;
+            text-shadow: 5px 5px 5px var(--dark-lighter);
+        }
+    }
+}
+
+.copyright-wrapper {
+    position: absolute;
+    bottom: 0;
+    padding: var(--gap);
+    font-size: 16px;
+    text-align: center;
+}
+
+nav {
+    height: 100%;
+    overflow-y: scroll;
+    margin-bottom: 150px;
+}
+
+.nav-btn {
+    display: block;
+    margin: var(--gap-s) var(--gap);
+    padding: 10px 20px;
+    color: var(--light);
+    text-align: center;
+    border: 2px solid var(--green);
+
+    &:hover {
+        background: var(--green);
+        color: var(--light);
+    }
+
+    &:before {
+        content: '⇩';
+        margin-right: 20px;
+    }
+}
+
+.nav-link {
+    display: inline-block;
+    padding: var(--gap-s) var(--gap);
+    font-size: 18px;
+
+    @media screen and (min-width: 920px) {
+        font-size: 22px;
+    }
+
+    &.active {
+        color: var(--blue-lighter);
+    }
+}
+
+// Mobile navigation
+.mobile-nav {
+    @media screen and (max-width:767px) {
+        display: block;
+    }
+
+    @media screen and (min-width: 768px) {
+        display: none;
+    }
+}
+
+.mobile-nav.open  > span {
+    top: 25px;
+    transform: rotate(45deg);
+}
+.mobile-nav.open  > span::before {
+    top: 0;
+    transform: rotate(0deg);
+}
+.mobile-nav.open  > span::after {
+    top: 0;
+    transform: rotate(90deg);
+}
+.mobile-nav.open + aside {
+
+}
+.mobile-nav {
+    position: absolute;
+    top: 40px;
+    right: -75px;
+    width: 50px;
+    height: 50px;
+    cursor: pointer;
+    z-index: 1;
+
+    &.open {
+        top: 15px;
+    }
+}
+.mobile-nav > span,
+.mobile-nav > span::before,
+.mobile-nav > span::after {
+    display: block;
+    position: absolute;
+    width: 100%;
+    height: 4px;
+    background-color: var(--green);
+    transition-duration: .25s;
+}
+.mobile-nav > span::before {
+    content: '';
+    top: -15px;
+}
+.mobile-nav > span::after {
+    content: '';
+    top: 15px;
+}

css/typography.css

@@ -0,0 +1,8 @@
+@font-face {
+  font-family: 'KoHo';
+  src: url("font/KoHo-Regular.woff");
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap; }
+
+/*# sourceMappingURL=typography.css.map */

css/typography.css.map

@@ -0,0 +1,7 @@
+{
+"version": 3,
+"mappings": "AAAA,UAMC;EALG,WAAW,EAAE,MAAM;EACnB,GAAG,EAAE,6BAA6B;EAClC,WAAW,EAAE,MAAM;EACnB,UAAU,EAAE,MAAM;EAClB,YAAY,EAAE,IAAI",
+"sources": ["typography.scss"],
+"names": [],
+"file": "typography.css"
+}

css/typography.scss

@@ -0,0 +1,7 @@
+@font-face {
+    font-family: 'KoHo';
+    src: url('font/KoHo-Regular.woff');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}

css/variables.css

@@ -0,0 +1,21 @@
+:root {
+  --font-size__base: 16px;
+  --gap: 20px;
+  --gap-s: 10px;
+  --dark: #222831;
+  --dark-darker: #181E25;
+  --dark-lighter: #333B48;
+  --light: #F5F5F5;
+  --green: #0B7A75;
+  --green-lighter: #11BBB2;
+  --blue: #5f9ea0;
+  --blue-lighter: #b0c299; }
+  @media screen and (min-width: 920px) {
+    :root {
+      --font-size__base: 18px; } }
+  @media screen and (min-width: 1010px) {
+    :root {
+      --gap: 40px;
+      --gap-s: 20px; } }
+
+/*# sourceMappingURL=variables.css.map */

css/variables.css.map

@@ -0,0 +1,7 @@
+{
+"version": 3,
+"mappings": "AACA,KAAM;EACF,iBAAiB,CAAC,KAAK;EACvB,KAAK,CAAC,KAAK;EACX,OAAO,CAAC,KAAK;EACb,MAAM,CAAC,QAAQ;EACf,aAAa,CAAC,QAAQ;EACtB,cAAc,CAAC,QAAQ;EACvB,OAAO,CAAC,QAAQ;EAChB,OAAO,CAAC,QAAQ;EAChB,eAAe,CAAC,QAAQ;EAExB,MAAM,CAAC,QAAQ;EACf,cAAc,CAAC,QAAQ;EAEvB,oCAAqC;IAdzC,KAAM;MAeE,iBAAiB,CAAC,KAAK;EAG3B,qCAAsC;IAlB1C,KAAM;MAmBE,KAAK,CAAC,KAAK;MACX,OAAO,CAAC,KAAK",
+"sources": ["variables.scss"],
+"names": [],
+"file": "variables.css"
+}

css/variables.scss

@@ -0,0 +1,24 @@
+// VARS
+:root {
+    --font-size__base: 16px;
+    --gap: 20px;
+    --gap-s: 10px;
+    --dark: #222831;
+    --dark-darker: #181E25;
+    --dark-lighter: #333B48;
+    --light: #F5F5F5;
+    --green: #0B7A75;
+    --green-lighter: #11BBB2;
+
+    --blue: #5f9ea0;
+    --blue-lighter: #b0c299;
+
+    @media screen and (min-width: 920px) {
+        --font-size__base: 18px;
+    }
+
+    @media screen and (min-width: 1010px) {
+        --gap: 40px;
+        --gap-s: 20px;
+    }
+}