Skip to content

New personal website #10

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ausbernard merged 3 commits into from
May 11, 2026
Merged

New personal website #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7a4371b
feat: the brand new website
ausbernard May 9, 2026
49a98c1
new website
ausbernard May 11, 2026
5e90cf2
writing
ausbernard May 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added assets/pics/partida-artwork.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/pics/site-artwork.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1,493 changes: 1,004 additions & 489 deletions index.html
View file
Open in desktop

Large diffs are not rendered by default.

362 changes: 362 additions & 0 deletions writing/designing-50-plus.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,362 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Designing for the 50+ demographic — Ausb</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,300;0,8..60,400;1,8..60,300;1,8..60,400&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500&display=swap" rel="stylesheet" />
<style>
:root {
--bg: #F2F2F0;
--white: #FFFFFF;
--ink: #1A1A1A;
--muted: #888;
--border: #E0E0DC;
--blue: #95B1EE;
--blue-dk: #364C84;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
background: var(--bg);
color: var(--ink);
font-family: 'DM Sans', sans-serif;
font-weight: 300;
-webkit-font-smoothing: antialiased;
min-height: 100vh;
}

nav {
background: var(--white);
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 2.5rem;
height: 52px;
position: sticky;
top: 0;
z-index: 50;
}

.nav-logo {
font-family: 'DM Sans', sans-serif;
font-size: 1.15rem;
font-weight: 500;
letter-spacing: -0.04em;
color: var(--ink);
text-decoration: none;
}

.nav-links { display: flex; align-items: center; gap: 0.25rem; }

.nav-links a {
font-size: 0.8rem;
color: var(--muted);
text-decoration: none;
padding: 0.35rem 0.75rem;
border-radius: 4px;
transition: color 0.15s, background 0.15s;
}

.nav-links a:hover { color: var(--ink); background: var(--bg); }
.nav-links a.active { color: var(--ink); font-weight: 500; }
.nav-links a.nav-secondary { font-size: 0.72rem; opacity: 0.5; }
.nav-links a.nav-secondary:hover { opacity: 1; }

.nav-right { display: flex; align-items: center; gap: 0.75rem; }
.nav-divider { width: 1px; height: 16px; background: var(--border); }
.nav-status { display: flex; align-items: center; gap: 0.35rem; font-size: 0.72rem; color: var(--muted); }

.status-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: #57BA6A;
animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }

.nav-contact {
font-size: 0.78rem;
font-weight: 500;
color: #FFFFFF;
text-decoration: none;
padding: 0.4rem 1.1rem;
border: 1px solid #1A1A1A;
border-radius: 4px;
background: #1A1A1A;
transition: background 0.15s, transform 0.15s;
}

