CV-Portfolio 0.0.1

data/assets/css/app/_button.scss

@@ -0,0 +1,70 @@
+// Button
+.btn {
+  background: var(--color-gradient-border-gray);
+  border-radius: var(--radius-14);
+  box-shadow: var(--box-shadow-40);
+  border: 0;
+  color: var(--color-accent);
+  cursor: pointer;
+  font-weight: 400;
+  font-size: rem(16px);
+  line-height: initial;
+  padding: rem(16px) rem(24px);
+  position: relative;
+  transition: all .4s ease-in-out;
+  white-space: nowrap;
+  z-index: 0;
+  
+  &::before {
+    content: '';
+    @include position(absolute, $top: 1px, $right: 1px, $bottom: 1px, $left: 1px);
+    background: var(--color-btn);
+    //background-clip: padding-box!important;
+    //border: 1px solid transparent;
+    border-radius: inherit; 
+    transition: all .4s ease-in-out;
+    z-index: -1;
+  }
+
+  &:hover {
+    background: var(--color-gradient-border);
+	  color: var(--color-accent);
+  }
+  
+  &:hover::before {
+    background: var(--color-gradient-icon);
+  }
+
+  &:focus {
+    box-shadow: var(--box-shadow-40);
+  }
+  
+  .font-icon {
+    margin-right: rem(6px);
+  }
+  
+  &--small {
+    box-shadow: var(--box-shadow-30);
+    font-size: rem(12px);
+    padding: rem(10px) rem(16px);
+  }
+
+  &--small:focus {
+    box-shadow: var(--box-shadow-30);
+  }
+
+  &--icon-left i {
+    margin-right: rem(8px);
+  }
+
+  &--icon-right i {
+    margin-left: rem(8px);
+  }
+
+  @media only screen and (max-width: $small) {
+    font-size: rem(14px);
+    padding: rem(12px) rem(18px);
+  }
+}
+
+button:focus {outline: none;}

data/assets/css/app/_cases.scss

@@ -0,0 +1,35 @@
+/* -----------------------------------------------------------------
+    - Cases
+----------------------------------------------------------------- */
+
+.case-item {
+  @include flex();
+  height: calc(100% - #{rem(20px)});
+  padding-bottom: rem(20px);
+  position: relative;
+  
+  @media only screen and (max-width: $small) {
+    @include flex($align: center, $direction: column);
+	  text-align: center;
+  }  
+  
+  &__icon {
+    $size: rem(40px);
+	  margin-right: rem(16px);
+	  height: $size;
+	  width: $size;
+	
+	  @media only screen and (max-width: $small) {
+	    margin-right: 0;
+      margin-bottom: rem(13px);
+	  }
+  }
+  
+  div {
+    flex: 1;
+  }
+  
+  &__caption:last-child {
+    margin-bottom: 0;
+  }
+}

data/assets/css/app/_clients.scss

@@ -0,0 +1,22 @@
+/* -----------------------------------------------------------------
+    - Clients
+----------------------------------------------------------------- */
+
+.js-carousel-clients {
+  padding-top: rem(8px);
+  padding-bottom: rem(16px);
+  
+  .swiper-slide {
+	  text-align: center;
+  }
+
+  .logo-client {
+	  max-width: 80%;
+    filter: grayscale(1);
+    transition: all .5s ease-in-out;
+
+    &:hover {
+      filter: grayscale(0);
+    }
+  }
+}

data/assets/css/app/_contact.scss

@@ -0,0 +1,74 @@
+/* -----------------------------------------------------------------
+    - Contact
+----------------------------------------------------------------- */ 
+
+.contact-form {
+  .btn {
+    @media only screen and (max-width: $medium) {
+	    width: 100%;
+	  }
+  }
+  
+  .tabcontent & {
+    padding-bottom: rem(30px);
+	
+  	@media only screen and (max-width: $small) {
+	    padding-bottom: rem(20px);
+	  }
+  }
+}
+
+// Map
+.map {
+  border-radius: var(--radius-16);
+  height: rem(380px);
+  margin-bottom: rem(32px);
+  position: relative;
+  direction: ltr;
+  
+  @media only screen and (max-width: $small) {
+    height: rem(250px);
+  }
+}
+
+.popover-map {
+  &-title {
+    color: var(--color-surface-1);
+    font-size: rem(19px);
+	  margin-top: rem(1px);
+  	margin-bottom: rem(8px);
+  }
+  
+  &-caption {
+    color: var(--color-surface-1);
+  }
+}
+
+// Mapbox
+#marker {
+  background-image: url('../images/icon-map-pic.svg');
+  background-size: cover;
+  width: rem(60px);
+  height: rem(60px);
+  cursor: pointer;
+
+  @media only screen and (max-width: $small) {
+    width: rem(40px);
+    height: rem(40px);
+  }
+}
+
+.mapboxgl-popup-content {
+  background: var(--color-surface-2)!important;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-8)!important;
+  box-shadow: var(--box-shadow-30)!important;
+}
+
+.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip {
+  border-top-color: var(--color-border)!important;
+}
+
+.mapboxgl-popup-close-button {
+  color: var(--color-heading);
+}

