refator style defs for home template

package-lock.json

@@ -9,10 +9,12 @@
       "version": "0.0.0",
       "dependencies": {
         "@angular/animations": "^19.1.0",
+        "@angular/cdk": "^19.1.5",
         "@angular/common": "^19.1.0",
         "@angular/compiler": "^19.1.0",
         "@angular/core": "^19.1.0",
         "@angular/forms": "^19.1.0",
+        "@angular/material": "^19.1.5",
         "@angular/platform-browser": "^19.1.0",
         "@angular/platform-browser-dynamic": "^19.1.0",
         "@angular/router": "^19.1.0",
@@ -575,6 +577,23 @@
         }
       }
     },
+    "node_modules/@angular/cdk": {
+      "version": "19.1.5",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-19.1.5.tgz",
+      "integrity": "sha512-+g20LIvYHThKBD6oXTYWVL6+ecaOWtPJu08R5xIfGrwXoj0l/9prLwuSW8GlIATI3mDkSesyhQsomb9jAUzKwQ==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "optionalDependencies": {
+        "parse5": "^7.1.2"
+      },
+      "peerDependencies": {
+        "@angular/common": "^19.0.0 || ^20.0.0",
+        "@angular/core": "^19.0.0 || ^20.0.0",
+        "rxjs": "^6.5.3 || ^7.4.0"
+      }
+    },
     "node_modules/@angular/cli": {
       "version": "19.1.8",
       "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-19.1.8.tgz",
@@ -708,6 +727,24 @@
         "rxjs": "^6.5.3 || ^7.4.0"
       }
     },
+    "node_modules/@angular/material": {
+      "version": "19.1.5",
+      "resolved": "https://registry.npmjs.org/@angular/material/-/material-19.1.5.tgz",
+      "integrity": "sha512-Fi04Toe+z0qorfpZkQ5rIRE9cVgBOHdgCig5oFrHpycSDW2LMTrvZtSV/qMwrIe5GPn49EXE2jCGcSpgumW4KA==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/animations": "^19.0.0 || ^20.0.0",
+        "@angular/cdk": "19.1.5",
+        "@angular/common": "^19.0.0 || ^20.0.0",
+        "@angular/core": "^19.0.0 || ^20.0.0",
+        "@angular/forms": "^19.0.0 || ^20.0.0",
+        "@angular/platform-browser": "^19.0.0 || ^20.0.0",
+        "rxjs": "^6.5.3 || ^7.4.0"
+      }
+    },
     "node_modules/@angular/platform-browser": {
       "version": "19.1.7",
       "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-19.1.7.tgz",
@@ -8213,7 +8250,7 @@
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
       "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
-      "dev": true,
+      "devOptional": true,
       "license": "BSD-2-Clause",
       "engines": {
         "node": ">=0.12"
@@ -12658,7 +12695,7 @@
       "version": "7.2.1",
       "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.2.1.tgz",
       "integrity": "sha512-BuBYQYlv1ckiPdQi/ohiivi9Sagc9JG+Ozs0r7b/0iK3sKmrb0b9FdWdBbOdx6hBCM/F9Ir82ofnBhtZOjCRPQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "entities": "^4.5.0"

package.json

@@ -13,10 +13,12 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "^19.1.0",
+    "@angular/cdk": "^19.1.5",
     "@angular/common": "^19.1.0",
     "@angular/compiler": "^19.1.0",
     "@angular/core": "^19.1.0",
     "@angular/forms": "^19.1.0",
+    "@angular/material": "^19.1.5",
     "@angular/platform-browser": "^19.1.0",
     "@angular/platform-browser-dynamic": "^19.1.0",
     "@angular/router": "^19.1.0",

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: 8px 16px;
+  overflow-y: auto;
-  overflow: auto;
+  margin-top: 3.5rem;
+
+  //set content always center
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }

src/app/app.config.ts

@@ -2,7 +2,8 @@ import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
 import { provideRouter } from '@angular/router';
 
 import { routes } from './app.routes';
+import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes)],
+  providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes), provideAnimationsAsync()],
 };

src/app/footer/footer.component.html

@@ -1,3 +1,4 @@
-<footer>
+<footer class="footer">
-  <p>&copy; 2025 Chagarlamudi.net. Made by Raghu Chagarlamudi.</p>
+  <span class="footer__copyright">&copy; {{ copyRightYear }} Chagarlamudi.net.</span>
+  <span class="footer__made-by">Made by <a class="footer__link" routerLink="/home">Raghu Chagarlamudi</a></span>
 </footer>

src/app/footer/footer.component.scss

@@ -1,6 +1,24 @@
-:host {
+.footer {
-  p {
+  padding: 0.5rem 1rem;
-    padding: 8px 16px;
   text-align: center;
+  font-size: 0.825rem;
+
+  &__copyright {
+    display: block;
+    margin-bottom: 0.5rem;
+  }
+
+  &__made-by {
+    margin-left: 0.125rem;
+  }
+
+  &__link {
+    text-decoration: underline;
+    font-weight: bold;
+    color: var(--mat-sys-primary);
+
+    &:hover {
+      opacity: 0.8;
+    }
   }
 }

src/app/footer/footer.component.spec.ts

@@ -8,9 +8,8 @@ describe('FooterComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [FooterComponent]
+      imports: [FooterComponent],
-    })
+    }).compileComponents();
-    .compileComponents();
 
     fixture = TestBed.createComponent(FooterComponent);
     component = fixture.componentInstance;

src/app/footer/footer.component.ts

@@ -1,10 +1,13 @@
 import { Component } from '@angular/core';
+import { RouterLink } from '@angular/router';
 
 @Component({
   standalone: true,
   selector: 'app-footer',
-  imports: [],
+  imports: [RouterLink],
   templateUrl: './footer.component.html',
   styleUrl: './footer.component.scss',
 })
-export class FooterComponent {}
+export class FooterComponent {
+  readonly copyRightYear = new Date().getFullYear();
+}

src/app/header/header.component.html

@@ -1,3 +1,8 @@
-<header>
+<header class="header">
-  <span>Raghu Chagarlamudi</span>
+  <span class="header__avatar" mat-card-avatar></span>
+  <span class="header__logo">{{title}}</span>
+  <span class="header__spacer"></span>
+  <nav class="header__nav">
+    <mat-icon aria-hidden="false" aria-label="menu icon" fontIcon="menu"></mat-icon>
+  </nav>
 </header>

src/app/header/header.component.scss

@@ -0,0 +1,46 @@
+:host {
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+}
+
+.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;
+  display: flex;
+  align-items: center;
+
+  &__avatar {
+    background-image: url("../../assests/images/rc-header-logo.jpeg");
+    background-size: cover;
+    height: 40px;
+    width: 40px;
+    border-radius: 50%;
+  }
+
+  &__logo {
+    font-size: 1.2rem;
+    text-transform: uppercase;
+    font-weight: 700;
+    letter-spacing: 0.063rem;
+    margin-left: 0.25rem;
+  }
+
+  &__spacer {
+    flex-grow: 1;
+  }
+
+  .header__nav {
+    .header__button {
+      &--flat {
+        &:hover {
+          opacity: 1.8; /* Apply opacity change on hover */
+        }
+      }
+    }
+  }
+}

src/app/header/header.component.spec.ts

@@ -8,9 +8,8 @@ describe('HeaderComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [HeaderComponent]
+      imports: [HeaderComponent],
-    })
+    }).compileComponents();
-    .compileComponents();
 
     fixture = TestBed.createComponent(HeaderComponent);
     component = fixture.componentInstance;

src/app/header/header.component.ts

@@ -1,10 +1,15 @@
 import { Component } from '@angular/core';
 
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+
 @Component({
   standalone: true,
   selector: 'app-header',
-  imports: [],
+  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,2 +1,10 @@
-<h1>Hey, I'm Raghu Chagarlamudi</h1>
+<section class="intro" [@slideIn]>
-<p>A front end focused web developer</p>
+  <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>
+</section>

src/app/home/home.component.scss

@@ -1,6 +1,62 @@
-:host {
+.intro {
   display: flex;
   justify-content: center;
   flex-direction: column;
   align-items: center;
+  padding: 1rem;
+
+  &__img-container {
+    position: relative;
+    width: 208px;
+    height: 208px;
+  }
+
+  &__circle {
+    position: absolute;
+    border-radius: 50%;
+
+    &--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);
+  }
+}
+
+@media only screen and (max-width: 600px) {
+  .intro {
+    &__header {
+      text-align: center;
+    }
+
+    &__sub-head {
+      font-size: 1.375rem;
+    }
+  }
 }

src/app/home/home.component.spec.ts

@@ -8,9 +8,8 @@ describe('HomeComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [HomeComponent]
+      imports: [HomeComponent],
-    })
+    }).compileComponents();
-    .compileComponents();
 
     fixture = TestBed.createComponent(HomeComponent);
     component = fixture.componentInstance;

src/app/home/home.component.ts

@@ -1,10 +1,21 @@
 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,
   selector: 'app-home',
-  imports: [],
+  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/index.html

@@ -6,6 +6,12 @@
     <base href="/" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
+    <!-- <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet"> -->
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <!-- inter font -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
 </head>
   <body>
     <app-root></app-root>

src/styles.scss

@@ -1 +1,28 @@
-/* You can add global styles to this file, and also import other style files */
+// Custom Theming for Angular Material
+// For more information: https://material.angular.io/guide/theming
+@use "@angular/material" as mat;
+@use "./app/styles/theme-colors" as rc-theme;
+
+html {
+  @include mat.theme(
+    (
+      color: (
+        theme-type: light,
+        primary: rc-theme.$primary-palette,
+        tertiary: rc-theme.$tertiary-palette,
+      ),
+      typography: Inter,
+      density: 0,
+    )
+  );
+} /* You can add global styles to this file, and also import other style files */
+
+html,
+body {
+  height: 100%;
+}
+body {
+  margin: 0;
+  font-family: Inter, sans-serif;
+  background-color: var(--mat-sys-surface);
+}