Added square images on outside of the office

src/app/home-page/components/outside-of-work-banner/outside-of-work-banner.component.html

@@ -1,5 +1,18 @@
 <div class="contents row">
-  <div class="flex">
-    <h3>Stu outside of the office</h3>
+  <div class="col">
+    <div class="header col">
+      <h3>Stu outside of the office</h3>
+      <p class="subtitle">
+        Relating to clients and coworkers is easier with hobbies outside of work. Here are a few of
+        mine!
+      </p>
+    </div>
+    <div class="tiles">
+      <home-page-square-photo-tile
+        *ngFor="let photo of photos"
+        [image]="photo.image"
+        [subtitle]="photo.subtitle"
+      ></home-page-square-photo-tile>
+    </div>
   </div>
 </div>

src/app/home-page/components/outside-of-work-banner/outside-of-work-banner.component.scss

@@ -7,8 +7,28 @@
   padding: 5rem;
 
   & > div {
-    h3 {
+    align-items: center;
+    width: 100%;
+    gap: 2rem;
+
+    .header {
       text-align: center;
+      gap: 0.5rem;
+    }
+
+    .tiles {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      gap: 1rem;
+
+      @media (max-width: 760px) {
+        grid-template-columns: repeat(2, 1fr);
+      }
+
+      & > * {
+        width: 10rem;
+        height: 10rem;
+      }
     }
   }
 }

src/app/home-page/components/outside-of-work-banner/outside-of-work-banner.component.ts

@@ -1,8 +1,23 @@
 import { Component } from '@angular/core';
+import { environment } from 'src/environments/environment';
 
 @Component({
   selector: 'home-page-outside-of-work-banner',
   templateUrl: './outside-of-work-banner.component.html',
   styleUrls: ['./outside-of-work-banner.component.scss'],
 })
-export class OutsideOfWorkBannerComponent {}
+export class OutsideOfWorkBannerComponent {
+  photos: { image: string; subtitle: string }[] = [
+    {
+      image: `${environment.assetPrefix}code-sample.png`,
+      subtitle: 'Hello World. This is a long caption',
+    },
+    { image: `${environment.assetPrefix}code-sample.png`, subtitle: 'Hello World' },
+    { image: `${environment.assetPrefix}code-sample.png`, subtitle: 'Hello World' },
+    { image: `${environment.assetPrefix}code-sample.png`, subtitle: 'Hello World' },
+    { image: `${environment.assetPrefix}code-sample.png`, subtitle: 'Hello World' },
+    { image: `${environment.assetPrefix}code-sample.png`, subtitle: 'Hello World' },
+    { image: `${environment.assetPrefix}code-sample.png`, subtitle: 'Hello World' },
+    { image: `${environment.assetPrefix}code-sample.png`, subtitle: 'Hello World' },
+  ];
+}

src/app/home-page/components/square-photo-tile/square-photo-tile.component.html

@@ -0,0 +1,5 @@
+<div class="contents" style="background-image: url('{{ image }}');">
+  <div [class.overlay]="subtitle">
+    <p class="flex">{{ subtitle }}</p>
+  </div>
+</div>

src/app/home-page/components/square-photo-tile/square-photo-tile.component.scss

@@ -0,0 +1,41 @@
+@use '/src/styles.scss' as styles;
+
+.contents {
+  width: 100%;
+  height: 100%;
+  transition: all 200ms;
+  overflow: hidden;
+
+  &:hover {
+    transform: scale(1.05);
+
+    &::before {
+      filter: blur(8px);
+    }
+
+    * {
+      opacity: 1;
+    }
+
+    .overlay {
+      background-color: rgba(0, 0, 0, 0.5);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      text-align: center;
+
+      p {
+        color: map-get(styles.$text-gray, lightest);
+      }
+    }
+  }
+
+  & > div {
+    width: 100%;
+    height: 100%;
+  }
+
+  * {
+    opacity: 0;
+  }
+}

src/app/home-page/components/square-photo-tile/square-photo-tile.component.ts

@@ -0,0 +1,12 @@
+import { Component, Input } from '@angular/core';
+import { environment } from 'src/environments/environment';
+
+@Component({
+  selector: 'home-page-square-photo-tile',
+  templateUrl: './square-photo-tile.component.html',
+  styleUrls: ['./square-photo-tile.component.scss'],
+})
+export class SquarePhotoTileComponent {
+  @Input({ required: true }) image: string = `${environment.assetPrefix}code-sample.png`;
+  @Input() subtitle?: string;
+}

src/app/home-page/home-page.module.ts

@@ -8,6 +8,7 @@ import { SkillListComponent } from './components/skill-list/skill-list.component
 import { MyWorkComponent } from './components/my-work/my-work.component';
 import { OutsideOfWorkBannerComponent } from './components/outside-of-work-banner/outside-of-work-banner.component';
 import { MyWorkCardComponent } from './components/my-work-card/my-work-card.component';
+import { SquarePhotoTileComponent } from './components/square-photo-tile/square-photo-tile.component';
 
 @NgModule({
   declarations: [
@@ -18,6 +19,7 @@ import { MyWorkCardComponent } from './components/my-work-card/my-work-card.comp
     MyWorkComponent,
     OutsideOfWorkBannerComponent,
     MyWorkCardComponent,
+    SquarePhotoTileComponent,
   ],
   imports: [HomePageRouterModule, SharedModule],
 })

src/app/shared/components/contact-me-banner/contact-me-banner.component.html

@@ -1,6 +1,6 @@
 <div class="contents row">
   <div class="col">
-    <h3>{{ header }}</h3>
+    <h4>{{ header }}</h4>
     <a href="mailTo:{{ email }}">
       <shared-stroked-button [oversized]="true" [stroke]="buttonStroke">
         <span>{{ buttonText }}</span>

src/app/shared/components/stroked-button/stroked-button.component.scss

@@ -9,6 +9,14 @@
   }
 }
 
+.stroked-button-component {
+  transition: all 200ms;
+
+  &:hover {
+    transform: scale(1.025);
+  }
+}
+
 .oversized {
   padding: 2rem 3rem;
 }