working on fadeout/in

Carpenteri1 · Mar 22, 2024 · 6878a79 · 6878a79
1 parent 09938e4
commit 6878a79
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 32 deletions.
diff --git a/src/app/Utility/stringhandler.ts b/src/app/Utility/stringhandler.ts
@@ -70,14 +70,14 @@ export class StringHandler {
     static readonly yalm: string = "Yalm";
     static readonly vuejs: string = "Vue.js";
 
-    static readonly npm: string = "NPM";
     static readonly git: string = "Git";
     static readonly linux: string = "Linux";
     static readonly mysql: string = "Mysql";
     static readonly mssql: string = "MSSQL";
     static readonly yatch: string = "Yatch";
     static readonly rancher: string = "Rancher";
     static readonly aws: string = "AWS";
+    static readonly rabbitMQ: string = "RabbitMQ";
 
     //#endregion
 

diff --git a/src/app/component/carouselcomponent/carousel.component.html b/src/app/component/carouselcomponent/carousel.component.html
@@ -7,10 +7,10 @@ <h2>{{title}}</h2>
             <button class="no-outline" (click)="toggleGroup('left')"><i class="bi bi-arrow-left"></i></button>
         </div>
             <div class="col-10">
-                <div *ngFor="let item of currentListOfSKills" @fade>
+                <div *ngFor="let item of currentListOfSKills" @fade [@fadeOut]="fadeIn ? null : true" (@fadeOut.done)="fadeOutDone($event)" [@fadeIn]="fadeIn">
                     <div class="row mb-2" style="position: relative;">
                         <div class="progress-loaded" style="background-color:#b29600;width:{{item.level}}%;"></div>
-                            <div style=""  class="progress d-flex justify-content-center align-items-center">
+                            <div class="progress d-flex justify-content-center align-items-center">
                                 <p class="pt-3 progress-text">{{item.name}} {{item.level}}%</p>
                             </div>
                     </div>

diff --git a/src/app/component/carouselcomponent/carousel.component.ts b/src/app/component/carouselcomponent/carousel.component.ts
@@ -1,60 +1,63 @@
 import { Component, OnInit } from "@angular/core";
-import { transition, style, animate, trigger } from '@angular/animations';
+import { transition, style, animate, trigger, AnimationEvent } from '@angular/animations';
 import { ISkill } from "src/app/Interfaces/ISkill";
 import { StringHandler } from "src/app/Utility/stringhandler";
 @Component({
     selector: 'carousel-component',
     templateUrl: 'carousel.component.html',
     styleUrls: ['carousel.component.css'],
-    animations: 
-    [    
-        trigger('fade', [
-            transition(':enter', [
-                style({ opacity: 0 }),
-                animate(3000, style({ opacity: 1 }))
-            ]),
-            transition(':leave', [
-                style({ opacity: 1 }),
-            ])
-        ])     
-    ]
+    animations: [
+        trigger('fadeOut', [
+          transition(':leave', [
+            animate('2000ms', style({ opacity: 0 }))
+          ])
+        ]),
+        trigger('fadeIn', [
+          transition(':enter', [
+            style({ opacity: 0 }),
+            animate('2000ms', style({ opacity: 1 }))
+          ])
+        ])
+      ]
 })
 
 export class CarouselComponent implements OnInit {
 
     readonly title: string = StringHandler.carouselTitle;
-
+    private interval: number = 8000;
+    fadeIn = false;
+
     private intervalId: any;
 
     skillList1: ISkill[] = [
         { name: StringHandler.dotNet, level: 70 },
-        { name: StringHandler.xamarin, level: 40 },
-        { name: StringHandler.angular, level: 50 },
+        { name: StringHandler.xamarin, level: 20 },
+        { name: StringHandler.angular, level: 40 },
         { name: StringHandler.vuejs, level: 30 },
-        { name: StringHandler.java, level: 20 },
-        { name: StringHandler.xml, level: 50 },
+        { name: StringHandler.java, level: 10 },
+        { name: StringHandler.xml, level: 60 },
         { name: StringHandler.json, level: 60 },
         { name: StringHandler.yalm, level: 20 },
     ];
 
     skillList2: ISkill[] = [
         { name: StringHandler.csharp, level: 80 },
-        { name: StringHandler.sql, level: 50 },
+        { name: StringHandler.sql, level: 60 },
         { name: StringHandler.html, level: 70 },
-        { name: StringHandler.bootstrap, level: 60 },
-        { name: StringHandler.css, level: 50 },
+        { name: StringHandler.bootstrap, level: 40 },
+        { name: StringHandler.css, level: 40 },
         { name: StringHandler.javascript, level: 35 },
         { name: StringHandler.typescript, level: 35 },
     ];
 
     skillList3: ISkill[] = [
-        { name: StringHandler.npm, level: 20 },
         { name: StringHandler.git, level: 60 },
         { name: StringHandler.linux, level: 60 },
-        { name: StringHandler.rancher, level: 20 },
+        { name: StringHandler.rancher, level: 10 },
         { name: StringHandler.docker, level: 10 },
         { name: StringHandler.kubernetes, level: 5 },
-        { name: StringHandler.aws, level: 20 },
+        { name: StringHandler.aws, level: 10 },
+        { name: StringHandler.rabbitMQ, level: 10 },
     ];
 
     listOfSkills: ISkill[][] = [
@@ -114,11 +117,21 @@ export class CarouselComponent implements OnInit {
         {
             clearInterval(this.intervalId);
         }
-        this.carouselTime(5000);
+        if(this.fadeIn)
+            this.carouselTime(this.interval);
+    }
+
+    fadeOutDone(event: AnimationEvent) {
+        if(event.toState === 'void'){
+            this.fadeIn = true;
+        }
+        else{
+            this.fadeIn = false;
+        }
     }
 
     ngOnInit() 
     {
-        this.carouselTime(5000);
+        this.carouselTime(this.interval);
     }    
 }
diff --git a/src/app/component/typewritercomponent/typewriter.component.html b/src/app/component/typewritercomponent/typewriter.component.html
@@ -2,16 +2,16 @@
   <div class="row">
     <div class="col-xl-1 col-lg-1 col-md-1 col-sm-1 col-xs-1"></div>
     <div class="col-xl-10 col-lg-10 col-md-10 col-sm-10 col-xs-10">
-      <h1 class="title highlight-SurName" @fade> {{ titleOne }}</h1>
+      <h3 class="title highlight-SurName" @fade> {{ titleOne }}</h3>
     </div>
     <div class="col-xl-1 col-lg-1 col-md-1 col-sm-1 col-xs-1"></div>
   </div>
     <div class="row pt-3">
       <div class="col-2"></div>
       <div class="col-9">
-        <h2>
+        <h3>
           {{ titleTwo }}<span class="blinking-cursor">{{blinkingCursor}}</span><span class="none-blinking-cursor">{{titleTwoCursor}}</span>
-        </h2>
+        </h3>
       </div>
       <div class="col-1"></div>
     </div>