xevion/xevion.dev
1
0
Fork 0
mirror of https://github.com/Xevion/xevion.dev.git synced 2025-12-06 13:17:06 -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( 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 className
)} />; )} />;
}; };

54
src/pages/projects.tsx
View File

@@ -27,30 +27,40 @@ export async function getStaticProps(): Promise<GetStaticPropsResult<Props>> {;
const ProjectsPage: NextPage<Props> = ({projects}) => { const ProjectsPage: NextPage<Props> = ({projects}) => {
return ( return (
<AppWrapper dotsClassName="animate-bg-fast"> <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"> <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">
{projects.map(({ name, shortDescription: description, links, icon }) => { <div className="md:col-span-2 lg:col-span-3 w-full">
return ( <h1 className="text-4xl md:text-5xl text-center text-zinc-200 opacity-100 font-hanken">
<Link Projects
key={name} </h1>
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" </div>
href={links![0]?.url ?? "#"} {projects.map(({ name, shortDescription: description, links, icon }) =>
target="_blank" {
rel="noreferrer" const DynamicLink = links?.length ?? 0 > 0 ? Link : "div";
title={name} const linkProps = links?.length ?? 0 > 0 ? { href: links![0]!.url, target: "_blank", rel: "noreferrer" } : {};
>
<div className="pr-5 pt-2"> return <div className="flex">
<i className={cn(icon ?? "fa-heart", "fa-solid text-3xl text-opacity-80 saturate-0")}></i> {/* @ts-ignore */}
</div> <DynamicLink
<div className="flex-auto overflow-hidden"> key={name}
<div className="text-lg">{name}</div> title={name}
<div className="text-base font-normal opacity-70 whitespace-nowrap"> 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"
{description} {...linkProps}
>
<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>
</div> <div className="flex-auto overflow-hidden">
</Link> <div className="text-lg">{name}</div>
); <div className="text-base font-normal opacity-70 whitespace-nowrap">
})} {description}
</div>
</div>
</DynamicLink>
<div className="grow" />
</div>;
}
)}
</div> </div>
</AppWrapper> </AppWrapper>
); );