update home, app, components

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>
-  <p class="intro__sub-head">A front end focused web developer</p>
+  <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,30 @@
   justify-content: center;
   flex-direction: column;
   align-items: center;
-  margin-top: 6rem;
 
   &__img {
     display: block;
-    height: 200px;
-    width: 200px;
+    height: 300px;
+    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;
+    }
   }
-}
+}