Skip to content

Instantly share code, notes, and snippets.

@jakeisnt

jakeisnt/mailbox-email.module.scss

Created November 3, 2024 15:04
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save jakeisnt/bbffe8c087d7d3bd194c29c4e795dea1 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save jakeisnt/bbffe8c087d7d3bd194c29c4e795dea1 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. jakeisnt created this gist Nov 3, 2024.
    68 changes: 68 additions & 0 deletions mailbox-email.module.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,68 @@
    .mailboxContainer {
    position: relative;

    background-color: #111111; /* Changed to black background */
    color: #ffffff; /* Changed to white foreground */
    z-index: 1;
    width: 100vw;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    filter: contrast(10);
    font-weight: 800;
    transform: rotateY(17deg);
    }

    .mailboxContent {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    filter: blur(2px);
    background: linear-gradient(129deg, rgba(0, 0, 0, 1) 0%, rgb(59, 59, 59) 100%); /* Changed to gradient from black to dark grey */
    transition: filter 0.5s ease-in-out;

    animation: hover-enabled-blur 2s ease-in-out;

    &:hover {
    filter: blur(1px);
    }

    @media (hover: none) {
    animation: no-hover-blur 2s ease-in-out;
    transition: none;
    filter: blur(1px);
    }

    > :nth-child(1) {
    transform: rotateZ(-0.5deg);
    }

    > :nth-child(2) {
    transform: rotateZ(0.5deg);
    }

    > :nth-child(3) {
    transform: rotateZ(-0.25deg);
    }
    }

    @keyframes hover-enabled-blur {
    0% {
    filter: blur(8px);
    }
    100% {
    filter: blur(2px);
    }
    }

    @keyframes no-hover-blur {
    0% {
    filter: blur(8px);
    }

    100% {
    filter: blur(1px);
    }
    }
    35 changes: 35 additions & 0 deletions mailbox-email.tsx
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,35 @@
    import Link from "next/link";

    import classes from "./mailbox-email.module.scss";
    import { cn } from "../../lib/utils";

    const MailboxEmail = () => {
    return (
    <Link
    href={"mailto:[email protected]"}
    className={classes.mailboxContainer}
    >
    <div
    className={cn(
    "flex justify-center items-center",
    classes.mailboxContent,
    )}
    >
    <div>jake</div>
    <pre style={{ fontFamily: "monospace", lineHeight: 1 }}>
    {" "}
    {`
    ┌―――――――┐
    │ ▓▓️ │
    │ == │
    │ ==== │
    └―――――――┘
    `}
    </pre>
    <div>uln.industries</div>
    </div>
    </Link>
    );
    };

    export default MailboxEmail;