feat: binary glow effects, refined drawings and calls to action
Dark surfaces now carry light: frames glow along their edge and shed binary digits (BitAura), dark sections open with a lit seam (BitSeam), the career path is a line of light and "My work" became a dark stage. Buttons carry a travelling light and a spot that follows the pointer (BitGlow). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
@@ -1,5 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import { BitSeam } from "@/src/components/bits/BitSeam";
|
||||
import * as React from "react";
|
||||
import Image from "next/image";
|
||||
import { motion } from "framer-motion";
|
||||
@@ -32,12 +33,14 @@ export const PortraitSection: React.FC<{
|
||||
>
|
||||
<Image
|
||||
src="/marc-mintel.png"
|
||||
alt="Portrait of Marc Mintel"
|
||||
alt="Marc Mintel, freelance web developer"
|
||||
fill
|
||||
sizes="(min-width: 768px) 62vw, 100vw"
|
||||
className="object-cover object-[50%_18%] grayscale"
|
||||
priority={false}
|
||||
/>
|
||||
{/* Slow light behind the fades, so the dark surface is not flat. */}
|
||||
<div className="bit-aurora" aria-hidden="true" />
|
||||
{/* Fades: into the surface on the left, and at top and bottom. */}
|
||||
<div className="absolute inset-0 hidden bg-gradient-to-r from-slate-900 via-slate-900/75 to-slate-900/10 md:block" />
|
||||
<div className="absolute inset-x-0 bottom-0 h-2/5 bg-gradient-to-t from-slate-900 to-transparent" />
|
||||
@@ -72,5 +75,6 @@ export const PortraitSection: React.FC<{
|
||||
<div className="mt-10 md:mt-14">{children}</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
<BitSeam density={1} />
|
||||
</section>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user