Rebalance portfolio around visual evidence

css/styles.css

@@ -74,14 +74,14 @@ code {
   padding: 0 24px;
 }
 
-section { padding: 64px 0; }
+section { padding: 46px 0; }
 
 .section-head {
   display: flex;
   align-items: baseline;
   justify-content: space-between;
   gap: 16px;
-  margin-bottom: 32px;
+  margin-bottom: 24px;
   padding-bottom: 12px;
   border-bottom: 2px solid var(--steel);
   position: relative;
@@ -188,17 +188,17 @@ section { padding: 64px 0; }
 }
 
 /* ---------- Hero ---------- */
-.hero { padding: 44px 0 56px; }
+.hero { padding: 34px 0 42px; }
 .hero-grid {
   background: var(--panel);
   border: 1px solid var(--rule);
   border-top: 3px solid var(--steel);
   border-radius: 4px;
   box-shadow: 0 2px 6px rgba(16, 38, 61, 0.06);
-  padding: 40px;
+  padding: 36px;
   display: grid;
-  grid-template-columns: 1fr;
+  grid-template-columns: minmax(0, 1.12fr) minmax(340px, .88fr);
-  gap: 24px;
+  gap: 34px;
   align-items: center;
 }
 .hero h1 { font-size: 34px; margin-bottom: 18px; line-height: 1.2; }
@@ -240,6 +240,29 @@ section { padding: 64px 0; }
   font-weight: 600;
 }
 
