rearchitecture

.gitignore

@@ -21,4 +21,4 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-.tar
+*.tar

.idea/compiler.xml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="TypeScriptCompiler">
+    <option name="memoryAutoIncrease" value="true" />
+    <option name="useServicePoweredTypesEnabledManually" value="true" />
+  </component>
+</project>

package-lock.json

@@ -21,9 +21,11 @@
         "@types/node": "^16.18.126",
         "@types/react": "^19.2.14",
         "@types/react-dom": "^19.2.3",
+        "motion": "^12.34.3",
         "react": "^19.2.4",
         "react-dom": "^19.2.4",
         "react-scripts": "5.0.1",
+        "three": "^0.183.2",
         "typescript": "^4.9.5",
         "web-vitals": "^2.1.4"
       },
@@ -8699,6 +8701,33 @@
         "url": "https://github.com/sponsors/rawify"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "12.34.3",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.34.3.tgz",
+      "integrity": "sha512-v81ecyZKYO/DfpTwHivqkxSUBzvceOpoI+wLfgCgoUIKxlFKEXdg0oR9imxwXumT4SFy8vRk9xzJ5l3/Du/55Q==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-dom": "^12.34.3",
+        "motion-utils": "^12.29.2",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fresh": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
@@ -11800,6 +11829,47 @@
         "mkdirp": "bin/cmd.js"
       }
     },
+    "node_modules/motion": {
+      "version": "12.34.3",
+      "resolved": "https://registry.npmjs.org/motion/-/motion-12.34.3.tgz",
+      "integrity": "sha512-xZIkBGO7v/Uvm+EyaqYd+9IpXu0sZqLywVlGdCFrrMiaO9JI4Kx51mO9KlHSWwll+gZUVY5OJsWgYI5FywJ/tw==",
+      "license": "MIT",
+      "dependencies": {
+        "framer-motion": "^12.34.3",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/motion-dom": {
+      "version": "12.34.3",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.34.3.tgz",
+      "integrity": "sha512-sYgFe+pR9aIM7o4fhs2aXtOI+oqlUd33N9Yoxcgo1Fv7M20sRkHtCmzE/VRNIcq7uNJ+qio+Xubt1FXH3pQ+eQ==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-utils": "^12.29.2"
+      }
+    },
+    "node_modules/motion-utils": {
+      "version": "12.29.2",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.29.2.tgz",
+      "integrity": "sha512-G3kc34H2cX2gI63RqU+cZq+zWRRPSsNIOjpdl9TN4AQwC4sgwYPl/Q/Obf/d53nOm569T0fYK+tcoSV50BWx8A==",
+      "license": "MIT"
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -16242,6 +16312,12 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/three": {
+      "version": "0.183.2",
+      "resolved": "https://registry.npmjs.org/three/-/three-0.183.2.tgz",
+      "integrity": "sha512-di3BsL2FEQ1PA7Hcvn4fyJOlxRRgFYBpMTcyOgkwJIaDOdJMebEFPA+t98EvjuljDx4hNulAGwF6KIjtwI5jgQ==",
+      "license": "MIT"
+    },
     "node_modules/throat": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/throat/-/throat-6.0.2.tgz",

package.json

@@ -16,9 +16,11 @@
     "@types/node": "^16.18.126",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
+    "motion": "^12.34.3",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "react-scripts": "5.0.1",
+    "three": "^0.183.2",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"
   },

src/App.scss

@@ -1,34 +0,0 @@
-$padding: 15px;
-
-.header {
-  background-color: #282c34;
-  padding: $padding;
-  display: flex;
-  justify-items: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.menu {
-  position: absolute;
-
-  background: none;
-  border: none;
-  color: white;
-  text-decoration: underline;
-  cursor: pointer;
-}
-
-button {
-
-}
-
-.name {
-  margin: auto;
-}
-
-.main {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}

src/App.tsx

@@ -1,15 +0,0 @@
-import React from 'react';
-import './App.scss';
-import {Canvas} from "./index/Canvas";
-import {Nav} from "./Nav";
-
-function App() {
-  return (
-    <div className="App">
-      <Nav/>
-      <Canvas/>
-    </div>
-  );
-}
-
-export default App;

src/Nav.tsx

@@ -1,13 +0,0 @@
-import React from "react";
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import {faBars} from "@fortawesome/free-solid-svg-icons/faBars";
-
-export function Nav() {
-    return <nav className="header">
-
-        <button className="menu">
-            <FontAwesomeIcon icon={faBars}/>
-        </button>
-        <div className="name">Tymur Arsentiev</div>
-    </nav>;
-}

src/index.css

@@ -1,5 +1,8 @@
 body {
   margin: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
     sans-serif;
@@ -11,3 +14,10 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+button {
+  background: none;
+  border: none;
+  color: white;
+  cursor: pointer;
+}

src/index.tsx

@@ -1,15 +1,18 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
-import App from './App';
 import reportWebVitals from './reportWebVitals';
+import {Canvas} from "./index/Canvas";
+import {Nav} from "./nav/Nav";
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
 );
+
 root.render(
   <React.StrictMode>
-    <App />
+    <Nav/>
+    <Canvas/>
   </React.StrictMode>
 );