refator style defs for home template

_theme-colors.scss

@@ -1,137 +0,0 @@
-// This file was generated by running 'ng generate @angular/material:theme-color'.
-// Proceed with caution if making changes to this file.
-
-@use 'sass:map';
-@use '@angular/material' as mat;
-
-// Note: Color palettes are generated from primary: f4acb7
-$_palettes: (
-  primary: (
-    0: #000000,
-    10: #360c17,
-    20: #50212b,
-    25: #5e2c36,
-    30: #6b3741,
-    35: #79424c,
-    40: #874e58,
-    50: #a36670,
-    60: #c07f89,
-    70: #de98a3,
-    80: #fcb3be,
-    90: #ffd9de,
-    95: #ffecee,
-    98: #fff8f7,
-    99: #fffbff,
-    100: #ffffff,
-  ),
-  secondary: (
-    0: #000000,
-    10: #2b1519,
-    20: #422a2e,
-    25: #4e3538,
-    30: #5a4044,
-    35: #674b4f,
-    40: #74575b,
-    50: #8e6f73,
-    60: #aa888d,
-    70: #c6a2a7,
-    80: #e3bdc2,
-    90: #ffd9de,
-    95: #ffecee,
-    98: #fff8f7,
-    99: #fffbff,
-    100: #ffffff,
-  ),
-  tertiary: (
-    0: #000000,
-    10: #2b1700,
-    20: #472a00,
-    25: #563403,
-    30: #633f0e,
-    35: #704b1a,
-    40: #7e5624,
-    50: #9a6f3a,
-    60: #b68851,
-    70: #d4a269,
-    80: #f2bd81,
-    90: #ffddb9,
-    95: #ffeedf,
-    98: #fff8f4,
-    99: #fffbff,
-    100: #ffffff,
-  ),
-  neutral: (
-    0: #000000,
-    10: #201a1b,
-    20: #352f2f,
-    25: #413a3a,
-    30: #4c4546,
-    35: #585151,
-    40: #645c5d,
-    50: #7e7575,
-    60: #988e8f,
-    70: #b3a9a9,
-    80: #cfc4c4,
-    90: #ece0e0,
-    95: #faeeee,
-    98: #fff8f7,
-    99: #fffbff,
-    100: #ffffff,
-    4: #120d0e,
-    6: #171213,
-    12: #241e1f,
-    17: #2f2829,
-    22: #3a3334,
-    24: #3e3838,
-    87: #e3d7d8,
-    92: #f1e5e6,
-    94: #f7ebeb,
-    96: #fdf1f1,
-  ),
-  neutral-variant: (
-    0: #000000,
-    10: #24191a,
-    20: #3a2d2f,
-    25: #46383a,
-    30: #514345,
-    35: #5e4f50,
-    40: #6a5b5c,
-    50: #847375,
-    60: #9e8c8e,
-    70: #baa7a8,
-    80: #d6c2c3,
-    90: #f3dddf,
-    95: #ffecee,
-    98: #fff8f7,
-    99: #fffbff,
-    100: #ffffff,
-  ),
-  error: (
-    0: #000000,
-    10: #410002,
-    20: #690005,
-    25: #7e0007,
-    30: #93000a,
-    35: #a80710,
-    40: #ba1a1a,
-    50: #de3730,
-    60: #ff5449,
-    70: #ff897d,
-    80: #ffb4ab,
-    90: #ffdad6,
-    95: #ffedea,
-    98: #fff8f7,
-    99: #fffbff,
-    100: #ffffff,
-  ),
-);
-
-$_rest: (
-  secondary: map.get($_palettes, secondary),
-  neutral: map.get($_palettes, neutral),
-  neutral-variant: map.get($_palettes,  neutral-variant),
-  error: map.get($_palettes, error),
-);
-
-$primary-palette: map.merge(map.get($_palettes, primary), $_rest);
-$tertiary-palette: map.merge(map.get($_palettes, tertiary), $_rest);

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/app.component.scss

@@ -1,11 +1,16 @@
 :host {
   display: flex;
   flex-direction: column;
-  min-height: 100vh;
+  height: 100vh;
 }
 
 main {
   flex: 1;
-  padding: 0 1rem;
+  overflow-y: auto;
-  overflow: auto;
+  margin-top: 3.5rem;
+
+  //set content always center
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }

