small changes added (#33)

app/page.tsx

@@ -1,26 +1,17 @@
 import Navigation from "../components/Navigation";
 import Hero from "../components/Hero";
-import dynamic from "next/dynamic";
-
-// Dynamic components are not rendered on the server, but on the client.
-const ProjectsDynamic = dynamic(() => import("../components/Projects"), {});
-const ContactFormDynamic = dynamic(
-  () => import("../components/ContactForm"),
-  {},
-);
-const FooterDynamic = dynamic(
-  () => import("../components/FooterComponent"),
-  {},
-);
+import Projects from "../components/Projects";
+import ContactForm from "../components/ContactForm";
+import FooterComponent from "../components/FooterComponent";
 
 export default function Home() {
   return (
     <main className='flex min-h-screen flex-col items-center w-full snap-y snap-mandatory scroll-smooth overflow-hidden'>
       <Navigation />
       <Hero />
-      <ProjectsDynamic />
-      <ContactFormDynamic />
-      <FooterDynamic />
+      <Projects />
+      <ContactForm />
+      <FooterComponent />
     </main>
   );
 }

app/styles/globals.css

@@ -1,5 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap");
-
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

components/ContactForm.tsx

@@ -34,7 +34,7 @@ const ContactForm = () => {
       className='z-50 bg-white dark:bg-gray-900 w-4/5 my-10'
       id='contact'
     >
-      <h1 className='text-lg md:text-4xl uppercase text-gray-500 text-center my-20 tracking-widest font-semibold md:font-normal'>
+      <h1 className='text-lg md:text-4xl uppercase text-gray-900 dark:text-white opacity-70 text-center my-20 tracking-widest font-semibold md:font-normal'>
         Contact Me
       </h1>
       <Card>

components/Hero.tsx

@@ -53,7 +53,7 @@ const Hero = () => {
                   className='mb-3 rounded-full shadow-lg'
                 />
               </m.div>
-              <h5 className='mb-1 text-2xl font-medium text-gray-900 dark:text-white'>
+              <h5 className='mb-1 text-2xl opacity-70 font-semibold text-gray-900 dark:text-white'>
                 Yunior Batista
               </h5>
               <m.div
@@ -64,7 +64,7 @@ const Hero = () => {
                 transition={{ delay: 1.5, ease: "easeInOut" }}
                 className='my-5'
               >
-                <span className='text-transparent bg-gradient-to-r from-green-300 via-blue-500 to-purple-600 bg-clip-text font-kaushan text-2xl md:text-4xl font-semibold'>
+                <span className='text-transparent bg-gradient-to-r from-green-300 via-blue-500 to-purple-600 bg-clip-text text-2xl md:text-4xl font-semibold'>
                   Frontend Developer
                 </span>
               </m.div>

components/Navigation.tsx

@@ -12,7 +12,7 @@ const Navigation = () => {
     >
       <Navbar.Brand
         href='/'
-        className='header-text self-center text-2xl font-semibold font-kaushan text-teal-600 dark:text-teal-300 lg:text-3xl hover:text-teal-600'
+        className='self-center text-2xl font-semibold text-transparent bg-gradient-to-r from-green-300 via-blue-500 to-purple-600 bg-clip-text md:text-4xl lg:text-3xl hover:text-teal-600'
       >
         Yunior B.
       </Navbar.Brand>
@@ -21,11 +21,6 @@ const Navigation = () => {
         <Navbar.Toggle />
       </div>
       <Navbar.Collapse className='uppercase'>
-        {/* <Navbar.Link href='#about' role='navigation'>
-          <span className='pb-1 hover:text-teal-600 dark:hover:text-teal-300 hover:border-b-2  hover:border-indigo-500 hover:border-spacing-8'>
-            About Me
-          </span>
-        </Navbar.Link> */}
         <Navbar.Link href='#projects' role='navigation'>
           <span className='pb-1 hover:text-teal-600 dark:hover:text-teal-300 hover:border-b-2  hover:border-indigo-500 hover:border-spacing-4'>
             Some Projects I&apos;ve Built

components/Project.tsx

@@ -46,6 +46,9 @@ const Project = ({ project }: ProjectProps) => {
               alt='Project image'
               className='image max-h-200 rounded-t-md'
               loading='lazy'
+              placeholder='blur'
+              blurDataURL='data:image/png'
+              fetchPriority='low'
             />
             <div className='p-6 md:h-60 h-70 flex flex-col justify-around'>
               <h5 className='text-2xl font-bold tracking-tight text-gray-900 dark:text-white'>

components/Projects.tsx

@@ -19,7 +19,7 @@ const Projects = async () => {
       className='bg-white w-4/5 mx-auto my-20 dark:bg-gray-900 z-50'
       id='projects'
     >
-      <h3 className='w-full text-lg md:text-4xl font-semibold md:font-normal uppercase text-gray-500 text-center my-20 tracking-widest'>
+      <h3 className='w-full text-lg md:text-4xl font-semibold md:font-normal uppercase text-gray-900 dark:text-white opacity-70 text-center my-20 tracking-widest'>
         Some Projects I&apos;ve Built
       </h3>
       <div className='grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 w-full gap-6'>

tailwind.config.js

@@ -10,19 +10,5 @@ module.exports = {
     "./components/**/*.{js,jsx,ts,tsx}",
     "./app/**/*.{js,jsx,ts,tsx}",
   ],
-  // content: [
-  //   "./node_modules/flowbite-react/**/*.{js,jsx,ts,tsx}",
-  //   "./node_modules/flowbite/**/*.{js,jsx,ts,tsx}",
-  //   "./public/**/*.html",
-  //   "./components/**/*.{js,jsx,ts,tsx}",
-  //   "./app/**/*.{js,jsx,ts,tsx}",
-  // ],
-  theme: {
-    extend: {
-      fontFamily: {
-        kaushan: ["Kaushan Script", "cursive"],
-      },
-    },
-  },
   plugins: [require("@tailwindcss/forms"), require("flowbite/plugin")],
 };