feauture: about me section

.github/workflows/pages.yml

@@ -1,9 +1,6 @@
 name: Angular GitHub CI
 
-on:
-  push:
-    branches:
-      - main
+on: [push]
 
 jobs:
   ci:
@@ -44,7 +41,8 @@ jobs:
         run: |
           npm run build
       - name: Deploy
+        if: github.ref == 'refs/heads/main'
         env:
           GH_TOKEN: ${{ secrets.DEPLOY_TOKEN }}
         run: |
-          npm run ng -- deploy --base-href=/anjeyy.github.io/ --name="automated deployment" [email protected]
+          npm run ng -- deploy --base-href=anjeyy.github.io --name="automated deployment" [email protected]

deployment/deploy-to-gh-pages.sh

@@ -6,4 +6,4 @@ ng build
 
 #todo(github ci/cd): 'ng add angular-cli-ghpages'
 
-ng deploy --base-href=anjeyy.github.io
+ng deploy --base-href=anjeyy.github.io --name="automated deployment" [email protected]

src/app/about-me/Tile.ts

@@ -0,0 +1,6 @@
+export interface Tile {
+  color: string;
+  cols: number;
+  rows: number;
+  text: string;
+}

src/app/about-me/about-me.component.css

@@ -0,0 +1,3 @@
+mat-grid-tile {
+  background: lightblue;
+}

src/app/about-me/about-me.component.html

@@ -0,0 +1,37 @@
+<mat-grid-list cols="4" rowHeight="20em" gutterSize="2em">
+  <mat-grid-tile
+    *ngFor="let tile of tiles"
+    [colspan]="tile.cols"
+    [rowspan]="tile.rows"
+    [style.background]="tile.color"
+  >
+    <mat-card class="my-card">
+      <mat-card-title>Title</mat-card-title>
+      <mat-card-subtitle>Sub-Title</mat-card-subtitle>
+      <mat-card-content>
+        Content,
+        Content,
+        Content,
+        Content,
+        Content,
+        Content,
+        Content,
+        Content,
+        Content,
+        Content,
+        Content,
+        Content,
+        Content,
+        Content,
+        Content,
+        Content,
+        Content,
+        Content,
+
+      </mat-card-content>
+      <mat-card-actions>Container for buttons at the bottom of the card</mat-card-actions>
+      <mat-card-footer>Footer</mat-card-footer>
+    </mat-card>
+    <!--    {{ tile.text }}-->
+  </mat-grid-tile>
+</mat-grid-list>

src/app/landing-page/landing-page.component.spec.ts → src/app/about-me/about-me.component.spec.ts

@@ -1,20 +1,20 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { LandingPageComponent } from './landing-page.component';
+import { AboutMeComponent } from './about-me.component';
 
-describe('LandingPageComponent', () => {
-  let component: LandingPageComponent;
-  let fixture: ComponentFixture<LandingPageComponent>;
+describe('AboutMeComponent', () => {
+  let component: AboutMeComponent;
+  let fixture: ComponentFixture<AboutMeComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ LandingPageComponent ]
+      declarations: [ AboutMeComponent ]
     })
     .compileComponents();
   });
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(LandingPageComponent);
+    fixture = TestBed.createComponent(AboutMeComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/about-me/about-me.component.ts

@@ -0,0 +1,20 @@
+import { Component, OnInit } from '@angular/core';
+import { Tile } from './Tile';
+
+@Component({
+  selector: 'app-about-me',
+  templateUrl: './about-me.component.html',
+  styleUrls: ['./about-me.component.css'],
+})
+export class AboutMeComponent implements OnInit {
+  tiles: Tile[] = [
+    { text: 'One', cols: 3, rows: 1, color: 'lightblue' },
+    { text: 'Two', cols: 1, rows: 2, color: 'lightgreen' },
+    { text: 'Three', cols: 1, rows: 1, color: 'lightpink' },
+    { text: 'Four', cols: 2, rows: 1, color: '#DDBDF1' },
+  ];
+
+  constructor() {}
+
+  ngOnInit(): void {}
+}

src/app/app.module.ts

@@ -17,15 +17,15 @@ import { MatTabsModule } from '@angular/material/tabs';
 import { MatDividerModule } from '@angular/material/divider';
 import { ClipboardModule } from '@angular/cdk/clipboard';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
-import { LandingPageComponent } from './landing-page/landing-page.component';
 import { TabOverviewComponent } from './tab-overview/tab-overview.component';
+import { AboutMeComponent } from './about-me/about-me.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     ToolbarComponent,
-    LandingPageComponent,
     TabOverviewComponent,
+    AboutMeComponent,
   ],
   imports: [
     BrowserModule,

src/app/tab-overview/tab-overview.component.html

@@ -7,7 +7,7 @@
   <mat-tab disabled label="">disabled</mat-tab>
 
   <mat-tab label="About me">
-    <app-landing-page></app-landing-page>
+    <app-about-me></app-about-me>
   </mat-tab>
   <mat-tab disabled label="">disabled</mat-tab>