diff --git a/assets/css/style.css b/assets/css/style.css index cbcd3c1..3bb6d5b 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -10,95 +10,95 @@ # General --------------------------------------------------------------*/ :root { - color-scheme: dark; - --highlight: #ffb727; - --highlight-alt: #ffc85a; + color-scheme: dark; + --highlight: #ffb727; + --highlight-alt: #ffc85a; - --background: #fff; + --background: #fff; - --border: var(--background); + --border: var(--background); - --btn-bg: var(--highlight); - --btn-bg-hover: #ffc550; - --btn-bg-hover-2: #f3a200; + --btn-bg: var(--highlight); + --btn-bg-hover: #ffc550; + --btn-bg-hover-2: #f3a200; - --text-color: #444; - --text-color-alt: var(--background); - --text-color-alt-2: #eee; + --text-color: #444; + --text-color-alt: var(--background); + --text-color-alt-2: #eee; - --section-title-color: #3b434a; - --section-title-color-back: #3b434a17; + --section-title-color: #3b434a; + --section-title-color-back: #3b434a17; - --progress-text-color: #3b434a; - --progress-background: #e6e8eb; + --progress-text-color: #3b434a; + --progress-background: #e6e8eb; - --resume-time-background: #eef0f2; - --resume-border: #82909c; - --resume-btn-border: var(--highlight); - --resume-btn-hover: var(--background); + --resume-time-background: #eef0f2; + --resume-border: #82909c; + --resume-btn-border: var(--highlight); + --resume-btn-hover: var(--background); - --skill-title: #111; - --skill-icon-bg: #fff4df; + --skill-title: #111; + --skill-icon-bg: #fff4df; - --contact-title-icon-bg: #fff6e4; - --contact-title: #777; - --contact-box-shadow: rgba(214, 215, 216, 0.6); - --contact-icon: #687683; - --contact-icon-border: #dde1e4; + --contact-title-icon-bg: #fff6e4; + --contact-title: #777; + --contact-box-shadow: rgba(214, 215, 216, 0.6); + --contact-icon: #687683; + --contact-icon-border: #dde1e4; } body.dark { - --highlight: #ffbc35; - --highlight-alt: #ffc859; + --highlight: #ffbc35; + --highlight-alt: #ffc859; - --background: rgb(24, 26, 27); + --background: rgb(24, 26, 27); - --border: #303436; + --border: #303436; - --btn-bg: #b57800; - --btn-bg-hover: #f3a200; - --btn-bg-hover-2: #f3a200; + --btn-bg: #b57800; + --btn-bg-hover: #f3a200; + --btn-bg-hover-2: #f3a200; - --text-color: rgb(189, 183, 175); - --text-color-alt: #e8e6e5; - --text-color-alt-2: #e8e6e5; + --text-color: rgb(189, 183, 175); + --text-color-alt: #e8e6e5; + --text-color-alt-2: #e8e6e5; - --section-title-color: #beb8b0; - --section-title-color-back: #beb8b017; + --section-title-color: #beb8b0; + --section-title-color-back: #beb8b017; - --progress-text-color: #beb8b0; - --progress-background: #252829; + --progress-text-color: #beb8b0; + --progress-background: #252829; - --resume-time-background: #202325; - --resume-border: #50565a; - --resume-btn-border: #a76f00; - --resume-btn-hover: var(--text-color-alt); + --resume-time-background: #202325; + --resume-border: #50565a; + --resume-btn-border: #a76f00; + --resume-btn-hover: var(--text-color-alt); - --skill-title: #dddad6; - --skill-icon-bg: #462e00; + --skill-title: #dddad6; + --skill-icon-bg: #462e00; - --contact-title-icon-bg: #432d00; - --contact-title: #9d9488; - --contact-box-shadow: rgba(45, 50, 52, 0.6); - --contact-icon: #9e9589; - --contact-icon-border: #393d40; + --contact-title-icon-bg: #432d00; + --contact-title: #9d9488; + --contact-box-shadow: rgba(45, 50, 52, 0.6); + --contact-icon: #9e9589; + --contact-icon-border: #393d40; } body { - font-family: "Open Sans", sans-serif; - color: var(--text-color); - background: var(--background); - overflow-x: hidden; + font-family: "Open Sans", sans-serif; + color: var(--text-color); + background: var(--background); + overflow-x: hidden; } a { - color: var(--highlight); - text-decoration: none; + color: var(--highlight); + text-decoration: none; } a:hover { - color: var(--highlight-alt); - text-decoration: none; + color: var(--highlight-alt); + text-decoration: none; } h1, @@ -107,65 +107,68 @@ h3, h4, h5, h6 { - font-family: "Raleway", sans-serif; + font-family: "Raleway", sans-serif; } .prevent-select { - -webkit-user-select: none; /* Safari */ - -ms-user-select: none; /* IE 10 and IE 11 */ - user-select: none; /* Standard syntax */ + -webkit-user-select: none; + /* Safari */ + -ms-user-select: none; + /* IE 10 and IE 11 */ + user-select: none; + /* Standard syntax */ } /*-------------------------------------------------------------- # Back to top button --------------------------------------------------------------*/ .back-to-top { - position: fixed; - visibility: hidden; - opacity: 0; - right: 15px; - bottom: 15px; - z-index: 996; - background: var(--btn-bg); - width: 40px; - height: 40px; - border-radius: 4px; - transition: all 0.4s; + position: fixed; + visibility: hidden; + opacity: 0; + right: 15px; + bottom: 15px; + z-index: 996; + background: var(--btn-bg); + width: 40px; + height: 40px; + border-radius: 4px; + transition: all 0.4s; } .back-to-top i { - font-size: 28px; - color: var(--text-color-alt); - line-height: 0; + font-size: 28px; + color: var(--text-color-alt); + line-height: 0; } .back-to-top:hover { - background: var(--btn-bg-hover); - color: var(--text-color-alt); + background: var(--btn-bg-hover); + color: var(--text-color-alt); } .back-to-top.active { - visibility: visible; - opacity: 1; + visibility: visible; + opacity: 1; } /*-------------------------------------------------------------- # Header --------------------------------------------------------------*/ #header { - z-index: 997; - transition: all 0.5s; - height: 80px; - background: rgba(25, 28, 31, 0.8); + z-index: 997; + transition: all 0.5s; + height: 80px; + background: rgba(25, 28, 31, 0.8); } #header.header-transparent { - background: transparent; + background: transparent; } #header.header-scrolled { - height: 60px; - background: rgba(25, 28, 31, 0.8); + height: 60px; + background: rgba(25, 28, 31, 0.8); } /*-------------------------------------------------------------- @@ -175,1030 +178,1029 @@ h6 { * Desktop Navigation */ .navbar { - padding: 0; - -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; + padding: 0; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; } .navbar ul { - margin: 0; - padding: 0; - display: flex; - list-style: none; - align-items: center; + margin: 0; + padding: 0; + display: flex; + list-style: none; + align-items: center; } .navbar li { - position: relative; + position: relative; } .navbar a, .navbar a:focus, -.navbar li > i { - display: flex; - align-items: center; - justify-content: space-between; - padding: 10px 15px; - color: var(--text-color-alt); - white-space: nowrap; - transition: 0.3s; - font-size: 12px; - font-family: "Raleway", sans-serif; - text-transform: uppercase; - font-weight: 600; - letter-spacing: 1px; +.navbar li>i { + display: flex; + align-items: center; + justify-content: space-between; + padding: 10px 15px; + color: var(--text-color-alt); + white-space: nowrap; + transition: 0.3s; + font-size: 12px; + font-family: "Raleway", sans-serif; + text-transform: uppercase; + font-weight: 600; + letter-spacing: 1px; } .navbar a i, .navbar a:focus i { - font-size: 12px; - line-height: 0; - margin-left: 5px; + font-size: 12px; + line-height: 0; + margin-left: 5px; } .navbar a:hover, -.navbar li > i:hover, +.navbar li>i:hover, .navbar .active, .navbar .active:focus, -.navbar li:hover > a { - color: var(--highlight); - cursor: pointer; +.navbar li:hover>a { + color: var(--highlight); + cursor: pointer; } .navbar .dropdown ul { - display: block; - position: absolute; - left: 14px; - top: calc(100% + 30px); - margin: 0; - padding: 10px 0; - z-index: 99; - opacity: 0; - visibility: hidden; - background: var(--background); - box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25); - transition: 0.3s; - border-radius: 4px; + display: block; + position: absolute; + left: 14px; + top: calc(100% + 30px); + margin: 0; + padding: 10px 0; + z-index: 99; + opacity: 0; + visibility: hidden; + background: var(--background); + box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25); + transition: 0.3s; + border-radius: 4px; } .navbar .dropdown ul li { - min-width: 200px; + min-width: 200px; } .navbar .dropdown ul a { - padding: 10px 20px; - font-size: 14px; - text-transform: none; - font-weight: 400; - color: #3b434a; - letter-spacing: 1px; + padding: 10px 20px; + font-size: 14px; + text-transform: none; + font-weight: 400; + color: #3b434a; + letter-spacing: 1px; } .navbar .dropdown ul a i { - font-size: 12px; + font-size: 12px; } .navbar .dropdown ul a:hover, .navbar .dropdown ul .active:hover, -.navbar .dropdown ul li:hover > a { - color: var(--highlight); +.navbar .dropdown ul li:hover>a { + color: var(--highlight); } -.navbar .dropdown:hover > ul { - opacity: 1; - top: 100%; - visibility: visible; +.navbar .dropdown:hover>ul { + opacity: 1; + top: 100%; + visibility: visible; } .navbar .dropdown .dropdown ul { - top: 0; - left: calc(100% - 30px); - visibility: hidden; + top: 0; + left: calc(100% - 30px); + visibility: hidden; } -.navbar .dropdown .dropdown:hover > ul { - opacity: 1; - top: 0; - left: 100%; - visibility: visible; +.navbar .dropdown .dropdown:hover>ul { + opacity: 1; + top: 0; + left: 100%; + visibility: visible; } @media (max-width: 1366px) { - .navbar .dropdown .dropdown ul { - left: -90%; - } + .navbar .dropdown .dropdown ul { + left: -90%; + } - .navbar .dropdown .dropdown:hover > ul { - left: -100%; - } + .navbar .dropdown .dropdown:hover>ul { + left: -100%; + } } /** * Mobile Navigation */ .mobile-nav-toggle { - color: var(--background); - font-size: 28px; - cursor: pointer; - display: none; - line-height: 0; - transition: 0.5s; + color: var(--background); + font-size: 28px; + cursor: pointer; + display: none; + line-height: 0; + transition: 0.5s; } @media (max-width: 991px) { - .mobile-nav-toggle { - display: block; - } + .mobile-nav-toggle { + display: block; + } - .navbar ul { - display: none; - } + .navbar ul { + display: none; + } } .navbar-mobile { - position: fixed; - overflow: hidden; - top: 0; - right: 0; - left: 0; - bottom: 0; - background: rgba(36, 41, 46, 0.9); - transition: 0.3s; - z-index: 999; + position: fixed; + overflow: hidden; + top: 0; + right: 0; + left: 0; + bottom: 0; + background: rgba(36, 41, 46, 0.9); + transition: 0.3s; + z-index: 999; } .navbar-mobile .mobile-nav-toggle { - position: absolute; - top: 15px; - right: 15px; + position: absolute; + top: 15px; + right: 15px; } .navbar-mobile ul { - display: block; - position: absolute; - top: 55px; - right: 15px; - bottom: 15px; - left: 15px; - padding: 10px 0; - border-radius: 10px; - background-color: var(--background); - overflow-y: auto; - transition: 0.3s; + display: block; + position: absolute; + top: 55px; + right: 15px; + bottom: 15px; + left: 15px; + padding: 10px 0; + border-radius: 10px; + background-color: var(--background); + overflow-y: auto; + transition: 0.3s; } .navbar-mobile a, .navbar-mobile a:focus { - padding: 10px 20px; - font-size: 14px; - color: #3b434a; + padding: 10px 20px; + font-size: 14px; + color: #3b434a; } .navbar-mobile a:hover, .navbar-mobile .active, -.navbar-mobile li:hover > a { - color: var(--highlight); +.navbar-mobile li:hover>a { + color: var(--highlight); } .navbar-mobile .getstarted, .navbar-mobile .getstarted:focus { - margin: 15px; + margin: 15px; } .navbar-mobile .dropdown ul { - position: static; - display: none; - margin: 10px 20px; - padding: 10px 0; - z-index: 99; - opacity: 1; - visibility: visible; - background: var(--background); - box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25); + position: static; + display: none; + margin: 10px 20px; + padding: 10px 0; + z-index: 99; + opacity: 1; + visibility: visible; + background: var(--background); + box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25); } .navbar-mobile .dropdown ul li { - min-width: 200px; + min-width: 200px; } .navbar-mobile .dropdown ul a { - padding: 10px 20px; + padding: 10px 20px; } .navbar-mobile .dropdown ul a i { - font-size: 12px; + font-size: 12px; } .navbar-mobile .dropdown ul a:hover, .navbar-mobile .dropdown ul .active:hover, -.navbar-mobile .dropdown ul li:hover > a { - color: var(--highlight); +.navbar-mobile .dropdown ul li:hover>a { + color: var(--highlight); } -.navbar-mobile .dropdown > .dropdown-active { - display: block; +.navbar-mobile .dropdown>.dropdown-active { + display: block; } /*-------------------------------------------------------------- # Hero Section --------------------------------------------------------------*/ #hero { - width: 100%; - height: 100vh; - background: url("../img/hero-bg.jpg") top right; - background-size: cover; - position: relative; + width: 100%; + height: 100vh; + background: url("../img/hero-bg.jpg") top right; + background-size: cover; + position: relative; } #hero:before { - content: ""; - background: rgba(0, 0, 0, 0.65); - position: absolute; - bottom: 0; - top: 0; - left: 0; - right: 0; + content: ""; + background: rgba(0, 0, 0, 0.65); + position: absolute; + bottom: 0; + top: 0; + left: 0; + right: 0; } #hero .hero-container { - position: absolute; - bottom: 0; - top: 0; - left: 0; - right: 0; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - padding: 0 15px; + position: absolute; + bottom: 0; + top: 0; + left: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + padding: 0 15px; } #hero h1 { - margin: 0 0 10px 0; - font-size: 64px; - font-family: "Satisfy", serif; - color: var(--text-color-alt); + margin: 0 0 10px 0; + font-size: 64px; + font-family: "Satisfy", serif; + color: var(--text-color-alt); } #hero h2 { - color: var(--text-color-alt-2); - margin-bottom: 50px; - font-size: 13px; - font-weight: 500; - letter-spacing: 1px; - text-transform: uppercase; + color: var(--text-color-alt-2); + margin-bottom: 50px; + font-size: 13px; + font-weight: 500; + letter-spacing: 1px; + text-transform: uppercase; } #hero .btn-scroll { - transition: 0.4s; - color: rgba(255, 255, 255, 0.6); - animation: up-down 1s ease-in-out infinite alternate-reverse both; + transition: 0.4s; + color: rgba(255, 255, 255, 0.6); + animation: up-down 1s ease-in-out infinite alternate-reverse both; } #hero .btn-scroll i { - font-size: 48px; + font-size: 48px; } #hero .btn-scroll:hover { - color: var(--highlight); + color: var(--highlight); } @media (min-width: 1024px) { - #hero { - background-attachment: fixed; - } + #hero { + background-attachment: fixed; + } } @media (max-width: 575px) { - #hero h1 { - font-size: 40px; - } + #hero h1 { + font-size: 40px; + } - #hero h2 { - text-align: center; - margin-bottom: 30px; - } + #hero h2 { + text-align: center; + margin-bottom: 30px; + } } @keyframes up-down { - 0% { - transform: translateY(5px); - } + 0% { + transform: translateY(5px); + } - 100% { - transform: translateY(-5px); - } + 100% { + transform: translateY(-5px); + } } /*-------------------------------------------------------------- # Sections General --------------------------------------------------------------*/ section { - padding: 60px 0; + padding: 60px 0; } .section-bg { - background-color: white; + background-color: white; } .section-title { - text-align: center; - padding: 30px 0; - position: relative; + text-align: center; + padding: 30px 0; + position: relative; } .section-title h2 { - font-size: 32px; - font-weight: 700; - text-transform: uppercase; - margin-bottom: 20px; - padding-bottom: 0; - color: var(--section-title-color); - position: relative; - z-index: 2; + font-size: 32px; + font-weight: 700; + text-transform: uppercase; + margin-bottom: 20px; + padding-bottom: 0; + color: var(--section-title-color); + position: relative; + z-index: 2; } .section-title span { - position: absolute; - top: 30px; - color: var(--section-title-color-back); - left: 0; - right: 0; - z-index: 1; - font-weight: 700; - font-size: 52px; - text-transform: uppercase; - line-height: 0; + position: absolute; + top: 30px; + color: var(--section-title-color-back); + left: 0; + right: 0; + z-index: 1; + font-weight: 700; + font-size: 52px; + text-transform: uppercase; + line-height: 0; } .section-title p { - margin-bottom: 0; - position: relative; - z-index: 2; + margin-bottom: 0; + position: relative; + z-index: 2; } @media (max-width: 575px) { - .section-title h2 { - font-size: 28px; - margin-bottom: 15px; - } + .section-title h2 { + font-size: 28px; + margin-bottom: 15px; + } - .section-title span { - font-size: 38px; - } + .section-title span { + font-size: 38px; + } } /*-------------------------------------------------------------- # About Me --------------------------------------------------------------*/ .about .content h3 { - font-weight: 700; - font-size: 26px; - color: #3b434a; - text-transform: uppercase; + font-weight: 700; + font-size: 26px; + color: #3b434a; + text-transform: uppercase; } .about .content ul { - list-style: none; - padding: 0; + list-style: none; + padding: 0; } .about .content ul li { - margin-bottom: 20px; - display: flex; - align-items: center; + margin-bottom: 20px; + display: flex; + align-items: center; } .about .content ul strong { - margin-right: 10px; + margin-right: 10px; } .about .content ul i { - font-size: 16px; - margin-right: 5px; - color: var(--highlight); - line-height: 0; + font-size: 16px; + margin-right: 5px; + color: var(--highlight); + line-height: 0; } .about .content p:last-child { - margin-bottom: 0; + margin-bottom: 0; } .about .content .count-box { - width: 100%; + width: 100%; } .about .content .count-box i { - display: block; - font-size: 36px; - color: var(--highlight); - float: left; - line-height: 0; + display: block; + font-size: 36px; + color: var(--highlight); + float: left; + line-height: 0; } .about .content .count-box span { - font-size: 36px; - line-height: 30px; - display: block; - font-weight: 700; - color: #3b434a; - margin-left: 50px; + font-size: 36px; + line-height: 30px; + display: block; + font-weight: 700; + color: #3b434a; + margin-left: 50px; } .about .content .count-box p { - padding: 15px 0 0 0; - margin: 0 0 0 50px; - font-family: "Raleway", sans-serif; - font-size: 14px; - color: #5d6a75; + padding: 15px 0 0 0; + margin: 0 0 0 50px; + font-family: "Raleway", sans-serif; + font-size: 14px; + color: #5d6a75; } .about .content .count-box a { - font-weight: 600; - display: block; - margin-top: 20px; - color: #5d6a75; - font-size: 15px; - font-family: "Satisfy", serif; - transition: ease-in-out 0.3s; + font-weight: 600; + display: block; + margin-top: 20px; + color: #5d6a75; + font-size: 15px; + font-family: "Satisfy", serif; + transition: ease-in-out 0.3s; } .about .content .count-box a:hover { - color: #82909c; + color: #82909c; } .about .image { - background: url("../img/me2-low.jpg") top center no-repeat; - background-size: cover; - min-height: 500px; + background: url("../img/me2-low.jpg") top center no-repeat; + background-size: cover; + min-height: 500px; } .about .skills-content { - margin-top: 30px; + margin-top: 30px; } .progress { - height: 60px; - display: block; - background: none; - border-radius: 0; + height: 60px; + display: block; + background: none; + border-radius: 0; } .progress .skill { - padding: 10px 0; - margin: 0 0 6px 0; - text-transform: uppercase; - display: block; - font-weight: 700; - font-family: "Raleway", sans-serif; - color: var(--progress-text-color); + padding: 10px 0; + margin: 0 0 6px 0; + text-transform: uppercase; + display: block; + font-weight: 700; + font-family: "Raleway", sans-serif; + color: var(--progress-text-color); } .progress .skill .val { - float: right; - font-style: normal; + float: right; + font-style: normal; } .progress-bar-wrap { - background: var(--progress-background); + background: var(--progress-background); } .progress-bar { - width: 1px; - height: 10px; - transition: 0.9s; - background-color: var(--highlight); + width: 1px; + height: 10px; + transition: 0.9s; + background-color: var(--highlight); } /*-------------------------------------------------------------- # My Resume --------------------------------------------------------------*/ .resume { - display: flex; - flex-direction: column; - align-items: center; + display: flex; + flex-direction: column; + align-items: center; } .resume .resume-title { - font-size: 26px; - font-weight: 700; - margin-top: 20px; - margin-bottom: 20px; - color: var(--section-title-color); + font-size: 26px; + font-weight: 700; + margin-top: 20px; + margin-bottom: 20px; + color: var(--section-title-color); } .resume .resume-item { - padding: 0 0 20px 20px; - margin-top: -2px; - border-left: 2px solid var(--resume-border); - position: relative; + padding: 0 0 20px 20px; + margin-top: -2px; + border-left: 2px solid var(--resume-border); + position: relative; } .resume .resume-item h4 { - line-height: 18px; - font-size: 16px; - font-weight: 700; - text-transform: uppercase; - color: var(--highlight); - margin-bottom: 10px; + line-height: 18px; + font-size: 16px; + font-weight: 700; + text-transform: uppercase; + color: var(--highlight); + margin-bottom: 10px; } .resume .resume-item h5 { - font-size: 16px; - background: var(--resume-time-background); - padding: 5px 15px; - display: inline-block; - font-weight: 600; - margin-bottom: 10px; + font-size: 16px; + background: var(--resume-time-background); + padding: 5px 15px; + display: inline-block; + font-weight: 600; + margin-bottom: 10px; } .resume .resume-item ul { - padding-left: 20px; - margin-bottom: 0; + padding-left: 20px; + margin-bottom: 0; } .resume .resume-item ul li { - padding-bottom: 10px; + padding-bottom: 10px; } .resume .resume-item:last-child { - padding-bottom: 0; + padding-bottom: 0; } .resume .resume-item::before { - content: ""; - position: absolute; - width: 16px; - height: 16px; - border-radius: 50px; - left: -9px; - top: 0; - background: var(--background); - border: 2px solid var(--highlight); + content: ""; + position: absolute; + width: 16px; + height: 16px; + border-radius: 50px; + left: -9px; + top: 0; + background: var(--background); + border: 2px solid var(--highlight); } .resume .resume-item.secondary::before { - border-color: var(--resume-border); + border-color: var(--resume-border); } .resume .btn { - font-size: 20px; - border-color: var(--resume-btn-border); - color: var(--highlight); - transition: 0.3s; + font-size: 20px; + border-color: var(--resume-btn-border); + color: var(--highlight); + transition: 0.3s; } .resume .btn:hover { - transition: 0.3s; - color: var(--resume-btn-hover); - background-color: var(--btn-bg); + transition: 0.3s; + color: var(--resume-btn-hover); + background-color: var(--btn-bg); } /*-------------------------------------------------------------- # My Skills --------------------------------------------------------------*/ .skills #skills-filters { - - list-style: none; - margin-bottom: 20px; - overflow-x: auto; + list-style: none; + margin-bottom: 20px; + overflow-x: auto; } .skills #skills-filters li { - cursor: pointer; - display: inline-block; - margin: 0 10px 10px 10px; - font-size: 15px; - font-weight: 600; - line-height: 1; - padding: 7px 10px; - text-transform: uppercase; - color: var(--text-color); - transition: all 0.3s ease-in-out; - border: 2px solid var(--border); + cursor: pointer; + display: inline-block; + margin: 0 10px 10px 10px; + font-size: 15px; + font-weight: 600; + line-height: 1; + padding: 7px 10px; + text-transform: uppercase; + color: var(--text-color); + transition: all 0.3s ease-in-out; + border: 2px solid var(--border); } .skills #skills-filters li:hover, .skills #skills-filters li.filter-active { - color: #f3a200; - border-color: var(--highlight); + color: #f3a200; + border-color: var(--highlight); } .skills .skill-item { - display: flex; - align-items: stretch; + display: flex; + align-items: stretch; } .skills .icon-box { - padding: 30px; - position: relative; - overflow: hidden; - background: var(--background); - box-shadow: 0 10px 29px 0 rgba(68, 88, 144, 0.1); - transition: all 0.3s ease-in-out; - text-align: center; - border: 1px solid var(--border); + padding: 30px; + position: relative; + overflow: hidden; + background: var(--background); + box-shadow: 0 10px 29px 0 rgba(68, 88, 144, 0.1); + transition: all 0.3s ease-in-out; + text-align: center; + border: 1px solid var(--border); } .skills .icon-box p { hyphens: auto; - text-align: justify; + text-align: justify; } .skills .icon { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - margin: 0 auto 20px auto; - /* padding-top: 17px; */ - /* display: inline-block; */ - /* text-align: center; */ - border-radius: 50%; - width: 72px; - height: 72px; - background: var(--skill-icon-bg); - transition: 0.3s; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + margin: 0 auto 20px auto; + /* padding-top: 17px; */ + /* display: inline-block; */ + /* text-align: center; */ + border-radius: 50%; + width: 72px; + height: 72px; + background: var(--skill-icon-bg); + transition: 0.3s; } .skills .icon i { - font-size: 36px; - line-height: 1; - color: var(--highlight); + font-size: 36px; + line-height: 1; + color: var(--highlight); } .skills .icon img { - max-height: 36px; - max-width: 36px; + max-height: 36px; + max-width: 36px; } .skills .title { - font-weight: 700; - margin-bottom: 15px; - font-size: 18px; + font-weight: 700; + margin-bottom: 15px; + font-size: 18px; } .skills .title a { - color: var(--skill-title); - transition: 0.3s; + color: var(--skill-title); + transition: 0.3s; } .skills .description { - font-size: 15px; - line-height: 28px; - margin-bottom: 0; + font-size: 15px; + line-height: 28px; + margin-bottom: 0; } .skills .icon-box:hover { - border-color: var(--highlight); + border-color: var(--highlight); } .skills .icon-box:hover .title a { - color: var(--highlight); + color: var(--highlight); } /*-------------------------------------------------------------- # Testimonials --------------------------------------------------------------*/ .testimonials { - padding: 80px 0; - background: url("../img/testimonials-bg.jpg") no-repeat; - background-position: center center; - background-size: cover; - position: relative; + padding: 80px 0; + background: url("../img/testimonials-bg.jpg") no-repeat; + background-position: center center; + background-size: cover; + position: relative; } .testimonials::before { - content: ""; - position: absolute; - left: 0; - right: 0; - top: 0; - bottom: 0; - background: rgba(14, 16, 17, 0.7); + content: ""; + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + background: rgba(14, 16, 17, 0.7); } .testimonials .section-header { - margin-bottom: 40px; + margin-bottom: 40px; } .testimonials .testimonials-carousel, .testimonials .testimonials-slider { - overflow: hidden; + overflow: hidden; } .testimonials .testimonial-item { - text-align: center; - color: var(--text-color-alt); + text-align: center; + color: var(--text-color-alt); } .testimonials .testimonial-item .testimonial-img { - width: 100px; - border-radius: 50%; - border: 6px solid rgba(255, 255, 255, 0.15); - margin: 0 auto; + width: 100px; + border-radius: 50%; + border: 6px solid rgba(255, 255, 255, 0.15); + margin: 0 auto; } .testimonials .testimonial-item h3 { - font-size: 20px; - font-weight: bold; - margin: 10px 0 5px 0; - color: var(--text-color-alt); + font-size: 20px; + font-weight: bold; + margin: 10px 0 5px 0; + color: var(--text-color-alt); } .testimonials .testimonial-item h4 { - font-size: 14px; - color: #ddd; - margin: 0 0 15px 0; + font-size: 14px; + color: #ddd; + margin: 0 0 15px 0; } .testimonials .testimonial-item .quote-icon-left, .testimonials .testimonial-item .quote-icon-right { - color: rgba(255, 255, 255, 0.4); - font-size: 26px; + color: rgba(255, 255, 255, 0.4); + font-size: 26px; } .testimonials .testimonial-item .quote-icon-left { - display: inline-block; - left: -5px; - position: relative; + display: inline-block; + left: -5px; + position: relative; } .testimonials .testimonial-item .quote-icon-right { - display: inline-block; - right: -5px; - position: relative; - top: 10px; + display: inline-block; + right: -5px; + position: relative; + top: 10px; } .testimonials .testimonial-item p { - font-style: italic; - margin: 0 auto 15px auto; - color: var(--text-color-alt-2); - line-height: 2; + font-style: italic; + margin: 0 auto 15px auto; + color: var(--text-color-alt-2); + line-height: 2; } .testimonials .swiper-pagination { - margin-top: 20px; - position: relative; + margin-top: 20px; + position: relative; } .testimonials .swiper-pagination .swiper-pagination-bullet { - width: 12px; - height: 12px; - opacity: 1; - background-color: rgba(255, 255, 255, 0.4); + width: 12px; + height: 12px; + opacity: 1; + background-color: rgba(255, 255, 255, 0.4); } .testimonials .swiper-pagination .swiper-pagination-bullet-active { - background-color: var(--highlight); + background-color: var(--highlight); } @media (min-width: 992px) { - .testimonials .testimonial-item p { - width: 80%; - } + .testimonials .testimonial-item p { + width: 80%; + } } /*-------------------------------------------------------------- # My Portfolio --------------------------------------------------------------*/ .portfolio #portfolio-flters { - list-style: none; - margin-bottom: 20px; + list-style: none; + margin-bottom: 20px; } .portfolio #portfolio-flters li { - cursor: pointer; - display: inline-block; - margin: 0 10px 10px 10px; - font-size: 15px; - font-weight: 600; - line-height: 1; - padding: 7px 10px; - text-transform: uppercase; - color: var(--text-color); - transition: all 0.3s ease-in-out; - border: 2px solid var(--border); + cursor: pointer; + display: inline-block; + margin: 0 10px 10px 10px; + font-size: 15px; + font-weight: 600; + line-height: 1; + padding: 7px 10px; + text-transform: uppercase; + color: var(--text-color); + transition: all 0.3s ease-in-out; + border: 2px solid var(--border); } .portfolio #portfolio-flters li:hover, .portfolio #portfolio-flters li.filter-active { - color: #f3a200; - border-color: var(--highlight); + color: #f3a200; + border-color: var(--highlight); } .portfolio .portfolio-item { - margin-bottom: 30px; + margin-bottom: 30px; } .portfolio .portfolio-item .portfolio-img { - overflow: hidden; + overflow: hidden; } .portfolio .portfolio-item .portfolio-img img { - transition: all 0.8s ease-in-out; + transition: all 0.8s ease-in-out; } .portfolio .portfolio-item .portfolio-info { - opacity: 0; - position: absolute; - left: 15px; - bottom: 0; - z-index: 3; - right: 15px; - transition: all ease-in-out 0.3s; - background: rgba(0, 0, 0, .7); - padding: 10px 15px; + opacity: 0; + position: absolute; + left: 15px; + bottom: 0; + z-index: 3; + right: 15px; + transition: all ease-in-out 0.3s; + background: rgba(0, 0, 0, 0.7); + padding: 10px 15px; } .portfolio .portfolio-item .portfolio-info h4 { - font-size: 18px; - color: var(--text-color-alt); - font-weight: 600; - margin-bottom: 0px; + font-size: 18px; + color: var(--text-color-alt); + font-weight: 600; + margin-bottom: 0px; } .portfolio .portfolio-item .portfolio-info p { - color: var(--text-color-alt); - font-size: 14px; - margin-bottom: 0; + color: var(--text-color-alt); + font-size: 14px; + margin-bottom: 0; } -.portfolio .portfolio-item .portfolio-info div{ +.portfolio .portfolio-item .portfolio-info div { width: 100%; display: flex; flex-direction: row; justify-content: space-between; } -.portfolio .portfolio-item .portfolio-info div a{ +.portfolio .portfolio-item .portfolio-info div a { display: flex; align-items: center; } -.portfolio .portfolio-item .portfolio-info div p .br{ +.portfolio .portfolio-item .portfolio-info div p .br { display: block; - margin-bottom: .5em; + margin-bottom: 0.5em; } .portfolio .portfolio-item .portfolio-info .preview-link, .portfolio .portfolio-item .portfolio-info .details-link { - font-size: 24px; - color: var(--text-color-alt); - transition: 0.3s; + font-size: 24px; + color: var(--text-color-alt); + transition: 0.3s; } .portfolio .portfolio-item .portfolio-info .preview-link:hover, .portfolio .portfolio-item .portfolio-info .details-link:hover { - color: #ffc041; + color: #ffc041; } .portfolio .portfolio-item:hover .portfolio-img img { - transform: scale(1.2); + transform: scale(1.2); } .portfolio .portfolio-item:hover .portfolio-info { - opacity: 1; + opacity: 1; } /*-------------------------------------------------------------- # Contact Me --------------------------------------------------------------*/ .contact .info-box { - color: var(--text-color); - text-align: center; - box-shadow: 0 0 30px var(--contact-box-shadow); - padding: 20px 0 30px 0; + color: var(--text-color); + text-align: center; + box-shadow: 0 0 30px var(--contact-box-shadow); + padding: 20px 0 30px 0; } .contact .info-box i.bx { - font-size: 24px; - color: var(--highlight); - border-radius: 50%; - padding: 15px; - background: var(--contact-title-icon-bg); + font-size: 24px; + color: var(--highlight); + border-radius: 50%; + padding: 15px; + background: var(--contact-title-icon-bg); } .contact .info-box h3 { - font-size: 20px; - color: var(--contact-title); - font-weight: 700; - margin: 10px 0; + font-size: 20px; + color: var(--contact-title); + font-weight: 700; + margin: 10px 0; } .contact .info-box p { - padding: 0; - line-height: 24px; - font-size: 14px; - margin-bottom: 0; + padding: 0; + line-height: 24px; + font-size: 14px; + margin-bottom: 0; } .contact .social-links { - margin-top: 15px; - display: flex; - justify-content: center; + margin-top: 15px; + display: flex; + justify-content: center; } .contact .social-links a { - font-size: 18px; - display: inline-block; - color: var(--contact-icon); - line-height: 1; - margin: 0 8px; - transition: 0.3s; - padding: 14px; - border-radius: 50px; - border: 1px solid var(--contact-icon-border); + font-size: 18px; + display: inline-block; + color: var(--contact-icon); + line-height: 1; + margin: 0 8px; + transition: 0.3s; + padding: 14px; + border-radius: 50px; + border: 1px solid var(--contact-icon-border); } .contact .email a { - font-size: 18px; - margin: 0 8px; - padding: 14px; + font-size: 18px; + margin: 0 8px; + padding: 14px; } .contact .social-links a:hover { - color: var(--text-color-alt-2); - border-color: var(--btn-bg); - background: var(--btn-bg); + color: var(--text-color-alt-2); + border-color: var(--btn-bg); + background: var(--btn-bg); } /*-------------------------------------------------------------- # Footer --------------------------------------------------------------*/ #footer { - background: url("../img/footer-bg.jpg") top center no-repeat; - background-size: cover; - background-position: center center; - color: var(--text-color-alt-2); - font-size: 14px; - text-align: center; - padding: 80px 0; - position: relative; + background: url("../img/footer-bg.jpg") top center no-repeat; + background-size: cover; + background-position: center center; + color: var(--text-color-alt-2); + font-size: 14px; + text-align: center; + padding: 80px 0; + position: relative; } #footer::before { - content: ""; - position: absolute; - left: 0; - right: 0; - top: 0; - bottom: 0; - background: rgba(0, 0, 0, 0.6); + content: ""; + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.6); } #footer .container { - position: relative; + position: relative; } #footer h3 { - font-size: 36px; - font-weight: 700; - color: var(--text-color-alt-2); - position: relative; - font-family: "Satisfy", serif; - padding: 0; - margin: 0 0 15px 0; + font-size: 36px; + font-weight: 700; + color: var(--text-color-alt-2); + position: relative; + font-family: "Satisfy", serif; + padding: 0; + margin: 0 0 15px 0; } #footer p { - font-size: 15; - font-style: italic; - padding: 0; - margin: 0 0 40px 0; + font-size: 15; + font-style: italic; + padding: 0; + margin: 0 0 40px 0; } #footer .social-links { - margin: 0 0 40px 0; + margin: 0 0 40px 0; } #footer .social-links a { - font-size: 18px; - display: inline-block; - background: var(--btn-bg); - color: var(--text-color-alt-2); - line-height: 1; - padding: 8px 0; - margin-right: 4px; - border-radius: 50%; - text-align: center; - width: 36px; - height: 36px; - transition: 0.3s; + font-size: 18px; + display: inline-block; + background: var(--btn-bg); + color: var(--text-color-alt-2); + line-height: 1; + padding: 8px 0; + margin-right: 4px; + border-radius: 50%; + text-align: center; + width: 36px; + height: 36px; + transition: 0.3s; } #footer .social-links a:hover { - background: var(--btn-bg-hover-2); - color: var(--text-color-alt-2); - text-decoration: none; + background: var(--btn-bg-hover-2); + color: var(--text-color-alt-2); + text-decoration: none; } #footer .copyright { - margin: 0 0 5px 0; + margin: 0 0 5px 0; } #footer .credits { - font-size: 13px; + font-size: 13px; } diff --git a/index.html b/index.html index fdc0484..9c86e0e 100644 --- a/index.html +++ b/index.html @@ -115,7 +115,8 @@
@@ -372,9 +375,10 @@