.nav-contact:hover { background: #333; border-color: #333; transform: scale(1.03); }

.post-wrap {
max-width: 680px;
margin: 0 auto;
padding: 3.5rem 2rem 8rem;
animation: fadeUp 0.45s ease both 0.05s;
}

.post-back {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.78rem;
color: var(--muted);
text-decoration: none;
margin-bottom: 2.5rem;
transition: color 0.15s;
}

.post-back:hover { color: var(--ink); }

.post-tag {
display: inline-block;
font-size: 0.62rem;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
border: 1px solid;
padding: 0.15rem 0.5rem;
border-radius: 3px;
margin-bottom: 1rem;
}

.tag-product { background: #FEF3C7; color: #92400E; border-color: #FDE68A; }
.tag-design { background: #EDE9FE; color: #5B21B6; border-color: #DDD6FE; }
.tag-engineering { background: #D1FAE5; color: #065F46; border-color: #A7F3D0; }
.tag-ux { background: #FCE7F3; color: #9D174D; border-color: #FBCFE8; }

.post-title {
font-family: 'Source Serif 4', serif;
font-size: clamp(1.75rem, 4vw, 2.4rem);
font-weight: 400;
line-height: 1.18;
letter-spacing: -0.02em;
color: var(--ink);
margin-bottom: 1rem;
}

.post-meta {
display: flex;
gap: 1.25rem;
font-size: 0.75rem;
color: var(--muted);
margin-bottom: 2.5rem;
padding-bottom: 2rem;
border-bottom: 1px solid var(--border);
}

.post-body {
font-family: 'Source Serif 4', serif;
font-weight: 300;
font-size: 1.05rem;
line-height: 1.82;
color: #2C2C2C;
}

.post-body p { margin-bottom: 1.6rem; }

.post-body h2 {
font-size: 1.2rem;
font-weight: 500;
letter-spacing: -0.01em;
margin: 2.5rem 0 0.8rem;
color: var(--ink);
}

.post-body em { font-style: italic; }
.post-body strong { font-weight: 500; color: var(--ink); }

.post-body code {
font-family: 'Courier New', monospace;
font-size: 0.88em;
background: var(--border);
padding: 0.1em 0.35em;
border-radius: 3px;
color: var(--blue-dk);
}

.post-body ul,
.post-body ol { margin: 0 0 1.6rem 1.5rem; }
.post-body li { margin-bottom: 0.4rem; }

.post-nav {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 2.5rem;
margin-top: 3rem;
border-top: 1px solid var(--border);
gap: 1rem;
}

.post-nav a {
font-size: 0.8rem;
color: var(--muted);
text-decoration: none;
transition: color 0.15s;
max-width: 45%;
}

.post-nav a:hover { color: var(--ink); }
.post-nav .nav-next { text-align: right; margin-left: auto; }

@keyframes fadeUp {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}

/* ─── MOBILE NAV ─── */
.nav-burger {
display: none;
flex-direction: column;
gap: 5px;
background: none;
border: none;
cursor: pointer;
padding: 0.25rem;
}

.nav-burger span {
display: block;
width: 18px;
height: 2px;
background: var(--ink);
border-radius: 1px;
}

.nav-mobile-menu {
display: none;
background: var(--white);
border-bottom: 1px solid var(--border);
padding: 0.25rem 2.5rem 0.75rem;
flex-direction: column;
position: sticky;
top: 52px;
z-index: 49;
}

.nav-mobile-menu.open { display: flex; }

.nav-mobile-menu a {
font-size: 0.88rem;
color: var(--muted);
text-decoration: none;
padding: 0.65rem 0;
border-bottom: 1px solid var(--border);
transition: color 0.15s;
}

.nav-mobile-menu a:last-child { border-bottom: none; }
.nav-mobile-menu a:hover,
.nav-mobile-menu a.active { color: var(--ink); }

@media (max-width: 600px) {
nav { padding: 0 1.25rem; }
.nav-links { display: none; }
.nav-status { display: none; }
.nav-contact { display: none; }
.nav-divider { display: none; }
.nav-burger { display: flex; }
.post-wrap { padding: 2.5rem 1.25rem 6rem; }
.post-body { font-size: 0.98rem; }
}
</style>
</head>
<body>

<nav>
<a href="../index.html" class="nav-logo">Ausb.</a>
<div class="nav-links">
<a href="../index.html#work">Work</a>
<a href="index.html" class="active">Writing</a>
<a href="../photojournal.html" class="nav-secondary">Photos</a>
<a href="../guestbook.html" class="nav-secondary">Guestbook</a>
</div>
<div class="nav-right">
<div class="nav-status">
<div class="status-dot"></div>
Open to work
</div>
<div class="nav-divider"></div>
<a href="mailto:austinbedmonson@gmail.com" class="nav-contact">Get in touch →</a>
<button class="nav-burger" id="navBurger" aria-label="Open menu">
<span></span><span></span><span></span>
</button>
</div>
</nav>

<div class="nav-mobile-menu" id="navMobileMenu">
<a href="../index.html#work">Work</a>
<a href="index.html" class="active">Writing</a>
<a href="../photojournal.html">Photos</a>
<a href="../guestbook.html">Guestbook</a>
<a href="mailto:austinbedmonson@gmail.com">Get in touch</a>
</div>

<script>
(function() {
var burger = document.getElementById('navBurger');
var menu = document.getElementById('navMobileMenu');
burger.addEventListener('click', function() { menu.classList.toggle('open'); });
menu.addEventListener('click', function(e) {
if (e.target.tagName === 'A') menu.classList.remove('open');
});
document.addEventListener('click', function(e) {
if (!burger.contains(e.target) && !menu.contains(e.target)) menu.classList.remove('open');
});
})();
</script>

<div class="post-wrap">

<a href="index.html" class="post-back">← All posts</a>

<span class="post-tag tag-design">Design</span>
<h1 class="post-title">Designing for the 50+ demographic: lessons from building a visa app</h1>
<div class="post-meta">
<span>March 2026</span>
<span>4 min read</span>
</div>

<div id="post-content" class="post-body"></div>

<div class="post-nav">
<a href="partida-gap.html">← Why we built Partida</a>
<a href="htmx-production.html" class="nav-next">HTMX in production →</a>
</div>

</div>

<script type="text/markdown" id="md">
When we started building Partida, we knew our primary users wouldn't be digital natives. The families moving to Portugal under the D7 or NHR programs tend to be in their 50s and 60s — often retiring early, financially independent, and very capable. But their relationship with software is different from someone who grew up with a smartphone in their pocket.

The mistake most product teams make is assuming this means "make the font bigger." Accessibility is important, but it's not the whole picture. The deeper challenge is *discoverability* — the degree to which a user can figure out what to do next without already knowing how the interface works.

## Intuitive is relative

We ran early usability sessions with six families. One thing that stood out immediately: the iconography we took for granted meant nothing to several participants. A hamburger menu icon, a kebab menu, even a magnifying glass for search — these aren't universal. They're conventions learned through years of using specific products.

The fix wasn't to remove icons, but to always pair them with a text label. "Menu" next to the hamburger. "Search" next to the magnifying glass. It costs a little space. It gains a lot of clarity. We also moved away from icons as primary navigation entirely, leaning on labeled buttons and clear section headers instead.

## Trust signals matter more than you think

Something we didn't anticipate: our users wanted to know *who* was behind the product before they'd enter anything sensitive. They'd ask "is this secure?" and "who runs this?" before entering a passport number. This is entirely reasonable — but it meant our onboarding needed to front-load credibility, not features.

We added a short "about" section to the sign-up flow. We made our contact information visible on every page. We added explicit callouts when data was encrypted or when something was never stored. None of this is novel. But for this demographic, it was the difference between a completed onboarding and a bounce.

The biggest lesson: don't mistake familiarity for simplicity. Something can be simple and still require learning. Design for the learning curve, not against it.
</script>

<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script>
document.getElementById('post-content').innerHTML =
marked.parse(document.getElementById('md').textContent.trim());
</script>
</body>
</html>
Loading
Loading