Profile 03

import { MoreHorizontalIcon, PencilIcon } from "lucide-react";
import type { SVGProps } from "react";
import { Avatar, AvatarFallback, AvatarImage } from "@/registry/bases/radix/ui/avatar";
import { Button } from "@/registry/bases/radix/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/registry/bases/radix/ui/dropdown-menu";
import { Tabs, TabsList, TabsTrigger } from "@/registry/bases/radix/ui/tabs";
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/registry/bases/radix/ui/tooltip";

export default function Profile() {
  return (
    <div className="min-h-dvh bg-muted/50 px-6 py-10">
      <div className="mx-auto w-full max-w-2xl border bg-background">
        <div className="relative border-b border-dashed p-3">
          <div className="overflow-hidden p-3">
            <div
              className="absolute inset-0 -top-px z-0"
              style={{
                backgroundImage: `
        linear-gradient(to right, var(--border) 1px, transparent 1px),
        linear-gradient(to bottom, var(--border) 1px, transparent 1px)
      `,
                backgroundSize: "20px 20px",
                backgroundPosition: "0 0, 0 0",
                maskImage: `
          repeating-linear-gradient(
              to right,
              black 0px,
              black 3px,
              transparent 3px,
              transparent 8px
            ),
            repeating-linear-gradient(
              to bottom,
              black 0px,
              black 3px,
              transparent 3px,
              transparent 8px
            ),
            radial-gradient(ellipse 80% 80% at 100% 0%, #000 50%, transparent 90%)
      `,
                WebkitMaskImage: `
    repeating-linear-gradient(
              to right,
              black 0px,
              black 3px,
              transparent 3px,
              transparent 8px
            ),
            repeating-linear-gradient(
              to bottom,
              black 0px,
              black 3px,
              transparent 3px,
              transparent 8px
            ),
            radial-gradient(ellipse 80% 80% at 100% 0%, #000 50%, transparent 90%)
      `,
                maskComposite: "intersect",
                WebkitMaskComposite: "source-in",
              }}
            />

            <Tooltip>
              <TooltipTrigger asChild>
                <Button
                  className="absolute top-4 right-4 z-1"
                  size="icon"
                  variant="outline"
                >
                  <PencilIcon className="size-4" />
                </Button>
              </TooltipTrigger>
              <TooltipContent>Edit Profile</TooltipContent>
            </Tooltip>

            <div className="relative isolate flex flex-col">
              <div className="mb-5 flex items-center gap-4">
                <Avatar className="size-24 border">
                  <AvatarImage
                    alt="User avatar"
                    src="https://github.com/shadcn.png"
                  />
                  <AvatarFallback className="font-medium text-2xl">
                    CN
                  </AvatarFallback>
                </Avatar>
              </div>
              <span className="font-medium text-xl tracking-tight">
                John Doe
              </span>
              <span className="text-muted-foreground">
                john.doe@example.com
              </span>

              <div className="mt-5 flex w-full items-center gap-2">
                <Button>Hire Me</Button>
                <Button size="icon" variant="secondary">
                  <X className="size-4!" />
                </Button>
                <Button size="icon" variant="secondary">
                  <DailyDev className="size-5.5!" />
                </Button>
                <Button size="icon" variant="secondary">
                  <Bluesky />
                </Button>
                <DropdownMenu>
                  <DropdownMenuTrigger asChild>
                    <Button size="icon" variant="secondary">
                      <MoreHorizontalIcon />
                    </Button>
                  </DropdownMenuTrigger>
                  <DropdownMenuContent className="w-fit">
                    <DropdownMenuItem>
                      <Hashnode />
                      Follow on Hashnode
                    </DropdownMenuItem>
                    <DropdownMenuItem>
                      <Peerlist />
                      Follow on Peerlist
                    </DropdownMenuItem>
                    <DropdownMenuItem>
                      <Reddit />
                      Follow on Reddit
                    </DropdownMenuItem>
                  </DropdownMenuContent>
                </DropdownMenu>
              </div>
            </div>
          </div>
        </div>

        <div>
          <Tabs
            className="border-b border-dashed px-3 py-2"
            defaultValue="projects"
          >
            <TabsList className="*:px-3">
              <TabsTrigger value="projects">Projects</TabsTrigger>
              <TabsTrigger value="about">About</TabsTrigger>
              <TabsTrigger value="experience">Contact</TabsTrigger>
            </TabsList>
          </Tabs>
          <Projects />
        </div>
      </div>
    </div>
  );
}

