mirror of
https://github.com/Such-Software/such.software.git
synced 2026-10-17 05:32:05 +02:00
style: fix portfolio image distortion, nebula animation timing and add parallax to computer
This commit is contained in:
jwinterm
@@ -3,65 +3,80 @@ import Image from "next/image";
|
||||
|
||||
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">
|
||||
<section className="grid grid-cols-1 md:grid-cols-4 auto-rows-[300px] gap-6 w-full 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/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>
|
||||
<Card className="md:col-span-2 md:row-span-2 relative group overflow-hidden border-0 bg-slate-900/70 backdrop-blur-sm min-h-[300px]">
|
||||
<div className="absolute inset-0 z-20 bg-gradient-to-t from-black/90 via-black/20 to-transparent p-8 flex flex-col justify-end pointer-events-none">
|
||||
<h3 className="text-3xl font-bold text-white shadow-black drop-shadow-xl">r/CryptoCurrency</h3>
|
||||
<p className="text-gray-200 shadow-black drop-shadow-md max-w-sm mt-2 font-medium">Governance dashboard for 10M+ members. Real-time DAO metrics.</p>
|
||||
</div>
|
||||
<div className="absolute inset-x-4 inset-y-4 rounded-lg overflow-hidden z-10">
|
||||
<Image
|
||||
src="/images/r-cryptocurrency.png"
|
||||
alt="r/CryptoCurrency"
|
||||
fill
|
||||
className="object-cover object-top opacity-60 transition-transform duration-1000 group-hover:scale-110"
|
||||
sizes="(max-width: 768px) 100vw, 50vw"
|
||||
/>
|
||||
</div>
|
||||
<Image
|
||||
src="/images/r-cryptocurrency.png"
|
||||
alt="r/CryptoCurrency Governance Dashboard"
|
||||
fill
|
||||
className="object-cover opacity-60 transition-transform duration-500 group-hover:scale-105"
|
||||
/>
|
||||
</Card>
|
||||
|
||||
{/* Secondary: Occupy Wallets */}
|
||||
<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 drop-shadow-sm">Occupy Wallets</h3>
|
||||
<p className="text-zinc-800 font-medium drop-shadow-sm">High-fidelity gallery for fiscal graffiti.</p>
|
||||
<Card className="md:col-span-2 relative group overflow-hidden bg-zinc-100/70 backdrop-blur-sm border-0 min-h-[300px]">
|
||||
<div className="absolute inset-0 z-20 p-8 flex flex-col justify-center items-center text-center pointer-events-none">
|
||||
<h3 className="text-2xl font-bold text-zinc-900 drop-shadow-sm bg-white/60 backdrop-blur-md rounded-xl px-6 py-2">Occupy Wallets</h3>
|
||||
<p className="text-zinc-900 font-bold drop-shadow-sm bg-white/60 backdrop-blur-md rounded-xl px-6 py-2 mt-4">High-fidelity gallery for fiscal graffiti.</p>
|
||||
</div>
|
||||
<div className="absolute inset-x-4 inset-y-4 rounded-lg overflow-hidden z-10">
|
||||
<Image
|
||||
src="/images/occupy-wallets.png"
|
||||
alt="Occupy Wallets"
|
||||
fill
|
||||
className="object-cover object-top opacity-50 transition-transform duration-1000 group-hover:scale-110"
|
||||
sizes="(max-width: 768px) 100vw, 50vw"
|
||||
/>
|
||||
</div>
|
||||
<Image
|
||||
src="/images/occupy-wallets.png"
|
||||
alt="Occupy Wallets Gallery"
|
||||
fill
|
||||
className="object-cover opacity-40 transition-transform duration-500 group-hover:scale-105"
|
||||
/>
|
||||
</Card>
|
||||
|
||||
{/* Tertiary: Monerogue & Wowne.ro (Grouped) */}
|
||||
<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="absolute inset-0 z-10 p-6 bg-gradient-to-br from-background/90 to-transparent">
|
||||
<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 min-h-[300px]">
|
||||
<div className="absolute inset-x-0 top-0 z-20 p-6 bg-gradient-to-b from-background/95 to-transparent pointer-events-none">
|
||||
<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 text-foreground">
|
||||
<li className="flex items-center gap-2">Monerogue <span className="text-xs opacity-50">(Game)</span></li>
|
||||
<li className="flex items-center gap-2">Wowne.ro <span className="text-xs opacity-50">(WASM)</span></li>
|
||||
<ul className="mt-2 space-y-1 text-sm text-foreground font-semibold">
|
||||
<li className="flex items-center gap-2">Monerogue <span className="text-xs opacity-60">(Game)</span></li>
|
||||
<li className="flex items-center gap-2">Wowne.ro <span className="text-xs opacity-60">(WASM)</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<Image
|
||||
src="/images/privacy-labs.png"
|
||||
alt="Privacy Labs Projects"
|
||||
fill
|
||||
className="object-cover opacity-30 transition-transform duration-500 group-hover:scale-105"
|
||||
/>
|
||||
<div className="absolute inset-x-4 bottom-4 top-24 rounded-lg overflow-hidden z-10 border border-orange-500/20 shadow-lg">
|
||||
<Image
|
||||
src="/images/privacy-labs.png"
|
||||
alt="Privacy Labs"
|
||||
fill
|
||||
className="object-cover object-top opacity-40 transition-transform duration-1000 group-hover:scale-110"
|
||||
sizes="(max-width: 768px) 100vw, 25vw"
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Quaternary: MoonPlace */}
|
||||
<Card className="md:col-span-1 relative group overflow-hidden bg-indigo-50/70 dark:bg-indigo-950/70 border-indigo-500/20 backdrop-blur-sm">
|
||||
<div className="absolute inset-0 z-10 p-6 bg-gradient-to-br from-background/90 to-transparent">
|
||||
<Card className="md:col-span-1 relative group overflow-hidden bg-indigo-50/70 dark:bg-indigo-950/70 border-indigo-500/20 backdrop-blur-sm min-h-[300px]">
|
||||
<div className="absolute inset-x-0 top-0 z-20 p-6 bg-gradient-to-b from-background/95 to-transparent pointer-events-none">
|
||||
<h3 className="text-xl font-bold text-indigo-700 dark:text-indigo-400">MoonPlace</h3>
|
||||
<p className="text-sm mt-2 text-foreground">Collaborative pixel canvas engine.</p>
|
||||
<p className="text-sm mt-1 text-foreground font-semibold">Collaborative pixel canvas engine.</p>
|
||||
</div>
|
||||
<Image
|
||||
src="/images/moonplace.png"
|
||||
alt="MoonPlace Pixel Canvas"
|
||||
fill
|
||||
className="object-cover opacity-30 transition-transform duration-500 group-hover:scale-105"
|
||||
/>
|
||||
<div className="absolute inset-x-4 bottom-4 top-24 rounded-lg overflow-hidden z-10 border border-indigo-500/20 shadow-lg">
|
||||
<Image
|
||||
src="/images/moonplace.png"
|
||||
alt="MoonPlace"
|
||||
fill
|
||||
className="object-cover object-top opacity-40 transition-transform duration-1000 group-hover:scale-110"
|
||||
sizes="(max-width: 768px) 100vw, 25vw"
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
</section>
|
||||
);
|
||||
};
|
||||
+5
-2
@@ -9,13 +9,16 @@
|
||||
"format": "prettier --write \"**/*.{ts,tsx,md}\""
|
||||
},
|
||||
"devDependencies": {
|
||||
"turbo": "latest",
|
||||
"prettier": "^3.2.0",
|
||||
"eslint": "^9.0.0",
|
||||
"prettier": "^3.2.0",
|
||||
"turbo": "latest",
|
||||
"typescript": "^5.4.0"
|
||||
},
|
||||
"packageManager": "pnpm@9.0.0",
|
||||
"engines": {
|
||||
"node": ">=20.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@types/react": "^18.0.0"
|
||||
}
|
||||
}
|
||||
@@ -13,6 +13,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@radix-ui/react-slot": "^1.2.4",
|
||||
"@types/react": "^18.0.0",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "^2.1.0",
|
||||
"framer-motion": "^11.0.0",
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
'use client';
|
||||
|
||||
import { motion, useAnimation } from "framer-motion";
|
||||
import { useEffect, useState, useCallback } from "react";
|
||||
import { motion, useAnimation, useScroll, useTransform } from "framer-motion";
|
||||
import { useEffect, useState, useCallback, useMemo } from "react";
|
||||
import { cn } from "../lib/utils";
|
||||
import { Monitor } from "lucide-react";
|
||||
|
||||
interface NebulaProps {
|
||||
className?: string;
|
||||
density?: number;
|
||||
themeMode?: 'light' | 'dark'; // customized prop
|
||||
themeMode?: 'light' | 'dark';
|
||||
}
|
||||
|
||||
interface StreamLineProps {
|
||||
@@ -24,27 +24,35 @@ const StreamLine = ({ d, themeMode, onHit, width }: StreamLineProps) => {
|
||||
useEffect(() => {
|
||||
let isMounted = true;
|
||||
const animate = async () => {
|
||||
// Random initial delay
|
||||
// Staggered start delay (0-4s)
|
||||
await new Promise(resolve => setTimeout(resolve, Math.random() * 4000));
|
||||
|
||||
while (isMounted) {
|
||||
const duration = 2 + Math.random() * 4;
|
||||
const duration = 10 + Math.random() * 8; // Slow streamers
|
||||
|
||||
controls.set({ pathLength: 0, opacity: 0 });
|
||||
// Ensure starting state is definitely 0
|
||||
controls.set({ pathLength: 0, pathOffset: 0, opacity: 0 });
|
||||
|
||||
// Trigger onHit when the tip reaches the end (at 75% of duration)
|
||||
const hitTimeout = setTimeout(() => {
|
||||
if (isMounted) onHit();
|
||||
}, duration * 750);
|
||||
|
||||
await controls.start({
|
||||
pathLength: [0, 1],
|
||||
opacity: [0, 1, 1, 0],
|
||||
pathLength: [0, 0.25, 0.25, 0],
|
||||
pathOffset: [0, 0, 0.75, 1],
|
||||
opacity: [0, 0.5, 0.5, 0],
|
||||
transition: {
|
||||
duration,
|
||||
ease: "easeInOut",
|
||||
times: [0, 0.1, 0.9, 1]
|
||||
ease: "linear",
|
||||
times: [0, 0.25, 0.75, 1]
|
||||
}
|
||||
});
|
||||
|
||||
if (isMounted) onHit();
|
||||
clearTimeout(hitTimeout);
|
||||
|
||||
await new Promise(resolve => setTimeout(resolve, Math.random() * 2000));
|
||||
// Continuous flow with small pause
|
||||
await new Promise(resolve => setTimeout(resolve, 1000 + Math.random() * 2000));
|
||||
}
|
||||
};
|
||||
animate();
|
||||
@@ -57,57 +65,74 @@ const StreamLine = ({ d, themeMode, onHit, width }: StreamLineProps) => {
|
||||
stroke="currentColor"
|
||||
strokeWidth={width}
|
||||
fill="none"
|
||||
initial={{ pathLength: 0, pathOffset: 0, opacity: 0 }}
|
||||
animate={controls}
|
||||
className={cn(
|
||||
"transition-colors duration-500",
|
||||
themeMode === 'light' ? "text-slate-400" : "text-emerald-500"
|
||||
"transition-colors duration-1000",
|
||||
themeMode === 'light' ? "text-slate-300" : "text-emerald-500/50"
|
||||
)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export const NebulaField = ({ className, density = 20, themeMode = 'dark' }: NebulaProps) => {
|
||||
const [paths, setPaths] = useState<string[]>([]);
|
||||
export const NebulaField = ({ className, density = 8, themeMode = 'dark' }: NebulaProps) => {
|
||||
const [mounted, setMounted] = useState(false);
|
||||
const monitorControls = useAnimation();
|
||||
const [monitorColor, setMonitorColor] = useState(themeMode === 'light' ? "text-slate-400" : "text-emerald-500");
|
||||
|
||||
// Configuration for convergence point (percent of container)
|
||||
const targetX = 25; // moved right
|
||||
const targetY = 20; // moved up
|
||||
|
||||
// Sync color with theme if no impacts have happened yet
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
const newPaths = Array.from({ length: density }).map(() => {
|
||||
// Determine random edge start point
|
||||
const edge = Math.floor(Math.random() * 4); // 0: top, 1: right, 2: bottom, 3: left
|
||||
setMonitorColor(themeMode === 'light' ? "text-slate-300" : "text-emerald-500/50");
|
||||
}, [themeMode]);
|
||||
|
||||
// Parallax Scroll for Computer Icon
|
||||
const { scrollY } = useScroll();
|
||||
const yRange = useTransform(scrollY, [0, 1000], [0, 200]);
|
||||
|
||||
// Configuration for convergence point
|
||||
const targetX = 25;
|
||||
const targetY = 20;
|
||||
|
||||
const paths = useMemo(() => {
|
||||
return Array.from({ length: density }).map(() => {
|
||||
const edge = Math.floor(Math.random() * 4);
|
||||
let startX = 50, startY = 50;
|
||||
|
||||
// Push start point well outside viewbox to ensure full coverage
|
||||
switch(edge) {
|
||||
case 0: startX = Math.random() * 100; startY = -20; break; // Top
|
||||
case 1: startX = 120; startY = Math.random() * 100; break; // Right
|
||||
case 2: startX = Math.random() * 100; startY = 120; break; // Bottom
|
||||
case 3: startX = -20; startY = Math.random() * 100; break; // Left
|
||||
case 0: startX = Math.random() * 100; startY = -20; break;
|
||||
case 1: startX = 120; startY = Math.random() * 100; break;
|
||||
case 2: startX = Math.random() * 100; startY = 120; break;
|
||||
case 3: startX = -20; startY = Math.random() * 100; break;
|
||||
}
|
||||
|
||||
// End at target point with small variance
|
||||
const endX = targetX + (Math.random() - 0.5) * 5;
|
||||
const endY = targetY + (Math.random() - 0.5) * 5;
|
||||
|
||||
// Control point for curve
|
||||
const endX = targetX + (Math.random() - 0.5) * 4;
|
||||
const endY = targetY + (Math.random() - 0.5) * 4;
|
||||
const cpX = (startX + endX) / 2 + (Math.random() - 0.5) * 50;
|
||||
const cpY = (startY + endY) / 2 + (Math.random() - 0.5) * 50;
|
||||
|
||||
return `M ${startX} ${startY} Q ${cpX} ${cpY} ${endX} ${endY}`;
|
||||
});
|
||||
setPaths(newPaths);
|
||||
}, [density]); // Removed targetX/Y dep as constant
|
||||
}, [density, themeMode]); // Regenerate on theme switch
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
}, []);
|
||||
|
||||
const handleHit = useCallback(() => {
|
||||
const colors = [
|
||||
"text-emerald-500", "text-blue-500", "text-purple-500",
|
||||
"text-indigo-500", "text-cyan-500", "text-rose-500", "text-amber-500"
|
||||
];
|
||||
setMonitorColor(colors[Math.floor(Math.random() * colors.length)]);
|
||||
|
||||
monitorControls.start({
|
||||
scale: [1, 1.15, 1],
|
||||
filter: ["brightness(1)", "brightness(1.5)", "brightness(1)"],
|
||||
transition: { duration: 0.3 }
|
||||
scale: [1, 1.2, 1],
|
||||
filter: [
|
||||
"brightness(1) drop-shadow(0 0 0px rgba(0,0,0,0))",
|
||||
"brightness(1.5) drop-shadow(0 0 20px currentColor)",
|
||||
"brightness(1) drop-shadow(0 0 0px rgba(0,0,0,0))"
|
||||
],
|
||||
transition: { duration: 4, ease: "easeInOut" }
|
||||
});
|
||||
}, [monitorControls]);
|
||||
|
||||
@@ -116,17 +141,20 @@ export const NebulaField = ({ className, density = 20, themeMode = 'dark' }: Neb
|
||||
return (
|
||||
<div className={cn("absolute inset-0 overflow-hidden pointer-events-none z-0", className)}>
|
||||
|
||||
{/* "Computer" Icon positioned via inline styles to match physics target exactly */}
|
||||
<motion.div
|
||||
className="absolute -translate-x-1/2 -translate-y-1/2 z-10 opacity-30 dark:opacity-50"
|
||||
style={{ left: `${targetX}%`, top: `${targetY}%` }}
|
||||
className="absolute -translate-x-1/2 -translate-y-1/2 z-20 opacity-40 dark:opacity-60"
|
||||
style={{
|
||||
left: `${targetX}%`,
|
||||
top: `${targetY}%`,
|
||||
y: yRange
|
||||
}}
|
||||
animate={monitorControls}
|
||||
>
|
||||
<Monitor
|
||||
size={64}
|
||||
className={cn(
|
||||
"transition-colors duration-1000",
|
||||
themeMode === 'light' ? "text-slate-400" : "text-emerald-500"
|
||||
"transition-colors duration-2000",
|
||||
monitorColor
|
||||
)}
|
||||
/>
|
||||
</motion.div>
|
||||
@@ -134,18 +162,18 @@ export const NebulaField = ({ className, density = 20, themeMode = 'dark' }: Neb
|
||||
<svg
|
||||
viewBox="0 0 100 100"
|
||||
preserveAspectRatio="none"
|
||||
className="w-full h-full opacity-60 dark:opacity-80 absolute inset-0"
|
||||
className="w-full h-full opacity-40 dark:opacity-70 absolute inset-0"
|
||||
>
|
||||
{paths.map((d, i) => (
|
||||
{paths.map((d: string, i: number) => (
|
||||
<StreamLine
|
||||
key={i}
|
||||
key={`${themeMode}-${i}`}
|
||||
d={d}
|
||||
themeMode={themeMode}
|
||||
onHit={handleHit}
|
||||
width={themeMode === 'light' ? 0.1 : 0.2}
|
||||
width={themeMode === 'light' ? 0.05 : 0.15}
|
||||
/>
|
||||
))}
|
||||
</svg>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
};
|
||||
|
||||
Generated
+7
@@ -7,6 +7,10 @@ settings:
|
||||
importers:
|
||||
|
||||
.:
|
||||
dependencies:
|
||||
'@types/react':
|
||||
specifier: ^18.0.0
|
||||
version: 18.3.27
|
||||
devDependencies:
|
||||
eslint:
|
||||
specifier: ^9.0.0
|
||||
@@ -105,6 +109,9 @@ importers:
|
||||
'@radix-ui/react-slot':
|
||||
specifier: ^1.2.4
|
||||
version: 1.2.4(@types/react@18.3.27)(react@18.3.1)
|
||||
'@types/react':
|
||||
specifier: ^18.0.0
|
||||
version: 18.3.27
|
||||
class-variance-authority:
|
||||
specifier: ^0.7.1
|
||||
version: 0.7.1
|
||||
|
||||
Reference in New Issue
Block a user