dvorakmortonxd/dvorakmortonxd.dev
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

reveal the editorial page top-to-bottom: wrap every block and cascade the first screenful

Browse source
This commit is contained in:
Martin Dvořák 2026-09-30 08:13:29 +00:00
commit 134bc9ede0
4 changed files with 74 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

66
src/app/components/EditorialSite.tsx
View file

@ -168,11 +168,13 @@ export default function EditorialSite() {
{/* ----------------------------------------------------------- stats */}
<Section className="pt-0 sm:pt-0">
<div className="rule-strong grid grid-cols-1 gap-x-10 gap-y-8 pt-8 sm:grid-cols-2 lg:grid-cols-4">
{stats.map((s) => (
<Stat key={s.label} {...s} />
))}
</div>
<Reveal>
<div className="rule-strong grid grid-cols-1 gap-x-10 gap-y-8 pt-8 sm:grid-cols-2 lg:grid-cols-4">
{stats.map((s) => (
<Stat key={s.label} {...s} />
))}
</div>
</Reveal>
</Section>
{/* ----------------------------------------------------------- about */}
@ -243,15 +245,17 @@ export default function EditorialSite() {
/>
</Reveal>
<div className="mt-12">
<ul className="flex flex-col">
{SERVICES.map((s) => (
<li key={s.name}>
<ServiceRow {...s} />
</li>
))}
</ul>
</div>
<Reveal delay={60}>
<div className="mt-12">
<ul className="flex flex-col">
{SERVICES.map((s) => (
<li key={s.name}>
<ServiceRow {...s} />
</li>
))}
</ul>
</div>
</Reveal>
</Section>
{/* -------------------------------------------------------- projects */}
@ -265,7 +269,8 @@ export default function EditorialSite() {
/>
</Reveal>
<ol className="mt-12 flex flex-col">
<Reveal delay={60}>
<ol className="mt-12 flex flex-col">
{codingProjects.map((p, i) => {
const { name, status } = splitStatus(p.title);
return (
@ -288,7 +293,8 @@ export default function EditorialSite() {
</li>
);
})}
</ol>
</ol>
</Reveal>
</Section>
{/* -------------------------------------------------------- hardware */}
@ -302,14 +308,16 @@ export default function EditorialSite() {
/>
</Reveal>
<div className="mt-12 grid grid-cols-1 gap-x-16 gap-y-6 md:grid-cols-2">
<Reveal delay={60}>
<div className="mt-12 grid grid-cols-1 gap-x-16 gap-y-6 md:grid-cols-2">
{techProjects.map((t) => (
<div key={t.title} className="rule-soft pt-4">
<h3 className="display text-lg text-ink">{t.title}</h3>
<p className="mt-2 text-sm leading-relaxed text-body">{t.desc}</p>
</div>
))}
</div>
</div>
</Reveal>
</Section>
{/* ----------------------------------------------------- contributions */}
@ -349,8 +357,9 @@ export default function EditorialSite() {
/>
</Reveal>
<ul className="mt-12 flex flex-col">
{friends.map((f) => (
<Reveal delay={60}>
<ul className="mt-12 flex flex-col">
{friends.map((f) => (
<li key={f.name} className="rule">
<a
href={f.realUrl || f.url}
@ -363,7 +372,8 @@ export default function EditorialSite() {
</a>
</li>
))}
</ul>
</ul>
</Reveal>
</Section>
{/* --------------------------------------------------------- lifting */}
@ -405,8 +415,9 @@ export default function EditorialSite() {
/>
</Reveal>
<div className="rule-strong mt-12 grid grid-cols-2 gap-x-10 gap-y-3 pt-8 sm:grid-cols-3 lg:grid-cols-4">
{socials.map((s) => (
<Reveal delay={60}>
<div className="rule-strong mt-12 grid grid-cols-2 gap-x-10 gap-y-3 pt-8 sm:grid-cols-3 lg:grid-cols-4">
{socials.map((s) => (
<a
key={s.name}
href={s.url}
@ -418,14 +429,16 @@ export default function EditorialSite() {
<span>{s.name}</span>
</a>
))}
</div>
</div>
</Reveal>
</Section>
</main>
{/* ---------------------------------------------------------- footer */}
<footer className="shell pb-14 pt-10">
<div className="rule-strong pt-8">
<Reveal>
<div className="rule-strong pt-8">
<div className="flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
<div>
<div className="display text-xl">dvorakmortonxd.dev</div>
@ -446,7 +459,8 @@ export default function EditorialSite() {
<span>v3.0.0 · © 2025–2026 Martin Dvořák</span>
<span>Follow the GPL-3.0 license (or don’t, I don’t mind).</span>
</div>
</div>
</div>
</Reveal>
</footer>
</>
);

34
src/app/components/editorial-ui.tsx
View file

@ -18,19 +18,10 @@ export function Reveal({
useEffect(() => {
const el = ref.current;
if (!el) return;
if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
// Only animate what starts below the fold. Anything already on screen stays
// visible — otherwise the hero fades in after the section beneath it.
const rect = el.getBoundingClientRect();
const onScreen = rect.top < window.innerHeight && rect.bottom > 0;
if (onScreen) return;
// Hide it without a transition, then reveal when it scrolls into view.
el.style.transition = "none";
el.classList.add("reveal-armed");
void el.offsetHeight;
el.style.transition = "";
if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
el.classList.add("is-in");
return;
}
const io = new IntersectionObserver(
(entries) => {
@ -41,11 +32,22 @@ export function Reveal({
}
}
},
{ rootMargin: "0px 0px -10% 0px", threshold: 0.05 }
{ rootMargin: "0px 0px -12% 0px", threshold: 0.08 }
);
io.observe(el);
const rect = el.getBoundingClientRect();
const onScreen = rect.top < window.innerHeight && rect.bottom > 0;
if (onScreen) {
// First screenful: stagger in document order so it fills top to bottom.
const all = Array.from(document.querySelectorAll<HTMLElement>(".reveal"));
const order = Math.min(Math.max(0, all.indexOf(el)), 8);
el.style.setProperty("--delay", `${delay + order * 90}ms`);
requestAnimationFrame(() => el.classList.add("is-in"));
} else {
io.observe(el);
}
return () => io.disconnect();
}, []);
}, [delay]);
return (
<div ref={ref} className={`reveal ${className}`} style={{ "--delay": `${delay}ms` } as CSSProperties}>