const Projects = () => {
  return (
    <div className="grid grid-cols-1 gap-4 p-3 *:h-72 sm:grid-cols-2">
      {projects.map((project) => (
        <div
          className="relative flex flex-col overflow-hidden rounded-xl border border-border/60 bg-background p-1 shadow-[0_0_15px_rgba(0,0,0,0.05)] dark:border-border/85 dark:shadow-[0_0_20px_rgba(0,0,0,0.4)]"
          key={project.name}
        >
          <div className="mask-b-from-50% dark:mask-b-from-10% dark:mask-b-to-70% size-full rounded-lg">
            <img
              alt={project.name}
              className="size-full rounded-lg object-cover"
              src={project.image}
            />
          </div>

          <div className="mask-t-from-50% absolute inset-x-0 bottom-0 rounded-b-xl bg-background/80 p-6 pt-20">
            <h3 className="font-medium text-xl tracking-[-0.005em]">
              {project.name}
            </h3>
            <p className="mt-1.5 text-base text-foreground/90">
              {project.description}
            </p>
          </div>
        </div>
      ))}
    </div>
  );
};

const Bluesky = (props: SVGProps<SVGSVGElement>) => (
  <svg {...props} preserveAspectRatio="xMidYMid" viewBox="0 0 256 226">
    <path
      d="M55.491 15.172c29.35 22.035 60.917 66.712 72.509 90.686 11.592-23.974 43.159-68.651 72.509-90.686C221.686-.727 256-13.028 256 26.116c0 7.818-4.482 65.674-7.111 75.068-9.138 32.654-42.436 40.983-72.057 35.942 51.775 8.812 64.946 38 36.501 67.187-54.021 55.433-77.644-13.908-83.696-31.676-1.11-3.257-1.63-4.78-1.637-3.485-.008-1.296-.527.228-1.637 3.485-6.052 17.768-29.675 87.11-83.696 31.676-28.445-29.187-15.274-58.375 36.5-67.187-29.62 5.041-62.918-3.288-72.056-35.942C4.482 91.79 0 33.934 0 26.116 0-13.028 34.314-.727 55.491 15.172Z"
      fill="currentColor"
    />
  </svg>
);

const X = (props: SVGProps<SVGSVGElement>) => (
  <svg {...props} fill="currentColor" viewBox="0 0 1200 1227">
    <path d="M714.163 519.284 1160.89 0h-105.86L667.137 450.887 357.328 0H0l468.492 681.821L0 1226.37h105.866l409.625-476.152 327.181 476.152H1200L714.137 519.284h.026ZM569.165 687.828l-47.468-67.894-377.686-540.24h162.604l304.797 435.991 47.468 67.894 396.2 566.721H892.476L569.165 687.854v-.026Z" />
  </svg>
);

const DailyDev = (props: SVGProps<SVGSVGElement>) => (
  <svg {...props} viewBox="0 0 40 40">
    <g fill="currentColor" fillRule="evenodd">
      <path
        d="m31.48 19.944-3.533-3.533 1.765-3.531 5.74 5.74a1.873 1.873 0 0 1 0 2.648l-7.065 7.064a1.873 1.873 0 0 1-2.648-2.648l5.74-5.74Z"
        opacity=".56"
      />
      <path d="M25.74 11.548a1.873 1.873 0 0 1 2.649 0l1.324 1.325-15.452 15.452a1.873 1.873 0 0 1-2.649 0l-1.324-1.324L25.74 11.548Zm-6.622 4.857-2.65 2.649-3.532-3.533-4.415 4.416 3.532 3.532-1.765 3.532-5.74-5.74a1.873 1.873 0 0 1 0-2.648l7.064-7.064a1.873 1.873 0 0 1 2.65 0l4.856 4.856Z" />
    </g>
  </svg>
);

