loading screen updates. info page updates

dsmooot · Sep 27, 2024 · fa8a8af · fa8a8af
1 parent 28718ca
commit fa8a8af
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 43 deletions.
diff --git a/app/info/page.tsx b/app/info/page.tsx
@@ -65,7 +65,7 @@ const Contact = () => {
         </div>
         <div className='flex w-full flex-row items-center justify-start'>
           <div>
-            <Body id='blurb' style={{ lineHeight: 1.75 }}>
+            <Body id='blurb' style={{ lineHeight: 1.75 }} className='text-black'>
               {<b>{'Thanks for taking the time to view my portfolio.'}</b>}
               {
                 '\nI’ve carefully curated these projects to showcase my skills and capabilities.\nI hope they give you a clear understanding of both my experience and potential. \nIf you’d like to learn more about my background or how I can contribute to your ideas,\n'

diff --git a/src/components/dom/common/Footer.tsx b/src/components/dom/common/Footer.tsx
@@ -16,7 +16,7 @@ const Footer = ({ buttons = [] }: FooterProps) => {
     <div className='fixed bottom-0 left-0 flex w-full flex-row items-center justify-center gap-x-8 pb-8 lg:justify-end lg:pr-24'>
       <div
         id='fadeout'
-        className={`pointer-events-none absolute bottom-0 left-0 flex h-56 w-full items-end justify-start bg-gradient-to-t ${pathname.includes('/projects/') ? currentProject?.twFade : 'from-white'} via-30% to-transparent`}
+        className={`pointer-events-none absolute bottom-0 left-0 flex h-32 w-full items-end justify-start bg-gradient-to-t ${pathname.includes('/projects/') ? currentProject?.twFade : 'from-white'} via-30% to-transparent`}
       ></div>
       {buttons.map((button, index) => (
         <Button key={index} button={button} className='z-10 min-w-[150px] text-white' />

diff --git a/src/components/dom/common/LoadingScreen.tsx b/src/components/dom/common/LoadingScreen.tsx
@@ -1,5 +1,5 @@
 'use client'
-import { useRef, useEffect } from 'react'
+import { useRef, useEffect, useState } from 'react'
 import gsap, { useGSAP } from '@/core/lib/gsap'
 import { useProgress } from '@react-three/drei'
 import { Tagline } from './Themed'
@@ -12,6 +12,7 @@ const LoadingScreen = () => {
   const shadowRef = useRef<HTMLDivElement>(null)
   const containerRef = useRef<HTMLDivElement>(null)
   const { triggerEvent } = useEvent()
+  const [visible, setVisible] = useState(true)
 
   useGSAP(() => {
     if (ballRef.current) {
@@ -26,14 +27,17 @@ const LoadingScreen = () => {
   }, [])
 
   useGSAP(() => {
-    if (progress === 100) {
+    if (progress === 100 && containerRef.current) {
       gsap.to(containerRef.current, {
         backgroundColor: '#000',
         opacity: 0,
-        duration: 0.5,
+        duration: 2,
+        onStart: () => {
+          triggerEvent({ type: 'loaded' })
+        },
         onComplete: () => {
           containerRef.current.style.display = 'none'
-          triggerEvent({ type: 'loaded' })
+          setVisible(false)
         },
       })
       return
@@ -83,50 +87,52 @@ const LoadingScreen = () => {
   }, [progress])
 
   return (
-    <div
-      ref={containerRef}
-      className={
-        'pointer-events-none fixed z-10 flex size-full flex-col items-center justify-center overflow-hidden bg-[#082b23]'
-      }
-    >
+    visible && (
       <div
-        ref={ballRef}
-        className='mb-16 rounded-full'
-        style={{
-          width: '100px',
-          height: '100px',
-          backgroundImage: "url('/img/waves-dark.png')",
-          backgroundSize: 'cover',
-          backgroundRepeat: 'no-repeat',
-          backgroundPosition: '0% 0%',
-        }}
-      />
-      <div
-        ref={shadowRef}
-        className='bg-black'
-        style={{
-          width: '100px',
-          height: '20px',
-          bottom: '110px',
-          filter: 'blur(8px)',
-          opacity: 0.6,
-        }}
-      />
-      <div className='mb-16 flex flex-col items-center justify-center gap-y-4'>
-        <Tagline className='loading font-exo_2 text-white'>
-          {'Loading: '} {progress.toFixed(0)}
-        </Tagline>
+        ref={containerRef}
+        className={
+          'pointer-events-none fixed z-10 flex size-full flex-col items-center justify-center overflow-hidden bg-[#082b23]'
+        }
+      >
+        <div
+          ref={ballRef}
+          className='mb-16 rounded-full'
+          style={{
+            width: '100px',
+            height: '100px',
+            backgroundImage: "url('/img/waves-dark.png')",
+            backgroundSize: 'cover',
+            backgroundRepeat: 'no-repeat',
+            backgroundPosition: '0% 0%',
+          }}
+        />
         <div
-          className='loading h-px w-full bg-white transition-all duration-75 ease-in-out'
+          ref={shadowRef}
+          className='bg-black'
           style={{
-            width: `${progress}%`,
+            width: '100px',
+            height: '20px',
+            bottom: '110px',
+            filter: 'blur(8px)',
+            opacity: 0.6,
           }}
-        ></div>
-        {/* <div className='start flex flex-col items-center gap-y-4 opacity-0'>
+        />
+        <div className='mb-16 flex flex-col items-center justify-center gap-y-4'>
+          <Tagline className='loading font-exo_2 text-white'>
+            {'Loading: '} {progress.toFixed(0)}
+          </Tagline>
+          <div
+            className='loading h-px w-full bg-white transition-all duration-75 ease-in-out'
+            style={{
+              width: `${progress}%`,
+            }}
+          ></div>
+          {/* <div className='start flex flex-col items-center gap-y-4 opacity-0'>
           <Button button={{ text: 'Welcome', onClick: setStart }} className='bg-[#115a49] text-white shadow-lg' />
         </div> */}
+        </div>
       </div>
-    </div>
+    )
   )
 }