✨ Tech stack setup

src/components/HtmlContent/HtmlContent.tsx

@@ -26,7 +26,7 @@ export const HtmlContent: FC = () => {
           </motion.div>
         </div>
       </motion.section>
-      <div className="absolute top-100-vh w-full h-screen flex justify-center lg:justify-start lg:mx-4 lg:mx-8">
+      <div className="absolute top-100-vh w-full h-screen flex justify-center lg:justify-start lg:mx-8">
         <div className="flex flex-col items-center justify-start lg:items-start lg:justify-center">
           <h1 className="text-4xl font-extrabold m-0 ">Languages</h1>
           <div className="flex items-center my-8">
@@ -52,6 +52,11 @@ export const HtmlContent: FC = () => {
             />
           </div>
         </div>
+      </div>
+      <div className="absolute top-200-vh w-full h-screen flex justify-center lg:justify-start lg:mx-8">
+        <div>
+          <h1 className="text-4xl font-extrabold mt-20">Tech stack</h1>
+        </div>
         <div className="absolute bottom-8">
           <Link href="https://github.com/leota/my-3d-resume" target="_blank">
             <div className="flex items-center">
@@ -62,22 +67,11 @@ export const HtmlContent: FC = () => {
                 height={36}
                 className="mr-2"
               />
-              <p className="text-blue-700 underline"
-              >View on GitHub</p>
+              <p className="text-blue-700 underline">View on GitHub</p>
             </div>
           </Link>
         </div>
       </div>
-      {/* <div className="absolute top-200-vh w-full h-screen">
-        <motion.div whileHover={{ scale: 1.1 }} transition={{ duration: 0.5 }}>
-          <h1 className="text-4xl font-extrabold mt-20">Leonardo</h1>
-        </motion.div>
-      </div>
-      <div className="absolute top-300-vh w-full h-screen">
-        <motion.div whileHover={{ scale: 1.1 }} transition={{ duration: 0.5 }}>
-          <h1 className="text-4xl font-extrabold mt-20">Leonardo</h1>
-        </motion.div>
-      </div> */}
     </div>
   );
 };

src/components/TechStack/TechStack.tsx

@@ -0,0 +1,30 @@
+import { FC, useRef } from "react";
+import * as THREE from "three";
+import { StructureModel } from "./models/StructureModel";
+import { EnvelopeModel } from "./models/EnvelopeModel";
+import { UIPanelModel } from "./models/UIPanelModel";
+import { PizzaIconModel } from "./models/PizzaIconModel";
+import { CheeseBurgerIconModel } from "./models/CheeseBurgerIconModel";
+
+const baseXPosition = 0;
+const baseYPosition = 0;
+
+const rotation = new THREE.Euler(0, Math.PI / 5, 0);
+
+let position: THREE.Vector3, scale: number;
+
+export const TechStack: FC = () => {
+  const ref = useRef<THREE.Group>(null!);
+  position = new THREE.Vector3(baseXPosition, baseYPosition, 0);
+  scale = 10;
+
+  return (
+    <group ref={ref} position={position} rotation={rotation} scale={scale}>
+      <StructureModel />
+      <UIPanelModel />
+      <PizzaIconModel />
+      <CheeseBurgerIconModel />
+      <EnvelopeModel />
+    </group>
+  );
+};

src/components/TechStack/models/CheeseBurgerIconModel.tsx

@@ -0,0 +1,11 @@
+import { FC } from "react";
+
+import { useGLTF } from "@react-three/drei";
+
+export const CheeseBurgerIconModel: FC = () => {
+  const { scene } = useGLTF("/assets/cheeseburger-icon.glb");
+
+  return <primitive object={scene} />;
+};
+
+useGLTF.preload("/assets/cheeseburger-icon.glb");

src/components/TechStack/models/EnvelopeModel.tsx

@@ -0,0 +1,11 @@
+import { FC } from "react";
+
+import { useGLTF } from "@react-three/drei";
+
+export const EnvelopeModel: FC = () => {
+  const { scene } = useGLTF("/assets/envelope.glb");
+
+  return <primitive object={scene} />;
+};
+
+useGLTF.preload("/assets/envelope.glb");

src/components/TechStack/models/PizzaIconModel.tsx

@@ -0,0 +1,11 @@
+import { FC } from "react";
+
+import { useGLTF } from "@react-three/drei";
+
+export const PizzaIconModel: FC = () => {
+  const { scene } = useGLTF("/assets/pizza-icon.glb");
+
+  return <primitive object={scene} />;
+};
+
+useGLTF.preload("/assets/pizza-icon.glb");

src/components/TechStack/models/StructureModel.tsx

@@ -0,0 +1,19 @@
+import { FC, useEffect } from "react";
+import { useThree } from "@react-three/fiber";
+import { useGLTF } from "@react-three/drei";
+
+export const StructureModel: FC = () => {
+  const { scene, cameras } = useGLTF("/assets/structure.glb");
+  const { set, camera } = useThree();
+
+  useEffect(() => {
+    if (cameras.length > 0) {
+      const glbCamera = cameras[0] as any;
+      set({ camera: glbCamera });
+    }
+  }, [cameras, set, camera]);
+
+  return <primitive object={scene} />;
+};
+
+useGLTF.preload("/assets/structure.glb");

src/components/TechStack/models/UIPanelModel.tsx

@@ -0,0 +1,11 @@
+import { FC } from "react";
+
+import { useGLTF } from "@react-three/drei";
+
+export const UIPanelModel: FC = () => {
+  const { scene } = useGLTF("/assets/ui-panel.glb");
+
+  return <primitive object={scene} />;
+};
+
+useGLTF.preload("/assets/ui-panel.glb");