HELLO, I'MALEN KOLARIĆ
+FRONTEND DEVELOPER
+
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": "AAAA,aAAc;EACV,OAAO,EAAE,CAAC;EACV,UAAU,EAAE,iBAAiB;EAE7B,qBAAU;IACN,iBAAiB,EAAE,2DAA8D;IACjF,SAAS,EAAE,2DAA8D;IACzE,UAAU,EAAE,iBAAiB;;AAGrC,cAAe;EACX,OAAO,EAAE,CAAC;EACV,UAAU,EAAE,iBAAiB;EAE7B,sBAAU;IACN,iBAAiB,EAAE,yDAA8D;IACjF,SAAS,EAAE,yDAA8D;IACzE,UAAU,EAAE,iBAAiB;;AAGrC,YAAa;EACT,OAAO,EAAE,CAAC;EACV,UAAU,EAAE,iBAAiB;EAE7B,oBAAU;IACN,iBAAiB,EAAE,uDAA4D;IAC/E,SAAS,EAAE,uDAA4D;IACvE,UAAU,EAAE,iBAAiB;;AAGrC,iBAAkB;EACd,OAAO,EAAE,CAAC;EACV,UAAU,EAAE,iBAAiB;EAE7B,yBAAU;IACN,iBAAiB,EAAE,kEAAmE;IACtF,SAAS,EAAE,kEAAmE;IAC9E,UAAU,EAAE,iBAAiB;;AAIrC,SAAU;EACN,iBAAiB,EAAE,gEAAoE;EACvF,SAAS,EAAE,gEAAoE;EAC/E,UAAU,EAAE,iBAAiB;;AAGjC,cAAe;EACX,iBAAiB,EAAE,4DAA+D;EAClF,SAAS,EAAE,4DAA+D;EAC1E,UAAU,EAAE,iBAAiB;;AAEjC,eAAgB;EACZ,iBAAiB,EAAE,6DAAgE;EACnF,SAAS,EAAE,6DAAgE;EAC3E,UAAU,EAAE,iBAAiB;;AAIjC,iBAAkB;EACd,uBAAuB,EAAE,IAAI;EAC7B,eAAe,EAAE,IAAI;;AAEzB,iBAAkB;EACd,uBAAuB,EAAE,IAAI;EAC7B,eAAe,EAAE,IAAI;;AAEzB,iBAAkB;EACd,uBAAuB,EAAE,IAAI;EAC7B,eAAe,EAAE,IAAI;;AAEzB,iBAAkB;EACd,uBAAuB,EAAE,IAAI;EAC7B,eAAe,EAAE,IAAI;;AAEzB,iBAAkB;EACd,uBAAuB,EAAE,IAAI;EAC7B,eAAe,EAAE,IAAI;;AAEzB,iBAAkB;EACd,uBAAuB,EAAE,IAAI;EAC7B,eAAe,EAAE,IAAI;;AAEzB,iBAAkB;EACd,uBAAuB,EAAE,IAAI;EAC7B,eAAe,EAAE,IAAI;;AAEzB,iBAAkB;EACd,uBAAuB,EAAE,IAAI;EAC7B,eAAe,EAAE,IAAI;;AAEzB,iBAAkB;EACd,uBAAuB,EAAE,IAAI;EAC7B,eAAe,EAAE,IAAI;;AAEzB,iBAAkB;EACd,uBAAuB,EAAE,EAAE;EAC3B,eAAe,EAAE,EAAE;;AAEvB,iBAAkB;EACd,uBAAuB,EAAE,IAAI;EAC7B,eAAe,EAAE,IAAI;;AAEzB,iBAAkB;EACd,uBAAuB,EAAE,IAAI;EAC7B,eAAe,EAAE,IAAI;;AAEzB,iBAAkB;EACd,uBAAuB,EAAE,IAAI;EAC7B,eAAe,EAAE,IAAI;;AAEzB,iBAAkB;EACd,uBAAuB,EAAE,IAAI;EAC7B,eAAe,EAAE,IAAI;;AAEzB,iBAAkB;EACd,uBAAuB,EAAE,IAAI;EAC7B,eAAe,EAAE,IAAI;;AAIzB,2BAWC;EAVG,EAAG;IACC,iBAAiB,EAAE,aAAa;IAChC,SAAS,EAAE,aAAa;IACxB,OAAO,EAAE,CAAC;EAEd,IAAK;IACD,iBAAiB,EAAE,iBAAiB;IACpC,SAAS,EAAE,iBAAiB;IAC5B,OAAO,EAAE,CAAC;AAGlB;;;;GAIG;AACH,+BAWC;EAVG,EAAG;IACC,iBAAiB,EAAE,iBAAiB;IACpC,SAAS,EAAE,iBAAiB;IAC5B,OAAO,EAAE,CAAC;EAEd,IAAK;IACD,iBAAiB,EAAE,aAAa;IAChC,SAAS,EAAE,aAAa;IACxB,OAAO,EAAE,CAAC;AAGlB,uBAWC;EAVG,EAAG;IACC,iBAAiB,EAAE,iBAAiB;IACpC,SAAS,EAAE,iBAAiB;IAC5B,OAAO,EAAE,CAAC;EAEd,IAAK;IACD,iBAAiB,EAAE,aAAa;IAChC,SAAS,EAAE,aAAa;IACxB,OAAO,EAAE,CAAC;AAIlB;;;;GAIG;AACH,8BAWC;EAVG,EAAG;IACC,iBAAiB,EAAE,iBAAiB;IACpC,SAAS,EAAE,iBAAiB;IAC5B,OAAO,EAAE,CAAC;EAEd,IAAK;IACD,iBAAiB,EAAE,aAAa;IAChC,SAAS,EAAE,aAAa;IACxB,OAAO,EAAE,CAAC;AAGlB,sBAWC;EAVG,EAAG;IACC,iBAAiB,EAAE,iBAAiB;IACpC,SAAS,EAAE,iBAAiB;IAC5B,OAAO,EAAE,CAAC;EAEd,IAAK;IACD,iBAAiB,EAAE,aAAa;IAChC,SAAS,EAAE,aAAa;IACxB,OAAO,EAAE,CAAC;AAIlB;;;;GAIG;AACH,gCAWC;EAVG,EAAG;IACC,iBAAiB,EAAE,gBAAgB;IACnC,SAAS,EAAE,gBAAgB;IAC3B,OAAO,EAAE,CAAC;EAEd,IAAK;IACD,iBAAiB,EAAE,aAAa;IAChC,SAAS,EAAE,aAAa;IACxB,OAAO,EAAE,CAAC;AAGlB,wBAWC;EAVG,EAAG;IACC,iBAAiB,EAAE,gBAAgB;IACnC,SAAS,EAAE,gBAAgB;IAC3B,OAAO,EAAE,CAAC;EAEd,IAAK;IACD,iBAAiB,EAAE,aAAa;IAChC,SAAS,EAAE,aAAa;IACxB,OAAO,EAAE,CAAC;AAIlB;;;;GAIG;AACH,mCAeC;EAdG,EAAG;IACC,iBAAiB,EAAE,gBAAgB;IACnC,SAAS,EAAE,gBAAgB;IAC3B,wBAAwB,EAAE,GAAG;IAC7B,gBAAgB,EAAE,GAAG;IACrB,OAAO,EAAE,CAAC;EAEd,IAAK;IACD,iBAAiB,EAAE,aAAa;IAChC,SAAS,EAAE,aAAa;IACxB,wBAAwB,EAAE,GAAG;IAC7B,gBAAgB,EAAE,GAAG;IACrB,OAAO,EAAE,CAAC;AAGlB,2BAeC;EAdG,EAAG;IACC,iBAAiB,EAAE,gBAAgB;IACnC,SAAS,EAAE,gBAAgB;IAC3B,wBAAwB,EAAE,GAAG;IAC7B,gBAAgB,EAAE,GAAG;IACrB,OAAO,EAAE,CAAC;EAEd,IAAK;IACD,iBAAiB,EAAE,aAAa;IAChC,SAAS,EAAE,aAAa;IACxB,wBAAwB,EAAE,GAAG;IAC7B,gBAAgB,EAAE,GAAG;IACrB,OAAO,EAAE,CAAC;AAMlB,gCAWC;EAVG,EAAG;IACC,iBAAiB,EAAE,kBAAkB;IACrC,SAAS,EAAE,kBAAkB;EAGjC,IAAK;IACD,iBAAiB,EAAE,aAAa;IAChC,SAAS,EAAE,aAAa;AAIhC,iCAWC;EAVG,EAAG;IACC,iBAAiB,EAAE,aAAa;IAChC,SAAS,EAAE,aAAa;EAG5B,IAAK;IACD,iBAAiB,EAAE,kBAAkB;IACrC,SAAS,EAAE,kBAAkB", +"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 @@ + + +
+ + + + + + + +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.
+2020
-
2023
2019
-
2019
2019
-
*
2018
-
2019
2016
-
2018
As a front-end developer for the flagship Magento 2 e-commerce store of AAP Softwaredevelopment, I had the opportunity to work on a wide range of tasks and responsibilities over the course of three years. These included everything from front-end optimization and improvements, to planning and discussing new features and updates, to working on major redesigns of different parts of the store. One of my key responsibilities was finding and delivering the best solutions for the store's stakeholders, which required a deep understanding of their needs and the e-commerce landscape. Additionally, I was constantly working to improve the store's legacy code and integrate third-party features, as well as regularly troubleshoot bugs, implement new features, and perform testing and deployment tasks. Overall, my time working on this flagship store allowed me to gain a wealth of experience in Magento 2 and e-commerce development, and helped me to become an expert in delivering high-quality solutions for clients in the industry.
+As a front-end developer at AAP Softwaredevelopment, I had the opportunity to work on the development of the parent company's corporate website, built using WordPress. This project was a great opportunity for me to utilize my expertise in WordPress development and implement new and modern design elements. I was responsible for the entire project, from the initial design phase to the final deployment. Working with the popular _s or underscores theme, I was able to create a sleek and modern website that met the needs of the stakeholders. I also had the opportunity to work with the latest CSS features and the Gutenberg editor, creating custom blocks and implementing new features as per requirements. Overall, this project was a great experience that allowed me to further develop my skills in WordPress development and improve my abilities as a front-end developer.
+As the lead developer for the AAP Softwaredevelopment corporate website, I was responsible for the entire project from start to finish. The website was built using WordPress, leveraging the Sage starter theme for a custom development flow. Utilizing the Blade template engine provided a familiar and efficient development experience. The website featured a modern design and incorporated various new technologies, such as custom blocks, to enhance the user experience. I also played a key role in updating and implementing new stakeholder requirements for the site. This project provided me with a valuable opportunity to expand my skills in WordPress development and work with a different technology stack.
+The Elk Verlag project was a challenging and rewarding experience for me as a Magento front-end developer at AAP Softwaredevelopment. I was heavily involved in the project from the design phase all the way through to deployment and ongoing maintenance. My responsibilities included building the Magento theme, implementing the design, and ensuring adherence to Magento standards and best practices. Collaborating with the backend developer, we were able to bring the entire project to fruition and deliver a successful migration to Magento 2. I also had the opportunity to handle any stakeholder requests and make any necessary updates to ensure the project's success. This project gave me valuable experience in working with Magento 2, as well as perfecting my skills in theme development and project management.
+At Vashi, I had the opportunity to work on their e-commerce platform which was built on Magento 1 at the time. My responsibilities included preparatory research for the upcoming migration to Magento 2, as well as regular maintenance and enhancements of the existing web. The robust system provided a unique insight into the capabilities of Magento and was a valuable learning opportunity for me. One of the key features was the unique ring configurator, which allowed customers to fully customize their ring purchase. I was able to gain a great deal of knowledge and experience in a relatively short period of time, thanks to the challenging and diverse tasks I was given. Additionally, Vashi had a well-established development process in place which made it easy for me to work with the team and deliver on tasks efficiently.
+As a developer on the Kroschke e-commerce project, I had the opportunity to work on their Magento 2 webshop that specializes in online vehicle registration. My responsibilities included bugfixes and implementing new features, as well as working with a team of developers to improve and optimize the webshop. One of the key segments I worked on was the company's license plate configurator, which required a great deal of attention to detail and technical expertise. Additionally, I was able to collaborate with the team to ensure that the webshop was user-friendly and provided a seamless experience for customers. Overall, it was a challenging and rewarding project that allowed me to further develop my skills in Magento 2 development and e-commerce optimization.
+As a frontend developer on the Jebsen & Jessen project, I had the opportunity to collaborate with an experienced backend developer to successfully plan, develop, and deploy a corporate website of the highest quality. Built on WordPress using the Sage starter theme, the development workflow was efficient and able to meet all client needs and specifications. The website was robust, featuring a variety of third-party features and a well-designed user interface. Utilizing fullpage.js for a seamless user experience, as well as incorporating animations, great attention to detail was paid to ensure the best possible outcome for the client. It was a challenging and rewarding experience working on this project, and I was able to further develop my skills in WordPress development and user interface design.
+As a front-end developer on the Fraktura e-commerce project, I had the opportunity to work on a ground-up build of their Magento 2 webshop. Collaborating with an experienced backend developer, we were able to successfully plan, develop and deploy the webshop to meet all of the client's needs and specifications. My involvement from the design phase allowed for a seamless development process and made it an enjoyable project to work on. With custom features and client requirements, this project provided an opportunity for me to further improve my Magento 2 skills and gain valuable experience in client relations, communication, and project workflow. The project also allowed me to gain valuable experience in utilizing custom features and implementing client requirements to create a unique and tailored e-commerce experience.
+As a front-end developer on the Bebenova e-commerce project, I had the opportunity to work on developing a theme and implementing the design for their online platform specializing in baby equipment. Despite not being an overly complex project, it provided a great opportunity for me to improve my skills in Magento 2 development. The clever and simple, yet detailed design of the project allowed me to focus on improving my project organization and overall code quality. In addition to developing the theme, my responsibilities also included implementing new features and addressing any general bugfixes to ensure a smooth user experience for customers.
+As a developer on the NK Osijek e-commerce project, I had the opportunity to work on a Magento 1 webshop for a local football club. The design of the webshop closely followed the club's rebranding style, which presented a challenging and exciting opportunity for my first official agency project. My responsibilities included developing the theme, implementing the design with a high level of attention to detail and pixel-perfection, as well as integrating various third-party features to enhance the functionality of the webshop. Despite its relatively simple nature, this project provided me with valuable experience and insight into the Magento 1 platform and its development workflow. I was able to successfully deliver the project on time and to the satisfaction of all stakeholders involved. Additionally, this project allowed me to further develop my skills in design implementation, theme development, and integration of third-party features, which has been a valuable asset in my work on other projects.
+As a developer on the NK Osijek e-commerce project, I had the opportunity to work on a Magento 1 webshop for a local football club. The design of the webshop closely followed the club's rebranding style, which presented a challenging and exciting opportunity for my first official agency project. My responsibilities included developing the theme, implementing the design with a high level of attention to detail and pixel-perfection, as well as integrating various third-party features to enhance the functionality of the webshop. Despite its relatively simple nature, this project provided me with valuable experience and insight into the Magento 1 platform and its development workflow. I was able to successfully deliver the project on time and to the satisfaction of all stakeholders involved. Additionally, this project allowed me to further develop my skills in design implementation, theme development, and integration of third-party features, which has been a valuable asset in my work on other projects.
+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.
+ +