Improve mobile responsiveness
All checks were successful
Deploy Site / docker (ubuntu-latest, 2.44.0) (push) Successful in 1m33s
All checks were successful
Deploy Site / docker (ubuntu-latest, 2.44.0) (push) Successful in 1m33s
This commit is contained in:
parent
d6ad12a6e2
commit
1b4e893bfa
4
.prettierrc
Normal file
4
.prettierrc
Normal file
@ -0,0 +1,4 @@
|
||||
{
|
||||
"trailingComma": "es5",
|
||||
"tabWidth": 4
|
||||
}
|
||||
@ -2,6 +2,6 @@
|
||||
My personal portfolio website hosted [here](https://rainnny.club)
|
||||
|
||||
## TODO
|
||||
- [ ] Mobile Responsiveness
|
||||
- [x] Mobile Responsiveness
|
||||
- [ ] Discord Integration (Status, Activity, etc)
|
||||
- [ ] Add Configuration
|
||||
- [ ] Add Configuration
|
||||
@ -22,6 +22,7 @@
|
||||
"next-themes": "^0.3.0",
|
||||
"react": "^18",
|
||||
"react-dom": "^18",
|
||||
"sharp": "^0.33.5",
|
||||
"tailwind-merge": "^2.5.2",
|
||||
"tailwindcss-animate": "^1.0.7"
|
||||
},
|
||||
|
||||
@ -11,33 +11,33 @@ const inter = Inter({ subsets: ["latin"] });
|
||||
* The metadata for this app.
|
||||
*/
|
||||
export const metadata: Metadata = {
|
||||
title: "RainnnyCLUB",
|
||||
description:
|
||||
"My name is Braydon and I am a self-taught software engineer living in Canada.",
|
||||
title: "RainnnyCLUB",
|
||||
description:
|
||||
"My name is Braydon and I am a self-taught software engineer living in Canada.",
|
||||
};
|
||||
export const viewport: Viewport = {
|
||||
themeColor: "#5555FF",
|
||||
themeColor: "#5555FF",
|
||||
};
|
||||
|
||||
/**
|
||||
* The primary layout for this app.
|
||||
*/
|
||||
const RootLayout = ({
|
||||
children,
|
||||
children,
|
||||
}: Readonly<{
|
||||
children: React.ReactNode;
|
||||
children: React.ReactNode;
|
||||
}>): ReactElement => (
|
||||
<html lang="en">
|
||||
<body className={inter.className}>
|
||||
<ThemeProvider
|
||||
attribute="class"
|
||||
defaultTheme="dark"
|
||||
enableSystem
|
||||
disableTransitionOnChange
|
||||
>
|
||||
<TooltipProvider>{children}</TooltipProvider>
|
||||
</ThemeProvider>
|
||||
</body>
|
||||
</html>
|
||||
<html lang="en">
|
||||
<body className={inter.className}>
|
||||
<ThemeProvider
|
||||
attribute="class"
|
||||
defaultTheme="dark"
|
||||
enableSystem
|
||||
disableTransitionOnChange
|
||||
>
|
||||
<TooltipProvider>{children}</TooltipProvider>
|
||||
</ThemeProvider>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
export default RootLayout;
|
||||
|
||||
@ -3,17 +3,17 @@ import Navbar from "@/components/landing/navbar";
|
||||
import { ReactElement } from "react";
|
||||
|
||||
const LandingPage = (): ReactElement => (
|
||||
<main
|
||||
className="h-screen flex flex-col"
|
||||
style={{
|
||||
background:
|
||||
"linear-gradient(to top, hsla(240, 8%, 8%, 0.5), hsl(var(--background)))",
|
||||
}}
|
||||
>
|
||||
<Navbar />
|
||||
<div className="h-full flex flex-col justify-center">
|
||||
<Greeting />
|
||||
</div>
|
||||
</main>
|
||||
<main
|
||||
className="h-screen flex flex-col"
|
||||
style={{
|
||||
background:
|
||||
"linear-gradient(to top, hsla(240, 8%, 8%, 0.5), hsl(var(--background)))",
|
||||
}}
|
||||
>
|
||||
<Navbar />
|
||||
<div className="px-5 xs:px-7 h-full flex flex-col justify-center">
|
||||
<Greeting />
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
export default LandingPage;
|
||||
|
||||
@ -3,69 +3,70 @@
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
--background: 0 0% 100%;
|
||||
--foreground: 240 10% 3.9%;
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 240 10% 3.9%;
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 240 10% 3.9%;
|
||||
--primary: 240 5.9% 10%;
|
||||
--primary-foreground: 0 0% 98%;
|
||||
--secondary: 240 4.8% 95.9%;
|
||||
--secondary-foreground: 240 5.9% 10%;
|
||||
--muted: 240 4.8% 95.9%;
|
||||
--muted-foreground: 240 3.8% 46.1%;
|
||||
--accent: 240 4.8% 95.9%;
|
||||
--accent-foreground: 240 5.9% 10%;
|
||||
--destructive: 0 72.22% 50.59%;
|
||||
--destructive-foreground: 0 0% 98%;
|
||||
--border: 240 5.9% 90%;
|
||||
--input: 240 5.9% 90%;
|
||||
--ring: 240 5% 64.9%;
|
||||
--radius: 0.5rem;
|
||||
:root {
|
||||
--background: 0 0% 100%;
|
||||
--foreground: 240 10% 3.9%;
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 240 10% 3.9%;
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 240 10% 3.9%;
|
||||
--primary: 240 5.9% 10%;
|
||||
--primary-foreground: 0 0% 98%;
|
||||
--secondary: 240 4.8% 95.9%;
|
||||
--secondary-foreground: 240 5.9% 10%;
|
||||
--muted: 240 4.8% 95.9%;
|
||||
--muted-foreground: 240 3.8% 46.1%;
|
||||
--accent: 240 4.8% 95.9%;
|
||||
--accent-foreground: 240 5.9% 10%;
|
||||
--destructive: 0 72.22% 50.59%;
|
||||
--destructive-foreground: 0 0% 98%;
|
||||
--border: 240 5.9% 90%;
|
||||
--input: 240 5.9% 90%;
|
||||
--ring: 240 5% 64.9%;
|
||||
--radius: 0.5rem;
|
||||
|
||||
--chart-1: 12 76% 61%;
|
||||
--chart-2: 173 58% 39%;
|
||||
--chart-3: 197 37% 24%;
|
||||
--chart-4: 43 74% 66%;
|
||||
--chart-5: 27 87% 67%;
|
||||
}
|
||||
--chart-1: 12 76% 61%;
|
||||
--chart-2: 173 58% 39%;
|
||||
--chart-3: 197 37% 24%;
|
||||
--chart-4: 43 74% 66%;
|
||||
--chart-5: 27 87% 67%;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: 0 0% 0%;
|
||||
--foreground: 0 0% 98%;
|
||||
--card: 240 10% 3.9%;
|
||||
--card-foreground: 0 0% 98%;
|
||||
--popover: 240 10% 3.9%;
|
||||
--popover-foreground: 0 0% 98%;
|
||||
--primary: 0 0% 98%;
|
||||
--primary-foreground: 240 5.9% 10%;
|
||||
--secondary: 240 3.7% 15.9%;
|
||||
--secondary-foreground: 0 0% 98%;
|
||||
--muted: 240 3.7% 15.9%;
|
||||
--muted-foreground: 240 5% 64.9%;
|
||||
--accent: 240 3.7% 15.9%;
|
||||
--accent-foreground: 0 0% 98%;
|
||||
--destructive: 0 62.8% 30.6%;
|
||||
--destructive-foreground: 0 85.7% 97.3%;
|
||||
--border: 240 3.7% 15.9%;
|
||||
--input: 240 3.7% 15.9%;
|
||||
--ring: 240 4.9% 83.9%;
|
||||
.dark {
|
||||
--background: 0 0% 0%;
|
||||
--foreground: 0 0% 98%;
|
||||
--card: 240 10% 3.9%;
|
||||
--card-foreground: 0 0% 98%;
|
||||
--popover: 240 10% 3.9%;
|
||||
--popover-foreground: 0 0% 98%;
|
||||
--primary: 0 0% 98%;
|
||||
--primary-foreground: 240 5.9% 10%;
|
||||
--secondary: 240 3.7% 15.9%;
|
||||
--secondary-foreground: 0 0% 98%;
|
||||
--muted: 240 3.7% 15.9%;
|
||||
--muted-foreground: 240 5% 64.9%;
|
||||
--accent: 240 3.7% 15.9%;
|
||||
--accent-foreground: 0 0% 98%;
|
||||
--destructive: 0 62.8% 30.6%;
|
||||
--destructive-foreground: 0 85.7% 97.3%;
|
||||
--border: 240 3.7% 15.9%;
|
||||
--input: 240 3.7% 15.9%;
|
||||
--ring: 240 4.9% 83.9%;
|
||||
|
||||
--chart-1: 220 70% 50%;
|
||||
--chart-2: 160 60% 45%;
|
||||
--chart-3: 30 80% 55%;
|
||||
--chart-4: 280 65% 60%;
|
||||
--chart-5: 340 75% 55%;
|
||||
}
|
||||
--chart-1: 220 70% 50%;
|
||||
--chart-2: 160 60% 45%;
|
||||
--chart-3: 30 80% 55%;
|
||||
--chart-4: 280 65% 60%;
|
||||
--chart-5: 340 75% 55%;
|
||||
}
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border;
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
* {
|
||||
@apply border-border;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
}
|
||||
|
||||
@ -9,59 +9,59 @@ import { FlipWords } from "@/components/ui/flip-words";
|
||||
import Navigation from "./navigation";
|
||||
|
||||
const Greeting = (): ReactElement => {
|
||||
const now: Moment = moment(Date.now());
|
||||
return (
|
||||
<section className="flex flex-col gap-5 items-center">
|
||||
<BlurFade delay={0.3} inView>
|
||||
<Image
|
||||
className="shadow-2xl shadow-blue-500 rounded-full select-none pointer-events-none"
|
||||
src="/me.png"
|
||||
alt="My Selfie (:"
|
||||
width={174}
|
||||
height={174}
|
||||
/>
|
||||
</BlurFade>
|
||||
const now: Moment = moment(Date.now());
|
||||
return (
|
||||
<section className="flex flex-col gap-5 items-center">
|
||||
<BlurFade delay={0.3} inView>
|
||||
<Image
|
||||
className="shadow-2xl shadow-blue-500 rounded-full scale-90 sm:scale-100 select-none pointer-events-none transition-all transform-gpu"
|
||||
src="/me.png"
|
||||
alt="My Selfie (:"
|
||||
width={174}
|
||||
height={174}
|
||||
/>
|
||||
</BlurFade>
|
||||
|
||||
<BlurFade delay={0.6} inView>
|
||||
<h1
|
||||
className={cn(
|
||||
"flex gap-2 justify-center items-center text-4xl font-bold select-none pointer-events-none",
|
||||
"text-black dark:text-transparent bg-clip-text bg-gradient-to-br from-zinc-300/60 to-white",
|
||||
)}
|
||||
>
|
||||
Hello, I'm
|
||||
<span className="text-blue-600 dark:text-transparent bg-clip-text bg-gradient-to-br from-blue-600 to-blue-300">
|
||||
Braydon
|
||||
</span>
|
||||
<span>
|
||||
<Image
|
||||
src="/waving-hand.gif"
|
||||
alt="Waving Hand"
|
||||
width={32}
|
||||
height={32}
|
||||
unoptimized
|
||||
/>
|
||||
</span>
|
||||
</h1>
|
||||
</BlurFade>
|
||||
<BlurFade delay={0.6} inView>
|
||||
<h1
|
||||
className={cn(
|
||||
"flex gap-2 justify-center items-center text-3xl sm:text-4xl font-bold select-none pointer-events-none transition-all transform-gpu",
|
||||
"text-black dark:text-transparent bg-clip-text bg-gradient-to-br from-zinc-300/60 to-white"
|
||||
)}
|
||||
>
|
||||
Hello, I'm
|
||||
<span className="text-blue-600 dark:text-transparent bg-clip-text bg-gradient-to-br from-blue-600 to-blue-300">
|
||||
Braydon
|
||||
</span>
|
||||
<span>
|
||||
<Image
|
||||
src="/waving-hand.gif"
|
||||
alt="Waving Hand"
|
||||
width={32}
|
||||
height={32}
|
||||
unoptimized
|
||||
/>
|
||||
</span>
|
||||
</h1>
|
||||
</BlurFade>
|
||||
|
||||
<BlurFade delay={0.9} inView>
|
||||
<FlipWords
|
||||
className={cn(
|
||||
"-mt-3 p-0 max-w-[23rem] text-center select-none pointer-events-none",
|
||||
"text-black dark:!text-transparent bg-clip-text bg-gradient-to-br from-zinc-300/85 to-white",
|
||||
)}
|
||||
words={[
|
||||
`A ${now.diff(moment([2002, 10, 13]), "years")} year old${" "}
|
||||
<BlurFade delay={0.9} inView>
|
||||
<FlipWords
|
||||
className={cn(
|
||||
"-mt-3 p-0 max-w-[23rem] text-sm sm:text-base text-center select-none pointer-events-none transition-all transform-gpu",
|
||||
"text-black dark:!text-transparent bg-clip-text bg-gradient-to-br from-zinc-300/85 to-white"
|
||||
)}
|
||||
words={[
|
||||
`A ${now.diff(moment([2002, 10, 13]), "years")} year old${" "}
|
||||
passionate software engineer living in Canada with ${moment([2016, 8, 1]).fromNow(true)} of experience!`,
|
||||
]}
|
||||
/>
|
||||
</BlurFade>
|
||||
]}
|
||||
/>
|
||||
</BlurFade>
|
||||
|
||||
<BlurFade className="mt-3.5" delay={1.25} inView>
|
||||
<Navigation />
|
||||
</BlurFade>
|
||||
</section>
|
||||
);
|
||||
<BlurFade className="mt-3.5" delay={1.25} inView>
|
||||
<Navigation />
|
||||
</BlurFade>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
export default Greeting;
|
||||
|
||||
@ -1,32 +1,32 @@
|
||||
import { ReactElement } from "react";
|
||||
|
||||
const HomelabContent = (): ReactElement => (
|
||||
<ul>
|
||||
<li>
|
||||
<b>Server Rack:</b> 22U, 32" Depth
|
||||
</li>
|
||||
<li>
|
||||
<b>Router:</b> UDM Pro
|
||||
</li>
|
||||
<li>
|
||||
<b>UPS:</b> 1350VA
|
||||
</li>
|
||||
<li className="my-2.5" />
|
||||
<li>
|
||||
<b>Proxmox Node-01:</b>
|
||||
<li>
|
||||
- <b>Motherboard:</b> Prime B550-PLUS
|
||||
</li>
|
||||
<li>
|
||||
- <b>CPU:</b> Ryzen 5 5600G
|
||||
</li>
|
||||
<li>
|
||||
- <b>RAM:</b> 38GB of DDR4 @ 3200Mhz
|
||||
</li>
|
||||
<li>
|
||||
- <b>Storage:</b> 8TB (x2 4TB, x1 4TB Parity) Unraid Array
|
||||
</li>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<b>Server Rack:</b> 22U, 32" Depth
|
||||
</li>
|
||||
<li>
|
||||
<b>Router:</b> UDM Pro
|
||||
</li>
|
||||
<li>
|
||||
<b>UPS:</b> 1350VA
|
||||
</li>
|
||||
<li className="my-2.5" />
|
||||
<li>
|
||||
<b>Proxmox Node-01:</b>
|
||||
<li>
|
||||
- <b>Motherboard:</b> Prime B550-PLUS
|
||||
</li>
|
||||
<li>
|
||||
- <b>CPU:</b> Ryzen 5 5600G
|
||||
</li>
|
||||
<li>
|
||||
- <b>RAM:</b> 38GB of DDR4 @ 3200Mhz
|
||||
</li>
|
||||
<li>
|
||||
- <b>Storage:</b> 8TB (x2 4TB, x1 4TB Parity) Unraid Array
|
||||
</li>
|
||||
</li>
|
||||
</ul>
|
||||
);
|
||||
export default HomelabContent;
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import { MagicCard } from "@/components/ui/magic-card";
|
||||
import { cn } from "@/lib/utils";
|
||||
import moment, { Moment } from "moment";
|
||||
import { useTheme } from "next-themes";
|
||||
import { UseThemeProps } from "next-themes/dist/types";
|
||||
@ -9,102 +8,122 @@ import Link from "next/link";
|
||||
import { ReactElement } from "react";
|
||||
|
||||
type Project = {
|
||||
name: string;
|
||||
link?: string | undefined;
|
||||
previewContent: ReactElement;
|
||||
startDate: Moment;
|
||||
endDate?: Moment | undefined;
|
||||
name: string;
|
||||
link?: string | undefined;
|
||||
previewContent: ReactElement;
|
||||
startDate: Moment;
|
||||
endDate?: Moment | undefined;
|
||||
};
|
||||
|
||||
const projects: Project[] = [
|
||||
{
|
||||
name: "This Website!",
|
||||
link: "https://github.com/Rainnny7/rainnny.club",
|
||||
previewContent: <div>This website!</div>,
|
||||
startDate: moment([2024, 7, 29]),
|
||||
},
|
||||
{
|
||||
name: "WildNetwork",
|
||||
link: "https://discord.gg/WildPrison",
|
||||
previewContent: (
|
||||
<p>
|
||||
WildNetwork is a Minecraft server that contains multiple gamemodes, one
|
||||
of which is Prison, which is the most popular. I first joined the server
|
||||
as a Developer where I would work behind the scenes to create new
|
||||
features, now I'm currently working as a System Administrator.
|
||||
</p>
|
||||
),
|
||||
startDate: moment([2020, 7, 1]),
|
||||
},
|
||||
{
|
||||
name: "Lucity",
|
||||
link: "https://youtube.com/@iamLucid",
|
||||
previewContent: (
|
||||
<p>
|
||||
Lucity was a minigame network for the game Minecraft, and was owned by
|
||||
the YouTuber iamLucid. When I worked at Lucity, I was the development
|
||||
lead, I focused mainly on infrastructure, databases, and monitoring
|
||||
systems. A few things that I have made - a dynamically managed server
|
||||
system, proxy rotation via the TCPShield API, and an API that can
|
||||
interact with the entire network from a normal Java app.
|
||||
</p>
|
||||
),
|
||||
startDate: moment([2020, 7, 1]),
|
||||
endDate: moment([2022, 10, 30]),
|
||||
},
|
||||
{
|
||||
name: "Rainplex",
|
||||
previewContent: (
|
||||
<p>
|
||||
Rainplex was a remake of the once popular Minecraft server, Mineplex.
|
||||
Rainplex initially came to light using the plugin, Skript where it just
|
||||
contained a Hub. After some time, the entirety of the network was
|
||||
re-coded in the Java programming from the ground up. Rainplex went
|
||||
through numerous re-codes over the time it was active, however I have
|
||||
since abandoned development due to lack of free time.
|
||||
</p>
|
||||
),
|
||||
startDate: moment([2018, 8, 1]),
|
||||
endDate: moment([2021, 6, 11]),
|
||||
},
|
||||
{
|
||||
name: "Arcane Client",
|
||||
link: "https://github.com/ArcaneClientNET",
|
||||
previewContent: (
|
||||
<p>
|
||||
Arcane is the all-in-one Minecraft mod pack. This client was built to be
|
||||
similar to LunarClient for portfolio and experience sake. I have since
|
||||
abandoned development due to lack of free time.
|
||||
</p>
|
||||
),
|
||||
startDate: moment([2021, 6, 1]),
|
||||
endDate: moment([2021, 10, 1]),
|
||||
},
|
||||
{
|
||||
name: "This Website!",
|
||||
link: "https://github.com/Rainnny7/rainnny.club",
|
||||
previewContent: <div>This website!</div>,
|
||||
startDate: moment([2024, 7, 29]),
|
||||
},
|
||||
{
|
||||
name: "WildNetwork",
|
||||
link: "https://discord.gg/WildPrison",
|
||||
previewContent: (
|
||||
<p>
|
||||
WildNetwork is a Minecraft server that contains multiple
|
||||
gamemodes, one of which is Prison, which is the most popular. I
|
||||
first joined the server as a Developer where I would work behind
|
||||
the scenes to create new features, now I'm currently
|
||||
working as a System Administrator.
|
||||
</p>
|
||||
),
|
||||
startDate: moment([2020, 7, 1]),
|
||||
},
|
||||
{
|
||||
name: "Bonfire",
|
||||
link: "https://bonfire.wtf",
|
||||
previewContent: (
|
||||
<p>
|
||||
Bonfire is a platform similar to Discord that a friend and I are
|
||||
working on together in our free time. Bonfire is perfect for
|
||||
connecting with friends or building a global community.
|
||||
Personalize your space to chat, and hang out.
|
||||
</p>
|
||||
),
|
||||
startDate: moment([2024, 3, 30]),
|
||||
},
|
||||
{
|
||||
name: "Lucity",
|
||||
link: "https://youtube.com/@iamLucid",
|
||||
previewContent: (
|
||||
<p>
|
||||
Lucity was a minigame network for the game Minecraft, and was
|
||||
owned by the YouTuber iamLucid. When I worked at Lucity, I was
|
||||
the development lead, I focused mainly on infrastructure,
|
||||
databases, and monitoring systems. A few things that I have made
|
||||
- a dynamically managed server system, proxy rotation via the
|
||||
TCPShield API, and an API that can interact with the entire
|
||||
network from a normal Java app.
|
||||
</p>
|
||||
),
|
||||
startDate: moment([2020, 7, 1]),
|
||||
endDate: moment([2022, 10, 30]),
|
||||
},
|
||||
{
|
||||
name: "Rainplex",
|
||||
previewContent: (
|
||||
<p>
|
||||
Rainplex was a remake of the once popular Minecraft server,
|
||||
Mineplex. Rainplex initially came to light using the plugin,
|
||||
Skript where it just contained a Hub. After some time, the
|
||||
entirety of the network was re-coded in the Java programming
|
||||
from the ground up. Rainplex went through numerous re-codes over
|
||||
the time it was active, however I have since abandoned
|
||||
development due to lack of free time.
|
||||
</p>
|
||||
),
|
||||
startDate: moment([2018, 8, 1]),
|
||||
endDate: moment([2021, 6, 11]),
|
||||
},
|
||||
{
|
||||
name: "Arcane Client",
|
||||
link: "https://github.com/ArcaneClientNET",
|
||||
previewContent: (
|
||||
<p>
|
||||
Arcane is the all-in-one Minecraft mod pack. This client was
|
||||
built to be similar to LunarClient for portfolio and experience
|
||||
sake. I have since abandoned development due to lack of free
|
||||
time.
|
||||
</p>
|
||||
),
|
||||
startDate: moment([2021, 6, 1]),
|
||||
endDate: moment([2021, 10, 1]),
|
||||
},
|
||||
];
|
||||
|
||||
const MyWork = (): ReactElement => {
|
||||
const { theme }: UseThemeProps = useTheme();
|
||||
return (
|
||||
<div className="max-w-[50rem] flex flex-wrap gap-3 justify-center">
|
||||
{projects.map((project, index) => (
|
||||
<Link key={index} href={project.link || "#"} target="_blank">
|
||||
<MagicCard
|
||||
className="w-[15rem] p-3.5"
|
||||
gradientColor={theme === "dark" ? "#262626" : "#D9D9D955"}
|
||||
>
|
||||
<h1 className="font-bold select-none pointer-events-none">
|
||||
{project.name}
|
||||
</h1>
|
||||
const { theme }: UseThemeProps = useTheme();
|
||||
return (
|
||||
<div className="max-w-[50rem] flex flex-wrap gap-3 justify-center">
|
||||
{projects.map((project, index) => (
|
||||
<Link key={index} href={project.link || "#"} target="_blank">
|
||||
<MagicCard
|
||||
className="w-[15rem] p-3.5"
|
||||
gradientColor={
|
||||
theme === "dark" ? "#262626" : "#D9D9D955"
|
||||
}
|
||||
>
|
||||
<h1 className="font-bold select-none pointer-events-none">
|
||||
{project.name}
|
||||
</h1>
|
||||
|
||||
{/* Years Active */}
|
||||
<h2>
|
||||
{project.startDate.format("MMM YYYY")}
|
||||
{project.endDate && ` - ${project.endDate.format("MMM YYYY")}`}
|
||||
</h2>
|
||||
</MagicCard>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
{/* Years Active */}
|
||||
<h2>
|
||||
{project.startDate.format("MMM YYYY")}
|
||||
{project.endDate &&
|
||||
` - ${project.endDate.format("MMM YYYY")}`}
|
||||
</h2>
|
||||
</MagicCard>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default MyWork;
|
||||
|
||||
@ -1,145 +1,145 @@
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { ReactElement } from "react";
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipTrigger,
|
||||
} from "@/components/ui/tooltip";
|
||||
import SimpleTooltip from "@/components/ui/simple-tooltip";
|
||||
|
||||
type Skill = {
|
||||
name: string;
|
||||
icon: string;
|
||||
link: string;
|
||||
name: string;
|
||||
icon: string;
|
||||
link: string;
|
||||
};
|
||||
|
||||
const skillset: Skill[] = [
|
||||
// Languages
|
||||
{
|
||||
name: "Java",
|
||||
icon: "https://img.icons8.com/color/2x/java-coffee-cup-logo.png",
|
||||
link: "https://www.java.com",
|
||||
},
|
||||
{
|
||||
name: "JavaScript",
|
||||
icon: "https://img.icons8.com/fluent/2x/javascript.png",
|
||||
link: "https://developer.mozilla.org/en-US/docs/Web/JavaScript",
|
||||
},
|
||||
{
|
||||
name: "CSS",
|
||||
icon: "https://img.icons8.com/fluent/2x/css3.png",
|
||||
link: "https://www.w3schools.com/css",
|
||||
},
|
||||
// Languages
|
||||
{
|
||||
name: "Java",
|
||||
icon: "https://img.icons8.com/color/2x/java-coffee-cup-logo.png",
|
||||
link: "https://www.java.com",
|
||||
},
|
||||
{
|
||||
name: "JavaScript",
|
||||
icon: "https://img.icons8.com/fluent/2x/javascript.png",
|
||||
link: "https://developer.mozilla.org/en-US/docs/Web/JavaScript",
|
||||
},
|
||||
{
|
||||
name: "CSS",
|
||||
icon: "https://img.icons8.com/fluent/2x/css3.png",
|
||||
link: "https://www.w3schools.com/css",
|
||||
},
|
||||
|
||||
// Operating Systems
|
||||
{
|
||||
name: "Linux",
|
||||
icon: "https://img.icons8.com/color/2x/linux.png",
|
||||
link: "https://www.linux.org",
|
||||
},
|
||||
{
|
||||
name: "Bash",
|
||||
icon: "https://img.icons8.com/color/2x/bash.png",
|
||||
link: "https://www.gnu.org/software/bash",
|
||||
},
|
||||
// Operating Systems
|
||||
{
|
||||
name: "Linux",
|
||||
icon: "https://img.icons8.com/color/2x/linux.png",
|
||||
link: "https://www.linux.org",
|
||||
},
|
||||
{
|
||||
name: "Bash",
|
||||
icon: "https://img.icons8.com/color/2x/bash.png",
|
||||
link: "https://www.gnu.org/software/bash",
|
||||
},
|
||||
|
||||
// Databases
|
||||
{
|
||||
name: "MariaDB",
|
||||
icon: "https://img.icons8.com/fluent/2x/maria-db.png",
|
||||
link: "https://mariadb.org",
|
||||
},
|
||||
{
|
||||
name: "MongoDB",
|
||||
icon: "https://img.icons8.com/color/2x/mongodb.png",
|
||||
link: "https://www.mongodb.com",
|
||||
},
|
||||
{
|
||||
name: "Redis",
|
||||
icon: "https://img.icons8.com/color/2x/redis.png",
|
||||
link: "https://redis.io",
|
||||
},
|
||||
// Databases
|
||||
{
|
||||
name: "MariaDB",
|
||||
icon: "https://img.icons8.com/fluent/2x/maria-db.png",
|
||||
link: "https://mariadb.org",
|
||||
},
|
||||
{
|
||||
name: "MongoDB",
|
||||
icon: "https://img.icons8.com/color/2x/mongodb.png",
|
||||
link: "https://www.mongodb.com",
|
||||
},
|
||||
{
|
||||
name: "Redis",
|
||||
icon: "https://img.icons8.com/color/2x/redis.png",
|
||||
link: "https://redis.io",
|
||||
},
|
||||
|
||||
// Software
|
||||
{
|
||||
name: "Git",
|
||||
icon: "https://img.icons8.com/color/2x/git.png",
|
||||
link: "https://git-scm.com",
|
||||
},
|
||||
{
|
||||
name: "Docker",
|
||||
icon: "https://img.icons8.com/fluent/2x/docker.png",
|
||||
link: "https://www.docker.com",
|
||||
},
|
||||
{
|
||||
name: "Jenkins",
|
||||
icon: "https://img.icons8.com/color/2x/jenkins.png",
|
||||
link: "https://www.jenkins.io",
|
||||
},
|
||||
{
|
||||
name: "Figma",
|
||||
icon: "https://img.icons8.com/fluent/2x/figma.png",
|
||||
link: "https://www.figma.com",
|
||||
},
|
||||
{
|
||||
name: "Postman",
|
||||
icon: "https://img.icons8.com/dusk/2x/postman-api.png",
|
||||
link: "https://www.postman.com",
|
||||
},
|
||||
// Software
|
||||
{
|
||||
name: "Git",
|
||||
icon: "https://img.icons8.com/color/2x/git.png",
|
||||
link: "https://git-scm.com",
|
||||
},
|
||||
{
|
||||
name: "Docker",
|
||||
icon: "https://img.icons8.com/fluent/2x/docker.png",
|
||||
link: "https://www.docker.com",
|
||||
},
|
||||
{
|
||||
name: "Jenkins",
|
||||
icon: "https://img.icons8.com/color/2x/jenkins.png",
|
||||
link: "https://www.jenkins.io",
|
||||
},
|
||||
{
|
||||
name: "Figma",
|
||||
icon: "https://img.icons8.com/fluent/2x/figma.png",
|
||||
link: "https://www.figma.com",
|
||||
},
|
||||
{
|
||||
name: "Postman",
|
||||
icon: "https://img.icons8.com/dusk/2x/postman-api.png",
|
||||
link: "https://www.postman.com",
|
||||
},
|
||||
|
||||
// Frameworks & Libraries
|
||||
{
|
||||
name: "Maven",
|
||||
icon: "/maven.png",
|
||||
link: "https://maven.apache.org",
|
||||
},
|
||||
{
|
||||
name: "NPM",
|
||||
icon: "https://img.icons8.com/color/2x/npm.png",
|
||||
link: "https://www.npmjs.com",
|
||||
},
|
||||
{
|
||||
name: "React",
|
||||
icon: "https://img.icons8.com/dusk/2x/react.png",
|
||||
link: "https://reactjs.org/",
|
||||
},
|
||||
{
|
||||
name: "NextJS",
|
||||
icon: "https://img.icons8.com/color/2x/nextjs.png",
|
||||
link: "https://nextjs.org/",
|
||||
},
|
||||
{
|
||||
name: "TailwindCSS",
|
||||
icon: "https://img.icons8.com/color/2x/tailwindcss.png",
|
||||
link: "https://tailwindcss.com",
|
||||
},
|
||||
{
|
||||
name: "Redux",
|
||||
icon: "https://img.icons8.com/color/2x/redux.png",
|
||||
link: "https://redux.js.org",
|
||||
},
|
||||
{
|
||||
name: "Nginx",
|
||||
icon: "https://img.icons8.com/color/2x/nginx.png",
|
||||
link: "https://www.nginx.com",
|
||||
},
|
||||
// Frameworks & Libraries
|
||||
{
|
||||
name: "Maven",
|
||||
icon: "/maven.png",
|
||||
link: "https://maven.apache.org",
|
||||
},
|
||||
{
|
||||
name: "NPM",
|
||||
icon: "https://img.icons8.com/color/2x/npm.png",
|
||||
link: "https://www.npmjs.com",
|
||||
},
|
||||
{
|
||||
name: "React",
|
||||
icon: "https://img.icons8.com/dusk/2x/react.png",
|
||||
link: "https://reactjs.org/",
|
||||
},
|
||||
{
|
||||
name: "NextJS",
|
||||
icon: "https://img.icons8.com/color/2x/nextjs.png",
|
||||
link: "https://nextjs.org/",
|
||||
},
|
||||
{
|
||||
name: "TailwindCSS",
|
||||
icon: "https://img.icons8.com/color/2x/tailwindcss.png",
|
||||
link: "https://tailwindcss.com",
|
||||
},
|
||||
{
|
||||
name: "Redux",
|
||||
icon: "https://img.icons8.com/color/2x/redux.png",
|
||||
link: "https://redux.js.org",
|
||||
},
|
||||
{
|
||||
name: "Nginx",
|
||||
icon: "https://img.icons8.com/color/2x/nginx.png",
|
||||
link: "https://www.nginx.com",
|
||||
},
|
||||
];
|
||||
|
||||
const Skills = (): ReactElement => (
|
||||
<div className="max-w-[30rem] flex flex-wrap gap-3 justify-center">
|
||||
{skillset.map((skill, index) => (
|
||||
<Link key={index} className="cursor-default" href={skill.link}>
|
||||
<SimpleTooltip content={skill.name}>
|
||||
<Image
|
||||
src={skill.icon}
|
||||
alt={`${skill.name} Skill Logo`}
|
||||
width={36}
|
||||
height={36}
|
||||
/>
|
||||
</SimpleTooltip>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
<div className="max-w-[30rem] flex flex-wrap gap-3 justify-center">
|
||||
{skillset.map((skill, index) => (
|
||||
<Link
|
||||
key={index}
|
||||
className="cursor-default hover:opacity-75 transition-all transform-gpu"
|
||||
href={skill.link}
|
||||
target="_blank"
|
||||
>
|
||||
<SimpleTooltip content={skill.name}>
|
||||
<Image
|
||||
src={skill.icon}
|
||||
alt={`${skill.name} Skill Logo`}
|
||||
width={36}
|
||||
height={36}
|
||||
/>
|
||||
</SimpleTooltip>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
export default Skills;
|
||||
|
||||
@ -2,114 +2,115 @@ import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { ReactElement } from "react";
|
||||
import {
|
||||
NavigationMenu,
|
||||
NavigationMenuContent,
|
||||
NavigationMenuIndicator,
|
||||
NavigationMenuItem,
|
||||
NavigationMenuLink,
|
||||
NavigationMenuList,
|
||||
NavigationMenuTrigger,
|
||||
NavigationMenuViewport,
|
||||
NavigationMenu,
|
||||
NavigationMenuContent,
|
||||
NavigationMenuItem,
|
||||
NavigationMenuLink,
|
||||
NavigationMenuList,
|
||||
NavigationMenuTrigger,
|
||||
navigationMenuTriggerStyle,
|
||||
} from "@/components/ui/navigation-menu";
|
||||
import { navigationMenuTriggerStyle } from "@/components/ui/navigation-menu";
|
||||
import { HeartIcon } from "@heroicons/react/24/solid";
|
||||
import { cn } from "@/lib/utils";
|
||||
import ThemeSwitcher from "./theme-switcher";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { BookOpenIcon } from "@heroicons/react/24/outline";
|
||||
import { SignalIcon } from "@heroicons/react/24/outline";
|
||||
import {
|
||||
BookOpenIcon,
|
||||
CodeBracketIcon,
|
||||
SignalIcon,
|
||||
} from "@heroicons/react/24/outline";
|
||||
import BlurFade from "@/components/ui/blur-fade";
|
||||
import { CodeBracketIcon } from "@heroicons/react/24/outline";
|
||||
|
||||
const Navbar = (): ReactElement => (
|
||||
<BlurFade className="pt-1" delay={1.35} inView>
|
||||
<nav className="py-4 flex gap-14 justify-center items-center border-b">
|
||||
<Branding />
|
||||
<Links />
|
||||
</nav>
|
||||
</BlurFade>
|
||||
<BlurFade className="pt-1" delay={1.35} inView>
|
||||
<nav className="px-3 xs:px-7 py-4 flex gap-3 xs:gap-10 sm:gap-14 justify-center items-center border-b transition-all transform-gpu">
|
||||
<Branding />
|
||||
<Links />
|
||||
<ThemeSwitcher />
|
||||
</nav>
|
||||
</BlurFade>
|
||||
);
|
||||
|
||||
const Branding = (): ReactElement => (
|
||||
<Link
|
||||
className="flex gap-4 items-center hover:opacity-75 cursor-default transition-all transform-gpu"
|
||||
href="/"
|
||||
>
|
||||
<Image
|
||||
className="rounded-full"
|
||||
src="/me.png"
|
||||
alt="My Selfie (:"
|
||||
width={40}
|
||||
height={40}
|
||||
/>
|
||||
<h1 className="text-xl font-bold">RainnnyCLUB</h1>
|
||||
</Link>
|
||||
<Link
|
||||
className="flex gap-3 items-center hover:opacity-75 cursor-default transition-all transform-gpu"
|
||||
href="/"
|
||||
>
|
||||
<Image
|
||||
className="rounded-full"
|
||||
src="/me.png"
|
||||
alt="My Selfie (:"
|
||||
width={40}
|
||||
height={40}
|
||||
/>
|
||||
<h1 className="hidden sm:flex text-xl font-bold">RainnnyCLUB</h1>
|
||||
</Link>
|
||||
);
|
||||
|
||||
const Links = (): ReactElement => (
|
||||
<NavigationMenu>
|
||||
<NavigationMenuList>
|
||||
{/* Useful Links */}
|
||||
<NavigationMenuItem>
|
||||
<NavigationMenuTrigger>Useful Links</NavigationMenuTrigger>
|
||||
<NavigationMenuContent>
|
||||
<NavigationMenuLink>
|
||||
<UsefulLinksContent />
|
||||
</NavigationMenuLink>
|
||||
</NavigationMenuContent>
|
||||
</NavigationMenuItem>
|
||||
<NavigationMenu>
|
||||
<NavigationMenuList>
|
||||
{/* Useful Links */}
|
||||
<NavigationMenuItem>
|
||||
<NavigationMenuTrigger>Useful Links</NavigationMenuTrigger>
|
||||
<NavigationMenuContent>
|
||||
<NavigationMenuLink>
|
||||
<UsefulLinksContent />
|
||||
</NavigationMenuLink>
|
||||
</NavigationMenuContent>
|
||||
</NavigationMenuItem>
|
||||
|
||||
{/* Donate */}
|
||||
<NavigationMenuItem>
|
||||
<Link href="https://buymeacoffee.com/Rainnny7" legacyBehavior passHref>
|
||||
<NavigationMenuLink
|
||||
className={cn(navigationMenuTriggerStyle(), "gap-2")}
|
||||
target="_blank"
|
||||
>
|
||||
<span>Buy me a Coffee</span>
|
||||
<HeartIcon
|
||||
className="text-red-500 animate-pulse"
|
||||
width={20}
|
||||
height={20}
|
||||
/>
|
||||
</NavigationMenuLink>
|
||||
</Link>
|
||||
</NavigationMenuItem>
|
||||
|
||||
{/* Theme Switcher */}
|
||||
<NavigationMenuItem>
|
||||
<ThemeSwitcher />
|
||||
</NavigationMenuItem>
|
||||
</NavigationMenuList>
|
||||
</NavigationMenu>
|
||||
{/* Donate */}
|
||||
<NavigationMenuItem>
|
||||
<Link
|
||||
href="https://buymeacoffee.com/Rainnny7"
|
||||
legacyBehavior
|
||||
passHref
|
||||
>
|
||||
<NavigationMenuLink
|
||||
className={cn(navigationMenuTriggerStyle(), "gap-2")}
|
||||
target="_blank"
|
||||
>
|
||||
<span className="hidden sm:flex">Buy me a Coffee</span>
|
||||
<span className="sm:hidden">Donate</span>
|
||||
<HeartIcon
|
||||
className="text-red-500 animate-pulse"
|
||||
width={20}
|
||||
height={20}
|
||||
/>
|
||||
</NavigationMenuLink>
|
||||
</Link>
|
||||
</NavigationMenuItem>
|
||||
</NavigationMenuList>
|
||||
</NavigationMenu>
|
||||
);
|
||||
|
||||
const UsefulLinksContent = (): ReactElement => (
|
||||
<div className="p-3 flex gap-5">
|
||||
{/* Git */}
|
||||
<Link href="https://git.rainnny.club" target="_blank">
|
||||
<Button className="gap-3 cursor-default" variant="ghost">
|
||||
<CodeBracketIcon width={24} height={24} />
|
||||
<span>Gitea</span>
|
||||
</Button>
|
||||
</Link>
|
||||
<div className="p-3 flex gap-5">
|
||||
{/* Git */}
|
||||
<Link href="https://git.rainnny.club" target="_blank">
|
||||
<Button className="gap-3 cursor-default" variant="ghost">
|
||||
<CodeBracketIcon width={24} height={24} />
|
||||
<span>Gitea</span>
|
||||
</Button>
|
||||
</Link>
|
||||
|
||||
{/* Wiki */}
|
||||
<Link href="https://docs.rainnny.club" target="_blank">
|
||||
<Button className="gap-3 cursor-default" variant="ghost">
|
||||
<BookOpenIcon width={24} height={24} />
|
||||
<span>Wiki</span>
|
||||
</Button>
|
||||
</Link>
|
||||
{/* Wiki */}
|
||||
<Link href="https://docs.rainnny.club" target="_blank">
|
||||
<Button className="gap-3 cursor-default" variant="ghost">
|
||||
<BookOpenIcon width={24} height={24} />
|
||||
<span>Wiki</span>
|
||||
</Button>
|
||||
</Link>
|
||||
|
||||
{/* Status Page */}
|
||||
<Link href="https://status.rainnny.club" target="_blank">
|
||||
<Button className="gap-3 cursor-default" variant="ghost">
|
||||
<SignalIcon width={24} height={24} />
|
||||
<span>Service Status</span>
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
{/* Status Page */}
|
||||
<Link href="https://status.rainnny.club" target="_blank">
|
||||
<Button className="gap-3 cursor-default" variant="ghost">
|
||||
<SignalIcon width={24} height={24} />
|
||||
<span>Service Status</span>
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
|
||||
export default Navbar;
|
||||
|
||||
@ -2,9 +2,11 @@
|
||||
|
||||
import { ReactElement, useState } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { BriefcaseIcon } from "@heroicons/react/24/outline";
|
||||
import { WrenchIcon } from "@heroicons/react/24/outline";
|
||||
import { ServerStackIcon } from "@heroicons/react/24/outline";
|
||||
import {
|
||||
BriefcaseIcon,
|
||||
ServerStackIcon,
|
||||
WrenchIcon,
|
||||
} from "@heroicons/react/24/outline";
|
||||
import { cn } from "@/lib/utils";
|
||||
import BlurFade from "@/components/ui/blur-fade";
|
||||
import HomelabContent from "./nav-content/homelab";
|
||||
@ -12,64 +14,66 @@ import Skills from "./nav-content/skills";
|
||||
import MyWork from "./nav-content/my-work";
|
||||
|
||||
type Item = {
|
||||
name: string;
|
||||
icon: ReactElement;
|
||||
content: ReactElement;
|
||||
name: string;
|
||||
icon: ReactElement;
|
||||
content: ReactElement;
|
||||
};
|
||||
|
||||
const items: Item[] = [
|
||||
{
|
||||
name: "My Work",
|
||||
icon: <BriefcaseIcon width={22} height={22} />,
|
||||
content: <MyWork />,
|
||||
},
|
||||
{
|
||||
name: "Skills",
|
||||
icon: <WrenchIcon width={22} height={22} />,
|
||||
content: <Skills />,
|
||||
},
|
||||
{
|
||||
name: "Homelab",
|
||||
icon: <ServerStackIcon width={22} height={22} />,
|
||||
content: <HomelabContent />,
|
||||
},
|
||||
{
|
||||
name: "My Work",
|
||||
icon: <BriefcaseIcon width={22} height={22} />,
|
||||
content: <MyWork />,
|
||||
},
|
||||
{
|
||||
name: "Skills",
|
||||
icon: <WrenchIcon width={22} height={22} />,
|
||||
content: <Skills />,
|
||||
},
|
||||
{
|
||||
name: "Homelab",
|
||||
icon: <ServerStackIcon width={22} height={22} />,
|
||||
content: <HomelabContent />,
|
||||
},
|
||||
];
|
||||
|
||||
const Navigation = (): ReactElement => {
|
||||
const [selected, setSelected] = useState<Item | undefined>(undefined);
|
||||
return (
|
||||
<div className="flex flex-col">
|
||||
{/* Selection Buttons */}
|
||||
<div className="flex gap-5 justify-center">
|
||||
{items.map((item, index) => {
|
||||
const active: boolean = selected === item;
|
||||
return (
|
||||
<BlurFade key={index} delay={0.9 + 0.3 * index} inView>
|
||||
<Button
|
||||
className={cn(
|
||||
"py-6 gap-2 bg-white/75 dark:bg-zinc-800/75 cursor-default hover:opacity-75 transition-all transform-gpu",
|
||||
active && "opacity-70",
|
||||
)}
|
||||
variant="ghost"
|
||||
onClick={() =>
|
||||
active ? setSelected(undefined) : setSelected(item)
|
||||
}
|
||||
>
|
||||
{item.icon}
|
||||
{item.name}
|
||||
</Button>
|
||||
</BlurFade>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
const [selected, setSelected] = useState<Item | undefined>(undefined);
|
||||
return (
|
||||
<div className="flex flex-col">
|
||||
{/* Selection Buttons */}
|
||||
<div className="flex gap-3 sm:gap-6 justify-center transition-all transform-gpu">
|
||||
{items.map((item, index) => {
|
||||
const active: boolean = selected === item;
|
||||
return (
|
||||
<BlurFade key={index} delay={0.9 + 0.3 * index} inView>
|
||||
<Button
|
||||
className={cn(
|
||||
"px-3 sm:px-4 py-6 gap-2 shadow-sm bg-white/75 dark:bg-zinc-800/75 rounded-xl cursor-default hover:opacity-75 transition-all transform-gpu",
|
||||
active && "opacity-70"
|
||||
)}
|
||||
variant="ghost"
|
||||
onClick={() =>
|
||||
active
|
||||
? setSelected(undefined)
|
||||
: setSelected(item)
|
||||
}
|
||||
>
|
||||
{item.icon}
|
||||
{item.name}
|
||||
</Button>
|
||||
</BlurFade>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Selected Content */}
|
||||
{selected && (
|
||||
<BlurFade key={selected.name} delay={0.05} inView>
|
||||
<div className="mt-4 p-4 border rounded-xl">{selected.content}</div>
|
||||
</BlurFade>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
{/* Selected Content */}
|
||||
{selected && (
|
||||
<BlurFade key={selected.name} delay={0.05} inView>
|
||||
<div className="mt-5">{selected.content}</div>
|
||||
</BlurFade>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default Navigation;
|
||||
|
||||
@ -8,31 +8,31 @@ import { motion } from "framer-motion";
|
||||
import { UseThemeProps } from "next-themes/dist/types";
|
||||
|
||||
const ThemeSwitcher = (): ReactElement => {
|
||||
const { theme, setTheme }: UseThemeProps = useTheme();
|
||||
const isLight = theme === "light";
|
||||
return (
|
||||
<Button
|
||||
className="relative mx-7 px-5 py-1.5 flex items-center cursor-default hover:opacity-85"
|
||||
variant="ghost"
|
||||
onClick={() => setTheme(isLight ? "dark" : "light")}
|
||||
>
|
||||
<motion.div
|
||||
initial={{ rotate: 0, scale: 1 }}
|
||||
animate={{ rotate: isLight ? 0 : -90, scale: isLight ? 1 : 0 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="absolute"
|
||||
>
|
||||
<Sun className="w-[1.2rem] h-[1.2rem]" />
|
||||
</motion.div>
|
||||
<motion.div
|
||||
initial={{ rotate: 90, scale: 0 }}
|
||||
animate={{ rotate: isLight ? 90 : 0, scale: isLight ? 0 : 1 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="absolute"
|
||||
>
|
||||
<MoonStar className="w-[1.2rem] h-[1.2rem]" />
|
||||
</motion.div>
|
||||
</Button>
|
||||
);
|
||||
const { theme, setTheme }: UseThemeProps = useTheme();
|
||||
const isLight = theme === "light";
|
||||
return (
|
||||
<Button
|
||||
className="relative px-5 py-1.5 flex items-center cursor-default hover:opacity-85"
|
||||
variant="ghost"
|
||||
onClick={() => setTheme(isLight ? "dark" : "light")}
|
||||
>
|
||||
<motion.div
|
||||
initial={{ rotate: 0, scale: 1 }}
|
||||
animate={{ rotate: isLight ? 0 : -90, scale: isLight ? 1 : 0 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="absolute"
|
||||
>
|
||||
<Sun className="w-[1.2rem] h-[1.2rem]" />
|
||||
</motion.div>
|
||||
<motion.div
|
||||
initial={{ rotate: 90, scale: 0 }}
|
||||
animate={{ rotate: isLight ? 90 : 0, scale: isLight ? 0 : 1 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="absolute"
|
||||
>
|
||||
<MoonStar className="w-[1.2rem] h-[1.2rem]" />
|
||||
</motion.div>
|
||||
</Button>
|
||||
);
|
||||
};
|
||||
export default ThemeSwitcher;
|
||||
|
||||
@ -5,5 +5,5 @@ import { ThemeProvider as NextThemesProvider } from "next-themes";
|
||||
import { type ThemeProviderProps } from "next-themes/dist/types";
|
||||
|
||||
export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
|
||||
return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
|
||||
return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
|
||||
}
|
||||
|
||||
@ -1,56 +1,57 @@
|
||||
import * as React from "react"
|
||||
import { Slot } from "@radix-ui/react-slot"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
import * as React from "react";
|
||||
import { Slot } from "@radix-ui/react-slot";
|
||||
import { cva, type VariantProps } from "class-variance-authority";
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const buttonVariants = cva(
|
||||
"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-primary text-primary-foreground hover:bg-primary/90",
|
||||
destructive:
|
||||
"bg-destructive text-destructive-foreground hover:bg-destructive/90",
|
||||
outline:
|
||||
"border border-input bg-background hover:bg-accent hover:text-accent-foreground",
|
||||
secondary:
|
||||
"bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
||||
ghost: "hover:bg-accent hover:text-accent-foreground",
|
||||
link: "text-primary underline-offset-4 hover:underline",
|
||||
},
|
||||
size: {
|
||||
default: "h-10 px-4 py-2",
|
||||
sm: "h-9 rounded-md px-3",
|
||||
lg: "h-11 rounded-md px-8",
|
||||
icon: "h-10 w-10",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
size: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default:
|
||||
"bg-primary text-primary-foreground hover:bg-primary/90",
|
||||
destructive:
|
||||
"bg-destructive text-destructive-foreground hover:bg-destructive/90",
|
||||
outline:
|
||||
"border border-input bg-background hover:bg-accent hover:text-accent-foreground",
|
||||
secondary:
|
||||
"bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
||||
ghost: "hover:bg-accent hover:text-accent-foreground",
|
||||
link: "text-primary underline-offset-4 hover:underline",
|
||||
},
|
||||
size: {
|
||||
default: "h-10 px-4 py-2",
|
||||
sm: "h-9 rounded-md px-3",
|
||||
lg: "h-11 rounded-md px-8",
|
||||
icon: "h-10 w-10",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
size: "default",
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
export interface ButtonProps
|
||||
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
|
||||
VariantProps<typeof buttonVariants> {
|
||||
asChild?: boolean
|
||||
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
|
||||
VariantProps<typeof buttonVariants> {
|
||||
asChild?: boolean;
|
||||
}
|
||||
|
||||
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
||||
({ className, variant, size, asChild = false, ...props }, ref) => {
|
||||
const Comp = asChild ? Slot : "button"
|
||||
return (
|
||||
<Comp
|
||||
className={cn(buttonVariants({ variant, size, className }))}
|
||||
ref={ref}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
)
|
||||
Button.displayName = "Button"
|
||||
({ className, variant, size, asChild = false, ...props }, ref) => {
|
||||
const Comp = asChild ? Slot : "button";
|
||||
return (
|
||||
<Comp
|
||||
className={cn(buttonVariants({ variant, size, className }))}
|
||||
ref={ref}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
);
|
||||
Button.displayName = "Button";
|
||||
|
||||
export { Button, buttonVariants }
|
||||
export { Button, buttonVariants };
|
||||
|
||||
@ -1,99 +1,107 @@
|
||||
"use client";
|
||||
|
||||
import React, { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { AnimatePresence, motion, LayoutGroup } from "framer-motion";
|
||||
import React, { useCallback, useEffect, useState } from "react";
|
||||
import { AnimatePresence, motion } from "framer-motion";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export const FlipWords = ({
|
||||
words,
|
||||
duration = 3000,
|
||||
className,
|
||||
words,
|
||||
duration = 3000,
|
||||
className,
|
||||
}: {
|
||||
words: string[];
|
||||
duration?: number;
|
||||
className?: string;
|
||||
words: string[];
|
||||
duration?: number;
|
||||
className?: string;
|
||||
}) => {
|
||||
const [currentWord, setCurrentWord] = useState(words[0]);
|
||||
const [isAnimating, setIsAnimating] = useState<boolean>(false);
|
||||
const [currentWord, setCurrentWord] = useState(words[0]);
|
||||
const [isAnimating, setIsAnimating] = useState<boolean>(false);
|
||||
|
||||
// thanks for the fix Julian - https://github.com/Julian-AT
|
||||
const startAnimation = useCallback(() => {
|
||||
const word = words[words.indexOf(currentWord) + 1] || words[0];
|
||||
setCurrentWord(word);
|
||||
setIsAnimating(true);
|
||||
}, [currentWord, words]);
|
||||
// thanks for the fix Julian - https://github.com/Julian-AT
|
||||
const startAnimation = useCallback(() => {
|
||||
const word = words[words.indexOf(currentWord) + 1] || words[0];
|
||||
setCurrentWord(word);
|
||||
setIsAnimating(true);
|
||||
}, [currentWord, words]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isAnimating)
|
||||
setTimeout(() => {
|
||||
startAnimation();
|
||||
}, duration);
|
||||
}, [isAnimating, duration, startAnimation]);
|
||||
useEffect(() => {
|
||||
if (!isAnimating)
|
||||
setTimeout(() => {
|
||||
startAnimation();
|
||||
}, duration);
|
||||
}, [isAnimating, duration, startAnimation]);
|
||||
|
||||
return (
|
||||
<AnimatePresence
|
||||
onExitComplete={() => {
|
||||
setIsAnimating(false);
|
||||
}}
|
||||
>
|
||||
<motion.div
|
||||
initial={{
|
||||
opacity: 0,
|
||||
y: 10,
|
||||
}}
|
||||
animate={{
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
}}
|
||||
transition={{
|
||||
type: "spring",
|
||||
stiffness: 100,
|
||||
damping: 10,
|
||||
}}
|
||||
exit={{
|
||||
opacity: 0,
|
||||
y: -40,
|
||||
x: 40,
|
||||
filter: "blur(8px)",
|
||||
scale: 2,
|
||||
position: "absolute",
|
||||
}}
|
||||
className={cn(
|
||||
"z-10 inline-block relative text-left text-neutral-900 dark:text-neutral-100 px-2",
|
||||
className,
|
||||
)}
|
||||
key={currentWord}
|
||||
>
|
||||
{/* edit suggested by Sajal: https://x.com/DewanganSajal */}
|
||||
{currentWord.split(" ").map((word, wordIndex) => (
|
||||
<motion.span
|
||||
key={word + wordIndex}
|
||||
initial={{ opacity: 0, y: 10, filter: "blur(8px)" }}
|
||||
animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
|
||||
transition={{
|
||||
delay: wordIndex * 0.3,
|
||||
duration: 0.3,
|
||||
}}
|
||||
className="inline-block whitespace-nowrap"
|
||||
>
|
||||
{word.split("").map((letter, letterIndex) => (
|
||||
<motion.span
|
||||
key={word + letterIndex}
|
||||
initial={{ opacity: 0, y: 10, filter: "blur(8px)" }}
|
||||
animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
|
||||
transition={{
|
||||
delay: wordIndex * 0.3 + letterIndex * 0.05,
|
||||
duration: 0.2,
|
||||
}}
|
||||
className="inline-block"
|
||||
>
|
||||
{letter}
|
||||
</motion.span>
|
||||
))}
|
||||
<span className="inline-block"> </span>
|
||||
</motion.span>
|
||||
))}
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
);
|
||||
return (
|
||||
<AnimatePresence
|
||||
onExitComplete={() => {
|
||||
setIsAnimating(false);
|
||||
}}
|
||||
>
|
||||
<motion.div
|
||||
initial={{
|
||||
opacity: 0,
|
||||
y: 10,
|
||||
}}
|
||||
animate={{
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
}}
|
||||
transition={{
|
||||
type: "spring",
|
||||
stiffness: 100,
|
||||
damping: 10,
|
||||
}}
|
||||
exit={{
|
||||
opacity: 0,
|
||||
y: -40,
|
||||
x: 40,
|
||||
filter: "blur(8px)",
|
||||
scale: 2,
|
||||
position: "absolute",
|
||||
}}
|
||||
className={cn(
|
||||
"z-10 inline-block relative text-left text-neutral-900 dark:text-neutral-100 px-2",
|
||||
className
|
||||
)}
|
||||
key={currentWord}
|
||||
>
|
||||
{/* edit suggested by Sajal: https://x.com/DewanganSajal */}
|
||||
{currentWord.split(" ").map((word, wordIndex) => (
|
||||
<motion.span
|
||||
key={word + wordIndex}
|
||||
initial={{ opacity: 0, y: 10, filter: "blur(8px)" }}
|
||||
animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
|
||||
transition={{
|
||||
delay: wordIndex * 0.3,
|
||||
duration: 0.3,
|
||||
}}
|
||||
className="inline-block whitespace-nowrap"
|
||||
>
|
||||
{word.split("").map((letter, letterIndex) => (
|
||||
<motion.span
|
||||
key={word + letterIndex}
|
||||
initial={{
|
||||
opacity: 0,
|
||||
y: 10,
|
||||
filter: "blur(8px)",
|
||||
}}
|
||||
animate={{
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
filter: "blur(0px)",
|
||||
}}
|
||||
transition={{
|
||||
delay: wordIndex * 0.3 + letterIndex * 0.05,
|
||||
duration: 0.2,
|
||||
}}
|
||||
className="inline-block"
|
||||
>
|
||||
{letter}
|
||||
</motion.span>
|
||||
))}
|
||||
<span className="inline-block"> </span>
|
||||
</motion.span>
|
||||
))}
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
);
|
||||
};
|
||||
|
||||
@ -6,59 +6,59 @@ import { motion, useMotionTemplate, useMotionValue } from "framer-motion";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export interface MagicCardProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||
gradientSize?: number;
|
||||
gradientColor?: string;
|
||||
gradientOpacity?: number;
|
||||
gradientSize?: number;
|
||||
gradientColor?: string;
|
||||
gradientOpacity?: number;
|
||||
}
|
||||
|
||||
export function MagicCard({
|
||||
children,
|
||||
className,
|
||||
gradientSize = 200,
|
||||
gradientColor = "#262626",
|
||||
gradientOpacity = 0.8,
|
||||
children,
|
||||
className,
|
||||
gradientSize = 200,
|
||||
gradientColor = "#262626",
|
||||
gradientOpacity = 0.8,
|
||||
}: MagicCardProps) {
|
||||
const mouseX = useMotionValue(-gradientSize);
|
||||
const mouseY = useMotionValue(-gradientSize);
|
||||
const mouseX = useMotionValue(-gradientSize);
|
||||
const mouseY = useMotionValue(-gradientSize);
|
||||
|
||||
const handleMouseMove = useCallback(
|
||||
(e: React.MouseEvent<HTMLDivElement>) => {
|
||||
const { left, top } = e.currentTarget.getBoundingClientRect();
|
||||
mouseX.set(e.clientX - left);
|
||||
mouseY.set(e.clientY - top);
|
||||
},
|
||||
[mouseX, mouseY],
|
||||
);
|
||||
const handleMouseMove = useCallback(
|
||||
(e: React.MouseEvent<HTMLDivElement>) => {
|
||||
const { left, top } = e.currentTarget.getBoundingClientRect();
|
||||
mouseX.set(e.clientX - left);
|
||||
mouseY.set(e.clientY - top);
|
||||
},
|
||||
[mouseX, mouseY]
|
||||
);
|
||||
|
||||
const handleMouseLeave = useCallback(() => {
|
||||
mouseX.set(-gradientSize);
|
||||
mouseY.set(-gradientSize);
|
||||
}, [mouseX, mouseY, gradientSize]);
|
||||
const handleMouseLeave = useCallback(() => {
|
||||
mouseX.set(-gradientSize);
|
||||
mouseY.set(-gradientSize);
|
||||
}, [mouseX, mouseY, gradientSize]);
|
||||
|
||||
useEffect(() => {
|
||||
mouseX.set(-gradientSize);
|
||||
mouseY.set(-gradientSize);
|
||||
}, [mouseX, mouseY, gradientSize]);
|
||||
useEffect(() => {
|
||||
mouseX.set(-gradientSize);
|
||||
mouseY.set(-gradientSize);
|
||||
}, [mouseX, mouseY, gradientSize]);
|
||||
|
||||
return (
|
||||
<div
|
||||
onMouseMove={handleMouseMove}
|
||||
onMouseLeave={handleMouseLeave}
|
||||
className={cn(
|
||||
"group relative flex size-full overflow-hidden rounded-xl bg-neutral-100 dark:bg-neutral-900 border text-black dark:text-white",
|
||||
className,
|
||||
)}
|
||||
>
|
||||
<div className="relative z-10">{children}</div>
|
||||
<motion.div
|
||||
className="pointer-events-none absolute -inset-px rounded-xl opacity-0 transition-opacity duration-300 group-hover:opacity-100"
|
||||
style={{
|
||||
background: useMotionTemplate`
|
||||
return (
|
||||
<div
|
||||
onMouseMove={handleMouseMove}
|
||||
onMouseLeave={handleMouseLeave}
|
||||
className={cn(
|
||||
"group relative flex size-full overflow-hidden rounded-xl bg-neutral-100 dark:bg-neutral-900 border text-black dark:text-white",
|
||||
className
|
||||
)}
|
||||
>
|
||||
<div className="relative z-10">{children}</div>
|
||||
<motion.div
|
||||
className="pointer-events-none absolute -inset-px rounded-xl opacity-0 transition-opacity duration-300 group-hover:opacity-100"
|
||||
style={{
|
||||
background: useMotionTemplate`
|
||||
radial-gradient(${gradientSize}px circle at ${mouseX}px ${mouseY}px, ${gradientColor}, transparent 100%)
|
||||
`,
|
||||
opacity: gradientOpacity,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
opacity: gradientOpacity,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -6,123 +6,123 @@ import { ChevronDown } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const NavigationMenu = React.forwardRef<
|
||||
React.ElementRef<typeof NavigationMenuPrimitive.Root>,
|
||||
React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
|
||||
React.ElementRef<typeof NavigationMenuPrimitive.Root>,
|
||||
React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
|
||||
>(({ className, children, ...props }, ref) => (
|
||||
<NavigationMenuPrimitive.Root
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative z-10 flex max-w-max flex-1 items-center justify-center",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<NavigationMenuViewport />
|
||||
</NavigationMenuPrimitive.Root>
|
||||
<NavigationMenuPrimitive.Root
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative z-10 flex max-w-max flex-1 items-center justify-center",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<NavigationMenuViewport />
|
||||
</NavigationMenuPrimitive.Root>
|
||||
));
|
||||
NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName;
|
||||
|
||||
const NavigationMenuList = React.forwardRef<
|
||||
React.ElementRef<typeof NavigationMenuPrimitive.List>,
|
||||
React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
|
||||
React.ElementRef<typeof NavigationMenuPrimitive.List>,
|
||||
React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<NavigationMenuPrimitive.List
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"group flex flex-1 list-none items-center justify-center space-x-1",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
<NavigationMenuPrimitive.List
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"group flex flex-1 list-none items-center justify-center space-x-1",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
|
||||
|
||||
const NavigationMenuItem = NavigationMenuPrimitive.Item;
|
||||
|
||||
const navigationMenuTriggerStyle = cva(
|
||||
"group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium cursor-default transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50",
|
||||
"group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium cursor-default transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50"
|
||||
);
|
||||
|
||||
const NavigationMenuTrigger = React.forwardRef<
|
||||
React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
|
||||
React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
|
||||
React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
|
||||
React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
|
||||
>(({ className, children, ...props }, ref) => (
|
||||
<NavigationMenuPrimitive.Trigger
|
||||
ref={ref}
|
||||
className={cn(navigationMenuTriggerStyle(), "group", className)}
|
||||
{...props}
|
||||
>
|
||||
{children}{" "}
|
||||
<ChevronDown
|
||||
className="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</NavigationMenuPrimitive.Trigger>
|
||||
<NavigationMenuPrimitive.Trigger
|
||||
ref={ref}
|
||||
className={cn(navigationMenuTriggerStyle(), "group", className)}
|
||||
{...props}
|
||||
>
|
||||
{children}{" "}
|
||||
<ChevronDown
|
||||
className="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</NavigationMenuPrimitive.Trigger>
|
||||
));
|
||||
NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName;
|
||||
|
||||
const NavigationMenuContent = React.forwardRef<
|
||||
React.ElementRef<typeof NavigationMenuPrimitive.Content>,
|
||||
React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
|
||||
React.ElementRef<typeof NavigationMenuPrimitive.Content>,
|
||||
React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<NavigationMenuPrimitive.Content
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
<NavigationMenuPrimitive.Content
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName;
|
||||
|
||||
const NavigationMenuLink = NavigationMenuPrimitive.Link;
|
||||
|
||||
const NavigationMenuViewport = React.forwardRef<
|
||||
React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
|
||||
React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
|
||||
React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
|
||||
React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<div className={cn("absolute left-0 top-full flex justify-center")}>
|
||||
<NavigationMenuPrimitive.Viewport
|
||||
className={cn(
|
||||
"origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
|
||||
className,
|
||||
)}
|
||||
ref={ref}
|
||||
{...props}
|
||||
/>
|
||||
</div>
|
||||
<div className={cn("absolute left-0 top-full flex justify-center")}>
|
||||
<NavigationMenuPrimitive.Viewport
|
||||
className={cn(
|
||||
"origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
|
||||
className
|
||||
)}
|
||||
ref={ref}
|
||||
{...props}
|
||||
/>
|
||||
</div>
|
||||
));
|
||||
NavigationMenuViewport.displayName =
|
||||
NavigationMenuPrimitive.Viewport.displayName;
|
||||
NavigationMenuPrimitive.Viewport.displayName;
|
||||
|
||||
const NavigationMenuIndicator = React.forwardRef<
|
||||
React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
|
||||
React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
|
||||
React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
|
||||
React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<NavigationMenuPrimitive.Indicator
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
|
||||
</NavigationMenuPrimitive.Indicator>
|
||||
<NavigationMenuPrimitive.Indicator
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
|
||||
</NavigationMenuPrimitive.Indicator>
|
||||
));
|
||||
NavigationMenuIndicator.displayName =
|
||||
NavigationMenuPrimitive.Indicator.displayName;
|
||||
NavigationMenuPrimitive.Indicator.displayName;
|
||||
|
||||
export {
|
||||
navigationMenuTriggerStyle,
|
||||
NavigationMenu,
|
||||
NavigationMenuList,
|
||||
NavigationMenuItem,
|
||||
NavigationMenuContent,
|
||||
NavigationMenuTrigger,
|
||||
NavigationMenuLink,
|
||||
NavigationMenuIndicator,
|
||||
NavigationMenuViewport,
|
||||
navigationMenuTriggerStyle,
|
||||
NavigationMenu,
|
||||
NavigationMenuList,
|
||||
NavigationMenuItem,
|
||||
NavigationMenuContent,
|
||||
NavigationMenuTrigger,
|
||||
NavigationMenuLink,
|
||||
NavigationMenuIndicator,
|
||||
NavigationMenuViewport,
|
||||
};
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import { ReactElement, ReactNode } from "react";
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipTrigger,
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipTrigger,
|
||||
} from "@/components/ui/tooltip";
|
||||
import { SIDE_OPTIONS } from "@radix-ui/react-popper";
|
||||
|
||||
@ -10,20 +10,20 @@ import { SIDE_OPTIONS } from "@radix-ui/react-popper";
|
||||
* The props for a simple tooltip.
|
||||
*/
|
||||
type SimpleTooltipProps = {
|
||||
/**
|
||||
* The content to display in the tooltip.
|
||||
*/
|
||||
content: string | ReactElement;
|
||||
/**
|
||||
* The content to display in the tooltip.
|
||||
*/
|
||||
content: string | ReactElement;
|
||||
|
||||
/**
|
||||
* The side to display the tooltip on.
|
||||
*/
|
||||
side?: (typeof SIDE_OPTIONS)[number];
|
||||
/**
|
||||
* The side to display the tooltip on.
|
||||
*/
|
||||
side?: (typeof SIDE_OPTIONS)[number];
|
||||
|
||||
/**
|
||||
* The children to render in this tooltip.
|
||||
*/
|
||||
children: ReactNode;
|
||||
/**
|
||||
* The children to render in this tooltip.
|
||||
*/
|
||||
children: ReactNode;
|
||||
};
|
||||
|
||||
/**
|
||||
@ -33,13 +33,13 @@ type SimpleTooltipProps = {
|
||||
* @return the tooltip jsx
|
||||
*/
|
||||
const SimpleTooltip = ({
|
||||
content,
|
||||
side,
|
||||
children,
|
||||
content,
|
||||
side,
|
||||
children,
|
||||
}: SimpleTooltipProps): ReactElement => (
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>{children}</TooltipTrigger>
|
||||
<TooltipContent side={side}>{content}</TooltipContent>
|
||||
</Tooltip>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>{children}</TooltipTrigger>
|
||||
<TooltipContent side={side}>{content}</TooltipContent>
|
||||
</Tooltip>
|
||||
);
|
||||
export default SimpleTooltip;
|
||||
|
||||
@ -1,30 +1,30 @@
|
||||
"use client"
|
||||
"use client";
|
||||
|
||||
import * as React from "react"
|
||||
import * as TooltipPrimitive from "@radix-ui/react-tooltip"
|
||||
import * as React from "react";
|
||||
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const TooltipProvider = TooltipPrimitive.Provider
|
||||
const TooltipProvider = TooltipPrimitive.Provider;
|
||||
|
||||
const Tooltip = TooltipPrimitive.Root
|
||||
const Tooltip = TooltipPrimitive.Root;
|
||||
|
||||
const TooltipTrigger = TooltipPrimitive.Trigger
|
||||
const TooltipTrigger = TooltipPrimitive.Trigger;
|
||||
|
||||
const TooltipContent = React.forwardRef<
|
||||
React.ElementRef<typeof TooltipPrimitive.Content>,
|
||||
React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
|
||||
React.ElementRef<typeof TooltipPrimitive.Content>,
|
||||
React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
|
||||
>(({ className, sideOffset = 4, ...props }, ref) => (
|
||||
<TooltipPrimitive.Content
|
||||
ref={ref}
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
"z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
TooltipContent.displayName = TooltipPrimitive.Content.displayName
|
||||
<TooltipPrimitive.Content
|
||||
ref={ref}
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
"z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
TooltipContent.displayName = TooltipPrimitive.Content.displayName;
|
||||
|
||||
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
|
||||
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { type ClassValue, clsx } from "clsx"
|
||||
import { twMerge } from "tailwind-merge"
|
||||
import { type ClassValue, clsx } from "clsx";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs))
|
||||
return twMerge(clsx(inputs));
|
||||
}
|
||||
|
||||
@ -1,80 +1,83 @@
|
||||
import type { Config } from "tailwindcss"
|
||||
import type {Config} from "tailwindcss"
|
||||
|
||||
const defaultTheme = require('tailwindcss/defaultTheme')
|
||||
|
||||
const config = {
|
||||
darkMode: ["class"],
|
||||
content: [
|
||||
'./pages/**/*.{ts,tsx}',
|
||||
'./components/**/*.{ts,tsx}',
|
||||
'./app/**/*.{ts,tsx}',
|
||||
'./src/**/*.{ts,tsx}',
|
||||
],
|
||||
prefix: "",
|
||||
theme: {
|
||||
container: {
|
||||
center: true,
|
||||
padding: "2rem",
|
||||
screens: {
|
||||
"2xl": "1400px",
|
||||
},
|
||||
darkMode: ["class"],
|
||||
content: [
|
||||
"./src/**/*.{ts,tsx}",
|
||||
],
|
||||
prefix: "",
|
||||
theme: {
|
||||
screens: {
|
||||
'xs': '475px',
|
||||
...defaultTheme.screens,
|
||||
},
|
||||
container: {
|
||||
center: true,
|
||||
padding: "2rem",
|
||||
screens: {
|
||||
"2xl": "1400px",
|
||||
},
|
||||
},
|
||||
extend: {
|
||||
colors: {
|
||||
border: "hsl(var(--border))",
|
||||
input: "hsl(var(--input))",
|
||||
ring: "hsl(var(--ring))",
|
||||
background: "hsl(var(--background))",
|
||||
foreground: "hsl(var(--foreground))",
|
||||
primary: {
|
||||
DEFAULT: "hsl(var(--primary))",
|
||||
foreground: "hsl(var(--primary-foreground))",
|
||||
},
|
||||
secondary: {
|
||||
DEFAULT: "hsl(var(--secondary))",
|
||||
foreground: "hsl(var(--secondary-foreground))",
|
||||
},
|
||||
destructive: {
|
||||
DEFAULT: "hsl(var(--destructive))",
|
||||
foreground: "hsl(var(--destructive-foreground))",
|
||||
},
|
||||
muted: {
|
||||
DEFAULT: "hsl(var(--muted))",
|
||||
foreground: "hsl(var(--muted-foreground))",
|
||||
},
|
||||
accent: {
|
||||
DEFAULT: "hsl(var(--accent))",
|
||||
foreground: "hsl(var(--accent-foreground))",
|
||||
},
|
||||
popover: {
|
||||
DEFAULT: "hsl(var(--popover))",
|
||||
foreground: "hsl(var(--popover-foreground))",
|
||||
},
|
||||
card: {
|
||||
DEFAULT: "hsl(var(--card))",
|
||||
foreground: "hsl(var(--card-foreground))",
|
||||
},
|
||||
},
|
||||
borderRadius: {
|
||||
lg: "var(--radius)",
|
||||
md: "calc(var(--radius) - 2px)",
|
||||
sm: "calc(var(--radius) - 4px)",
|
||||
},
|
||||
keyframes: {
|
||||
"accordion-down": {
|
||||
from: {height: "0"},
|
||||
to: {height: "var(--radix-accordion-content-height)"},
|
||||
},
|
||||
"accordion-up": {
|
||||
from: {height: "var(--radix-accordion-content-height)"},
|
||||
to: {height: "0"},
|
||||
},
|
||||
},
|
||||
animation: {
|
||||
"accordion-down": "accordion-down 0.2s ease-out",
|
||||
"accordion-up": "accordion-up 0.2s ease-out",
|
||||
},
|
||||
},
|
||||
},
|
||||
extend: {
|
||||
colors: {
|
||||
border: "hsl(var(--border))",
|
||||
input: "hsl(var(--input))",
|
||||
ring: "hsl(var(--ring))",
|
||||
background: "hsl(var(--background))",
|
||||
foreground: "hsl(var(--foreground))",
|
||||
primary: {
|
||||
DEFAULT: "hsl(var(--primary))",
|
||||
foreground: "hsl(var(--primary-foreground))",
|
||||
},
|
||||
secondary: {
|
||||
DEFAULT: "hsl(var(--secondary))",
|
||||
foreground: "hsl(var(--secondary-foreground))",
|
||||
},
|
||||
destructive: {
|
||||
DEFAULT: "hsl(var(--destructive))",
|
||||
foreground: "hsl(var(--destructive-foreground))",
|
||||
},
|
||||
muted: {
|
||||
DEFAULT: "hsl(var(--muted))",
|
||||
foreground: "hsl(var(--muted-foreground))",
|
||||
},
|
||||
accent: {
|
||||
DEFAULT: "hsl(var(--accent))",
|
||||
foreground: "hsl(var(--accent-foreground))",
|
||||
},
|
||||
popover: {
|
||||
DEFAULT: "hsl(var(--popover))",
|
||||
foreground: "hsl(var(--popover-foreground))",
|
||||
},
|
||||
card: {
|
||||
DEFAULT: "hsl(var(--card))",
|
||||
foreground: "hsl(var(--card-foreground))",
|
||||
},
|
||||
},
|
||||
borderRadius: {
|
||||
lg: "var(--radius)",
|
||||
md: "calc(var(--radius) - 2px)",
|
||||
sm: "calc(var(--radius) - 4px)",
|
||||
},
|
||||
keyframes: {
|
||||
"accordion-down": {
|
||||
from: { height: "0" },
|
||||
to: { height: "var(--radix-accordion-content-height)" },
|
||||
},
|
||||
"accordion-up": {
|
||||
from: { height: "var(--radix-accordion-content-height)" },
|
||||
to: { height: "0" },
|
||||
},
|
||||
},
|
||||
animation: {
|
||||
"accordion-down": "accordion-down 0.2s ease-out",
|
||||
"accordion-up": "accordion-up 0.2s ease-out",
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [require("tailwindcss-animate")],
|
||||
plugins: [require("tailwindcss-animate")],
|
||||
} satisfies Config
|
||||
|
||||
export default config
|
||||
Loading…
x
Reference in New Issue
Block a user