Theater

- For seven years, I've been part of a theater group focusing on physical theater, telling stories through movement and - dance instead of spoken words. This experience has significantly sharpened my non-verbal communication skills and - deepened my understanding of storytelling. + For seven years, I've been part of a theater group focusing on physical theater, + telling stories through movement and dance instead of spoken words. This experience + has significantly sharpened my non-verbal communication skills and deepened my + understanding of storytelling.

@@ -384,9 +388,10 @@

Basketball

- I began my journey as a Table Official in basketball after frequently attending a friend's matches, which led to my - involvement with the SFT Lugano Tigers. Following a brief training, I assumed the role, contributing to the game by - managing scores and timekeeping, blending my passion with responsibility. + I began my journey as a Table Official in basketball after frequently attending a + friend's matches, which led to my involvement with the SFT Lugano Tigers. Following + a brief training, I assumed the role, contributing to the game by managing scores + and timekeeping, blending my passion with responsibility.

@@ -396,8 +401,9 @@

Chess

- Early in 2023, a friend introduced me to chess, sparking a passion that has grown ever since. While I'm aware that I'm - not the best player, I enjoy playing regularly and am dedicated to improving my skills. + Early in 2023, a friend introduced me to chess, sparking a passion that has grown + ever since. While I'm aware that I'm not the best player, I enjoy playing regularly + and am dedicated to improving my skills.

