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

add Tailwind and code cleanup(WIP)

Browse Source
This commit is contained in:
Stanislaw
2023-10-26 06:20:33 +02:00
parent d307234f23
commit d1d79d78f0
16 changed files with 1277 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1097
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

3
package.json
View File

@@ -22,8 +22,11 @@
"@types/node": "^20", "@types/node": "^20",
"@types/react": "^18", "@types/react": "^18",
"@types/react-dom": "^18", "@types/react-dom": "^18",
"autoprefixer": "^10.4.16",
"eslint": "^8", "eslint": "^8",
"eslint-config-next": "13.5.6", "eslint-config-next": "13.5.6",
"postcss": "^8.4.31",
"tailwindcss": "^3.3.5",
"typescript": "^5" "typescript": "^5"
} }
} }

6
postcss.config.js Normal file
View File

@@ -0,0 +1,6 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}

BIN
public/models/skeleton/body.gltf
View File

Binary file not shown.

6
src/app/globals.css
View File

@@ -1,3 +1,3 @@
* { @tailwind base;
margin: 0; @tailwind components;
} @tailwind utilities;

26
src/app/layout.tsx
View File

@@ -1,22 +1,28 @@
import type { Metadata } from 'next' import type { Metadata } from "next";
import { Inter } from 'next/font/google' import { Inter } from "next/font/google";
import './globals.css' import "./globals.css";
import Stars from "@/components/stars";
import Footer from "@/components/footer";
const inter = Inter({ subsets: ['latin'] }) const inter = Inter({ subsets: ["latin"] });
export const metadata: Metadata = { export const metadata: Metadata = {
title: 'Create Next App', title: "Create Next App",
description: 'Generated by create next app', description: "Generated by create next app",
} };
export default function RootLayout({ export default function RootLayout({
children, children,
}: { }: {
children: React.ReactNode children: React.ReactNode;
}) { }) {
return ( return (
<html lang="en"> <html lang="en">
<body className={inter.className}>{children}</body> <body className={inter.className}>
<h1 className="fixed text-white top-0 z-50 m-5 text-5xl">J4roid</h1>
{children}
<Footer />
</body>
</html> </html>
) );
} }

21
src/app/page.module.css
View File

@@ -1,21 +0,0 @@
.skeleton {
width: 100%;
height: 100vh;
}
.logo {
margin: 2rem;
color: white;
position: fixed;
z-index: 100;
}
.quota {
width: 25%;
position: fixed;
z-index: 100;
font-size: 50px;
margin: 50vh 0 0 10%;
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #23d400, 0 0 40px #00a30e,
0 0 50px #0a7c00, 0 0 60px #0b5e00, 0 0 70px #00440b;
color: white;
}

19
src/app/page.tsx
View File

@@ -1,11 +1,18 @@
import Stars from "@/components/stars";
import Skeleton from "@/components/mesh/skeleton"; import Skeleton from "@/components/mesh/skeleton";
import style from "./page.module.css";
export default function Home() { export default function Home() {
return ( return (
<div className={style.skeleton}> <main className="w-100 m-0 h-screen">
<h1 className={style.logo}>J4roid</h1> <Stars />
<h1 className={style.quota}>PROFESSIONAL COCK SMELLER</h1> <div className="fixed z-50 flex flex-col content-start text-left top-1/2 left-1/4 text-white">
<Skeleton /> <button className="">ABOUT ME</button>
</div> <button className="">MY MODELS</button>
<button className="">CONTACT</button>
<div className=" fixed h-screen w-1/2 right-0 top-0">
<Skeleton />
</div>
</div>
</main>
); );
} }

19
src/components/footer.tsx Normal file
View File

@@ -0,0 +1,19 @@
import MyMiniFactory from "@/components/icons/myMiniFactory";
import Discord from "@/components/icons/discord";
import Patreon from "@/components/icons/patreon";
export default function Footer() {
return (
<footer className="fixed z-50 bottom-0">
<button>
<MyMiniFactory className="text-white" />
</button>
<button>
<Discord className="text-white" />
</button>
<button>
<Patreon className="text-white" />
</button>
</footer>
);
}