+.hero-proof {
+  margin: 0;
+  background: #10283d;
+  border: 1px solid #29455f;
+  border-radius: 4px;
+  padding: 14px;
+  box-shadow: 0 6px 18px rgba(16, 38, 61, .12);
+}
+
+.hero-proof img {
+  width: 100%;
+  aspect-ratio: 4 / 3;
+  object-fit: contain;
+  background: #10283d;
+}
+
+.hero-proof figcaption {
+  color: #c4d3df;
+  font-size: 12px;
+  line-height: 1.45;
+  margin-top: 10px;
+}
+
 .btn {
   display: inline-flex;
   align-items: center;
@@ -315,8 +338,8 @@ section { padding: 64px 0; }
 /* ---------- Projects ---------- */
 .projects-grid {
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
+  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 20px;
+  gap: 24px;
 }
 .project-card {
   background: var(--panel);
@@ -334,13 +357,13 @@ section { padding: 64px 0; }
 }
 .project-card .thumb {
   background: #e9edf1;
-  aspect-ratio: 16 / 10;
+  aspect-ratio: 16 / 9;
   border-bottom: 1px solid var(--rule);
   overflow: hidden;
 }
 .project-card .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
 .project-card .thumb .image-placeholder { font-size: 12px; }
-.project-card .body { padding: 18px 18px 20px; display: flex; flex-direction: column; flex: 1; }
+.project-card .body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
 .project-card h3 { font-size: 18px; margin-bottom: 10px; color: var(--navy-2); }
 .project-card:hover h3 { color: var(--steel-dark); }
 .project-card p {
@@ -437,6 +460,10 @@ section { padding: 64px 0; }
   display: block;
 }
 
+.credential-badge-google img {
+  transform: scale(1.08);
+}
+
 .credential-copy h3 {
   font-size: 18px;
   margin-bottom: 6px;
@@ -605,6 +632,18 @@ section { padding: 64px 0; }
 }
 .panel li { padding: 2px 0; }
 
+.panel-costco {
+  grid-column: 1 / -1;
+}
+
+.prior-experience {
+  margin: 18px 0 0;
+  padding-top: 14px;
+  border-top: 1px solid var(--rule-soft);
+  color: var(--muted-2);
+  font-size: 13.5px;
+}
+
 /* ---------- Contact banner ---------- */
 .contact-cta {
   background: var(--navy);
@@ -618,7 +657,9 @@ section { padding: 64px 0; }
   gap: 20px;
 }
 .contact-cta h2 { color: #fff; margin: 0 0 6px; font-size: 22px; }
-.contact-cta p { margin: 0; color: #a9b8c7; font-size: 14.5px; }
+.contact-cta p { margin: 0; color: #c7d3df; font-size: 14.5px; }
+.contact-cta p a { color: #f4f8fb; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
+.contact-cta p a:hover { color: #ffffff; }
 
 /* ---------- Footer ---------- */
 .site-footer {
@@ -649,7 +690,8 @@ section { padding: 64px 0; }
 
 /* ---------- Responsive ---------- */
 @media (max-width: 980px) {
-  .hero-grid { grid-template-columns: 1fr; padding: 32px; }
+  .hero-grid { grid-template-columns: 1fr; padding: 30px; }
+  .hero-proof { max-width: 680px; }
   .projects-grid { grid-template-columns: repeat(2, 1fr); }
   .skills-grid { grid-template-columns: repeat(2, 1fr); }
   .about-grid { grid-template-columns: 1fr; }
@@ -660,7 +702,7 @@ section { padding: 64px 0; }
 
 @media (max-width: 640px) {
   body { font-size: 15.5px; }
-  section { padding: 44px 0; }
+  section { padding: 36px 0; }
   .hero { padding: 28px 0 36px; }
   .hero-grid { padding: 22px; }
   .hero h1 { font-size: 27px; }
@@ -866,42 +908,6 @@ section { padding: 64px 0; }
 .skills-grid-focused .skill-card h3 { font-size:17px; font-family:Georgia,"Times New Roman",serif; margin:0; }
 .skills-grid-focused .skill-card p { color:var(--muted-2); font-size:14px; margin:0; flex:1; }
 .skills-grid-focused .view-link, .case-card .view-link { font-size:13.5px; font-weight:600; }
-.proof-strip {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 14px;
-  margin-bottom: 22px;
-}
-
-.proof-callout {
-  background: #eef2f6;
-  border: 1px solid var(--rule);
-  border-left: 3px solid var(--steel);
-  border-radius: 4px;
-}
-
-.proof-callout summary {
-  cursor: pointer;
-  padding: 14px 16px;
-  font-size: 14px;
-  font-weight: 700;
-  color: var(--navy-2);
-}
-
-.proof-body {
-  padding: 0 16px 14px;
-  border-top: 1px solid var(--rule-soft);
-}
-
-.proof-body p {
-  margin: 10px 0 0;
-  color: var(--muted-2);
-  font-size: 13.5px;
-  line-height: 1.55;
-}
-
-.proof-body strong { color: var(--navy-2); }
-
 .screenshot-frame {
   background: #101820;
   padding: 18px 8px 8px;
@@ -925,15 +931,42 @@ section { padding: 64px 0; }
   border: 1px solid rgba(255,255,255,.10);
 }
 
+#troubleshooting {
+  background: #e8edf2;
+  border-top: 1px solid #d8e0e8;
+  border-bottom: 1px solid #d8e0e8;
+}
+
+.case-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0,1fr));
+  gap: 22px;
+}
+
+.case-card {
+  background: #10263d;
+  border: 1px solid #29455f;
+  border-top: 3px solid #5ca3d2;
+  padding: 26px;
+  border-radius: 4px;
+  box-shadow: 0 6px 18px rgba(16, 38, 61, .10);
+}
+
 .case-meta {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
-  margin-bottom: 8px;
+  margin-bottom: 10px;
 }
 
-.case-meta .case-label {
+.case-label {
+  display: block;
+  font-size: 12px;
+  text-transform: uppercase;
+  font-weight: 700;
+  color: #8fc4e6;
+  letter-spacing: .4px;
   margin-bottom: 0;
 }
 
@@ -949,19 +982,58 @@ section { padding: 64px 0; }
 }
 
 .status-pill.verified {
-  background: #e8f3ec;
+  background: #163c2a;
-  border: 1px solid #a7c9b2;
+  border: 1px solid #4f936a;
-  color: #275d3a;
+  color: #c9f1d7;
+}
+
+.case-card h3 {
+  font-size: 20px;
+  color: #ffffff;
+}
+
+.case-card p {
+  font-size: 14px;
+  color: #c9d5df;
+}
+
+.case-card p strong {
+  color: #ffffff;
+}
+
+.case-card code {
+  background: #0a1a29;
+  border-color: #35536d;
+  color: #d8edf9;
+}
+
+.case-terminal {
+  margin: 18px 0;
+  padding: 14px 16px;
+  overflow-x: auto;
+  background: #081521;
+  border: 1px solid #35536d;
+  border-radius: 3px;
+  color: #bde3c7;
+  font: 13px/1.55 "Consolas", "Menlo", monospace;
+  white-space: pre-wrap;
+}
+
+.case-terminal span {
+  color: #8fc4e6;
+}
+
+.case-card .view-link {
+  color: #9ed4f3;
+}
+
+.case-card .view-link:hover {
+  color: #ffffff;
 }
 
-.case-grid { display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap:22px; }
-.case-card { background:var(--panel); border:1px solid var(--rule); border-top:3px solid var(--steel); padding:26px; border-radius:4px; }
-.case-label { display:block; font-size:12px; text-transform:uppercase; font-weight:700; color:var(--steel); letter-spacing:.4px; margin-bottom:8px; }
-.case-card h3 { font-size:20px; }
-.case-card p { font-size:14px; color:var(--muted-2); }
-.case-card p strong { color:var(--navy-2); }
 @media (max-width: 700px) {
- .skills-grid-focused, .case-grid, .proof-strip { grid-template-columns:1fr; }
+  .skills-grid-focused, .case-grid { grid-template-columns: 1fr; }
+  .case-meta { align-items: flex-start; flex-direction: column; }
 }
 
 /* ---------- Homelab dark project treatment ---------- */

index.html

@@ -57,12 +57,6 @@
               infrastructure, and build AWS applications. My project write-ups document
               troubleshooting steps, fixes, and verification—not just installations.
             </p>
-            <p>
-              Currently completing a B.S. in Software Engineering at Western Governors
-              University while building practical infrastructure and support experience
-              through a dedicated homelab, AWS projects, and ongoing study of systems
-              administration and cloud operations.
-            </p>
             <div class="hero-actions">
               <a class="btn btn-primary" href="#projects">View Projects</a>
               <a class="btn btn-secondary" href="assets/resume/Keith_Casko_IT_Cloud_Resume.pdf" download>Download Resume</a>
@@ -74,6 +68,12 @@
               <span>Kalamazoo, Michigan</span>
             </div>
           </div>
+
+          <figure class="hero-proof">
+            <img src="assets/images/homelab-topology.svg"
+                 alt="ByteGeist Windows Server lab topology with DC01, FILE01, OPNsense, and WIN11-01" />
+            <figcaption>Windows Server lab topology &mdash; real environment, documented and tested.</figcaption>
+          </figure>
         </div>
       </div>
     </section>
@@ -98,12 +98,8 @@
             <div class="body">
               <h3>ByteGeist Windows Server Lab</h3>
               <p>
-                Windows Server 2022 Active Directory lab in VMware: domain
+                Windows Server 2022 Active Directory lab with AD DS, DNS, SMB permissions,
-                controller with AD DS and DNS, member file server with
+                a Windows 11 domain client, and OPNsense segmentation practice.
-                role-based SMB share access, a Windows 11 domain client, and
-                an OPNsense firewall/router used for segmentation practice.
-                The current client and servers remain on VMnet8 while the
-                VMnet2 segmented client layout is the next networking exercise.
               </p>
               <a class="view-link" href="homelab.html">View Lab Details</a>
             </div>
@@ -117,10 +113,8 @@
             <div class="body">
               <h3>ByteGeist Support Lab</h3>
               <p>
-                An interactive IT troubleshooting application on AWS (Amplify,
+                Interactive AWS troubleshooting lab with realistic incidents,
-                Lambda, API Gateway, DynamoDB) with React. Realistic support
+                command-line workflows, diagnosis, resolution, and scoring.
-                incidents, command-line workflows, diagnosis, resolution, and
-                scoring.
               </p>
               <a class="view-link" href="https://supportlab.casko.dev/" rel="noopener">View Live Site</a>
             </div>
@@ -135,11 +129,8 @@
             <div class="body">
               <h3>ByteGeist Infrastructure Lab</h3>
               <p>
-                A self-hosted Hetzner Ubuntu environment running Docker-based
+                Self-hosted Ubuntu infrastructure with Docker, Grafana, Prometheus,
-                services with Prometheus, node_exporter, cAdvisor, Grafana, Loki,
+                Loki, Authentik, Gitea, CI/CD, TLS routing, and live service telemetry.
-                Authentik, Gitea, Woodpecker CI, TLS routing, and a sanitized live
-                status API. Built to practice deployment, monitoring, identity,
-                security, recovery, and day-to-day infrastructure operations.
               </p>
               <a class="view-link" href="https://bytegeist.casko.dev/" rel="noopener">View Live Control Plane</a>
             </div>
@@ -153,10 +144,8 @@
             <div class="body">
               <h3>AWS Cloud Study Tracker</h3>
               <p>
-                A multi-user serverless AWS study tracker using Cognito, API Gateway,
+                Multi-user serverless AWS tracker using Cognito, API Gateway, Lambda,
-                Lambda, DynamoDB, and Amplify. Public demo topics remain readable
+                DynamoDB, Amplify, JWT authorization, and per-record ownership checks.
-                without an account, while signed-in users get private CRUD access
-                protected by JWT authorization and per-record ownership checks.
               </p>
               <a class="view-link" href="https://tracker.casko.dev" rel="noopener">View Live Site</a>
             </div>
@@ -173,23 +162,6 @@
           <h2 id="notes-title">Troubleshooting Case Studies</h2>
           <span class="subtitle">Observed issues, diagnostic work, and verified outcomes</span>
         </div>
-        <div class="proof-strip" aria-label="Quick verification evidence">
-          <details class="proof-callout">
-            <summary>Verified Fix: Domain trust failure</summary>
-            <div class="proof-body">
-              <p><code>Test-ComputerSecureChannel</code> failed while WIN11-01 was on the wrong VMware network.</p>
-              <p><strong>Fix:</strong> Returned the client to VMnet8, restored DC01 as DNS, repaired the secure channel, then verified with <code>Test-ComputerSecureChannel</code> and <code>nltest</code>.</p>
-            </div>
-          </details>
-          <details class="proof-callout">
-            <summary>Verified Fix: PDC time source</summary>
-            <div class="proof-body">
-              <p><code>w32tm /query /source</code> reported <code>Local CMOS Clock</code> on the PDC Emulator.</p>
-              <p><strong>Fix:</strong> Configured external NTP peers, resynchronized Windows Time, then verified <code>time.windows.com</code> as the active source.</p>
-            </div>
-          </details>
-        </div>
-
         <div class="case-grid">
           <article class="case-card">
             <div class="case-meta">
@@ -200,6 +172,8 @@
             <p><strong>Problem:</strong> An AD domain controller reported <code>Local CMOS Clock</code> as its time source. Unreliable domain time can lead to Kerberos clock-skew failures.</p>
             <p><strong>Action:</strong> Checked the source with <code>w32tm</code>, configured external NTP peers, restarted Windows Time, and resynchronized.</p>
             <p><strong>Result:</strong> Verified <code>time.windows.com</code> as the source, stratum 5.</p>
+            <pre class="case-terminal"><span>$ w32tm /query /source</span>
+time.windows.com</pre>
             <a class="view-link" href="homelab.html#validation">See commands and verification</a>
           </article>
           <article class="case-card">
@@ -211,6 +185,8 @@
             <p><strong>Problem:</strong> WIN11-01 was bridged onto the physical LAN and could not reach DC01 on the VMware NAT subnet. Trust repair initially failed.</p>
             <p><strong>Action:</strong> Changed the VM network to NAT, pointed client DNS at DC01, and repaired the machine-account trust.</p>
             <p><strong>Result:</strong> <code>Test-ComputerSecureChannel</code> returned <code>True</code>; <code>nltest</code> located DC01 successfully.</p>
+            <pre class="case-terminal"><span>$ Test-ComputerSecureChannel</span>
+True</pre>
             <a class="view-link" href="homelab.html#validation">See audit evidence</a>
           </article>
         </div>
@@ -271,7 +247,7 @@
           </article>
 
           <article class="credential-card">
-            <div class="credential-badge">
+            <div class="credential-badge credential-badge-google">
               <img src="assets/credentials/google-it-support.png"
                    alt="Google IT Support Professional Certificate badge" />
             </div>
@@ -364,7 +340,7 @@
             </ul>
           </div>
 
-          <div class="panel">
+          <div class="panel panel-costco">
             <h3>Costco Wholesale &mdash; Baker</h3>
             <div class="meta">June 2015 &ndash; Present</div>
             <ul>
@@ -372,16 +348,7 @@
               <li>Day-to-day troubleshooting of equipment and workflow problems</li>
               <li>Training coworkers, customer service, and clear communication under time pressure</li>
             </ul>
-          </div>
+            <p class="prior-experience"><strong>Earlier experience:</strong> Bakery and grocery roles before Costco, building a long-term background in customer service, production, teamwork, and operational problem-solving.</p>
-
-          <div class="panel">
-            <h3>Earlier Grocery &amp; Bakery Experience</h3>
-            <div class="meta">Prior to Costco</div>
-            <p>
-              Additional long-term experience in bakery and grocery environments,
-              contributing to roughly three decades of customer service, production,
-              teamwork, training, and operational problem-solving.
-            </p>
           </div>
 
         </div>