From c06f5cc3c8ef9bd36aedd660e1ada694fffd8822 Mon Sep 17 00:00:00 2001 From: Patrick Singletary Date: Sun, 9 Aug 2026 02:58:31 -0400 Subject: [PATCH] feat: starry parallax background + constellation zodiac signs + expanded do/don't assessments Visual overhaul: - Pure CSS starry parallax background (3 layers, box-shadow technique) - 450 stars: 300 small (50s), 100 medium (100s), 50 large (150s) - Radial gradient sky, GPU-accelerated with will-change - SVG constellation icons for all 12 Western zodiac signs - Chinese animal unicode symbols in profile cards - Twinkle animation on constellation star points - Increased header/footer contrast for background readability Compatibility engine: - Dynamic do's and don'ts generated per sign pairing - Contextual advice: element interactions, Six Harming, rating-based - Structured Do/Don't display with emerald/red styling - Updated /r server-rendered page with same layout Polish pass: - Layout background harmonized with starry sky (#090A0F) - Constellation SVG opacity boosted to 50% - Header and footer now have bg-black/20 backing - All 62 tests passing --- src/app/layout.tsx | 9 +- src/app/page.tsx | 4 +- src/app/r/page.tsx | 35 ++++++ src/app/stars.css | 76 +++++++++++++ src/components/CompatibilityReport.tsx | 46 +++++++- src/components/StarryBackground.tsx | 21 ++++ src/components/ZodiacSigns.tsx | 124 +++++++++++++++++++++ src/lib/compatibility/data.ts | 30 ++++++ src/lib/compatibility/engine.ts | 144 ++++++++++++++++++++++--- src/lib/share/__tests__/tokens.test.ts | 6 ++ 10 files changed, 476 insertions(+), 19 deletions(-) create mode 100644 src/app/stars.css create mode 100644 src/components/StarryBackground.tsx create mode 100644 src/components/ZodiacSigns.tsx diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 7f564ac..274b927 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,6 +1,8 @@ import type { Metadata } from "next"; import { Geist, Geist_Mono } from "next/font/google"; import "./globals.css"; +import "./stars.css"; +import StarryBackground from "@/components/StarryBackground"; const geistSans = Geist({ variable: "--font-geist-sans", @@ -36,8 +38,11 @@ export default function RootLayout({ content="default-src 'self'; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self'; connect-src 'self'; form-action 'self'" /> - - {children} + + +
+ {children} +
); diff --git a/src/app/page.tsx b/src/app/page.tsx index 569d30b..e7218eb 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -8,7 +8,7 @@ export default function HomePage() { return (
{/* Header */} -
+
☯ @@ -49,7 +49,7 @@ export default function HomePage() { {/* Footer */} -