11
src/components/icons/discord.tsx Normal file
View File

@@ -0,0 +1,11 @@
export default function Discord(props: any) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 127.14 96.36"
fill="currentColor"
>
<path d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z" />
</svg>
);
}

14
src/components/icons/myMiniFactory.tsx Normal file
View File

@@ -0,0 +1,14 @@
export default function MyMiniFactory(props: any) {
return (
<svg
width="37"
height="37"
viewBox="0 0 37 37"
fill="currentColor"
{...props}
xmlns="http://www.w3.org/2000/svg"
>
<path d="M37 0.370779V36.6292C37 36.7276 36.9609 36.8219 36.8914 36.8914C36.8219 36.9609 36.7276 37 36.6292 37H22.1995V29.6009H29.6009V11.0998H22.1995V22.1995H14.8005V11.0998H7.39906V29.6009H14.8005V37H0.741559C0.644176 37 0.547747 36.9808 0.457776 36.9436C0.367806 36.9063 0.286058 36.8517 0.217198 36.7828C0.148337 36.7139 0.0937146 36.6322 0.0564478 36.5422C0.019181 36.4523 0 36.3558 0 36.2584L0 0.370779C0 0.272443 0.0390641 0.178133 0.108599 0.108599C0.178133 0.0390641 0.272443 0 0.370779 0L36.6292 0C36.7276 0 36.8219 0.0390641 36.8914 0.108599C36.9609 0.178133 37 0.272443 37 0.370779Z"></path>
</svg>
);
}

18
src/components/icons/patreon.tsx Normal file
View File

@@ -0,0 +1,18 @@
export default function Patreon(props: any) {
return (
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 1080 1080"
{...props}
fill="currentColor"
>
<path
d="M1033.05,324.45c-0.19-137.9-107.59-250.92-233.6-291.7c-156.48-50.64-362.86-43.3-512.28,27.2
C106.07,145.41,49.18,332.61,47.06,519.31c-1.74,153.5,13.58,557.79,241.62,560.67c169.44,2.15,194.67-216.18,273.07-321.33
c55.78-74.81,127.6-95.94,216.01-117.82C929.71,603.22,1033.27,483.3,1033.05,324.45z"
/>
</svg>
);
}

5
src/components/mesh/skeleton.module.css
View File

@@ -1,5 +0,0 @@
.Canvas {
width: 100%;
height: 100%;
background-color: black;
}

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

