Skip to content

Commit 8a05bd3

Browse files
ModelizedModelized
authored
Website Update
1 parent 8a654fa commit 8a05bd3

3 files changed

Lines changed: 81 additions & 120 deletions

File tree

‎docs/assets/css/style.css‎

Lines changed: 62 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -1004,9 +1004,7 @@ a {
10041004
--hero-stage-min: 0px;
10051005
--hero-stage-height: calc(var(--hero-initial-viewport-height, 100svh) - var(--hero-top-pad) - var(--hero-content-bottom-gap));
10061006
--hero-stage-reference: max(var(--hero-stage-height), var(--hero-stage-min));
1007-
--hero-image-size: clamp(20rem, calc(var(--hero-stage-reference) * 0.82), 43rem);
1008-
--hero-person-space: min(100%, var(--hero-image-size));
1009-
--hero-side-space: max(0px, calc((100% - var(--hero-person-space)) / 2));
1007+
--hero-image-size: clamp(24rem, calc(var(--hero-stage-reference) * 0.95), 50rem);
10101008
position: relative;
10111009
margin-top: calc(var(--page-top-offset) * -1);
10121010
min-height: max(
@@ -1031,25 +1029,25 @@ a {
10311029
isolation: isolate;
10321030
}
10331031

1034-
.hero-stage::after {
1032+
.hero-image-wrap::after {
10351033
content: "";
10361034
position: absolute;
1037-
left: 0;
1038-
right: 0;
1035+
left: -3%;
1036+
right: -3%;
10391037
bottom: 0;
1040-
z-index: 2;
1041-
height: clamp(10rem, 28%, 16rem);
1042-
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.44) 38%, rgba(0, 0, 0, 0.82) 74%, #000 100%);
1038+
height: clamp(8rem, 23%, 14rem);
1039+
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.18) 30%, rgba(0, 0, 0, 0.64) 72%, #000 100%);
10431040
pointer-events: none;
10441041
}
10451042

10461043
.hero-image-wrap {
10471044
position: absolute;
10481045
left: 50%;
1049-
top: 48.8%;
1046+
top: 46.2%;
10501047
z-index: 1;
10511048
width: min(100%, var(--hero-image-size));
10521049
transform: translate(-50%, -50%);
1050+
overflow: visible;
10531051
pointer-events: none;
10541052
}
10551053

@@ -1082,35 +1080,31 @@ a {
10821080

10831081
.hero-tagline {
10841082
margin: 0;
1085-
position: absolute;
1086-
inset: 0;
1083+
position: relative;
10871084
z-index: 3;
1088-
display: grid;
1089-
grid-template-columns: minmax(0, 1fr) var(--hero-person-space) minmax(0, 1fr);
1090-
align-items: center;
1091-
column-gap: clamp(0.7rem, 1.75vw, 1.8rem);
1092-
pointer-events: none;
1093-
}
1094-
1095-
.hero-tagline-side {
1096-
min-width: 0;
10971085
display: flex;
1098-
align-items: center;
1099-
justify-content: center;
1100-
text-align: center;
1086+
flex-direction: column;
1087+
align-items: flex-start;
1088+
gap: clamp(0.18rem, 0.7vw, 0.48rem);
1089+
pointer-events: none;
11011090
}
11021091

1103-
.hero-tagline-side--center {
1104-
visibility: hidden;
1092+
.hero-tagline-line {
1093+
display: block;
1094+
width: max-content;
1095+
max-width: 100%;
1096+
overflow: visible;
11051097
}
11061098

11071099
.hero-shape-stack,
11081100
.hero-unseen-stack {
11091101
position: relative;
11101102
display: grid;
1111-
place-items: center;
1103+
place-items: start;
1104+
align-self: flex-start;
11121105
width: max-content;
11131106
max-width: 100%;
1107+
overflow: visible;
11141108
}
11151109

11161110
.hero-shape-fill,
@@ -1127,16 +1121,8 @@ a {
11271121
.hero-shape-fill,
11281122
.hero-shape-glow {
11291123
font-family: "Rock Salt", "Segoe Script", cursive;
1130-
--script-safe-top: 0.2em;
1131-
--script-safe-right: 0.05em;
1132-
--script-safe-bottom: 0.12em;
1133-
--script-safe-left: 0.05em;
1134-
--script-safe-top-neg: calc(var(--script-safe-top) * -1);
1135-
--script-safe-right-neg: calc(var(--script-safe-right) * -1);
1136-
--script-safe-bottom-neg: calc(var(--script-safe-bottom) * -1);
1137-
--script-safe-left-neg: calc(var(--script-safe-left) * -1);
1138-
font-size: clamp(1.55rem, calc(var(--hero-side-space) / 5.35), 2.65rem);
1139-
line-height: 0.92;
1124+
font-size: clamp(2.05rem, 4.9vw, 4.3rem);
1125+
line-height: 0.95;
11401126
letter-spacing: 0.015em;
11411127
overflow: visible;
11421128
}
@@ -1145,7 +1131,7 @@ a {
11451131
.hero-unseen-fill,
11461132
.hero-unseen-glow {
11471133
font-family: var(--heading-font);
1148-
font-size: clamp(1.95rem, calc(var(--hero-side-space) / 7.6), 3.15rem);
1134+
font-size: clamp(2.8rem, 7.1vw, 6rem);
11491135
font-weight: 800;
11501136
line-height: 0.9;
11511137
letter-spacing: 0.008em;
@@ -1190,7 +1176,7 @@ a {
11901176
}
11911177

11921178
.js .hero-unseen-outline {
1193-
opacity: 0;
1179+
opacity: 1;
11941180
}
11951181

11961182
.js body.hero-ready .hero-shape-fill {
@@ -1205,20 +1191,16 @@ a {
12051191
hero-glow-pass 980ms cubic-bezier(0.22, 0.88, 0.24, 1) 90ms forwards;
12061192
}
12071193

1208-
.js body.hero-ready .hero-unseen-outline {
1209-
animation: hero-outline-fade 220ms cubic-bezier(0.22, 0.88, 0.28, 1) 950ms forwards;
1210-
}
1211-
12121194
.js body.hero-ready .hero-unseen-fill {
12131195
animation:
1214-
hero-mask-reveal 980ms cubic-bezier(0.18, 0.92, 0.24, 1) 1170ms forwards,
1215-
hero-sheen-pass 1080ms cubic-bezier(0.22, 0.88, 0.24, 1) 1170ms forwards;
1196+
hero-mask-reveal 980ms cubic-bezier(0.18, 0.92, 0.24, 1) 970ms forwards,
1197+
hero-sheen-pass 1080ms cubic-bezier(0.22, 0.88, 0.24, 1) 970ms forwards;
12161198
}
12171199

12181200
.js body.hero-ready .hero-unseen-glow {
12191201
animation:
1220-
hero-mask-reveal 980ms cubic-bezier(0.18, 0.92, 0.24, 1) 1170ms forwards,
1221-
hero-glow-pass 1120ms cubic-bezier(0.22, 0.88, 0.24, 1) 1170ms forwards;
1202+
hero-mask-reveal 980ms cubic-bezier(0.18, 0.92, 0.24, 1) 970ms forwards,
1203+
hero-glow-pass 1120ms cubic-bezier(0.22, 0.88, 0.24, 1) 970ms forwards;
12221204
}
12231205

12241206
@keyframes hero-mask-reveal {
@@ -1270,27 +1252,25 @@ a {
12701252
}
12711253
}
12721254

1273-
@keyframes hero-outline-fade {
1274-
0% {
1275-
opacity: 0;
1276-
}
1277-
1278-
100% {
1279-
opacity: 1;
1280-
}
1281-
}
1282-
12831255
.hero-copy {
12841256
position: absolute;
12851257
inset: auto 0 0;
12861258
z-index: 3;
12871259
display: flex;
12881260
align-items: flex-end;
12891261
justify-content: space-between;
1290-
gap: 1.4rem;
1262+
gap: clamp(1.6rem, 3vw, 3.4rem);
12911263
padding: 0;
12921264
}
12931265

1266+
.hero-copy-main {
1267+
display: flex;
1268+
flex-direction: column;
1269+
align-items: flex-start;
1270+
gap: clamp(0.95rem, 1.8vw, 1.5rem);
1271+
width: min(100%, clamp(22rem, 42vw, 42rem));
1272+
}
1273+
12941274
.hero-subtitle {
12951275
margin: 0;
12961276
max-width: 31ch;
@@ -2143,26 +2123,26 @@ a {
21432123
.hero {
21442124
--hero-top-pad: calc(var(--page-top-offset) + clamp(0.55rem, 1.3vw, 0.95rem));
21452125
--hero-content-bottom-gap: clamp(2.9rem, 4.6vw, 3.75rem);
2146-
--hero-image-size: clamp(18rem, calc(var(--hero-stage-reference) * 0.76), 30rem);
2147-
}
2148-
2149-
.hero-tagline {
2150-
column-gap: clamp(0.6rem, 1.45vw, 1.3rem);
2126+
--hero-image-size: clamp(20rem, calc(var(--hero-stage-reference) * 0.84), 35rem);
21512127
}
21522128

21532129
.hero-shape-fill,
21542130
.hero-shape-glow {
2155-
font-size: clamp(1.35rem, calc(var(--hero-side-space) / 5.4), 2.2rem);
2131+
font-size: clamp(1.8rem, 4.7vw, 3.5rem);
21562132
}
21572133

21582134
.hero-unseen-outline,
21592135
.hero-unseen-fill,
21602136
.hero-unseen-glow {
2161-
font-size: clamp(1.65rem, calc(var(--hero-side-space) / 8.1), 2.55rem);
2137+
font-size: clamp(2.45rem, 6.8vw, 4.9rem);
21622138
}
21632139

21642140
.hero-copy {
2165-
gap: 1rem;
2141+
gap: clamp(1.35rem, 2.6vw, 2.2rem);
2142+
}
2143+
2144+
.hero-copy-main {
2145+
width: min(100%, clamp(20rem, 48vw, 36rem));
21662146
}
21672147

21682148
.hero-subtitle {
@@ -2225,63 +2205,45 @@ a {
22252205
--hero-top-pad: calc(var(--page-top-offset) + 0.45rem);
22262206
--hero-content-bottom-gap: 3.15rem;
22272207
--hero-extra-tail: clamp(2.35rem, 7vw, 3.35rem);
2228-
--hero-image-size: min(88vw, clamp(18.5rem, calc(var(--hero-stage-reference) * 0.58), 28rem));
2208+
--hero-image-size: min(96vw, clamp(20.75rem, calc(var(--hero-stage-reference) * 0.66), 34rem));
22292209
}
22302210

22312211
.hero-image-wrap {
2232-
top: 47.8%;
2212+
top: 44.9%;
22332213
width: min(100%, var(--hero-image-size));
22342214
}
22352215

22362216
.hero-kicker {
22372217
padding-inline: 0;
22382218
}
22392219

2240-
.hero-tagline {
2241-
display: block;
2242-
}
2243-
2244-
.hero-tagline-side {
2245-
position: absolute;
2246-
left: 50%;
2247-
transform: translateX(-50%);
2248-
width: max-content;
2249-
max-width: 100%;
2250-
}
2251-
2252-
.hero-tagline-side--left {
2253-
top: clamp(0.95rem, 5vw, 1.9rem);
2254-
}
2255-
2256-
.hero-tagline-side--center {
2257-
display: none;
2258-
}
2259-
2260-
.hero-tagline-side--right {
2261-
bottom: clamp(8.8rem, 22vw, 10.9rem);
2262-
}
2263-
22642220
.hero-shape-fill,
22652221
.hero-shape-glow {
2266-
font-size: clamp(1.45rem, 5.9vw, 2.35rem);
2222+
font-size: clamp(1.6rem, 7.2vw, 2.75rem);
22672223
}
22682224

22692225
.hero-unseen-outline,
22702226
.hero-unseen-fill,
22712227
.hero-unseen-glow {
2272-
font-size: clamp(1.8rem, 8.7vw, 3.1rem);
2273-
text-align: center;
2228+
font-size: clamp(2.4rem, 11.1vw, 4.25rem);
2229+
text-align: left;
22742230
}
22752231

22762232
.hero-copy {
22772233
flex-direction: column;
22782234
align-items: flex-start;
2279-
gap: 1.45rem;
2235+
justify-content: flex-end;
2236+
gap: 1.5rem;
22802237
padding-inline: 0;
22812238
}
22822239

2240+
.hero-copy-main {
2241+
width: min(100%, 100%);
2242+
gap: 1.2rem;
2243+
}
2244+
22832245
.hero-subtitle {
2284-
max-width: min(100%, 28ch);
2246+
max-width: min(100%, 27ch);
22852247
font-size: 1.02rem;
22862248
line-height: 1.52;
22872249
}
@@ -2410,18 +2372,18 @@ a {
24102372

24112373
.hero {
24122374
--hero-stage-min: 20.75rem;
2413-
--hero-image-size: clamp(18.5rem, calc(var(--hero-stage-reference) * 0.84), 25.5rem);
2375+
--hero-image-size: clamp(22rem, calc(var(--hero-stage-reference) * 0.96), 31.5rem);
24142376
}
24152377

24162378
.hero-shape-fill,
24172379
.hero-shape-glow {
2418-
font-size: clamp(1.25rem, calc(var(--hero-side-space) / 5.7), 2rem);
2380+
font-size: clamp(1.65rem, 3.2vw, 2.8rem);
24192381
}
24202382

24212383
.hero-unseen-outline,
24222384
.hero-unseen-fill,
24232385
.hero-unseen-glow {
2424-
font-size: clamp(1.5rem, calc(var(--hero-side-space) / 8.7), 2.35rem);
2386+
font-size: clamp(2.2rem, 5.5vw, 4rem);
24252387
}
24262388

24272389
.discipline-stack-shell {

‎docs/assets/js/shell.js‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1278,11 +1278,14 @@
12781278
const bboxHeight = (metrics.actualBoundingBoxAscent || fontSize * 0.8) + (metrics.actualBoundingBoxDescent || fontSize * 0.2);
12791279
const extraHeight = Math.max(0, bboxHeight - lineHeight);
12801280
const ascentRatio = bboxHeight > 0 ? (metrics.actualBoundingBoxAscent || bboxHeight * 0.8) / bboxHeight : 0.8;
1281+
const isHeroShape = element.classList.contains("hero-shape-fill") || element.classList.contains("hero-shape-glow");
1282+
const heroShapeTopPad = isHeroShape ? Math.ceil(fontSize * 0.1) : 0;
1283+
const heroShapeBottomPad = isHeroShape ? Math.ceil(fontSize * 0.07) : 0;
12811284

12821285
return {
1283-
top: Math.max(1, Math.ceil(extraHeight * ascentRatio + 1)),
1286+
top: Math.max(1, Math.ceil(extraHeight * ascentRatio + 1) + heroShapeTopPad),
12841287
right: Math.max(1, Math.ceil(Math.max(0, bboxRight - advanceWidth) + 1)),
1285-
bottom: Math.max(1, Math.ceil(extraHeight * (1 - ascentRatio) + 1)),
1288+
bottom: Math.max(1, Math.ceil(extraHeight * (1 - ascentRatio) + 1) + heroShapeBottomPad),
12861289
left: Math.max(1, Math.ceil(bboxLeft + 1))
12871290
};
12881291
}

‎docs/index.html‎

Lines changed: 14 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -53,25 +53,21 @@
5353
<p class="hero-meta">Portfolio <span data-year></span></p>
5454
</div>
5555

56-
<h1 class="hero-tagline" aria-label="Shape The Unseen.">
57-
<span class="hero-tagline-side hero-tagline-side--left">
58-
<span class="hero-shape-stack">
59-
<span class="hero-shape-fill tagline-script">Shape</span>
60-
<span class="hero-shape-glow tagline-script" aria-hidden="true">Shape</span>
61-
</span>
62-
</span>
63-
<span class="hero-tagline-side hero-tagline-side--center" aria-hidden="true"></span>
64-
<span class="hero-tagline-side hero-tagline-side--right">
65-
<span class="hero-unseen-stack">
66-
<span class="hero-unseen-outline" aria-hidden="true">The Unseen.</span>
67-
<span class="hero-unseen-fill">The Unseen.</span>
68-
<span class="hero-unseen-glow" aria-hidden="true">The Unseen.</span>
69-
</span>
70-
</span>
71-
</h1>
72-
7356
<div class="hero-copy">
74-
<p class="hero-subtitle">The endless journey of a creative technologist Jason Lee.</p>
57+
<div class="hero-copy-main">
58+
<h1 class="hero-tagline" aria-label="Shape The Unseen.">
59+
<span class="hero-shape-stack hero-tagline-line hero-tagline-line--shape">
60+
<span class="hero-shape-fill tagline-script">Shape</span>
61+
<span class="hero-shape-glow tagline-script" aria-hidden="true">Shape</span>
62+
</span>
63+
<span class="hero-unseen-stack hero-tagline-line hero-tagline-line--unseen">
64+
<span class="hero-unseen-outline" aria-hidden="true">The Unseen.</span>
65+
<span class="hero-unseen-fill">The Unseen.</span>
66+
<span class="hero-unseen-glow" aria-hidden="true">The Unseen.</span>
67+
</span>
68+
</h1>
69+
<p class="hero-subtitle">The endless journey of a creative technologist Jason Lee.</p>
70+
</div>
7571
<div class="hero-actions">
7672
<a class="button primary" href="#projects">View Current Project</a>
7773
</div>

0 commit comments

Comments
 (0)