migrating to astro

src/components/core/FadeComponent.jsx

@@ -1,34 +1,13 @@
-//============================================================
-// Essential Imports
-//============================================================
-
-import clsx from "clsx";
-import React, { useEffect, useState } from "react";
-
-//============================================================
-// Component
-//============================================================
+import React from "react";
 
 const FadeComponent = ({ delay, children }) => {
-  const [showComponent, setShowComponent] = useState("opacity-0");
-
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      setShowComponent("opacity-100");
-    }, delay);
-
-    return () => {
-      clearTimeout(timer);
-    };
-  }, []);
 
   return (
     <div className="w-full bg-polar-night-400">
       <div
-        className={clsx(
-          "w-full transition-all ease-in-out duration-500 ",
-          showComponent
-        )}
+        className={
+          "w-full transition-all ease-in-out duration-500"
+        }
       >
         {children}
       </div>

src/components/pages/FrontPage.jsx

@@ -3,6 +3,7 @@
 //============================================================
 
 import React from "react";
+import '../../index.css';
 
 //============================================================
 // Imported Components
@@ -19,7 +20,7 @@ import Projects from '../sections/Projects';
 // Component
 //============================================================
 
-const DELAY = 750;
+const DELAY = 0;
 
 const FrontPage = () => {
   return (

src/components/text/AppearText.jsx

@@ -1,35 +1,10 @@
-//============================================================
-// Essential Imports
-//============================================================
-
-import React, { useState, useEffect } from "react";
-import clsx from "clsx";
-
-//============================================================
-// Component
-//============================================================
+import clsx from 'clsx';
 
 const AppearText = ({ text, delay, className }) => {
-  const [showText, setShowText] = useState("opacity-0");
-
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      setShowText("opacity-100");
-    }, delay);
-
-    return () => {
-      clearTimeout(timer);
-    };
-  }, []);
-
   return (
     <>
       <h1
-        className={clsx(
-          "transition-all ease-in-out duration-500",
-          className,
-          showText
-        )}
+        className={clsx("transition-all ease-in-out duration-500", className)}
       >
         {text}
       </h1>