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

Merge pull request #13 from gractwo/1-przejścia-między-stronami

Browse Source 
1 przejścia między stronami
This commit is contained in:
Adam
2023-11-07 12:12:34 +01:00
committed by GitHub
parent 676f2cd236 da99f8ac3b
commit 0a974f3784
10 changed files with 129 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
package-lock.json generated
View File

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

1
package.json
View File

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

12
src/app/about/page.tsx Normal file
View File

@@ -0,0 +1,12 @@
import Stars from "@/components/stars";
import React from "react";
const page = () => {
return (
<main className="w-100 m-0 h-screen">
<Stars />
</main>
);
};
export default page;

12
src/app/contact/page.tsx Normal file
View File

@@ -0,0 +1,12 @@
import Stars from "@/components/stars";
import React from "react";
const page = () => {
return (
<main className="w-100 m-0 h-screen">
<Stars />
</main>
);
};
export default page;

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>

6
src/app/loading.tsx Normal file
View File

@@ -0,0 +1,6 @@
import Stars from "@/components/stars";
import React from "react";
export default function loading() {
return <main className="w-screen m-0 h-screen bg-black"></main>;
}

12
src/app/models/page.tsx Normal file
View File

@@ -0,0 +1,12 @@
import Stars from "@/components/stars";
import React from "react";
const page = () => {
return (
<main className="w-100 m-0 h-screen">
<Stars />
</main>
);
};
export default page;

14
src/app/page.tsx
View File

@@ -1,14 +1,22 @@
import Stars from "@/components/stars";
import Skeleton from "@/components/mesh/skeleton";
import Link from "next/link";
import { Suspense } from "react";
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 />
</div>

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