github-such-software/such.software
1
0
Fork 0
mirror of https://github.com/Such-Software/such.software.git synced 2026-10-17 05:32:05 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: Refactor animation alignment & visual tweaks

Browse Source 
- **Visuals**:
  - Implemented 'Data Ingress' animation with lines starting from edges and converging to a fixed point.
  - Added centralized 'Monitor' icon as the convergence target.
  - Refactored 'NebulaField' to use percentage-based coordinates for perfect alignment on resize.
  - Smoothed animation timing and easing.
- **Micro-interactions**:
  - Increased transparency of Bento Grid cards (from 90% to 70%) for better visibility of background elements.
  - Added backdrop-blur to cards.
- **Fixes**:
  - Fixed 'bg-clip-text' bug cutting off descenders in the main headline.
This commit is contained in:
jwinterm
2026-01-15 16:09:34 -05:00
parent 717a3be1c8
commit 4a51d8a334
3 changed files with 62 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/app/page.tsx
+1 -1
View File
@@ -24,7 +24,7 @@ export default function Home() {
</header>
<div className="z-10 w-full max-w-7xl mx-auto flex flex-col items-center pt-20 pb-10 px-4 text-center">
<h2 className="text-5xl md:text-7xl font-bold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-emerald-500">
<h2 className="text-5xl md:text-7xl font-bold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-emerald-500 pb-2">
Digital Craftsmanship
</h2>
<p className="max-w-2xl text-xl text-muted-foreground mb-8">
apps/web/src/components/portfolio/bento-grid.tsx
+5 -5
View File
@@ -5,17 +5,17 @@ export const PortfolioGrid = () => {
return (
<section className="grid grid-cols-1 md:grid-cols-4 auto-rows-[300px] gap-4 max-w-7xl mx-auto p-4 z-10 relative">
{/* Hero Project: r/CryptoCurrency */}
<Card className="md:col-span-2 md:row-span-2 relative group overflow-hidden border-0 bg-slate-900">
<Card className="md:col-span-2 md:row-span-2 relative group overflow-hidden border-0 bg-slate-900/70 backdrop-blur-sm">
<div className="absolute inset-0 z-10 bg-gradient-to-t from-black/80 to-transparent p-6 flex flex-col justify-end">
<h3 className="text-3xl font-bold text-white">r/CryptoCurrency</h3>
<p className="text-gray-200">Governance dashboard for 10M+ members. Real-time DAO metrics.</p>
</div>
{/* Placeholder image since we don't have the assets yet */}
<div className="absolute inset-0 bg-slate-800" />
<div className="absolute inset-0 bg-slate-800/50" />
</Card>
{/* Secondary: Occupy Wallets */}
<Card className="md:col-span-2 relative group overflow-hidden bg-zinc-100">
<Card className="md:col-span-2 relative group overflow-hidden bg-zinc-100/70 backdrop-blur-sm">
<div className="absolute inset-0 z-10 p-6 flex flex-col justify-center items-center text-center">
<h3 className="text-2xl font-bold text-zinc-900">Occupy Wallets</h3>
<p className="text-zinc-600">High-fidelity gallery for fiscal graffiti.</p>
@@ -23,7 +23,7 @@ export const PortfolioGrid = () => {
</Card>
{/* Tertiary: Monerogue & Wowne.ro (Grouped) */}
<Card className="md:col-span-1 relative group overflow-hidden bg-orange-50/90 dark:bg-orange-950/90 border-orange-500/20">
<Card className="md:col-span-1 relative group overflow-hidden bg-orange-50/70 dark:bg-orange-950/70 border-orange-500/20 backdrop-blur-sm">
<div className="p-6">
<h3 className="text-xl font-bold text-orange-700 dark:text-orange-400">Privacy Labs</h3>
<ul className="mt-2 space-y-2 text-sm">
@@ -34,7 +34,7 @@ export const PortfolioGrid = () => {
</Card>
{/* Quaternary: MoonPlace */}
<Card className="md:col-span-1 relative group bg-indigo-50/90 dark:bg-indigo-950/90 border-indigo-500/20">
<Card className="md:col-span-1 relative group bg-indigo-50/70 dark:bg-indigo-950/70 border-indigo-500/20 backdrop-blur-sm">
<div className="p-6">
<h3 className="text-xl font-bold text-indigo-700 dark:text-indigo-400">MoonPlace</h3>
<p className="text-sm mt-2">Collaborative pixel canvas engine.</p>