feat: visual polish & UX — fade-in, theme toggle, scroll-to-top, footer, cursor, badge

- Add FadeIn component (IntersectionObserver scroll-reveal + load animation)
- Add dark/light theme toggle (useSyncExternalStore + localStorage)
- Add scroll-to-top button (appears after 300px scroll)
- Add configurable footer with social links (gallery.yaml)
- Add crosshair cursor on photo grid items
- Add 'X photos' count badge on subpage cover images
- Add light theme color palette in tokens.css
This commit is contained in:
ralksta
2026-02-14 11:47:26 +01:00
parent e26f091595
commit 52fa16c1c8
57 changed files with 4790 additions and 1984 deletions

38
e2e/homepage.spec.ts Normal file
View File

@@ -0,0 +1,38 @@
import { test, expect } from '@playwright/test';
test.describe('Homepage', () => {
test('loads and renders the hero section', async ({ page }) => {
await page.goto('/');
// Wait for the hero section to appear
const hero = page.locator('.hero');
await expect(hero).toBeVisible();
});
test('shows the site title in the hero', async ({ page }) => {
await page.goto('/');
const title = page.locator('.hero__title');
await expect(title).toBeVisible();
const text = await title.textContent();
expect(text).toBeTruthy();
});
test('has navigation links in the header', async ({ page }) => {
await page.goto('/');
const nav = page.locator('.header__nav');
await expect(nav).toBeVisible();
// Should have at least the Home and About links
const links = nav.locator('.header__nav-link');
const count = await links.count();
expect(count).toBeGreaterThanOrEqual(2);
});
test('hero nav links are present for subpages', async ({ page }) => {
await page.goto('/');
const heroNav = page.locator('.hero__nav');
await expect(heroNav).toBeVisible();
const links = heroNav.locator('.hero__nav-link');
const count = await links.count();
expect(count).toBeGreaterThanOrEqual(1);
});
});