@@ -407,11 +413,11 @@

Server Management

- Since 2018, I've been diving into the world of server administration, - experimenting with various hardware setups. It's been an enriching journey that's - expanded my technical horizons. I've come to appreciate the art of keeping servers - running smoothly and securely. Additionally, delving into DevOps activities has allowed - me to bridge the gap between development and operations, streamlining processes and + Since 2018, I've been diving into the world of server administration, experimenting + with various hardware setups. It's been an enriching journey that's expanded my + technical horizons. I've come to appreciate the art of keeping servers running + smoothly and securely. Additionally, delving into DevOps activities has allowed me + to bridge the gap between development and operations, streamlining processes and improving overall efficiency.

@@ -440,14 +446,13 @@ arch-linux-logo

Arch Linux

-

Arch Linux is a minimalist, user-centric operating system that - I've - come to appreciate. It's not for everyone, but if you value control and enjoy - crafting - your system to suit your needs, it's a solid choice. With a rolling release model - and a +

+ Arch Linux is a minimalist, user-centric operating system that I've come to + appreciate. It's not for everyone, but if you value control and enjoy crafting your + system to suit your needs, it's a solid choice. With a rolling release model and a wealth of user-contributed packages, Arch Linux offers a clean slate to build your - computing environment.

+ computing environment. +

