mmintel/mintel.me
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(branding): implement hand-drawn Copic marker, strikethrough, and pen circle effects; redesign guarantee section with animated signature

Browse Source
This commit is contained in:
Marc Mintel
2026-02-16 21:31:28 +01:00
parent 9cfe7ee9e5
commit 24f8772a31
10 changed files with 578 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
apps/web/src/components/Effects/ArchitectureVisualizer.tsx
View File

@@ -59,19 +59,24 @@ const Node: React.FC<{
);
const Connector: React.FC<{ active?: boolean }> = ({ active }) => (
<div className="flex-1 w-px md:w-auto h-8 md:h-[1px] bg-slate-100 relative min-h-[20px] md:min-w-[40px] shrink-0">
<div className="flex-1 w-px md:w-auto h-8 md:h-[1px] bg-slate-50 relative min-h-[24px] md:min-h-0 md:min-w-[40px] shrink-0">
{active && (
<motion.div
initial={{ scaleX: 0, scaleY: 0 }}
animate={{ scaleX: 1, scaleY: 1 }}
className="absolute inset-0 bg-blue-300 origin-top md:origin-left"
className="absolute inset-0 bg-blue-300/50 origin-top md:origin-left mix-blend-multiply"
style={{
// Visual correction to prevent sub-pixel rendering thickening
height: "100%",
width: "100%",
}}
/>
)}
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
<div
className={cn(
"w-1 h-1 rounded-full",
active ? "bg-blue-300 animate-pulse" : "bg-slate-100",
"w-1 h-1 rounded-full border border-white", // Added border white to make it look smaller/cleaner
active ? "bg-blue-400 animate-pulse scale-75" : "bg-slate-100", // Reduced scale and deeper color
)}
/>
</div>