update ui

src/app/(app)/projects/page.tsx

@@ -1,9 +1,7 @@
 import ProjectCard from "@/components/project-card";
-import Rule from "@/components/horizontal-rule";
 import { getProjects } from "@/services/projects-service";
 import Image from "next/image";
 import Link from "next/link";
-import { Fragment } from "react";
 
 import ProfileImage from "../../../../public/images/liam_pietralla.jpg";
 
@@ -11,25 +9,26 @@ const ProjectsPage = async () => {
   const projects = await getProjects();
   return (
     <div className="flex flex-col gap-4 justify-center items-center my-15">
-      <div className="flex flex-row items-center gap-2 my-2">
+      <div className="flex flex-row items-center gap-2 my-2 animate-fade-in-up">
         <Image src={ProfileImage} alt="Liam Pietralla" className="rounded-full max-w-[50px]" />
         <Link href="/" className="group leading-relaxed font-semi-bold">
           Liam Pietralla
-          <span className="block max-w-0 group-hover:max-w-full transition-all duration-500 h-0.5 bg-white"></span>
+          <span className="block max-w-0 group-hover:max-w-full transition-all duration-500 h-0.5 bg-accent"></span>
         </Link>
       </div>
-      <h1 className="text-5xl font-bold">Projects</h1>
-      <h2>A collection of interesting projects that I am working on currently or have worked on in the past.</h2>
-      <div className="flex flex-col gap-4">
+      <h1 className="text-5xl font-bold animate-fade-in-up" style={{ animationDelay: "120ms" }}>Projects</h1>
+      <h2 className="animate-fade-in-up text-center max-w-2xl" style={{ animationDelay: "240ms" }}>
+        A collection of interesting projects that I am working on currently or have worked on in the past.
+      </h2>
+      <div className="flex flex-col gap-4 w-full">
         {projects.docs.map((project, index) => (
-          <Fragment key={index}>
+          <div key={index} className="animate-fade-in-up" style={{ animationDelay: `${320 + index * 120}ms` }}>
             <ProjectCard {...project} />
-            {index < projects.docs.length - 1 && <Rule />}
-          </Fragment>
+          </div>
         ))}
       </div>
     </div>
   )
 }
 
-export default ProjectsPage;
+export default ProjectsPage;