@@ -499,12 +504,14 @@

Associate Professor - USI

- I had the pleasure of meeting Arnaud when he enrolled in my computer graphics course. He was a very bright, diligent, - and active student who always showed a desire to learn. In the summer of 2023, Arnaud worked with me on a research - project related to neuromorphic cameras. Despite being a relatively new topic for him, Arnaud's skills in programming - and his ability to grasp new concepts in the visual computing field were impressive. He quickly became a valuable - contributor to the project. Collaborating with him on this project was truly enjoyable, and I always appreciated his - presence in my classes. + I had the pleasure of meeting Arnaud when he enrolled in my computer graphics + course. He was a very bright, diligent, and active student who always showed a + desire to learn. In the summer of 2023, Arnaud worked with me on a research project + related to neuromorphic cameras. Despite being a relatively new topic for him, + Arnaud's skills in programming and his ability to grasp new concepts in the visual + computing field were impressive. He quickly became a valuable contributor to the + project. Collaborating with him on this project was truly enjoyable, and I always + appreciated his presence in my classes.

@@ -517,12 +524,14 @@

CFO - Zucchetti Switzerland

- The student demonstrated an excellent basic preparation, a great interest in the technologies used, a high degree of - autonomy in organizing work schedules and in the ability to acquire the necessary information, and a commendable ability - to complete the assigned project in an excellent manner within the allotted time. + The student demonstrated an excellent basic preparation, a great interest in the + technologies used, a high degree of autonomy in organizing work schedules and in the + ability to acquire the necessary information, and a commendable ability to complete + the assigned project in an excellent manner within the allotted time. - We also note the student's active participation in periodic meetings of the business team for planning activities, which - also enabled him to acquire field skills in project management strategies, particularly the SCRUM approach. + We also note the student's active participation in periodic meetings of the business + team for planning activities, which also enabled him to acquire field skills in + project management strategies, particularly the SCRUM approach.

@@ -555,85 +564,93 @@
- +
-
+
-

From Flying Balls to Colliding Polygons

-
-

- An extension of a physics engine to simulate polygons, - focusing on collision detection and effects in - real-time, ensuring smooth - animations. - Language: C++ -

- -
+

From Flying Balls to Colliding + Polygons

+
+

+ An extension of a physics engine to simulate polygons, + focusing on collision detection and effects in + real-time, ensuring smooth + animations. + Language: C++ +

+ +
-
+
+

HDR ESIM

Extended a the simulation of an event camera in order to generate HDR - frames. + frames. Language: C++

- +
-
+
+
-

Advent of Code

+

Advent of Code

- Fun coding challenges during christmas. + Fun coding challenges during christmas. Languages: C++, Go, Python

- +
-
+

PaperMosaik

- +

A visualization tool to represent reasearchers in terms of their papers and their relationships to other - researchers. + researchers. Language: Smalltalk (Pharo)

- +
-
+

Maze Solver

- A simple maze solver that takes in various types of maze as input and - outputs the solution. + A simple maze solver that takes in various types of maze as input and + outputs the solution. Language: Go

- +