src/app/header/header.component.html

@@ -1,17 +1,8 @@
-<!-- <header>
-  <span>Raghu Chagarlamudi</span>
-  <span class="spacer"></span>
-  <nav>
-    <button mat-flat-button>Basic</button>
-    <button mat-raised-button>Basic</button>
-  </nav>
-</header> -->
 <header class="header">
   <span class="header__avatar" mat-card-avatar></span>
-  <span class="header__logo">Raghu Ch</span>
+  <span class="header__logo">{{title}}</span>
   <span class="header__spacer"></span>
   <nav class="header__nav">
-    <button class="header__button header__button--flat" mat-flat-button>Basic</button>
+    <mat-icon aria-hidden="false" aria-label="menu icon" fontIcon="menu"></mat-icon>
-    <button class="header__button header__button--raised" mat-raised-button>Basic</button>
   </nav>
 </header>

src/app/header/header.component.scss

@@ -1,23 +1,13 @@
-// :host {
+:host {
-//   color: var(--mat-sys-primary);
+  position: fixed;
-//   background-color: var(--mat-sys-surface);
+  top: 0;
-//   padding: 8px 16px;
+  right: 0;
-//   //   color: var(--mat-sys-on-primary);
+  left: 0;
-//   //   background-color: var(--mat-sys-primary);
+}
-// }
-
-// header {
-//   font-weight: 700;
-//   font-size: 14px;
-//   letter-spacing: 1px;
-//   text-transform: uppercase;
-// }
-
-// .spacer {
-//   flex-grow: 1;
-// }
 
 .header {
+  // background-color: var(--mat-sys-primary-container);
+  // color: var(--mat-sys-on-primary-container);
   color: var(--mat-sys-on-primary);
   background-color: var(--mat-sys-primary);
   padding: 0.5rem 1rem;
@@ -25,7 +15,7 @@
   align-items: center;
 
   &__avatar {
-    background-image: url('../../assests/images/rc-header-logo.jpeg');
+    background-image: url("../../assests/images/rc-header-logo.jpeg");
     background-size: cover;
     height: 40px;
     width: 40px;
@@ -46,7 +36,6 @@
 
   .header__nav {
     .header__button {
-
       &--flat {
         &:hover {
           opacity: 1.8; /* Apply opacity change on hover */

src/app/header/header.component.ts

@@ -1,13 +1,15 @@
 import { Component } from '@angular/core';
 
 import { MatButtonModule } from '@angular/material/button';
-import { MatCardModule } from '@angular/material/card';
+import { MatIconModule } from '@angular/material/icon';
 
 @Component({
   standalone: true,
   selector: 'app-header',
-  imports: [MatButtonModule, MatCardModule],
+  imports: [MatButtonModule, MatIconModule],
   templateUrl: './header.component.html',
   styleUrl: './header.component.scss',
 })
-export class HeaderComponent {}
+export class HeaderComponent {
+  title = 'Raghu Ch';
+}

src/app/home/home.component.html

@@ -1,5 +1,10 @@
-<section class="intro">
+<section class="intro" [@slideIn]>
-  <span class="intro__img"></span>
+  <div class="intro__img-container">
-  <h1 class="intro__header">Hey, I'm Raghu Chagarlamudi</h1>
+    <!-- <div class="intro__circle intro__circle--large"></div> -->
-  <p class="intro__sub-head">A front end focused web developer</p>
+    <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>
 </section>

src/app/home/home.component.scss

@@ -3,19 +3,49 @@
   justify-content: center;
   flex-direction: column;
   align-items: center;
-  margin-top: 6rem;
+  padding: 1rem;
 
-  &__img {
+  &__img-container {
-    display: block;
+    position: relative;
-    height: 200px;
+    width: 208px;
-    width: 200px;
+    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 {
     text-transform: uppercase;
+    color: var(--mat-sys-primary);
+    font-size: 3rem;
+  }
+
+  &__sub-head {
+    font-size: 1.5rem;
+    text-align: center;
+    max-width: 760px;
+  }
+
+  &__button {
+    font-size: var(--mdc-extended-fab-label-text-size, 1rem);
   }
 }
 
@@ -24,5 +54,9 @@
     &__header {
       text-align: center;
     }
+
+    &__sub-head {
+      font-size: 1.375rem;
+    }
   }
-}
+}

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;
+  }
+}

src/app/styles/_theme-colors.scss

@@ -0,0 +1,137 @@
+// This file was generated by running 'ng generate @angular/material:theme-color'.
+// Proceed with caution if making changes to this file.
+
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+// Note: Color palettes are generated from primary: 3c096c
+$_palettes: (
+  primary: (
+    0: #000000,
+    10: #2b0053,
+    20: #441573,
+    25: #4f237f,
+    30: #5b308c,
+    35: #683d98,
+    40: #7449a5,
+    50: #8e62c0,
+    60: #a97cdc,
+    70: #c597f9,
+    80: #dbb8ff,
+    90: #efdbff,
+    95: #f9edff,
+    98: #fff7ff,
+    99: #fffbff,
+    100: #ffffff,
+  ),
+  secondary: (
+    0: #000000,
+    10: #241435,
+    20: #39294c,
+    25: #453457,
+    30: #513f64,
+    35: #5d4b70,
+    40: #69577d,
+    50: #826f97,
+    60: #9d89b1,
+    70: #b8a3cd,
+    80: #d4bee9,
+    90: #efdbff,
+    95: #f9edff,
+    98: #fff7ff,
+    99: #fffbff,
+    100: #ffffff,
+  ),
+  tertiary: (
+    0: #000000,
+    10: #3b002e,
+    20: #5c0a4a,
+    25: #6a1956,
+    30: #782562,
+    35: #86326e,
+    40: #953e7b,
+    50: #b25795,
+    60: #d070b0,
+    70: #ee8acc,
+    80: #ffade0,
+    90: #ffd8ed,
+    95: #ffecf4,
+    98: #fff8f9,
+    99: #fffbff,
+    100: #ffffff,
+  ),
+  neutral: (
+    0: #000000,
+    10: #1e1a20,
+    20: #332f36,
+    25: #3e3a41,
+    30: #4a454c,
+    35: #555158,
+    40: #625d64,
+    50: #7b757d,
+    60: #958f97,
+    70: #b0a9b1,
+    80: #cbc4cd,
+    90: #e8e0e9,
+    95: #f6eef7,
+    98: #fff7ff,
+    99: #fffbff,
+    100: #ffffff,
+    4: #100d13,
+    6: #151218,
+    12: #221e24,
+    17: #2c292f,
+    22: #37333a,
+    24: #3c383e,
+    87: #dfd8e0,
+    92: #eee6ee,
+    94: #f3ebf4,
+    96: #f9f1fa,
+  ),
+  neutral-variant: (
+    0: #000000,
+    10: #1f1924,
+    20: #342e3a,
+    25: #3f3945,
+    30: #4b4450,
+    35: #57505c,
+    40: #635c68,
+    50: #7c7482,
+    60: #968e9c,
+    70: #b1a8b6,
+    80: #cdc3d2,
+    90: #eadfee,
+    95: #f8edfd,
+    98: #fff7ff,
+    99: #fffbff,
+    100: #ffffff,
+  ),
+  error: (
+    0: #000000,
+    10: #410002,
+    20: #690005,
+    25: #7e0007,
+    30: #93000a,
+    35: #a80710,
+    40: #ba1a1a,
+    50: #de3730,
+    60: #ff5449,
+    70: #ff897d,
+    80: #ffb4ab,
+    90: #ffdad6,
+    95: #ffedea,
+    98: #fff8f7,
+    99: #fffbff,
+    100: #ffffff,
+  ),
+);
+
+$_rest: (
+  secondary: map.get($_palettes, secondary),
+  neutral: map.get($_palettes, neutral),
+  neutral-variant: map.get($_palettes,  neutral-variant),
+  error: map.get($_palettes, error),
+);
+
+$primary-palette: map.merge(map.get($_palettes, primary), $_rest);
+$tertiary-palette: map.merge(map.get($_palettes, tertiary), $_rest);

src/styles.scss

@@ -1,7 +1,7 @@
 // Custom Theming for Angular Material
 // For more information: https://material.angular.io/guide/theming
 @use "@angular/material" as mat;
-@use "../theme-colors" as rc-theme;
+@use "./app/styles/theme-colors" as rc-theme;
 
 html {
   @include mat.theme(