From f1f711fa1faace007c3bd469616fbcf0b56e3c72 Mon Sep 17 00:00:00 2001
From: Oliver Booth <git@olivr.me>
Date: Tue, 27 Feb 2024 13:01:10 +0000
Subject: [PATCH] style: reduce in-your-face-ness of headshot photo

---
 OliverBooth/Pages/Index.cshtml | 15 +++++++++------
 src/scss/app.scss              | 34 +++++++++++++++++++++++++++++++---
 2 files changed, 40 insertions(+), 9 deletions(-)

diff --git a/OliverBooth/Pages/Index.cshtml b/OliverBooth/Pages/Index.cshtml
index 8e5aae7..0ca68dc 100644
--- a/OliverBooth/Pages/Index.cshtml
+++ b/OliverBooth/Pages/Index.cshtml
@@ -1,12 +1,15 @@
 @page
 
 <main class="container">
-    <h1 class="display-4">Hi, I'm Oliver.</h1>
-    <p class="lead">I'm a tech enthusiast, coffee drinker, and software developer.</p>
-
-    <p class="text-center">
-        <img src="~/img/headshot_512x512_2023.jpg" style="width: 512px; max-width: 100%;">
-    </p>
+    <div class="row align-items-center mb-3">
+        <div id="landing-page-intro" class="col-sm-12 col-md-6">
+            <h1 class="display-4">Hi, I'm Oliver.</h1>
+            <p class="lead">I'm a tech enthusiast, coffee drinker, and software developer.</p>
+        </div>
+        <div id="landing-page-headshot" class="col-sm-12 col-md-6 justify-content-right">
+            <img src="~/img/headshot_512x512_2023.jpg" class="rounded-circle" style="width: 50%; max-width: 512px;" alt="Headshot">
+        </div>
+    </div>
 
     <p>
         My primary focus is C#, though I have dabbled in several other languages such as Java, Kotlin, VB, C/C++,
diff --git a/src/scss/app.scss b/src/scss/app.scss
index 19e3129..483540b 100644
--- a/src/scss/app.scss
+++ b/src/scss/app.scss
@@ -367,6 +367,7 @@ td.trim-p p:last-child {
   background-size: cover;
   border-radius: 10px;
   cursor: pointer;
+
   * {
     cursor: pointer;
   }
@@ -384,6 +385,7 @@ td.trim-p p:last-child {
     &:first-child {
       border-left: none;
     }
+
     &:last-child {
       border-right: none;
     }
@@ -392,7 +394,7 @@ td.trim-p p:last-child {
 
 .post-tags a.badge {
   transition: color 250ms, background-color 250ms;
-  
+
   &:link, &:visited, &:active {
     background-color: #2D2D2D !important;
     color: #fff;
@@ -407,12 +409,38 @@ td.trim-p p:last-child {
 .mastodon-update-card.card {
   background-color: desaturate(darken(#6364FF, 50%), 50%);
   margin-bottom: 50px;
-  
+
   p:last-child {
     margin-bottom: 0;
   }
-  
+
   button.btn.btn-mastodon {
     background-color: #6364FF;
   }
+}
+
+#landing-page-intro {
+  text-align: left;
+}
+
+#landing-page-headshot {
+  text-align: right;
+
+  img {
+    transition: border-radius .4s;
+
+    &:hover {
+      border-radius: 5px !important;
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  #landing-page-intro {
+    text-align: center;
+  }
+
+  #landing-page-headshot {
+    text-align: center;
+  }
 }
\ No newline at end of file