SowinskiBraeden/.profile
1
0 Fork 0
Code Issues Packages Projects Releases Wiki Activity

rework the landing layout, revert the torus and heavy glass

Browse Source 
The torus backdrop and film-grain glass were too much, so this goes back
to the quieter dithered field and the lighter frosted surfaces, keeping
the light-theme and status-chip removals from the previous commit.

The hero now lays out as a three-part grid: the photo pinned to the top
left, the contact buttons directly under it, and the text column beside
them, so the left column carries weight instead of leaving ragged space.
The contact buttons lose their labels and become 48px icon squares that
line up exactly with the width of the photo. On narrow screens the photo
drops out and the contact row moves below the text.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
SowinskiBraedenandClaude Opus 5 committed 2026-10-18 00:20:19 -07:00
1 parent 7078cda6c5
commit 91b7960dc4
4 files changed
+101 -230
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

public/css/projects.css
-18
View File
@@ -5,28 +5,10 @@
/* The page header sits on the background; only cards get a surface. */
.projects-hero {
position: relative;
isolation: isolate;
margin-bottom: 40px;
max-width: 760px;
}
/* Soft scrim so the heading stays readable over the ASCII field, without
putting the text in a box. */
.projects-hero::before {
content: "";
position: absolute;
inset: -28px -10px -20px -10px;
z-index: -1;
pointer-events: none;
background: radial-gradient(
ellipse at 30% 50%,
rgba(11, 12, 15, 0.92),
rgba(11, 12, 15, 0.6) 45%,
transparent 75%
);
}
.projects-hero h1,
.entry-title {
font-size: clamp(1.5rem, 3vw, 2.1rem);
public/css/style.css
+45 -49
View File
@@ -2,8 +2,8 @@
:root {
--theme: #0b0c0f;
--surface: rgba(20, 22, 27, 0.34);
--surface-raised: rgba(28, 31, 38, 0.46);
--surface: rgba(21, 23, 28, 0.58);
--surface-raised: rgba(28, 31, 37, 0.62);
--bar: rgba(255, 255, 255, 0.04);
--primary: #ccd0d9;
--bright: #f2f4f8;
@@ -13,7 +13,7 @@
--border: rgba(255, 255, 255, 0.1);
--border-strong: rgba(255, 255, 255, 0.2);
--glow: rgba(235, 82, 52, 0.16);
--shadow: 0 20px 54px rgba(0, 0, 0, 0.4);
--shadow: 0 18px 50px rgba(0, 0, 0, 0.34);
--selection: rgba(235, 82, 52, 0.3);
--ascii-base: #99a2b4;
--ascii-accent: #eb5234;
@@ -23,9 +23,6 @@
--mono:
"JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo,
Consolas, "Liberation Mono", monospace;
/* Fine film grain that sits on every frosted surface. */
--grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.55'/%3E%3C/svg%3E");
}
* {
@@ -78,11 +75,7 @@ body::before {
inset: 0;
z-index: 0;
pointer-events: none;
opacity: 0.15;
}
body[data-page="home"] #ascii-bg {
opacity: 0.34;
opacity: 0.22;
}
header,
@@ -96,27 +89,11 @@ main,
.surface {
position: relative;
isolation: isolate;
background: var(--surface);
backdrop-filter: blur(26px) saturate(150%);
-webkit-backdrop-filter: blur(26px) saturate(150%);
backdrop-filter: blur(18px) saturate(135%);
-webkit-backdrop-filter: blur(18px) saturate(135%);
border: 1px solid var(--border);
box-shadow:
var(--shadow),
inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.surface::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
pointer-events: none;
background-image: var(--grain);
background-size: 180px 180px;
opacity: 0.22;
mix-blend-mode: soft-light;
box-shadow: var(--shadow);
}
a,
@@ -442,17 +419,25 @@ body.menu-open .overlay * {
margin-left: 8px;
}
/* Photo and contact row stack in a left column, both pinned to the top,
with the text column beside them. */
.term__body {
display: grid;
grid-template-columns: auto 1fr;
gap: 30px;
padding: 32px 30px;
align-items: center;
grid-template-columns: 164px 1fr;
grid-template-areas:
"photo stream"
"contact stream";
grid-template-rows: auto auto;
align-content: start;
column-gap: 30px;
row-gap: 16px;
padding: 32px 30px 34px;
}
.term__avatar {
width: 148px;
height: 148px;
grid-area: photo;
width: 164px;
height: 164px;
object-fit: cover;
border-radius: var(--radius);
border: 1px solid var(--border-strong);
@@ -462,11 +447,12 @@ body.menu-open .overlay * {
}
.term__stream {
grid-area: stream;
min-width: 0;
}
.cmd {
margin: 0 0 18px;
margin: 0 0 16px;
color: var(--muted);
font-size: 13px;
}
@@ -592,19 +578,21 @@ body.menu-open .overlay * {
color: var(--secondary);
}
/* The landing page gets labelled contact cards instead of bare icons. */
/* The landing page gets large icon buttons for contact. */
.hero-social {
gap: 12px;
grid-area: contact;
gap: 10px;
flex-wrap: wrap;
margin-top: 28px;
margin-top: 0;
width: 164px;
}
.hero-social .social-link {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 16px;
font-size: 13.5px;
justify-content: center;
width: 48px;
height: 48px;
color: var(--primary);
border: 1px solid var(--border);
border-radius: var(--radius);
@@ -612,8 +600,8 @@ body.menu-open .overlay * {
}
.hero-social .social-link svg {
height: 18px;
width: 18px;
height: 20px;
width: 20px;
color: var(--muted);
transition:
color 0.2s var(--ease),
@@ -666,7 +654,7 @@ body.menu-open .overlay * {
@media only screen and (max-width: 860px) {
#menu,
.term__avatar-wrap {
.term__avatar {
display: none;
}
@@ -682,8 +670,15 @@ body.menu-open .overlay * {
.term__body {
grid-template-columns: 1fr;
gap: 0;
padding: 26px 20px;
grid-template-areas:
"stream"
"contact";
row-gap: 24px;
padding: 26px 20px 28px;
}
.hero-social {
width: auto;
}
.page-shell {
@@ -691,7 +686,8 @@ body.menu-open .overlay * {
}
.hero-social .social-link {
padding: 9px 14px;
width: 44px;
height: 44px;
}
.footer {