data/assets/css/app/_form.scss

@@ -0,0 +1,264 @@
+/* -----------------------------------------------------------------
+    - Form
+----------------------------------------------------------------- */
+
+// Input Text
+%formStyle {
+  background-color: transparent;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-14);
+  box-shadow: none;
+  color: var(--color-heading);
+  font-size: inherit;
+  height: auto;
+  padding: rem(14px) rem(22px) rem(13px);
+  position: relative;
+  width: 100%;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+		  
+  @media only screen and (max-width: $small) {
+    padding: rem(13px) rem(22px) rem(12px);
+  }  
+}
+
+%formStyle-focus {
+  background-color: transparent;
+  border-color: var(--color-accent);
+  color: var(--color-heading);
+  box-shadow: none;
+  outline: none;
+}
+
+.input {
+  @extend %formStyle;
+  line-height: inherit;
+  
+  &:focus {
+    @extend %formStyle-focus;
+  }
+  
+  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+    line-height: 0;
+  }
+  
+  &__icon {
+    padding-left: rem(54px);
+	
+	  @media only screen and (max-width: $small) {
+	    padding-left: rem(45px);
+	  }
+  }
+}
+
+.textarea {
+  @extend %formStyle;
+  border-radius: var(--radius-14);
+  display: block;
+  padding: rem(13px) rem(19px);
+  resize: none;
+  
+  &:focus {
+    @extend %formStyle-focus;
+  }
+}
+
+.form-group {
+  margin-bottom: rem(32px);
+  position: relative;
+  
+  @media only screen and (max-width: $small) {
+    margin-bottom: rem(27px);
+  }
+}
+
+.help-block {
+  position: absolute;
+  font-size: rem(12px);
+  line-height: 1.4;
+  padding-top: rem(5px);
+  padding-left: rem(6px);
+  
+  @media only screen and (max-width: $small) {
+    font-size: rem(11px);
+  }
+}
+
+.with-errors {
+  color: var(--color-error);
+}
+
+.has-error input,
+.has-error textarea,
+.has-error input:focus,
+.has-error textarea:focus {
+  border-color: var(--color-error);
+}
+
+#validator-contact {
+  font-size: rem(14px);
+  margin-top: rem(16px);
+}
+
+.form-control::-webkit-input-placeholder {
+  color: var(--color-paragraph);
+  opacity: .5;
+}
+
+.form-control::-moz-placeholder {
+  color: var(--color-paragraph);
+  opacity: .5;
+}
+
+.form-control:-ms-input-placeholder {
+  color: var(--color-paragraph);
+  opacity: .5;
+}
+
+.form-control::-ms-input-placeholder {
+  color: var(--color-paragraph);
+  opacity: .5;
+}
+
+.form-control::placeholder {
+  color: var(--color-paragraph);
+  opacity: .5;
+}
+
+input:invalid,
+textarea:invalid {
+  outline: none !important;
+}
+
+// Checkbox
+.form-check-input {
+  background: transparent;
+  border-color: rgba(244,244,244, .15);
+
+  &:checked {
+    background-color: var(--color-accent);
+    border-color: var(--color-accent);
+  }
+
+  &:checked[type=checkbox] {
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e")!important;
+  }
+
+  &:checked[type=radio] {
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23000'/%3e%3c/svg%3e");
+  }
+
+  &:focus {
+    border-color: var(--color-paragraph);
+    box-shadow: 0 0 0 rem(2px) rgba(244,244,244, .25);
+  }
+}
+
+// Select
+select,
+.custom-select {
+  @extend %formStyle;
+  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23fff' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.1rem center/10px 16px;
+  
+  &:focus {
+    @extend %formStyle-focus;
+  }
+  
+  option {
+    //color: $black-color;
+  }
+}
+
+// Dropdown
+.dropdown {
+  &-menu {
+    background: var(--color-surface-2);
+	  border: 1px solid var(--color-border);
+	  border-radius: var(--radius-12);
+	  box-shadow: var(--box-shadow-50);
+	  font-size: inherit;
+
+  	&::before {
+	    content: '';
+	    border-left: rem(6px) solid transparent;
+      border-right: rem(6px) solid transparent;
+      border-bottom: rem(6px) solid var(--color-border);
+	    height: 0;
+	    @include position(absolute, $top: rem(-6px), $left: rem(17px));
+	    width: 0;
+   	}
+  }
+  
+  &-item {
+    color: var(--color-paragraph);
+    font-weight: 300;
+  }
+  
+  &-item:hover,
+  &-item:focus {
+    background: var(--color-border);
+    color: var(--color-paragraph);
+  }
+
+  &.dropup {
+    .dropdown-menu {
+      &::before {
+	      border-left: rem(6px) solid transparent;
+        border-right: rem(6px) solid transparent;
+	      border-top: rem(6px) solid var(--color-border);
+        border-bottom: rem(6px) solid transparent;
+	      top: auto;
+	      bottom: rem(-12px);
+	    }
+  	}  
+  }
+}
+
+// Progress
+.progress {
+  display: block;
+  background: transparent;
+  font-size: rem(15px);
+  margin-bottom: rem(24px);
+  height: auto;
+
+  @media only screen and (max-width: $small) {
+    font-size: rem(13px);
+    margin-bottom: rem(16px);
+  }
+  
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  &-bar {
+    background-color: var(--color-border);
+    border-radius: var(--radius-16);
+    height: rem(8px);
+    overflow: inherit;
+    position: relative;
+    width: 100%;
+  }
+
+  &-bar span {
+    background: var(--color-gradient);
+	  border-radius: rem(16px);
+    display: block;
+	  overflow: hidden;
+	  position: relative;
+    height: rem(8px);
+	  width: 0%;
+    transition: width .6s ease-in-out;
+	  z-index: 1;
+  }
+  
+  .progress-text {
+    margin-bottom: rem(8px);
+
+    span {
+      color: var(--color-heading);
+      font-weight: 500;
+    }
+  }
+}

