new portfolio grid style

add favicon

angular.json

@@ -24,7 +24,7 @@
             "tsConfig": "tsconfig.app.json",
             "aot": true,
             "assets": [
-              "src/favicon.ico",
+              "src/assets/images/favicon.png",
               "src/assets"
             ],
             "styles": [

src/app/about/about.component.scss

@@ -64,7 +64,7 @@
       border: none;
       padding: 0;
       font-size: $font-40;
-      color: $white-alpha;
+      color: $black-alpha;
       background: transparent;
       cursor: pointer;
       transition: transform .3s;

src/app/app-layout/app-layout.component.ts

@@ -97,6 +97,6 @@ export class AppLayoutComponent implements OnInit {
 
 
   particlesLoaded(container: Container): void {
-    console.log('particlesLoaded', container)
+    //console.log('particlesLoaded', container)
   }
 }

src/app/detail/detail.component.scss

@@ -41,7 +41,7 @@
       border: none;
       padding: 0;
       font-size: $font-40;
-      color: $white-alpha;
+      color: $black-alpha;
       background: transparent;
       cursor: pointer;
       transition: transform .3s;

src/app/portfolio/portfolio.component.html

@@ -1,7 +1,7 @@
 <div class="component-portfolio">
   <div class="container">
     <div class="row">
-      <div class="col-12 col-sm-6 col-md-4 col-lg-3" *ngFor="let item of portfolioItems">
+      <div class="col-12 col-sm-6 mx-auto" [ngClass]="'col-md-' + ((item.id % 3)+3)" *ngFor="let item of portfolioItems">
         <div class="box" [ngClass]="'skew-' + (item.id % 6)" (click)="showDetails(item.id)">
           <img class="image" src="assets/{{item.image}}">
           <div class="text">

src/app/portfolio/portfolio.component.scss

@@ -6,13 +6,15 @@
   .box {
     position: relative;
     display: flex;
-    background: $black;
+    //background: $black-alpha;
     border-radius: 10px;
     overflow: hidden;
-    margin: 20px 0;
-    padding: 20px;
+    margin: 10px 0;
+    padding: 40px 20px;
+    min-height: 250px;
     cursor: pointer;
-    transition: transform .4s;
+    transition: transform .4s, background .4s;
+    -webkit-backface-visibility: hidden;
 
     .image {
       position: absolute;
@@ -21,9 +23,11 @@
       height: 100%;
       width: 100%;
       object-fit: cover;
-      transform: translate(-50%, -50%);
-      transition: transform .4s;
+      transform: translate(-50%, -50%) scale(1.2);
       opacity: .5;
+      filter: grayscale(100%) invert(100%);
+      transition: transform .4s, opacity .4s, filter .4s;
+      -webkit-backface-visibility: hidden;
       z-index: 0;
     }
 
@@ -32,47 +36,67 @@
       margin: auto;
       text-align: center;
       transform: translate(0%, 0%);
+      color: $black;
+      transition: color .4s;
+      -webkit-backface-visibility: hidden;
       z-index: 1;
 
       .title {
         display: block;
-        color: $white;
-        font-size: $font-24;
+        font-size: $font-20;
         text-transform: uppercase;
         font-weight: bold;
       }
 
       .type {
         display: block;
-        color: $white;
-        font-size: $font-18;
+        font-size: $font-16;
         font-weight: bold;
       }
 
       .tags {
         display: block;
-        color: $white;
-        font-size: $font-14;
+        font-size: $font-12;
         text-transform: uppercase;
         font-weight: bold;
-        padding-top: 20px;
+        padding-top: 10px;
       }
     }
 
     @each $angle in 0,1,2,3,4,5,6 {
-      &.skew-#{$angle} {transform: skew(#{$angle - 3}deg, #{$angle - 3}deg) ;}
+      &.skew-#{$angle} {
+        transform: skew(#{$angle - 3}deg, #{$angle - 3}deg);
+        /*animation: zoom#{$angle} #{$angle + 3}s ease-in infinite forwards;
+        @keyframes zoom#{$angle} {
+          0% { transform: scale(1) skew(#{$angle - 3}deg, #{$angle - 3}deg); }
+          50% { transform: scale(1.1) skew(#{$angle - 3}deg, #{$angle - 3}deg); }
+          75% { transform: scale(.9) skew(#{$angle - 3}deg, #{$angle - 3}deg); }
+          100% { transform: scale(1) skew(#{$angle - 3}deg, #{$angle - 3}deg); }
+        }*/
+      }
     }
 
     &:hover {
+      background: $black;
       z-index: 50;
 
+      //animation-play-state: paused;
+
       @each $angle in 0,1,2,3,4,5,6 {
-          &.skew-#{$angle} {transform: scale(1.4) rotate(2deg) skew(#{3 - $angle}deg, #{3 - $angle}deg) ;}
+        &.skew-#{$angle} {
+          transform: scale(1.4) rotate(2deg) skew(#{3 - $angle}deg, #{3 - $angle}deg);
+        }
       }
 
       .image {
-        transform: translate(-50%, -50%) scale(1.4);
+        filter: grayscale(100%) invert(0%) brightness(.5);
+        opacity: .9;
+        transform: translate(-50%, -50%) scale(1.6);
+      }
+      .text {
+        color: $yellow;
       }
     }
   }
 }
+

src/assets/scss/variables.scss

@@ -4,14 +4,14 @@ $grid-breakpoints: (
   sm: 576px,
   md: 768px,
   lg: 992px,
-  xl: 1200px
+  xl: 1440px
 );
 
 $container-max-widths: (
   sm: 540px,
   md: 720px,
   lg: 960px,
-  xl: 1140px
+  xl: 1418px
 );
 
 $grid-columns:        12;

src/index.html

@@ -5,7 +5,7 @@
   <title>DslakWebsite</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link rel="icon" type="image/x-icon" href="assets/images/favicon.png">
 </head>
 <body>
   <app-root></app-root>