feat: Update image (compressed)
This commit is contained in:
Binary file not shown.
|
Before Width: | Height: | Size: 471 KiB |
BIN
public/img/operator.webp
Normal file
BIN
public/img/operator.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 100 KiB |
@@ -4,118 +4,118 @@ import { HeroTitle } from './HeroTitle';
|
||||
import './prism/styles.css';
|
||||
|
||||
type HeroSectionProps = {
|
||||
activeThemeName: string;
|
||||
hasClickedThemePill: boolean;
|
||||
showThemePillTooltip: boolean;
|
||||
onThemePillClick: () => void;
|
||||
cpuModeEnabled: boolean;
|
||||
activeThemeName: string;
|
||||
hasClickedThemePill: boolean;
|
||||
showThemePillTooltip: boolean;
|
||||
onThemePillClick: () => void;
|
||||
cpuModeEnabled: boolean;
|
||||
};
|
||||
|
||||
export function HeroSection({
|
||||
activeThemeName,
|
||||
hasClickedThemePill,
|
||||
showThemePillTooltip,
|
||||
onThemePillClick,
|
||||
cpuModeEnabled,
|
||||
activeThemeName,
|
||||
hasClickedThemePill,
|
||||
showThemePillTooltip,
|
||||
onThemePillClick,
|
||||
cpuModeEnabled,
|
||||
}: HeroSectionProps) {
|
||||
return (
|
||||
<header className="flex flex-col md:flex-row gap-12 items-center justify-between relative">
|
||||
<div className="relative space-y-6 max-w-2xl">
|
||||
<div className="absolute inset-x-0 -top-10 flex justify-end md:hidden -z-10">
|
||||
<div className="relative w-48 h-56 sketch-border bg-(--bg-panel) transform rotate-3 opacity-70">
|
||||
<div
|
||||
className="absolute inset-2 border-2 border-dashed border-(--border-main) overflow-hidden"
|
||||
style={{
|
||||
WebkitMaskImage: 'linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 30%, rgba(0, 0, 0, 1) 85%)',
|
||||
maskImage: 'linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 30%, rgba(0, 0, 0, 1) 85%)',
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src="/img/operator.jpg"
|
||||
alt="Operator portrait"
|
||||
className="h-full w-full object-cover filter grayscale contrast-125 brightness-90"
|
||||
loading="lazy"
|
||||
/>
|
||||
<div
|
||||
className="absolute inset-0 opacity-70"
|
||||
style={{
|
||||
background: 'linear-gradient(135deg, transparent 10%, var(--color-accent) 100%)',
|
||||
mixBlendMode: 'multiply',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
className="absolute inset-0 opacity-55"
|
||||
style={{
|
||||
background: 'var(--color-accent)',
|
||||
mixBlendMode: 'color',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={`relative inline-flex mb-4 ${hasClickedThemePill ? '' : 'animate-bounce'}`}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onThemePillClick}
|
||||
className={`inline-flex items-center gap-2 px-4 py-1.5 sketch-border bg-(--bg-surface) text-xs transform -rotate-1 cursor-pointer select-none ${hasClickedThemePill ? '' : 'animate-[pill-glow_2s_ease-in-out_infinite]'}`}
|
||||
aria-label="Theme pill"
|
||||
>
|
||||
<TriangleAlert className="w-3 h-3 accent-text" />
|
||||
<span className="font-sketch text-sm">YOU GET: <span className="text-(--text-main)">{activeThemeName}</span></span>
|
||||
</button>
|
||||
|
||||
{showThemePillTooltip}
|
||||
</div>
|
||||
<div className="md:hidden">
|
||||
<HeroTitle />
|
||||
</div>
|
||||
|
||||
<div className="hidden md:block">
|
||||
{cpuModeEnabled ? <HeroTitle /> : <RevolvingPrism />}
|
||||
</div>
|
||||
<p className="text-md text-(--text-muted) leading-relaxed max-w-xl font-mono">
|
||||
Systems engineer in the making. From window managers and game engines to self-hosted infrastructure.
|
||||
</p>
|
||||
<div className="md:hidden">
|
||||
<div className="sketch-border bg-(--bg-panel) px-4 py-3 text-sm text-(--text-muted) font-mono max-w-sm flex items-start gap-2">
|
||||
<LaptopMinimalCheck className="h-4 w-4 mt-0.5 text-(--color-accent) animate-pulse" />
|
||||
<span>This looks a lot cooler on bigger screens.</span>
|
||||
</div>
|
||||
</div>
|
||||
return (
|
||||
<header className="flex flex-col md:flex-row gap-12 items-center justify-between relative">
|
||||
<div className="relative space-y-6 max-w-2xl">
|
||||
<div className="absolute inset-x-0 -top-10 flex justify-end md:hidden -z-10">
|
||||
<div className="relative w-48 h-56 sketch-border bg-(--bg-panel) transform rotate-3 opacity-70">
|
||||
<div
|
||||
className="absolute inset-2 border-2 border-dashed border-(--border-main) overflow-hidden"
|
||||
style={{
|
||||
WebkitMaskImage: 'linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 30%, rgba(0, 0, 0, 1) 85%)',
|
||||
maskImage: 'linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 30%, rgba(0, 0, 0, 1) 85%)',
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src="/img/operator.webp"
|
||||
alt="Operator portrait"
|
||||
className="h-full w-full object-cover filter grayscale contrast-125 brightness-90"
|
||||
loading="lazy"
|
||||
/>
|
||||
<div
|
||||
className="absolute inset-0 opacity-70"
|
||||
style={{
|
||||
background: 'linear-gradient(135deg, transparent 10%, var(--color-accent) 100%)',
|
||||
mixBlendMode: 'multiply',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
className="absolute inset-0 opacity-55"
|
||||
style={{
|
||||
background: 'var(--color-accent)',
|
||||
mixBlendMode: 'color',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={`relative inline-flex mb-4 ${hasClickedThemePill ? '' : 'animate-bounce'}`}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onThemePillClick}
|
||||
className={`inline-flex items-center gap-2 px-4 py-1.5 sketch-border bg-(--bg-surface) text-xs transform -rotate-1 cursor-pointer select-none ${hasClickedThemePill ? '' : 'animate-[pill-glow_2s_ease-in-out_infinite]'}`}
|
||||
aria-label="Theme pill"
|
||||
>
|
||||
<TriangleAlert className="w-3 h-3 accent-text" />
|
||||
<span className="font-sketch text-sm">YOU GET: <span className="text-(--text-main)">{activeThemeName}</span></span>
|
||||
</button>
|
||||
|
||||
<div className="hidden md:flex relative w-48 h-56 sm:w-64 sm:h-72 shrink-0 sketch-border bg-(--bg-panel) transform rotate-3 hover:rotate-0 transition-transform duration-500 group flex-col items-center justify-center mt-8 md:mt-0">
|
||||
<div className="absolute -top-3 -right-4 w-12 h-6 bg-(--color-accent-muted) transform rotate-45 opacity-60 backdrop-blur-sm sketch-border-subtle border-none" />
|
||||
<div className="absolute -bottom-3 -left-4 w-12 h-6 bg-(--color-accent-muted) transform rotate-45 opacity-60 backdrop-blur-sm sketch-border-subtle border-none" />
|
||||
{showThemePillTooltip}
|
||||
</div>
|
||||
<div className="md:hidden">
|
||||
<HeroTitle />
|
||||
</div>
|
||||
|
||||
<div className="absolute inset-2 border-2 border-dashed border-(--border-main) overflow-hidden">
|
||||
<img
|
||||
src="/img/operator.jpg"
|
||||
alt="Operator portrait"
|
||||
className="h-full w-full object-cover filter grayscale contrast-125 brightness-90"
|
||||
loading="lazy"
|
||||
/>
|
||||
<div
|
||||
className="absolute inset-0 opacity-70"
|
||||
style={{
|
||||
background: 'linear-gradient(135deg, transparent 10%, var(--color-accent) 100%)',
|
||||
mixBlendMode: 'multiply',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
className="absolute inset-0 opacity-55"
|
||||
style={{
|
||||
background: 'var(--color-accent)',
|
||||
mixBlendMode: 'color',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="hidden md:block">
|
||||
{cpuModeEnabled ? <HeroTitle /> : <RevolvingPrism />}
|
||||
</div>
|
||||
<p className="text-md text-(--text-muted) leading-relaxed max-w-xl font-mono">
|
||||
Systems engineer in the making. From window managers and game engines to self-hosted infrastructure.
|
||||
</p>
|
||||
<div className="md:hidden">
|
||||
<div className="sketch-border bg-(--bg-panel) px-4 py-3 text-sm text-(--text-muted) font-mono max-w-sm flex items-start gap-2">
|
||||
<LaptopMinimalCheck className="h-4 w-4 mt-0.5 text-(--color-accent) animate-pulse" />
|
||||
<span>This looks a lot cooler on bigger screens.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="absolute -bottom-8 -left-12 font-sketch text-xs accent-text -rotate-15 hidden md:flex items-center gap-2 opacity-80">
|
||||
<span className="whitespace-nowrap">the operator</span>
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="transform -scale-y-100 rotate-45"><path d="M5 12h14" /><path d="m12 5 7 7-7 7" /></svg>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
<div className="hidden md:flex relative w-48 h-56 sm:w-64 sm:h-72 shrink-0 sketch-border bg-(--bg-panel) transform rotate-3 hover:rotate-0 transition-transform duration-500 group flex-col items-center justify-center mt-8 md:mt-0">
|
||||
<div className="absolute -top-3 -right-4 w-12 h-6 bg-(--color-accent-muted) transform rotate-45 opacity-60 backdrop-blur-sm sketch-border-subtle border-none" />
|
||||
<div className="absolute -bottom-3 -left-4 w-12 h-6 bg-(--color-accent-muted) transform rotate-45 opacity-60 backdrop-blur-sm sketch-border-subtle border-none" />
|
||||
|
||||
<div className="absolute inset-2 border-2 border-dashed border-(--border-main) overflow-hidden">
|
||||
<img
|
||||
src="/img/operator.webp"
|
||||
alt="Operator portrait"
|
||||
className="h-full w-full object-cover filter grayscale contrast-125 brightness-90"
|
||||
loading="lazy"
|
||||
/>
|
||||
<div
|
||||
className="absolute inset-0 opacity-70"
|
||||
style={{
|
||||
background: 'linear-gradient(135deg, transparent 10%, var(--color-accent) 100%)',
|
||||
mixBlendMode: 'multiply',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
className="absolute inset-0 opacity-55"
|
||||
style={{
|
||||
background: 'var(--color-accent)',
|
||||
mixBlendMode: 'color',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="absolute -bottom-8 -left-12 font-sketch text-xs accent-text -rotate-15 hidden md:flex items-center gap-2 opacity-80">
|
||||
<span className="whitespace-nowrap">the operator</span>
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="transform -scale-y-100 rotate-45"><path d="M5 12h14" /><path d="m12 5 7 7-7 7" /></svg>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user