From 322ae49f1d8d8b664298d6b6950a4821fd3d92d5 Mon Sep 17 00:00:00 2001 From: ausbernard <109692469+ausbernard@users.noreply.github.com> Date: Tue, 26 May 2026 19:37:27 -0700 Subject: [PATCH] ui changes nav changes and README --- README.md | 30 +++++++++++++++++++ about.html | 15 +++++++--- index.html | 5 +++- writing/cicd-same-image.html | 2 +- writing/htmx-production.html | 2 +- writing/index.html | 2 +- ...verengineering-operational-exhaustion.html | 2 +- writing/partida-gap.html | 2 +- writing/terraform-dishwasher.html | 2 +- 9 files changed, 51 insertions(+), 11 deletions(-) create mode 100644 README.md diff --git a/README.md b/README.md new file mode 100644 index 0000000..fc4bf69 --- /dev/null +++ b/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) ✌️ diff --git a/about.html b/about.html index d1ef51e..dd42922 100644 --- a/about.html +++ b/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; } diff --git a/index.html b/index.html index 32c9b42..d6f7175 100644 --- a/index.html +++ b/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 { diff --git a/writing/cicd-same-image.html b/writing/cicd-same-image.html index 3e08009..9ff37c6 100644 --- a/writing/cicd-same-image.html +++ b/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 ─── */ diff --git a/writing/htmx-production.html b/writing/htmx-production.html index 2c49cf0..5cbc16f 100644 --- a/writing/htmx-production.html +++ b/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 ─── */ diff --git a/writing/index.html b/writing/index.html index 6e11332..5e888d7 100644 --- a/writing/index.html +++ b/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 ─── */ diff --git a/writing/overengineering-operational-exhaustion.html b/writing/overengineering-operational-exhaustion.html index 66a5a93..e0a888f 100644 --- a/writing/overengineering-operational-exhaustion.html +++ b/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 ─── */ diff --git a/writing/partida-gap.html b/writing/partida-gap.html index b0616da..fce863e 100644 --- a/writing/partida-gap.html +++ b/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 ─── */ diff --git a/writing/terraform-dishwasher.html b/writing/terraform-dishwasher.html index 8ffdd6a..5fae68b 100644 --- a/writing/terraform-dishwasher.html +++ b/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 ─── */