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 logo animation

Browse Source
This commit is contained in:
Marc Mintel
2026-02-16 21:31:53 +01:00
parent 24f8772a31
commit 7fd0c447bc
1 changed files with 15 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
apps/web/src/components/Signature.tsx
View File

@@ -3,6 +3,8 @@
import React from "react";
import { motion } from "framer-motion";
import { cn } from "../utils/cn";
import Image from "next/image";
import LogoBlack from "../assets/logo/Logo Black Transparent.svg";
interface SignatureProps {
className?: string;
@@ -14,52 +16,21 @@ export const Signature: React.FC<SignatureProps> = ({
delay = 0,
}) => {
return (
<div className={cn("relative text-slate-900", className)}>
<svg
width="200"
height="100"
viewBox="0 0 200 100"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className="w-full h-auto"
<div className={cn("relative", className)}>
<motion.div
initial={{ clipPath: "polygon(0 0, 0 0, 0 100%, 0% 100%)" }}
whileInView={{ clipPath: "polygon(0 0, 100% 0, 100% 100%, 0% 100%)" }}
viewport={{ once: true }}
transition={{ duration: 2.5, delay: delay, ease: "easeInOut" }}
className="relative"
>
{/* M */}
<motion.path
d="M20 50 C 25 30, 30 20, 40 25 C 45 35, 30 60, 25 70 C 20 80, 40 50, 50 40 C 60 30, 70 30, 60 55 C 55 65, 50 75, 65 70"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
initial={{ pathLength: 0, opacity: 0 }}
whileInView={{ pathLength: 1, opacity: 1 }}
viewport={{ once: true }}
transition={{ duration: 0.8, delay: delay, ease: "easeInOut" }}
<Image
src={LogoBlack}
alt="Marc Mintel Signature"
className="w-full h-auto opacity-90"
priority
/>
{/* a r c (scribble) */}
<motion.path
d="M65 70 C 75 65, 80 60, 90 70 C 95 75, 85 80, 80 75 C 75 70, 95 65, 100 70 C 105 75, 110 70, 120 65"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
initial={{ pathLength: 0, opacity: 0 }}
whileInView={{ pathLength: 1, opacity: 1 }}
viewport={{ once: true }}
transition={{ duration: 0.6, delay: delay + 0.6, ease: "easeInOut" }}
/>
{/* Mintel (scribble + underline) */}
<motion.path
d="M130 50 C 135 40, 140 30, 150 40 C 160 50, 140 80, 130 90 C 120 100, 180 80, 190 75"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
initial={{ pathLength: 0, opacity: 0 }}
whileInView={{ pathLength: 1, opacity: 1 }}
viewport={{ once: true }}
transition={{ duration: 0.8, delay: delay + 1.0, ease: "easeInOut" }}
/>
</svg>
<div className="mt-2 font-serif italic text-sm text-slate-500">
Marc Mintel
</div>
</motion.div>
</div>
);
};