ui changes nav changes and README

README.md

@@ -0,0 +1,30 @@
+# ausbernard.github.io 🌱
+
+Personal portfolio site. Hand-coded, no frameworks, no build step.
+
+## 🗂 What's in here
+
+- **`index.html`** — home (work, writing, glyph strip)
+- **`about.html`** — who I am, stack, CV
+- **`writing/`** — blog posts
+- **`assets/`** — CV + anything else
+
+## 🛠 Stack
+
+Plain HTML + CSS. That's it. Deployed via GitHub Pages.
+
+## 🚀 Running locally
+
+```bash
+open index.html
+```
+
+or
+
+```bash
+spin up a Live Server
+```
+
+---
+
+Built by [Austin Edmonson](https://ausbernard.github.io) ✌️

about.html

@@ -23,7 +23,10 @@
       color: var(--ink);
       font-family: 'Questrial', sans-serif;
       -webkit-font-smoothing: antialiased;
-      min-height: 100vh;\n      max-width: 1400px;\n      margin-left: auto;\n      margin-right: auto;
+      min-height: 100vh;
+      max-width: 1400px;
+      margin-left: auto;
+      margin-right: auto;
     }
 
     /* ─── NAV ─── */
@@ -64,16 +67,18 @@
     .nav-contact {
       font-family: 'Questrial', sans-serif;
       font-size: 0.85rem;
+      letter-spacing: 0.01em;
       color: #1E2A5E;
       background: #CAFF33;
       text-decoration: none;
       padding: 0.45rem 1.1rem;
       border-radius: 999px;
       transition: opacity 0.15s, transform 0.15s;
+      opacity: 1;
     }
 
     .nav-contact:hover { opacity: 0.85; transform: scale(1.03); }
-    .nav-linkedin { color: var(--ink); opacity: 0.5; display: flex; align-items: center; transition: opacity 0.15s; }
+    .nav-linkedin { color: var(--ink); opacity: 0.5; display: flex; align-items: center; transition: opacity 0.15s; border: 1.5px solid currentColor; border-radius: 6px; padding: 2px 3px; }
     .nav-linkedin:hover { opacity: 1; }
 
     /* ─── BLOB HERO ─── */
@@ -178,8 +183,10 @@
 
     @media (max-width: 600px) {
       nav { padding: 1.75rem 1.5rem; }
-      .nav-links { gap: 1.5rem; }
-      .nav-links a { font-size: 0.82rem; }
+      .nav-links { gap: 0.75rem; }
+      .nav-links a { font-size: 0.8rem; }
+      .nav-contact { font-size: 0.72rem; padding: 0.35rem 0.75rem; }
+      .nav-linkedin svg { width: 16px; height: 16px; }
       .blob-section { padding: 2rem 1.5rem 1.5rem; }
       .about-identity { padding: 2rem 1.5rem 0; }
       .about-data { padding: 0 1.5rem 2rem; }

index.html

@@ -77,7 +77,7 @@
     }
 
     .nav-contact:hover { opacity: 0.85; transform: scale(1.03); }
-    .nav-linkedin { color: var(--ink); opacity: 0.5; display: flex; align-items: center; transition: opacity 0.15s; }
+    .nav-linkedin { color: var(--ink); opacity: 0.5; display: flex; align-items: center; transition: opacity 0.15s; border: 1.5px solid currentColor; border-radius: 6px; padding: 2px 3px; }
     .nav-linkedin:hover { opacity: 1; }
 
     /* ─── HERO ─── */
@@ -91,6 +91,7 @@
       line-height: 1.04;
       color: var(--ink);
       letter-spacing: -0.02em;
