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

Continue improving projects page layout

Browse Source
This commit is contained in:
Xevion
2025-01-01 03:02:07 -06:00
parent 4ba3560749
commit ee1e1cfdf6
2 changed files with 18 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/pages/projects.tsx
View File

@@ -4,6 +4,7 @@ import { cn } from "@/utils/helpers";
import { readItems } from "@directus/sdk"; import { readItems } from "@directus/sdk";
import { GetStaticPropsResult, type NextPage } from "next"; import { GetStaticPropsResult, type NextPage } from "next";
import Link from "next/link"; import Link from "next/link";
import Balancer from "react-wrap-balancer";
type Props = { type Props = {
projects: Awaited<ReturnType<typeof getProjects>>; projects: Awaited<ReturnType<typeof getProjects>>;
@@ -29,14 +30,14 @@ 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 grid h-full w-max grid-cols-1 gap-x-20 gap-y-9 py-20 md:grid-cols-2 lg:grid-cols-3"> <div className="mx-auto grid grid-cols-1 justify-center gap-y-4 px-4 py-20 align-middle sm:grid-cols-2 md:max-w-[50rem] lg:max-w-[75rem] lg:grid-cols-3 lg:gap-y-9">
<div className="mb-10 w-full text-center md:col-span-2 lg:col-span-3"> <div className="mb-3 text-center sm:col-span-2 md:mb-5 lg:col-span-3 lg:mb-7">
<h1 className="pb-3 font-hanken text-4xl text-zinc-200 opacity-100 md:text-5xl"> <h1 className="pb-3 font-hanken text-4xl text-zinc-200 opacity-100 md:text-5xl">
Projects Projects
</h1> </h1>
<span className="text-lg text-zinc-400"> <Balancer className="text-lg text-zinc-400">
created, maintained, or contributed to by me... created, maintained, or contributed to by me...
</span> </Balancer>
</div> </div>
{projects.map( {projects.map(
({ id, name, shortDescription: description, links, icon }) => { ({ id, name, shortDescription: description, links, icon }) => {
@@ -47,12 +48,12 @@ const ProjectsPage: NextPage<Props> = ({ projects }) => {
: {}; : {};
return ( return (
<div className="flex" key={id}> <div className="max-w-fit" key={id}>
{/* @ts-expect-error because div can't accept href */} {/* @ts-expect-error because div can't accept href */}
<DynamicLink <DynamicLink
key={name} key={name}
title={name} title={name}
className="relative flex max-w-[30rem] items-center rounded-lg bg-black/10 pb-2.5 pl-3 pr-5 pt-1 text-zinc-400 transition-colors hover:bg-zinc-500/10 hover:text-zinc-50" className="flex items-center justify-start overflow-hidden rounded bg-black/10 pb-2.5 pl-3 pr-5 pt-1 text-zinc-400 transition-colors hover:bg-zinc-500/10 hover:text-zinc-50"
{...linkProps} {...linkProps}
> >
<div className="flex h-full w-14 items-center justify-center pr-5"> <div className="flex h-full w-14 items-center justify-center pr-5">
@@ -63,14 +64,18 @@ const ProjectsPage: NextPage<Props> = ({ projects }) => {
)} )}
></i> ></i>
</div> </div>
<div className="flex-auto overflow-hidden"> <div className="overflow-hidden">
<div className="text-lg">{name}</div> <span className="text-sm md:text-base lg:text-lg">
<div className="whitespace-nowrap text-base font-normal opacity-70"> {name}
</span>
<p
className="truncate text-xs opacity-70 md:text-sm lg:text-base"
title={description}
>
{description} {description}
</div> </p>
</div> </div>
</DynamicLink> </DynamicLink>
<div className="grow" />
</div> </div>
); );
}, },

3
src/styles/globals.scss
View File

@@ -7,6 +7,7 @@
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
// Used for ItemCard
@mixin active { @mixin active {
.elements { .elements {
@apply grid opacity-100; @apply grid opacity-100;
@@ -19,7 +20,7 @@
html, html,
body { body {
@apply font-inter; @apply font-inter overflow-x-hidden;
} }
.item { .item {