Skip to content

Commit

Permalink
New Commits
Browse files Browse the repository at this point in the history
  • Loading branch information
@utsavpatel562
utsavpatel562 committed Jun 27, 2024
1 parent 5bd1895 commit 18a4dba
Show file tree
Hide file tree
Showing 9 changed files with 13,390 additions and 37,428 deletions.
150 changes: 120 additions & 30 deletions components/ui/BentoGrid.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,12 @@
"use client";

import { cn } from "@/utils/cn";
import { BackgroundGradientAnimation } from "./GradientAnimation";
import { Globe } from "./globe";
import { GlobeDemo } from "./GridGlobe";
import Lottie from "react-lottie";
import { useState } from "react";
import animationData from "@/data/confetti.json";
import MagicButton from "./MagicButton";

export const BentoGrid = ({
className,
Expand All @@ -12,7 +18,8 @@ export const BentoGrid = ({
return (
<div
className={cn(
"grid md:auto-rows-[18rem] grid-cols-1 md:grid-cols-3 gap-4 max-w-7xl mx-auto ",
// change gap-4 to gap-8, change grid-cols-3 to grid-cols-5, remove md:auto-rows-[18rem], add responsive code
"grid grid-cols-1 md:grid-cols-6 lg:grid-cols-5 md:grid-row-7 gap-4 lg:gap-8 mx-auto",
className
)}
>
Expand All @@ -23,83 +30,166 @@ export const BentoGrid = ({

export const BentoGridItem = ({
className,
id,
title,
description,
id,
// remove unecessary things here
img,
imgClassName,
titleClassName,
spareImg,
}: {
className?: string;
id: number;
title?: string | React.ReactNode;
description?: string | React.ReactNode;
header?: React.ReactNode;
icon?: React.ReactNode;
id?: number;
img?: string;
imgClassName?: string;
titleClassName?: string;
spareImg?: string;
}) => {
const leftLists = ["ReactJS", "NodeJS", "TypeScript"];
const rightLists = ["Firebase", "Next.JS", "MongoDB"];

const [copied, setCopied] = useState(false);

const defaultOptions = {
loop: copied,
autoplay: copied,
animationData: animationData,
rendererSettings: {
preserveAspectRatio: "xMidYMid slice",
},
};

const handleCopy = () => {
const text = "[email protected]";
navigator.clipboard.writeText(text);
setCopied(true);
};

return (
<div
className={cn(
"row-span-1 relative rounded-3xl group/bento hover:shadow-xl transition duration-200 shadow-input dark:shadow-none p-4 dark:bg-black dark:border-white/[0.2] bg-white border border-transparent justify-between flex flex-col space-y-4",
// remove p-4 rounded-3xl dark:bg-black dark:border-white/[0.2] bg-white border border-transparent, add border border-white/[0.1] overflow-hidden relative
"row-span-1 relative overflow-hidden rounded-3xl border border-white/[0.1] group/bento hover:shadow-xl transition duration-200 shadow-input dark:shadow-none justify-between flex flex-col space-y-4",
className
)}
style={{
background: "rgba( 4, 6, 35, 0.55 )",
backgroundColor: " rgba( 4, 6, 35, 0.55 )",
boxShadow: "0px 10px 44px 10px rgba(0,0,0,0.1)",
backdropFilter: "blur( 9.5px )",
WebkitBackdropFilter: "blur( 9.5px )",
// add these two
// you can generate the color from here https://cssgradient.io/
background: "rgb(4,7,29)",
backgroundColor:
"linear-gradient(90deg, rgba(4,7,29,1) 0%, rgba(12,14,35,1) 100%)",
}}
>
<div className={`${id == 6} && 'flex justify-center h-full'`}>
{/* add img divs */}
<div className={`${id === 6 && "flex justify-center"} h-full`}>
<div className="w-full h-full absolute">
{img && (
<img
src={img}
alt={img}
className={cn(imgClassName, "object-cover, object-center")}
className={cn(imgClassName, "object-cover object-center ")}
/>
)}
</div>
<div
className={`absolute right-0 -bottom-5 ${
id === 5 && "w-full opacity-80"
}`}
} `}
>
{spareImg && (
<img
src={spareImg}
alt={spareImg}
className={"object-cover, object-center w-full h-full"}
// width={220}
className="object-cover object-center w-full h-full"
/>
)}
</div>
{id === 6 && (
// add background animation , remove the p tag
<BackgroundGradientAnimation>
<div className="absolute z-50 flex items-center justify-center text-white font-bold"></div>
<div className="absolute z-50 inset-0 flex items-center justify-center text-white font-bold px-4 pointer-events-none text-3xl text-center md:text-4xl lg:text-7xl"></div>
</BackgroundGradientAnimation>
)}
</div>

<div
className={cn(
titleClassName,
"group-hover/bento:translate-x-2 transition duration-200 relative md:h-full min-h-40 flex flex-col px-5 p-5 lg:p-10"
)}
>
<div className="font-sans font-extralight text-[#c1c2d3] text-sm md:text-xs lg:text-base z-10">
{description}
</div>
<div className="font-sans font-bold text-lg lg:text-2xl max-w-96 z-10">
{title}
<div
className={cn(
titleClassName,
"group-hover/bento:translate-x-2 transition duration-200 relative md:h-full min-h-40 flex flex-col px-5 p-5 lg:p-10"
)}
>
{/* change the order of the title and des, font-extralight, remove text-xs text-neutral-600 dark:text-neutral-300 , change the text-color */}
<div className="font-sans font-extralight md:max-w-32 md:text-xs lg:text-base text-sm text-[#C1C2D3] z-10">
{description}
</div>
{/* add text-3xl max-w-96 , remove text-neutral-600 dark:text-neutral-300*/}
{/* remove mb-2 mt-2 */}
<div
className={`font-sans text-lg lg:text-3xl max-w-96 font-bold z-10`}
>
{title}
</div>

{/* for the github 3d globe */}
{id === 2 && <GlobeDemo />}

{/* Tech stack list div */}
{id === 3 && (
<div className="flex gap-1 lg:gap-5 w-fit absolute -right-3 lg:-right-2">
{/* tech stack lists */}
<div className="flex flex-col gap-3 md:gap-3 lg:gap-8">
{leftLists.map((item, i) => (
<span
key={i}
className="lg:py-4 lg:px-3 py-2 px-3 text-xs lg:text-base opacity-50
lg:opacity-100 rounded-lg text-center bg-[#10132E]"
>
{item}
</span>
))}
<span className="lg:py-4 lg:px-3 py-4 px-3 rounded-lg text-center bg-[#10132E]"></span>
</div>
<div className="flex flex-col gap-3 md:gap-3 lg:gap-8">
<span className="lg:py-4 lg:px-3 py-4 px-3 rounded-lg text-center bg-[#10132E]"></span>
{rightLists.map((item, i) => (
<span
key={i}
className="lg:py-4 lg:px-3 py-2 px-3 text-xs lg:text-base opacity-50
lg:opacity-100 rounded-lg text-center bg-[#10132E]"
>
{item}
</span>
))}
</div>
</div>
)}
{id === 6 && (
<div className="mt-5 relative">
{/* button border magic from tailwind css buttons */}
{/* add rounded-md h-8 md:h-8, remove rounded-full */}
{/* remove focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50 */}
{/* add handleCopy() for the copy the text */}
<div
className={`absolute -bottom-5 right-0 ${
copied ? "block" : "block"
}`}
>
{/* <img src="/confetti.gif" alt="confetti" /> */}
<Lottie options={defaultOptions} height={200} width={400} />
</div>

<MagicButton
title={copied ? "Email Copied!" : "Copy Email"}
handleClick={handleCopy}
otherClasses="!bg-[#161A31]"
/>
</div>
)}
</div>
</div>
{id === 2 && <Globe />}
</div>
);
};
2 changes: 1 addition & 1 deletion components/ui/GradientAnimation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@ export const BackgroundGradientAnimation = ({
return (
<div
className={cn(
"h-screen w-screen relative overflow-hidden top-0 left-0 bg-[linear-gradient(40deg,var(--gradient-background-start),var(--gradient-background-end))]",
"h-full w-full absolute overflow-hidden top-0 left-0 bg-[linear-gradient(40deg,var(--gradient-background-start),var(--gradient-background-end))]",
containerClassName
)}
>
Expand Down
Loading

0 comments on commit 18a4dba

Please sign in to comment.