update home, app, components

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

@@ -8,4 +8,9 @@ main {
   flex: 1;
   overflow-y: auto;
   margin-top: 3.5rem;
+
+  //set content always center
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }

src/app/header/header.component.html

@@ -1,6 +1,6 @@
 <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">
     <mat-icon aria-hidden="false" aria-label="menu icon" fontIcon="menu"></mat-icon>

src/app/header/header.component.scss

@@ -6,6 +6,8 @@
 }
 
 .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;

src/app/header/header.component.ts

@@ -10,4 +10,6 @@ import { MatIconModule } from '@angular/material/icon';
   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,6 @@
 <section class="intro">
   <span class="intro__img"></span>
-  <h1 class="intro__header">Hey, I'm Raghu Chagarlamudi</h1>
+  <h1 class="intro__header">Hi 👋, I'm Raghu Chagarlamudi</h1>
-  <p class="intro__sub-head">A front end focused web developer</p>
+  <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,30 @@
   justify-content: center;
   flex-direction: column;
   align-items: center;
-  margin-top: 6rem;
 
   &__img {
     display: block;
-    height: 200px;
+    height: 300px;
-    width: 200px;
+    width: 300px;
     border-radius: 50%;
-    background-image: url('../../assests/images/rc-logo.jpeg');
+    background-image: url("../../assests/images/rc-logo.jpeg");
     background-size: cover;
   }
 
   &__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 +35,9 @@
     &__header {
       text-align: center;
     }
+
+    &__sub-head {
+      font-size: 1.375rem;
+    }
   }
 }