beautify
This commit is contained in:
vchikalkin
parent
4ee687768c
commit
8cc96564e1
@ -18,7 +18,7 @@ export default async function RootLayout({ children }: { readonly children: Reac
|
|||||||
<body
|
<body
|
||||||
className={cn(
|
className={cn(
|
||||||
inter.className,
|
inter.className,
|
||||||
'mx-auto min-h-screen max-w-2xl bg-background px-6 py-12 antialiased sm:py-24',
|
'mx-auto min-h-screen max-w-2xl bg-background px-6 py-12 antialiased sm:py-24 bg-gray-100',
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<NextIntlClientProvider messages={messages}>{children}</NextIntlClientProvider>
|
<NextIntlClientProvider messages={messages}>{children}</NextIntlClientProvider>
|
||||||
|
|||||||
@ -2,6 +2,7 @@ import { About } from '@/components/about';
|
|||||||
import { Contacts } from '@/components/contacts';
|
import { Contacts } from '@/components/contacts';
|
||||||
import { Person } from '@/components/person';
|
import { Person } from '@/components/person';
|
||||||
import { Skills } from '@/components/skills';
|
import { Skills } from '@/components/skills';
|
||||||
|
import { NeonGradientCard } from '@/components/ui/neon-gradient-card';
|
||||||
import { Work } from '@/components/work';
|
import { Work } from '@/components/work';
|
||||||
import { type Metadata } from 'next';
|
import { type Metadata } from 'next';
|
||||||
import { getTranslations } from 'next-intl/server';
|
import { getTranslations } from 'next-intl/server';
|
||||||
@ -22,12 +23,16 @@ export async function generateMetadata({ params: { locale } }: Parameters): Prom
|
|||||||
|
|
||||||
export default function HomePage() {
|
export default function HomePage() {
|
||||||
return (
|
return (
|
||||||
<main className="flex min-h-dvh flex-col space-y-10">
|
<main className="">
|
||||||
|
<NeonGradientCard neonColors={{ firstColor: '#ae00ff2b', secondColor: '#0011ff55' }}>
|
||||||
|
<div className="flex flex-col justify-between gap-y-5 bg-white/30 backdrop-blur-sm ">
|
||||||
<Person />
|
<Person />
|
||||||
<About />
|
<About />
|
||||||
<Work />
|
<Work />
|
||||||
<Skills />
|
<Skills />
|
||||||
<Contacts />
|
<Contacts />
|
||||||
|
</div>
|
||||||
|
</NeonGradientCard>
|
||||||
</main>
|
</main>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
151
components/ui/neon-gradient-card.tsx
Normal file
151
components/ui/neon-gradient-card.tsx
Normal file
@ -0,0 +1,151 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import {
|
||||||
|
CSSProperties,
|
||||||
|
ReactElement,
|
||||||
|
ReactNode,
|
||||||
|
useEffect,
|
||||||
|
useRef,
|
||||||
|
useState,
|
||||||
|
} from "react";
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
|
interface NeonColorsProps {
|
||||||
|
firstColor: string;
|
||||||
|
secondColor: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface NeonGradientCardProps {
|
||||||
|
/**
|
||||||
|
* @default <div />
|
||||||
|
* @type ReactElement
|
||||||
|
* @description
|
||||||
|
* The component to be rendered as the card
|
||||||
|
* */
|
||||||
|
as?: ReactElement;
|
||||||
|
/**
|
||||||
|
* @default ""
|
||||||
|
* @type string
|
||||||
|
* @description
|
||||||
|
* The className of the card
|
||||||
|
*/
|
||||||
|
className?: string;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @default ""
|
||||||
|
* @type ReactNode
|
||||||
|
* @description
|
||||||
|
* The children of the card
|
||||||
|
* */
|
||||||
|
children?: ReactNode;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @default 5
|
||||||
|
* @type number
|
||||||
|
* @description
|
||||||
|
* The size of the border in pixels
|
||||||
|
* */
|
||||||
|
borderSize?: number;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @default 20
|
||||||
|
* @type number
|
||||||
|
* @description
|
||||||
|
* The size of the radius in pixels
|
||||||
|
* */
|
||||||
|
borderRadius?: number;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @default "{ firstColor: '#ff00aa', secondColor: '#00FFF1' }"
|
||||||
|
* @type string
|
||||||
|
* @description
|
||||||
|
* The colors of the neon gradient
|
||||||
|
* */
|
||||||
|
neonColors?: NeonColorsProps;
|
||||||
|
|
||||||
|
[key: string]: any;
|
||||||
|
}
|
||||||
|
|
||||||
|
const NeonGradientCard: React.FC<NeonGradientCardProps> = ({
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
borderSize = 2,
|
||||||
|
borderRadius = 20,
|
||||||
|
neonColors = {
|
||||||
|
firstColor: "#ff00aa",
|
||||||
|
secondColor: "#00FFF1",
|
||||||
|
},
|
||||||
|
...props
|
||||||
|
}) => {
|
||||||
|
const containerRef = useRef<HTMLDivElement>(null);
|
||||||
|
const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const updateDimensions = () => {
|
||||||
|
if (containerRef.current) {
|
||||||
|
const { offsetWidth, offsetHeight } = containerRef.current;
|
||||||
|
setDimensions({ width: offsetWidth, height: offsetHeight });
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
updateDimensions();
|
||||||
|
window.addEventListener("resize", updateDimensions);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener("resize", updateDimensions);
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (containerRef.current) {
|
||||||
|
const { offsetWidth, offsetHeight } = containerRef.current;
|
||||||
|
setDimensions({ width: offsetWidth, height: offsetHeight });
|
||||||
|
}
|
||||||
|
}, [children]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
ref={containerRef}
|
||||||
|
style={
|
||||||
|
{
|
||||||
|
"--border-size": `${borderSize}px`,
|
||||||
|
"--border-radius": `${borderRadius}px`,
|
||||||
|
"--neon-first-color": neonColors.firstColor,
|
||||||
|
"--neon-second-color": neonColors.secondColor,
|
||||||
|
"--card-width": `${dimensions.width}px`,
|
||||||
|
"--card-height": `${dimensions.height}px`,
|
||||||
|
"--card-content-radius": `${borderRadius - borderSize}px`,
|
||||||
|
"--pseudo-element-background-image": `linear-gradient(0deg, ${neonColors.firstColor}, ${neonColors.secondColor})`,
|
||||||
|
"--pseudo-element-width": `${dimensions.width + borderSize * 2}px`,
|
||||||
|
"--pseudo-element-height": `${dimensions.height + borderSize * 2}px`,
|
||||||
|
"--after-blur": `${dimensions.width / 3}px`,
|
||||||
|
} as CSSProperties
|
||||||
|
}
|
||||||
|
className={cn(
|
||||||
|
"relative z-10 size-full rounded-[var(--border-radius)]",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"relative size-full min-h-[inherit] rounded-[var(--card-content-radius)] bg-gray-100 p-6",
|
||||||
|
"before:absolute before:-left-[var(--border-size)] before:-top-[var(--border-size)] before:-z-10 before:block",
|
||||||
|
"before:h-[var(--pseudo-element-height)] before:w-[var(--pseudo-element-width)] before:rounded-[var(--border-radius)] before:content-['']",
|
||||||
|
"before:bg-[linear-gradient(0deg,var(--neon-first-color),var(--neon-second-color))] before:bg-[length:100%_200%]",
|
||||||
|
"before:animate-background-position-spin",
|
||||||
|
"after:absolute after:-left-[var(--border-size)] after:-top-[var(--border-size)] after:-z-10 after:block",
|
||||||
|
"after:h-[var(--pseudo-element-height)] after:w-[var(--pseudo-element-width)] after:rounded-[var(--border-radius)] after:blur-[var(--after-blur)] after:content-['']",
|
||||||
|
"after:bg-[linear-gradient(0deg,var(--neon-first-color),var(--neon-second-color))] after:bg-[length:100%_200%] after:opacity-80",
|
||||||
|
"after:animate-background-position-spin",
|
||||||
|
"dark:bg-neutral-900",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export { NeonGradientCard };
|
||||||
@ -55,6 +55,19 @@ export default {
|
|||||||
lg: 'var(--radius)',
|
lg: 'var(--radius)',
|
||||||
md: 'calc(var(--radius) - 2px)',
|
md: 'calc(var(--radius) - 2px)',
|
||||||
sm: 'calc(var(--radius) - 4px)'
|
sm: 'calc(var(--radius) - 4px)'
|
||||||
|
},
|
||||||
|
animation: {
|
||||||
|
'background-position-spin': 'background-position-spin 3000ms infinite alternate'
|
||||||
|
},
|
||||||
|
keyframes: {
|
||||||
|
'background-position-spin': {
|
||||||
|
'0%': {
|
||||||
|
backgroundPosition: 'top center'
|
||||||
|
},
|
||||||
|
'100%': {
|
||||||
|
backgroundPosition: 'bottom center'
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user