data/assets/css/app/_general.scss

@@ -0,0 +1,106 @@
+/* -----------------------------------------------------------------
+    - General Styles
+----------------------------------------------------------------- */
+
+*,
+::before,
+::after {
+  background-repeat: no-repeat;
+  box-sizing: border-box;
+}
+
+html {
+  -webkit-overflow-scrolling: touch;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  //-ms-overflow-x: hidden;
+}
+
+body, html {
+  font-size: rem(16px);
+  -webkit-text-size-adjust: 100%;
+}
+
+body {
+  background-color: var(--color-bg);
+  color: var(--color-paragraph);
+  font-family: var(--font-family);
+  font-size: var(--font-base-size);
+  font-weight: 300;
+  line-height: 1.65;
+  min-height: 100vh;
+  overflow-x: hidden;
+  -ms-overflow-style: scrollbar;
+  -webkit-font-smoothing: antialiased;
+  
+  @media only screen and (max-width: $small) {
+    font-size: var(--font-mobile-size);
+    line-height: 1.6;
+  }
+}
+
+html.is-scroll-disabled body {
+  height: 100vh;
+  overflow: hidden;
+}
+
+@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+  html.is-scroll-disabled {
+    overflow: hidden;
+  }
+}
+
+.no-scroll {
+  overflow: hidden;
+  -ms-overflow-style: none;
+}
+
+.no-scroll-height {
+  overflow-x: hidden;
+}
+
+.svg-defs {
+  position: absolute;
+  height: 0;
+  width: 0;
+}
+
+img {
+  max-width: 100%;
+  -webkit-user-select: none;
+	 -moz-user-select: none;
+	  -ms-user-select: none;
+	      user-select: none;
+}
+
+figure {
+  margin: 0;
+}
+
+iframe {
+  background-color: var(--color-bg);
+  border: 0;
+  display: block;
+  height: 100%;
+  width: 100%;  
+}
+
+.cover {
+  object-fit: cover;
+  object-position: center;
+  font-family: 'object-fit: cover; object-position: center;';
+  height: 100%;
+  width: 100%;
+}
+
+::-moz-selection {background: transparent; color: var(--color-accent)}
+	 ::selection {background: transparent; color: var(--color-accent)} 
+
+// Scroll Indicator
+.scroll-line {
+  background: var(--color-gradient);
+  height: rem(3px);
+  @include position(fixed, $top: 0);
+  width: 0;
+  z-index: 3;
+}

