archiwum/j4studio-web
Archived
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updated to next 14

Browse Source
This commit is contained in:
Adam Cała
2023-11-07 12:00:13 +01:00
parent 676f2cd236
commit b1b36a732b
6 changed files with 93 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/app/layout.tsx
View File

@@ -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}>
<h1 className="fixed text-white top-0 z-50 m-5 text-5xl">J4roid</h1>
{children}
<Link href={"/"}>
<h1 className="fixed text-white top-0 z-50 m-5 text-5xl">J4roid</h1>
</Link>
<Suspense fallback={<Loading />}>{children}</Suspense>
<Footer />
</body>
</html>

21
src/app/page.tsx
View File

@@ -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>
<button className="text-5xl hover:text-shadow">MY MODELS</button>
<button className="text-5xl hover:text-shadow">CONTACT</button>
<Link className="text-5xl hover:text-shadow" href={"/about"}>
ABOUT ME
</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">
<Skeleton />
<Suspense fallback={<ModelLoading />}>
<Skeleton />
</Suspense>
</div>
</div>
</main>

2
src/components/mesh/skeleton.tsx
View File

@@ -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],

6
src/components/stars.tsx
View File

@@ -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) => {