Skip to content

Accessibility: contrast, landmarks, and screen-reader hygiene #4

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
androidfred merged 1 commit into from
Jun 7, 2026
Merged

Accessibility: contrast, landmarks, and screen-reader hygiene #4

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
27 changes: 15 additions & 12 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; letter-spacing:.1px}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px}
a{color:var(--accent); text-decoration:none} a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px}
svg{display:block}

header{padding:64px 0 26px}
Expand Down Expand Up @@ -51,7 +52,7 @@
.feature{display:flex; gap:15px; align-items:center; margin-top:24px; padding:18px 20px;
border:1px solid var(--line); border-left:3px solid var(--accent-2); border-radius:12px; background:var(--panel)}
.feature:hover{text-decoration:none; border-color:var(--accent-2)}
.feature .badge{background:var(--accent-2)}
.feature .badge{background:#177e39}
.feature h3{margin:0 0 2px; font-size:17px; color:var(--fg)} .feature p{margin:0; color:var(--muted); font-size:14px}
.feature .go{color:var(--accent-2); font-weight:600}

Expand All @@ -70,44 +71,45 @@ <h1>Fredrik Friis</h1>
delivering globally scalable solutions through applied Computer Science and system design,
and technical bar-raising across organizations.</p>
<ul class="links">
<li><a href="mailto:fre.and.fri@gmail.com"><svg viewBox="0 0 24 24"><path d="M2 5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5zm2 .5v.4l8 5 8-5v-.4H4zm16 2.3-7.5 4.7a1 1 0 0 1-1 0L4 7.8V19h16V7.8z"/></svg>Email</a></li>
<li><a href="https://github.com/androidfred" rel="me noopener"><svg viewBox="0 0 24 24"><path d="M12 2A10 10 0 0 0 8.8 21.5c.5.1.7-.2.7-.5v-1.7c-2.8.6-3.4-1.3-3.4-1.3-.5-1.2-1.1-1.5-1.1-1.5-.9-.6.1-.6.1-.6 1 .1 1.5 1 1.5 1 .9 1.6 2.4 1.1 3 .9.1-.7.4-1.1.6-1.4-2.2-.3-4.6-1.1-4.6-5 0-1.1.4-2 1-2.7-.1-.3-.4-1.3.1-2.7 0 0 .8-.3 2.7 1a9.4 9.4 0 0 1 5 0c1.9-1.3 2.7-1 2.7-1 .5 1.4.2 2.4.1 2.7.6.7 1 1.6 1 2.7 0 3.9-2.4 4.7-4.6 5 .4.3.7.9.7 1.9v2.8c0 .3.2.6.7.5A10 10 0 0 0 12 2z"/></svg>GitHub</a></li>
<li><a href="https://docs.google.com/document/d/1xKLSoiRCl5eJbUR6-seefyGJXT1H6bVE0IJQ_fLvt8Y" rel="noopener"><svg viewBox="0 0 24 24"><path d="M6 2h8l4 4v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zm7 1.5V7h3.5L13 3.5zM8 12h8v1.5H8V12zm0 3.5h8V17H8v-1.5zM8 8.5h4V10H8V8.5z"/></svg>Resume</a></li>
<li><a href="mailto:fre.and.fri@gmail.com"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M2 5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5zm2 .5v.4l8 5 8-5v-.4H4zm16 2.3-7.5 4.7a1 1 0 0 1-1 0L4 7.8V19h16V7.8z"/></svg>Email</a></li>
<li><a href="https://github.com/androidfred" rel="me noopener"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 2A10 10 0 0 0 8.8 21.5c.5.1.7-.2.7-.5v-1.7c-2.8.6-3.4-1.3-3.4-1.3-.5-1.2-1.1-1.5-1.1-1.5-.9-.6.1-.6.1-.6 1 .1 1.5 1 1.5 1 .9 1.6 2.4 1.1 3 .9.1-.7.4-1.1.6-1.4-2.2-.3-4.6-1.1-4.6-5 0-1.1.4-2 1-2.7-.1-.3-.4-1.3.1-2.7 0 0 .8-.3 2.7 1a9.4 9.4 0 0 1 5 0c1.9-1.3 2.7-1 2.7-1 .5 1.4.2 2.4.1 2.7.6.7 1 1.6 1 2.7 0 3.9-2.4 4.7-4.6 5 .4.3.7.9.7 1.9v2.8c0 .3.2.6.7.5A10 10 0 0 0 12 2z"/></svg>GitHub</a></li>
<li><a href="https://docs.google.com/document/d/1xKLSoiRCl5eJbUR6-seefyGJXT1H6bVE0IJQ_fLvt8Y" rel="noopener"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6 2h8l4 4v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zm7 1.5V7h3.5L13 3.5zM8 12h8v1.5H8V12zm0 3.5h8V17H8v-1.5zM8 8.5h4V10H8V8.5z"/></svg>Resume</a></li>
</ul>
</header>

<hr class="divider">

<main>
<section aria-labelledby="experience">
<h2 id="experience">Experience</h2>

<div class="item">
<span class="badge" style="background:#e8590c">T</span>
<span class="badge" style="background:#c2410c" aria-hidden="true">T</span>
<div class="body"><div class="top"><h3>Toast</h3><span class="when">2023 – Present</span><span class="where">· Remote (US)</span></div>
<p>Senior Software Engineer.</p></div>
</div>
<div class="item">
<span class="badge" style="background:#f0a020">G</span>
<span class="badge" style="background:#b45309" aria-hidden="true">G</span>
<div class="body"><div class="top"><h3>Grindr</h3><span class="when">2023</span><span class="where">· Remote (US)</span></div>
<p>Senior Software Engineer.</p></div>
</div>
<div class="item">
<span class="badge" style="background:#1668e3">E</span>
<span class="badge" style="background:#1668e3" aria-hidden="true">E</span>
<div class="body"><div class="top"><h3>Expedia Group</h3><span class="when">2017 – 2023</span><span class="where">· Brisbane, Australia</span></div>
<p>Senior Software Developer.</p></div>
</div>
<div class="item">
<span class="badge" style="background:#0ca678">C</span>
<span class="badge" style="background:#0f766e" aria-hidden="true">C</span>
<div class="body"><div class="top"><h3>Compare the Market</h3><span class="when">2016 – 2017</span></div>
<p>Senior Software Engineer at the insurance aggregator.</p></div>
</div>
<div class="item">
<span class="badge" style="background:#7048e8">G</span>
<span class="badge" style="background:#7048e8" aria-hidden="true">G</span>
<div class="body"><div class="top"><h3>Guvera</h3><span class="when">2015 – 2016</span></div>
<p>Project Lead Software Engineer at the music-streaming startup.</p></div>
</div>
<div class="item">
<span class="badge" style="background:#2f9e44">S</span>
<span class="badge" style="background:#197a37" aria-hidden="true">S</span>
<div class="body"><div class="top"><h3>SciPro · Stockholm University</h3><span class="when">2011 – 2015</span></div>
<p>Team Lead Full-Stack Developer. Turned the in-house e-learning app SciPro into an
award-winning, internationally used product.</p></div>
Expand All @@ -117,11 +119,12 @@ <h2 id="experience">Experience</h2>
<section aria-labelledby="projects">
<h2 id="projects" style="margin-top:34px">Projects</h2>
<a class="feature" href="https://positioncalculator.bedobi.com" rel="noopener">
<span class="badge">∑</span>
<span class="badge" aria-hidden="true">∑</span>
<div><h3>Position Calculator</h3>
<p>Free, open-source trading calculator for fixed-percent-risk position sizing. <span class="go">Open it →</span></p></div>
<p>Free, open-source trading calculator for fixed-percent-risk position sizing. <span class="go">Open it <span aria-hidden="true">→</span></span></p></div>
</a>
</section>
</main>

<footer>© Bedobi · Fredrik Friis</footer>

Expand Down