data/assets/css/app/_navbar.scss

@@ -0,0 +1,98 @@
+/* -----------------------------------------------------------------
+    - Navbar
+----------------------------------------------------------------- */
+
+$size-nav: rem(64px);
+
+// Nav
+.nav-container {
+  background: var(--color-surface-2);
+  border: 1px solid var(--color-border);
+  border-radius: 0 var(--radius-20) 0 var(--radius-20);
+  @include flex($align: center, $justify: flex-end);
+  height: $size-nav;
+  padding-right: rem(38px);
+  padding-left: rem(38px);
+  @include position(absolute, $top: 0, $right: 0);
+  z-index: 1;
+  
+  @media only screen and (max-width: $large) {
+    backdrop-filter: blur(6px);
+    background: rgba(43, 43, 44,.75);
+    border-radius: var(--radius-20) var(--radius-20) 0 0;
+    box-shadow: var(--box-shadow-30);
+    @include flex($align: center, $justify: center);
+    @include position(fixed, $top: auto, $left: 0, $bottom: 0);
+    height: #{$size-nav - rem(3px)};
+    width: 100%;
+    z-index: 1112;
+  }
+  
+  @media only screen and (max-width: $small) {
+    border-radius: var(--radius-12) var(--radius-12) 0 0;
+    height: rem(48px);
+    padding-right: rem(16px);
+    padding-left: rem(16px);
+  }
+}
+
+.medium-zoom--opened .nav-container {
+  @media only screen and (max-width: $large) {
+    z-index: 10;
+  }
+}
+
+.nav {
+  @include flex($align: center, $justify: center);
+  height: 100%;
+  overflow: hidden;
+  
+  @media only screen and (max-width: $medium) {
+    font-size: rem(14px);
+  }  
+  
+  @media only screen and (max-width: $small) {
+	  font-size: rem(11px)
+  }
+  
+  &__item {
+    margin-right: rem(44px);
+	
+  	@media only screen and (max-width: $large) {
+	    margin-right: rem(32px);
+  	}
+	
+	  @media only screen and (max-width: $small) {
+	    margin-right: rem(20px);
+	  }
+	
+	  a {
+      background: none;
+	    color: var(--color-paragraph);
+      -webkit-text-fill-color: inherit;
+      font-weight: 500;
+	    opacity: 1;
+      transition: all .3s ease-in-out;
+
+	    &:hover {
+        opacity: .6;
+        text-decoration: none;
+	    }
+	  
+	    &.active {
+	      background: var(--color-gradient-text);
+        -webkit-background-clip: text;
+                background-clip: text;
+        -webkit-text-fill-color: transparent;
+	    }
+
+      &.active:hover {
+        opacity: 1;
+      }
+	  }
+  }
+	
+  &__item:last-child {
+	  margin-right: 0;
+  }  
+}