home optimized more

Author: sinanptm

app/page.tsx

@@ -1,55 +1,48 @@
-import { TypewriterEffect } from '@/components/ui/typewriter-effect';
+import { TYPEWRITER_WORDS } from '@/constants';
 import About from '@/components/home/About';
 import Name from '@/components/home/Name';
+import { memo, Suspense } from 'react';
+import dynamic from 'next/dynamic';
 import Image from 'next/image';
-import { memo } from 'react';
 
-const page = () => {
-  const words = [
-    { text: "I" },
-    { text: "Build" },
-    { text: "Innovative", },
-    { text: "Digital", },
-    { text: "Solutions", },
-    { text: "With", },
-    { text: "Precision" },
-    { text: "And" },
-    { text: "Passion" },
-    { text: "!" },
-  ];
+const TypewriterEffect = dynamic(() => import('@/components/ui/typewriter-effect'), {
+  ssr: false
+});
+
+
+const HomePage = () => {
   return (
     <main className='flex flex-col pt-12'>
-      {/* Profile image for Seo */}
-      <div className='relative'>
+      {/* Optimized SEO Image */}
+      <div className='relative h-0 w-0'>
         <Image
           src="/assets/profile-image.jpg"
           alt="Muhammed sinan - Mern stack developer"
-          fill
-          className="object-contain opacity-0"
-          loading='lazy'
+          width={1}
+          height={1}
+          priority={false}
+          className="opacity-0"
         />
       </div>
 
-      {/* <Hero /> */}
       <section className="w-full mx-auto sm:px-16 px-6 pb-10">
-        <div className={`pb-7 mx-auto flex flex-row items-start gap-5`}>
-          <div className="flex flex-col justify-center items-center mt-5 ml-5">
-          </div>
+        <div className="pb-7 mx-auto flex flex-row items-start gap-5">
           <div>
             <header>
               <Name />
             </header>
             <article>
-              <TypewriterEffect words={words} />
+              <Suspense>
+                <TypewriterEffect words={TYPEWRITER_WORDS} />
+              </Suspense>
             </article>
           </div>
         </div>
       </section>
 
-      {/* About section */}
       <About />
     </main>
   );
 };
 
-export default memo(page);
+export default memo(HomePage);

components/home/About.tsx

@@ -1,14 +1,14 @@
 'use client';
 
 import { buttonHover, buttonVariants, containerVariants, fadeInUp, imageVariants, staggerChildren } from '@/style';
-import { motion } from 'framer-motion';
-import { memo } from 'react';
 import { profile, thingsIDo } from '@/constants';
+import SocialLinks from '../SocialLinks';
+import { motion } from 'framer-motion';
 import ThingsCard from './ThingsCard';
+import { Button } from '../ui/button';
 import Image from 'next/image';
+import { memo } from 'react';
 import Link from 'next/link';
-import { Button } from '../ui/button';
-import SocialLinks from '../SocialLinks';
 
 const About = () => {
     return (

components/home/Name.tsx

@@ -1,7 +1,9 @@
 'use client';
+
 import { profile } from '@/constants';
 import { containerVariants } from '@/style';
 import { motion } from 'framer-motion';
+import { memo } from 'react';
 
 const Name = () => {
     return (
@@ -16,4 +18,4 @@ const Name = () => {
     );
 };
 
-export default Name;
+export default memo(Name);

components/ui/typewriter-effect.tsx

@@ -2,9 +2,9 @@
 
 import { cn } from "@/lib/utils";
 import { motion, stagger, useAnimate, useInView } from "framer-motion";
-import { useEffect } from "react";
+import { memo, useEffect } from "react";
 
-export const TypewriterEffect = ({
+const TypewriterEffect = ({
   words,
   className,
   cursorClassName,
@@ -184,3 +184,5 @@ export const TypewriterEffectSmooth = ({
     </div>
   );
 };
+
+export default memo(TypewriterEffect)

constants/index.ts

@@ -17,6 +17,20 @@ export const profile = {
 };
 export const hostedUrl = "https://sinanptm.vercel.app";
 
+export const TYPEWRITER_WORDS = [
+  { text: "I" },
+  { text: "Build" },
+  { text: "Innovative" },
+  { text: "Digital" },
+  { text: "Solutions" },
+  { text: "With" },
+  { text: "Precision" },
+  { text: "And" },
+  { text: "Passion" },
+  { text: "!" }
+];
+
+
 export const socialMediaLinks = [
     {
       title: 'LinkedIn',