From 00e7ba98d361d07e97609f9b704e7fffaf8a2dde Mon Sep 17 00:00:00 2001
From: raghu <raghu6004@gmail.com>
Date: Tue, 25 Feb 2025 22:21:31 -0500
Subject: [PATCH] update footer, header and home compoents

---
 src/app/app.component.scss           |  2 +-
 src/app/footer/footer.component.html |  5 ++-
 src/app/footer/footer.component.scss | 26 +++++++++++--
 src/app/footer/footer.component.ts   |  7 +++-
 src/app/header/header.component.html | 16 +++++++-
 src/app/header/header.component.scss | 57 ++++++++++++++++++++++++++++
 src/app/header/header.component.ts   |  5 ++-
 src/app/home/home.component.html     |  7 +++-
 src/app/home/home.component.scss     | 24 +++++++++++-
 src/app/home/home.component.ts       |  5 ++-
 10 files changed, 139 insertions(+), 15 deletions(-)

diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index 7474ab1..27ebd14 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -6,6 +6,6 @@
 
 main {
   flex: 1;
-  padding: 8px 16px;
+  padding: 0 1rem;
   overflow: auto;
 }
diff --git a/src/app/footer/footer.component.html b/src/app/footer/footer.component.html
index a7ed5aa..1030972 100644
--- a/src/app/footer/footer.component.html
+++ b/src/app/footer/footer.component.html
@@ -1,3 +1,4 @@
-<footer>
-  <p>&copy; 2025 Chagarlamudi.net. Made by Raghu Chagarlamudi.</p>
+<footer class="footer">
+  <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>
diff --git a/src/app/footer/footer.component.scss b/src/app/footer/footer.component.scss
index dfa7853..ac8228a 100644
--- a/src/app/footer/footer.component.scss
+++ b/src/app/footer/footer.component.scss
@@ -1,6 +1,24 @@
-:host {
-  p {
-    padding: 8px 16px;
-    text-align: center;
+.footer {
+  padding: 0.5rem 1rem;
+  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;
+    }
   }
 }
diff --git a/src/app/footer/footer.component.ts b/src/app/footer/footer.component.ts
index 9dcdc79..355282b 100644
--- a/src/app/footer/footer.component.ts
+++ b/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();
+}
diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html
index 9d88c1c..4f8bb14 100644
--- a/src/app/header/header.component.html
+++ b/src/app/header/header.component.html
@@ -1,3 +1,17 @@
-<header>
+<!-- <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__spacer"></span>
+  <nav class="header__nav">
+    <button class="header__button header__button--flat" mat-flat-button>Basic</button>
+    <button class="header__button header__button--raised" mat-raised-button>Basic</button>
+  </nav>
 </header>
diff --git a/src/app/header/header.component.scss b/src/app/header/header.component.scss
index e69de29..5f6a8f4 100644
--- a/src/app/header/header.component.scss
+++ b/src/app/header/header.component.scss
@@ -0,0 +1,57 @@
+// :host {
+//   color: var(--mat-sys-primary);
+//   background-color: var(--mat-sys-surface);
+//   padding: 8px 16px;
+//   //   color: var(--mat-sys-on-primary);
+//   //   background-color: var(--mat-sys-primary);
+// }
+
+// header {
+//   font-weight: 700;
+//   font-size: 14px;
+//   letter-spacing: 1px;
+//   text-transform: uppercase;
+// }
+
+// .spacer {
+//   flex-grow: 1;
+// }
+
+.header {
+  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 */
+        }
+      }
+    }
+  }
+}
diff --git a/src/app/header/header.component.ts b/src/app/header/header.component.ts
index f1b3918..6edb2db 100644
--- a/src/app/header/header.component.ts
+++ b/src/app/header/header.component.ts
@@ -1,9 +1,12 @@
 import { Component } from '@angular/core';
 
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+
 @Component({
   standalone: true,
   selector: 'app-header',
-  imports: [],
+  imports: [MatButtonModule, MatCardModule],
   templateUrl: './header.component.html',
   styleUrl: './header.component.scss',
 })
diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
index c7cd364..47d3a90 100644
--- a/src/app/home/home.component.html
+++ b/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>
\ No newline at end of file
+<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>
diff --git a/src/app/home/home.component.scss b/src/app/home/home.component.scss
index 3b23e4a..be4a036 100644
--- a/src/app/home/home.component.scss
+++ b/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;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts
index 97f2cfd..dc63ad4 100644
--- a/src/app/home/home.component.ts
+++ b/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',
 })