pull the terminal styling back and add an ASCII backdrop

The first pass applied terminal decoration to everything, which read as
costume rather than design. Strip it back to a few deliberate cues and
let an animated backdrop carry the character instead:

- Drop the prefix glyphs from links, tags, nav items, badges and
  headings, and restore plain section names in place of snake_case.
- Keep one prompt in the hero, the ~/ on the wordmark, ISO dates and
  status dots; everything else is ordinary type.
- Restore depth: acrylic surfaces over soft radial light, 6px radii,
  and an accent glow on the primary action and status dots.
- Draw a dithered ASCII field behind the page. A fixed per-cell dither
  value decides which cells are lit so coverage stays even, while slow
  interfering waves move brightness through it. It idles when the tab
  is hidden and stays still under prefers-reduced-motion.
- Remove the nested panel boxes on the projects page and size the entry
  page to its article column.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
SowinskiBraedenandClaude Opus 5 committed 2026-10-17 23:55:06 -07:00
1 parent 8595290318
commit 54c00bf16f
10 files changed
+693 -698

No files matched your search

+6 -4
View File
@@ -73,6 +73,7 @@
</head>
<body class="js-stop-transition" data-page="about">
<canvas id="ascii-bg" aria-hidden="true"></canvas>
<header class="header">
<nav class="nav">
<div class="logo">
@@ -134,7 +135,7 @@
<main class="container page-shell">
<div class="left-content">
<section id="profile">
<h2 class="panel__bar">profile</h2>
<h2 class="panel__bar">Profile</h2>
<div class="panel__body">
<img src="https://avatars.githubusercontent.com/u/48144618" class="profile" alt="Braeden Sowinski profile photo">
<div class="profile-sub">
@@ -149,7 +150,7 @@
</div>
</section>
<section id="skills">
<h2 class="panel__bar">skills</h2>
<h2 class="panel__bar">Skills</h2>
<div class="panel__body">
<ul class="text skills-list">
<li>Java, C, Go, OCaml</li>
@@ -170,7 +171,7 @@
</div>
<section class="about" id="about">
<h2 class="panel__bar title">about_me</h2>
<h2 class="panel__bar title">About</h2>
<div class="panel__body">
<p class="text">
I'm Braeden Sowinski, a Computer Systems Technology student at
@@ -200,7 +201,7 @@
</section>
<section class="honors" id="honors">
<h2 class="panel__bar title">highlights</h2>
<h2 class="panel__bar title">Highlights</h2>
<div class="panel__body">
<dl>
<dt class="text"><b>Red Team Hackathon - 3rd Place</b></dt>
@@ -259,6 +260,7 @@
<script src="./public/scripts/mobile.js"></script>
<script src="./public/scripts/theme.js"></script>
<script src="./public/scripts/ascii-bg.js"></script>
</body>
</html>