render an ASCII torus behind thicker glass, drop the light theme

- Replace the flat dither backdrop with a lit, rotating torus drawn the
  way donut.c does it: a z-buffer per cell and a luminance ramp from a
  dot to a solid block, sized against the shorter viewport axis. The
  dither field stays underneath as dust. It leads on the landing page
  and fades back where there is reading to do, and a scrim keeps the
  projects heading legible over it.
- Thicken the glass: one .surface treatment with a heavier blur, more
  transparency and an SVG film grain, shared by the header, hero,
  cards, panels and footer.
- Give the landing page labelled contact cards for LinkedIn, Gitea and
  email in place of three bare icons.
- Drop the status chips from project cards and entry headers.
- Remove the light theme, its toggle and theme.js outright.
- Add restrained motion: underlines growing from the left on links and
  nav items, a lift on cards, buttons and contact cards, and tags
  brightening with their card. All of it is off under
  prefers-reduced-motion.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
SowinskiBraedenandClaude Opus 5 committed 2026-10-18 00:10:00 -07:00
1 parent 54c00bf16f
commit 7078cda6c5
10 files changed
+448 -415

No files matched your search

+3 -24
View File
@@ -48,35 +48,15 @@
<link rel="stylesheet" href="./public/css/projects.css">
</head>
<body class="js-stop-transition" data-page="projects">
<body data-page="projects">
<canvas id="ascii-bg" aria-hidden="true"></canvas>
<header class="header">
<header class="header surface">
<nav class="nav">
<div class="logo">
<a href="./" title="sowinski.dev (Alt + H)">
<img src="https://avatars.githubusercontent.com/u/48144618?v=4" alt="Braeden Sowinski profile photo" style="border-radius:50%;"
aria-label="Braeden Sowinski profile photo" height="32">sowinski.dev
</a>
<span class="logo-switches">
<button id="theme-toggle" accesskey="t" title="(Alt + T)">
<svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" />
</svg>
<svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="5" />
<line x1="12" y1="1" x2="12" y2="3" />
<line x1="12" y1="21" x2="12" y2="23" />
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
<line x1="1" y1="12" x2="3" y2="12" />
<line x1="21" y1="12" x2="23" y2="12" />
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
</svg>
</button>
</span>
</div>
<ul id="menu" class="nav__links">
<li id="home-link">
@@ -147,7 +127,7 @@
</div>
</section>
<footer class="footer flex-container site-footer">
<footer class="footer flex-container site-footer surface">
<p>Get in touch with me!</p>
<div class="social-icons">
<a class="icon" href="https://www.linkedin.com/in/SowinskiBraeden" target="_blank" rel="noopener noreferrer me"
@@ -176,7 +156,6 @@
</main>
<script src="./public/scripts/mobile.js"></script>
<script src="./public/scripts/theme.js"></script>
<script src="./public/scripts/ascii-bg.js"></script>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="./public/scripts/content.js"></script>