fix uneven project cards

Author: Aeonoi

app/page.tsx

@@ -2,7 +2,6 @@ import About from "@/components/about";
 import Hero from "@/components/hero";
 import Navbar from "@/components/navbar";
 import Projects from "@/components/projects";
-import Resume from "@/components/resume";
 import Transition from "@/components/transition";
 
 const Home: React.FC = () => {

biome.json

@@ -1,9 +1,5 @@
 {
   "$schema": "https://biomejs.dev/schemas/1.8.3/schema.json",
-  "files": {
-    "include": ["components", "app", "lib", "models", ".next/types/**/*.ts"],
-    "ignore": ["**/node_modules", "**/.*/"]
-  },
   "formatter": {
     "enabled": true,
     "formatWithErrors": false,

components/hero.tsx

@@ -61,8 +61,8 @@ const Hero: React.FC = () => {
           </div>
         </div>
         <div className="flex items-center justify-center">
-          <Card className="w-3/5">
-            <div className="relative border rounded-xl overflow-hidden">
+          <Card className="w-3/5 border rounded-xl border-[#778f52]">
+            <div className="relative rounded-xl border-[#778f52] overflow-hidden">
               <Image
                 src={"/icon.png"}
                 alt={"icon"}

components/project-card.tsx

@@ -21,7 +21,7 @@ const ProjectCard: React.FC<Props> = ({
 }: Props) => {
   return (
     <Card className="overflow-hidden group bg-background border border-[#778f52]">
-      <div className="relative overflow-hidden max-h-[25rem]">
+      <div className="relative overflow-hidden h-[25rem]">
         <Image
           src={image}
           alt={title}
@@ -33,7 +33,7 @@ const ProjectCard: React.FC<Props> = ({
         />
       </div>
       <CardContent>
-        <div className="m-3 grid grid-rows-3 text-[#d3c6aa]">
+        <div className="m-3 grid grid-rows-3 text-[#d3c6aa] h-[37vh]">
           {/* Title */}
           <div className="flex font-bold text-2xl justify-between w-full m-2 mt-4">
             <div>{title}</div>

components/projects.tsx

@@ -1,45 +1,39 @@
-import Background from "./background";
 import ProjectCard from "./project-card";
 
 const Projects: React.FC = () => {
   return (
-    <main className="scroll-m-14">
-      <Background>
-        <p
-          id="projects"
-          className="text-5xl items-center text-center text-[#d3c6aa] scroll-m-14 lg:m-10"
-        >
-          Projects
-        </p>
-        {/* TODO: Add current working project */}
-        <div className="grid grid-cols-1 xl:grid-cols-2 justify-items-center items-center gap-10">
-          <ProjectCard
-            link="https://github.com/Aeonoi/studyit"
-            description="A productivity tool to make focusing enjoyable and competitive.
-            A all in one solution to study while enjoying a built in youtube player and a balanced rank system.
-            In case of work load, there is a built in calendar for events and todos to help manage your schedule."
-            title="StudyIt"
-            image="/studyit.png"
-            stack={["React.js", "Next.js", "MongoDB", "TailwindCSS"]}
-          />
-          <ProjectCard
-            link="https://github.com/Aeonoi/notts"
-            description="A minimalistic note taking app that utilizes markdown.
-            Easily manage your notes by placing them in folders and quickly editing with auto save. Easily manage your notes by placing them in folders and quickly editing with auto save."
-            title="Notts"
-            image="/notts.png"
-            stack={["React.js", "Electron.js", "MongoDB", "TailwindCSS"]}
-          />
-          <ProjectCard
-            link="https://github.com/wrighs6/leanto"
-            description="A simple task management application designed to simplify the process of being on multiple teams.
-            leanto aims to provide an interface to display the tasks from each projects while also providing an interface to interact with additional project specific data and controls."
-            title="leanto"
-            image="/leanto.png"
-            stack={["Preact.js", "Electron.js", "MongoDB"]}
-          />
-        </div>
-      </Background>
+    <main id="projects" className="scroll-m-14">
+      <p className="text-5xl items-center text-center text-[#d3c6aa] scroll-m-14 lg:m-10">
+        Projects
+      </p>
+      {/* TODO: Add current working project */}
+      <div className="grid grid-cols-1 xl:grid-cols-2 justify-items-center items-center gap-10">
+        <ProjectCard
+          link="https://github.com/Aeonoi/studyit"
+          description="A productivity tool to make focusing enjoyable and competitive.
+          A all in one solution to study while enjoying a built in youtube player and a balanced rank system.
+          In case of work load, there is a built in calendar for events and todos to help manage your schedule."
+          title="StudyIt"
+          image="/studyit.png"
+          stack={["React.js", "Next.js", "MongoDB", "TailwindCSS"]}
+        />
+        <ProjectCard
+          link="https://github.com/Aeonoi/notts"
+          description="A minimalistic note taking app that utilizes markdown.
+          Easily manage your notes by placing them in folders and quickly editing with auto save. Easily manage your notes by placing them in folders and quickly editing with auto save."
+          title="Notts"
+          image="/notts.png"
+          stack={["React.js", "Electron.js", "MongoDB", "TailwindCSS"]}
+        />
+        <ProjectCard
+          link="https://github.com/wrighs6/leanto"
+          description="A simple task management application designed to simplify the process of being on multiple teams.
+          leanto aims to provide an interface to display the tasks from each projects while also providing an interface to interact with additional project specific data and controls."
+          title="leanto"
+          image="/leanto.png"
+          stack={["Preact.js", "Electron.js", "MongoDB"]}
+        />
+      </div>
     </main>
   );
 };