feat: fix home componet

dpaniq · Jul 2, 2024 · 55c0cee · 55c0cee
1 parent 41bebb1
commit 55c0cee
Show file tree

Hide file tree

Showing 9 changed files with 116 additions and 71 deletions.
diff --git a/src/app/app.component.css b/src/app/app.component.css
@@ -1,10 +1,10 @@
 app-header {
-  height: 16vh;
+  height: 15vh;
 }
 
 main {
-  /* width: 800px; */
-  height: 69vh;
+  width: 1200px;
+  height: 70vh;
   display: flex;
   align-items: center;
   justify-content: center;

diff --git a/src/app/features/home-brand/home-brand.component.css b/src/app/features/home-brand/home-brand.component.css
@@ -1,5 +1,6 @@
 :host {
-  position: absolute;
+  position: relative;
+  width: 100%;
   left: 0;
   right: 0;
   top: 0;
@@ -14,40 +15,72 @@
   display: flex;
   gap: 10px;
   flex-direction: column;
-  width: calc(100vh - 80%);
-
-  padding: 40px;
+  width: calc(100vh - 60%);
 
   img.studio {
     padding: 10px 0;
     border-top: 5px solid whitesmoke;
   }
 
-  animation: zoom ease-in-out 5s;
+  animation: zoom ease-in-out 5s infinite;
   animation-direction: alternate;
   animation-timing-function: both;
 }
+/* 
+.pic-1 {
+  background-image: linear-gradient(
+    to top,
+    rgba(239, 239, 239, 255),
+    rgba(239, 239, 239, 0)
+  );
+  transform: perspective(1000px) rotateY(0deg);
+  animation: fade 2s ease-in-out infinite alternate;
+} */
+
+@keyframes fade {
+  from {
+    opacity: 1; /* Полностью видимо */
+  }
+  to {
+    opacity: 0.5; /* Наполовину прозрачно */
+  }
+}
 
 @keyframes zoom {
   0% {
-    filter: blur(10px);
+    filter: blur(10px) brightness(0.5);
     transform: scale3d(1.02, 1.02, 1);
   }
 
+  12% {
+    filter: blur(6px) brightness(0.2);
+    transform: scale3d(1.02, 1, 2);
+  }
+
   33% {
     transform: scale(1.05);
   }
 
   50% {
     filter: blur(1px);
     transform: scale(1.02);
-    transform: scale3d(1.02, 1.02, 1);
+    transform: scale3d(1.04, 1.06, 1);
   }
 
   66% {
     transform: scale(1.01);
   }
 
+  75% {
+    filter: blur(6px) brightness(0.2) contrast(0.5);
+    transform: scale3d(1.02, 1, 2);
+  }
+
+  90% {
+    filter: none;
+    transform: none;
+  }
+
   100% {
     filter: none;
     transform: none;

diff --git a/src/app/features/home-brand/home-brand.component.html b/src/app/features/home-brand/home-brand.component.html
@@ -8,3 +8,7 @@
     src="assets/brand/studio.svg"
   />
 </div>
+<!-- 
+<div class="pic-1">
+  <img src="assets/img/gif/joker.webp" />
+</div> -->
diff --git a/src/app/features/portfolio-block/portfolio-block.component.css b/src/app/features/portfolio-block/portfolio-block.component.css
@@ -1,6 +1,6 @@
 :host {
   width: 920px;
-  height: 500px;
+  height: 600px;
 
   scrollbar-color: tomato rgba(0, 0, 0, 0.3);
   scrollbar-width: 5em;
@@ -11,17 +11,16 @@
 
   section {
     &.grid {
+      height: 500px;
       position: relative;
       display: grid;
-      gap: 10px;
-      grid-template-rows: min-content;
-      padding: 0 20px;
+      gap: 20px 20px;
+      grid-template-rows: max-content;
+      padding: 0 30px;
 
-      aspect-ratio: 2/1;
       overflow: hidden;
       overflow-y: scroll;
       scroll-snap-type: y mandatory;
-      scroll-snap-points-y: repeat(500px);
 
       div {
         text-align: center;
@@ -68,6 +67,7 @@
       }
 
       img {
+        width: 100%;
         object-fit: cover;
         filter: grayscale(1);
 
@@ -88,6 +88,9 @@
 
       &.view-3 {
         grid-template-columns: repeat(3, 1fr);
+        div {
+          height: 160px;
+        }
       }
     }
   }

diff --git a/src/app/features/portfolio-block/portfolio-block.component.html b/src/app/features/portfolio-block/portfolio-block.component.html
@@ -19,24 +19,28 @@
   @case (2) {
     <section class="grid view-2">
       @for (portfolio of portfolios(); track portfolio) {
-        <img
-          width="450"
-          height="330"
-          [ngSrc]="portfolio.preview"
-          loading="lazy"
-        />
+        <div>
+          <img
+            width="450"
+            height="330"
+            [ngSrc]="portfolio.preview"
+            loading="lazy"
+          />
+        </div>
       }
     </section>
   }
   @case (3) {
     <section class="grid view-3">
       @for (portfolio of portfolios(); track portfolio) {
-        <img
-          width="300"
-          height="130"
-          [ngSrc]="portfolio.preview"
-          loading="lazy"
-        />
+        <div>
+          <img
+            width="300"
+            height="160"
+            [ngSrc]="portfolio.preview"
+            loading="lazy"
+          />
+        </div>
       }
     </section>
   }

diff --git a/src/app/pages/home-page.component.ts b/src/app/pages/home-page.component.ts
@@ -1,8 +1,8 @@
-import { HomeBrandComponent } from './../features/home-brand/home-brand.component';
 import { Component } from '@angular/core';
-import { IntroComponent } from '../features/intro/intro.component';
 import { AboutComponent } from '../features/about/about.component';
+import { IntroComponent } from '../features/intro/intro.component';
 import { PortfolioTimelineComponent } from '../features/portfolio-timeline/portfolio-timeline.component';
+import { HomeBrandComponent } from './../features/home-brand/home-brand.component';
 
 @Component({
   selector: 'app-home-page',
@@ -15,6 +15,7 @@ import { PortfolioTimelineComponent } from '../features/portfolio-timeline/portf
   ],
   styles: `
   :host {
+    width:100%;
     app-intro {
       z-index: 9999;
     }

diff --git a/src/app/pages/portfolio-block-page/portfolio-block-page.component.css b/src/app/pages/portfolio-block-page/portfolio-block-page.component.css
@@ -1,16 +1,11 @@
 .mat-mdc-chip-set-stacked {
-  width: min-content;
-}
-
-section.grid-view {
   width: 100%;
-  display: flex;
-  justify-content: end;
 }
 
 section.content {
-  display: flex;
-  gap: 30px;
+  display: grid;
+  grid-template-columns: 200px max-content;
+  justify-content: center;
 }
 
 .mat-mdc-standard-chip {
@@ -29,5 +24,9 @@ section.content {
     border-radius: 0 !important;
   }
 
-
+  ::ng-deep
+    mat-button-toggle-group.mat-button-toggle-group-appearance-standard {
+    border-radius: 0;
+    /* border: solid 1px tomato; */
+  }
 }
diff --git a/src/app/pages/portfolio-block-page/portfolio-block-page.component.html b/src/app/pages/portfolio-block-page/portfolio-block-page.component.html
@@ -1,36 +1,37 @@
-<section class="content">
-  <aside>
-    <section class="grid-view">
-      <mat-button-toggle-group
-        (change)="onUpdateGridSize($event.value)"
-        value="1"
-      >
-        <mat-button-toggle value="1">
-          <mat-icon fontIcon="splitscreen"></mat-icon>
-        </mat-button-toggle>
-        <mat-button-toggle value="2">
-          <mat-icon fontIcon="view_column_2"></mat-icon>
-        </mat-button-toggle>
-        <mat-button-toggle value="3">
-          <mat-icon fontIcon="view_column"></mat-icon>
-        </mat-button-toggle>
-      </mat-button-toggle-group>
-    </section>
+<div align="right">
+  <section class="grid-view">
+    <mat-button-toggle-group
+      [appearance]="'standard'"
+      (change)="onUpdateGridSize($event.value)"
+      value="1"
+    >
+      <mat-button-toggle value="1">
+        <mat-icon fontIcon="splitscreen"></mat-icon>
+      </mat-button-toggle>
+      <mat-button-toggle value="2">
+        <mat-icon fontIcon="view_column_2"></mat-icon>
+      </mat-button-toggle>
+      <mat-button-toggle value="3">
+        <mat-icon fontIcon="view_column"></mat-icon>
+      </mat-button-toggle>
+    </mat-button-toggle-group>
+  </section>
+</div>
 
-    <br />
+<br />
 
-    <mat-chip-listbox
-      class="mat-mdc-chip-set-stacked"
-      multiple="true"
-      (change)="changeCategory($event)"
-    >
-      @for (category of categories; track category) {
-        <mat-chip-option [selected]="actualCategory().includes(category)">
-          {{ category }}
-        </mat-chip-option>
-      }
-    </mat-chip-listbox>
-  </aside>
+<section class="content">
+  <mat-chip-listbox
+    class="mat-mdc-chip-set-stacked"
+    multiple="true"
+    (change)="changeCategory($event)"
+  >
+    @for (category of categories; track category) {
+      <mat-chip-option [selected]="actualCategory().includes(category)">
+        {{ category }}
+      </mat-chip-option>
+    }
+  </mat-chip-listbox>
 
   <app-portfolio-block
     [gridView]="gridView()"

diff --git a/src/styles/core.css b/src/styles/core.css
@@ -26,7 +26,7 @@ body {
       --lineWidth: 5px;
       --lineLength: 140px;
       --lineLength: calc(50px + 2vh);
-      --lineColor: whitesmoke;
+      --lineColor: rgb(59, 59, 59);
       --linearGradientColor: linear-gradient(
         var(--lineColor),
         var(--lineColor)