Skip to content

Commit bf8db51

Browse files
ModelizedModelized
authored
Website Update
1 parent 9e93ac2 commit bf8db51

3 files changed

Lines changed: 196 additions & 47 deletions

File tree

‎docs/assets/css/style.css‎

Lines changed: 176 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@
4040
--body-font: "Space Grotesk", "Segoe UI", sans-serif;
4141
--mobile-row-inline: clamp(52px, 11.8vw, 60px);
4242
--mobile-menu-inline: clamp(36px, 8.4vw, 46px);
43+
--page-top-offset: calc(env(safe-area-inset-top, 0px) + 12px + var(--nav-pill-height-desktop) + 28px);
4344
}
4445

4546
* {
@@ -146,7 +147,7 @@ a {
146147
}
147148

148149
.page-wrap {
149-
padding-top: calc(env(safe-area-inset-top, 0px) + 12px + var(--nav-pill-height-desktop) + 28px);
150+
padding-top: var(--page-top-offset);
150151
}
151152

152153
.container {
@@ -1015,21 +1016,60 @@ a {
10151016
}
10161017

10171018
.hero {
1018-
min-height: min(900px, 100svh);
1019-
display: flex;
1020-
align-items: center;
1019+
--hero-top-pad: calc(var(--page-top-offset) + clamp(0.9rem, 2.4vh, 1.9rem));
1020+
--hero-bottom-pad: clamp(1.25rem, 3vh, 2.45rem);
1021+
--hero-stage-height: calc(100svh - var(--hero-top-pad) - var(--hero-bottom-pad));
1022+
--hero-image-size: clamp(24rem, 38vw, 43rem);
1023+
--hero-side-pad: clamp(1rem, 3vw, 3.25rem);
1024+
position: relative;
1025+
margin-top: calc(var(--page-top-offset) * -1);
1026+
min-height: 100svh;
1027+
min-height: 100dvh;
1028+
padding-top: var(--hero-top-pad);
1029+
padding-bottom: var(--hero-bottom-pad);
1030+
background: #000;
1031+
overflow: clip;
1032+
isolation: isolate;
10211033
}
10221034

10231035
.hero-layout {
1024-
display: grid;
1025-
gap: clamp(1.2rem, 2.4vw, 2.6rem);
1036+
position: relative;
1037+
min-height: var(--hero-stage-height);
1038+
}
1039+
1040+
.hero-stage {
1041+
position: relative;
1042+
min-height: inherit;
1043+
isolation: isolate;
1044+
}
1045+
1046+
.hero-image-wrap {
1047+
position: absolute;
1048+
left: 50%;
1049+
top: 50%;
1050+
z-index: 1;
1051+
width: min(100%, var(--hero-image-size));
1052+
transform: translate(-50%, -50%);
1053+
pointer-events: none;
1054+
}
1055+
1056+
.hero-home-image {
1057+
display: block;
1058+
width: 100%;
1059+
height: auto;
1060+
aspect-ratio: 1 / 1;
1061+
object-fit: contain;
10261062
}
10271063

1028-
.hero-top {
1064+
.hero-kicker {
1065+
position: absolute;
1066+
inset: 0 0 auto;
1067+
z-index: 3;
10291068
display: flex;
10301069
align-items: center;
10311070
justify-content: space-between;
10321071
gap: 1rem;
1072+
padding: 0 var(--hero-side-pad);
10331073
}
10341074

10351075
.hero-meta {
@@ -1040,17 +1080,41 @@ a {
10401080
text-transform: uppercase;
10411081
}
10421082

1043-
.hero-title {
1083+
.hero-tagline {
1084+
margin: 0;
1085+
position: absolute;
1086+
inset: 0;
1087+
z-index: 3;
1088+
pointer-events: none;
1089+
}
1090+
1091+
.hero-tagline-shape,
1092+
.hero-tagline-unseen {
1093+
position: absolute;
10441094
margin: 0;
1045-
max-width: 10.8ch;
1095+
text-transform: uppercase;
1096+
white-space: nowrap;
1097+
}
1098+
1099+
.hero-tagline-shape.tagline-script {
1100+
left: clamp(0rem, 8vw, 7.2rem);
1101+
top: clamp(1.6rem, 10vh, 5.4rem);
1102+
font-size: clamp(2.5rem, 5.8vw, 5.8rem);
1103+
line-height: 1;
1104+
}
1105+
1106+
.hero-tagline-unseen {
1107+
right: clamp(0rem, 3vw, 3rem);
1108+
top: 47%;
1109+
max-width: 5.6ch;
10461110
font-family: var(--heading-font);
1047-
font-size: clamp(3.4rem, 11vw, 9.3rem);
1111+
font-size: clamp(3.25rem, 7.6vw, 8rem);
10481112
font-weight: 800;
10491113
letter-spacing: 0.005em;
1050-
line-height: 0.92;
1051-
text-transform: uppercase;
1052-
filter: drop-shadow(0 0 34px rgba(255, 157, 77, 0.08)) drop-shadow(0 0 24px rgba(89, 109, 255, 0.08));
1053-
will-change: filter;
1114+
line-height: 0.88;
1115+
text-align: right;
1116+
color: var(--hero-fill-color);
1117+
transform: translateY(-50%);
10541118
}
10551119

10561120
.js .hero-title.hero-title--pending {
@@ -1201,16 +1265,20 @@ a {
12011265
}
12021266
}
12031267

1204-
.hero-bottom {
1268+
.hero-copy {
1269+
position: absolute;
1270+
inset: auto 0 0;
1271+
z-index: 3;
12051272
display: flex;
12061273
align-items: flex-end;
12071274
justify-content: space-between;
12081275
gap: 1.4rem;
1276+
padding: 0 var(--hero-side-pad);
12091277
}
12101278

12111279
.hero-subtitle {
12121280
margin: 0;
1213-
max-width: 37ch;
1281+
max-width: 28ch;
12141282
color: var(--muted);
12151283
font-size: clamp(1rem, 1.7vw, 1.24rem);
12161284
line-height: 1.6;
@@ -2030,24 +2098,38 @@ a {
20302098
}
20312099

20322100
@media (max-width: 980px) {
2101+
:root {
2102+
--page-top-offset: calc(env(safe-area-inset-top, 0px) + 5.35rem);
2103+
}
2104+
20332105
.page-wrap {
2034-
padding-top: calc(env(safe-area-inset-top, 0px) + 5.35rem);
2106+
padding-top: var(--page-top-offset);
20352107
}
20362108

20372109
.hero {
2038-
min-height: auto;
2039-
padding-top: 3.3rem;
2110+
--hero-top-pad: calc(var(--page-top-offset) + clamp(0.7rem, 2vh, 1.2rem));
2111+
--hero-bottom-pad: clamp(1rem, 2.6vh, 1.6rem);
2112+
--hero-image-size: clamp(18rem, 44vw, 28rem);
20402113
}
20412114

2042-
.hero-top,
2043-
.hero-bottom {
2044-
flex-direction: column;
2045-
align-items: flex-start;
2115+
.hero-tagline-shape.tagline-script {
2116+
left: clamp(0rem, 3vw, 1.6rem);
2117+
top: clamp(0.9rem, 6vh, 2.4rem);
2118+
font-size: clamp(1.95rem, 5.2vw, 3.6rem);
20462119
}
20472120

2048-
.hero-title {
2049-
font-size: clamp(2.8rem, 15vw, 6rem);
2050-
line-height: 0.94;
2121+
.hero-tagline-unseen {
2122+
right: clamp(0rem, 1.5vw, 1.2rem);
2123+
font-size: clamp(2.2rem, 6vw, 4.35rem);
2124+
max-width: 5.2ch;
2125+
}
2126+
2127+
.hero-copy {
2128+
gap: 1rem;
2129+
}
2130+
2131+
.hero-subtitle {
2132+
max-width: 24ch;
20512133
}
20522134

20532135
.section-head h2 {
@@ -2078,6 +2160,10 @@ a {
20782160

20792161
/* Mobile portrait nav */
20802162
@media (max-width: 980px) and (orientation: portrait) {
2163+
:root {
2164+
--page-top-offset: calc(env(safe-area-inset-top, 0px) + 8px + var(--nav-pill-height-mobile) + 14px);
2165+
}
2166+
20812167
.nav {
20822168
top: calc(env(safe-area-inset-top, 0px) + 6px);
20832169
}
@@ -2091,19 +2177,60 @@ a {
20912177
}
20922178

20932179
.page-wrap {
2094-
padding-top: calc(env(safe-area-inset-top, 0px) + 8px + var(--nav-pill-height-mobile) + 14px);
2180+
padding-top: var(--page-top-offset);
20952181
}
20962182

20972183
.hero-layout {
2098-
gap: clamp(1.65rem, 5.8vw, 2rem);
2184+
min-height: var(--hero-stage-height);
20992185
}
21002186

2101-
.hero-top {
2102-
margin-bottom: 0.28rem;
2187+
.hero {
2188+
--hero-top-pad: calc(var(--page-top-offset) + clamp(0.35rem, 0.8vh, 0.7rem));
2189+
--hero-bottom-pad: clamp(0.8rem, 1.8vh, 1.15rem);
2190+
--hero-image-size: min(89vw, 29rem);
2191+
--hero-side-pad: 0;
21032192
}
21042193

2105-
.hero-bottom {
2106-
margin-top: 0.32rem;
2194+
.hero-image-wrap {
2195+
top: 49%;
2196+
width: min(100%, var(--hero-image-size));
2197+
}
2198+
2199+
.hero-kicker {
2200+
padding-inline: 0;
2201+
}
2202+
2203+
.hero-tagline-shape.tagline-script {
2204+
left: 50%;
2205+
top: clamp(0.5rem, 3vh, 1.4rem);
2206+
font-size: clamp(2.15rem, 11vw, 4.4rem);
2207+
transform: translateX(-52%);
2208+
text-align: center;
2209+
}
2210+
2211+
.hero-tagline-unseen {
2212+
left: 50%;
2213+
right: auto;
2214+
top: auto;
2215+
bottom: clamp(9rem, 16vh, 11.5rem);
2216+
width: min(100%, 6.3ch);
2217+
max-width: none;
2218+
font-size: clamp(3.45rem, 15.3vw, 6.15rem);
2219+
text-align: center;
2220+
transform: translateX(-50%);
2221+
}
2222+
2223+
.hero-copy {
2224+
flex-direction: column;
2225+
align-items: flex-start;
2226+
gap: 0.9rem;
2227+
padding-inline: 0;
2228+
}
2229+
2230+
.hero-subtitle {
2231+
max-width: 16.5ch;
2232+
font-size: 1.02rem;
2233+
line-height: 1.52;
21072234
}
21082235

21092236
.discipline-stack-stage {
@@ -2228,6 +2355,22 @@ a {
22282355
display: none !important;
22292356
}
22302357

2358+
.hero {
2359+
--hero-image-size: clamp(18rem, 38vw, 24rem);
2360+
}
2361+
2362+
.hero-tagline-shape.tagline-script {
2363+
left: clamp(0rem, 3vw, 1.2rem);
2364+
top: clamp(0.4rem, 4vh, 1.35rem);
2365+
font-size: clamp(1.85rem, 4.2vw, 3rem);
2366+
}
2367+
2368+
.hero-tagline-unseen {
2369+
right: clamp(0rem, 1.2vw, 0.8rem);
2370+
font-size: clamp(2rem, 4.9vw, 3.45rem);
2371+
max-width: 4.8ch;
2372+
}
2373+
22312374
.discipline-stack-shell {
22322375
--discipline-card-width: min(100%, 41rem);
22332376
--discipline-card-height: clamp(18.8rem, 33vw, 22.8rem);
@@ -2268,7 +2411,7 @@ a {
22682411

22692412
@media (min-width: 901px), (max-width: 900px) and (orientation: landscape) {
22702413
.hero-layout {
2271-
margin-top: -0.8rem;
2414+
margin-top: 0;
22722415
}
22732416
}
22742417

‎docs/assets/img/hero-home.jpg‎

259 KB
Loading

‎docs/index.html‎

Lines changed: 20 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,12 @@
33
<head>
44
<meta charset="utf-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
6-
<title>Modelized | Shape the Unseen</title>
6+
<title>Modelized</title>
77

88
<link rel="preconnect" href="https://fonts.googleapis.com">
99
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
1010
<link href="https://fonts.googleapis.com/css2?family=Rock+Salt&family=Space+Grotesk:wght@400;500;600;700&family=Unbounded:wght@500;700;800&display=swap" rel="stylesheet">
11-
<link rel="stylesheet" href="assets/css/style.css?v=20260411k">
11+
<link rel="stylesheet" href="assets/css/style.css?v=20260417a">
1212

1313
<link rel="icon" type="image/svg+xml" href="favicon.svg">
1414
<link rel="icon" sizes="192x192" href="android-chrome-192x192.png">
@@ -46,20 +46,26 @@
4646
<main id="top" class="page-wrap">
4747
<section id="hero" class="section hero" data-section="hero">
4848
<div class="container hero-layout">
49-
<div class="hero-top reveal" data-reveal data-reveal-delay="90">
50-
<p class="eyebrow">Modelized</p>
51-
<p class="hero-meta">Portfolio <span data-year></span></p>
52-
</div>
49+
<div class="hero-stage">
50+
<div class="hero-image-wrap" aria-hidden="true">
51+
<img class="hero-home-image" src="assets/img/hero-home.jpg" alt="" fetchpriority="high" decoding="async">
52+
</div>
5353

54-
<h1 class="hero-title hero-title--pending" aria-label="SHAPE THE UNSEEN." data-hero-text="SHAPE THE UNSEEN." data-hero-lines="auto">
55-
<span class="hero-title--measure" aria-hidden="true">SHAPE THE UNSEEN.</span>
56-
<span class="hero-title-text">SHAPE THE UNSEEN.</span>
57-
</h1>
54+
<div class="hero-kicker">
55+
<p class="eyebrow">Modelized</p>
56+
<p class="hero-meta">Portfolio <span data-year></span></p>
57+
</div>
5858

59-
<div class="hero-bottom reveal" data-reveal data-reveal-delay="260">
60-
<p class="hero-subtitle">The endless journey of a creative technologist Jason Lee.</p>
61-
<div class="hero-actions">
62-
<a class="button primary" href="#projects">View Current Project</a>
59+
<h1 class="hero-tagline" aria-label="Shape The Unseen.">
60+
<span class="hero-tagline-shape tagline-script">Shape</span>
61+
<span class="hero-tagline-unseen">The Unseen.</span>
62+
</h1>
63+
64+
<div class="hero-copy">
65+
<p class="hero-subtitle">The endless journey of a creative technologist Jason Lee.</p>
66+
<div class="hero-actions">
67+
<a class="button primary" href="#projects">View Current Project</a>
68+
</div>
6369
</div>
6470
</div>
6571
</div>

0 commit comments

Comments
 (0)