From 93dfbac327f9c7c1dec9fc8134677171b97a39e7 Mon Sep 17 00:00:00 2001 From: aynazar-sylyyew-dev Date: Wed, 23 Sep 2026 18:30:03 +0500 Subject: [PATCH 1/2] feat: animate home page sections using RevealOnScroll Continue the pattern from #7 for the rest of the home page. Chosen option: reuse RevealOnScroll on the home page. This keeps the animation mechanism unified across the site without adding a new library dependency. Resolves #8 --- components/HomePage.tsx | 27 +++++++++++++++------------ components/home.css | 18 ++++++++++++++++++ 2 files changed, 33 insertions(+), 12 deletions(-) diff --git a/components/HomePage.tsx b/components/HomePage.tsx index 02b4378..03129c9 100644 --- a/components/HomePage.tsx +++ b/components/HomePage.tsx @@ -1,3 +1,4 @@ +import type { CSSProperties } from "react"; import type { Metadata } from "next"; import { SITE_URL, localePath, type Lang } from "@/lib/i18n"; import { pageMetadata } from "@/lib/seo"; @@ -6,6 +7,7 @@ import { members } from "@/content/people"; import { contribute, hero, meta, mission, people, principles, projectsIntro, stats } from "@/content/home"; import { Header } from "./Header"; import { Footer } from "./Footer"; +import { RevealOnScroll } from "./RevealOnScroll"; import "./home.css"; export function homeMetadata(lang: Lang): Metadata { @@ -52,7 +54,7 @@ export function HomePage({ lang }: { lang: Lang }) { -
+

{mission.label[lang]}

{mission.paragraphs.map((p, i) => ( @@ -62,10 +64,10 @@ export function HomePage({ lang }: { lang: Lang }) {
-

{principles.label[lang]}

+

{principles.label[lang]}

{principles.items.map((item, i) => ( -
+

{item.title[lang]}

{item.text[lang]}

@@ -73,7 +75,7 @@ export function HomePage({ lang }: { lang: Lang }) {
-
+

{projectsIntro.label[lang]}

{projectsIntro.paragraphs.map((p, i) => ( @@ -87,13 +89,13 @@ export function HomePage({ lang }: { lang: Lang }) {
-

{people.label[lang]}

+

{people.label[lang]}

-

{people.text[lang]}

+

{people.text[lang]}

- {members.map((m) => ( -
+ {members.map((m, i) => ( +
@@ -111,13 +113,13 @@ export function HomePage({ lang }: { lang: Lang }) {
-

{contribute.label[lang]}

+

{contribute.label[lang]}

    {contribute.steps.map((s, i) => ( -
  1. {s[lang]}
    2. +
  2. {s[lang]}
    3. ))}
-
+

{contribute.promiseTitle[lang]}

    @@ -133,7 +135,7 @@ export function HomePage({ lang }: { lang: Lang }) {

-
+ @@ -141,6 +143,7 @@ export function HomePage({ lang }: { lang: Lang }) {
+
); } diff --git a/components/home.css b/components/home.css index caf4f56..eb94012 100644 --- a/components/home.css +++ b/components/home.css @@ -66,3 +66,21 @@ a.stat:hover b{color:var(--accent)} .members{grid-template-columns:1fr} .stat b{font-size:28px} } +/* ---------- появление при прокрутке (RevealOnScroll) ---------- */ +.reveal { + transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); + transition-delay: var(--d, 0s); +} +.reveal.pending { + opacity: 0; + transform: translateY(16px); + transition: none; +} + +@media (prefers-reduced-motion: reduce) { + .reveal, .reveal.pending { + opacity: 1 !important; + transform: none !important; + transition: none !important; + } +} From a1d8b41d8ba2fcfabec7716ba8ffbb0195629a48 Mon Sep 17 00:00:00 2001 From: aynazar-sylyyew-dev Date: Sat, 26 Sep 2026 15:13:05 +0500 Subject: [PATCH 2/2] refactor: consolidate reveal CSS to globals.css, fix /projects/ fade - Move .reveal styles to app/globals.css (single copy for whole site) - Use body .reveal selector (specificity 11) so /projects/ cards keep their fade-in animation - Remove duplicate .reveal from home.css - Remove .project.reveal from projects.css - Remove unnecessary !important in reduced-motion block (RevealOnScroll does not add .pending when reduced motion is on) --- app/globals.css | 20 ++++++++++++++++++++ components/home.css | 18 ------------------ components/projects.css | 10 ---------- 3 files changed, 20 insertions(+), 28 deletions(-) diff --git a/app/globals.css b/app/globals.css index b0d037c..afcb0b5 100644 --- a/app/globals.css +++ b/app/globals.css @@ -83,3 +83,23 @@ footer{margin:88px 0 0; border-top:1px solid var(--rule); padding:24px 0 0} .nav{order:3; flex-basis:100%; gap:8px 20px; font-size:14px} section{padding-top:56px} } +/* ---------- появление при прокрутке (RevealOnScroll) ---------- */ +/* body .reveal — специфичность 11, побеждает .project (10) и гарантирует работу на /projects/ */ +body .reveal { + transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); + transition-delay: var(--d, 0s); +} +body .reveal.pending { + opacity: 0; + transform: translateY(16px); + transition: none; +} + +@media (prefers-reduced-motion: reduce) { + .reveal, + .reveal.pending { + opacity: 1; + transform: none; + transition: none; + } +} diff --git a/components/home.css b/components/home.css index eb94012..caf4f56 100644 --- a/components/home.css +++ b/components/home.css @@ -66,21 +66,3 @@ a.stat:hover b{color:var(--accent)} .members{grid-template-columns:1fr} .stat b{font-size:28px} } -/* ---------- появление при прокрутке (RevealOnScroll) ---------- */ -.reveal { - transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); - transition-delay: var(--d, 0s); -} -.reveal.pending { - opacity: 0; - transform: translateY(16px); - transition: none; -} - -@media (prefers-reduced-motion: reduce) { - .reveal, .reveal.pending { - opacity: 1 !important; - transform: none !important; - transition: none !important; - } -} diff --git a/components/projects.css b/components/projects.css index c2f9727..ed90807 100644 --- a/components/projects.css +++ b/components/projects.css @@ -64,21 +64,11 @@ .star .n:empty{display:none} .star .n::after{content:" · "; font-weight:400; color:var(--muted)} -/* ---------- появление при прокрутке ---------- */ -/* Прячутся только карточки ниже первого экрана (класс .pending ставит RevealOnScroll). - Без JS, до загрузки JS и при reduced motion всё видно сразу. */ -.project.reveal{ - transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); - transition-delay:var(--d,0s); -} -.project.reveal.pending{opacity:0; transform:translateY(16px); transition:none} - /* ---------- завершение ---------- */ .after{padding:64px 0 0} .after p{margin:0; font-size:16.5px; max-width:60ch} @media (prefers-reduced-motion:reduce){ - .project.reveal,.project.reveal.pending{opacity:1; transform:none; transition:none} .status.live::before{animation:none} .project,.project .icon{transition:none} .project:hover,.project:hover .icon{transform:none}