Restore about headshot and add project montage

css/styles.css

@@ -241,7 +241,33 @@ section { padding: 64px 0; }
   justify-content: center;
 }
 .hero-image img { width: 100%; height: 100%; object-fit: cover; }
-.hero-headshot img { object-position: center top; }
+
+.hero-montage {
+  display: grid;
+  grid-template-columns: 1.25fr .9fr;
+  grid-template-rows: 1fr 1fr;
+  gap: 8px;
+  aspect-ratio: 4 / 3;
+  overflow: hidden;
+  border: 1px solid var(--rule);
+  border-radius: 3px;
+  background: #10283d;
+  padding: 8px;
+}
+
+.hero-montage img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+  border: 1px solid rgba(255,255,255,.10);
+}
+
+.hero-montage .montage-main {
+  grid-row: 1 / 3;
+  object-fit: contain;
+  background: #10283d;
+}
 .image-placeholder {
   width: 100%;
   height: 100%;
@@ -457,13 +483,9 @@ section { padding: 64px 0; }
 /* ---------- About ---------- */
 .about-grid {
   display: grid;
-  grid-template-columns: 1fr;
+  grid-template-columns: .9fr 1.45fr 1fr;
   gap: 24px;
-  align-items: start;
+  align-items: stretch;
-}
-
-.about-text {
-  max-width: 900px;
 }
 .about-photo {
   background: #e9edf1;
@@ -480,25 +502,40 @@ section { padding: 64px 0; }
   padding: 22px 24px;
 }
 .about-text h3 { font-size: 19px; margin-bottom: 12px; }
-.pull-quote {
+
+.about-focus {
   background: #eef2f6;
   border: 1px solid var(--rule);
-  border-left: 3px solid var(--steel);
+  border-top: 3px solid var(--steel);
-  border-radius: 3px;
+  border-radius: 4px;
-  padding: 20px 22px;
+  padding: 22px 24px;
-  font-style: italic;
+}
-  color: var(--text);
+
-  font-size: 14.5px;
+.about-focus h3 {
+  font-size: 18px;
+  margin-bottom: 12px;
+}
+
+.about-focus ul {
+  margin: 0;
+  padding-left: 19px;
+  color: var(--muted-2);
+  font-size: 14px;
   line-height: 1.6;
 }
-.pull-quote .mark {
+
-  font-family: Georgia, serif;
+.about-links {
-  font-size: 34px;
+  display: flex;
-  color: var(--steel);
+  flex-wrap: wrap;
-  line-height: 0;
+  gap: 12px;
-  position: relative;
+  margin-top: 18px;
-  top: 10px;
+  padding-top: 14px;
-  margin-right: 4px;
+  border-top: 1px solid var(--rule);
+}
+
+.about-links a {
+  font-size: 13.5px;
+  font-weight: 600;
 }
 
 /* ---------- Education / Experience ---------- */

index.html

@@ -67,8 +67,14 @@
               <a class="btn btn-secondary" href="assets/resume/Keith_Casko_IT_Cloud_Resume.pdf" download>Download Resume</a>
             </div>
           </div>
-          <div class="hero-image hero-headshot">
+          <div class="hero-montage" aria-label="Selected project screenshots">
-            <img src="assets/images/keith-casko-headshot.png" alt="Keith Casko" />
+            <img class="montage-main"
+                 src="assets/images/homelab-topology.svg"
+                 alt="ByteGeist Active Directory homelab topology" />
+            <img src="assets/screenshots/bytegeist-infrastructure-live.png"
+                 alt="ByteGeist infrastructure monitoring dashboard" />
+            <img src="assets/screenshots/bytegeist-support-live.png"
+                 alt="ByteGeist Support Lab application" />
           </div>
         </div>
       </div>
@@ -278,6 +284,12 @@
         </div>
 
         <div class="about-grid">
+          <div class="about-photo">
+            <img src="assets/images/keith-casko-headshot.png"
+                 alt="Keith Casko"
+                 class="about-headshot" />
+          </div>
+
           <div class="about-text">
             <h3>Keith Casko &mdash; Kalamazoo, Michigan</h3>
             <p>
@@ -295,6 +307,21 @@
               problem-solving under pressure.
             </p>
           </div>
+
+          <aside class="about-focus" aria-label="Current focus">
+            <h3>Current Focus</h3>
+            <ul>
+              <li>Windows Server &amp; Active Directory administration</li>
+              <li>AWS serverless applications and cloud operations</li>
+              <li>Linux, Docker, monitoring, and infrastructure troubleshooting</li>
+              <li>B.S. Software Engineering coursework at WGU</li>
+            </ul>
+            <div class="about-links">
+              <a href="https://github.com/kcasko" rel="noopener">GitHub</a>
+              <a href="https://www.linkedin.com/in/keith-casko/" rel="noopener">LinkedIn</a>
+              <a href="assets/resume/Keith_Casko_IT_Cloud_Resume.pdf" download>Resume</a>
+            </div>
+          </aside>
         </div>
       </div>
     </section>