diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 63c9a5e..744b917 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,23 +1,14 @@
import type { Metadata } from "next";
import { Inter } from "next/font/google";
-import { Zilla_Slab_Highlight } from "next/font/google";
-import { Zen_Tokyo_Zoo } 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";
+import Logo from "@/components/Logo/logo";
const inter = Inter({ subsets: ["latin"] });
-const zilla_slab_highlight = Zilla_Slab_Highlight({
- weight: "700",
- subsets: ["latin"],
-});
-const zen_tokyo_zoo = Zen_Tokyo_Zoo({
- weight: "400",
- subsets: ["latin"],
-});
export const metadata: Metadata = {
title: "Create Next App",
@@ -32,16 +23,7 @@ export default function RootLayout({
return (
-
-
-
- J4
-
- studio
-
-
+
}>{children}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index f10a94e..d97d974 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -19,7 +19,7 @@ export default function Home() {
"whitespace-normal tracking-wide text-6xl leading-relaxed hover:text-stachowiak-green-950 transition ease-in-out duration-300"
}
duration={2}
- delay={0.5}
+ delay={1}
>
{about}
@@ -30,7 +30,7 @@ export default function Home() {
"whitespace-normal tracking-wide text-6xl leading-relaxed hover:text-stachowiak-green-950 transition ease-in-out duration-300"
}
duration={2}
- delay={1}
+ delay={1.5}
>
{models}
@@ -41,7 +41,7 @@ export default function Home() {
"whitespace-normal tracking-wide text-6xl leading-relaxed hover:text-stachowiak-green-950 transition ease-in-out duration-300"
}
duration={2}
- delay={1.5}
+ delay={2}
>
{contact}
diff --git a/src/components/Logo/logo.tsx b/src/components/Logo/logo.tsx
new file mode 100644
index 0000000..88ab04a
--- /dev/null
+++ b/src/components/Logo/logo.tsx
@@ -0,0 +1,49 @@
+"use client";
+
+import React, { useState } from "react";
+import { Zilla_Slab_Highlight } from "next/font/google";
+import { Zen_Tokyo_Zoo } from "next/font/google";
+import { motion } from "framer-motion";
+
+const zilla_slab_highlight = Zilla_Slab_Highlight({
+ weight: "700",
+ subsets: ["latin"],
+});
+const zen_tokyo_zoo = Zen_Tokyo_Zoo({
+ weight: "400",
+ subsets: ["latin"],
+});
+
+const Logo1 = "studio";
+const Logo2 = "roid";
+
+const logo = () => {
+ const [logoState, setLogoState] = useState(Logo1);
+ function handleLogoClick() {
+ setLogoState((prevState) => (prevState === Logo1 ? Logo2 : Logo1));
+ }
+ return (
+
+
+ J4
+
+
+ {logoState}
+
+
+ );
+};
+
+export default logo;
diff --git a/src/components/stars.tsx b/src/components/stars.tsx
index 02deafc..33f471e 100644
--- a/src/components/stars.tsx
+++ b/src/components/stars.tsx
@@ -1,26 +1,28 @@
"use client";
-import { Canvas } from "@react-three/fiber";
+import { OrthographicCamera, PerspectiveCamera } from "@react-three/drei";
+import { Canvas, useFrame, useThree } from "@react-three/fiber";
+import { useEffect, useMemo, useRef, useState } from "react";
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++) {
- meshArray.push({
- x: Math.random() * (-50 + 100) - 100,
- y: Math.random() * (50 + 50) - 50,
- z: Math.random() * (100 + 100) - 100,
- });
- }
+ const [cameraPosition, setCameraPosition] = useState(0);
+ const meshArray = useMemo(() => {
+ const array: Array<{ x: number; y: number; z: number }> = [];
+ const starNumber = Math.floor(Math.random() * 400) + 200;
+ for (var i = 0; i < starNumber; i++) {
+ array.push({
+ x: Math.random() * (-50 + 100) - 100,
+ y: Math.random() * (50 + 50) - 50,
+ z: Math.random() * (100 + 100) - 100,
+ });
+ }
+ return array;
+ }, []);
+ // The plan is to increase the value of stars on the axis bringing them closer and once they pass the camera reset them to initial position
return (