Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Website Background #300

Merged
merged 4 commits into from
Jun 19, 2024
Merged

Website Background #300

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9549a35
webbg
naisargi17 Jun 17, 2024
0d8cfac
webbg
naisargi17 Jun 17, 2024
4825fc2
final
naisargi17 Jun 18, 2024
f7811ca
final webbg
naisargi17 Jun 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
106 changes: 56 additions & 50 deletions app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import "./globals.css";
import { useSearchParams } from "next/navigation";
import { toast } from "@/components/ui/use-toast";
import Lenis from "@studio-freight/lenis";
import { HeroHighlight } from "@/components/ui/hero-highlight";
export default function Home() {
const supabase = supabaseBrowser();
const searchParams = useSearchParams();
Expand Down Expand Up @@ -39,58 +40,63 @@ export default function Home() {
requestAnimationFrame(raf);
}, []);
return (
<main className="flex flex-col my-[8%] items-center justify-center p-4 lg:px-24">
<div className="relative mb-[6%] h-full flex flex-col max-w-4xl gap-8 place-items-center">
<div className="absolute inset-0 grid grid-cols-2 -space-x-52 opacity-40 dark:opacity-20 pointer-events-none">
<div className="blur-[106px] h-56 bg-gradient-to-br from-primary to-purple-400 dark:from-blue-700"></div>
<div className="blur-[106px] h-32 bg-gradient-to-r from-cyan-400 to-sky-300 dark:to-indigo-600"></div>
</div>
<div className="flex flex-col items-center justify-center space-y-4 z-10 text-center">
<h1 className="text-5xl md:text-7xl lg:text-8xl font-black">
<span className="text-transparent bg-clip-text bg-gradient-to-br gradient-radial from-blue-500 to-blue-900">
git-re
</span>
</h1>
<p className="text-xl md:text-2xl lg:text-4xl font-semibold">
Elevate your&nbsp;
<span className="text-transparent bg-clip-text bg-gradient-to-br from-blue-500 to-blue-700">
GitHub
</span>
&nbsp;to a dynamic&nbsp;
<span className="text-transparent bg-clip-text bg-gradient-to-br from-blue-500 to-blue-700">
resume
</span>
&nbsp;effortlessly.
</p>
</div>
<div
className={
data.user
? "flex flex-col items-center justify-center space-y-7"
: "flex flex-row space-x-4 items-center"
}
>
{data.user ? (
<Form />
) : (
<AuthButton user={data.user} className="p-6" />
)}
<div>
<a
href="https://www.producthunt.com/posts/git-re?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-git&#0045;re"
target="_blank"
>
<img
src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=438558&theme=light"
alt="git&#0045;re - Elevate&#0032;your&#0032;GitHub&#0032;to&#0032;a&#0032;dynamic&#0032;resume&#0032;effortlessly | Product Hunt"
style={{ height: "58px" }}
height="58"
/>
</a>
<main className="flex flex-col items-center justify-center p-4 lg:px-24">
<HeroHighlight>
<div className="relative mt-[5%] mb-[2%] h-full flex flex-col max-w-4xl gap-8 place-items-center">
<div className="absolute mt-[8%] inset-0 grid grid-cols-2 -space-x-52 opacity-40 dark:opacity-30 pointer-events-none">
<div className="blur-[106px] h-56 bg-gradient-to-br from-primary to-purple-400 dark:from-blue-900"></div>
<div className="blur-[106px] h-32 bg-gradient-to-r from-cyan-400 to-sky-300 dark:to-indigo-600"></div>
</div>

<div className="flex flex-col items-center justify-center space-y-4 z-10 text-center">
<h1 className="text-5xl md:text-7xl lg:text-8xl font-black">
<span className="text-transparent bg-clip-text text-blue-400 dark:text-blue-600">
git-re
</span>
</h1>
<p className="text-xl md:text-2xl lg:text-4xl font-semibold">
Elevate your&nbsp;
<span className="text-transparent bg-clip-text bg-gradient-to-br from-blue-500 to-blue-700">
GitHub
</span>
&nbsp;to a dynamic&nbsp;
<span className="text-transparent bg-clip-text bg-gradient-to-br from-blue-500 to-blue-700">
resume
</span>
&nbsp;effortlessly.
</p>
</div>

<div
className={
data.user
? "flex flex-col items-center justify-center space-y-7"
: "flex flex-row space-x-4 items-center"
}
>
{data.user ? (
<Form />
) : (
<AuthButton user={data.user} className="p-6" />
)}
<div>
<a
href="https://www.producthunt.com/posts/git-re?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-git&#0045;re"
target="_blank"
>
<img
src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=438558&theme=light"
alt="git&#0045;re - Elevate&#0032;your&#0032;GitHub&#0032;to&#0032;a&#0032;dynamic&#0032;resume&#0032;effortlessly | Product Hunt"
style={{ height: "58px" }}
height="58"
/>
</a>
</div>
</div>
</div>
</div>
<div className="h-[30rem] w-full flex flex-col items-center justify-center">
</HeroHighlight>

<div className="h-[22rem] w-full flex flex-col items-center justify-center">
<div className="py-4">
<p
className="text-4xl font-bold text-center mt-4"
Expand Down
2 changes: 1 addition & 1 deletion components/navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ export default async function Navbar() {
const { data } = await supabase.auth.getUser();

return (
<nav className="max-w-screen-2xl mx-auto sm:px-20 px-3 m-2 p-4 w-full flex items-center justify-between">
<nav className="max-w-screen-2xl sm:px-20 px-3 m-2 p-4 w-full flex items-center justify-between">
<div className="flex items-center gap-x-2">
<Link
href={"/"}
Expand Down
61 changes: 61 additions & 0 deletions components/ui/hero-highlight.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
"use client";
import { cn } from "@/utils/cn";
import { useMotionValue, motion, useMotionTemplate } from "framer-motion";
import React from "react";

export const HeroHighlight = ({
children,
className,
containerClassName,
}: {
children: React.ReactNode;
className?: string;
containerClassName?: string;
}) => {
let mouseX = useMotionValue(0);
let mouseY = useMotionValue(0);

function handleMouseMove({
currentTarget,
clientX,
clientY,
}: React.MouseEvent<HTMLDivElement>) {
if (!currentTarget) return;
let { left, top } = currentTarget.getBoundingClientRect();

mouseX.set(clientX - left);
mouseY.set(clientY - top);
}
return (
<div
className={cn(
"relative h-[29rem] w-[100rem] flex flex-col items-center justify-center rounded-3xl group overflow-hidden ",
containerClassName
)}
onMouseMove={handleMouseMove}
>
<div className="absolute inset-0 bg-dot-thick-neutral-100 dark:bg-dot-thick-neutral-950 pointer-events-none" />
<motion.div
className="pointer-events-none bg-dot-thick-indigo-500 dark:bg-dot-thick-indigo-500 absolute inset-0 opacity-0 transition duration-300 group-hover:opacity-100"
style={{
WebkitMaskImage: useMotionTemplate`
radial-gradient(
200px circle at ${mouseX}px ${mouseY}px,
black 0%,
transparent 100%
)
`,
maskImage: useMotionTemplate`
radial-gradient(
200px circle at ${mouseX}px ${mouseY}px,
black 0%,
transparent 100%
)
`,
}}
/>

<div className={cn("relative z-20", className)}>{children}</div>
</div>
);
};
Loading
Loading