refator style defs for home template

src/app/animations/animations.ts

@@ -0,0 +1,42 @@
+import { animate, keyframes, query, stagger, style, transition, trigger } from '@angular/animations';
+
+export const slidInAnimations = [
+  trigger('slideIn', [
+    transition(':enter', [
+      style({ overflow: 'hidden' }),
+      query('p, h1, h2, h3, h4, h5, h6, span, a', [
+        style({ opacity: 0, transform: 'translateY(20px)' }),
+        stagger(100, [animate('800ms ease-out', style({ opacity: 1, transform: 'translateY(0)' }))]),
+      ]),
+    ]),
+  ]),
+];
+
+export const wobbleAnimation = [
+  trigger('wobble', [
+    transition('* => *', [
+      animate(
+        '5s',
+        keyframes([
+          style({ borderRadius: '50%', offset: 0 }),
+          style({ borderRadius: '80% 10%', offset: 0.2 }),
+          style({ borderRadius: '60% 30%', offset: 0.3 }),
+          style({ borderRadius: '50%', offset: 0.5 }),
+          style({ borderRadius: '30% 60%', offset: 0.7 }),
+          style({ borderRadius: '10% 80%', offset: 0.8 }),
+          style({ borderRadius: '50%', offset: 1 }),
+        ])
+        // keyframes([
+        //   style({ borderRadius: '50%', offset: 0 }),
+        //   style({ borderRadius: '10% 20%', offset: 0.15 }),
+        //   style({ borderRadius: '30% 10%', offset: 0.3 }),
+        //   style({ borderRadius: '20% ', offset: 0.45 }),
+        //   style({ borderRadius: '30% 10% ', offset: 0.6 }),
+        //   style({ borderRadius: '30% ', offset: 0.75 }),
+        //   style({ borderRadius: '70% 20%', offset: 0.9 }),
+        //   style({ borderRadius: '50%', offset: 1 }),
+        // ])
+      ),
+    ]),
+  ]),
+];

src/app/home/home.component.html

@@ -1,5 +1,9 @@
-<section class="intro">
+<section class="intro" [@slideIn]>
-  <span class="intro__img"></span>
+  <div class="intro__img-container">
+    <!-- <div class="intro__circle intro__circle--large"></div> -->
+    <div class="intro__circle intro__circle--large" [@wobble]="isWobbling" (@wobble.done)="onwobbleDone()"></div>
+    <div class="intro__circle intro__circle--small"></div>
+  </div>
   <h1 class="intro__header">Hi 👋, I'm Raghu Chagarlamudi</h1>
   <p class="intro__sub-head">I am a well-versed front-end web developer with extensive experience in building delightful and scalable web applications.</p>
   <a mat-fab extended href="https://www.google.com/" target="_blank" class="intro__button">Get to Know More About Me</a>

src/app/home/home.component.scss

@@ -3,14 +3,33 @@
   justify-content: center;
   flex-direction: column;
   align-items: center;
+  padding: 1rem;
 
-  &__img {
+  &__img-container {
-    display: block;
+    position: relative;
-    height: 300px;
+    width: 208px;
-    width: 300px;
+    height: 208px;
+  }
+
+  &__circle {
+    position: absolute;
     border-radius: 50%;
-    background-image: url("../../assests/images/rc-logo.jpeg");
+
-    background-size: cover;
+    &--large {
+      height: 208px;
+      width: 208px;
+      background-color: var(--mat-sys-primary);
+    }
+
+    &--small {
+      height: 200px;
+      width: 200px;
+      background-image: url("../../assests/images/rc-logo.jpeg");
+      background-size: cover;
+      top: 50%;
+      left: 50%; 
+      transform: translate(-50%, -50%);
+    }
   }
 
   &__header {

src/app/home/home.component.ts

@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
 
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
+import { slidInAnimations, wobbleAnimation } from '../animations/animations';
 
 @Component({
   standalone: true,
@@ -9,5 +10,12 @@ import { MatIconModule } from '@angular/material/icon';
   imports: [MatButtonModule, MatIconModule],
   templateUrl: './home.component.html',
   styleUrl: './home.component.scss',
+  animations: [slidInAnimations, wobbleAnimation],
 })
-export class HomeComponent {}
+export class HomeComponent {
+  isWobbling = true;
+
+  onwobbleDone() {
+    this.isWobbling = !this.isWobbling;
+  }
+}