update footer, header and home compoents

src/app/home/home.component.html

@@ -1,2 +1,5 @@
-<h1>Hey, I'm Raghu Chagarlamudi</h1>
-<p>A front end focused web developer</p>
+<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>
+</section>

src/app/home/home.component.scss

@@ -1,6 +1,28 @@
-:host {
+.intro {
   display: flex;
   justify-content: center;
   flex-direction: column;
   align-items: center;
+  margin-top: 6rem;
+
+  &__img {
+    display: block;
+    height: 200px;
+    width: 200px;
+    border-radius: 50%;
+    background-image: url('../../assests/images/rc-logo.jpeg');
+    background-size: cover;
+  }
+
+  &__header {
+    text-transform: uppercase;
+  }
 }
+
+@media only screen and (max-width: 600px) {
+  .intro {
+    &__header {
+      text-align: center;
+    }
+  }
+}

src/app/home/home.component.ts

@@ -1,9 +1,12 @@
 import { Component } from '@angular/core';
 
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+
 @Component({
   standalone: true,
   selector: 'app-home',
-  imports: [],
+  imports: [MatButtonModule, MatIconModule],
   templateUrl: './home.component.html',
   styleUrl: './home.component.scss',
 })