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 + + + + + + + + + + +
+ + + +
+
+
+
+

HELLO, I'M
ALEN KOLARIĆ

+

FRONTEND DEVELOPER

+
+
+ + + Alen + +
+
+
+
+
+
+

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.

+
+
+ + + Alen + +
+
+
+
+
+
+
+
+
+

EXPERIENCE

+

Overview of my professional work experience, including a detailed list of my official employments and the responsibilities overview

+
+
+
+
+

2020

-

2023

+
+
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. +
+
+
+
+

2019

-

2019

+
+
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. +
+
+
+
+

2019

-

*

+
+
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. +
+
+
+
+

2018

-

2019

+
+
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. +
+
+
+
+

2016

-

2018

+
+
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 + +

lehrerwelt.de

+ +
+
+ MAGENTO 2 + E-COMMERCE +
+
+
+
+
+
+ + + AAP Lehrerwelt + +

aap-lehrerwelt.de

+
+
+ WORDPRESS + CORPORATE +
+
+
+
+
+
+ + + AAP Softwaredevelopment + +

aap-softwaredevelopment.hr

+
+
+ WORDPRESS + CORPORATE +
+
+
+
+
+
+ + + Elk Verlag + +

elkverlag.ch

+
+
+ MAGENTO 2 + E-COMMERCE +
+
+
+
+
+
+ + + Vashi + +

vashi.com

+
+
+ MAGENTO 1 + E-COMMERCE +
+
+
+
+
+
+ + + Kroschke + +

kroschke.de

+
+
+ MAGENTO 2 + E-COMMERCE +
+
+
+
+
+
+ + + Jebsen & Jessen + +

jebsen-jessen.de

+
+
+ WORDPRESS + CORPORATE +
+
+
+
+
+
+ + + Fraktura + +

fraktura.hr

+ +
+
+ MAGENTO 2 + E-COMMERCE +
+
+
+
+
+
+ + + BebeNova + +

bebenova.eu

+
+
+ MAGENTO 2 + E-COMMERCE +
+
+
+
+
+
+ + + NK Osijek shop + +

shop.nk-osijek.hr

+
+
+ MAGENTO 1 + E-COMMERCE +
+
+
+
+ + + + + + + + + + + +
+
+
+
+
+
+
+

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:

+
    +
  1. Developing and maintaining the front-end of the website using HTML, CSS, JavaScript (and Magento's front-end development framework).
  2. +
  3. Creating responsive design and ensuring that the website looks and functions correctly on different devices and screen sizes.
  4. +
  5. Building custom Magento modules and integrating third-party extensions to enhance the functionality of the website.
  6. +
  7. Collaborating with the back-end developers and designers to ensure that the website meets the project's requirements and goals.
  8. +
  9. Optimizing the website's performance and page speed.
  10. +
  11. Troubleshoot and fix any front-end related issues.
  12. +
  13. Ensuring cross-browser compatibility and that the website looks and functions as expected on all modern browsers.
  14. +
  15. Writing clean, organized and maintainable code.
  16. +
  17. Creating and maintaining documentation for the front-end development process.
  18. +
  19. Staying up-to-date with the latest front-end development best practices and technologies.
  20. +
+
+
+
+
+
+
+
+
+ + + \ 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