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

tune index/projects Dots animation fading

Browse Source
This commit is contained in:
Xevion
2024-12-28 18:25:16 -06:00
parent da6333d39a
commit c4c805c83b
5 changed files with 24 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/pages/projects.tsx
View File

@@ -19,12 +19,12 @@ export async function getStaticProps(): Promise<GetStaticPropsResult<Props>> {
const ProjectsPage: NextPage<Props> = ({projects}) => {
return (
<AppWrapper>
<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 }) => (
<Link
key={name}
className="flex relative max-w-[17rem] flex-shrink items-center opacity-75 transition-opacity hover:opacity-100 bg-black/30 hover:bg-white/5 py-2 rounded"
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"
@@ -32,11 +32,11 @@ const ProjectsPage: NextPage<Props> = ({projects}) => {
>
<div className="pr-5 pt-2">
<i className={cn(icon ?? "fa-heart", "fa-solid text-2xl pb-1 text-opacity-80 saturate-0")}></i>
<i className={cn(icon ?? "fa-heart", "fa-solid text-3xl text-opacity-80 saturate-0")}></i>
</div>
<div className="flex-auto">
<div className="text-normal">{name}</div>
<div className="text-sm font-normal opacity-70">
<div className="flex-auto overflow-hidden">
<div className="text-lg">{name}</div>
<div className="text-base font-normal opacity-70 whitespace-nowrap">
{description}
</div>
</div>