ivandimitrov8080/idimitrov.dev
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

some stars

Browse Source
This commit is contained in:
Ivan Kirilov Dimitrov 2024-07-31 18:58:36 +02:00
parent 159502dd00
commit bc860f1717
No known key found for this signature in database
GPG Key ID: 0BDAD4B211C49294
3 changed files with 46 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/app/globals.css
View File

@ -26,6 +26,11 @@ main {
@apply flex flex-col w-full h-full bg-slate-950/95;
}
main div,
svg {
@apply z-20;
}
svg {
@apply transition duration-200 ease-in;
}

2
src/app/layout.tsx
View File

@ -12,7 +12,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
return (
<html lang="en">
<body>
<Stars />
<Stars count={40} />
<main>
<Navbar />
{children}

42
src/components/stars.tsx
View File

@ -1,5 +1,43 @@
const Stars = () => {
return <div>heheee</div>;
"use client";
import { useEffect, useState } from "react";
type Props = {
count: number;
};
const Stars = ({ count }: Props) => {
const [width, setWidth] = useState(0);
const [height, setHeight] = useState(0);
useEffect(() => {
setWidth(window.innerWidth);
setHeight(window.innerHeight);
}, []);
const randomRgba = (alpha: number) => {
return `rgba(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255}, ${alpha})`
}
return (
<div>
{Array.from({ length: count }).map((_it, i) => {
const radius = `${Math.random() * 7}px`
return (
<div
key={i}
style={{
left: Math.random() * width,
top: Math.random() * height,
background: `radial-gradient(circle, ${randomRgba(1)} 0%, ${randomRgba(0)} 100%)`,
width: radius,
height: radius
}}
className="absolute z-10">
</div>
)
})}
</div>
);
};
export default Stars;