pre major

Boutzi · Oct 23, 2024 · 14a2f3d · 14a2f3d
1 parent 0fd61a0
commit 14a2f3d
Show file tree

Hide file tree

Showing 16 changed files with 856 additions and 110 deletions.
diff --git a/app/[locale]/HomeClient.tsx b/app/[locale]/HomeClient.tsx
@@ -0,0 +1,42 @@
+"use client";
+import { useLoader } from "@/context/LoaderContext";
+import { useEffect } from "react";
+import { Contact } from "@/components/Contact";
+import Hero from "@/components/Hero";
+import { BestSkills } from "@/components/BestSkills";
+import { Spacing } from "@/components/Spacing";
+import { Status } from "@/components/Status";
+
+export default function HomeClient() {
+  const { showLoader, hideLoader } = useLoader();
+
+  useEffect(() => {
+    showLoader();
+    hideLoader();
+  }, [showLoader, hideLoader]);
+
+  return (
+    <main className="">
+      <div className="">
+        <Hero />
+      </div>
+      <div className="bg-gradient-to-t from-primary/0 via-primary/5 to-primary/20 pt-28 pb-28 max-sm:pt-16 max-sm:pb-16 border-b ">
+        <Spacing size="md" />
+        <Status />
+        <Spacing size="md" />
+      </div>
+      {/* bg-grid-pattern bg-grid-size */}
+      <div className="bg-secondary pt-28 pb-28 max-sm:pt-16 max-sm:pb-16 border-b">
+        <Spacing size="md" />
+        <BestSkills />
+        <Spacing size="md" />
+      </div>
+      <div className="pt-28 pb-28 max-sm:pt-16 max-sm:pb-16">
+        <Spacing size="md" />
+        <Contact />
+        <Spacing size="md" />
+      </div>
+      <Spacing size="md" />
+    </main>
+  );
+}
diff --git a/app/[locale]/layout.tsx b/app/[locale]/layout.tsx
@@ -12,6 +12,7 @@ import { getMessages, getTranslations } from "next-intl/server";
 import { routing } from "@/i18n/routing";
 import { unstable_setRequestLocale } from "next-intl/server";
 import { ColorProvider } from "@/context/ColorContext";
