Getting home page all dolled up

2023-10-17 21:38:47 -06:00
parent b1ed07c39a
commit 7257619c01
13 changed files with 751 additions and 33 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,6 +23,7 @@
        "@types/react": "18.2.22",
        "@types/react-dom": "18.2.7",
        "@types/redux-logger": "^3.0.9",
+        "@types/three": "^0.157.0",
        "@vercel/analytics": "^1.0.2",
        "autoprefixer": "10.4.16",
        "class-variance-authority": "^0.7.0",
@@ -1214,14 +1215,12 @@
    "node_modules/@types/stats.js": {
      "version": "0.17.1",
      "resolved": "https://registry.npmjs.org/@types/stats.js/-/stats.js-0.17.1.tgz",
-      "integrity": "sha512-OgfYE1x2w1jRUXzzKABX+kOdwz2y9PE0uSwnZabkWfJTWOzm7Pvfm4JI2xqRE0q2nwUe2jZLWcrcnhd9lQU63w==",
-      "peer": true
+      "integrity": "sha512-OgfYE1x2w1jRUXzzKABX+kOdwz2y9PE0uSwnZabkWfJTWOzm7Pvfm4JI2xqRE0q2nwUe2jZLWcrcnhd9lQU63w=="
    },
    "node_modules/@types/three": {
-      "version": "0.156.0",
-      "resolved": "https://registry.npmjs.org/@types/three/-/three-0.156.0.tgz",
-      "integrity": "sha512-733bXDSRdlrxqOmQuOmfC1UBRuJ2pREPk8sWnx9MtIJEVDQMx8U0NQO5MVVaOrjzDPyLI+cFPim2X/ss9v0+LQ==",
-      "peer": true,
+      "version": "0.157.0",
+      "resolved": "https://registry.npmjs.org/@types/three/-/three-0.157.0.tgz",
+      "integrity": "sha512-+BG+wqEyH506w23tKpwXnCTJb/MeyeQ/wcFlSFQ26Z9hS5Qde2vc7o+aqd+z98b38PVGuHa5GYxg/3CY7qrxFw==",
      "dependencies": {
        "@types/stats.js": "*",
        "@types/webxr": "*",
@@ -3825,8 +3824,7 @@
    "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==",
-      "peer": true
+      "integrity": "sha512-ZhoIoL7TNV4s5B6+rx5mC//fw8/POGyNxS/DZyCJeiZ12ScLfVwRE/GfsxwiTkMYYD5DmK2/JXnEVXqL4rF+Sw=="
    },
    "node_modules/micromatch": {
      "version": "4.0.5",
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
    "@types/react": "18.2.22",
    "@types/react-dom": "18.2.7",
    "@types/redux-logger": "^3.0.9",
+    "@types/three": "^0.157.0",
    "@vercel/analytics": "^1.0.2",
    "autoprefixer": "10.4.16",
    "class-variance-authority": "^0.7.0",
--- a/public/halo_ring/license.txt
+++ b/public/halo_ring/license.txt
@@ -0,0 +1,11 @@
+Model Information:
+* title:	Halo Ring
+* source:	https://sketchfab.com/3d-models/halo-ring-7821843cacd144de833ddb39e7fc0f3e
+* author:	Inditrion Dradnon (https://sketchfab.com/dradnon)
+
+Model License:
+* license type:	CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/)
+* requirements:	Author must be credited. Commercial use is allowed.
+
+If you use this 3D model in your project be sure to copy paste this credit wherever you share it:
+This work is based on "Halo Ring" (https://sketchfab.com/3d-models/halo-ring-7821843cacd144de833ddb39e7fc0f3e) by Inditrion Dradnon (https://sketchfab.com/dradnon) licensed under CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/)
--- a/public/halo_ring/scene.bin
+++ b/public/halo_ring/scene.bin
--- a/public/halo_ring/scene.gltf
+++ b/public/halo_ring/scene.gltf
@@ -0,0 +1,672 @@
+{
+  "accessors": [
+    {
+      "bufferView": 2,
+      "componentType": 5126,
+      "count": 65532,
+      "max": [
+        1006.4429931640625,
+        1007.5597534179688,
+        120.00001525878906
+      ],
+      "min": [
+        -1006.4429931640625,
+        -1006.4429931640625,
+        29.99999237060547
+      ],
+      "type": "VEC3"
+    },
+    {
+      "bufferView": 2,
+      "byteOffset": 786384,
+      "componentType": 5126,
+      "count": 65532,
+      "max": [
+        1.0,
+        1.0,
+        0.951808750629425
+      ],
+      "min": [
+        -1.0,
+        -1.0,
+        -0.9518074989318848
+      ],
+      "type": "VEC3"
+    },
+    {
+      "bufferView": 1,
+      "componentType": 5126,
+      "count": 65532,
+      "max": [
+        8.449193954467773,
+        1.005884051322937
+      ],
+      "min": [
+        -7.449214935302734,
+        -0.005884000100195408
+      ],
+      "type": "VEC2"
+    },
+    {
+      "bufferView": 0,
+      "componentType": 5125,
+      "count": 98292,
+      "type": "SCALAR"
+    },
+    {
+      "bufferView": 2,
+      "byteOffset": 1572768,
+      "componentType": 5126,
+      "count": 65534,
+      "max": [
+        1003.6979370117188,
+        1003.6979370117188,
+        150.0
+      ],
+      "min": [
+        -1003.5873413085938,
+        -1003.6979370117188,
+        0.0
+      ],
+      "type": "VEC3"
+    },
+    {
+      "bufferView": 2,
+      "byteOffset": 2359176,
+      "componentType": 5126,
+      "count": 65534,
+      "max": [
+        1.0,
+        1.0,
+        0.9999996423721313
+      ],
+      "min": [
+        -1.0,
+        -1.0,
+        -1.0
+      ],
+      "type": "VEC3"
+    },
+    {
+      "bufferView": 1,
+      "byteOffset": 524256,
+      "componentType": 5126,
+      "count": 65534,
+      "max": [
+        11.460817337036133,
+        11.460817337036133
+      ],
+      "min": [
+        -10.460817337036133,
+        -10.460817337036133
+      ],
+      "type": "VEC2"
+    },
+    {
+      "bufferView": 0,
+      "byteOffset": 393168,
+      "componentType": 5125,
+      "count": 95862,
+      "type": "SCALAR"
+    },
+    {
+      "bufferView": 2,
+      "byteOffset": 3145584,
+      "componentType": 5126,
+      "count": 59739,
+      "max": [
+        1009.14453125,
+        1009.14453125,
+        123.82047271728516
+      ],
+      "min": [
+        -1009.14453125,
+        -1009.14453125,
+        26.179555892944336
+      ],
+      "type": "VEC3"
+    },
+    {
+      "bufferView": 2,
+      "byteOffset": 3862452,
+      "componentType": 5126,
+      "count": 59739,
+      "max": [
+        0.9999980926513672,
+        0.9999980926513672,
+        0.9518032670021057
+      ],
+      "min": [
+        -0.9999980926513672,
+        -0.9999980926513672,
+        -0.9518013596534729
+      ],
+      "type": "VEC3"
+    },
+    {
+      "bufferView": 1,
+      "byteOffset": 1048528,
+      "componentType": 5126,
+      "count": 59739,
+      "max": [
+        8.449193954467773,
+        1.1058119535446167
+      ],
+      "min": [
+        -7.449214935302734,
+        -0.10581199824810028
+      ],
+      "type": "VEC2"
+    },
+    {
+      "bufferView": 0,
+      "byteOffset": 776616,
+      "componentType": 5125,
+      "count": 86598,
+      "type": "SCALAR"
+    },
+    {
+      "bufferView": 2,
+      "byteOffset": 4579320,
+      "componentType": 5126,
+      "count": 1224,
+      "max": [
+        956.0355834960938,
+        958.417236328125,
+        133.04110717773438
+      ],
+      "min": [
+        -962.1315307617188,
+        -959.7499389648438,
+        16.958892822265625
+      ],
+      "type": "VEC3"
+    },
+    {
+      "bufferView": 2,
+      "byteOffset": 4594008,
+      "componentType": 5126,
+      "count": 1224,
+      "max": [
+        1.0,
+        1.0,
+        0.0
+      ],
+      "min": [
+        -1.0,
+        -1.0,
+        0.0
+      ],
+      "type": "VEC3"
+    },
+    {
+      "bufferView": 1,
+      "byteOffset": 1526440,
+      "componentType": 5126,
+      "count": 1224,
+      "max": [
+        1.0793160200119019,
+        0.5708929896354675
+      ],
+      "min": [
+        -0.07931499928236008,
+        0.42910701036453247
+      ],
+      "type": "VEC2"
+    },
+    {
+      "bufferView": 0,
+      "byteOffset": 1123008,
+      "componentType": 5125,
+      "count": 6000,
+      "type": "SCALAR"
+    },
+    {
+      "bufferView": 2,
+      "byteOffset": 4608696,
+      "componentType": 5126,
+      "count": 14400,
+      "max": [
+        1006.619384765625,
+        1006.619384765625,
+        146.65591430664063
+      ],
+      "min": [
+        -1006.619384765625,
+        -1006.619384765625,
+        3.3441009521484375
+      ],
+      "type": "VEC3"
+    },
+    {
+      "bufferView": 2,
+      "byteOffset": 4781496,
+      "componentType": 5126,
+      "count": 14400,
+      "max": [
+        0.9998648762702942,
+        0.9998648762702942,
+        0.621880292892456
+      ],
+      "min": [
+        -0.9998647570610046,
+        -0.9998648762702942,
+        -0.6218779683113098
+      ],
+      "type": "VEC3"
+    },
+    {
+      "bufferView": 1,
+      "byteOffset": 1536232,
+      "componentType": 5126,
+      "count": 14400,
+      "max": [
+        8.449193954467773,
+        1.3431400060653687
+      ],
+      "min": [
+        -7.449214935302734,
+        -0.34314000606536865
+      ],
+      "type": "VEC2"
+    },
+    {
+      "bufferView": 0,
+      "byteOffset": 1147008,
+      "componentType": 5125,
+      "count": 21600,
+      "type": "SCALAR"
+    },
+    {
+      "bufferView": 2,
+      "byteOffset": 4954296,
+      "componentType": 5126,
+      "count": 1600,
+      "max": [
+        993.62744140625,
+        993.62744140625,
+        150.0
+      ],
+      "min": [
+        -993.62744140625,
+        -993.62744140625,
+        0.0
+      ],
+      "type": "VEC3"
+    },
+    {
+      "bufferView": 2,
+      "byteOffset": 4973496,
+      "componentType": 5126,
+      "count": 1600,
+      "max": [
+        0.19613902270793915,
+        0.19613902270793915,
+        0.9992678761482239
+      ],
+      "min": [
+        -0.19613902270793915,
+        -0.19613902270793915,
+        -0.9992678761482239
+      ],
+      "type": "VEC3"
+    },
+    {
+      "bufferView": 1,
+      "byteOffset": 1651432,
+      "componentType": 5126,
+      "count": 1600,
+      "max": [
+        11.741863250732422,
+        11.741863250732422
+      ],
+      "min": [
+        -10.741863250732422,
+        -10.741863250732422
+      ],
+      "type": "VEC2"
+    },
+    {
+      "bufferView": 0,
+      "byteOffset": 1233408,
+      "componentType": 5125,
+      "count": 4800,
+      "type": "SCALAR"
+    }
+  ],
+  "asset": {
+    "extras": {
+      "author": "Inditrion Dradnon (https://sketchfab.com/dradnon)",
+      "license": "CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/)",
+      "source": "https://sketchfab.com/3d-models/halo-ring-7821843cacd144de833ddb39e7fc0f3e",
+      "title": "Halo Ring"
+    },
+    "generator": "Sketchfab-12.64.0",
+    "version": "2.0"
+  },
+  "bufferViews": [
+    {
+      "buffer": 0,
+      "byteLength": 1252608,
+      "name": "floatBufferViews",
+      "target": 34963
+    },
+    {
+      "buffer": 0,
+      "byteLength": 1664232,
+      "byteOffset": 1252608,
+      "byteStride": 8,
+      "name": "floatBufferViews",
+      "target": 34962
+    },
+    {
+      "buffer": 0,
+      "byteLength": 4992696,
+      "byteOffset": 2916840,
+      "byteStride": 12,
+      "name": "floatBufferViews",
+      "target": 34962
+    }
+  ],
+  "buffers": [
+    {
+      "byteLength": 7909536,
+      "uri": "scene.bin"
+    }
+  ],
+  "images": [
+    {
+      "uri": "textures/MaterialFBXASC032FBXASC0352142150746_baseColor.jpeg"
+    },
+    {
+      "uri": "textures/MaterialFBXASC032FBXASC0352142150746_metallicRoughness.png"
+    },
+    {
+      "uri": "textures/MaterialFBXASC032FBXASC0352142146801_baseColor.jpeg"
+    }
+  ],
+  "materials": [
+    {
+      "doubleSided": true,
+      "name": "MaterialFBXASC032FBXASC0352142150746",
+      "occlusionTexture": {
+        "index": 1
+      },
+      "pbrMetallicRoughness": {
+        "baseColorTexture": {
+          "index": 0
+        },
+        "metallicRoughnessTexture": {
+          "index": 1
+        }
+      }
+    },
+    {
+      "doubleSided": true,
+      "name": "MaterialFBXASC032FBXASC0352142146801",
+      "pbrMetallicRoughness": {
+        "baseColorTexture": {
+          "index": 2
+        },
+        "metallicFactor": 0.0
+      }
+    },
+    {
+      "doubleSided": true,
+      "emissiveFactor": [
+        0.0,
+        1.0,
+        1.0
+      ],
+      "name": "LIGHTKRAFTFBXASC032GRAVITONFBXASC032",
+      "pbrMetallicRoughness": {
+        "baseColorFactor": [
+          0.0,
+          0.0,
+          0.0,
+          1.0
+        ],
+        "metallicFactor": 0.0
+      }
+    },
+    {
+      "doubleSided": true,
+      "name": "MaterialFBXASC032FBXASC0352142147988",
+      "pbrMetallicRoughness": {
+        "baseColorFactor": [
+          0.231373,
+          0.231373,
+          0.231373,
+          1.0
+        ],
+        "metallicFactor": 0.0
+      }
+    }
+  ],
+  "meshes": [
+    {
+      "name": "MaterialFBXASC032FBXASC0352142150746",
+      "primitives": [
+        {
+          "attributes": {
+            "NORMAL": 1,
+            "POSITION": 0,
+            "TEXCOORD_0": 2
+          },
+          "indices": 3,
+          "material": 0,
+          "mode": 4
+        }
+      ]
+    },
+    {
+      "name": "MaterialFBXASC032FBXASC0352142150746",
+      "primitives": [
+        {
+          "attributes": {
+            "NORMAL": 5,
+            "POSITION": 4,
+            "TEXCOORD_0": 6
+          },
+          "indices": 7,
+          "material": 0,
+          "mode": 4
+        }
+      ]
+    },
+    {
+      "name": "MaterialFBXASC032FBXASC0352142150746",
+      "primitives": [
+        {
+          "attributes": {
+            "NORMAL": 9,
+            "POSITION": 8,
+            "TEXCOORD_0": 10
+          },
+          "indices": 11,
+          "material": 0,
+          "mode": 4
+        }
+      ]
+    },
+    {
+      "name": "MaterialFBXASC032FBXASC0352142146801",
+      "primitives": [
+        {
+          "attributes": {
+            "NORMAL": 13,
+            "POSITION": 12,
+            "TEXCOORD_0": 14
+          },
+          "indices": 15,
+          "material": 1,
+          "mode": 4
+        }
+      ]
+    },
+    {
+      "name": "LIGHTKRAFTFBXASC032GRAVITONFBXASC032",
+      "primitives": [
+        {
+          "attributes": {
+            "NORMAL": 17,
+            "POSITION": 16,
+            "TEXCOORD_0": 18
+          },
+          "indices": 19,
+          "material": 2,
+          "mode": 4
+        }
+      ]
+    },
+    {
+      "name": "MaterialFBXASC032FBXASC0352142147988",
+      "primitives": [
+        {
+          "attributes": {
+            "NORMAL": 21,
+            "POSITION": 20,
+            "TEXCOORD_0": 22
+          },
+          "indices": 23,
+          "material": 3,
+          "mode": 4
+        }
+      ]
+    }
+  ],
+  "nodes": [
+    {
+      "children": [
+        1
+      ],
+      "matrix": [
+        0.0,
+        1.0,
+        1.1102230246251565e-16,
+        0.0,
+        1.0,
+        -1.110223024625157e-16,
+        2.2204460492503128e-16,
+        0.0,
+        1.1102230246251565e-16,
+        0.0,
+        -1.0,
+        0.0,
+        3.2783320875751087e-06,
+        75.01208496093749,
+        75.01208496093751,
+        1.0
+      ],
+      "name": "Sketchfab_model"
+    },
+    {
+      "children": [
+        2
+      ],
+      "matrix": [
+        1.0,
+        0.0,
+        0.0,
+        0.0,
+        0.0,
+        -4.371139006309477e-08,
+        0.999999999999999,
+        0.0,
+        0.0,
+        -0.999999999999999,
+        -4.371139006309477e-08,
+        0.0,
+        0.0,
+        0.0,
+        0.0,
+        1.0
+      ],
+      "name": "Collada visual scene group"
+    },
+    {
+      "children": [
+        3,
+        4,
+        5,
+        6,
+        7,
+        8
+      ],
+      "matrix": [
+        1.025191,
+        0.0,
+        0.0,
+        0.0,
+        0.0,
+        0.0,
+        -1.025191,
+        0.0,
+        0.0,
+        1.0,
+        0.0,
+        0.0,
+        0.0,
+        0.0,
+        0.0,
+        1.0
+      ],
+      "name": "Tube001"
+    },
+    {
+      "mesh": 0,
+      "name": "MaterialFBXASC032FBXASC0352142150746"
+    },
+    {
+      "mesh": 1,
+      "name": "MaterialFBXASC032FBXASC0352142150746"
+    },
+    {
+      "mesh": 2,
+      "name": "MaterialFBXASC032FBXASC0352142150746"
+    },
+    {
+      "mesh": 3,
+      "name": "MaterialFBXASC032FBXASC0352142146801"
+    },
+    {
+      "mesh": 4,
+      "name": "LIGHTKRAFTFBXASC032GRAVITONFBXASC032"
+    },
+    {
+      "mesh": 5,
+      "name": "MaterialFBXASC032FBXASC0352142147988"
+    }
+  ],
+  "samplers": [
+    {
+      "magFilter": 9729,
+      "minFilter": 9987,
+      "wrapS": 10497,
+      "wrapT": 10497
+    }
+  ],
+  "scene": 0,
+  "scenes": [
+    {
+      "name": "Sketchfab_Scene",
+      "nodes": [
+        0
+      ]
+    }
+  ],
+  "textures": [
+    {
+      "sampler": 0,
+      "source": 0
+    },
+    {
+      "sampler": 0,
+      "source": 1
+    },
+    {
+      "sampler": 0,
+      "source": 2
+    }
+  ]
+}
--- a/public/halo_ring/textures/MaterialFBXASC032FBXASC0352142146801_baseColor.jpeg
+++ b/public/halo_ring/textures/MaterialFBXASC032FBXASC0352142146801_baseColor.jpeg
--- a/public/halo_ring/textures/MaterialFBXASC032FBXASC0352142150746_baseColor.jpeg
+++ b/public/halo_ring/textures/MaterialFBXASC032FBXASC0352142150746_baseColor.jpeg
--- a/public/halo_ring/textures/MaterialFBXASC032FBXASC0352142150746_metallicRoughness.png
+++ b/public/halo_ring/textures/MaterialFBXASC032FBXASC0352142150746_metallicRoughness.png
--- a/src/components/common/Loading/index.tsx
+++ b/src/components/common/Loading/index.tsx
@@ -20,7 +20,7 @@ const Loading = (): JSX.Element => {
    return () => {
      router.events.off("routeChangeStart", handleRouteChange);
    };
-  }, []);
+  }, [router.events]);
  return (
    <div
      className={`${
--- a/src/components/common/Model.tsx
+++ b/src/components/common/Model.tsx
@@ -0,0 +1,25 @@
+import { useFrame, useLoader } from "@react-three/fiber";
+import { useRef } from "react";
+import { Mesh } from "three";
+import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
+import { useMediaQuery } from "react-responsive";
+
+export default function Model({ url }: any) {
+  const meshRef = useRef<Mesh>(null!);
+  const gltf = useLoader(GLTFLoader, "/halo_ring/scene.gltf");
+  const isTabletOrMobile = useMediaQuery({ query: "(max-width: 1224px)" });
+
+  useFrame(({ clock }) => {
+    meshRef.current.rotation.z = clock.getElapsedTime() * 0.05;
+  });
+  return (
+    <mesh
+      ref={meshRef}
+      scale={0.082}
+      position={[-75, -50, -50]}
+      rotation={[0, -0.2, 0]}
+    >
+      <primitive object={gltf.scene} />
+    </mesh>
+  );
+}
--- a/src/components/common/Navigation.tsx
+++ b/src/components/common/Navigation.tsx
@@ -1,14 +1,6 @@
 import React, { useEffect, useState } from "react";
 import Link from "next/link";
-import {
-  NavigationMenu,
-  NavigationMenuContent,
-  NavigationMenuItem,
-  NavigationMenuLink,
-  NavigationMenuList,
-  NavigationMenuTrigger,
-  navigationMenuTriggerStyle,
-} from "@/components/ui/navigation-menu";
+import { NavigationMenuLink } from "@/components/ui/navigation-menu";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faBars, faLaptopCode } from "@fortawesome/free-solid-svg-icons";
 import { useMediaQuery } from "react-responsive";
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,24 +1,43 @@
+"use client";
+
 import { Canvas } from "@react-three/fiber";
-import { OrbitControls, Plane } from "@react-three/drei";
+import Link from "next/link";

 import Internal from "@/components/common/Internal";
+import { Button } from "@/components/ui/button";
+import Model from "@/components/common/Model";

 export default function Home(): JSX.Element {
  return (
    <Internal hideFooter>
-      <div className="absolute h-screen w-full top-0 left-0 scene">
-        <Canvas
-          shadows
-          camera={{ position: [4, 2, 2] }}
-        >
-          <OrbitControls />
-          <ambientLight intensity={0.1} />
-          <directionalLight
-            color="white"
-            position={[0, 5, 5]}
-          />
-          <Plane args={[2, 2]} />
-        </Canvas>
+      <div className="flex flex-col justify-center w-full h-screen relative">
+        <div className="container relative z-10">
+          <h1 className="text-4xl md:text-[64px] mt-24 md:mt-0 text-primary font-sans font-bold leading-none">
+            Software Engineer
+            <br />
+            and Web Designer
+          </h1>
+          <p className="md:w-1/2 opacity-60 text-white my-2">
+            I'm looking for freelance clients. Let's talk, and get your website
+            built!
+          </p>
+          <Button asChild>
+            <Link href="/portfolio">Hiring a freelancer?</Link>
+          </Button>
+        </div>
+        <div className="flex flex-col justify-center items-center absolute top-0 left-0 w-full h-screen bg-black">
+          <Canvas
+            shadows
+            camera={{ position: [4, 2, 2] }}
+          >
+            <ambientLight intensity={0.1} />
+            <directionalLight
+              color="white"
+              position={[0, 5, 5]}
+            />
+            <Model />
+          </Canvas>
+        </div>
      </div>
    </Internal>
  );
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -8,7 +8,7 @@
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
-    "moduleResolution": "bundler",
+    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",