tune index/projects Dots animation fading

src/components/AppWrapper.tsx

@@ -4,6 +4,7 @@ import type { FunctionComponent, ReactNode } from "react";
 
 type WrapperProps = {
   className?: string;
+  dotsClassName?: string;
   children?: ReactNode;
 };
 
@@ -15,6 +16,7 @@ const DotsDynamic = dynamic(
 const AppWrapper: FunctionComponent<WrapperProps> = ({
   children,
   className,
+  dotsClassName,
 }: WrapperProps) => {
   return (
     <main
@@ -23,7 +25,7 @@ const AppWrapper: FunctionComponent<WrapperProps> = ({
         className,
       )}
     >
-      <DotsDynamic />
+      <DotsDynamic className={dotsClassName} />
       {children}
     </main>
   );

src/components/Dots.tsx

@@ -1,7 +1,14 @@
+import { cn } from '@/utils/helpers';
 import { p5i, P5I } from 'p5i';
 import React, { useEffect, useRef } from 'react';
 
-const Dots: React.FC = () => {
+interface DotsProps {
+    className?: string;
+}
+
+const Dots = ({
+    className,
+}: DotsProps) => {
     const canvasRef = useRef<HTMLDivElement | null>(null);
 
     const {
@@ -103,7 +110,10 @@ const Dots: React.FC = () => {
         };
     }, []);
 
-    return <div ref={canvasRef} className='fixed left-0 right-0 top-0 bottom-0 pointer-events-none -z-1 animate-bg delay-500' />;
+    return <div ref={canvasRef} className={cn(
+        "fixed left-0 right-0 top-0 bottom-0 pointer-events-none -z-1 opacity-0",
+        className
+    )} />;
 };
 
 export default Dots;

src/pages/index.tsx

@@ -46,7 +46,7 @@ const Home: NextPage<IndexProps> = ({
         <meta name="description" content="My personal website." />
         <link rel="icon" href="/favicon.ico" />
       </Head>
-      <AppWrapper className="overflow-x-hidden">
+      <AppWrapper className="overflow-x-hidden" dotsClassName="animate-bg">
         <div className="flex h-screen w-screen items-center justify-center overflow-hidden">
           <div className="flex w-full flex-col items-center justify-start">
             <nav className="animate-fade-in">

src/pages/projects.tsx

@@ -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>

tailwind.config.cjs

@@ -47,7 +47,8 @@ module.exports = {
 					"radial-gradient(50% 50% at 50% 50%, var(--tw-gradient-stops))",
 			},
 			animation: {
-				bg: "fade-in 3s ease-in forwards",
+				"bg-fast": "fade-in 0.5s ease-in-out 0.5s forwards",
+				bg: "fade-in 1.2s ease-in-out 1.1s forwards",
         "fade-in": "fade-in 3s ease-in-out forwards",
 				title: "title 3s ease-out forwards",
 				"fade-left": "fade-left 3s ease-in-out forwards",
@@ -58,9 +59,6 @@ module.exports = {
 					"0%": {
 						opacity: "0%",
 					},
-					"75%": {
-						opacity: "0%",
-					},
 					"100%": {
 						opacity: "100%",
 					},