Continue improving projects page layout

src/pages/projects.tsx

@@ -4,6 +4,7 @@ import { cn } from "@/utils/helpers";
 import { readItems } from "@directus/sdk";
 import { GetStaticPropsResult, type NextPage } from "next";
 import Link from "next/link";
+import Balancer from "react-wrap-balancer";
 
 type Props = {
   projects: Awaited<ReturnType<typeof getProjects>>;
@@ -29,14 +30,14 @@ 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 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="mb-10 w-full text-center md:col-span-2 lg:col-span-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-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">
             Projects
           </h1>
-          <span className="text-lg text-zinc-400">
+          <Balancer className="text-lg text-zinc-400">
             created, maintained, or contributed to by me...
-          </span>
+          </Balancer>
         </div>
         {projects.map(
           ({ id, name, shortDescription: description, links, icon }) => {
@@ -47,12 +48,12 @@ const ProjectsPage: NextPage<Props> = ({ projects }) => {
               : {};
 
             return (
-              <div className="flex" key={id}>
+              <div className="max-w-fit" key={id}>
                 {/* @ts-expect-error because div can't accept href */}
                 <DynamicLink
                   key={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}
                 >
                   <div className="flex h-full w-14 items-center justify-center pr-5">
@@ -63,14 +64,18 @@ const ProjectsPage: NextPage<Props> = ({ projects }) => {
                       )}
                     ></i>
                   </div>
-                  <div className="flex-auto overflow-hidden">
-                    <div className="text-lg">{name}</div>
-                    <div className="whitespace-nowrap text-base font-normal opacity-70">
+                  <div className="overflow-hidden">
+                    <span className="text-sm md:text-base lg:text-lg">
+                      {name}
+                    </span>
+                    <p
+                      className="truncate text-xs opacity-70 md:text-sm lg:text-base"
+                      title={description}
+                    >
                       {description}
-                    </div>
+                    </p>
                   </div>
                 </DynamicLink>
-                <div className="grow" />
               </div>
             );
           },

src/styles/globals.scss

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