+import { LoaderProvider } from "@/context/LoaderContext";
 
 export function generateStaticParams() {
   return routing.locales.map((locale) => ({ locale }));
@@ -78,7 +79,7 @@ export default async function RootLayout({
                   {/* <LoaderProvider> */}
                   <GlobalStatus />
                   <Header />
-                  {children}
+                  <LoaderProvider>{children}</LoaderProvider>
                   <Footer />
                   {/* </LoaderProvider> */}
                 </ColorProvider>

diff --git a/app/[locale]/page.tsx b/app/[locale]/page.tsx
@@ -1,38 +1,12 @@
-import { Contact } from "@/components/Contact";
-import Hero from "@/components/Hero";
-import { BestSkills } from "@/components/BestSkills";
-import { Spacing } from "@/components/Spacing";
-import { Status } from "@/components/Status";
 import { unstable_setRequestLocale } from "next-intl/server";
+import HomeClient from "./HomeClient";
 
 export default function Home({
   params: { locale },
 }: {
   params: { locale: string };
 }) {
   unstable_setRequestLocale(locale);
-  return (
-    <main className="">
-      <div className="pt-28 pb-28 border-b max-md:pt-4 max-md:pb-16 relative group overflow-hidden">
-        <Hero />
-      </div>
-      <div className="bg-gradient-to-t from-primary/0 via-primary/5 to-primary/20 pt-28 pb-28 max-sm:pt-16 max-sm:pb-16 border-b ">
-        <Spacing size="md" />
-        <Status />
-        <Spacing size="md" />
-      </div>
-      {/* bg-grid-pattern bg-grid-size */}
-      <div className="bg-secondary pt-28 pb-28 max-sm:pt-16 max-sm:pb-16 border-b">
-        <Spacing size="md" />
-        <BestSkills />
-        <Spacing size="md" />
-      </div>
-      <div className="pt-28 pb-28 max-sm:pt-16 max-sm:pb-16">
-        <Spacing size="md" />
-        <Contact />
-        <Spacing size="md" />
-      </div>
-      <Spacing size="md" />
-    </main>
-  );
+
+  return <HomeClient />;
 }
diff --git a/components/Hero.tsx b/components/Hero.tsx
@@ -8,6 +8,7 @@ import { fetchDataFromBucket } from "@/utils/getBucket";
 import { CTA } from "./CTA";
 import { useUser } from "@/context/UserContext";
 import { useLocale, useTranslations } from "next-intl";
+import Image from "next/image";
 
 interface HeroProps {
   titleIntro: string;
@@ -38,56 +39,68 @@ function Hero() {
   return (
     <>
       {hero && (
-        <Section className="flex max-lg:flex-col items-center justify-between gap-6 min-h-[calc(100vh-400px)] max-lg:pt-8 max-lg:pb-8 max-md:pt-0">
-          <div className="flex-[3] flex flex-col gap-2">
-            <h1 className="font-caption text-7xl font-bold text-primary max-md:text-4xl max-sm:text-3xl max-xl:text-6xl max-lg:text-5xl">
-              {hero?.titleIntro}
-              <br />
-              {hero?.titleMain}
-              <br /> <span className="text-foreground">{hero?.titleOutro}</span>
-            </h1>
-            <h2 className="font-caption font-extralight text-2xl max-sm:text-xl">
-              {hero?.subFirst}
-              <br />
-              {hero?.subSecond}
-            </h2>
-            <div className="max-sm:hidden">
-              <Spacing size="md" />
-            </div>
-            <div className="flex gap-4 max-lg:m-auto max-sm:flex-col max-sm:items-center">
-              <div className="flex gap-4 max-sm:items-center">
-                <CTA
-                  label={t("heroSection.contact")}
-                  url="/contact"
-                  classes="text-background"
-                  target=""
-                />
-                <CTA
-                  label={t("heroSection.viewOnGitHub")}
-                  url={`${user?.githubUrl}`}
-                  classes="bg-foreground hover:bg-accent-foreground/70 text-background"
-                  target="_blank"
-                />
+        <div className="relative group pt-28 pb-28 border-b max-md:pt-4 max-md:pb-16 overflow-hidden">
+          <Image
+            src={"/hero-bg-black.webp"}
+            fill
+            priority
+            alt="Hero 3D model"
+            className="max-sm:object-right object-cover max-md:opacity-40"
+          />
+          <div className="w-full h-full relative group">
+            {/* <div className="absolute z-0 w-full h-full flex-[2] ml-auto max-lg:m-auto content-end">
+            <ThreeDModel />
+          </div> */}
+            <Section className="z-10 flex max-lg:flex-col items-center justify-between gap-6 min-h-[calc(100vh-400px)] max-lg:pt-8 max-lg:pb-8 max-md:pt-4 max-md:mx-auto">
+              <div className="flex-[3] flex flex-col gap-2">
+                <h1 className="drop-shadow-lg font-caption text-6xl font-bold text-primary max-md:text-4xl max-sm:text-3xl max-xl:text-6xl max-lg:text-5xl">
+                  {hero?.titleIntro}
+                  <br />
+                  <span className="text-7xl max-md:text-4xl">
+                    {hero?.titleMain}
+                  </span>
+                  <br />
+                  <span className="text-white">{hero?.titleOutro}</span>
+                </h1>
+                <h2 className="font-caption font-extralight text-xl max-sm:text-xl text-white">
+                  {hero?.subFirst}
+                  <br />
+                  {hero?.subSecond}
+                </h2>
+                <div className="max-sm:hidden">
+                  <Spacing size="md" />
+                </div>
+                <div className="flex gap-4 max-lg:m-auto max-sm:flex-col max-sm:items-center">
+                  <div className="flex gap-4 max-sm:items-center">
+                    <CTA
+                      label={t("heroSection.contact")}
+                      url="/contact"
+                      classes="text-black"
+                      target=""
+                    />
+                    <CTA
+                      label={t("heroSection.viewOnGitHub")}
+                      url={`${user?.githubUrl}`}
+                      classes="bg-white hover:bg-slate-200/70 text-black"
+                      target="_blank"
+                    />
+                  </div>
+                  {user?.allowCvDownload ? (
+                    <CTA
+                      label={t("heroSection.downloadCV")}
+                      url={`${user?.cvUrl}`}
+                      classes="bg-white hover:bg-slate-200/70 gap-2 text-black"
+                      target="_blank"
+                      icon={Download}
+                    />
+                  ) : (
+                    ""
+                  )}
+                </div>
               </div>
-              {user?.allowCvDownload ? (
-                <CTA
-                  label={t("heroSection.downloadCV")}
-                  url={`${user?.cvUrl}`}
-                  classes="bg-foreground hover:bg-accent-foreground/70 gap-2 text-background"
-                  target="_blank"
-                  icon={Download}
-                />
-              ) : (
-                ""
-              )}
-            </div>
+            </Section>
           </div>
-          <div className="flex-[2] ml-auto max-lg:m-auto content-end">
-            <div className="relative bg-primary flex w-80 h-80 rotate-45 max-lg:hidden">
-              <div className="absolute flex w-80 h-80 top-80 left-80 bg-gradient-to-tl from-background/0 from-60% to-primary/5"></div>
-            </div>
-          </div>
-        </Section>
+        </div>
       )}
     </>
   );

diff --git a/components/LangSwitcher.tsx b/components/LangSwitcher.tsx
@@ -14,7 +14,7 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { useLocale } from "next-intl";
-import { useRouter } from "next/navigation"; // Assurez-vous que ça vient de next/navigation
+import { useRouter } from "next/navigation";
 import { Link } from "@/i18n/routing";
 
 type Language = "en" | "fr" | "it" | "kr" | "jp";

diff --git a/components/ProgressBar.tsx b/components/ProgressBar.tsx
@@ -1,17 +1,18 @@
 "use client";
 import { useState, useEffect } from "react";
-import { usePathname } from "next/navigation";
 import { Progress } from "./ui/progress";
 
-export function ProgressBar() {
+interface ProgressBarProps {
+  onComplete: () => void;
+}
+
+export function ProgressBar({ onComplete }: ProgressBarProps) {
   const [progress, setProgress] = useState(0);
-  const [visible, setVisible] = useState(false);
-  const pathname = usePathname();
+  const [visible, setVisible] = useState(true);
 
   useEffect(() => {
     let animationFrameId: number;
     let start: number;
-    const timer = window.setTimeout; // Utilisation de const ici
 
     const handleStart = () => {
       setProgress(0);
@@ -20,37 +21,35 @@ export function ProgressBar() {
 
       const updateProgress = (currentTime: number) => {
         const elapsed = (currentTime - start) / 1000;
-        const newProgress = Math.min((elapsed / 1) * 100, 100); // 1 seconde pour 100%
+        const newProgress = Math.min((elapsed / 1) * 100, 100);
         setProgress(newProgress);
 
         if (newProgress < 100) {
           animationFrameId = requestAnimationFrame(updateProgress);
+        } else {
+          setTimeout(() => {
+            setVisible(false);
+            onComplete(); // Appeler la fonction de complétion ici
+          }, 200);
         }
       };
 
       animationFrameId = requestAnimationFrame(updateProgress);
     };
 
-    const handleComplete = () => {
-      setProgress(100);
-      setTimeout(() => setVisible(false), 200);
-    };
-
     handleStart();
-    const timeoutId = timer(() => handleComplete(), 1000); // Utilisation de const ici
 
     return () => {
       cancelAnimationFrame(animationFrameId);
-      clearTimeout(timeoutId); // Utilisation de const ici
     };
-  }, [pathname]);
+  }, [onComplete]); // Ajoutez onComplete comme dépendance
 
   return (
     visible && (
       <div>
         <Progress
           value={progress}
-          className="w-full h-0.5 fixed z-50 rounded-none"
+          className="w-full h-0.5 fixed top-0 z-50 rounded-none"
         />
       </div>
     )

diff --git a/components/ThreeDModel.tsx b/components/ThreeDModel.tsx
@@ -0,0 +1,32 @@
+// components/ThreeDModel.tsx
+import { Canvas } from "@react-three/fiber";
+import { OrbitControls } from "@react-three/drei";
+import { Suspense } from "react";
+import { useGLTF } from "@react-three/drei/native";
+
+interface ModelProps {
+  modelPath: string;
+}
+
+function Model({ modelPath }: ModelProps) {
+  const { scene } = useGLTF(modelPath);
+  return <primitive object={scene} scale={0.5} />;
+}
+
+export default function ThreeDModel() {
+  return (
+    <Canvas
+      camera={{ position: [0, 0, 5] }}
+      className="w-full h-full"
+      dpr={[1, 1]}
+      gl={{ alpha: false }}
+    >
+      <ambientLight intensity={1} />
+      <directionalLight position={[0, 5, 5]} />
+      <Suspense fallback={null}>
+        <Model modelPath="joe-bg.glb" />
+      </Suspense>
+      <OrbitControls enableZoom={false} />
+    </Canvas>
+  );
+}
diff --git a/components/Work.tsx b/components/Work.tsx
@@ -19,6 +19,7 @@ export const Work = (props: WorkProps) => {
           alt={`${props.title}`}
           fill
           priority
+          sizes="(max-width: 64px) 100vw, (max-width: 64px) 50vw, 33vw"
           className="object-cover rounded border"
         />
       </div>

diff --git a/context/LoaderContext.tsx b/context/LoaderContext.tsx
@@ -26,13 +26,15 @@ export const LoaderProvider = ({ children }: { children: ReactNode }) => {
   };
 
   const hideLoader = () => {
-    setIsLoading(false);
+    const timeout = setTimeout(() => {
+      setIsLoading(false);
+    }, 1500);
+    return () => clearTimeout(timeout);
   };
 
   return (
     <LoaderContext.Provider value={{ isLoading, showLoader, hideLoader }}>
-      <ProgressBar />
-      {children}
+      {isLoading ? <ProgressBar onComplete={hideLoader} /> : children}
     </LoaderContext.Provider>
   );
 };
diff --git a/next.config.mjs b/next.config.mjs
@@ -4,6 +4,7 @@ const withNextIntl = createNextIntlPlugin();
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+  transpilePackages: ["three"],
   images: {
     remotePatterns: [
       {