admin/portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

beautify

Browse Source
This commit is contained in:
vchikalkin 2024-12-08 21:16:28 +03:00
parent 4ee687768c
commit 8cc96564e1
4 changed files with 176 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/layout.tsx
View File

@ -18,7 +18,7 @@ export default async function RootLayout({ children }: { readonly children: Reac
<body
className={cn(
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>

17
app/page.tsx
View File

@ -2,6 +2,7 @@ import { About } from '@/components/about';
import { Contacts } from '@/components/contacts';
import { Person } from '@/components/person';
import { Skills } from '@/components/skills';
import { NeonGradientCard } from '@/components/ui/neon-gradient-card';
import { Work } from '@/components/work';
import { type Metadata } from 'next';
import { getTranslations } from 'next-intl/server';
@ -22,12 +23,16 @@ export async function generateMetadata({ params: { locale } }: Parameters): Prom
export default function HomePage() {
return (
<main className="flex min-h-dvh flex-col space-y-10">
<Person />
<About />
<Work />
<Skills />
<Contacts />
<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 />
<About />
<Work />
<Skills />
<Contacts />
</div>
</NeonGradientCard>
</main>
);
}

151
components/ui/neon-gradient-card.tsx Normal file
View 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 };

13
tailwind.config.ts
View File

@ -55,6 +55,19 @@ export default {
lg: 'var(--radius)',
md: 'calc(var(--radius) - 2px)',
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'
}
}
}
}
},