@@ -2,23 +2,21 @@
import { Mesh } from "three"; import { Mesh } from "three";
import { useEffect, useRef, useState } from "react"; import { useEffect, useRef, useState } from "react";
import { Canvas, useLoader, useFrame } from "@react-three/fiber";
import * as THREE from "three"; import * as THREE from "three";
import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js"; import { useGLTF } from "@react-three/drei";
import styles from "./skeleton.module.css"; import { Canvas } from "@react-three/fiber";
function SkeletonMesh() { function SkeletonMesh() {
const [eyeAngle, setEyeAAngle] = useState([ const [eyeAngle, setEyeAAngle] = useState<Number[]>([
THREE.MathUtils.degToRad(0), THREE.MathUtils.degToRad(10),
THREE.MathUtils.degToRad(70), THREE.MathUtils.degToRad(100),
THREE.MathUtils.degToRad(0), THREE.MathUtils.degToRad(0),
]); ]);
const mesh = useRef<Mesh>(null!); const mesh = useRef<Mesh>(null!);
let head = useLoader(GLTFLoader, "/models/skeleton/head.gltf"); const skeleton = useRef<Mesh>(null!);
const eye = useLoader(GLTFLoader, "/models/skeleton/eye.gltf"); let head = useGLTF("/models/skeleton/head.gltf");
const eye = useGLTF("/models/skeleton/eye.gltf");
const eye2 = eye.scene.clone(); const eye2 = eye.scene.clone();
const body = useLoader(GLTFLoader, "/models/skeleton/body.gltf");
useEffect(() => { useEffect(() => {
window.addEventListener("mousemove", (event) => { window.addEventListener("mousemove", (event) => {
setEyeAAngle([ setEyeAAngle([
@@ -36,20 +34,21 @@ function SkeletonMesh() {
return ( return (
<group> <group>
<mesh <mesh
scale={0.1} scale={0.25}
position={[-2.3, 0.5, -1]} position={[0, -0.5, -5]}
rotation={[ rotation={[
THREE.MathUtils.degToRad(0), THREE.MathUtils.degToRad(0),
THREE.MathUtils.degToRad(25), THREE.MathUtils.degToRad(-35),
THREE.MathUtils.degToRad(0), THREE.MathUtils.degToRad(0),
]} ]}
ref={skeleton}
> >
<primitive object={head.scene} /> <primitive object={head.scene} />
</mesh> </mesh>
<mesh scale={0.1} position={[-2.03, 0.72, -0.91]} rotation={eyeAngle}> <mesh ref={mesh} scale={0.2} position={[0, 0, -4]} rotation={eyeAngle}>
<primitive object={eye.scene} /> <primitive object={eye.scene} />
</mesh> </mesh>
<mesh scale={0.1} position={[-2.5, 0.72, -0.7]} rotation={eyeAngle}> <mesh scale={0.2} position={[-1, 0, -5]} rotation={eyeAngle}>
<primitive object={eye2} /> <primitive object={eye2} />
</mesh> </mesh>
</group> </group>
@@ -57,43 +56,17 @@ function SkeletonMesh() {
} }
export default function Skeleton() { export default function Skeleton() {
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,
});
}
return ( return (
<Canvas <Canvas
onScroll={(el) => { className="h-100 w-100"
cameraPosition += 1;
}}
className={styles.Canvas}
camera={{ camera={{
position: [0, 1.2, cameraPosition], position: [0, 0, 0],
rotation: [0, THREE.MathUtils.degToRad(90), 0], rotation: [0, 0, 0],
}} }}
> >
{/* <OrbitControls /> */} <ambientLight />
<pointLight intensity={4} /> <pointLight intensity={4} />
<gridHelper args={[99, 99, "grey", "grey"]} />
<SkeletonMesh /> <SkeletonMesh />
<group>
<ambientLight />
{meshArray.map((el) => {
return (
<mesh position={[el.x, el.y, el.z]}>
<sphereGeometry args={[0.2 * Math.random()]} />
<meshPhysicalMaterial color="white" />
</mesh>
);
})}
</group>
</Canvas> </Canvas>
); );
} }

44
src/components/stars.tsx Normal file
View File

@@ -0,0 +1,44 @@
"use client";
import { Canvas } from "@react-three/fiber";
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,
});
}
return (
<Canvas
onScroll={(el) => {
cameraPosition += 1;
}}
{...props}
className="bg-black"
camera={{
position: [0, 1.2, cameraPosition],
rotation: [0, THREE.MathUtils.degToRad(90), 0],
}}
>
<gridHelper args={[99, 99, "grey", "grey"]} />
<group>
<ambientLight />
{meshArray.map((el) => {
return (
<mesh position={[el.x, el.y, el.z]}>
<sphereGeometry args={[0.2 * Math.random()]} />
<meshPhysicalMaterial color="white" />
</mesh>
);
})}
</group>
</Canvas>
);
}

15
tailwind.config.js Normal file
View File

@@ -0,0 +1,15 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./app/**/*.{js,ts,jsx,tsx,mdx}", // Note the addition of the `app` directory.
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",
// Or if using `src` directory:
"./src/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {},
},
plugins: [],
};