diff --git a/package-lock.json b/package-lock.json index da2e69e..d7bade4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,7 @@ "@types/p5": "^1.6.2", "@types/react": "18.2.7", "@types/react-dom": "18.2.4", + "@types/three": "^0.154.0", "eslint": "8.41.0", "eslint-config-next": "13.4.4", "lucide-react": "^0.260.0", @@ -19,6 +20,7 @@ "p5": "^1.6.0", "react": "18.2.0", "react-dom": "18.2.0", + "three": "^0.154.0", "typescript": "5.0.4" } }, @@ -327,6 +329,11 @@ "tslib": "^2.4.0" } }, + "node_modules/@tweenjs/tween.js": { + "version": "18.6.4", + "resolved": "https://registry.npmjs.org/@tweenjs/tween.js/-/tween.js-18.6.4.tgz", + "integrity": "sha512-lB9lMjuqjtuJrx7/kOkqQBtllspPIN+96OvTCeJ2j5FEzinoAXTdAMFnDAQT1KVPRlnYfBrqxtqP66vDM40xxQ==" + }, "node_modules/@types/json5": { "version": "0.0.29", "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz", @@ -370,6 +377,29 @@ "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz", "integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==" }, + "node_modules/@types/stats.js": { + "version": "0.17.0", + "resolved": "https://registry.npmjs.org/@types/stats.js/-/stats.js-0.17.0.tgz", + "integrity": "sha512-9w+a7bR8PeB0dCT/HBULU2fMqf6BAzvKbxFboYhmDtDkKPiyXYbjoe2auwsXlEFI7CFNMF1dCv3dFH5Poy9R1w==" + }, + "node_modules/@types/three": { + "version": "0.154.0", + "resolved": "https://registry.npmjs.org/@types/three/-/three-0.154.0.tgz", + "integrity": "sha512-IioqpGhch6FdLDh4zazRn3rXHj6Vn2nVOziJdXVbJFi9CaI65LtP9qqUtpzbsHK2Ezlox8NtsLNHSw3AQzucjA==", + "dependencies": { + "@tweenjs/tween.js": "~18.6.4", + "@types/stats.js": "*", + "@types/webxr": "*", + "fflate": "~0.6.9", + "lil-gui": "~0.17.0", + "meshoptimizer": "~0.18.1" + } + }, + "node_modules/@types/webxr": { + "version": "0.5.2", + "resolved": "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.2.tgz", + "integrity": "sha512-szL74BnIcok9m7QwYtVmQ+EdIKwbjPANudfuvDrAF8Cljg9MKUlIoc1w5tjj9PMpeSH3U1Xnx//czQybJ0EfSw==" + }, "node_modules/@typescript-eslint/parser": { "version": "5.59.7", "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.59.7.tgz", @@ -1576,6 +1606,11 @@ "reusify": "^1.0.4" } }, + "node_modules/fflate": { + "version": "0.6.10", + "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.6.10.tgz", + "integrity": "sha512-IQrh3lEPM93wVCEczc9SaAOvkmcoQn/G8Bo1e8ZPlY3X3bnAxWaBdvTdvM1hP62iZp0BXWDy4vTAy4fF0+Dlpg==" + }, "node_modules/file-entry-cache": { "version": "6.0.1", "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz", @@ -2382,6 +2417,11 @@ "node": ">= 0.8.0" } }, + "node_modules/lil-gui": { + "version": "0.17.0", + "resolved": "https://registry.npmjs.org/lil-gui/-/lil-gui-0.17.0.tgz", + "integrity": "sha512-MVBHmgY+uEbmJNApAaPbtvNh1RCAeMnKym82SBjtp5rODTYKWtM+MXHCifLe2H2Ti1HuBGBtK/5SyG4ShQ3pUQ==" + }, "node_modules/locate-path": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz", @@ -2444,6 +2484,11 @@ "node": ">= 8" } }, + "node_modules/meshoptimizer": { + "version": "0.18.1", + "resolved": "https://registry.npmjs.org/meshoptimizer/-/meshoptimizer-0.18.1.tgz", + "integrity": "sha512-ZhoIoL7TNV4s5B6+rx5mC//fw8/POGyNxS/DZyCJeiZ12ScLfVwRE/GfsxwiTkMYYD5DmK2/JXnEVXqL4rF+Sw==" + }, "node_modules/micromatch": { "version": "4.0.5", "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz", @@ -3422,6 +3467,11 @@ "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz", "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==" }, + "node_modules/three": { + "version": "0.154.0", + "resolved": "https://registry.npmjs.org/three/-/three-0.154.0.tgz", + "integrity": "sha512-Uzz8C/5GesJzv8i+Y2prEMYUwodwZySPcNhuJUdsVMH2Yn4Nm8qlbQe6qRN5fOhg55XB0WiLfTPBxVHxpE60ug==" + }, "node_modules/titleize": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/titleize/-/titleize-3.0.0.tgz", diff --git a/package.json b/package.json index 7d29fd9..41b765c 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "@types/p5": "^1.6.2", "@types/react": "18.2.7", "@types/react-dom": "18.2.4", + "@types/three": "^0.154.0", "eslint": "8.41.0", "eslint-config-next": "13.4.4", "lucide-react": "^0.260.0", @@ -20,6 +21,7 @@ "p5": "^1.6.0", "react": "18.2.0", "react-dom": "18.2.0", + "three": "^0.154.0", "typescript": "5.0.4" } } diff --git a/src/app/page.module.css b/src/app/page.module.css index b00b395..d226c8c 100644 --- a/src/app/page.module.css +++ b/src/app/page.module.css @@ -12,6 +12,26 @@ font-size: 100px; } +.home +{ + width: 70%; + display: flex; + flex-direction: row; + justify-content: space-between; +} + +.canvasContainer +{ + width: 380px; + background-color: rgb(31, 31, 31); + border: 1px solid rgb(113, 113, 113); +} + +.canvasContent +{ + height: 180px; +} + .projects { display: flex; diff --git a/src/app/page.tsx b/src/app/page.tsx index 05cc65a..dc7a724 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -3,6 +3,7 @@ import styles from './page.module.css' import { Metadata } from 'next' import Terminal from '@/components/Terminal' import Typewriter from '@/components/Typewriter' +import Model from '@/components/Model' import localFont from 'next/font/local' import { ChevronRight, X, Minus, Square } from 'lucide-react'; @@ -12,7 +13,21 @@ export default function Home() { return (
{/* TODO What is wrong with the position 1? */} - +
+ +
+
+
+ + + +
+
+
+ +
+
+

