From 8b6e27dc0f8cc147b7c313cde877cd9dfe1afeeb Mon Sep 17 00:00:00 2001
From: Stuart Hopkins <stuarth@gurutechnologies.net>
Date: Fri, 22 Dec 2023 18:47:25 -0700
Subject: [PATCH] Added square images on outside of the office

---
 .../outside-of-work-banner.component.html     | 17 +++++++-
 .../outside-of-work-banner.component.scss     | 22 +++++++++-
 .../outside-of-work-banner.component.ts       | 17 +++++++-
 .../square-photo-tile.component.html          |  5 +++
 .../square-photo-tile.component.scss          | 41 +++++++++++++++++++
 .../square-photo-tile.component.ts            | 12 ++++++
 src/app/home-page/home-page.module.ts         |  2 +
 .../contact-me-banner.component.html          |  2 +-
 .../stroked-button.component.scss             |  8 ++++
 9 files changed, 121 insertions(+), 5 deletions(-)
 create mode 100644 src/app/home-page/components/square-photo-tile/square-photo-tile.component.html
 create mode 100644 src/app/home-page/components/square-photo-tile/square-photo-tile.component.scss
 create mode 100644 src/app/home-page/components/square-photo-tile/square-photo-tile.component.ts

diff --git a/src/app/home-page/components/outside-of-work-banner/outside-of-work-banner.component.html b/src/app/home-page/components/outside-of-work-banner/outside-of-work-banner.component.html
index 15317ce..f058d88 100644
--- a/src/app/home-page/components/outside-of-work-banner/outside-of-work-banner.component.html
+++ b/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>
diff --git a/src/app/home-page/components/outside-of-work-banner/outside-of-work-banner.component.scss b/src/app/home-page/components/outside-of-work-banner/outside-of-work-banner.component.scss
index 307691d..0566090 100644
--- a/src/app/home-page/components/outside-of-work-banner/outside-of-work-banner.component.scss
+++ b/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;
+      }
     }
   }
 }
diff --git a/src/app/home-page/components/outside-of-work-banner/outside-of-work-banner.component.ts b/src/app/home-page/components/outside-of-work-banner/outside-of-work-banner.component.ts
index e34105d..ccff7d0 100644
--- a/src/app/home-page/components/outside-of-work-banner/outside-of-work-banner.component.ts
+++ b/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' },
+  ];
+}
diff --git a/src/app/home-page/components/square-photo-tile/square-photo-tile.component.html b/src/app/home-page/components/square-photo-tile/square-photo-tile.component.html
new file mode 100644
index 0000000..1ecbed6
--- /dev/null
+++ b/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>
diff --git a/src/app/home-page/components/square-photo-tile/square-photo-tile.component.scss b/src/app/home-page/components/square-photo-tile/square-photo-tile.component.scss
new file mode 100644
index 0000000..eefe28f
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/src/app/home-page/components/square-photo-tile/square-photo-tile.component.ts b/src/app/home-page/components/square-photo-tile/square-photo-tile.component.ts
new file mode 100644
index 0000000..294e9c2
--- /dev/null
+++ b/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;
+}
diff --git a/src/app/home-page/home-page.module.ts b/src/app/home-page/home-page.module.ts
index 8bda64d..8babe98 100644
--- a/src/app/home-page/home-page.module.ts
+++ b/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],
 })
diff --git a/src/app/shared/components/contact-me-banner/contact-me-banner.component.html b/src/app/shared/components/contact-me-banner/contact-me-banner.component.html
index f30e395..94e3e57 100644
--- a/src/app/shared/components/contact-me-banner/contact-me-banner.component.html
+++ b/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>
diff --git a/src/app/shared/components/stroked-button/stroked-button.component.scss b/src/app/shared/components/stroked-button/stroked-button.component.scss
index 54959dd..3f60c9b 100644
--- a/src/app/shared/components/stroked-button/stroked-button.component.scss
+++ b/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;
 }