commit 2e62560057f77f142199a8506bc3cfbafba149ab
Author: kolarix999 <94450116+kolarix999@users.noreply.github.com>
Date: Thu Mar 16 02:16:38 2023 +0100
initial project commit
diff --git a/android-chrome-192x192.png b/android-chrome-192x192.png
new file mode 100755
index 0000000..6f0928a
Binary files /dev/null and b/android-chrome-192x192.png differ
diff --git a/android-chrome-512x512.png b/android-chrome-512x512.png
new file mode 100755
index 0000000..36af95c
Binary files /dev/null and b/android-chrome-512x512.png differ
diff --git a/apple-touch-icon.png b/apple-touch-icon.png
new file mode 100755
index 0000000..3853ffa
Binary files /dev/null and b/apple-touch-icon.png differ
diff --git a/css/.sass-cache/9a7febda3d27dd02d263e073ed1c3c13856f2b3c/animations.scssc b/css/.sass-cache/9a7febda3d27dd02d263e073ed1c3c13856f2b3c/animations.scssc
new file mode 100644
index 0000000..719c136
Binary files /dev/null and b/css/.sass-cache/9a7febda3d27dd02d263e073ed1c3c13856f2b3c/animations.scssc differ
diff --git a/css/.sass-cache/9a7febda3d27dd02d263e073ed1c3c13856f2b3c/layout.scssc b/css/.sass-cache/9a7febda3d27dd02d263e073ed1c3c13856f2b3c/layout.scssc
new file mode 100644
index 0000000..559caf8
Binary files /dev/null and b/css/.sass-cache/9a7febda3d27dd02d263e073ed1c3c13856f2b3c/layout.scssc differ
diff --git a/css/.sass-cache/9a7febda3d27dd02d263e073ed1c3c13856f2b3c/reset.scssc b/css/.sass-cache/9a7febda3d27dd02d263e073ed1c3c13856f2b3c/reset.scssc
new file mode 100644
index 0000000..57b40cd
Binary files /dev/null and b/css/.sass-cache/9a7febda3d27dd02d263e073ed1c3c13856f2b3c/reset.scssc differ
diff --git a/css/.sass-cache/9a7febda3d27dd02d263e073ed1c3c13856f2b3c/sidebar.scssc b/css/.sass-cache/9a7febda3d27dd02d263e073ed1c3c13856f2b3c/sidebar.scssc
new file mode 100644
index 0000000..c92c5aa
Binary files /dev/null and b/css/.sass-cache/9a7febda3d27dd02d263e073ed1c3c13856f2b3c/sidebar.scssc differ
diff --git a/css/.sass-cache/9a7febda3d27dd02d263e073ed1c3c13856f2b3c/typography.scssc b/css/.sass-cache/9a7febda3d27dd02d263e073ed1c3c13856f2b3c/typography.scssc
new file mode 100644
index 0000000..af8abdb
Binary files /dev/null and b/css/.sass-cache/9a7febda3d27dd02d263e073ed1c3c13856f2b3c/typography.scssc differ
diff --git a/css/.sass-cache/9a7febda3d27dd02d263e073ed1c3c13856f2b3c/variables.scssc b/css/.sass-cache/9a7febda3d27dd02d263e073ed1c3c13856f2b3c/variables.scssc
new file mode 100644
index 0000000..b9951ae
Binary files /dev/null and b/css/.sass-cache/9a7febda3d27dd02d263e073ed1c3c13856f2b3c/variables.scssc differ
diff --git a/css/animations.css b/css/animations.css
new file mode 100644
index 0000000..10f94c5
--- /dev/null
+++ b/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 */
diff --git a/css/animations.css.map b/css/animations.css.map
new file mode 100644
index 0000000..64e45c3
--- /dev/null
+++ b/css/animations.css.map
@@ -0,0 +1,7 @@
+{
+"version": 3,
+"mappings": "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",
+"sources": ["animations.scss"],
+"names": [],
+"file": "animations.css"
+}
diff --git a/css/animations.scss b/css/animations.scss
new file mode 100644
index 0000000..5a82f8e
--- /dev/null
+++ b/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;
+ }
+}
+
+
+
+
+
diff --git a/css/layout.css b/css/layout.css
new file mode 100644
index 0000000..28cf23a
--- /dev/null
+++ b/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 */
diff --git a/css/layout.css.map b/css/layout.css.map
new file mode 100644
index 0000000..014de7e
--- /dev/null
+++ b/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"
+}
diff --git a/css/layout.scss b/css/layout.scss
new file mode 100644
index 0000000..81f2214
--- /dev/null
+++ b/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);
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/css/reset.css b/css/reset.css
new file mode 100644
index 0000000..9093ded
--- /dev/null
+++ b/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 */
diff --git a/css/reset.css.map b/css/reset.css.map
new file mode 100644
index 0000000..714206b
--- /dev/null
+++ b/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"
+}
diff --git a/css/reset.scss b/css/reset.scss
new file mode 100644
index 0000000..132055f
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/css/sections/.sass-cache/0b02c29008779bab2ed1ecfb97ce4e529e579c55/about.scssc b/css/sections/.sass-cache/0b02c29008779bab2ed1ecfb97ce4e529e579c55/about.scssc
new file mode 100644
index 0000000..b20e85e
Binary files /dev/null and b/css/sections/.sass-cache/0b02c29008779bab2ed1ecfb97ce4e529e579c55/about.scssc differ
diff --git a/css/sections/.sass-cache/0b02c29008779bab2ed1ecfb97ce4e529e579c55/experience.scssc b/css/sections/.sass-cache/0b02c29008779bab2ed1ecfb97ce4e529e579c55/experience.scssc
new file mode 100644
index 0000000..27a781f
Binary files /dev/null and b/css/sections/.sass-cache/0b02c29008779bab2ed1ecfb97ce4e529e579c55/experience.scssc differ
diff --git a/css/sections/.sass-cache/0b02c29008779bab2ed1ecfb97ce4e529e579c55/intro.scssc b/css/sections/.sass-cache/0b02c29008779bab2ed1ecfb97ce4e529e579c55/intro.scssc
new file mode 100644
index 0000000..addb70c
Binary files /dev/null and b/css/sections/.sass-cache/0b02c29008779bab2ed1ecfb97ce4e529e579c55/intro.scssc differ
diff --git a/css/sections/.sass-cache/0b02c29008779bab2ed1ecfb97ce4e529e579c55/projects.scssc b/css/sections/.sass-cache/0b02c29008779bab2ed1ecfb97ce4e529e579c55/projects.scssc
new file mode 100644
index 0000000..164619f
Binary files /dev/null and b/css/sections/.sass-cache/0b02c29008779bab2ed1ecfb97ce4e529e579c55/projects.scssc differ
diff --git a/css/sections/.sass-cache/0b02c29008779bab2ed1ecfb97ce4e529e579c55/skills.scssc b/css/sections/.sass-cache/0b02c29008779bab2ed1ecfb97ce4e529e579c55/skills.scssc
new file mode 100644
index 0000000..dbbf67c
Binary files /dev/null and b/css/sections/.sass-cache/0b02c29008779bab2ed1ecfb97ce4e529e579c55/skills.scssc differ
diff --git a/css/sections/about.css b/css/sections/about.css
new file mode 100644
index 0000000..07d9a4a
--- /dev/null
+++ b/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 */
diff --git a/css/sections/about.css.map b/css/sections/about.css.map
new file mode 100644
index 0000000..1dc19c5
--- /dev/null
+++ b/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"
+}
diff --git a/css/sections/about.scss b/css/sections/about.scss
new file mode 100644
index 0000000..50f3bbe
--- /dev/null
+++ b/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;
+ }
+ }
+}
\ No newline at end of file
diff --git a/css/sections/experience.css b/css/sections/experience.css
new file mode 100644
index 0000000..1c1716a
--- /dev/null
+++ b/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 */
diff --git a/css/sections/experience.css.map b/css/sections/experience.css.map
new file mode 100644
index 0000000..78ef0bc
--- /dev/null
+++ b/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"
+}
diff --git a/css/sections/experience.scss b/css/sections/experience.scss
new file mode 100644
index 0000000..278dd3f
--- /dev/null
+++ b/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%;
+ }
+}
\ No newline at end of file
diff --git a/css/sections/intro.css b/css/sections/intro.css
new file mode 100644
index 0000000..0be2f84
--- /dev/null
+++ b/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 */
diff --git a/css/sections/intro.css.map b/css/sections/intro.css.map
new file mode 100644
index 0000000..1a51257
--- /dev/null
+++ b/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"
+}
diff --git a/css/sections/intro.scss b/css/sections/intro.scss
new file mode 100644
index 0000000..5b4be5d
--- /dev/null
+++ b/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%;
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/css/sections/projects.css b/css/sections/projects.css
new file mode 100644
index 0000000..71d126d
--- /dev/null
+++ b/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 */
diff --git a/css/sections/projects.css.map b/css/sections/projects.css.map
new file mode 100644
index 0000000..421f5cb
--- /dev/null
+++ b/css/sections/projects.css.map
@@ -0,0 +1,7 @@
+{
+"version": 3,
+"mappings": "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",
+"sources": ["projects.scss"],
+"names": [],
+"file": "projects.css"
+}
diff --git a/css/sections/projects.scss b/css/sections/projects.scss
new file mode 100644
index 0000000..e8bfb22
--- /dev/null
+++ b/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;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/css/sections/skills.css b/css/sections/skills.css
new file mode 100644
index 0000000..ba226ca
--- /dev/null
+++ b/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 */
diff --git a/css/sections/skills.css.map b/css/sections/skills.css.map
new file mode 100644
index 0000000..db25f8a
--- /dev/null
+++ b/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"
+}
diff --git a/css/sections/skills.scss b/css/sections/skills.scss
new file mode 100644
index 0000000..12e32f0
--- /dev/null
+++ b/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);
+ }
+ }
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/css/sidebar.css b/css/sidebar.css
new file mode 100644
index 0000000..2f3eef9
--- /dev/null
+++ b/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 */
diff --git a/css/sidebar.css.map b/css/sidebar.css.map
new file mode 100644
index 0000000..2d0ecd4
--- /dev/null
+++ b/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"
+}
diff --git a/css/sidebar.scss b/css/sidebar.scss
new file mode 100644
index 0000000..f949945
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/css/typography.css b/css/typography.css
new file mode 100644
index 0000000..9691784
--- /dev/null
+++ b/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 */
diff --git a/css/typography.css.map b/css/typography.css.map
new file mode 100644
index 0000000..e717679
--- /dev/null
+++ b/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"
+}
diff --git a/css/typography.scss b/css/typography.scss
new file mode 100644
index 0000000..ea321e3
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/css/variables.css b/css/variables.css
new file mode 100644
index 0000000..1e73bec
--- /dev/null
+++ b/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 */
diff --git a/css/variables.css.map b/css/variables.css.map
new file mode 100644
index 0000000..6c860f3
--- /dev/null
+++ b/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"
+}
diff --git a/css/variables.scss b/css/variables.scss
new file mode 100644
index 0000000..818e3f5
--- /dev/null
+++ b/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;
+ }
+}
\ No newline at end of file
diff --git a/favicon-16x16.png b/favicon-16x16.png
new file mode 100755
index 0000000..7ac3745
Binary files /dev/null and b/favicon-16x16.png differ
diff --git a/favicon-32x32.png b/favicon-32x32.png
new file mode 100755
index 0000000..2c161fa
Binary files /dev/null and b/favicon-32x32.png differ
diff --git a/favicon.ico b/favicon.ico
new file mode 100755
index 0000000..b86d477
Binary files /dev/null and b/favicon.ico differ
diff --git a/font/KoHo-Regular.woff b/font/KoHo-Regular.woff
new file mode 100644
index 0000000..844c7bc
Binary files /dev/null and b/font/KoHo-Regular.woff differ
diff --git a/images/.DS_Store b/images/.DS_Store
new file mode 100644
index 0000000..9093760
Binary files /dev/null and b/images/.DS_Store differ
diff --git a/images/400x400/.DS_Store b/images/400x400/.DS_Store
new file mode 100644
index 0000000..5008ddf
Binary files /dev/null and b/images/400x400/.DS_Store differ
diff --git a/images/400x400/aaplehrerwelt.png b/images/400x400/aaplehrerwelt.png
new file mode 100644
index 0000000..6d9ec4d
Binary files /dev/null and b/images/400x400/aaplehrerwelt.png differ
diff --git a/images/400x400/aaplehrerwelt.webp b/images/400x400/aaplehrerwelt.webp
new file mode 100644
index 0000000..04bccb8
Binary files /dev/null and b/images/400x400/aaplehrerwelt.webp differ
diff --git a/images/400x400/aapsoftwaredevelopment.png b/images/400x400/aapsoftwaredevelopment.png
new file mode 100644
index 0000000..5f7c0bf
Binary files /dev/null and b/images/400x400/aapsoftwaredevelopment.png differ
diff --git a/images/400x400/aapsoftwaredevelopment.webp b/images/400x400/aapsoftwaredevelopment.webp
new file mode 100644
index 0000000..c31fc59
Binary files /dev/null and b/images/400x400/aapsoftwaredevelopment.webp differ
diff --git a/images/400x400/bebenova.png b/images/400x400/bebenova.png
new file mode 100644
index 0000000..756b11a
Binary files /dev/null and b/images/400x400/bebenova.png differ
diff --git a/images/400x400/bebenova.webp b/images/400x400/bebenova.webp
new file mode 100644
index 0000000..379d2ed
Binary files /dev/null and b/images/400x400/bebenova.webp differ
diff --git a/images/400x400/elk.png b/images/400x400/elk.png
new file mode 100644
index 0000000..435da64
Binary files /dev/null and b/images/400x400/elk.png differ
diff --git a/images/400x400/elk.webp b/images/400x400/elk.webp
new file mode 100644
index 0000000..bf6c2d4
Binary files /dev/null and b/images/400x400/elk.webp differ
diff --git a/images/400x400/fenix.png b/images/400x400/fenix.png
new file mode 100644
index 0000000..72f0a65
Binary files /dev/null and b/images/400x400/fenix.png differ
diff --git a/images/400x400/fenix.webp b/images/400x400/fenix.webp
new file mode 100644
index 0000000..b658476
Binary files /dev/null and b/images/400x400/fenix.webp differ
diff --git a/images/400x400/ferivi.png b/images/400x400/ferivi.png
new file mode 100644
index 0000000..9259e78
Binary files /dev/null and b/images/400x400/ferivi.png differ
diff --git a/images/400x400/ferivi.webp b/images/400x400/ferivi.webp
new file mode 100644
index 0000000..0daa431
Binary files /dev/null and b/images/400x400/ferivi.webp differ
diff --git a/images/400x400/fraktura.png b/images/400x400/fraktura.png
new file mode 100644
index 0000000..45b45fd
Binary files /dev/null and b/images/400x400/fraktura.png differ
diff --git a/images/400x400/fraktura.webp b/images/400x400/fraktura.webp
new file mode 100644
index 0000000..e27d6eb
Binary files /dev/null and b/images/400x400/fraktura.webp differ
diff --git a/images/400x400/jj.png b/images/400x400/jj.png
new file mode 100644
index 0000000..2418a75
Binary files /dev/null and b/images/400x400/jj.png differ
diff --git a/images/400x400/jj.webp b/images/400x400/jj.webp
new file mode 100644
index 0000000..a5c2fb7
Binary files /dev/null and b/images/400x400/jj.webp differ
diff --git a/images/400x400/kroschke.png b/images/400x400/kroschke.png
new file mode 100644
index 0000000..59509a1
Binary files /dev/null and b/images/400x400/kroschke.png differ
diff --git a/images/400x400/kroschke.webp b/images/400x400/kroschke.webp
new file mode 100644
index 0000000..a62bcdc
Binary files /dev/null and b/images/400x400/kroschke.webp differ
diff --git a/images/400x400/lehrerwelt.png b/images/400x400/lehrerwelt.png
new file mode 100644
index 0000000..92966e3
Binary files /dev/null and b/images/400x400/lehrerwelt.png differ
diff --git a/images/400x400/lehrerwelt.webp b/images/400x400/lehrerwelt.webp
new file mode 100644
index 0000000..67f4740
Binary files /dev/null and b/images/400x400/lehrerwelt.webp differ
diff --git a/images/400x400/neutrino.png b/images/400x400/neutrino.png
new file mode 100644
index 0000000..fdc6b8d
Binary files /dev/null and b/images/400x400/neutrino.png differ
diff --git a/images/400x400/neutrino.webp b/images/400x400/neutrino.webp
new file mode 100644
index 0000000..3618433
Binary files /dev/null and b/images/400x400/neutrino.webp differ
diff --git a/images/400x400/nkosijek.png b/images/400x400/nkosijek.png
new file mode 100644
index 0000000..f4f41eb
Binary files /dev/null and b/images/400x400/nkosijek.png differ
diff --git a/images/400x400/nkosijek.webp b/images/400x400/nkosijek.webp
new file mode 100644
index 0000000..1b1c286
Binary files /dev/null and b/images/400x400/nkosijek.webp differ
diff --git a/images/400x400/sonusart.png b/images/400x400/sonusart.png
new file mode 100644
index 0000000..5fdaa72
Binary files /dev/null and b/images/400x400/sonusart.png differ
diff --git a/images/400x400/sonusart.webp b/images/400x400/sonusart.webp
new file mode 100644
index 0000000..a159d4c
Binary files /dev/null and b/images/400x400/sonusart.webp differ
diff --git a/images/400x400/svijetvode.png b/images/400x400/svijetvode.png
new file mode 100644
index 0000000..d6df2ba
Binary files /dev/null and b/images/400x400/svijetvode.png differ
diff --git a/images/400x400/svijetvode.webp b/images/400x400/svijetvode.webp
new file mode 100644
index 0000000..e402314
Binary files /dev/null and b/images/400x400/svijetvode.webp differ
diff --git a/images/400x400/vashi.png b/images/400x400/vashi.png
new file mode 100644
index 0000000..b4521cb
Binary files /dev/null and b/images/400x400/vashi.png differ
diff --git a/images/400x400/vashi.webp b/images/400x400/vashi.webp
new file mode 100644
index 0000000..719cde3
Binary files /dev/null and b/images/400x400/vashi.webp differ
diff --git a/images/800x800/.DS_Store b/images/800x800/.DS_Store
new file mode 100644
index 0000000..5008ddf
Binary files /dev/null and b/images/800x800/.DS_Store differ
diff --git a/images/800x800/aaplehrerwelt.png b/images/800x800/aaplehrerwelt.png
new file mode 100644
index 0000000..ba725e2
Binary files /dev/null and b/images/800x800/aaplehrerwelt.png differ
diff --git a/images/800x800/aaplehrerwelt.webp b/images/800x800/aaplehrerwelt.webp
new file mode 100644
index 0000000..b9b3bfd
Binary files /dev/null and b/images/800x800/aaplehrerwelt.webp differ
diff --git a/images/800x800/aapsoftwaredevelopment.png b/images/800x800/aapsoftwaredevelopment.png
new file mode 100644
index 0000000..65a461c
Binary files /dev/null and b/images/800x800/aapsoftwaredevelopment.png differ
diff --git a/images/800x800/aapsoftwaredevelopment.webp b/images/800x800/aapsoftwaredevelopment.webp
new file mode 100644
index 0000000..6ce899b
Binary files /dev/null and b/images/800x800/aapsoftwaredevelopment.webp differ
diff --git a/images/800x800/bebenova.png b/images/800x800/bebenova.png
new file mode 100644
index 0000000..37f4885
Binary files /dev/null and b/images/800x800/bebenova.png differ
diff --git a/images/800x800/bebenova.webp b/images/800x800/bebenova.webp
new file mode 100644
index 0000000..d69fa13
Binary files /dev/null and b/images/800x800/bebenova.webp differ
diff --git a/images/800x800/elk.png b/images/800x800/elk.png
new file mode 100644
index 0000000..b49c97f
Binary files /dev/null and b/images/800x800/elk.png differ
diff --git a/images/800x800/elk.webp b/images/800x800/elk.webp
new file mode 100644
index 0000000..91e4001
Binary files /dev/null and b/images/800x800/elk.webp differ
diff --git a/images/800x800/fenix.png b/images/800x800/fenix.png
new file mode 100644
index 0000000..cc14e90
Binary files /dev/null and b/images/800x800/fenix.png differ
diff --git a/images/800x800/fenix.webp b/images/800x800/fenix.webp
new file mode 100644
index 0000000..5d51cbd
Binary files /dev/null and b/images/800x800/fenix.webp differ
diff --git a/images/800x800/ferivi.png b/images/800x800/ferivi.png
new file mode 100644
index 0000000..77ae1e8
Binary files /dev/null and b/images/800x800/ferivi.png differ
diff --git a/images/800x800/ferivi.webp b/images/800x800/ferivi.webp
new file mode 100644
index 0000000..55dfcd4
Binary files /dev/null and b/images/800x800/ferivi.webp differ
diff --git a/images/800x800/fraktura.png b/images/800x800/fraktura.png
new file mode 100644
index 0000000..d5f0317
Binary files /dev/null and b/images/800x800/fraktura.png differ
diff --git a/images/800x800/fraktura.webp b/images/800x800/fraktura.webp
new file mode 100644
index 0000000..a71b657
Binary files /dev/null and b/images/800x800/fraktura.webp differ
diff --git a/images/800x800/jj.png b/images/800x800/jj.png
new file mode 100644
index 0000000..6ee17ce
Binary files /dev/null and b/images/800x800/jj.png differ
diff --git a/images/800x800/jj.webp b/images/800x800/jj.webp
new file mode 100644
index 0000000..4adbcd8
Binary files /dev/null and b/images/800x800/jj.webp differ
diff --git a/images/800x800/kroschke.png b/images/800x800/kroschke.png
new file mode 100644
index 0000000..50e2fd0
Binary files /dev/null and b/images/800x800/kroschke.png differ
diff --git a/images/800x800/kroschke.webp b/images/800x800/kroschke.webp
new file mode 100644
index 0000000..1201785
Binary files /dev/null and b/images/800x800/kroschke.webp differ
diff --git a/images/800x800/lehrerwelt.png b/images/800x800/lehrerwelt.png
new file mode 100644
index 0000000..923ff9a
Binary files /dev/null and b/images/800x800/lehrerwelt.png differ
diff --git a/images/800x800/lehrerwelt.webp b/images/800x800/lehrerwelt.webp
new file mode 100644
index 0000000..c3fd30c
Binary files /dev/null and b/images/800x800/lehrerwelt.webp differ
diff --git a/images/800x800/neutrino.png b/images/800x800/neutrino.png
new file mode 100644
index 0000000..5882b0d
Binary files /dev/null and b/images/800x800/neutrino.png differ
diff --git a/images/800x800/neutrino.webp b/images/800x800/neutrino.webp
new file mode 100644
index 0000000..9ba7c7b
Binary files /dev/null and b/images/800x800/neutrino.webp differ
diff --git a/images/800x800/nkosijek.png b/images/800x800/nkosijek.png
new file mode 100644
index 0000000..5698aef
Binary files /dev/null and b/images/800x800/nkosijek.png differ
diff --git a/images/800x800/nkosijek.webp b/images/800x800/nkosijek.webp
new file mode 100644
index 0000000..19057a8
Binary files /dev/null and b/images/800x800/nkosijek.webp differ
diff --git a/images/800x800/sonusart.png b/images/800x800/sonusart.png
new file mode 100644
index 0000000..aff91f4
Binary files /dev/null and b/images/800x800/sonusart.png differ
diff --git a/images/800x800/sonusart.webp b/images/800x800/sonusart.webp
new file mode 100644
index 0000000..c65f1c2
Binary files /dev/null and b/images/800x800/sonusart.webp differ
diff --git a/images/800x800/svijetvode.png b/images/800x800/svijetvode.png
new file mode 100644
index 0000000..c6b9a12
Binary files /dev/null and b/images/800x800/svijetvode.png differ
diff --git a/images/800x800/svijetvode.webp b/images/800x800/svijetvode.webp
new file mode 100644
index 0000000..05f1cac
Binary files /dev/null and b/images/800x800/svijetvode.webp differ
diff --git a/images/800x800/vashi.png b/images/800x800/vashi.png
new file mode 100644
index 0000000..4308b73
Binary files /dev/null and b/images/800x800/vashi.png differ
diff --git a/images/800x800/vashi.webp b/images/800x800/vashi.webp
new file mode 100644
index 0000000..f242776
Binary files /dev/null and b/images/800x800/vashi.webp differ
diff --git a/images/about-image.png b/images/about-image.png
new file mode 100644
index 0000000..3406f69
Binary files /dev/null and b/images/about-image.png differ
diff --git a/images/about-image.webp b/images/about-image.webp
new file mode 100644
index 0000000..fe4ea7f
Binary files /dev/null and b/images/about-image.webp differ
diff --git a/images/alen.png b/images/alen.png
new file mode 100644
index 0000000..cf106e3
Binary files /dev/null and b/images/alen.png differ
diff --git a/images/alen2.png b/images/alen2.png
new file mode 100644
index 0000000..2429725
Binary files /dev/null and b/images/alen2.png differ
diff --git a/images/cv-logo.png b/images/cv-logo.png
new file mode 100644
index 0000000..a993e09
Binary files /dev/null and b/images/cv-logo.png differ
diff --git a/images/cv-logo.webp b/images/cv-logo.webp
new file mode 100644
index 0000000..90f145d
Binary files /dev/null and b/images/cv-logo.webp differ
diff --git a/images/cv.png b/images/cv.png
new file mode 100644
index 0000000..935a118
Binary files /dev/null and b/images/cv.png differ
diff --git a/images/cv.webp b/images/cv.webp
new file mode 100644
index 0000000..4470bde
Binary files /dev/null and b/images/cv.webp differ
diff --git a/images/intro-image.png b/images/intro-image.png
new file mode 100644
index 0000000..bf9b41a
Binary files /dev/null and b/images/intro-image.png differ
diff --git a/images/intro-image.webp b/images/intro-image.webp
new file mode 100644
index 0000000..69dbae8
Binary files /dev/null and b/images/intro-image.webp differ
diff --git a/images/skills/.DS_Store b/images/skills/.DS_Store
new file mode 100644
index 0000000..5008ddf
Binary files /dev/null and b/images/skills/.DS_Store differ
diff --git a/images/skills/css.png b/images/skills/css.png
new file mode 100644
index 0000000..02bfdae
Binary files /dev/null and b/images/skills/css.png differ
diff --git a/images/skills/css.webp b/images/skills/css.webp
new file mode 100644
index 0000000..85975b7
Binary files /dev/null and b/images/skills/css.webp differ
diff --git a/images/skills/git.png b/images/skills/git.png
new file mode 100644
index 0000000..69a5690
Binary files /dev/null and b/images/skills/git.png differ
diff --git a/images/skills/git.webp b/images/skills/git.webp
new file mode 100644
index 0000000..f5598d6
Binary files /dev/null and b/images/skills/git.webp differ
diff --git a/images/skills/html.png b/images/skills/html.png
new file mode 100644
index 0000000..dd57ca1
Binary files /dev/null and b/images/skills/html.png differ
diff --git a/images/skills/html.webp b/images/skills/html.webp
new file mode 100644
index 0000000..cae27bb
Binary files /dev/null and b/images/skills/html.webp differ
diff --git a/images/skills/js.png b/images/skills/js.png
new file mode 100644
index 0000000..ee12fa9
Binary files /dev/null and b/images/skills/js.png differ
diff --git a/images/skills/js.webp b/images/skills/js.webp
new file mode 100644
index 0000000..cfbeee0
Binary files /dev/null and b/images/skills/js.webp differ
diff --git a/images/skills/lamp.png b/images/skills/lamp.png
new file mode 100644
index 0000000..0afb2d3
Binary files /dev/null and b/images/skills/lamp.png differ
diff --git a/images/skills/lamp.webp b/images/skills/lamp.webp
new file mode 100644
index 0000000..3438022
Binary files /dev/null and b/images/skills/lamp.webp differ
diff --git a/images/skills/magento.png b/images/skills/magento.png
new file mode 100644
index 0000000..35b54bb
Binary files /dev/null and b/images/skills/magento.png differ
diff --git a/images/skills/magento.webp b/images/skills/magento.webp
new file mode 100644
index 0000000..4c0969f
Binary files /dev/null and b/images/skills/magento.webp differ
diff --git a/images/skills/sass-less.png b/images/skills/sass-less.png
new file mode 100644
index 0000000..f6742ac
Binary files /dev/null and b/images/skills/sass-less.png differ
diff --git a/images/skills/sass-less.webp b/images/skills/sass-less.webp
new file mode 100644
index 0000000..25ed26d
Binary files /dev/null and b/images/skills/sass-less.webp differ
diff --git a/images/skills/wordpress.png b/images/skills/wordpress.png
new file mode 100644
index 0000000..3aecbfa
Binary files /dev/null and b/images/skills/wordpress.png differ
diff --git a/images/skills/wordpress.webp b/images/skills/wordpress.webp
new file mode 100644
index 0000000..65e623a
Binary files /dev/null and b/images/skills/wordpress.webp differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..39a0014
--- /dev/null
+++ b/index.html
@@ -0,0 +1,809 @@
+
+
+
+
+
+
+
+
+
+
+ Alen Kolarić CV
+
+
+
+
+
+
+
+
+
+
+
Alen Kolarić CV
+
+
+
+
+
+
+
+
+
+
+
+
+
HELLO, I'M ALEN KOLARIĆ
+ FRONTEND DEVELOPER
+
+
+
+
+
+
+
+
+
+
+
+
+
ABOUT
+
+
+
+
+
With 7+ years of experience in front-end development, I have a solid background in delivering e-commerce solutions. My expertise in Magento, as well as other platforms, has allowed me to develop a strong skill set in this field. I am also adept at working remotely and stay current on industry trends and technical best practices.
+
My ability to adapt to diverse client needs, troubleshoot and problem-solve, work independently and as part of a team, has resulted in a track record of successful projects. I am confident in my ability to deliver high-quality work and meet the needs of any client.
+
+
+
+
+
Throughout my professional career, I have primarily focused on working with Magento, but I am also well-versed in WordPress. I have developed a solid understanding of both platforms and have experience in creating and maintaining various e-commerce websites and web-based projects on both. I am a big fan of both Magento and WordPress, and I am able to utilize my skills and expertise in both to deliver high-performing, visually appealing and user-friendly websites.
+
My interest in web development began in the early 2000s, when I was fascinated by the possibilities the internet offered and wanted to be a part of it. I started by inspecting the source code of web pages and learning as much as I could. As I progressed, I had the opportunity to experiment with a variety of different content management systems and applications, which allowed me to deepen my knowledge of HTML, CSS, and server and hosting-related technologies.
+
Throughout my early years, I owned and operated multiple forums and portals, primarily focused on gaming. Additionally, I built and maintained several small company websites, which served as an ideal training and improvement opportunity for my front-end skills. I am proficient in both Linux and MacOS operating systems and have experience in configuring and hosting web pages on cloud VPNs, including the one that this website is hosted on.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
EXPERIENCE
+
Overview of my professional work experience, including a detailed list of my official employments and the responsibilities overview
+
+
+
+
+
+
+
AAP Softwaredevelopment
+
Frontend developer REMOTE
+
+
+
+ As a Magento front-end developer at AAP Softwaredevelopment, company based in Zadar, I had the opportunity to work with a team of experienced developers and contribute to the company's growth...
+ AAP Softwaredevelopment is a subsidiary of Lehrerwelt, which is under the wing of the Klett corporation, a well-established education company based in Germany. My primary responsibilities included working on the company's flagship e-commerce store that served a large customer base in the DACH region, as well as working on Magento 2 migrations and corporate WordPress websites. The position was fully remote with occasional travels to Zadar, where the company is based, and Hamburg for team meetings and working sessions. The culture at AAP Softwaredevelopment was highly corporate. This experience allowed me to gain a deep understanding of the intricacies of working on large-scale Magento projects and to develop a deep understanding of technical best practices and trends in the industry.
+
+
+
+
+
+
+
VASHI
+
Frontend developer REMOTE
+
+
+
+ I had the opportunity to work as a Magento front-end developer at Vashi, a luxury jewelry e-commerce company based in the United Kingdom, in a fully remote capacity...
+ The team was composed of members from around the world, which provided a unique and diverse perspective. I was brought on as a contractor to work on the main web shop which was running on Magento 1. Additionally, I did research and preparatory work for the company's upcoming migration to Magento 2. The team at Vashi was highly professional, and I appreciated the opportunity to work with such skilled and experienced individuals. The company's unique rings configurator was a nice bonus, and I was impressed by the attention to detail that went into its development. My time at Vashi was an incredibly valuable experience. The opportunity to work on the company's e-commerce store, which sells high-end jewelry, gave me a unique insight into the world of high-end e-commerce and the specific requirements of such businesses. Additionally, the research I conducted on Magento 2 migration, further enhanced my knowledge and skills in the field. I am grateful for the opportunity to have worked with such a reputable company and for the skills and knowledge that I gained during my time there.
+
+
+
+
+
+
+
Cipher
+
Frontend developer, CEO REMOTE
+
+
+
+ With experience from working for a couple of companies under my belt, I decided to utilize the chance and start my own company, Cipher...
+ After a couple of projects however, an opportunity arose for me to join an internal development team, while still continuing to work on smaller projects with Cipher in my free time.
+
+
+
+
+
+
+
Impaddo
+
Frontend developer REMOTE
+
+
+
+ While working at Impaddo, a development agency based in Zadar, I gained valuable experience working remotely on a variety of projects and different tech stacks...
+ In partnership with a German company, my team and I had the opportunity to work with some of the largest e-commerce companies in Germany. As a Magento front-end developer, I was responsible for developing and maintaining the front-end of the websites using HTML, CSS, JavaScript, and Magento's front-end development framework.
+ In addition to my responsibilities as a Magento developer, I also had the opportunity to improve my Wordpress skills, which I had not used in some time. Using Wordpress to its full potential to create a large corporate website was a great challenge, as well as a relaxing and enjoyable experience.
+ At this position, I also had the opportunity to travel abroad for in-house consulting and work and also had the chance to attend the My Smart City conference in 2018 in Zadar.
+
+
+
+
+
+
+
Gauss Development
+
Frontend developer OSIJEK
+
+
+
+ At Gauss, a software development agency based in Osijek, I officially began my frontend journey and gained valuable experience and skills in website development...
+ The agency's relaxed and friendly atmosphere provided a great opportunity for me to learn, grow, and connect with my colleagues. I quickly demonstrated a strong ability to learn new skills and was given the opportunity to work on dozens of Magento projects, ranging from building new websites from scratch to maintaining and updating existing ones.
+ I had the opportunity to work on projects for clients from various countries such as Croatia, the Netherlands, Germany, Switzerland, and the USA. I was also responsible for traveling and attending meetings with clients to discuss, plan, and consult on projects.
+ Through my experience at Gauss, I developed a strong proficiency in both Magento 1 and Magento 2 and even had the opportunity to attend the Meet Magento conference in 2017 in Osijek.
+
+
+
+
+
+
+
+
+
+
PROJECTS
+
A list of my most relevant projects and brief summary
+
+
+
+
+
+
+
+
+
+
lehrerwelt.de
+
+
+
+ MAGENTO 2
+ E-COMMERCE
+
+
+
+
+
+
+
+
+
+
+
aap-lehrerwelt.de
+
+
+ WORDPRESS
+ CORPORATE
+
+
+
+
+
+
+
+
+
+
+
aap-softwaredevelopment.hr
+
+
+ WORDPRESS
+ CORPORATE
+
+
+
+
+
+
+
+
+
+
+
elkverlag.ch
+
+
+ MAGENTO 2
+ E-COMMERCE
+
+
+
+
+
+
+
+
+
+
+
vashi.com
+
+
+ MAGENTO 1
+ E-COMMERCE
+
+
+
+
+
+
+
+
+
+
+
kroschke.de
+
+
+ MAGENTO 2
+ E-COMMERCE
+
+
+
+
+
+
+
+
+
+
+
jebsen-jessen.de
+
+
+ WORDPRESS
+ CORPORATE
+
+
+
+
+
+
+
+
+
+
+
fraktura.hr
+
+
+
+ MAGENTO 2
+ E-COMMERCE
+
+
+
+
+
+
+
+
+
+
+
bebenova.eu
+
+
+ MAGENTO 2
+ E-COMMERCE
+
+
+
+
+
+
+
+
+
+
+
shop.nk-osijek.hr
+
+
+ MAGENTO 1
+ E-COMMERCE
+
+
+
+
+
+
+
×
+
+
+
+
+
+
+
+
+
+
+
lehrerwelt.de
+
AAP SOFTWAREDEVELOPMENT
+
As a front-end developer for the flagship Magento 2 e-commerce store of AAP Softwaredevelopment, I had the opportunity to work on a wide range of tasks and responsibilities over the course of three years. These included everything from front-end optimization and improvements, to planning and discussing new features and updates, to working on major redesigns of different parts of the store. One of my key responsibilities was finding and delivering the best solutions for the store's stakeholders, which required a deep understanding of their needs and the e-commerce landscape. Additionally, I was constantly working to improve the store's legacy code and integrate third-party features, as well as regularly troubleshoot bugs, implement new features, and perform testing and deployment tasks. Overall, my time working on this flagship store allowed me to gain a wealth of experience in Magento 2 and e-commerce development, and helped me to become an expert in delivering high-quality solutions for clients in the industry.
+
+
+ HTML
+ CSS/Less
+ JS/jQuery
+ XML
+ PHTML
+ Grunt
+ Git
+ Jira
+
+
+
+
+
+
+
+
+
×
+
+
+
+
+
+
+
+
+
+
+
aap-lehrerwelt.de
+
AAP SOFTWAREDEVELOPMENT
+
As a front-end developer at AAP Softwaredevelopment, I had the opportunity to work on the development of the parent company's corporate website, built using WordPress. This project was a great opportunity for me to utilize my expertise in WordPress development and implement new and modern design elements. I was responsible for the entire project, from the initial design phase to the final deployment. Working with the popular _s or underscores theme, I was able to create a sleek and modern website that met the needs of the stakeholders. I also had the opportunity to work with the latest CSS features and the Gutenberg editor, creating custom blocks and implementing new features as per requirements. Overall, this project was a great experience that allowed me to further develop my skills in WordPress development and improve my abilities as a front-end developer.
+
+
+ HTML
+ CSS/Scss
+ JS/jQuery
+ Git
+ Jira
+
+
+
+
+
+
+
+
+
×
+
+
+
+
+
+
+
+
+
+
+
aap-softwaredevelopment.hr
+
AAP SOFTWAREDEVELOPMENT
+
As the lead developer for the AAP Softwaredevelopment corporate website, I was responsible for the entire project from start to finish. The website was built using WordPress, leveraging the Sage starter theme for a custom development flow. Utilizing the Blade template engine provided a familiar and efficient development experience. The website featured a modern design and incorporated various new technologies, such as custom blocks, to enhance the user experience. I also played a key role in updating and implementing new stakeholder requirements for the site. This project provided me with a valuable opportunity to expand my skills in WordPress development and work with a different technology stack.
+
+
+ HTML
+ CSS/Scss
+ JS/jQuery
+ Blade
+ Git
+ Jira
+
+
+
+
+
+
+
+
+
×
+
+
+
+
+
+
+
+
+
+
+
elkverlag.ch
+
AAP SOFTWAREDEVELOPMENT
+
The Elk Verlag project was a challenging and rewarding experience for me as a Magento front-end developer at AAP Softwaredevelopment. I was heavily involved in the project from the design phase all the way through to deployment and ongoing maintenance. My responsibilities included building the Magento theme, implementing the design, and ensuring adherence to Magento standards and best practices. Collaborating with the backend developer, we were able to bring the entire project to fruition and deliver a successful migration to Magento 2. I also had the opportunity to handle any stakeholder requests and make any necessary updates to ensure the project's success. This project gave me valuable experience in working with Magento 2, as well as perfecting my skills in theme development and project management.
+
+
+ HTML
+ CSS/Less
+ JS/jQuery
+ Xml
+ PHTML
+ Grunt
+ Git
+ Jira
+
+
+
+
+
+
+
+
+
×
+
+
+
+
+
+
+
+
+
+
+
vashi.com
+
VASHI - CIPHER
+
At Vashi, I had the opportunity to work on their e-commerce platform which was built on Magento 1 at the time. My responsibilities included preparatory research for the upcoming migration to Magento 2, as well as regular maintenance and enhancements of the existing web. The robust system provided a unique insight into the capabilities of Magento and was a valuable learning opportunity for me. One of the key features was the unique ring configurator, which allowed customers to fully customize their ring purchase. I was able to gain a great deal of knowledge and experience in a relatively short period of time, thanks to the challenging and diverse tasks I was given. Additionally, Vashi had a well-established development process in place which made it easy for me to work with the team and deliver on tasks efficiently.
+
+
+ HTML
+ CSS
+ JS
+ Xml
+ PHTML
+ Git
+
+
+
+
+
+
+
+
+
×
+
+
+
+
+
+
+
+
+
+
+
kroschke.de
+
IMPADDO
+
As a developer on the Kroschke e-commerce project, I had the opportunity to work on their Magento 2 webshop that specializes in online vehicle registration. My responsibilities included bugfixes and implementing new features, as well as working with a team of developers to improve and optimize the webshop. One of the key segments I worked on was the company's license plate configurator, which required a great deal of attention to detail and technical expertise. Additionally, I was able to collaborate with the team to ensure that the webshop was user-friendly and provided a seamless experience for customers. Overall, it was a challenging and rewarding project that allowed me to further develop my skills in Magento 2 development and e-commerce optimization.
+
+
+ HTML
+ CSS/Less
+ JS/jQuery
+ Xml
+ PHTML
+ Grunt
+ Git
+ Jira
+
+
+
+
+
+
+
+
+
×
+
+
+
+
+
+
+
+
+
+
+
jebsen-jessen.de
+
IMPADDO
+
As a frontend developer on the Jebsen & Jessen project, I had the opportunity to collaborate with an experienced backend developer to successfully plan, develop, and deploy a corporate website of the highest quality. Built on WordPress using the Sage starter theme, the development workflow was efficient and able to meet all client needs and specifications. The website was robust, featuring a variety of third-party features and a well-designed user interface. Utilizing fullpage.js for a seamless user experience, as well as incorporating animations, great attention to detail was paid to ensure the best possible outcome for the client. It was a challenging and rewarding experience working on this project, and I was able to further develop my skills in WordPress development and user interface design.
+
+
+ HTML
+ CSS/Scss
+ JS/jQuery
+ Blade
+ Git
+ Jira
+
+
+
+
+
+
+
+
+
×
+
+
+
+
+
+
+
+
+
+
+
fraktura.hr
+
GAUSS DEVELOPMENT
+
As a front-end developer on the Fraktura e-commerce project, I had the opportunity to work on a ground-up build of their Magento 2 webshop. Collaborating with an experienced backend developer, we were able to successfully plan, develop and deploy the webshop to meet all of the client's needs and specifications. My involvement from the design phase allowed for a seamless development process and made it an enjoyable project to work on. With custom features and client requirements, this project provided an opportunity for me to further improve my Magento 2 skills and gain valuable experience in client relations, communication, and project workflow. The project also allowed me to gain valuable experience in utilizing custom features and implementing client requirements to create a unique and tailored e-commerce experience.
+
+
+ HTML
+ CSS/Less
+ JS/jQuery
+ Xml
+ PHTML
+ Grunt
+ Git
+ ActiveCollab
+
+
+
+
+
+
+
+
+
×
+
+
+
+
+
+
+
+
+
+
+
bebenova.eu
+
GAUSS DEVELOPMENT
+
As a front-end developer on the Bebenova e-commerce project, I had the opportunity to work on developing a theme and implementing the design for their online platform specializing in baby equipment. Despite not being an overly complex project, it provided a great opportunity for me to improve my skills in Magento 2 development. The clever and simple, yet detailed design of the project allowed me to focus on improving my project organization and overall code quality. In addition to developing the theme, my responsibilities also included implementing new features and addressing any general bugfixes to ensure a smooth user experience for customers.
+
+
+ HTML
+ CSS/Less
+ JS/jQuery
+ Xml
+ PHTML
+ Grunt
+ Git
+ ActiveCollab
+
+
+
+
+
+
+
+
+
×
+
+
+
+
+
+
+
+
+
+
+
shop.nk-osijek.hr
+
GAUSS DEVELOPMENT
+
As a developer on the NK Osijek e-commerce project, I had the opportunity to work on a Magento 1 webshop for a local football club. The design of the webshop closely followed the club's rebranding style, which presented a challenging and exciting opportunity for my first official agency project. My responsibilities included developing the theme, implementing the design with a high level of attention to detail and pixel-perfection, as well as integrating various third-party features to enhance the functionality of the webshop. Despite its relatively simple nature, this project provided me with valuable experience and insight into the Magento 1 platform and its development workflow. I was able to successfully deliver the project on time and to the satisfaction of all stakeholders involved. Additionally, this project allowed me to further develop my skills in design implementation, theme development, and integration of third-party features, which has been a valuable asset in my work on other projects.
+
+
+ HTML
+ CSS/Less
+ JS/jQuery
+ Xml
+ PHTML
+ Grunt
+ Git
+ ActiveCollab
+
+
+
+
+
+
+
+
+
×
+
+
+
+
+
+
+
+
+
+
+
other
+
other
+
As a developer on the NK Osijek e-commerce project, I had the opportunity to work on a Magento 1 webshop for a local football club. The design of the webshop closely followed the club's rebranding style, which presented a challenging and exciting opportunity for my first official agency project. My responsibilities included developing the theme, implementing the design with a high level of attention to detail and pixel-perfection, as well as integrating various third-party features to enhance the functionality of the webshop. Despite its relatively simple nature, this project provided me with valuable experience and insight into the Magento 1 platform and its development workflow. I was able to successfully deliver the project on time and to the satisfaction of all stakeholders involved. Additionally, this project allowed me to further develop my skills in design implementation, theme development, and integration of third-party features, which has been a valuable asset in my work on other projects.
+
+
+ HTML
+ CSS/Less
+ JS/jQuery
+ Xml
+ PHTML
+ Grunt
+ Git
+ ActiveCollab
+
+
+
+
+
+
+
+
+
+
+
+
+
+
SKILLS
+
+
+
+
+
+
+
+
+
+
HTML
+
+
+
+
+
+
+
CSS
+
+
+
+
+
+
+
Sass/Less
+
+
+
+
+
+
+
JavaScript
+
+
+
+
+
+
+
Magento
+
+
+
+
+
+
+
WordPress
+
+
+
+
+
+
+
Git
+
+
+
+
+
+
+
Linux Apache Mysql Php
+
+
+
+
+
In terms of non-technical skills, I am an effective communicator and collaborator, able to work well with both technical and non-technical stakeholders. I am well-versed in project management, able to plan and execute projects efficiently and effectively. I am also a problem solver, able to think critically and creatively to find the best solutions to complex problems. Additionally, I have experience with client relations, able to understand and meet the needs of clients, and have a great attention to detail and quality in my work.
+
+
+
+
By utilizing both skill sets on a daily basis, I am able to effectively manage my responsibilities:
+
+ Developing and maintaining the front-end of the website using HTML, CSS, JavaScript (and Magento's front-end development framework).
+ Creating responsive design and ensuring that the website looks and functions correctly on different devices and screen sizes.
+ Building custom Magento modules and integrating third-party extensions to enhance the functionality of the website.
+ Collaborating with the back-end developers and designers to ensure that the website meets the project's requirements and goals.
+ Optimizing the website's performance and page speed.
+ Troubleshoot and fix any front-end related issues.
+ Ensuring cross-browser compatibility and that the website looks and functions as expected on all modern browsers.
+ Writing clean, organized and maintainable code.
+ Creating and maintaining documentation for the front-end development process.
+ Staying up-to-date with the latest front-end development best practices and technologies.
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/js/main.js b/js/main.js
new file mode 100644
index 0000000..0ccd5fb
--- /dev/null
+++ b/js/main.js
@@ -0,0 +1,138 @@
+"use strict";
+function setActiveLink() {
+ const sections = document.querySelectorAll("section");
+ const navLinks = document.querySelectorAll("nav .nav-link");
+ const observer = new IntersectionObserver((entries) => {
+ entries.forEach((entry) => {
+ if (entry.intersectionRatio > 0.5) {
+ const sectionId = entry.target.getAttribute("id");
+ const navLink = document.querySelector(`nav a[href="#${sectionId}"]`);
+ navLinks.forEach((link) => link.classList.remove("active"));
+ navLink.classList.add("active");
+ }
+ });
+ });
+ sections.forEach((section) => observer.observe(section));
+
+ // add event listener to each link that updates the active class when clicked
+ navLinks.forEach((link) => {
+ link.addEventListener("click", (event) => {
+ event.preventDefault();
+ const clickedLink = event.target;
+ const sectionId = clickedLink.getAttribute("href").slice(1);
+ const section = document.getElementById(sectionId);
+ navLinks.forEach((link) => link.classList.remove("active"));
+ clickedLink.classList.add("active");
+ section.scrollIntoView({ behavior: 'smooth' });
+ });
+ });
+
+ // add event listener for scroll events on the main container
+ const mainContainer = document.querySelector("main");
+ mainContainer.addEventListener("scroll", function() {
+ sections.forEach(section => {
+ const rect = section.getBoundingClientRect();
+ const isVisible = (rect.top <= window.innerHeight/2) && (rect.bottom >= window.innerHeight/2);
+ if(isVisible){
+ const sectionId = section.getAttribute("id");
+ const navLink = document.querySelector(`nav a[href="#${sectionId}"]`);
+ navLinks.forEach((link) => link.classList.remove("active"));
+ navLink.classList.add("active");
+ const activeNavLink = document.querySelector("nav a.active");
+ const activeSection = document.querySelector(`section${activeNavLink.getAttribute("href")}`);
+ const animateElements = activeSection.querySelectorAll('.fade-in-left, .fade-in-right, .fade-in-fwd, .swing-in-top-fwd');
+ const allSections = document.querySelectorAll('section');
+ allSections.forEach(section => {
+ if(section !== activeSection) {
+ const animateElements = section.querySelectorAll('.fade-in-left, .fade-in-right, .fade-in-fwd, .swing-in-top-fwd');
+ animateElements.forEach(element => {
+ element.classList.remove('animate');
+ element.classList.add('fade-out');
+ setTimeout(function() {
+
+ }, 200);
+
+ })
+ } else {
+ animateElements.forEach(element => {
+ element.classList.remove('fade-out');
+ element.classList.add('animate');
+ });
+ }
+ });
+ }
+ });
+ });
+}
+
+
+
+const openModalButtons = document.querySelectorAll('.project-more');
+const closeModalButtons = document.querySelectorAll('.close-modal');
+const modals = document.querySelectorAll('.project-modal');
+const prevArrows = document.querySelectorAll('.project-modal__arrow.prev');
+const nextArrows = document.querySelectorAll('.project-modal__arrow.next');
+
+openModalButtons.forEach(button => {
+ button.addEventListener('click', e => {
+ const modalId = e.target.dataset.modalId;
+ document.getElementById(modalId).classList.add('open');
+ });
+});
+
+closeModalButtons.forEach(button => {
+ button.addEventListener('click', e => {
+ e.target.parentElement.parentElement.classList.remove('open');
+ });
+});
+
+modals.forEach(modal => {
+ modal.addEventListener('click', e => {
+ if (e.target === modal) modal.classList.remove('open');
+ });
+});
+
+prevArrows.forEach(arrow => {
+ arrow.addEventListener('click', e => {
+ const currentModal = e.target.parentElement.parentElement;
+ const prevModal = currentModal.previousElementSibling;
+ if (prevModal) {
+ currentModal.classList.remove('open');
+ prevModal.classList.add('open');
+ }
+ });
+});
+
+nextArrows.forEach(arrow => {
+ arrow.addEventListener('click', e => {
+ const currentModal = e.target.parentElement.parentElement;
+ const nextModal = currentModal.nextElementSibling;
+ if (nextModal) {
+ currentModal.classList.remove('open');
+ nextModal.classList.add('open');
+ }
+ });
+});
+
+// Mobile navigation toggle
+const aside = document.querySelector('aside');
+const mobileNav = document.querySelector('.mobile-nav');
+
+const toggleAside = () => {
+ if (aside.classList.contains('animate')) {
+ aside.classList.remove('slide-out-left');
+ aside.classList.add('slide-in-left');
+ mobileNav.classList.add('open');
+ aside.classList.remove('animate');
+ } else {
+ aside.classList.remove('slide-in-left');
+ aside.classList.add('slide-out-left');
+ mobileNav.classList.remove('open');
+ aside.classList.add('animate');
+ }
+};
+mobileNav.addEventListener('click', toggleAside);
+
+document.addEventListener("DOMContentLoaded", function() {
+ setActiveLink();
+});
diff --git a/js/smoothscroll-polyfill.min.js b/js/smoothscroll-polyfill.min.js
new file mode 100644
index 0000000..592aff2
--- /dev/null
+++ b/js/smoothscroll-polyfill.min.js
@@ -0,0 +1 @@
+!function(e,t){if("function"==typeof define&&define.amd)define("SmoothscrollAnchorPolyfill",["exports"],t);else if("undefined"!=typeof exports)t(exports);else{var o={exports:{}};t(o.exports),e.SmoothscrollAnchorPolyfill=o.exports}}("undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:this,(function(e){Object.defineProperty(e,"__esModule",{value:!0}),e.default=void 0,e.destroy=m,e.polyfill=p;var t,o="undefined"!=typeof window,n=o&&window,r=o&&document,l=o&&r.documentElement,i=o&&r.createElement("a"),a=function(){return o&&"scrollBehavior"in i},s=function e(t){return function(e){return/^a$/i.test(e.tagName)}(t)&&function(e){if(!/#/.test(e.href))return!1;var t=e.pathname;return"/"!==t[0]&&(t="/"+t),e.hostname===location.hostname&&t===location.pathname&&(!e.search||e.search===location.search)}(t)?t:t.parentElement?e(t.parentElement):null},c=function(e){if("string"!=typeof e)return null;try{e=decodeURIComponent(e)}catch(e){}var t=e?r.getElementById(e.slice(1)):r.body;return"#top"!==e||t||(t=r.body),t},u=function(e){var t={preventScroll:!0};if(e.focus(t),r.activeElement!==e){var o=e.getAttribute("tabindex");if(e.setAttribute("tabindex","-1"),"none"===getComputedStyle(e).outlineStyle){var n=e.style.outlineStyle;e.style.outlineStyle="none",e.addEventListener("blur",(function t(){e.style.outlineStyle=n||"",null!=o?e.setAttribute("tabindex",o):e.removeAttribute("tabindex"),e.removeEventListener("blur",t)}))}e.focus(t)}},f=!1;if(o)try{var d=Object.defineProperty({},"preventScroll",{get:function(){f=!0}});i.focus(d)}catch(e){}var h=function(e){f||clearTimeout(t),e===r.body?n.scroll({top:0,left:0,behavior:"smooth"}):e.scrollIntoView({behavior:"smooth",block:"start"}),f?u(e):t=setTimeout(u.bind(null,e),450)},v=function(){for(var e=/scroll-behavior:[\s]*([^;"']+)/,t=getComputedStyle(l),o=[l.style.scrollBehavior,(e.exec(l.getAttribute("style"))||[])[1],t.getPropertyValue("--scroll-behavior"),(e.exec(t.fontFamily)||[])[1]],n=0;n0&&void 0!==arguments[0]?arguments[0]:{};if(m(),o){var t=n.__forceSmoothscrollAnchorPolyfill__,l="boolean"==typeof e.force?e.force:t;if(a()&&!l)return;r.addEventListener("click",b,!1),r.addEventListener("scroll",x),n.addEventListener("hashchange",S)}return y}function m(){return o&&(r.removeEventListener("click",b,!1),r.removeEventListener("scroll",x),n.removeEventListener("hashchange",S)),y}function b(e){var t=e.metaKey||e.ctrlKey||e.shiftKey||0!==e.button;if(!e.defaultPrevented&&!t&&v()){var o=s(e.target);if(o){var n=c(o.hash);n&&(e.preventDefault(),h(n),history.pushState&&history.pushState(null,r.title,o.href))}}}e.default=y;var g=[],E=function(){return l.scrollTop||r.body.scrollTop};function S(){if(r.body&&v()){var e=c(location.hash);if(e){var t=E(),o=g[g[1]===t?0:1];n.scroll({top:o,behavior:"instant"}),h(e)}}}function x(){r.body&&(g[0]=g[1],g[1]=E())}p()}));
diff --git a/js/smoothscroll.min.js b/js/smoothscroll.min.js
new file mode 100644
index 0000000..0170c77
--- /dev/null
+++ b/js/smoothscroll.min.js
@@ -0,0 +1 @@
+!function(){"use strict";function o(){var o=window,t=document;if(!("scrollBehavior"in t.documentElement.style&&!0!==o.__forceSmoothScrollPolyfill__)){var l,e=o.HTMLElement||o.Element,r=468,i={scroll:o.scroll||o.scrollTo,scrollBy:o.scrollBy,elementScroll:e.prototype.scroll||n,scrollIntoView:e.prototype.scrollIntoView},s=o.performance&&o.performance.now?o.performance.now.bind(o.performance):Date.now,c=(l=o.navigator.userAgent,new RegExp(["MSIE ","Trident/","Edge/"].join("|")).test(l)?1:0);o.scroll=o.scrollTo=function(){void 0!==arguments[0]&&(!0!==f(arguments[0])?h.call(o,t.body,void 0!==arguments[0].left?~~arguments[0].left:o.scrollX||o.pageXOffset,void 0!==arguments[0].top?~~arguments[0].top:o.scrollY||o.pageYOffset):i.scroll.call(o,void 0!==arguments[0].left?arguments[0].left:"object"!=typeof arguments[0]?arguments[0]:o.scrollX||o.pageXOffset,void 0!==arguments[0].top?arguments[0].top:void 0!==arguments[1]?arguments[1]:o.scrollY||o.pageYOffset))},o.scrollBy=function(){void 0!==arguments[0]&&(f(arguments[0])?i.scrollBy.call(o,void 0!==arguments[0].left?arguments[0].left:"object"!=typeof arguments[0]?arguments[0]:0,void 0!==arguments[0].top?arguments[0].top:void 0!==arguments[1]?arguments[1]:0):h.call(o,t.body,~~arguments[0].left+(o.scrollX||o.pageXOffset),~~arguments[0].top+(o.scrollY||o.pageYOffset)))},e.prototype.scroll=e.prototype.scrollTo=function(){if(void 0!==arguments[0])if(!0!==f(arguments[0])){var o=arguments[0].left,t=arguments[0].top;h.call(this,this,void 0===o?this.scrollLeft:~~o,void 0===t?this.scrollTop:~~t)}else{if("number"==typeof arguments[0]&&void 0===arguments[1])throw new SyntaxError("Value could not be converted");i.elementScroll.call(this,void 0!==arguments[0].left?~~arguments[0].left:"object"!=typeof arguments[0]?~~arguments[0]:this.scrollLeft,void 0!==arguments[0].top?~~arguments[0].top:void 0!==arguments[1]?~~arguments[1]:this.scrollTop)}},e.prototype.scrollBy=function(){void 0!==arguments[0]&&(!0!==f(arguments[0])?this.scroll({left:~~arguments[0].left+this.scrollLeft,top:~~arguments[0].top+this.scrollTop,behavior:arguments[0].behavior}):i.elementScroll.call(this,void 0!==arguments[0].left?~~arguments[0].left+this.scrollLeft:~~arguments[0]+this.scrollLeft,void 0!==arguments[0].top?~~arguments[0].top+this.scrollTop:~~arguments[1]+this.scrollTop))},e.prototype.scrollIntoView=function(){if(!0!==f(arguments[0])){var l=function(o){for(;o!==t.body&&!1===(e=p(l=o,"Y")&&a(l,"Y"),r=p(l,"X")&&a(l,"X"),e||r);)o=o.parentNode||o.host;var l,e,r;return o}(this),e=l.getBoundingClientRect(),r=this.getBoundingClientRect();l!==t.body?(h.call(this,l,l.scrollLeft+r.left-e.left,l.scrollTop+r.top-e.top),"fixed"!==o.getComputedStyle(l).position&&o.scrollBy({left:e.left,top:e.top,behavior:"smooth"})):o.scrollBy({left:r.left,top:r.top,behavior:"smooth"})}else i.scrollIntoView.call(this,void 0===arguments[0]||arguments[0])}}function n(o,t){this.scrollLeft=o,this.scrollTop=t}function f(o){if(null===o||"object"!=typeof o||void 0===o.behavior||"auto"===o.behavior||"instant"===o.behavior)return!0;if("object"==typeof o&&"smooth"===o.behavior)return!1;throw new TypeError("behavior member of ScrollOptions "+o.behavior+" is not a valid value for enumeration ScrollBehavior.")}function p(o,t){return"Y"===t?o.clientHeight+c1?1:n,l=.5*(1-Math.cos(Math.PI*c)),e=t.startX+(t.x-t.startX)*l,i=t.startY+(t.y-t.startY)*l,t.method.call(t.scrollable,e,i),e===t.x&&i===t.y||o.requestAnimationFrame(d.bind(o,t))}function h(l,e,r){var c,f,p,a,h=s();l===t.body?(c=o,f=o.scrollX||o.pageXOffset,p=o.scrollY||o.pageYOffset,a=i.scroll):(c=l,f=l.scrollLeft,p=l.scrollTop,a=n),d({scrollable:c,method:a,startTime:h,startX:f,startY:p,x:e,y:r})}}"object"==typeof exports&&"undefined"!=typeof module?module.exports={polyfill:o}:o()}();
\ No newline at end of file
diff --git a/pdf/alen_kolaric_cv.pdf b/pdf/alen_kolaric_cv.pdf
new file mode 100644
index 0000000..24adadd
Binary files /dev/null and b/pdf/alen_kolaric_cv.pdf differ
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..1218db9
--- /dev/null
+++ b/style.css
@@ -0,0 +1,994 @@
+@charset "UTF-8";
+: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; } }
+
+*,
+*::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; }
+
+@font-face {
+ font-family: 'KoHo';
+ src: url("font/KoHo-Regular.woff");
+ font-weight: normal;
+ font-style: normal;
+ font-display: swap; }
+.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); } }
+.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); }
+
+aside {
+ position: fixed;
+ display: flex;
+ flex-direction: column;
+ width: 175px;
+ height: 100vh;
+ background: var(--dark-darker); }
+ @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 {
+ 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); }
+ .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); }
+
+@media screen and (max-width: 767px) {
+ .mobile-nav {
+ display: block; } }
+@media screen and (min-width: 768px) {
+ .mobile-nav {
+ 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 {
+ position: absolute;
+ top: 40px;
+ right: -75px;
+ width: 50px;
+ height: 50px;
+ cursor: pointer;
+ z-index: 1; }
+ .mobile-nav.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; }
+
+#intro .content {
+ position: relative; }
+ #intro .content .intro-content {
+ will-change: auto; }
+ @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: auto; }
+ #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%; } }
+
+#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: auto; }
+ .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; }
+
+.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%; } }
+.projects-wrapper {
+ display: grid;
+ grid-gap: var(--gap) var(--gap);
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
+ .projects-wrapper .project {
+ will-change: auto; }
+ .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; }
+
+#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=style.css.map */
diff --git a/style.css.map b/style.css.map
new file mode 100644
index 0000000..f1988bd
--- /dev/null
+++ b/style.css.map
@@ -0,0 +1,7 @@
+{
+"version": 3,
+"mappings": "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",
+"sources": ["css/variables.scss","css/reset.scss","css/typography.scss","css/animations.scss","css/layout.scss","css/sidebar.scss","css/sections/intro.scss","css/sections/about.scss","css/sections/experience.scss","css/sections/projects.scss","css/sections/skills.scss"],
+"names": [],
+"file": "style.css"
+}
diff --git a/style.scss b/style.scss
new file mode 100644
index 0000000..cc7068e
--- /dev/null
+++ b/style.scss
@@ -0,0 +1,11 @@
+@import "css/variables";
+@import "css/reset";
+@import "css/typography";
+@import "css/animations";
+@import "css/layout";
+@import "css/sidebar";
+@import "css/sections/intro";
+@import "css/sections/about";
+@import "css/sections/experience";
+@import "css/sections/projects";
+@import "css/sections/skills";
\ No newline at end of file