Projects

diff --git a/src/components/Model.tsx b/src/components/Model.tsx new file mode 100644 index 0000000..26f6e88 --- /dev/null +++ b/src/components/Model.tsx @@ -0,0 +1,51 @@ +"use client" +import React, { useEffect, useRef } from 'react'; +import * as THREE from 'three'; + + + +const AsciiCube = () => { + const canvasRef = useRef(null!); + + useEffect(() => { + const canvas = canvasRef.current; + const renderer = new THREE.WebGLRenderer({ canvas }); + + const width = 380; + const height = 400; + + canvas.style.width = `${width}px`; + canvas.style.height = `${height}px`; + + renderer.setSize(width, height); + + const scene = new THREE.Scene(); + const camera = new THREE.PerspectiveCamera( + 30, + width / height, + 0.1, + 1000 + ); + camera.position.z = 5; + + const geometry = new THREE.BoxGeometry(1, 1, 1); + const material = new THREE.MeshBasicMaterial({ color: 0xffffff }); + const cube = new THREE.Mesh(geometry, material); + scene.add(cube); + + const animate = () => { + requestAnimationFrame(animate); + + cube.rotation.x += 0.01; + cube.rotation.y += 0.01; + + renderer.render(scene, camera); + }; + + animate(); + }, []); + + return ; + }; + + export default AsciiCube; \ No newline at end of file diff --git a/src/css/terminal.module.css b/src/css/terminal.module.css index 0889454..fb90414 100644 --- a/src/css/terminal.module.css +++ b/src/css/terminal.module.css @@ -1,6 +1,6 @@ .windowContainer { - width: 50%; + width: 60%; box-sizing: border-box; animation: bottom 1s ease; }