CV-Portfolio 0.0.1

data/assets/css/app/_news.scss

@@ -0,0 +1,112 @@
+/* -----------------------------------------------------------------
+    - News
+----------------------------------------------------------------- */ 
+
+.news-grid {
+  @include flex($wrap: wrap);
+  margin-left: rem(-15px);
+  margin-right: rem(-15px);
+  
+  @media only screen and (max-width: $large) {
+    margin-left: 0;
+    margin-right: 0;
+  }
+}
+
+.news-item {
+  border-radius: var(--radius-16);
+  box-shadow: var(--box-shadow-50);
+  margin-bottom: rem(30px);
+  margin-left: rem(15px);
+  margin-right: rem(15px);
+  padding: 0;
+  width: calc(50% - 30px);
+  
+  @media only screen and (max-width: $large) {
+    margin-left: 0;
+    margin-right: 0;
+    width: 100%;
+  }
+  
+  @media only screen and (max-width: $small) {
+    margin-bottom: rem(20px);
+  }
+  
+  &__image-wrap {
+    overflow: hidden;
+  	border-radius: var(--radius-16);
+  	height: rem(224px);
+	  position: relative;
+	
+	  @media only screen and (max-width: $large) {
+	    height: rem(288px);
+	  }
+	
+	  @media only screen and (max-width: $small) {
+	    border-radius: var(--radius-12);
+	    height: rem(192px);
+  	}
+
+    img {
+      transform: scale(1);
+      transition: transform .3s ease-in-out;
+    }
+  }
+  
+  &:hover .news-item__image-wrap img {
+    transform: scale(1.05);
+    transition: transform .3s ease-in-out;
+  }
+
+  &__date {
+    margin-bottom: rem(12px);
+    opacity: .7;
+
+    span {
+      display: inline-block;
+      padding-right: rem(18px);
+      position: relative;
+    }
+    
+    span::after {
+      content: '';
+      background: var(--color-paragraph);
+      border-radius: 50%;
+      height: rem(4px);
+      margin: auto;
+      @include position(absolute, $top: 0, $bottom: 0, $right: #{rem(7px)});
+      width: rem(4px);
+    }
+  }
+  
+  &__link {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    z-index: 2;
+  }
+  
+  &__caption {
+    padding: rem(20px) rem(24px) rem(6px);
+	
+    @media only screen and (max-width: $small) {
+	    padding: rem(19px) rem(16px) 0;
+  	}
+  }
+  
+  .title {
+    margin-bottom: rem(10px);
+
+    a {
+      color: var(--color-heading);
+      transition: all .3s ease-in-out;
+    }
+
+    a:hover {
+      background: var(--color-gradient-text);
+      -webkit-background-clip: text;
+              background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+  }
+}

data/assets/css/app/_other.scss

@@ -0,0 +1,58 @@
+/* -----------------------------------------------------------------
+    - Other
+----------------------------------------------------------------- */ 
+
+// Bact to top
+.back-to-top {
+  border-top: 1px solid var(--color-accent);
+  border-left: 1px solid var(--color-accent);
+  cursor: pointer;
+  height: rem(24px);
+  opacity: .5;
+  @include position(fixed, $right: rem(40px), $bottom: rem(30px));
+  width: rem(24px);
+  transform: rotate(45deg);
+  transition: opacity .35s ease-out;
+  z-index: 10;
+  
+  &:hover {
+    opacity: 1;
+  }
+  
+  @media only screen and (max-width: $medium) {
+    height: rem(24px);
+	  width: rem(24px);
+  }
+  
+  @media only screen and (max-width: $small) {
+    display: none!important;
+  }
+}
+
+.js-lines {
+  overflow: hidden;
+  
+  div {
+    overflow: hidden;
+  }
+}
+
+.js-words div div {
+  opacity: 0;
+}
+
+// Medium Zoom
+.medium-zoom-overlay {
+  background: var(--color-surface-1)!important;
+  z-index: 1104;
+}
+
+.medium-zoom-image {
+  cursor: pointer!important;
+  z-index: 1104;
+  
+  &--opened {
+    border-radius: rem(1px);
+	  height: 100%;
+  }
+}

data/assets/css/app/_popup.scss

@@ -0,0 +1,167 @@
+
+/* -----------------------------------------------------------------
+    - Popup
+----------------------------------------------------------------- */
+
+.popup {
+  background: var(--color-surface-1);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-20);
+  box-shadow: var(--box-shadow-80);
+  margin: rem(20px) auto;
+  padding: rem(30px);
+  position: relative;
+  width: calc(100% - #{rem(30px)});
+  max-width: rem(700px);
+
+  @media only screen and (max-width: $small) {
+    border-radius: var(--radius-14);
+    margin: rem(15px) auto;
+    padding: rem(15px);
+    width: calc(100% - #{rem(15px)});
+  }
+}
+
+.mfp-bg {
+  background: #0D0D0D;
+  opacity: .7!important;
+}
+
+.mfp-close {
+  $size-btn-close: rem(32px);
+  background: var(--color-surface-2)!important;
+  border-radius: var(--radius-8);
+  color: var(--color-heading)!important;
+  font-family: 'feather';
+  height: $size-btn-close;
+  right: rem(15px);
+  top: rem(15px);
+  text-indent: -99999px;
+  width: $size-btn-close;
+  
+  &::before {
+    content: '\ea11';
+    font-size: rem(16px);
+    @include flex($align: center, $justify: center);
+    @include position(absolute, $top: 0, $right: 0, $bottom: 0, $left: 0);
+    text-indent: 0;
+  }
+
+  &:focus {
+    right: rem(15px);
+    top: rem(15px);
+  }
+}
+
+/* Zoom-in effect */
+.mfp-zoom-in {
+  .mfp-with-anim {
+    opacity: 0;
+    transition: all 0.2s ease-in-out; 
+    transform: scale(0.8); 
+  }
+  
+  &.mfp-bg {
+    opacity: 0;
+    transition: all 0.3s ease-out;
+  }
+    
+  /* animate in */
+  &.mfp-ready {
+    .mfp-with-anim {
+      opacity: 1;
+      transform: scale(1); 
+    }
+  
+    &.mfp-bg {
+      opacity: 0.8;
+    }
+  }
+    
+  /* animate out */
+  &.mfp-removing {
+    .mfp-with-anim {
+      transform: scale(0.8); 
+      opacity: 0;
+    }
+  
+    &.mfp-bg {
+      opacity: 0;
+    }
+  }
+}
+  
+  /*  Move-horizontal effect */
+  .mfp-move-horizontal {
+    .mfp-with-anim {
+      opacity: 0;
+      transition: all 0.3s;
+      transform: translateX(-50px);
+    }
+    
+    &.mfp-bg {
+      opacity: 0;
+        transition: all 0.3s;
+    }
+    
+    /* animate in */
+    &.mfp-ready {
+      .mfp-with-anim {
+        opacity: 1;
+        transform: translateX(0);
+      }
+  
+      &.mfp-bg {
+        opacity: 0.8;
+      }
+    }
+    
+    /* animate out */
+    &.mfp-removing {
+      .mfp-with-anim {
+        transform: translateX(50px);
+        opacity: 0;
+      }
+  
+      &.mfp-bg {
+        opacity: 0;
+      }
+    }
+  }
+  
+  /* Zoom-out effect */
+  .mfp-zoom-out {
+    .mfp-with-anim {
+      opacity: 0;
+      transition: all 0.3s ease-in-out; 
+      transform: scale(1.3); 
+    }
+    
+    &.mfp-bg {
+      opacity: 0;
+        transition: all 0.3s ease-out;
+    }
+    
+    /* animate in */
+    &.mfp-ready {
+      .mfp-with-anim {
+        opacity: 1;
+        transform: scale(1); 
+      }
+      &.mfp-bg {
+        opacity: 0.8;
+      }
+    }
+    
+    /* animate out */
+    &.mfp-removing {
+      .mfp-with-anim {
+        transform: scale(1.3); 
+        opacity: 0;
+      }
+  
+      &.mfp-bg {
+        opacity: 0;
+      }
+    } 
+  }

data/assets/css/app/_portfolio.scss

@@ -0,0 +1,269 @@
+/* -----------------------------------------------------------------
+    - Portfolio
+----------------------------------------------------------------- */
+
+.m-item {
+  background: var(--color-accent);
+  //height: 200px;
+  margin-bottom: 30px;
+  width: calc(33.333% - 20px);
+
+  @media only screen and (max-width: $large) {
+    width: calc(50% - 15px);
+  }
+}
+
+.gutter-sizer {
+  width: 30px;
+}
+  
+.gallery-grid {
+  //@include flex();
+  
+  &__item {
+	  margin-bottom: rem(28px);
+    width: calc(33.333% - 20px);
+	
+	  &:hover .gallery-grid__image {
+	    transform: scale3d(1.05,1.05,1);
+	  }
+    
+    &:hover .gallery-grid__image-wrap::before {
+      background: rgba(13,13,13,.3);
+    }
+
+    &:hover .gallery-grid__image-wrap::after {
+      transform: scale(1);
+      transition: transform .6s ease-in-out;
+    }
+
+    @media only screen and (max-width: $large) {
+	    width: calc(50% - 16px);
+  	}
+	
+  	@media only screen and (max-width: $medium) {
+	    width: 100%;
+  	}
+  }
+  
+  &__image-wrap {
+    border-radius: var(--radius-16);
+    max-height: rem(204px);
+    height: 13vw;
+	  overflow: hidden;
+    position: relative;
+  	width: 100%;
+  	z-index: 1;
+	  
+    &::before {
+      content: '';
+      background: rgba(13,13,13,0);
+      height: 100%;
+      @include position(absolute, $top: 0, $left: 0);
+      width: 100%;
+      z-index: 1;
+      transition: all .5s ease-in-out;
+    }
+    
+    &::after {
+      content: '\e95f';
+      background: rgba(32, 32, 33, 0.8);
+      backdrop-filter: blur(6px);
+      border-radius: var(--radius-12);
+      font-family: 'feather' !important;
+      font-size: rem(18px);
+      color: var(--color-accent)!important;
+      @include flex($align: center, $justify: center);
+      height: rem(56px);
+      margin: auto;
+      @include position(absolute, $top: 0, $right: 0, $bottom: 0, $left: 0);
+      width: rem(56px);
+      transform: scale(0);
+      transition: transform .3s ease-in-out;
+      z-index: 2;
+    }
+
+    @media only screen and (max-width: $large-xl) {
+      max-height: rem(380px);
+	    height: 15.5vw;
+	  }
+
+	  @media only screen and (max-width: $large) {
+	    height: rem(208px);
+	  }
+	
+	  @media only screen and (max-width: $medium) {
+	    height: rem(288px);
+  	}
+
+    @media only screen and (max-width: $small) {
+	    height: rem(190px);
+  	}
+  }
+  
+  &__image {
+    border-radius: var(--radius-16);
+  	transform: scale3d(1,1,1);
+    transition: transform .4s ease-in-out;
+  }
+  
+  &__caption {
+    padding: 0 rem(8px);
+  }
+  
+  &__title {
+    font-size: rem(15px);
+    font-weight: 300;
+    color: var(--color-heading);
+	  margin-top: rem(16px);
+  	margin-bottom: 0;
+  }
+  
+  &__category {
+    font-size: rem(14px);
+    color: var(--color-paragraph);
+  	display: block;
+    opacity: .7;
+  }
+}
+
+// Filter
+@media only screen and (min-width: 769px) {
+  .filter {
+    @include inline-flex($wrap: wrap);
+    list-style: none;
+    margin-bottom: rem(28px);
+    padding: 0;
+  
+    &__item {
+      padding-right: rem(19px);
+	
+	    &:first-child {
+	      display: none;
+	    }	
+	
+	    &:last-child {
+	      padding-right: 0;
+	    }
+	  
+	    &.active a {
+        cursor: default;
+        opacity: 1!important;
+	      background: var(--color-gradient-text);
+        -webkit-background-clip: text;
+                background-clip: text;
+        -webkit-text-fill-color: transparent;
+        -webkit-text-decoration-skip: objects;
+	    }
+    }
+  
+    &__link {
+	    color: var(--color-paragraph);
+      font-weight: 500;
+      padding: 0 rem(4px);
+      text-decoration: none;
+	    display: block;
+	    overflow: hidden;
+      opacity: 1;
+	    position: relative;
+      transition: all .4s ease-in-out;
+	  
+	    &:hover {
+        color: inherit;
+        opacity: .7;
+	      text-decoration: none;
+	    }
+    }
+  }
+}
+
+.select .placeholder {
+  display: none;
+}
+
+@media only screen and (max-width: $medium) {
+  .select {
+    border: 1px solid var(--color-border);
+	  border-radius: var(--radius-14);
+    display: block;
+    margin-bottom: rem(32px);
+    padding: rem(3px) rem(16px);
+	  position: relative;
+    vertical-align: middle;
+    text-align: left;
+    user-select: none;
+	  width: 100%;
+    -webkit-touch-callout: none;
+    z-index: 2;
+  
+    .placeholder {
+	    cursor: pointer;
+	    display: block;
+	    padding: rem(8px) 0;
+      position: relative;
+      z-index: 1;
+
+      &:after {
+	      @include position(absolute, $top: 50%, $right: rem(2px));
+        transform: translateY(-50%);
+        font-family: 'icomoon';
+        content: '\e90e';
+        z-index: 10;
+      }
+    }
+
+    &.is-open {
+      .placeholder:after{
+        content: '\e90f';
+      }
+      ul {
+        display: block;
+      }
+    }
+
+    ul {
+	    background-color: var(--color-surface-1);
+      border: 1px solid var(--color-border);
+	    box-shadow: var(--box-shadow-40);
+	    border-radius: var(--radius-14); 
+      display: none;
+	    max-height: rem(600px);
+	    overflow: hidden;
+      overflow-y: auto;
+      padding: rem(9px) 0;
+	    @include position(absolute, $top: 100%, $left: 0);
+      width: 100%;
+	    z-index: 100;
+	   
+      li {
+        display: block;
+        text-align: left;
+        padding: rem(8px) rem(16px);
+        cursor: pointer;
+
+        &:hover {
+          background-color: var(--color-surface-2);
+        }
+		
+		    &:hover a {
+		      color: var(--color-accent);
+		    }
+		
+	      &:first-child {
+	        display: none;
+	      }
+	  
+	      a {
+		      color: var(--color-paragraph);
+	        text-decoration: none;
+	      }
+      }
+    }
+  }
+}
+
+@media only screen and (max-width: $small) {
+  .select {
+    margin-bottom: rem(24px);
+  }
+}