updated to next 14

package-lock.json

@@ -11,6 +11,7 @@
         "@react-three/drei": "^9.88.4",
         "@react-three/fiber": "^8.15.1",
         "@types/three": "^0.157.2",
+        "framer-motion": "^10.16.4",
         "next": "^14.0.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
@@ -61,6 +62,21 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@emotion/is-prop-valid": {
+      "version": "0.8.8",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
+      "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
+      "optional": true,
+      "dependencies": {
+        "@emotion/memoize": "0.7.4"
+      }
+    },
+    "node_modules/@emotion/memoize": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
+      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==",
+      "optional": true
+    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@@ -2261,6 +2277,29 @@
         "url": "https://github.com/sponsors/rawify"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "10.16.4",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-10.16.4.tgz",
+      "integrity": "sha512-p9V9nGomS3m6/CALXqv6nFGMuFOxbWsmaOrdmhyQimMIlLl3LC7h7l86wge/Js/8cRu5ktutS/zlzgR7eBOtFA==",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      },
+      "optionalDependencies": {
+        "@emotion/is-prop-valid": "^0.8.2"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -4961,6 +5000,21 @@
         "regenerator-runtime": "^0.14.0"
       }
     },
+    "@emotion/is-prop-valid": {
+      "version": "0.8.8",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
+      "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
+      "optional": true,
+      "requires": {
+        "@emotion/memoize": "0.7.4"
+      }
+    },
+    "@emotion/memoize": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
+      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==",
+      "optional": true
+    },
     "@eslint-community/eslint-utils": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@@ -6531,6 +6585,15 @@
       "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==",
       "dev": true
     },
+    "framer-motion": {
+      "version": "10.16.4",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-10.16.4.tgz",
+      "integrity": "sha512-p9V9nGomS3m6/CALXqv6nFGMuFOxbWsmaOrdmhyQimMIlLl3LC7h7l86wge/Js/8cRu5ktutS/zlzgR7eBOtFA==",
+      "requires": {
+        "@emotion/is-prop-valid": "^0.8.2",
+        "tslib": "^2.4.0"
+      }
+    },
     "fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",

package.json

@@ -12,6 +12,7 @@
     "@react-three/drei": "^9.88.4",
     "@react-three/fiber": "^8.15.1",
     "@types/three": "^0.157.2",
+    "framer-motion": "^10.16.4",
     "next": "^14.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

src/app/layout.tsx

@@ -3,6 +3,9 @@ import { Inter } from "next/font/google";
 import "./globals.css";
 import Stars from "@/components/stars";
 import Footer from "@/components/footer";
+import { Suspense } from "react";
+import Loading from "./loading";
+import Link from "next/link";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -19,8 +22,10 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body className={inter.className}>
+        <Link href={"/"}>
           <h1 className="fixed text-white top-0 z-50 m-5 text-5xl">J4roid</h1>
-        {children}
+        </Link>
+        <Suspense fallback={<Loading />}>{children}</Suspense>
         <Footer />
       </body>
     </html>

src/app/page.tsx

@@ -1,16 +1,29 @@
 import Stars from "@/components/stars";
 import Skeleton from "@/components/mesh/skeleton";
+import Link from "next/link";
+import FramerPageTransition from "@/components/providers/framerPageTransition";
+import { Suspense } from "react";
+import Loading from "./loading";
+import ModelLoading from "@/components/modelLoading";
 
 export default function Home() {
   return (
     <main className="w-100 m-0 h-screen">
       <Stars />
       <div className="fixed z-50 flex flex-col content-start text-left top-1/2 left-1/4 gap-5 text-white">
-        <button className="text-5xl  hover:text-shadow">ABOUT ME</button>
+        <Link className="text-5xl  hover:text-shadow" href={"/about"}>
-        <button className="text-5xl hover:text-shadow">MY MODELS</button>
+          ABOUT ME
-        <button className="text-5xl hover:text-shadow">CONTACT</button>
+        </Link>
+        <Link className="text-5xl hover:text-shadow" href={"/models"}>
+          MY MODELS
+        </Link>
+        <Link className="text-5xl hover:text-shadow" href={"/contact"}>
+          CONTACT
+        </Link>
         <div className=" fixed h-screen w-1/2 right-0 top-0">
+          <Suspense fallback={<ModelLoading />}>
             <Skeleton />
+          </Suspense>
         </div>
       </div>
     </main>

src/components/mesh/skeleton.tsx

@@ -60,7 +60,7 @@ function SkeletonMesh() {
 export default function Skeleton() {
   return (
     <Canvas
-      className="h-100 w-100"
+      className="h-100 w-100 transition ease-in-out duration-300"
       camera={{
         type: "perspective",
         position: [0, 0, 1],

src/components/stars.tsx

@@ -5,6 +5,7 @@ import * as THREE from "three";
 
 export default function Stars(props: any) {
   let cameraPosition = 0;
+
   const meshArray: Array<{ x: number; y: number; z: number }> = [];
   const starNumber = Math.floor(Math.random() * 300) + 200;
   for (var i = 0; i < starNumber; i++) {
@@ -21,13 +22,14 @@ export default function Stars(props: any) {
         cameraPosition += 1;
       }}
       {...props}
-      className="bg-black"
+      className="bg-black ease-in-out transition duration-300"
       camera={{
         position: [0, 1.2, cameraPosition],
         rotation: [0, THREE.MathUtils.degToRad(90), 0],
+        zoom: 1,
       }}
     >
-      <gridHelper args={[99, 99, "grey", "grey"]} />
+      <gridHelper args={[99, 50, "grey", "grey"]} />
       <group>
         <ambientLight />
         {meshArray.map((el) => {