add items style

.gitignore

@@ -2,3 +2,5 @@
 node_modules/
 
 package-lock\.json
+
+src/assets/images/contents/

src/app/portfolio/portfolio.component.html

@@ -1,8 +1,13 @@
 <div class="component-portfolio">
   <div class="container">
     <div class="row">
-      <div class="col-3 box" *ngFor="let portfolioItems of portfolioItems">
-        {{portfolioItems.title}}
+      <div class="col-3 box" [ngClass]="'skew-' + (item.id % 6)" *ngFor="let item of portfolioItems">
+        <img class="image" src="assets/{{item.image}}">
+        <div class="text">
+          <span class="title">{{item.title}}</span>
+          <span class="type">{{item.type}}</span>
+          <span class="tags">{{item.tags}}</span>
+        </div>
       </div>
     </div>
   </div>

src/app/portfolio/portfolio.component.scss

@@ -1,7 +1,76 @@
 @import "../../assets/scss/variables";
 
 .component-portfolio {
+  padding-top: 100px;
+
   .box {
+    position: relative;
+    display: flex;
+    background: $black;
+    border-radius: 10px;
+    overflow: hidden;
+    margin: 40px;
+    padding: 20px;
+    cursor: pointer;
+    transition: transform .4s;
+
+    .image {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      height: 100%;
+      width: 100%;
+      object-fit: cover;
+      transform: translate(-50%, -50%);
+      transition: transform .4s;
+      opacity: .5;
+      z-index: 0;
+    }
+
+    .text {
+      display: block;
+      margin: auto;
+      text-align: center;
+      transform: translate(0%, 0%);
+      z-index: 1;
+
+      .title {
+        display: block;
+        color: $white;
+        font-size: $font-24;
+        text-transform: uppercase;
+        font-weight: bold;
+      }
+
+      .type {
+        display: block;
+        color: $white;
+        font-size: $font-18;
+        font-weight: bold;
+      }
+
+      .tags {
+        display: block;
+        color: $white;
+        font-size: $font-14;
+        text-transform: uppercase;
+        font-weight: bold;
+        padding-top: 20px;
+      }
+    }
+
+    @each $angle in 0,1,2,3,4,5,6 {
+      &.skew-#{$angle} {transform: skew(#{$angle - 3}deg, #{$angle - 3}deg) ;}
+    }
 
+    &:hover {
+      //transform: scale(1.4) skew(2deg, 2deg) rotate(2deg);
+      @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) ;}
+        }
+      .image {
+        transform: translate(-50%, -50%) scale(1.4);
+      }
+    }
   }
 }