update footer, header and home compoents

add logo images
add angular material with custom font and custom theme
2025-02-25 22:21:31 -05:00 · 2025-02-25 22:20:34 -05:00 · 2025-02-25 22:19:40 -05:00 · 2025-02-24 18:14:59 -05:00
21 changed files with 361 additions and 30 deletions
--- a/_theme-colors.scss
+++ b/_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: 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);
--- a/package-lock.json
+++ b/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"
--- a/package.json
+++ b/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",
@@ -43,4 +45,4 @@
    "typescript": "~5.7.2",
    "typescript-eslint": "8.23.0"
  }
-}
+}
--- 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;
 }
--- a/src/app/app.config.ts
+++ b/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()],
 };
--- 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>
--- 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;
+    }
  }
 }
--- a/src/app/footer/footer.component.spec.ts
+++ b/src/app/footer/footer.component.spec.ts
@@ -8,9 +8,8 @@ describe('FooterComponent', () => {

  beforeEach(async () => {
    await TestBed.configureTestingModule({
-      imports: [FooterComponent]
-    })
-    .compileComponents();
+      imports: [FooterComponent],
+    }).compileComponents();

    fixture = TestBed.createComponent(FooterComponent);
    component = fixture.componentInstance;
--- 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();
+}
--- 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>
--- 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 */
+        }
+      }
+    }
+  }
+}
--- a/src/app/header/header.component.spec.ts
+++ b/src/app/header/header.component.spec.ts
@@ -8,9 +8,8 @@ describe('HeaderComponent', () => {

  beforeEach(async () => {
    await TestBed.configureTestingModule({
-      imports: [HeaderComponent]
-    })
-    .compileComponents();
+      imports: [HeaderComponent],
+    }).compileComponents();

    fixture = TestBed.createComponent(HeaderComponent);
    component = fixture.componentInstance;
--- 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',
 })
--- 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>
+<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>
--- 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;
+    }
+  }
+}
--- a/src/app/home/home.component.spec.ts
+++ b/src/app/home/home.component.spec.ts
@@ -8,9 +8,8 @@ describe('HomeComponent', () => {

  beforeEach(async () => {
    await TestBed.configureTestingModule({
-      imports: [HomeComponent]
-    })
-    .compileComponents();
+      imports: [HomeComponent],
+    }).compileComponents();

    fixture = TestBed.createComponent(HomeComponent);
    component = fixture.componentInstance;
--- 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',
 })
--- a/src/assests/images/rc-header-logo.jpeg
+++ b/src/assests/images/rc-header-logo.jpeg
--- a/src/assests/images/rc-logo.jpeg
+++ b/src/assests/images/rc-logo.jpeg
--- a/src/index.html
+++ b/src/index.html
@@ -6,7 +6,13 @@
    <base href="/" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
-  </head>
+    <!-- <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>
  </body>
--- a/src/styles.scss
+++ b/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 "../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);
+}
Author	SHA1	Message	Date
raghu	00e7ba98d3	update footer, header and home compoents All checks were successful continuous-integration/drone/push Build is passing Details	2025-02-25 22:21:31 -05:00
raghu	1fe649ea45	add logo images	2025-02-25 22:20:34 -05:00
raghu	c29a207be5	add angular material with custom font and custom theme	2025-02-25 22:19:40 -05:00
raghu	0c53121568	run lint fix	2025-02-24 18:14:59 -05:00