const Hashnode = (props: SVGProps<SVGSVGElement>) => (
  <svg {...props} fill="none" viewBox="0 0 1000 1000">
    <path
      clipRule="evenodd"
      d="M68.692 334.16c-91.59 91.589-91.59 240.085 0 331.674L334.16 931.302c91.589 91.588 240.085 91.588 331.674-.001l265.468-265.467c91.588-91.59 91.588-240.085-.001-331.674L665.834 68.692c-91.59-91.59-240.085-91.59-331.674 0L68.692 334.16Zm431.302 330.06c90.694 0 164.216-73.522 164.216-164.216s-73.522-164.216-164.216-164.216-164.216 73.522-164.216 164.216S409.3 664.22 499.994 664.22Z"
      fill="#2563EB"
      fillRule="evenodd"
    />
  </svg>
);

const Peerlist = (props: SVGProps<SVGSVGElement>) => (
  <svg {...props} fill="none" viewBox="0 0 56 56">
    <path
      d="M28 0C6.22222 0 0 6.22222 0 28C0 49.7778 6.23778 56 28 56C49.7622 56 56 49.7778 56 28C56 6.22222 49.7622 0 28 0Z"
      fill="#00AA45"
    />
    <path
      clipRule="evenodd"
      d="M7.24755 7.24755C3.5875 10.9076 2 17.153 2 28C2 38.8461 3.59108 45.0918 7.25306 48.7521C10.9153 52.4127 17.1612 54 28 54C38.8388 54 45.0847 52.4127 48.7469 48.7521C52.4089 45.0918 54 38.8461 54 28C54 17.1539 52.4089 10.9082 48.7469 7.24787C45.0847 3.58733 38.8388 2 28 2C17.153 2 10.9076 3.5875 7.24755 7.24755ZM0 28C0 6.22222 6.22222 0 28 0C49.7622 0 56 6.22222 56 28C56 49.7778 49.7622 56 28 56C6.23778 56 0 49.7778 0 28Z"
      fill="#219653"
      fillRule="evenodd"
    />
    <path
      clipRule="evenodd"
      d="M27.0769 13H15V47H24.3846V39.8889H27.0769C34.7305 39.8889 41 33.9048 41 26.4444C41 18.984 34.7305 13 27.0769 13ZM24.3846 30.7778V22.1111H27.0769C29.6194 22.1111 31.6154 24.0864 31.6154 26.4444C31.6154 28.8024 29.6194 30.7778 27.0769 30.7778H24.3846Z"
      fill="#24292E"
      fillRule="evenodd"
    />
    <path
      clipRule="evenodd"
      d="M18 12H29.0769C36.2141 12 42 17.5716 42 24.4444C42 31.3173 36.2141 36.8889 29.0769 36.8889H25.3846V44H18V12ZM25.3846 29.7778H29.0769C32.1357 29.7778 34.6154 27.39 34.6154 24.4444C34.6154 21.4989 32.1357 19.1111 29.0769 19.1111H25.3846V29.7778Z"
      fill="white"
      fillRule="evenodd"
    />
    <path
      clipRule="evenodd"
      d="M17 11H29.0769C36.7305 11 43 16.984 43 24.4444C43 31.9048 36.7305 37.8889 29.0769 37.8889H26.3846V45H17V11ZM19 13V43H24.3846V35.8889H29.0769C35.6978 35.8889 41 30.7298 41 24.4444C41 18.1591 35.6978 13 29.0769 13H19ZM24.3846 18.1111H29.0769C32.6521 18.1111 35.6154 20.9114 35.6154 24.4444C35.6154 27.9775 32.6521 30.7778 29.0769 30.7778H24.3846V18.1111ZM26.3846 20.1111V28.7778H29.0769C31.6194 28.7778 33.6154 26.8024 33.6154 24.4444C33.6154 22.0864 31.6194 20.1111 29.0769 20.1111H26.3846Z"
      fill="#24292E"
      fillRule="evenodd"
    />
  </svg>
);

