-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
e39bf94
commit d8db87d
Showing
8 changed files
with
158 additions
and
7 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,72 @@ | ||
| "use client"; | ||
| import React from "react"; | ||
| import { Boxes } from "@/components/ui/background-boxes"; | ||
| import { cn } from "@/utils/cn"; | ||
| import Link from "next/link"; | ||
|
|
||
| export function BackgroundBoxesDemo() { | ||
| return ( | ||
| <div | ||
| className="h-96 relative w-full overflow-hidden bg-black-100 flex flex-col items-center justify-center mb-20" | ||
| id="contact" | ||
| > | ||
| <div className="absolute inset-0 w-full h-full bg-black-100 z-20 [mask-image:radial-gradient(transparent,white)] pointer-events-none" /> | ||
|
|
||
| <Boxes /> | ||
| <h1 | ||
| className={cn("text-4xl relative z-20 font-bold w-[90%] text-center")} | ||
| > | ||
| Ready to take <span className="text-purple">your</span> digital presence | ||
| to the next level? | ||
| </h1> | ||
| <p className="text-center mt-2 text-neutral-300 relative z-20"> | ||
| Reach out to me today and let's discuss how I can help you achieve your | ||
| goals. | ||
| </p> | ||
| <Link href="mailto:[email protected]"> | ||
| <button className="mt-9 relative inline-flex h-14 overflow-hidden rounded-full p-[1px] focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50"> | ||
| <span className="absolute inset-[-1000%] animate-[spin_2s_linear_infinite] bg-[conic-gradient(from_90deg_at_50%_50%,#E2CBFF_0%,#393BB2_50%,#E2CBFF_100%)]" /> | ||
| <span className="inline-flex h-full w-full cursor-pointer items-center justify-center rounded-full bg-slate-950 px-4 py-1 text-sm font-medium text-white backdrop-blur-3xl"> | ||
| Let's get me touch | ||
| </span> | ||
| </button> | ||
| </Link> | ||
| <div className="mt-5"> | ||
| <Link href="www.linkedin.com/in/utsav-patel-coder"> | ||
| <button className="bg-slate-800 no-underline group rounded-full cursor-pointer mr-3 relative shadow-2xl shadow-zinc-900 p-px text-xs font-semibold leading-6 text-white inline-block"> | ||
| <span className="absolute inset-0 overflow-hidden rounded-full"> | ||
| <span className="absolute inset-0 bg-[image:radial-gradient(75%_100%_at_50%_0%,rgba(56,189,248,0.6)_0%,rgba(56,189,248,0)_75%)] opacity-0 transition-opacity duration-500 group-hover:opacity-100"></span> | ||
| </span> | ||
| <div className="relative flex space-x-2 items-center z-10 rounded-full bg-black-100 py-0.5 px-4 ring-1 ring-white/10 "> | ||
| <img | ||
| src="/linkedin1.png" | ||
| alt="LinkedIn" | ||
| width={46} | ||
| height={46} | ||
| className="p-2" | ||
| /> | ||
| </div> | ||
| <span className="absolute -bottom-0 left-[1.125rem] h-px w-[calc(100%-2.25rem)] bg-gradient-to-r from-emerald-400/0 via-emerald-400/90 to-emerald-400/0 transition-opacity duration-500 group-hover:opacity-40"></span> | ||
| </button> | ||
| </Link> | ||
| <Link href="https://github.com/utsavpatel562"> | ||
| <button className="bg-slate-800 no-underline group cursor-pointer relative shadow-2xl shadow-zinc-900 rounded-full p-px text-xs font-semibold leading-6 text-white inline-block"> | ||
| <span className="absolute inset-0 overflow-hidden rounded-full"> | ||
| <span className="absolute inset-0 rounded-md bg-[image:radial-gradient(75%_100%_at_50%_0%,rgba(56,189,248,0.6)_0%,rgba(56,189,248,0)_75%)] opacity-0 transition-opacity duration-500 group-hover:opacity-100"></span> | ||
| </span> | ||
| <div className="relative flex space-x-2 items-center z-10 rounded-full bg-black-100 py-0.5 px-4 ring-1 ring-white/10 "> | ||
| <img | ||
| src="/github.png" | ||
| alt="GitHub" | ||
| width={46} | ||
| height={46} | ||
| className="p-2" | ||
| /> | ||
| </div> | ||
| <span className="absolute -bottom-0 left-[1.125rem] h-px w-[calc(100%-2.25rem)] bg-gradient-to-r from-emerald-400/0 via-emerald-400/90 to-emerald-400/0 transition-opacity duration-500 group-hover:opacity-40"></span> | ||
| </button> | ||
| </Link> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,76 @@ | ||
| "use client"; | ||
| import React from "react"; | ||
| import { motion } from "framer-motion"; | ||
| import { cn } from "@/utils/cn"; | ||
|
|
||
| export const BoxesCore = ({ className, ...rest }: { className?: string }) => { | ||
| const rows = new Array(150).fill(1); | ||
| const cols = new Array(100).fill(1); | ||
| let colors = [ | ||
| "--sky-300", | ||
| "--pink-300", | ||
| "--green-300", | ||
| "--yellow-300", | ||
| "--red-300", | ||
| "--purple-300", | ||
| "--blue-300", | ||
| "--indigo-300", | ||
| "--violet-300", | ||
| ]; | ||
| const getRandomColor = () => { | ||
| return colors[Math.floor(Math.random() * colors.length)]; | ||
| }; | ||
|
|
||
| return ( | ||
| <div | ||
| style={{ | ||
| transform: `translate(-40%,-60%) skewX(-48deg) skewY(14deg) scale(0.675) rotate(0deg) translateZ(0)`, | ||
| }} | ||
| className={cn( | ||
| "absolute left-1/4 p-4 -top-1/4 flex -translate-x-1/2 -translate-y-1/2 w-full h-full z-0 ", | ||
| className | ||
| )} | ||
| {...rest} | ||
| > | ||
| {rows.map((_, i) => ( | ||
| <motion.div | ||
| key={`row` + i} | ||
| className="w-96 h-8 border-l border-slate-700 relative" | ||
| > | ||
| {cols.map((_, j) => ( | ||
| <motion.div | ||
| whileHover={{ | ||
| backgroundColor: `var(${getRandomColor()})`, | ||
| transition: { duration: 0 }, | ||
| }} | ||
| animate={{ | ||
| transition: { duration: 2 }, | ||
| }} | ||
| key={`col` + j} | ||
| className="w-32 h-16 border-r border-t border-slate-700 relative" | ||
| > | ||
| {j % 2 === 0 && i % 2 === 0 ? ( | ||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| fill="none" | ||
| viewBox="0 0 24 24" | ||
| strokeWidth="1.5" | ||
| stroke="currentColor" | ||
| className="absolute h-6 w-10 -top-[14px] -left-[22px] text-slate-700 stroke-[1px] pointer-events-none" | ||
| > | ||
| <path | ||
| strokeLinecap="round" | ||
| strokeLinejoin="round" | ||
| d="M12 6v12m6-6H6" | ||
| /> | ||
| </svg> | ||
| ) : null} | ||
| </motion.div> | ||
| ))} | ||
| </motion.div> | ||
| ))} | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export const Boxes = React.memo(BoxesCore); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters