fix loading page and optimize

Author: Dinesh7899

app.rar

@@ -1,7 +1,7 @@
 import React from 'react';
-import useGsapReveal from './useGsapReveal';
-import Work from './Work';
-import './globals.css';
+import useGsapReveal from '../useGsapReveal';
+import Work from '../Work';
+// import './globals.css';
 
 interface WorkItem {
   id: string;

app/Intro.tsx

@@ -1,8 +1,8 @@
 import React, { useRef, useEffect } from 'react';
 import Image from 'next/image';
-import Work from './Work';
-import './globals.css';
-import useGsapReveal from './useGsapReveal';
+import Work from '../Work';
+// import './globals.css';
+import useGsapReveal from '../useGsapReveal';
 import gsap from 'gsap';
 
 interface WorkItem {

app/Loading.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import useGsapReveal from './useGsapReveal';
+import useGsapReveal from '../useGsapReveal';
 
 interface ExperienceItemProps {
   startDate: string;

app/Certificates.tsx app/components/Certificates.tsxapp/Certificates.tsx renamed to app/components/Certificates.tsx

@@ -0,0 +1,52 @@
+import React, { useEffect, useRef } from "react";
+import { gsap } from "gsap";
+import OptimizedSVG from './OptimizedSVG';
+
+export const IntroServer: React.FC = () => {
+  const introRef = useRef<HTMLDivElement>(null);
+  const experience = 1; // years of experience
+
+  useEffect(() => {
+    // Animate the intro text after a delay to sync with SVG animation
+    if (introRef.current) {
+      gsap.to(introRef.current, { 
+        opacity: 1, 
+        delay: 1.5, 
+        ease: 'power3.out', 
+        duration: 2 
+      });
+    }
+  }, []);
+
+  return (
+    <section id="svgintro" className="intro-section w-full m-0 p-4 sm:p-0">
+      <div className="svg-container mb-8">
+        <OptimizedSVG />
+      </div>
+
+      <div className="intro text-left mt-4 max-sm:mt-0 font-matter" ref={introRef} style={{ opacity: 0 }}>
+        <strong className="pb-8 font-matter font-extrabold">Hey.. My Self S Dinesh Kumar : Code Meets Creativity. <br /></strong>
+        <p className="leading-relaxed max-sm:text-3xl max-sm:leading-loose font-matter font-medium text-4xl">
+          I&apos;m a{' '}
+          <span className="bg-green-100 px-4 py-1 pb-2">
+            Multidisciplinary
+          </span>{' '}
+          full-stack developer from India with {experience} year{experience > 1 ? 's' : ''} of experience who loves building websites that look Modern and work&apos;s{' '}
+          <span className="bg-sky-100 px-4 py-1 pb-2">
+            Awesome
+          </span>. <br />
+          I enjoy learning new skills and using different tools to create simple,{' '}
+          <span className="bg-purple-100 px-4 py-1 pb-2">
+            Creative
+          </span>{' '}
+          solutions. <br />
+          I also love working with others to build the{' '}
+          <span className="bg-orange-100 px-4 py-1 pb-2">
+            future
+          </span>{' '}
+          together.
+        </p>
+      </div>
+    </section>
+  );
+};

app/Contact.tsx app/components/Contact.tsxapp/Contact.tsx renamed to app/components/Contact.tsx

@@ -0,0 +1,33 @@
+import React, { useState, useEffect } from 'react';
+import './globals.css';
+
+export const Loading: React.FC = () => {
+  const [number, setNumber] = useState(1);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setNumber(prevNumber => (prevNumber < 100 ? prevNumber + 5 : 100)); // Faster increment
+    }, 20); // Faster interval
+
+    // Much faster loading completion - 300ms maximum
+    const timeout = setTimeout(() => {
+      setLoading(false);
+    }, 300); // Reduced from 2000ms to 300ms
+
+    return () => {
+      clearInterval(interval);
+      clearTimeout(timeout);
+    };
+  }, []);
+
+  if (!loading) {
+    return null;
+  }
+
+  return (
+    <div className="loading-container">
+      <div className="number">{number}</div>
+    </div>
+  );
+};

app/Experience.tsx app/components/Experience.tsxapp/Experience.tsx renamed to app/components/Experience.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+// import './globals.css';
+
+export const OptimizedLoading: React.FC = () => {
+  return (
+    <div className="optimized-loading-container">
+      <div className="loading-content">
+        <div className="loading-spinner"></div>
+        <p className="loading-text">Loading...</p>
+      </div>
+    </div>
+  );
+};