const Reddit = (props: SVGProps<SVGSVGElement>) => (
  <svg
    {...props}
    viewBox="0 0 216 216"
    xmlnsXlink="http://www.w3.org/1999/xlink"
  >
    <defs>
      <radialGradient
        cx="169.75"
        cy="92.19"
        fx="169.75"
        fy="92.19"
        gradientTransform="matrix(1 0 0 .87 0 11.64)"
        gradientUnits="userSpaceOnUse"
        id="reddit__snoo-radial-gragient"
        r="50.98"
      >
        <stop offset="0" stopColor="#feffff" />
        <stop offset=".4" stopColor="#feffff" />
        <stop offset=".51" stopColor="#f9fcfc" />
        <stop offset=".62" stopColor="#edf3f5" />
        <stop offset=".7" stopColor="#dee9ec" />
        <stop offset=".72" stopColor="#d8e4e8" />
        <stop offset=".76" stopColor="#ccd8df" />
        <stop offset=".8" stopColor="#c8d5dd" />
        <stop offset=".83" stopColor="#ccd6de" />
        <stop offset=".85" stopColor="#d8dbe2" />
        <stop offset=".88" stopColor="#ede3e9" />
        <stop offset=".9" stopColor="#ffebef" />
      </radialGradient>
      <radialGradient
        cx="47.31"
        fx="47.31"
        id="reddit__snoo-radial-gragient-2"
        r="50.98"
        xlinkHref="#reddit__snoo-radial-gragient"
      />
      <radialGradient
        cx="109.61"
        cy="85.59"
        fx="109.61"
        fy="85.59"
        gradientTransform="matrix(1 0 0 .7 0 25.56)"
        id="reddit__snoo-radial-gragient-3"
        r="153.78"
        xlinkHref="#reddit__snoo-radial-gragient"
      />
      <radialGradient
        cx="-6.01"
        cy="64.68"
        fx="-6.01"
        fy="64.68"
        gradientTransform="matrix(1.07 0 0 1.55 81.08 27.26)"
        gradientUnits="userSpaceOnUse"
        id="reddit__snoo-radial-gragient-4"
        r="12.85"
      >
        <stop offset="0" stopColor="#f60" />
        <stop offset=".5" stopColor="#ff4500" />
        <stop offset=".7" stopColor="#fc4301" />
        <stop offset=".82" stopColor="#f43f07" />
        <stop offset=".92" stopColor="#e53812" />
        <stop offset="1" stopColor="#d4301f" />
      </radialGradient>
      <radialGradient
        cx="-73.55"
        cy="64.68"
        fx="-73.55"
        fy="64.68"
        gradientTransform="matrix(-1.07 0 0 1.55 62.87 27.26)"
        id="reddit__snoo-radial-gragient-5"
        r="12.85"
        xlinkHref="#reddit__snoo-radial-gragient-4"
      />
      <radialGradient
        cx="107.93"
        cy="166.96"
        fx="107.93"
        fy="166.96"
        gradientTransform="matrix(1 0 0 .66 0 57.4)"
        gradientUnits="userSpaceOnUse"
        id="reddit__snoo-radial-gragient-6"
        r="45.3"
      >
        <stop offset="0" stopColor="#172e35" />
        <stop offset=".29" stopColor="#0e1c21" />
        <stop offset=".73" stopColor="#030708" />
        <stop offset="1" />
      </radialGradient>
      <radialGradient
        cx="147.88"
        cy="32.94"
        fx="147.88"
        fy="32.94"
        gradientTransform="matrix(1 0 0 .98 0 .54)"
        id="reddit__snoo-radial-gragient-7"
        r="39.77"
      />
      <radialGradient
        cx="131.31"
        cy="73.08"
        fx="131.31"
        fy="73.08"
        gradientUnits="userSpaceOnUse"
        id="reddit__snoo-radial-gragient-8"
        r="32.6"
      >
        <stop offset=".48" stopColor="#7a9299" />
        <stop offset=".67" stopColor="#172e35" />
        <stop offset=".75" />
        <stop offset=".82" stopColor="#172e35" />
      </radialGradient>
    </defs>
    <path
      d="M108 0C48.35 0 0 48.35 0 108c0 29.82 12.09 56.82 31.63 76.37l-20.57 20.57C6.98 209.02 9.87 216 15.64 216H108c59.65 0 108-48.35 108-108S167.65 0 108 0Z"
      fill="#ff4500"
    />
    <circle
      cx="169.22"
      cy="106.98"
      fill="url(#reddit__snoo-radial-gragient)"
      r="25.22"
    />
    <circle
      cx="46.78"
      cy="106.98"
      fill="url(#reddit__snoo-radial-gragient-2)"
      r="25.22"
    />
    <ellipse
      cx="108.06"
      cy="128.64"
      fill="url(#reddit__snoo-radial-gragient-3)"
      rx="72"
      ry="54"
    />
    <path
      d="M86.78 123.48c-.42 9.08-6.49 12.38-13.56 12.38s-12.46-4.93-12.04-14.01c.42-9.08 6.49-15.02 13.56-15.02s12.46 7.58 12.04 16.66Z"
      fill="url(#reddit__snoo-radial-gragient-4)"
    />
    <path
      d="M129.35 123.48c.42 9.08 6.49 12.38 13.56 12.38s12.46-4.93 12.04-14.01c-.42-9.08-6.49-15.02-13.56-15.02s-12.46 7.58-12.04 16.66Z"
      fill="url(#reddit__snoo-radial-gragient-5)"
    />
    <ellipse cx="79.63" cy="116.37" rx="2.8" ry="3.05" />
    <ellipse cx="146.21" cy="116.37" rx="2.8" ry="3.05" />
    <path
      d="M108.06 142.92c-8.76 0-17.16.43-24.92 1.22-1.33.13-2.17 1.51-1.65 2.74 4.35 10.39 14.61 17.69 26.57 17.69s22.23-7.3 26.57-17.69c.52-1.23-.33-2.61-1.65-2.74-7.77-.79-16.16-1.22-24.92-1.22Z"
      fill="url(#reddit__snoo-radial-gragient-6)"
    />
    <circle
      cx="147.49"
      cy="49.43"
      fill="url(#reddit__snoo-radial-gragient-7)"
      r="17.87"
    />
    <path
      d="M107.8 76.92c-2.14 0-3.87-.89-3.87-2.27 0-16.01 13.03-29.04 29.04-29.04 2.14 0 3.87 1.73 3.87 3.87s-1.73 3.87-3.87 3.87c-11.74 0-21.29 9.55-21.29 21.29 0 1.38-1.73 2.27-3.87 2.27Z"
      fill="url(#reddit__snoo-radial-gragient-8)"
    />
    <path
      d="M62.82 122.65c.39-8.56 6.08-14.16 12.69-14.16 6.26 0 11.1 6.39 11.28 14.33.17-8.88-5.13-15.99-12.05-15.99s-13.14 6.05-13.56 15.2c-.42 9.15 4.97 13.83 12.04 13.83h.52c-6.44-.16-11.3-4.79-10.91-13.2Zm90.48 0c-.39-8.56-6.08-14.16-12.69-14.16-6.26 0-11.1 6.39-11.28 14.33-.17-8.88 5.13-15.99 12.05-15.99 7.07 0 13.14 6.05 13.56 15.2.42 9.15-4.97 13.83-12.04 13.83h-.52c6.44-.16 11.3-4.79 10.91-13.2Z"
      fill="#842123"
    />
  </svg>
);

const projects = [
  {
    name: "Shadcn UI Blocks",
    description: "A collection of shadcn/ui blocks.",
    image: "https://fffuel.co/images/dddepth-preview/dddepth-028.jpg",
  },
  {
    name: "Databuddy",
    description: "Privacy-first web analytics.",
    image: "https://fffuel.co/images/dddepth-preview/dddepth-051.jpg",
  },
  {
    name: "dddepth",
    description: "A collection of AI-generated abstract 3D shapes.",
    image: "https://fffuel.co/images/dddepth-preview/dddepth-248.jpg",
  },
  {
    name: "Pattern Craft",
    description: "Modern background patterns and gradient snippets.",
    image: "https://fffuel.co/images/dddepth-preview/dddepth-045.jpg",
  },
];