+      text-shadow: 0 4px 16px rgba(30, 42, 94, 0.1);
     }
 
     .hero-h2 {
@@ -100,6 +101,7 @@
       color: var(--ink);
       letter-spacing: -0.02em;
       margin-top: 0.2em;
+      text-shadow: 0 4px 16px rgba(30, 42, 94, 0.1);
     }
 
     .hero-body {
@@ -374,6 +376,7 @@
       grid-template-columns: repeat(4, 1fr);
       height: 220px;
       margin-bottom: 6rem;
+      box-shadow: 0 8px 32px rgba(30, 42, 94, 0.1), 0 2px 8px rgba(30, 42, 94, 0.06);
     }
 
     .glyph-panel {

writing/cicd-same-image.html

@@ -74,7 +74,7 @@
     }
 
     .nav-contact:hover { opacity: 0.85; transform: scale(1.03); }
-    .nav-linkedin { color: var(--ink); opacity: 0.5; display: flex; align-items: center; transition: opacity 0.15s; }
+    .nav-linkedin { color: var(--ink); opacity: 0.5; display: flex; align-items: center; transition: opacity 0.15s; border: 1.5px solid currentColor; border-radius: 6px; padding: 2px 3px; }
     .nav-linkedin:hover { opacity: 1; }
 
     /* ─── POST ─── */

writing/htmx-production.html

@@ -74,7 +74,7 @@
     }
 
     .nav-contact:hover { opacity: 0.85; transform: scale(1.03); }
-    .nav-linkedin { color: var(--ink); opacity: 0.5; display: flex; align-items: center; transition: opacity 0.15s; }
+    .nav-linkedin { color: var(--ink); opacity: 0.5; display: flex; align-items: center; transition: opacity 0.15s; border: 1.5px solid currentColor; border-radius: 6px; padding: 2px 3px; }
     .nav-linkedin:hover { opacity: 1; }
 
     /* ─── POST ─── */

writing/index.html

@@ -75,7 +75,7 @@
     }
 
     .nav-contact:hover { opacity: 0.85; transform: scale(1.03); }
-    .nav-linkedin { color: var(--ink); opacity: 0.5; display: flex; align-items: center; transition: opacity 0.15s; }
+    .nav-linkedin { color: var(--ink); opacity: 0.5; display: flex; align-items: center; transition: opacity 0.15s; border: 1.5px solid currentColor; border-radius: 6px; padding: 2px 3px; }
     .nav-linkedin:hover { opacity: 1; }
 
     /* ─── HERO ─── */

writing/overengineering-operational-exhaustion.html

@@ -74,7 +74,7 @@
     }
 
     .nav-contact:hover { opacity: 0.85; transform: scale(1.03); }
-    .nav-linkedin { color: var(--ink); opacity: 0.5; display: flex; align-items: center; transition: opacity 0.15s; }
+    .nav-linkedin { color: var(--ink); opacity: 0.5; display: flex; align-items: center; transition: opacity 0.15s; border: 1.5px solid currentColor; border-radius: 6px; padding: 2px 3px; }
     .nav-linkedin:hover { opacity: 1; }
 
     /* ─── POST ─── */

writing/partida-gap.html

@@ -74,7 +74,7 @@
     }
 
     .nav-contact:hover { opacity: 0.85; transform: scale(1.03); }
-    .nav-linkedin { color: var(--ink); opacity: 0.5; display: flex; align-items: center; transition: opacity 0.15s; }
+    .nav-linkedin { color: var(--ink); opacity: 0.5; display: flex; align-items: center; transition: opacity 0.15s; border: 1.5px solid currentColor; border-radius: 6px; padding: 2px 3px; }
     .nav-linkedin:hover { opacity: 1; }
 
     /* ─── POST ─── */

writing/terraform-dishwasher.html

@@ -74,7 +74,7 @@
     }
 
     .nav-contact:hover { opacity: 0.85; transform: scale(1.03); }
-    .nav-linkedin { color: var(--ink); opacity: 0.5; display: flex; align-items: center; transition: opacity 0.15s; }
+    .nav-linkedin { color: var(--ink); opacity: 0.5; display: flex; align-items: center; transition: opacity 0.15s; border: 1.5px solid currentColor; border-radius: 6px; padding: 2px 3px; }
     .nav-linkedin:hover { opacity: 1; }
 
     /* ─── POST ─── */