xevion/xevion.dev
1
0
Fork 0
mirror of https://github.com/Xevion/xevion.dev.git synced 2025-12-06 01:16:58 -06:00
Code Issues Packages Projects Releases Wiki Activity

Tune icons, allow div/a element based on link availability, 'Projects' h1

Browse Source
This commit is contained in:
Xevion
2024-12-28 21:30:11 -06:00
parent 55b491bd33
commit d75925ba1f
2 changed files with 33 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Dots.tsx
View File

@@ -111,7 +111,7 @@ const Dots = ({
}, []);
return <div ref={canvasRef} className={cn(
"fixed left-0 right-0 top-0 bottom-0 pointer-events-none -z-1 opacity-0",
"fixed left-0 right-0 top-0 bottom-0 pointer-events-none -z-10 opacity-0",
className
)} />;
};

34
src/pages/projects.tsx
View File

@@ -27,19 +27,27 @@ export async function getStaticProps(): Promise<GetStaticPropsResult<Props>> {;
const ProjectsPage: NextPage<Props> = ({projects}) => {
return (
<AppWrapper dotsClassName="animate-bg-fast">
<div className="max-w-500 mx-auto mt-20 grid h-full w-max grid-cols-1 gap-x-20 gap-y-7 py-2 md:grid-cols-2 lg:grid-cols-3">
{projects.map(({ name, shortDescription: description, links, icon }) => {
return (
<Link
<div className="max-w-500 mx-auto py-20 grid h-full w-max grid-cols-1 gap-x-20 gap-y-9 md:grid-cols-2 lg:grid-cols-3">
<div className="md:col-span-2 lg:col-span-3 w-full">
<h1 className="text-4xl md:text-5xl text-center text-zinc-200 opacity-100 font-hanken">
Projects
</h1>
</div>
{projects.map(({ name, shortDescription: description, links, icon }) =>
{
const DynamicLink = links?.length ?? 0 > 0 ? Link : "div";
const linkProps = links?.length ?? 0 > 0 ? { href: links![0]!.url, target: "_blank", rel: "noreferrer" } : {};
return <div className="flex">
{/* @ts-ignore */}
<DynamicLink
key={name}
className="flex relative max-w-[30rem] flex-shrink items-center opacity-75 transition-opacity hover:opacity-100 bg-black/30 hover:bg-white/5 py-2 rounded"
href={links![0]?.url ?? "#"}
target="_blank"
rel="noreferrer"
title={name}
className="flex pl-3 pr-5 pt-1 pb-2.5 relative max-w-[30rem] items-center transition-colors rounded-lg text-zinc-400 hover:text-zinc-50 bg-black/10 hover:bg-zinc-500/10"
{...linkProps}
>
<div className="pr-5 pt-2">
<div className="w-14 pr-5 h-full flex items-center justify-center">
<i className={cn(icon ?? "fa-heart", "fa-solid text-3xl text-opacity-80 saturate-0")}></i>
</div>
<div className="flex-auto overflow-hidden">
@@ -48,9 +56,11 @@ const ProjectsPage: NextPage<Props> = ({projects}) => {
{description}
</div>
</div>
</Link>
);
})}
</DynamicLink>
<div className="grow" />
</div>;
}
)}
</div>
</AppWrapper>
);