Personal Website, vers. 1 (pushed far to late)
This commit is contained in:
Harlekin committed
commit
c8df66d3da
103 files changed
+8977
No files matched your search
@@ -0,0 +1,173 @@
|
||||
@layer reset {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
p,
|
||||
figure,
|
||||
blockquote,
|
||||
dl,
|
||||
dd {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
img,
|
||||
svg,
|
||||
video,
|
||||
canvas {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
img,
|
||||
video {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
input,
|
||||
button,
|
||||
textarea,
|
||||
select {
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@layer base {
|
||||
html {
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-family: var(--font-body);
|
||||
font-size: 100%;
|
||||
line-height: 1.6;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
text-size-adjust: 100%;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
scroll-padding-top: calc(var(--header-h) + 1rem);
|
||||
hanging-punctuation: first;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
min-height: 100svh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--bg);
|
||||
font-size: var(--step-0);
|
||||
overflow-x: clip;
|
||||
}
|
||||
|
||||
main {
|
||||
flex: 1;
|
||||
padding-bottom: var(--section);
|
||||
}
|
||||
|
||||
main:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 650;
|
||||
line-height: 1.05;
|
||||
letter-spacing: -0.025em;
|
||||
text-wrap: balance;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
p,
|
||||
li {
|
||||
text-wrap: pretty;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-underline-offset: 0.2em;
|
||||
text-decoration-thickness: 1px;
|
||||
}
|
||||
|
||||
:focus-visible {
|
||||
outline: 2px solid var(--pink-text);
|
||||
outline-offset: 3px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: var(--pink);
|
||||
color: var(--bg);
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 1.15em;
|
||||
height: 1.15em;
|
||||
flex: none;
|
||||
fill: none;
|
||||
stroke: currentColor;
|
||||
stroke-width: 1.8;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
|
||||
.icon--play {
|
||||
fill: currentColor;
|
||||
stroke: none;
|
||||
}
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
.visually-hidden {
|
||||
position: absolute !important;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip-path: inset(50%);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.skip-link {
|
||||
position: fixed;
|
||||
top: 0.75rem;
|
||||
left: 0.75rem;
|
||||
z-index: 100;
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: var(--radius-s);
|
||||
background: var(--text);
|
||||
color: var(--bg);
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
translate: 0 -200%;
|
||||
transition: translate 0.2s;
|
||||
|
||||
&:focus {
|
||||
translate: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,740 @@
|
||||
@layer components {
|
||||
.btn {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.6rem;
|
||||
min-height: 3rem;
|
||||
padding-inline: 1.4rem;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 99px;
|
||||
font-size: 0.98rem;
|
||||
font-weight: 500;
|
||||
line-height: 1.2;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
transition:
|
||||
background-color 0.25s,
|
||||
border-color 0.25s,
|
||||
color 0.25s,
|
||||
translate 0.3s var(--ease-out);
|
||||
|
||||
& .icon {
|
||||
transition: translate 0.3s var(--ease-out);
|
||||
}
|
||||
|
||||
&:hover .icon--arrow-right {
|
||||
translate: 3px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.btn--primary {
|
||||
background: var(--text);
|
||||
color: var(--bg);
|
||||
|
||||
&:hover {
|
||||
background: var(--pink-text);
|
||||
}
|
||||
}
|
||||
|
||||
.btn--ghost {
|
||||
border-color: var(--line-strong);
|
||||
background: rgb(12 10 18 / 0.35);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
backdrop-filter: blur(8px);
|
||||
|
||||
&:hover {
|
||||
border-color: var(--text);
|
||||
}
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0.1rem 0.5rem;
|
||||
border-radius: 99px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.68rem;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.badge--draft {
|
||||
border: 1px dashed rgb(255 141 180 / 0.6);
|
||||
background: rgb(255 118 164 / 0.12);
|
||||
color: var(--pink-text);
|
||||
}
|
||||
|
||||
.tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.4rem;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.tag {
|
||||
display: inline-block;
|
||||
padding: 0.2rem 0.65rem;
|
||||
border: 1px solid var(--line-strong);
|
||||
border-radius: 99px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.72rem;
|
||||
color: var(--muted);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a.tag {
|
||||
transition: color 0.2s, border-color 0.2s;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--pink-text);
|
||||
color: var(--text);
|
||||
}
|
||||
}
|
||||
|
||||
.note {
|
||||
margin-top: 1.5rem;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.85rem;
|
||||
color: var(--pink-text);
|
||||
}
|
||||
|
||||
.empty {
|
||||
padding: 3rem 0;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
/* Pointer-following border glow, the position comes from pointer.js */
|
||||
[data-glow] {
|
||||
--mx: 50%;
|
||||
--my: 50%;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 2;
|
||||
padding: 1px;
|
||||
border-radius: inherit;
|
||||
background: radial-gradient(26rem circle at var(--mx) var(--my), rgb(255 141 180 / 0.7), rgb(192 17 215 / 0.35) 40%, transparent 65%);
|
||||
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
|
||||
-webkit-mask-composite: xor;
|
||||
mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
|
||||
opacity: 0;
|
||||
transition: opacity 0.4s;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
[data-glow]:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Project cards */
|
||||
.project-grid {
|
||||
display: grid;
|
||||
gap: clamp(1rem, 2vw, 1.5rem);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
@media (min-width: 40em) {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
height: 100%;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius-l);
|
||||
background: var(--surface);
|
||||
transition: border-color 0.3s, translate 0.4s var(--ease-out);
|
||||
}
|
||||
|
||||
.card__link {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
border-radius: inherit;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
|
||||
&:focus-visible {
|
||||
outline-offset: 4px;
|
||||
border-radius: var(--radius-l);
|
||||
}
|
||||
}
|
||||
|
||||
.card__media {
|
||||
aspect-ratio: 16 / 10;
|
||||
overflow: hidden;
|
||||
border-radius: calc(var(--radius-l) - 1px) calc(var(--radius-l) - 1px) 0 0;
|
||||
background: var(--surface-2);
|
||||
}
|
||||
|
||||
.card__img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: scale 0.9s var(--ease-out);
|
||||
}
|
||||
|
||||
.card__placeholder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background:
|
||||
radial-gradient(80% 70% at 20% 20%, rgb(255 118 164 / 0.45), transparent 70%),
|
||||
radial-gradient(70% 70% at 80% 80%, rgb(47 60 190 / 0.6), transparent 70%),
|
||||
radial-gradient(60% 60% at 60% 30%, rgb(192 17 215 / 0.4), transparent 70%),
|
||||
var(--surface-2);
|
||||
}
|
||||
|
||||
.card__body {
|
||||
display: grid;
|
||||
align-content: start;
|
||||
gap: 0.6rem;
|
||||
padding: 1.25rem 1.4rem 1.6rem;
|
||||
}
|
||||
|
||||
.card__meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
min-height: 1.4rem;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.78rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.card__title {
|
||||
font-size: var(--step-2);
|
||||
}
|
||||
|
||||
.card__summary {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.card .tags {
|
||||
margin-top: 0.35rem;
|
||||
}
|
||||
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
.card:hover {
|
||||
border-color: transparent;
|
||||
|
||||
& .card__img {
|
||||
scale: 1.045;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Filter chips */
|
||||
.filter {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
|
||||
|
||||
@media (max-width: 39.99em) {
|
||||
margin-inline: calc(-1 * var(--gutter));
|
||||
padding-inline: var(--gutter);
|
||||
padding-bottom: 0.25rem;
|
||||
overflow-x: auto;
|
||||
scroll-snap-type: x proximity;
|
||||
scrollbar-width: none;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 40em) {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
.chip {
|
||||
display: inline-flex;
|
||||
flex: none;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
min-height: 2.75rem;
|
||||
padding-inline: 1.1rem;
|
||||
border: 1px solid var(--line-strong);
|
||||
border-radius: 99px;
|
||||
color: var(--muted);
|
||||
font-size: 0.92rem;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
scroll-snap-align: start;
|
||||
transition: color 0.2s, border-color 0.2s, background-color 0.2s;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--text);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
&[aria-current="true"] {
|
||||
border-color: transparent;
|
||||
background: var(--text);
|
||||
color: var(--bg);
|
||||
|
||||
& .chip__count {
|
||||
color: rgb(12 10 18 / 0.6);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chip__count {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.72rem;
|
||||
color: var(--faint);
|
||||
}
|
||||
|
||||
/* Link buttons (project links, contact) */
|
||||
.link-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
min-height: 3rem;
|
||||
padding: 0.6rem 0.95rem;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 0.8rem;
|
||||
background: rgb(243 238 248 / 0.03);
|
||||
color: var(--text);
|
||||
text-decoration: none;
|
||||
transition: border-color 0.2s, background-color 0.2s;
|
||||
|
||||
& span {
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
& .icon {
|
||||
color: var(--pink-text);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: rgb(255 141 180 / 0.6);
|
||||
background: rgb(255 118 164 / 0.08);
|
||||
}
|
||||
}
|
||||
|
||||
/* Long-form text from Markdown */
|
||||
.prose {
|
||||
max-width: 42rem;
|
||||
color: rgb(243 238 248 / 0.88);
|
||||
|
||||
& > * + * {
|
||||
margin-top: 1.1em;
|
||||
}
|
||||
|
||||
& > :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
& h2 {
|
||||
margin-top: 2em;
|
||||
font-size: var(--step-3);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
& h3 {
|
||||
margin-top: 1.75em;
|
||||
font-size: var(--step-2);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
& h2 + *,
|
||||
& h3 + * {
|
||||
margin-top: 0.75em;
|
||||
}
|
||||
|
||||
& a {
|
||||
color: var(--pink-text);
|
||||
transition: color 0.2s;
|
||||
|
||||
&:hover {
|
||||
color: var(--text);
|
||||
}
|
||||
}
|
||||
|
||||
& strong {
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
& ul,
|
||||
& ol {
|
||||
padding-left: 1.25em;
|
||||
}
|
||||
|
||||
& li + li {
|
||||
margin-top: 0.4em;
|
||||
}
|
||||
|
||||
& li::marker {
|
||||
color: var(--pink-text);
|
||||
}
|
||||
|
||||
& code {
|
||||
padding: 0.12em 0.4em;
|
||||
border-radius: 0.35rem;
|
||||
background: rgb(243 238 248 / 0.08);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.86em;
|
||||
}
|
||||
|
||||
& pre {
|
||||
padding: 1.1rem 1.25rem;
|
||||
overflow-x: auto;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 0.8rem;
|
||||
background: #0f0c16;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.6;
|
||||
|
||||
& code {
|
||||
padding: 0;
|
||||
background: none;
|
||||
font-size: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
& img {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
& blockquote {
|
||||
padding-left: 1.25rem;
|
||||
border-left: 2px solid var(--violet-text);
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
& hr {
|
||||
height: 1px;
|
||||
border: 0;
|
||||
background: var(--line);
|
||||
}
|
||||
|
||||
& table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
& th,
|
||||
& td {
|
||||
padding: 0.6rem 0.75rem;
|
||||
border-bottom: 1px solid var(--line);
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.prose--wide {
|
||||
max-width: 52rem;
|
||||
}
|
||||
|
||||
/* Forms */
|
||||
.field {
|
||||
display: grid;
|
||||
gap: 0.45rem;
|
||||
}
|
||||
|
||||
.field__label {
|
||||
font-size: 0.92rem;
|
||||
font-weight: 500;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.field__input {
|
||||
width: 100%;
|
||||
min-height: 3.1rem;
|
||||
padding: 0.8rem 1rem;
|
||||
border: 1px solid var(--line-strong);
|
||||
border-radius: 0.8rem;
|
||||
background: var(--surface);
|
||||
font-size: max(16px, 1rem);
|
||||
transition: border-color 0.2s, box-shadow 0.2s;
|
||||
|
||||
&:hover {
|
||||
border-color: rgb(243 238 248 / 0.32);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: var(--pink-text);
|
||||
box-shadow: 0 0 0 4px rgb(255 118 164 / 0.16);
|
||||
}
|
||||
}
|
||||
|
||||
.field__input--area {
|
||||
min-height: 11rem;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.field--invalid .field__input {
|
||||
border-color: var(--error);
|
||||
}
|
||||
|
||||
.field__error {
|
||||
font-size: 0.875rem;
|
||||
color: var(--error);
|
||||
}
|
||||
|
||||
.field--trap {
|
||||
position: absolute;
|
||||
left: -10000px;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.form-status {
|
||||
padding: 1rem 1.25rem;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 0.8rem;
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.form-status--ok {
|
||||
border-color: rgb(143 152 255 / 0.5);
|
||||
background: rgb(47 60 190 / 0.18);
|
||||
}
|
||||
|
||||
.form-status--error {
|
||||
border-color: rgb(255 154 169 / 0.5);
|
||||
background: rgb(255 107 129 / 0.1);
|
||||
}
|
||||
|
||||
/* Video */
|
||||
.video {
|
||||
position: relative;
|
||||
aspect-ratio: 16 / 9;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius-l);
|
||||
background:
|
||||
radial-gradient(60% 80% at 15% 20%, rgb(255 118 164 / 0.3), transparent 70%),
|
||||
radial-gradient(60% 80% at 85% 80%, rgb(47 60 190 / 0.45), transparent 70%),
|
||||
var(--surface);
|
||||
|
||||
& iframe {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.video--file {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
aspect-ratio: auto;
|
||||
}
|
||||
|
||||
.video__poster {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
filter: brightness(0.55) saturate(0.9);
|
||||
}
|
||||
|
||||
.video__overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: grid;
|
||||
place-content: center;
|
||||
justify-items: center;
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.video__play {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.85rem;
|
||||
padding: 0.45rem 1.3rem 0.45rem 0.45rem;
|
||||
border: 1px solid var(--line-strong);
|
||||
border-radius: 99px;
|
||||
background: rgb(12 10 18 / 0.7);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
backdrop-filter: blur(10px);
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
transition: border-color 0.2s;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--text);
|
||||
|
||||
& .video__play-icon {
|
||||
scale: 1.06;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.video__play-icon {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
border-radius: 50%;
|
||||
background: var(--text);
|
||||
color: var(--bg);
|
||||
transition: scale 0.3s var(--ease-out);
|
||||
}
|
||||
|
||||
.video__notice {
|
||||
max-width: 34ch;
|
||||
font-size: 0.8rem;
|
||||
color: rgb(243 238 248 / 0.75);
|
||||
}
|
||||
|
||||
/* Gallery + lightbox */
|
||||
.gallery {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 0.75rem;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
@media (min-width: 60em) {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
& figcaption {
|
||||
margin-top: 0.5rem;
|
||||
font-size: 0.85rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
}
|
||||
|
||||
.gallery__link {
|
||||
display: block;
|
||||
aspect-ratio: 4 / 3;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
cursor: zoom-in;
|
||||
}
|
||||
|
||||
.gallery__img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: scale 0.7s var(--ease-out);
|
||||
}
|
||||
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
.gallery__link:hover .gallery__img {
|
||||
scale: 1.05;
|
||||
}
|
||||
}
|
||||
|
||||
.lightbox {
|
||||
width: 100vw;
|
||||
max-width: none;
|
||||
height: 100vh;
|
||||
height: 100dvh;
|
||||
max-height: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: rgb(8 6 12 / 0.94);
|
||||
color: var(--text);
|
||||
|
||||
&::backdrop {
|
||||
background: rgb(8 6 12 / 0.6);
|
||||
}
|
||||
|
||||
&[open] {
|
||||
animation: fade-in 0.3s var(--ease-out);
|
||||
}
|
||||
}
|
||||
|
||||
.lightbox__figure {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: calc(4.5rem + env(safe-area-inset-top)) 1rem calc(4rem + env(safe-area-inset-bottom));
|
||||
touch-action: pan-y pinch-zoom;
|
||||
|
||||
@media (min-width: 48em) {
|
||||
padding-inline: 5.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.lightbox__img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
width: auto;
|
||||
height: auto;
|
||||
border-radius: 0.5rem;
|
||||
object-fit: contain;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.lightbox__btn {
|
||||
position: absolute;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
padding: 0;
|
||||
border: 1px solid var(--line-strong);
|
||||
border-radius: 50%;
|
||||
background: rgb(243 238 248 / 0.08);
|
||||
transition: background-color 0.2s;
|
||||
|
||||
&:hover {
|
||||
background: rgb(243 238 248 / 0.16);
|
||||
}
|
||||
}
|
||||
|
||||
.lightbox__close {
|
||||
top: calc(1rem + env(safe-area-inset-top));
|
||||
right: 1rem;
|
||||
}
|
||||
|
||||
.lightbox__prev,
|
||||
.lightbox__next {
|
||||
top: 50%;
|
||||
translate: 0 -50%;
|
||||
|
||||
@media (max-width: 47.99em) {
|
||||
top: auto;
|
||||
bottom: calc(1rem + env(safe-area-inset-bottom));
|
||||
translate: none;
|
||||
}
|
||||
}
|
||||
|
||||
.lightbox__prev {
|
||||
left: 1rem;
|
||||
}
|
||||
|
||||
.lightbox__next {
|
||||
right: 1rem;
|
||||
}
|
||||
|
||||
.lightbox__count {
|
||||
position: absolute;
|
||||
bottom: calc(1.6rem + env(safe-area-inset-bottom));
|
||||
left: 50%;
|
||||
translate: -50% 0;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.8rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,469 @@
|
||||
@layer pages {
|
||||
/* Hero */
|
||||
.hero {
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
display: grid;
|
||||
align-items: end;
|
||||
min-height: 100vh;
|
||||
min-height: 100svh;
|
||||
padding-block: calc(var(--header-h) + 3rem) clamp(2.5rem, 7vh, 5rem);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero__bg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
background:
|
||||
radial-gradient(60% 50% at 80% 18%, rgb(192 17 215 / 0.55), transparent 70%),
|
||||
radial-gradient(50% 45% at 25% 8%, rgb(255 118 164 / 0.45), transparent 70%),
|
||||
radial-gradient(70% 55% at 75% 75%, rgb(47 60 190 / 0.6), transparent 70%),
|
||||
var(--bg);
|
||||
|
||||
/* readability: darken towards the text and fade into the page */
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 1;
|
||||
background:
|
||||
linear-gradient(180deg, rgb(12 10 18 / 0.25) 0%, rgb(12 10 18 / 0) 25%, rgb(12 10 18 / 0.45) 62%, var(--bg) 100%),
|
||||
linear-gradient(90deg, rgb(12 10 18 / 0.6) 0%, rgb(12 10 18 / 0.15) 60%, transparent 100%);
|
||||
}
|
||||
|
||||
/* film grain */
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 2;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
|
||||
opacity: 0.12;
|
||||
mix-blend-mode: overlay;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.hero__canvas {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
transition: opacity 1.6s var(--ease-out);
|
||||
|
||||
&.is-ready {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.hero__inner {
|
||||
display: grid;
|
||||
gap: clamp(1.25rem, 3vh, 2rem);
|
||||
}
|
||||
|
||||
.hero__kicker {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
font-family: var(--font-mono);
|
||||
font-size: clamp(0.72rem, 0.68rem + 0.2vw, 0.82rem);
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: rgb(243 238 248 / 0.8);
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
flex: none;
|
||||
width: 2rem;
|
||||
height: 1px;
|
||||
background: var(--fluid);
|
||||
}
|
||||
}
|
||||
|
||||
.hero__title {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
gap: 0.5rem 1.25rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.hero__name {
|
||||
display: block;
|
||||
margin-left: -0.05em;
|
||||
padding-bottom: 0.04em;
|
||||
font-size: clamp(6rem, 2rem + 24vw, 19rem);
|
||||
line-height: 0.8;
|
||||
letter-spacing: -0.045em;
|
||||
color: var(--text);
|
||||
text-shadow: 0 0 60px rgb(12 10 18 / 0.35);
|
||||
}
|
||||
|
||||
.hero__pronouns {
|
||||
margin-top: clamp(0.25rem, 1.5vw, 1.5rem);
|
||||
padding: 0.4rem 0.85rem;
|
||||
border: 1px solid var(--line-strong);
|
||||
border-radius: 99px;
|
||||
background: rgb(12 10 18 / 0.45);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
backdrop-filter: blur(10px);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.8rem;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.02em;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.hero__bottom {
|
||||
display: grid;
|
||||
gap: 2rem;
|
||||
|
||||
@media (min-width: 60em) {
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
align-items: end;
|
||||
}
|
||||
}
|
||||
|
||||
.hero__lead {
|
||||
max-width: 40ch;
|
||||
font-size: var(--step-1);
|
||||
color: rgb(243 238 248 / 0.88);
|
||||
}
|
||||
|
||||
.hero__actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.75rem;
|
||||
margin-top: 1.75rem;
|
||||
}
|
||||
|
||||
.now {
|
||||
width: min(100%, 22rem);
|
||||
padding: 1.1rem 1.25rem 1.2rem;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius-l);
|
||||
background: rgb(12 10 18 / 0.55);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
backdrop-filter: blur(16px);
|
||||
}
|
||||
|
||||
.now__title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
margin-bottom: 0.6rem;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.now__pulse {
|
||||
position: relative;
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
border-radius: 50%;
|
||||
background: var(--pink);
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: 50%;
|
||||
background: var(--pink);
|
||||
animation: ping 2.2s var(--ease-out) infinite;
|
||||
}
|
||||
}
|
||||
|
||||
.now__list {
|
||||
display: grid;
|
||||
gap: 0.35rem;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
/* Bento */
|
||||
.bento {
|
||||
display: grid;
|
||||
gap: clamp(0.75rem, 1.5vw, 1.25rem);
|
||||
|
||||
@media (min-width: 40em) {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
grid-template-areas:
|
||||
"server server"
|
||||
"homelab homelab"
|
||||
"scripts study"
|
||||
"video video";
|
||||
}
|
||||
|
||||
@media (min-width: 64em) {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
grid-template-areas:
|
||||
"server server homelab homelab"
|
||||
"server server scripts study"
|
||||
"video video video video";
|
||||
}
|
||||
}
|
||||
|
||||
.tile {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
min-height: 16rem;
|
||||
padding: clamp(1.25rem, 2.5vw, 1.75rem);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius-l);
|
||||
background: linear-gradient(180deg, var(--surface), var(--bg-raised));
|
||||
}
|
||||
|
||||
/* only where the grid actually defines these areas, otherwise all tiles end up in one cell */
|
||||
@media (min-width: 40em) {
|
||||
.tile--server { grid-area: server; }
|
||||
.tile--homelab { grid-area: homelab; }
|
||||
.tile--scripts { grid-area: scripts; }
|
||||
.tile--study { grid-area: study; }
|
||||
.tile--video { grid-area: video; }
|
||||
}
|
||||
|
||||
.tile__visual {
|
||||
flex: 1;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
min-height: 8rem;
|
||||
}
|
||||
|
||||
.tile__body {
|
||||
display: grid;
|
||||
gap: 0.6rem;
|
||||
}
|
||||
|
||||
.tile__title {
|
||||
font-size: var(--step-2);
|
||||
}
|
||||
|
||||
.tile__text {
|
||||
max-width: 48ch;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.tile__link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
width: fit-content;
|
||||
margin-top: 0.35rem;
|
||||
font-size: 0.92rem;
|
||||
font-weight: 500;
|
||||
color: var(--pink-text);
|
||||
text-decoration: none;
|
||||
|
||||
/* the whole tile is clickable */
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 1;
|
||||
border-radius: inherit;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: none;
|
||||
|
||||
&::after {
|
||||
outline: 2px solid var(--pink-text);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
& .icon {
|
||||
transition: translate 0.3s var(--ease-out);
|
||||
}
|
||||
}
|
||||
|
||||
.tile:hover .tile__link .icon {
|
||||
translate: 3px 0;
|
||||
}
|
||||
|
||||
@media (min-width: 64em) {
|
||||
.tile--server .tile__visual {
|
||||
min-height: 14rem;
|
||||
}
|
||||
|
||||
.tile--video {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
min-height: 0;
|
||||
|
||||
& .tile__visual {
|
||||
order: 2;
|
||||
flex: 1.4;
|
||||
}
|
||||
|
||||
& .tile__body {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Featured projects: first card gets the full width */
|
||||
.project-grid--featured > li:first-child {
|
||||
@media (min-width: 40em) {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
@media (min-width: 64em) {
|
||||
& .card__link {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
& .card__media {
|
||||
flex: 1.35;
|
||||
aspect-ratio: auto;
|
||||
min-height: 24rem;
|
||||
border-radius: calc(var(--radius-l) - 1px) 0 0 calc(var(--radius-l) - 1px);
|
||||
}
|
||||
|
||||
& .card__body {
|
||||
flex: 1;
|
||||
align-content: center;
|
||||
padding: clamp(1.5rem, 3vw, 3rem);
|
||||
}
|
||||
|
||||
& .card__title {
|
||||
font-size: var(--step-3);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Tools marquee */
|
||||
.marquee {
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
|
||||
mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
|
||||
user-select: none;
|
||||
|
||||
&:hover .marquee__track {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
}
|
||||
|
||||
.marquee__track {
|
||||
display: flex;
|
||||
flex: none;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
animation: marquee 45s linear infinite;
|
||||
}
|
||||
|
||||
.marquee__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: clamp(1.25rem, 3vw, 2.5rem);
|
||||
padding-right: clamp(1.25rem, 3vw, 2.5rem);
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--step-4);
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.03em;
|
||||
white-space: nowrap;
|
||||
color: transparent;
|
||||
-webkit-text-stroke: 1px rgb(243 238 248 / 0.45);
|
||||
|
||||
&:nth-child(3n + 1) {
|
||||
color: var(--text);
|
||||
-webkit-text-stroke: 0;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
width: 0.6rem;
|
||||
height: 0.6rem;
|
||||
border-radius: 50%;
|
||||
background: var(--pink);
|
||||
}
|
||||
|
||||
&:nth-child(3n + 2)::after {
|
||||
background: var(--violet-text);
|
||||
}
|
||||
|
||||
&:nth-child(3n)::after {
|
||||
background: var(--blue-text);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.marquee {
|
||||
-webkit-mask-image: none;
|
||||
mask-image: none;
|
||||
padding-inline: var(--gutter);
|
||||
}
|
||||
|
||||
.marquee__track {
|
||||
flex-wrap: wrap;
|
||||
flex-shrink: 1;
|
||||
gap: 0.5rem 0;
|
||||
animation: none;
|
||||
|
||||
&[aria-hidden] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.marquee__item {
|
||||
font-size: var(--step-2);
|
||||
}
|
||||
}
|
||||
|
||||
/* Contact teaser */
|
||||
.cta__inner {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: clamp(2.25rem, 6vw, 5rem) clamp(1.25rem, 6vw, 5rem);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: clamp(1.25rem, 3vw, 2rem);
|
||||
background:
|
||||
radial-gradient(70% 90% at 100% 0%, rgb(192 17 215 / 0.32), transparent 60%),
|
||||
radial-gradient(60% 90% at 0% 100%, rgb(47 60 190 / 0.42), transparent 60%),
|
||||
radial-gradient(40% 60% at 60% 110%, rgb(255 118 164 / 0.25), transparent 70%),
|
||||
var(--surface);
|
||||
}
|
||||
|
||||
.cta__title {
|
||||
max-width: 18ch;
|
||||
font-size: var(--step-4);
|
||||
}
|
||||
|
||||
.cta__text {
|
||||
max-width: 52ch;
|
||||
margin-top: 1.1rem;
|
||||
font-size: var(--step-1);
|
||||
color: rgb(243 238 248 / 0.8);
|
||||
}
|
||||
|
||||
.cta__actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 1rem 1.75rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.cta__mail {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.95rem;
|
||||
overflow-wrap: anywhere;
|
||||
transition: color 0.2s;
|
||||
|
||||
&:hover {
|
||||
color: var(--pink-text);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,523 @@
|
||||
@layer layout {
|
||||
.container {
|
||||
width: 100%;
|
||||
max-width: calc(var(--container) + 2 * var(--gutter));
|
||||
margin-inline: auto;
|
||||
padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
|
||||
}
|
||||
|
||||
.container--wide {
|
||||
max-width: calc(92rem + 2 * var(--gutter));
|
||||
}
|
||||
|
||||
.section {
|
||||
padding-top: var(--section);
|
||||
}
|
||||
|
||||
.section--flush {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.section--tight {
|
||||
padding-top: calc(var(--section) * 0.75);
|
||||
}
|
||||
|
||||
.section-head {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: baseline;
|
||||
gap: 0.5rem 1.25rem;
|
||||
margin-bottom: clamp(1.75rem, 4vw, 3.25rem);
|
||||
padding-top: 1.25rem;
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.section-head__index {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.8rem;
|
||||
color: var(--pink-text);
|
||||
}
|
||||
|
||||
.section-head__title {
|
||||
flex: 1 1 auto;
|
||||
font-size: var(--step-4);
|
||||
}
|
||||
|
||||
.section-head__more {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
min-height: 2.75rem;
|
||||
color: var(--muted);
|
||||
font-size: 0.95rem;
|
||||
text-decoration: none;
|
||||
transition: color 0.2s;
|
||||
|
||||
&:hover {
|
||||
color: var(--text);
|
||||
}
|
||||
}
|
||||
|
||||
/* Header. The header itself is never transformed, otherwise it would become
|
||||
the containing block for the fixed mobile menu inside it. */
|
||||
.site-header {
|
||||
position: fixed;
|
||||
inset: 0 0 auto;
|
||||
z-index: 50;
|
||||
height: calc(var(--header-h) + env(safe-area-inset-top));
|
||||
padding-top: env(safe-area-inset-top);
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgb(12 10 18 / 0.72);
|
||||
-webkit-backdrop-filter: blur(14px) saturate(140%);
|
||||
backdrop-filter: blur(14px) saturate(140%);
|
||||
border-bottom: 1px solid var(--line);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s, translate 0.45s var(--ease-out);
|
||||
}
|
||||
|
||||
&.is-scrolled::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.is-hidden {
|
||||
pointer-events: none;
|
||||
|
||||
&::before,
|
||||
.site-header__inner {
|
||||
translate: 0 -110%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.site-header__inner {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
transition: translate 0.45s var(--ease-out);
|
||||
}
|
||||
|
||||
.brand {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
min-height: 2.75rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.brand__mark {
|
||||
width: 2.25rem;
|
||||
height: 2.25rem;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 0 1px var(--line-strong), 0 0 20px rgb(255 118 164 / 0.3);
|
||||
transition: rotate 0.4s var(--ease-out), scale 0.4s var(--ease-out);
|
||||
}
|
||||
|
||||
.brand:hover .brand__mark {
|
||||
rotate: -8deg;
|
||||
scale: 1.06;
|
||||
}
|
||||
|
||||
.brand__name {
|
||||
font-family: var(--font-display);
|
||||
font-size: 1.4rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.04em;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.menu-toggle {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: none;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
min-height: 2.75rem;
|
||||
padding: 0 0.25rem 0 0.9rem;
|
||||
border: 1px solid var(--line-strong);
|
||||
border-radius: 99px;
|
||||
background: rgb(12 10 18 / 0.5);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.menu-toggle__icon {
|
||||
position: relative;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 2.25rem;
|
||||
height: 2.25rem;
|
||||
|
||||
& span {
|
||||
position: absolute;
|
||||
width: 1rem;
|
||||
height: 1.5px;
|
||||
border-radius: 2px;
|
||||
background: currentColor;
|
||||
transition: translate 0.35s var(--ease-out), rotate 0.35s var(--ease-out);
|
||||
}
|
||||
|
||||
& span:first-child {
|
||||
translate: 0 -3px;
|
||||
}
|
||||
|
||||
& span:last-child {
|
||||
translate: 0 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-open .menu-toggle__icon {
|
||||
& span:first-child {
|
||||
translate: none;
|
||||
rotate: 45deg;
|
||||
}
|
||||
|
||||
& span:last-child {
|
||||
translate: none;
|
||||
rotate: -45deg;
|
||||
}
|
||||
}
|
||||
|
||||
.site-nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.site-nav__list {
|
||||
display: flex;
|
||||
gap: 1.75rem;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.site-nav__link {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 2.75rem;
|
||||
color: var(--muted);
|
||||
font-size: 0.95rem;
|
||||
text-decoration: none;
|
||||
transition: color 0.2s;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0.55rem;
|
||||
height: 1px;
|
||||
background: var(--fluid);
|
||||
scale: 0 1;
|
||||
transform-origin: right;
|
||||
transition: scale 0.4s var(--ease-out);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&[aria-current="page"] {
|
||||
color: var(--text);
|
||||
|
||||
&::after {
|
||||
scale: 1 1;
|
||||
transform-origin: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lang-switch {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
min-height: 2.5rem;
|
||||
padding-inline: 0.85rem;
|
||||
border: 1px solid var(--line-strong);
|
||||
border-radius: 99px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.78rem;
|
||||
text-decoration: none;
|
||||
transition: border-color 0.2s, background-color 0.2s;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--text);
|
||||
background: rgb(243 238 248 / 0.06);
|
||||
}
|
||||
}
|
||||
|
||||
.lang-switch__current,
|
||||
.lang-switch__sep {
|
||||
color: var(--faint);
|
||||
}
|
||||
|
||||
@media (max-width: 47.99em) {
|
||||
.menu-toggle {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.site-nav {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
gap: 2.5rem;
|
||||
padding: calc(var(--header-h) + env(safe-area-inset-top) + 1rem) var(--gutter) calc(2.5rem + env(safe-area-inset-bottom));
|
||||
overflow-y: auto;
|
||||
background:
|
||||
radial-gradient(90% 60% at 100% 0%, rgb(192 17 215 / 0.28), transparent 70%),
|
||||
radial-gradient(80% 60% at 0% 100%, rgb(47 60 190 / 0.35), transparent 70%),
|
||||
var(--bg);
|
||||
clip-path: circle(0 at calc(100% - 2.75rem) 2.1rem);
|
||||
visibility: hidden;
|
||||
transition: clip-path 0.55s var(--ease-in-out), visibility 0s 0.55s;
|
||||
}
|
||||
|
||||
.menu-open .site-nav {
|
||||
clip-path: circle(150% at calc(100% - 2.75rem) 2.1rem);
|
||||
visibility: visible;
|
||||
transition: clip-path 0.7s var(--ease-out), visibility 0s;
|
||||
}
|
||||
|
||||
.menu-open .site-header::before {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.site-nav__list {
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.site-nav__link {
|
||||
font-family: var(--font-display);
|
||||
font-size: clamp(2.25rem, 11vw, 3.25rem);
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.03em;
|
||||
color: var(--text);
|
||||
opacity: 0;
|
||||
translate: 0 1rem;
|
||||
transition: opacity 0.4s, translate 0.5s var(--ease-out);
|
||||
|
||||
&::after {
|
||||
bottom: 0.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-open .site-nav__link {
|
||||
opacity: 1;
|
||||
translate: none;
|
||||
}
|
||||
|
||||
.menu-open .site-nav__item:nth-child(1) .site-nav__link { transition-delay: 0.12s; }
|
||||
.menu-open .site-nav__item:nth-child(2) .site-nav__link { transition-delay: 0.18s; }
|
||||
.menu-open .site-nav__item:nth-child(3) .site-nav__link { transition-delay: 0.24s; }
|
||||
.menu-open .site-nav__item:nth-child(4) .site-nav__link { transition-delay: 0.3s; }
|
||||
.menu-open .site-nav__item:nth-child(5) .site-nav__link { transition-delay: 0.36s; }
|
||||
|
||||
.lang-switch {
|
||||
min-height: 2.75rem;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Without JS the menu button can't do anything, so show the links inline */
|
||||
@media (max-width: 47.99em) and (scripting: none) {
|
||||
.site-header {
|
||||
position: absolute;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.site-header__inner {
|
||||
flex-wrap: wrap;
|
||||
padding-block: 0.75rem;
|
||||
}
|
||||
|
||||
.menu-toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.site-nav {
|
||||
position: static;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem 1rem;
|
||||
padding: 0;
|
||||
background: none;
|
||||
clip-path: none;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.site-nav__list {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
gap: 0 1rem;
|
||||
}
|
||||
|
||||
.site-nav__link {
|
||||
font-family: var(--font-body);
|
||||
font-size: 0.95rem;
|
||||
opacity: 1;
|
||||
translate: none;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-open,
|
||||
.lightbox-open {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Subpage heads */
|
||||
.page-head {
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
padding-block: calc(var(--header-h) + clamp(3rem, 9vw, 7.5rem)) clamp(2.5rem, 5vw, 4.5rem);
|
||||
}
|
||||
|
||||
.page-head__glow {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: -1;
|
||||
width: min(62rem, 100%);
|
||||
height: min(36rem, 90%);
|
||||
background:
|
||||
radial-gradient(closest-side at 72% 32%, rgb(192 17 215 / 0.32), transparent),
|
||||
radial-gradient(closest-side at 92% 12%, rgb(255 118 164 / 0.28), transparent),
|
||||
radial-gradient(closest-side at 46% 4%, rgb(47 60 190 / 0.4), transparent);
|
||||
filter: blur(28px);
|
||||
pointer-events: none;
|
||||
animation: drift 20s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
.page-head__kicker {
|
||||
margin-bottom: 1rem;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.8rem;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: var(--pink-text);
|
||||
}
|
||||
|
||||
/* long German compounds like "Datenschutzerklärung" don't fit on phones otherwise */
|
||||
.page-head__title,
|
||||
.project-head__title {
|
||||
hyphens: auto;
|
||||
}
|
||||
|
||||
.page-head__title {
|
||||
max-width: 16ch;
|
||||
font-size: var(--step-5);
|
||||
letter-spacing: -0.045em;
|
||||
line-height: 0.98;
|
||||
}
|
||||
|
||||
.page-head__lead {
|
||||
max-width: 56ch;
|
||||
margin-top: 1.25rem;
|
||||
font-size: var(--step-1);
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.site-footer {
|
||||
padding-block: clamp(3rem, 6vw, 5rem) calc(2rem + env(safe-area-inset-bottom));
|
||||
border-top: 1px solid var(--line);
|
||||
background: linear-gradient(180deg, transparent, rgb(47 60 190 / 0.07));
|
||||
font-size: 0.95rem;
|
||||
|
||||
& ul {
|
||||
display: grid;
|
||||
gap: 0.35rem;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
& a {
|
||||
display: inline-block;
|
||||
padding-block: 0.2rem;
|
||||
color: var(--muted);
|
||||
text-decoration: none;
|
||||
overflow-wrap: anywhere;
|
||||
transition: color 0.2s;
|
||||
|
||||
&:hover {
|
||||
color: var(--text);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.site-footer__grid {
|
||||
display: grid;
|
||||
gap: 2.25rem;
|
||||
|
||||
@media (min-width: 40em) {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
@media (min-width: 60em) {
|
||||
grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
.site-footer__intro {
|
||||
@media (min-width: 40em) and (max-width: 59.99em) {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
}
|
||||
|
||||
.site-footer .brand {
|
||||
display: inline-flex;
|
||||
padding: 0;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.site-footer__note {
|
||||
max-width: 36ch;
|
||||
margin-top: 0.75rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.site-footer__heading {
|
||||
margin-bottom: 0.75rem;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
color: var(--faint);
|
||||
}
|
||||
|
||||
.site-footer__bottom {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.75rem 1.5rem;
|
||||
margin-top: clamp(2.5rem, 5vw, 4rem);
|
||||
padding-top: 1.5rem;
|
||||
border-top: 1px solid var(--line);
|
||||
font-size: 0.875rem;
|
||||
color: var(--faint);
|
||||
}
|
||||
|
||||
.site-footer .site-footer__legal {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.25rem 1.5rem;
|
||||
}
|
||||
|
||||
.to-top {
|
||||
display: inline-flex !important;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
@layer reset, base, layout, components, pages, motion, utilities;
|
||||
|
||||
@import "@fontsource-variable/bricolage-grotesque/opsz.css";
|
||||
@import "@fontsource/ibm-plex-sans/latin-400.css";
|
||||
@import "@fontsource/ibm-plex-sans/latin-400-italic.css";
|
||||
@import "@fontsource/ibm-plex-sans/latin-500.css";
|
||||
@import "@fontsource/ibm-plex-sans/latin-600.css";
|
||||
@import "@fontsource/ibm-plex-mono/latin-400.css";
|
||||
@import "@fontsource/ibm-plex-mono/latin-500.css";
|
||||
|
||||
@import "./tokens.css";
|
||||
@import "./base.css";
|
||||
@import "./layout.css";
|
||||
@import "./components.css";
|
||||
@import "./visuals.css";
|
||||
@import "./home.css";
|
||||
@import "./pages.css";
|
||||
@import "./motion.css";
|
||||
@@ -0,0 +1,134 @@
|
||||
@layer motion {
|
||||
/* Content only starts hidden when JS runs and nobody asked for less motion */
|
||||
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
|
||||
[data-reveal] {
|
||||
opacity: 0;
|
||||
translate: 0 1.75rem;
|
||||
transition:
|
||||
opacity 0.9s var(--ease-out) var(--delay, 0s),
|
||||
translate 0.9s var(--ease-out) var(--delay, 0s);
|
||||
}
|
||||
|
||||
[data-reveal="mask"] {
|
||||
opacity: 1;
|
||||
translate: none;
|
||||
clip-path: inset(0 -0.2em 100% -0.2em);
|
||||
transform: translateY(0.35em);
|
||||
transition:
|
||||
clip-path 1.1s var(--ease-out) var(--delay, 0s),
|
||||
transform 1.1s var(--ease-out) var(--delay, 0s);
|
||||
}
|
||||
|
||||
[data-reveal].is-visible {
|
||||
opacity: 1;
|
||||
translate: none;
|
||||
}
|
||||
|
||||
[data-reveal="mask"].is-visible {
|
||||
clip-path: inset(-0.2em -0.2em -0.3em -0.2em);
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
@supports (animation-timeline: view()) {
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.timeline::after {
|
||||
animation: grow linear both;
|
||||
animation-timeline: view();
|
||||
animation-range: entry 20% cover 70%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0s !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0s !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes drift {
|
||||
from { translate: 0 0; scale: 1; }
|
||||
to { translate: -6% 4%; scale: 1.08; }
|
||||
}
|
||||
|
||||
@keyframes ping {
|
||||
0% { scale: 1; opacity: 0.7; }
|
||||
80%, 100% { scale: 3; opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.25; }
|
||||
}
|
||||
|
||||
@keyframes load {
|
||||
from { translate: -30% 0; }
|
||||
to { translate: 60% 0; }
|
||||
}
|
||||
|
||||
@keyframes flow {
|
||||
from { stroke-dashoffset: 106; }
|
||||
to { stroke-dashoffset: 0; }
|
||||
}
|
||||
|
||||
@keyframes sort {
|
||||
0%, 12% { height: var(--from); }
|
||||
40%, 75% { height: var(--to); }
|
||||
100% { height: var(--from); }
|
||||
}
|
||||
|
||||
@keyframes playhead {
|
||||
from { left: calc(0.9rem + var(--label)); }
|
||||
to { left: calc(100% - 0.9rem); }
|
||||
}
|
||||
|
||||
@keyframes marquee {
|
||||
to { translate: -100% 0; }
|
||||
}
|
||||
|
||||
@keyframes grow {
|
||||
from { scale: 1 0; }
|
||||
to { scale: 1 1; }
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
from { opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes vt-out {
|
||||
to { opacity: 0; translate: 0 -0.75rem; }
|
||||
}
|
||||
|
||||
@keyframes vt-in {
|
||||
from { opacity: 0; translate: 0 1.25rem; }
|
||||
}
|
||||
}
|
||||
|
||||
/* Cross-document page transitions, outside of the layers on purpose */
|
||||
@view-transition {
|
||||
navigation: auto;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
@view-transition {
|
||||
navigation: none;
|
||||
}
|
||||
}
|
||||
|
||||
::view-transition-old(root) {
|
||||
animation: 0.3s var(--ease-in-out) both vt-out;
|
||||
}
|
||||
|
||||
::view-transition-new(root) {
|
||||
animation: 0.55s var(--ease-out) both vt-in;
|
||||
}
|
||||
|
||||
::view-transition-group(project-cover) {
|
||||
animation-duration: 0.6s;
|
||||
animation-timing-function: var(--ease-out);
|
||||
}
|
||||
@@ -0,0 +1,553 @@
|
||||
@layer pages {
|
||||
/* Project detail */
|
||||
.project-head {
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
padding-block: calc(var(--header-h) + clamp(2rem, 6vw, 5rem)) clamp(2rem, 4vw, 3rem);
|
||||
}
|
||||
|
||||
.back-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
min-height: 2.75rem;
|
||||
margin-bottom: 1.25rem;
|
||||
color: var(--muted);
|
||||
font-size: 0.95rem;
|
||||
text-decoration: none;
|
||||
transition: color 0.2s;
|
||||
|
||||
& .icon {
|
||||
transition: translate 0.3s var(--ease-out);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--text);
|
||||
|
||||
& .icon {
|
||||
translate: -3px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.project-head__title {
|
||||
max-width: 20ch;
|
||||
font-size: var(--step-5);
|
||||
letter-spacing: -0.045em;
|
||||
line-height: 0.98;
|
||||
}
|
||||
|
||||
.project-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1.25rem 3rem;
|
||||
margin-top: 2rem;
|
||||
|
||||
& dt {
|
||||
margin-bottom: 0.4rem;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.72rem;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
color: var(--faint);
|
||||
}
|
||||
}
|
||||
|
||||
.project-cover {
|
||||
margin-bottom: clamp(2.5rem, 5vw, 4rem);
|
||||
}
|
||||
|
||||
.project-cover__img {
|
||||
width: 100%;
|
||||
max-height: 80vh;
|
||||
max-height: 80svh;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius-l);
|
||||
object-fit: cover;
|
||||
view-transition-name: project-cover;
|
||||
}
|
||||
|
||||
.project-body {
|
||||
display: grid;
|
||||
gap: 3rem;
|
||||
|
||||
@media (min-width: 60em) {
|
||||
grid-template-columns: minmax(0, 1fr) 18rem;
|
||||
align-items: start;
|
||||
}
|
||||
}
|
||||
|
||||
.project-links {
|
||||
padding: 1.25rem;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
background: var(--surface);
|
||||
|
||||
@media (min-width: 60em) {
|
||||
position: sticky;
|
||||
top: calc(var(--header-h) + 1.5rem);
|
||||
}
|
||||
|
||||
& ul {
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
.project-links__title,
|
||||
.contact__aside-title {
|
||||
margin-bottom: 1rem;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
color: var(--faint);
|
||||
}
|
||||
|
||||
.project-section {
|
||||
padding-top: clamp(3rem, 6vw, 5rem);
|
||||
}
|
||||
|
||||
.project-section__title {
|
||||
margin-bottom: 1.5rem;
|
||||
font-size: var(--step-3);
|
||||
}
|
||||
|
||||
.pager {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
padding-top: var(--section);
|
||||
|
||||
@media (min-width: 40em) {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
.pager__link {
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
padding: 1.5rem;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius-l);
|
||||
text-decoration: none;
|
||||
transition: border-color 0.2s, background-color 0.2s;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--line-strong);
|
||||
background: var(--surface);
|
||||
}
|
||||
}
|
||||
|
||||
.pager__link--older {
|
||||
text-align: right;
|
||||
|
||||
@media (min-width: 40em) {
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
& .pager__label {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
.pager__label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.pager__title {
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--step-2);
|
||||
font-weight: 600;
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
/* Homelab */
|
||||
.hardware,
|
||||
.services,
|
||||
.skills {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.hardware {
|
||||
grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
|
||||
}
|
||||
|
||||
.services,
|
||||
.skills {
|
||||
grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
|
||||
}
|
||||
|
||||
.machine,
|
||||
.service-group,
|
||||
.skill-group {
|
||||
padding: 1.5rem;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius-l);
|
||||
background: linear-gradient(180deg, var(--surface), var(--bg-raised));
|
||||
}
|
||||
|
||||
.machine__role {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: var(--pink-text);
|
||||
}
|
||||
|
||||
.machine__name {
|
||||
margin-top: 0.4rem;
|
||||
font-size: var(--step-2);
|
||||
}
|
||||
|
||||
.machine__specs {
|
||||
display: grid;
|
||||
gap: 0.35rem;
|
||||
margin: 1rem 0 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
color: var(--muted);
|
||||
font-size: 0.95rem;
|
||||
|
||||
& li {
|
||||
display: flex;
|
||||
gap: 0.6rem;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
flex: none;
|
||||
width: 0.35rem;
|
||||
height: 0.35rem;
|
||||
margin-top: 0.6em;
|
||||
border-radius: 50%;
|
||||
background: var(--violet-text);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.service-group__title,
|
||||
.skill-group__title {
|
||||
margin-bottom: 1rem;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.78rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.service-group__list {
|
||||
display: grid;
|
||||
gap: 0.9rem;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.service {
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr);
|
||||
align-items: baseline;
|
||||
column-gap: 0.75rem;
|
||||
}
|
||||
|
||||
.service__dot {
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
border-radius: 50%;
|
||||
background: var(--pink);
|
||||
box-shadow: 0 0 0 4px rgb(255 118 164 / 0.14);
|
||||
}
|
||||
|
||||
.service__name {
|
||||
font-weight: 600;
|
||||
|
||||
& a {
|
||||
color: inherit;
|
||||
text-decoration-color: rgb(255 141 180 / 0.6);
|
||||
|
||||
&:hover {
|
||||
color: var(--pink-text);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.service__text {
|
||||
grid-column: 2;
|
||||
font-size: 0.92rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
/* Journey */
|
||||
.about {
|
||||
display: grid;
|
||||
gap: 2rem;
|
||||
|
||||
@media (min-width: 60em) {
|
||||
grid-template-columns: 18rem minmax(0, 1fr);
|
||||
column-gap: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.about__head {
|
||||
grid-column: 1 / -1;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.about__portrait {
|
||||
width: min(100%, 18rem);
|
||||
}
|
||||
|
||||
.about__img {
|
||||
width: 100%;
|
||||
aspect-ratio: 4 / 5;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius-l);
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.about__text {
|
||||
font-size: var(--step-1);
|
||||
line-height: 1.55;
|
||||
|
||||
.about__head + & {
|
||||
grid-column: 1 / -1;
|
||||
max-width: 48rem;
|
||||
}
|
||||
}
|
||||
|
||||
.timeline {
|
||||
--line-x: 0.45rem;
|
||||
position: relative;
|
||||
display: grid;
|
||||
gap: 1.25rem;
|
||||
margin: 0;
|
||||
padding: 0 0 0 2.25rem;
|
||||
list-style: none;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0.5rem;
|
||||
bottom: 0.5rem;
|
||||
left: var(--line-x);
|
||||
width: 2px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
&::before {
|
||||
background: var(--line);
|
||||
}
|
||||
|
||||
&::after {
|
||||
background: linear-gradient(180deg, var(--pink), var(--violet-text), var(--blue-text));
|
||||
transform-origin: top;
|
||||
scale: 1 var(--progress, 1);
|
||||
}
|
||||
|
||||
@media (min-width: 60em) {
|
||||
--line-x: calc(50% - 1px);
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
column-gap: 5rem;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.timeline__entry {
|
||||
position: relative;
|
||||
|
||||
@media (min-width: 60em) {
|
||||
&:nth-child(odd) {
|
||||
grid-column: 1;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
&:nth-child(even) {
|
||||
grid-column: 2;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
&:nth-child(even) + .timeline__entry {
|
||||
margin-top: -3rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.timeline__dot {
|
||||
position: absolute;
|
||||
top: 1.5rem;
|
||||
left: calc(-2.25rem + 0.45rem + 1px - 0.45rem);
|
||||
width: 0.9rem;
|
||||
height: 0.9rem;
|
||||
border: 2px solid currentColor;
|
||||
border-radius: 50%;
|
||||
background: var(--bg);
|
||||
box-shadow: 0 0 0 4px var(--bg);
|
||||
|
||||
@media (min-width: 60em) {
|
||||
.timeline__entry:nth-child(odd) & {
|
||||
left: auto;
|
||||
right: calc(-2.5rem - 0.45rem);
|
||||
}
|
||||
|
||||
.timeline__entry:nth-child(even) & {
|
||||
left: calc(-2.5rem - 0.45rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.timeline__entry--edu { color: var(--blue-text); }
|
||||
.timeline__entry--work { color: var(--pink-text); }
|
||||
.timeline__entry--project,
|
||||
.timeline__entry--other { color: var(--violet-text); }
|
||||
|
||||
.timeline__card {
|
||||
padding: 1.25rem 1.4rem;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
background: var(--surface);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.timeline__period {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.78rem;
|
||||
color: var(--muted);
|
||||
|
||||
@media (min-width: 60em) {
|
||||
.timeline__entry:nth-child(odd) & {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.timeline__title {
|
||||
margin-top: 0.4rem;
|
||||
font-size: var(--step-2);
|
||||
}
|
||||
|
||||
.timeline__place {
|
||||
margin-top: 0.25rem;
|
||||
color: var(--muted);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.timeline__text {
|
||||
margin-top: 0.6rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.skill-group__list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.skill {
|
||||
padding: 0.35rem 0.8rem;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 99px;
|
||||
background: rgb(243 238 248 / 0.05);
|
||||
font-size: 0.92rem;
|
||||
}
|
||||
|
||||
/* Contact */
|
||||
.contact {
|
||||
display: grid;
|
||||
gap: clamp(2rem, 5vw, 4rem);
|
||||
|
||||
@media (min-width: 60em) {
|
||||
grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
|
||||
align-items: start;
|
||||
}
|
||||
}
|
||||
|
||||
.contact-form {
|
||||
position: relative;
|
||||
display: grid;
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
.contact-form__footer {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 1rem 1.5rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.contact-form__note {
|
||||
max-width: 42ch;
|
||||
font-size: 0.85rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.contact__aside {
|
||||
padding: 1.5rem;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius-l);
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.contact__links {
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/* Errors */
|
||||
.error-page {
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
display: grid;
|
||||
align-items: center;
|
||||
min-height: 80vh;
|
||||
min-height: 80svh;
|
||||
padding-block: calc(var(--header-h) + 3rem) 2rem;
|
||||
|
||||
& .btn {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.error-page__code {
|
||||
font-family: var(--font-display);
|
||||
font-size: clamp(7rem, 4rem + 18vw, 16rem);
|
||||
font-weight: 700;
|
||||
line-height: 0.85;
|
||||
letter-spacing: -0.06em;
|
||||
background: var(--fluid);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.error-page__title {
|
||||
margin-top: 1.25rem;
|
||||
font-size: var(--step-4);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
|
||||
--bg: #0c0a12;
|
||||
--bg-raised: #120f1a;
|
||||
--surface: #16131f;
|
||||
--surface-2: #1e1a2a;
|
||||
--line: rgb(243 238 248 / 0.1);
|
||||
--line-strong: rgb(243 238 248 / 0.2);
|
||||
|
||||
--text: #f3eef8;
|
||||
--muted: #a8a0bb;
|
||||
--faint: #857d99;
|
||||
|
||||
/* genderfluid flag */
|
||||
--pink: #ff76a4;
|
||||
--white: #ffffff;
|
||||
--violet: #c011d7;
|
||||
--black: #000000;
|
||||
--blue: #2f3cbe;
|
||||
|
||||
/* lighter versions that are readable on the dark background */
|
||||
--pink-text: #ff8db4;
|
||||
--violet-text: #da7ff2;
|
||||
--blue-text: #8f98ff;
|
||||
--error: #ff9aa9;
|
||||
|
||||
--fluid: linear-gradient(110deg, var(--pink) 0%, var(--violet-text) 48%, var(--blue-text) 100%);
|
||||
|
||||
--font-display: "Bricolage Grotesque Variable", "Bricolage Grotesque", system-ui, sans-serif;
|
||||
--font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
|
||||
--font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
|
||||
|
||||
--step--1: clamp(0.84rem, 0.82rem + 0.1vw, 0.9rem);
|
||||
--step-0: clamp(1rem, 0.97rem + 0.15vw, 1.1rem);
|
||||
--step-1: clamp(1.15rem, 1.07rem + 0.4vw, 1.4rem);
|
||||
--step-2: clamp(1.35rem, 1.2rem + 0.75vw, 1.85rem);
|
||||
--step-3: clamp(1.7rem, 1.4rem + 1.5vw, 2.6rem);
|
||||
--step-4: clamp(2.2rem, 1.6rem + 3vw, 4.25rem);
|
||||
--step-5: clamp(2.8rem, 1.7rem + 5.5vw, 6.5rem);
|
||||
|
||||
--radius-s: 0.6rem;
|
||||
--radius: 1rem;
|
||||
--radius-l: 1.5rem;
|
||||
|
||||
--gutter: clamp(1rem, 4vw, 2.5rem);
|
||||
--container: 78rem;
|
||||
--section: clamp(4.5rem, 3rem + 7vw, 9rem);
|
||||
--header-h: 4.25rem;
|
||||
|
||||
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
|
||||
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
|
||||
}
|
||||
@@ -0,0 +1,274 @@
|
||||
/* Small decorative animations inside the homepage tiles */
|
||||
@layer components {
|
||||
/* Server rack */
|
||||
.rack {
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
width: min(100%, 24rem);
|
||||
|
||||
@media (min-width: 64em) {
|
||||
.tile--server & {
|
||||
gap: 0.7rem;
|
||||
width: min(100%, 30rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rack__unit {
|
||||
display: grid;
|
||||
position: relative;
|
||||
grid-template-columns: auto auto minmax(0, 1fr) 4.5rem;
|
||||
align-items: center;
|
||||
gap: 0.55rem;
|
||||
height: 2.4rem;
|
||||
padding-inline: 0.9rem;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 0.6rem;
|
||||
background: linear-gradient(180deg, #231e33, #1a1626);
|
||||
box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.05);
|
||||
}
|
||||
|
||||
.rack__led {
|
||||
width: 0.45rem;
|
||||
height: 0.45rem;
|
||||
border-radius: 50%;
|
||||
background: var(--pink);
|
||||
box-shadow: 0 0 8px var(--pink);
|
||||
animation: blink 1.6s steps(2, jump-none) infinite;
|
||||
}
|
||||
|
||||
.rack__led--b1,
|
||||
.rack__led--b2,
|
||||
.rack__led--b3,
|
||||
.rack__led--b4,
|
||||
.rack__led--b5 {
|
||||
background: var(--blue-text);
|
||||
box-shadow: 0 0 8px var(--blue-text);
|
||||
}
|
||||
|
||||
.rack__led--2 { animation-duration: 0.9s; }
|
||||
.rack__led--3 { animation-duration: 2.3s; animation-delay: -0.6s; }
|
||||
.rack__led--4 { animation-duration: 1.2s; animation-delay: -0.3s; }
|
||||
.rack__led--b1 { animation-duration: 0.7s; animation-delay: -0.2s; }
|
||||
.rack__led--b2 { animation-duration: 3.1s; }
|
||||
.rack__led--b3 { animation-duration: 1.1s; animation-delay: -0.5s; }
|
||||
.rack__led--b4 { animation-duration: 0.5s; }
|
||||
.rack__led--5 { animation-duration: 1.9s; animation-delay: -1s; }
|
||||
.rack__led--b5 { animation-duration: 0.8s; animation-delay: -0.1s; }
|
||||
|
||||
.rack__vents {
|
||||
height: 0.9rem;
|
||||
border-radius: 2px;
|
||||
background: repeating-linear-gradient(90deg, rgb(255 255 255 / 0.09) 0 2px, transparent 2px 6px);
|
||||
}
|
||||
|
||||
.rack__bar {
|
||||
height: 0.3rem;
|
||||
overflow: hidden;
|
||||
border-radius: 9px;
|
||||
background: rgb(255 255 255 / 0.08);
|
||||
}
|
||||
|
||||
.rack__load {
|
||||
display: block;
|
||||
width: 45%;
|
||||
height: 100%;
|
||||
border-radius: inherit;
|
||||
background: var(--fluid);
|
||||
animation: load 5s var(--ease-in-out) infinite alternate;
|
||||
}
|
||||
|
||||
.rack__load--2 { width: 70%; animation-duration: 3.4s; animation-delay: -1s; }
|
||||
.rack__load--3 { width: 25%; animation-duration: 6s; animation-delay: -2.5s; }
|
||||
.rack__load--4 { width: 55%; animation-duration: 4.2s; animation-delay: -0.4s; }
|
||||
.rack__load--5 { width: 35%; animation-duration: 5.5s; animation-delay: -3s; }
|
||||
|
||||
@media (min-width: 64em) {
|
||||
.tile--server .rack__unit {
|
||||
height: 3.1rem;
|
||||
grid-template-columns: auto auto minmax(0, 1fr) 6rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Network graph */
|
||||
.net {
|
||||
width: min(100%, 24rem);
|
||||
height: auto;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.net__links path {
|
||||
fill: none;
|
||||
stroke: rgb(255 255 255 / 0.14);
|
||||
stroke-width: 1.5;
|
||||
}
|
||||
|
||||
.net__flow path {
|
||||
fill: none;
|
||||
stroke: var(--pink);
|
||||
stroke-width: 2.5;
|
||||
stroke-linecap: round;
|
||||
stroke-dasharray: 6 100;
|
||||
animation: flow 3s linear infinite;
|
||||
}
|
||||
|
||||
.net__flow path:nth-child(2) { stroke: var(--violet-text); animation-duration: 2.4s; animation-delay: -1.2s; }
|
||||
.net__flow path:nth-child(3) { stroke: var(--white); animation-duration: 3.6s; animation-delay: -0.4s; }
|
||||
.net__flow path:nth-child(4) { stroke: var(--blue-text); animation-duration: 2.8s; animation-delay: -2s; }
|
||||
.net__flow path:nth-child(5) { animation-duration: 4s; animation-delay: -3s; }
|
||||
|
||||
.net__nodes rect {
|
||||
fill: #1e1a2a;
|
||||
stroke: rgb(255 255 255 / 0.25);
|
||||
stroke-width: 1.2;
|
||||
}
|
||||
|
||||
.net__core {
|
||||
fill: var(--bg);
|
||||
stroke: var(--pink);
|
||||
stroke-width: 2;
|
||||
filter: drop-shadow(0 0 8px rgb(255 118 164 / 0.7));
|
||||
}
|
||||
|
||||
/* Shell script */
|
||||
.code {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 1rem 1.1rem;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 0.8rem;
|
||||
background: #0f0c16;
|
||||
color: #d9d1e7;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.74rem;
|
||||
line-height: 1.65;
|
||||
white-space: pre;
|
||||
|
||||
& .c { color: var(--faint); }
|
||||
& .k { color: var(--pink-text); }
|
||||
& .s { color: var(--blue-text); }
|
||||
}
|
||||
|
||||
.code__caret {
|
||||
display: inline-block;
|
||||
width: 0.55em;
|
||||
height: 1.15em;
|
||||
margin-left: 0.2em;
|
||||
vertical-align: text-bottom;
|
||||
background: var(--pink-text);
|
||||
animation: blink 1.1s steps(2, jump-none) infinite;
|
||||
}
|
||||
|
||||
/* Bars that keep sorting themselves */
|
||||
.bars {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: 0.4rem;
|
||||
width: min(100%, 15rem);
|
||||
height: 7rem;
|
||||
}
|
||||
|
||||
.bars__bar {
|
||||
flex: 1;
|
||||
height: var(--to);
|
||||
border-radius: 0.3rem 0.3rem 0.15rem 0.15rem;
|
||||
background: linear-gradient(180deg, var(--violet-text), var(--blue));
|
||||
animation: sort 7s var(--ease-in-out) infinite;
|
||||
}
|
||||
|
||||
.bars__bar--1 { --from: 70%; --to: 18%; }
|
||||
.bars__bar--2 { --from: 30%; --to: 28%; animation-delay: 0.08s; }
|
||||
.bars__bar--3 { --from: 95%; --to: 38%; animation-delay: 0.16s; }
|
||||
.bars__bar--4 { --from: 18%; --to: 48%; animation-delay: 0.24s; }
|
||||
.bars__bar--5 { --from: 58%; --to: 58%; animation-delay: 0.32s; }
|
||||
.bars__bar--6 { --from: 40%; --to: 70%; animation-delay: 0.4s; }
|
||||
.bars__bar--7 { --from: 82%; --to: 84%; animation-delay: 0.48s; }
|
||||
.bars__bar--8 { --from: 48%; --to: 100%; animation-delay: 0.56s; }
|
||||
|
||||
.bars__bar--3,
|
||||
.bars__bar--8 {
|
||||
background: linear-gradient(180deg, var(--pink), var(--violet));
|
||||
}
|
||||
|
||||
/* Video editor timeline */
|
||||
.edit {
|
||||
--label: 2.2rem;
|
||||
position: relative;
|
||||
display: grid;
|
||||
gap: 0.45rem;
|
||||
width: 100%;
|
||||
padding: 0.9rem;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 0.8rem;
|
||||
background: #0f0c16;
|
||||
}
|
||||
|
||||
.edit__ruler {
|
||||
height: 0.6rem;
|
||||
margin-left: var(--label);
|
||||
background:
|
||||
repeating-linear-gradient(90deg, rgb(255 255 255 / 0.22) 0 1px, transparent 1px 2.5rem),
|
||||
repeating-linear-gradient(90deg, rgb(255 255 255 / 0.09) 0 1px, transparent 1px 0.5rem);
|
||||
}
|
||||
|
||||
.edit__track {
|
||||
position: relative;
|
||||
height: 1.9rem;
|
||||
margin-left: var(--label);
|
||||
border-radius: 0.35rem;
|
||||
background: rgb(255 255 255 / 0.03);
|
||||
}
|
||||
|
||||
.edit__label {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: calc(-1 * var(--label));
|
||||
translate: 0 -50%;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.68rem;
|
||||
color: var(--faint);
|
||||
}
|
||||
|
||||
.edit__clip {
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
bottom: 3px;
|
||||
border-radius: 0.3rem;
|
||||
}
|
||||
|
||||
.edit__clip--title { left: 30%; width: 22%; background: linear-gradient(90deg, rgb(255 255 255 / 0.85), rgb(255 255 255 / 0.55)); }
|
||||
.edit__clip--a { left: 0; width: 34%; background: var(--pink); }
|
||||
.edit__clip--b { left: 34.6%; width: 28%; background: var(--violet); }
|
||||
.edit__clip--c { left: 63.2%; width: 36.8%; background: var(--blue); }
|
||||
|
||||
.edit__clip--wave {
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background: repeating-linear-gradient(90deg, var(--violet-text) 0 2px, transparent 2px 4px);
|
||||
clip-path: polygon(0.0% 39%, 2.5% 26%, 5.0% 12%, 7.5% 14%, 10.0% 15%, 12.5% 28%, 15.0% 37%, 17.5% 21%, 20.0% 18%, 22.5% 16%, 25.0% 26%, 27.5% 36%, 30.0% 33%, 32.5% 23%, 35.0% 27%, 37.5% 29%, 40.0% 30%, 42.5% 33%, 45.0% 33%, 47.5% 33%, 50.0% 28%, 52.5% 36%, 55.0% 32%, 57.5% 39%, 60.0% 37%, 62.5% 34%, 65.0% 31%, 67.5% 28%, 70.0% 37%, 72.5% 34%, 75.0% 26%, 77.5% 23%, 80.0% 20%, 82.5% 28%, 85.0% 38%, 87.5% 31%, 90.0% 16%, 92.5% 12%, 95.0% 15%, 97.5% 23%, 100.0% 38%, 100.0% 62%, 97.5% 77%, 95.0% 85%, 92.5% 88%, 90.0% 84%, 87.5% 69%, 85.0% 62%, 82.5% 72%, 80.0% 80%, 77.5% 77%, 75.0% 74%, 72.5% 66%, 70.0% 63%, 67.5% 72%, 65.0% 69%, 62.5% 66%, 60.0% 63%, 57.5% 61%, 55.0% 68%, 52.5% 64%, 50.0% 72%, 47.5% 67%, 45.0% 67%, 42.5% 67%, 40.0% 70%, 37.5% 71%, 35.0% 73%, 32.5% 77%, 30.0% 67%, 27.5% 64%, 25.0% 74%, 22.5% 84%, 20.0% 82%, 17.5% 79%, 15.0% 63%, 12.5% 72%, 10.0% 85%, 7.5% 86%, 5.0% 88%, 2.5% 74%, 0.0% 61%);
|
||||
}
|
||||
|
||||
.edit__playhead {
|
||||
position: absolute;
|
||||
top: 0.5rem;
|
||||
bottom: 0.5rem;
|
||||
left: calc(0.9rem + var(--label) + 30%);
|
||||
width: 2px;
|
||||
background: var(--pink-text);
|
||||
box-shadow: 0 0 12px var(--pink);
|
||||
animation: playhead 8s linear infinite;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
left: -5px;
|
||||
width: 12px;
|
||||
height: 10px;
|
||||
border-radius: 2px 2px 6px 6px;
|
||||
background: var(--pink-text);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
export function initContactForm(form) {
|
||||
const status = form.querySelector('[data-form-status]');
|
||||
const submit = form.querySelector('[type="submit"]');
|
||||
const submitLabel = submit.innerHTML;
|
||||
|
||||
function setFieldError(name, message) {
|
||||
const input = form.elements[name];
|
||||
const error = form.querySelector(`[data-error-for="${name}"]`);
|
||||
if (!input || !error) return;
|
||||
input.closest('.field').classList.toggle('field--invalid', Boolean(message));
|
||||
error.textContent = message || '';
|
||||
error.hidden = !message;
|
||||
if (message) {
|
||||
input.setAttribute('aria-invalid', 'true');
|
||||
input.setAttribute('aria-describedby', error.id);
|
||||
} else {
|
||||
input.removeAttribute('aria-invalid');
|
||||
input.removeAttribute('aria-describedby');
|
||||
}
|
||||
}
|
||||
|
||||
function showStatus(message, kind) {
|
||||
status.textContent = message;
|
||||
status.className = `form-status form-status--${kind}`;
|
||||
status.hidden = false;
|
||||
}
|
||||
|
||||
form.addEventListener('submit', async (event) => {
|
||||
event.preventDefault();
|
||||
form.querySelector('[role="alert"]')?.remove();
|
||||
for (const name of ['name', 'email', 'message']) setFieldError(name, null);
|
||||
status.hidden = true;
|
||||
|
||||
submit.disabled = true;
|
||||
submit.textContent = form.dataset.sending;
|
||||
|
||||
try {
|
||||
const response = await fetch(form.action, {
|
||||
method: 'POST',
|
||||
headers: { Accept: 'application/json' },
|
||||
body: new URLSearchParams(new FormData(form)),
|
||||
});
|
||||
const data = await response.json();
|
||||
|
||||
if (data.ok) {
|
||||
const done = document.createElement('p');
|
||||
done.className = 'form-status form-status--ok';
|
||||
done.setAttribute('role', 'status');
|
||||
done.tabIndex = -1;
|
||||
done.textContent = data.message;
|
||||
form.replaceWith(done);
|
||||
done.focus();
|
||||
return;
|
||||
}
|
||||
|
||||
for (const [name, message] of Object.entries(data.errors ?? {})) setFieldError(name, message);
|
||||
showStatus(data.message, 'error');
|
||||
form.querySelector('[aria-invalid="true"]')?.focus();
|
||||
} catch {
|
||||
showStatus(form.dataset.failed, 'error');
|
||||
} finally {
|
||||
submit.disabled = false;
|
||||
submit.innerHTML = submitLabel;
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
// Portfolio tag filter. The chips are plain links (?tag=...), the server filters too,
|
||||
// so this only makes it instant.
|
||||
export function initFilter(nav) {
|
||||
const list = document.querySelector('[data-filter-list]');
|
||||
const empty = document.querySelector('[data-filter-empty]');
|
||||
if (!list) return;
|
||||
const items = [...list.children];
|
||||
const reducedMotion = matchMedia('(prefers-reduced-motion: reduce)');
|
||||
|
||||
function apply(tag) {
|
||||
for (const chip of nav.querySelectorAll('[data-tag]')) {
|
||||
if (chip.dataset.tag === tag) chip.setAttribute('aria-current', 'true');
|
||||
else chip.removeAttribute('aria-current');
|
||||
}
|
||||
let shown = 0;
|
||||
for (const item of items) {
|
||||
const match = !tag || item.dataset.tags.split(' ').includes(tag);
|
||||
item.hidden = !match;
|
||||
if (match) {
|
||||
item.classList.add('is-visible');
|
||||
shown++;
|
||||
}
|
||||
}
|
||||
if (empty) empty.hidden = shown > 0;
|
||||
}
|
||||
|
||||
nav.addEventListener('click', (event) => {
|
||||
const chip = event.target.closest('[data-tag]');
|
||||
if (!chip || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
|
||||
event.preventDefault();
|
||||
history.replaceState(null, '', chip.href);
|
||||
|
||||
if (!document.startViewTransition || reducedMotion.matches) {
|
||||
apply(chip.dataset.tag);
|
||||
return;
|
||||
}
|
||||
|
||||
// names only for the duration of the transition, so they don't clash with page navigation
|
||||
items.forEach((item, index) => (item.style.viewTransitionName = `project-${index}`));
|
||||
const transition = document.startViewTransition(() => apply(chip.dataset.tag));
|
||||
transition.finished.finally(() => {
|
||||
for (const item of items) item.style.viewTransitionName = '';
|
||||
});
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,195 @@
|
||||
// The hero background: the five stripes of the genderfluid flag, bent by layered noise.
|
||||
|
||||
const vertexSource = `
|
||||
attribute vec2 position;
|
||||
void main() {
|
||||
gl_Position = vec4(position, 0.0, 1.0);
|
||||
}
|
||||
`;
|
||||
|
||||
const fragmentSource = `
|
||||
#ifdef GL_FRAGMENT_PRECISION_HIGH
|
||||
precision highp float;
|
||||
#else
|
||||
precision mediump float;
|
||||
#endif
|
||||
|
||||
uniform vec2 resolution;
|
||||
uniform float time;
|
||||
uniform vec2 pointer;
|
||||
|
||||
vec3 stripe(float i) {
|
||||
if (i < 0.5) return vec3(1.0, 0.463, 0.643);
|
||||
if (i < 1.5) return vec3(0.88, 0.85, 0.92);
|
||||
if (i < 2.5) return vec3(0.753, 0.067, 0.843);
|
||||
if (i < 3.5) return vec3(0.05, 0.04, 0.08);
|
||||
return vec3(0.184, 0.235, 0.745);
|
||||
}
|
||||
|
||||
float hash(vec2 p) {
|
||||
return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453);
|
||||
}
|
||||
|
||||
float noise(vec2 p) {
|
||||
vec2 i = floor(p);
|
||||
vec2 f = fract(p);
|
||||
vec2 u = f * f * (3.0 - 2.0 * f);
|
||||
return mix(
|
||||
mix(hash(i), hash(i + vec2(1.0, 0.0)), u.x),
|
||||
mix(hash(i + vec2(0.0, 1.0)), hash(i + vec2(1.0, 1.0)), u.x),
|
||||
u.y
|
||||
);
|
||||
}
|
||||
|
||||
float fbm(vec2 p) {
|
||||
float value = 0.0;
|
||||
float amp = 0.5;
|
||||
for (int i = 0; i < 4; i++) {
|
||||
value += amp * noise(p);
|
||||
p = p * 2.02 + vec2(1.7, 9.2);
|
||||
amp *= 0.5;
|
||||
}
|
||||
return value;
|
||||
}
|
||||
|
||||
void main() {
|
||||
vec2 uv = gl_FragCoord.xy / resolution;
|
||||
vec2 p = uv * vec2(resolution.x / resolution.y, 1.0);
|
||||
float t = time * 0.035;
|
||||
|
||||
vec2 q = vec2(fbm(p * 0.9 + vec2(0.0, t)), fbm(p * 0.9 + vec2(5.2, -t)));
|
||||
vec2 r = vec2(
|
||||
fbm(p * 0.8 + 2.2 * q + vec2(1.7, 9.2) + t * 0.6),
|
||||
fbm(p * 0.8 + 2.2 * q + vec2(8.3, 2.8) - t * 0.4)
|
||||
);
|
||||
|
||||
float d = distance(uv, pointer);
|
||||
float bend = 0.1 * exp(-d * d * 14.0);
|
||||
|
||||
float y = uv.y + (r.y - 0.5) * 0.9 + (q.x - 0.5) * 0.4 + bend;
|
||||
float s = clamp(1.0 - y, 0.0, 0.9999) * 5.0;
|
||||
float i = floor(s);
|
||||
float f = fract(s);
|
||||
vec3 col = mix(stripe(i), stripe(min(i + 1.0, 4.0)), smoothstep(0.3, 1.0, f));
|
||||
|
||||
col *= 0.55 + 0.45 * smoothstep(0.15, 0.85, r.x);
|
||||
col = mix(vec3(0.047, 0.039, 0.071), col, 0.8);
|
||||
gl_FragColor = vec4(col, 1.0);
|
||||
}
|
||||
`;
|
||||
|
||||
function compile(gl, type, source) {
|
||||
const shader = gl.createShader(type);
|
||||
gl.shaderSource(shader, source);
|
||||
gl.compileShader(shader);
|
||||
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
|
||||
console.warn(gl.getShaderInfoLog(shader));
|
||||
return null;
|
||||
}
|
||||
return shader;
|
||||
}
|
||||
|
||||
export function initFluid(canvas) {
|
||||
const gl = canvas.getContext('webgl', { antialias: false, depth: false, powerPreference: 'low-power' });
|
||||
if (!gl) return;
|
||||
|
||||
const vertex = compile(gl, gl.VERTEX_SHADER, vertexSource);
|
||||
const fragment = compile(gl, gl.FRAGMENT_SHADER, fragmentSource);
|
||||
if (!vertex || !fragment) return;
|
||||
|
||||
const program = gl.createProgram();
|
||||
gl.attachShader(program, vertex);
|
||||
gl.attachShader(program, fragment);
|
||||
gl.linkProgram(program);
|
||||
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) return;
|
||||
gl.useProgram(program);
|
||||
|
||||
// one triangle that covers the whole viewport
|
||||
gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
|
||||
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);
|
||||
const position = gl.getAttribLocation(program, 'position');
|
||||
gl.enableVertexAttribArray(position);
|
||||
gl.vertexAttribPointer(position, 2, gl.FLOAT, false, 0, 0);
|
||||
|
||||
const uniforms = {
|
||||
resolution: gl.getUniformLocation(program, 'resolution'),
|
||||
time: gl.getUniformLocation(program, 'time'),
|
||||
pointer: gl.getUniformLocation(program, 'pointer'),
|
||||
};
|
||||
|
||||
const reducedMotion = matchMedia('(prefers-reduced-motion: reduce)');
|
||||
const finePointer = matchMedia('(pointer: fine)').matches;
|
||||
// The noise is soft anyway, rendering at a fraction of the size is barely visible and saves a lot
|
||||
const scale = Math.min(devicePixelRatio || 1, 2) * (finePointer ? 0.5 : 0.35);
|
||||
const offset = Math.random() * 200;
|
||||
const pointer = { x: 0.7, y: 0.6, targetX: 0.7, targetY: 0.6 };
|
||||
|
||||
let visible = true;
|
||||
let frame = 0;
|
||||
let start = performance.now();
|
||||
|
||||
function resize() {
|
||||
const width = Math.max(1, Math.round(canvas.clientWidth * scale));
|
||||
const height = Math.max(1, Math.round(canvas.clientHeight * scale));
|
||||
if (canvas.width !== width || canvas.height !== height) {
|
||||
canvas.width = width;
|
||||
canvas.height = height;
|
||||
gl.viewport(0, 0, width, height);
|
||||
}
|
||||
}
|
||||
|
||||
function draw(now) {
|
||||
resize();
|
||||
pointer.x += (pointer.targetX - pointer.x) * 0.04;
|
||||
pointer.y += (pointer.targetY - pointer.y) * 0.04;
|
||||
gl.uniform2f(uniforms.resolution, canvas.width, canvas.height);
|
||||
gl.uniform1f(uniforms.time, offset + (now - start) / 1000);
|
||||
gl.uniform2f(uniforms.pointer, pointer.x, pointer.y);
|
||||
gl.drawArrays(gl.TRIANGLES, 0, 3);
|
||||
}
|
||||
|
||||
const animated = () => !reducedMotion.matches;
|
||||
|
||||
function loop(now) {
|
||||
frame = 0;
|
||||
if (!visible || document.hidden || !animated()) return;
|
||||
draw(now);
|
||||
frame = requestAnimationFrame(loop);
|
||||
}
|
||||
|
||||
function play() {
|
||||
if (!frame && visible && !document.hidden && animated()) frame = requestAnimationFrame(loop);
|
||||
}
|
||||
|
||||
draw(start);
|
||||
canvas.classList.add('is-ready');
|
||||
|
||||
new ResizeObserver(() => {
|
||||
if (!animated()) draw(start);
|
||||
}).observe(canvas);
|
||||
|
||||
new IntersectionObserver(([entry]) => {
|
||||
visible = entry.isIntersecting;
|
||||
play();
|
||||
}).observe(canvas);
|
||||
|
||||
document.addEventListener('visibilitychange', play);
|
||||
reducedMotion.addEventListener('change', () => {
|
||||
start = performance.now();
|
||||
play();
|
||||
});
|
||||
|
||||
if (finePointer) {
|
||||
addEventListener(
|
||||
'pointermove',
|
||||
(event) => {
|
||||
const rect = canvas.getBoundingClientRect();
|
||||
pointer.targetX = (event.clientX - rect.left) / rect.width;
|
||||
pointer.targetY = 1 - (event.clientY - rect.top) / rect.height;
|
||||
},
|
||||
{ passive: true },
|
||||
);
|
||||
}
|
||||
|
||||
play();
|
||||
}
|
||||
@@ -0,0 +1,98 @@
|
||||
const paths = {
|
||||
close: 'M6 6l12 12M18 6 6 18',
|
||||
prev: 'M15 5l-7 7 7 7',
|
||||
next: 'M9 5l7 7-7 7',
|
||||
};
|
||||
|
||||
function button(className, name, label) {
|
||||
const element = document.createElement('button');
|
||||
element.type = 'button';
|
||||
element.className = `lightbox__btn ${className}`;
|
||||
element.setAttribute('aria-label', label);
|
||||
element.innerHTML = `<svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="${paths[name]}"/></svg>`;
|
||||
return element;
|
||||
}
|
||||
|
||||
export function initLightbox(gallery) {
|
||||
const links = [...gallery.querySelectorAll('.gallery__link')];
|
||||
if (!links.length || typeof HTMLDialogElement !== 'function') return;
|
||||
const { labelPrev, labelNext, labelClose } = gallery.dataset;
|
||||
|
||||
const dialog = document.createElement('dialog');
|
||||
dialog.className = 'lightbox';
|
||||
const figure = document.createElement('figure');
|
||||
figure.className = 'lightbox__figure';
|
||||
const image = document.createElement('img');
|
||||
image.className = 'lightbox__img';
|
||||
image.decoding = 'async';
|
||||
figure.append(image);
|
||||
const count = document.createElement('p');
|
||||
count.className = 'lightbox__count';
|
||||
const close = button('lightbox__close', 'close', labelClose);
|
||||
const prev = button('lightbox__prev', 'prev', labelPrev);
|
||||
const next = button('lightbox__next', 'next', labelNext);
|
||||
dialog.append(figure, count, close, prev, next);
|
||||
document.body.append(dialog);
|
||||
|
||||
if (links.length < 2) {
|
||||
prev.hidden = true;
|
||||
next.hidden = true;
|
||||
count.hidden = true;
|
||||
}
|
||||
|
||||
let current = 0;
|
||||
|
||||
function show(index) {
|
||||
current = (index + links.length) % links.length;
|
||||
const link = links[current];
|
||||
image.src = link.dataset.full || link.href;
|
||||
image.width = Number(link.dataset.width) || 0;
|
||||
image.height = Number(link.dataset.height) || 0;
|
||||
image.alt = link.querySelector('img')?.alt ?? '';
|
||||
count.textContent = `${current + 1} / ${links.length}`;
|
||||
}
|
||||
|
||||
function open(index) {
|
||||
show(index);
|
||||
dialog.showModal();
|
||||
document.documentElement.classList.add('lightbox-open');
|
||||
}
|
||||
|
||||
links.forEach((link, index) => {
|
||||
link.addEventListener('click', (event) => {
|
||||
if (event.metaKey || event.ctrlKey || event.shiftKey) return;
|
||||
event.preventDefault();
|
||||
open(index);
|
||||
});
|
||||
});
|
||||
|
||||
dialog.addEventListener('close', () => {
|
||||
document.documentElement.classList.remove('lightbox-open');
|
||||
links[current].focus();
|
||||
});
|
||||
close.addEventListener('click', () => dialog.close());
|
||||
prev.addEventListener('click', () => show(current - 1));
|
||||
next.addEventListener('click', () => show(current + 1));
|
||||
|
||||
// a click on the dark area around the image closes it
|
||||
figure.addEventListener('click', (event) => {
|
||||
if (event.target === figure) dialog.close();
|
||||
});
|
||||
|
||||
dialog.addEventListener('keydown', (event) => {
|
||||
if (event.key === 'ArrowLeft') show(current - 1);
|
||||
if (event.key === 'ArrowRight') show(current + 1);
|
||||
});
|
||||
|
||||
let startX = null;
|
||||
figure.addEventListener('pointerdown', (event) => {
|
||||
if (event.pointerType !== 'mouse') startX = event.clientX;
|
||||
});
|
||||
figure.addEventListener('pointerup', (event) => {
|
||||
if (startX === null) return;
|
||||
const distance = event.clientX - startX;
|
||||
startX = null;
|
||||
if (Math.abs(distance) > 50 && links.length > 1) show(current + (distance < 0 ? 1 : -1));
|
||||
});
|
||||
figure.addEventListener('pointercancel', () => (startX = null));
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
import { initContactForm } from './contact.js';
|
||||
import { initFilter } from './filter.js';
|
||||
import { initFluid } from './fluid.js';
|
||||
import { initLightbox } from './lightbox.js';
|
||||
import { initNav } from './nav.js';
|
||||
import { initPointerEffects } from './pointer.js';
|
||||
import { initReveal, initTimeline } from './reveal.js';
|
||||
import { initCoverTransitions } from './transitions.js';
|
||||
import { initVideos } from './video.js';
|
||||
|
||||
initNav();
|
||||
initReveal();
|
||||
initTimeline();
|
||||
initPointerEffects();
|
||||
initCoverTransitions();
|
||||
initVideos();
|
||||
|
||||
const canvas = document.querySelector('[data-fluid]');
|
||||
if (canvas) initFluid(canvas);
|
||||
|
||||
const filter = document.querySelector('[data-filter]');
|
||||
if (filter) initFilter(filter);
|
||||
|
||||
for (const gallery of document.querySelectorAll('[data-gallery]')) initLightbox(gallery);
|
||||
|
||||
const form = document.querySelector('[data-contact-form]');
|
||||
if (form) initContactForm(form);
|
||||
@@ -0,0 +1,61 @@
|
||||
export function initNav() {
|
||||
const header = document.querySelector('[data-header]');
|
||||
if (!header) return;
|
||||
const root = document.documentElement;
|
||||
const toggle = header.querySelector('[data-menu-toggle]');
|
||||
const nav = header.querySelector('[data-nav]');
|
||||
const label = toggle.querySelector('.menu-toggle__label');
|
||||
const outside = [document.querySelector('main'), document.querySelector('.site-footer')];
|
||||
|
||||
let lastY = scrollY;
|
||||
let ticking = false;
|
||||
|
||||
function onScroll() {
|
||||
const y = scrollY;
|
||||
header.classList.toggle('is-scrolled', y > 24);
|
||||
if (!root.classList.contains('menu-open')) {
|
||||
// hide while scrolling down, come back as soon as the user scrolls up
|
||||
if (y > lastY + 4 && y > 240) header.classList.add('is-hidden');
|
||||
else if (y < lastY - 4 || y <= 240) header.classList.remove('is-hidden');
|
||||
}
|
||||
lastY = y;
|
||||
ticking = false;
|
||||
}
|
||||
|
||||
addEventListener(
|
||||
'scroll',
|
||||
() => {
|
||||
if (!ticking) requestAnimationFrame(onScroll);
|
||||
ticking = true;
|
||||
},
|
||||
{ passive: true },
|
||||
);
|
||||
onScroll();
|
||||
|
||||
header.addEventListener('focusin', () => header.classList.remove('is-hidden'));
|
||||
|
||||
function setOpen(open) {
|
||||
toggle.setAttribute('aria-expanded', String(open));
|
||||
root.classList.toggle('menu-open', open);
|
||||
label.textContent = open ? label.dataset.labelClose : label.dataset.labelOpen;
|
||||
for (const element of outside) if (element) element.inert = open;
|
||||
if (open) header.classList.remove('is-hidden');
|
||||
}
|
||||
|
||||
toggle.addEventListener('click', () => setOpen(toggle.getAttribute('aria-expanded') !== 'true'));
|
||||
|
||||
nav.addEventListener('click', (event) => {
|
||||
if (event.target.closest('a')) setOpen(false);
|
||||
});
|
||||
|
||||
document.addEventListener('keydown', (event) => {
|
||||
if (event.key === 'Escape' && root.classList.contains('menu-open')) {
|
||||
setOpen(false);
|
||||
toggle.focus();
|
||||
}
|
||||
});
|
||||
|
||||
matchMedia('(min-width: 48em)').addEventListener('change', (event) => {
|
||||
if (event.matches) setOpen(false);
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
// Mouse-only effects: border glow that follows the cursor and buttons that lean towards it
|
||||
export function initPointerEffects() {
|
||||
if (!matchMedia('(hover: hover) and (pointer: fine)').matches) return;
|
||||
|
||||
document.addEventListener(
|
||||
'pointermove',
|
||||
(event) => {
|
||||
const element = event.target.closest?.('[data-glow]');
|
||||
if (!element) return;
|
||||
const rect = element.getBoundingClientRect();
|
||||
element.style.setProperty('--mx', `${event.clientX - rect.left}px`);
|
||||
element.style.setProperty('--my', `${event.clientY - rect.top}px`);
|
||||
},
|
||||
{ passive: true },
|
||||
);
|
||||
|
||||
if (matchMedia('(prefers-reduced-motion: reduce)').matches) return;
|
||||
|
||||
for (const element of document.querySelectorAll('[data-magnetic]')) {
|
||||
element.addEventListener('pointermove', (event) => {
|
||||
const rect = element.getBoundingClientRect();
|
||||
const x = (event.clientX - rect.left - rect.width / 2) * 0.2;
|
||||
const y = (event.clientY - rect.top - rect.height / 2) * 0.35;
|
||||
element.style.translate = `${x.toFixed(1)}px ${y.toFixed(1)}px`;
|
||||
});
|
||||
element.addEventListener('pointerleave', () => {
|
||||
element.style.translate = '';
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,58 @@
|
||||
export function initReveal() {
|
||||
const items = document.querySelectorAll('[data-reveal]');
|
||||
if (!('IntersectionObserver' in window)) {
|
||||
for (const item of items) item.classList.add('is-visible');
|
||||
return;
|
||||
}
|
||||
|
||||
const groups = new Map();
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
// things that come into view together get a small stagger
|
||||
let index = 0;
|
||||
for (const entry of entries) {
|
||||
if (!entry.isIntersecting) continue;
|
||||
for (const item of groups.get(entry.target)) {
|
||||
item.style.setProperty('--delay', `${Math.min(index++ * 90, 450)}ms`);
|
||||
item.classList.add('is-visible');
|
||||
}
|
||||
observer.unobserve(entry.target);
|
||||
}
|
||||
},
|
||||
{ rootMargin: '0px 0px -6% 0px' },
|
||||
);
|
||||
|
||||
for (const item of items) {
|
||||
// Chrome applies the element's own clip-path, so a fully clipped heading never
|
||||
// counts as intersecting. Watch the parent for those instead.
|
||||
const target = item.dataset.reveal === 'mask' ? item.parentElement : item;
|
||||
if (!groups.has(target)) groups.set(target, []);
|
||||
groups.get(target).push(item);
|
||||
observer.observe(target);
|
||||
}
|
||||
}
|
||||
|
||||
// Fallback for browsers without scroll-driven animations
|
||||
export function initTimeline() {
|
||||
const timeline = document.querySelector('[data-timeline]');
|
||||
if (!timeline || CSS.supports('animation-timeline: view()')) return;
|
||||
if (matchMedia('(prefers-reduced-motion: reduce)').matches) return;
|
||||
|
||||
let ticking = false;
|
||||
const update = () => {
|
||||
const rect = timeline.getBoundingClientRect();
|
||||
const progress = (innerHeight * 0.75 - rect.top) / rect.height;
|
||||
timeline.style.setProperty('--progress', Math.min(1, Math.max(0, progress)).toFixed(3));
|
||||
ticking = false;
|
||||
};
|
||||
|
||||
addEventListener(
|
||||
'scroll',
|
||||
() => {
|
||||
if (!ticking) requestAnimationFrame(update);
|
||||
ticking = true;
|
||||
},
|
||||
{ passive: true },
|
||||
);
|
||||
update();
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
// Cover image morphs into the project page (cross-document view transition)
|
||||
export function initCoverTransitions() {
|
||||
const clear = () => {
|
||||
for (const img of document.querySelectorAll('.card__img')) img.style.viewTransitionName = '';
|
||||
};
|
||||
|
||||
document.addEventListener('click', (event) => {
|
||||
const link = event.target.closest('[data-cover-link]');
|
||||
if (!link || event.metaKey || event.ctrlKey || event.shiftKey) return;
|
||||
clear();
|
||||
const img = link.querySelector('.card__img');
|
||||
if (img) img.style.viewTransitionName = 'project-cover';
|
||||
});
|
||||
|
||||
// coming back via bfcache would otherwise leave the name on the old card
|
||||
addEventListener('pageshow', clear);
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
// YouTube is only contacted after a click, until then it's just a link with a poster
|
||||
export function initVideos() {
|
||||
for (const box of document.querySelectorAll('[data-youtube]')) {
|
||||
const play = box.querySelector('[data-video-play]');
|
||||
play?.addEventListener('click', (event) => {
|
||||
if (event.metaKey || event.ctrlKey || event.shiftKey) return;
|
||||
event.preventDefault();
|
||||
const iframe = document.createElement('iframe');
|
||||
iframe.src = `https://www.youtube-nocookie.com/embed/${encodeURIComponent(box.dataset.youtube)}?autoplay=1&rel=0`;
|
||||
iframe.title = box.dataset.title || 'YouTube';
|
||||
iframe.allow = 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share';
|
||||
iframe.allowFullscreen = true;
|
||||
// YouTube refuses to play embeds without a referrer, helmet sets no-referrer for the page
|
||||
iframe.referrerPolicy = 'strict-origin-when-cross-origin';
|
||||
box.replaceChildren(iframe);
|
||||
iframe.focus();
|
||||
});
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user