Pushing new portfolio changes, and going live

src/components/App.jsx

@@ -1,83 +1,55 @@
 import '../styles/styles.scss';
 import * as THREE from 'three';
 import { useRef, useState } from 'react';
-import { useFrame, useThree } from '@react-three/fiber';
+import { useFrame, useThree, useLoader } from '@react-three/fiber';
 import { 
   Text, 
   MeshReflectorMaterial, 
-  useTexture, 
   Html, 
   Image, 
-  Scroll, 
   useScroll, 
-  ScrollControls, 
   useGLTF,
-  useHelper,
-  OrbitControls
  } from '@react-three/drei';
 import { gsap } from 'gsap';
 
 import font from '../assets/fonts/Inter-Bold.woff';
-import toyCar from '../assets/models/ToyCar.glb';
 import mac from '../assets/models/mac-draco.glb';
-import { SpotLightHelper, DirectionalLightHelper } from 'three';
 import logo from '../assets/logos/fd..svg';
 import ultradentLogo from '../assets/logos/ultradent-white.svg';
 import monumetricLogo from '../assets/logos/monumetric-stacked-white.svg';
+import linkedInLogo from '../assets/logos/linkedin-logo.png';
+import git from '../assets/logos/git-logo.png';
 
-const rsqw = (t, delta = 0.1, a = 1, f = 1 / (2 * Math.PI)) => (a / Math.atan(1 / delta)) * Math.atan(Math.sin(2 * Math.PI * t * f) / delta)
-
-const Floor = () => {
-  // const [floor, normal] = useTexture([floorTexture, floorTextureNormal]);
-  return (
-    <mesh rotation={[-Math.PI / 2, 0, 0]}>
-      <planeGeometry attach='geometry' args={[15, 7]} />
-      <MeshReflectorMaterial
-        blur={[400, 400]}
-        color="#1a1a1d"
-        resolution={512}
-        mixBlur={7}
-        args={[10, 10]}
-        mirror={0.5}
-        mixStrength={0.2}
-        roughnessMap={floor}
-        metalness={0.4}
-        normalMap={normal}
-        normalScale={[3, 3]}
-      />
-    </mesh>
-  );
-};
-
-const Dog = ({position, scale, index}) => {
-  const ref = useRef();
-
-  const scroll = useScroll();
+const SocialSphere = ({texture, position, rotation, scale, url}) => {
   const [hovered, setHovered] = useState(false);
-  const [clicked, setClicked] = useState(false);
-  const [rnd] = useState(() => Math.random());
+  const sphereRef = useRef();
 
   useFrame((state, delta) => {
-    ref.current.material.scale[0] = ref.current.scale.x = THREE.MathUtils.damp(ref.current.scale.x, clicked ? 4 : scale[0], 6, delta);
-
-    ref.current.position.x = THREE.MathUtils.damp(ref.current.position.x, clicked ? position[0] + 1 : position[0], 6, delta);
-
-    ref.current.scale.x = THREE.MathUtils.damp(ref.current.scale.x, hovered ? 0.75 : scale[0], 6, delta);
-    ref.current.scale.y = THREE.MathUtils.damp(ref.current.scale.y, hovered ? scale[1] + 0.1 : scale[1], 8, delta);
-    ref.current.material.grayscale = THREE.MathUtils.damp(ref.current.material.grayscale, hovered ? 0 : 1, 6, delta);
-    ref.current.material.zoom = 1.5 + Math.sin(rnd * 10000 + state.clock.elapsedTime / 3) / 2;
-    ref.current.material.color.lerp(new THREE.Color().set(hovered ? 'white' : '#aaa'), hovered ? 0.3 : 0.1);
+    // console.log( sphereRef.current.scale );
+    if( hovered ) {
+      gsap.to( sphereRef.current.scale, {
+        x: 1.2,
+        y: 1.2,
+        z: 1.2
       } );
+    } else {
+      gsap.to( sphereRef.current.scale, {
+        x: 1,
+        y: 1,
+        z: 1
+      } );
+    }
+  })
+
+  function routeToSocial() {
+    window.open(url, '_blank');
+  }
+
   return (
-      <Image
-        ref={ref}
-        onClick={() => setClicked(!clicked)}
-        onPointerOver={() => setHovered(true)}
-        onPointerOut={() => setHovered(false)}
-        url="https://picsum.photos/id/237/1920/1028"
-        position={position}
-        rotation={[0, 0, 0]}
-        scale={scale}/>
+    <mesh ref={sphereRef} onPointerEnter={() => setHovered(true)} onPointerLeave={() => setHovered(false)} onPointerDown={() => routeToSocial()} receiveShadow castShadow position={position} rotation={rotation}>
+      <sphereBufferGeometry args={scale} />
+      <meshPhysicalMaterial attach="material" color={"white"} map={texture} />
+    </mesh>
   );
 };
 
@@ -88,12 +60,11 @@ const App = () => {
   const spotlightRef = useRef();
   const directionalLightRef = useRef();
   const lightingTarget = useRef();
-  const sphereRef = useRef();
+  const spheresRef = useRef();
   const { camera, gl } = useThree();
   const [screenClicked, setScreenClicked] = useState(false);
-
-  // useHelper( spotlightRef, SpotLightHelper, 1 );
-  // useHelper( directionalLightRef, DirectionalLightHelper, 1 );
+  const linkedin = useLoader(THREE.TextureLoader, linkedInLogo);
+  const gitTexture = useLoader(THREE.TextureLoader, git);
 
   const mbp16 = useRef();
   const xW = 0.7 + 0.15;
@@ -107,6 +78,7 @@ const App = () => {
     sectionOneRef.current.rotation.y = -Math.sin(rnd * state.clock.elapsedTime) / 8;
     sectionTwoRef.current.rotation.y = -Math.sin(rnd * state.clock.elapsedTime) / 8;
     imageGroupRef.current.position.y = scroll.offset * 14;
+    spheresRef.current.position.y = scroll.offset * 14;
 
     if ( !r2 || scroll.range( 2 / 4, 2 / 4 ) ) {
       setScreenClicked( false );
@@ -123,8 +95,6 @@ const App = () => {
       y: screenClicked && r2 ? -0.5 : 0
     } );
 
-    // mbp16.current.rotation.x = Math.PI - (Math.PI / 2) * rsqw(r1) + r2 * 0.33;
-
     if( scroll.range(1 / 3, 2 / 3) ) {
       gsap.to( sectionOneRef.current.position, {x: -5} );
     } else {
@@ -146,17 +116,18 @@ const App = () => {
     <>
       {/* <OrbitControls args={[camera, gl.domElement]} /> */}
       <color attach="background" args={["#FAF9F6"]} />
-      {/* <fog attach="fog" args={["#FAF9F6", 0, 15]} /> */}
 
       <mesh receiveShadow position={[0, 0, -4]} rotation={[0, 0, 0]}>
-        <planeGeometry args={[100, 100]} />
+        <planeGeometry args={[150, 150]} />
         <meshStandardMaterial attach="material" color="#FAF9F6" />
       </mesh>
 
-      {/* <mesh ref={sphereRef} receiveShadow castShadow position={[2, 0, -3]}>
-        <sphereBufferGeometry scale={[0.1, 0.1]} />
-        <meshStandardMaterial attach="material" color={"pink"} />
-      </mesh> */}
+      <group ref={spheresRef}>
+
+        <SocialSphere texture={linkedin} position={[1, 0, -3]} scale={[0.4]} rotation={[0, -1.8, -0.2]} url="https://www.linkedin.com/in/frank-delaguila/"/>
+        <SocialSphere texture={gitTexture} position={[2.5, 0, -3]} scale={[0.4]} rotation={[0, -2, -0.2]} url="https://github.com/franky212/"/>
+        
+      </group>
 
       <spotLight
         shadow-mapSize-width={1024 * 4}
@@ -211,13 +182,6 @@ const App = () => {
 
       <group ref={lightingTarget}>
         <group ref={imageGroupRef} position={[0, 0, 0]}>
-          {/* <Dog index={0} position={[1.5 * xW, -0.1, -3]} scale={[0.7, 2, 1]} />
-          <Dog index={1} position={[2.5 * xW, -0.1, -3]} scale={[0.7, 2, 1]} />
-          <Dog index={2} position={[3.5 * xW, -0.1, -3]} scale={[0.7, 2, 1]} /> */}
-
-          {/* <group rotation={[Math.PI / 2, 0, 0]} position={[1.5, -1, -3]} scale={[0.01, 0.01, 0.01]}>
-                <mesh receiveShadow castShadow geometry={toyCar.nodes.ToyCar.geometry} />
-              </group> */}
 
           <group position={[1.5, -6, -3]} rotation={[0, -0.5, 0]} ref={mbp16} dispose={null} scale={[0.2, 0.2, 0.2]}>
             <group position={[0, 2.85, 0.4]}>
@@ -243,14 +207,14 @@ const App = () => {
                           <a target="_blank" href="https://www.monumetric.com/">
                             <img className="w-16 mb-2" src={monumetricLogo} alt="Monumetric Logo - Graphic of the Pale Blue Dot from Caral Sagan with Monumetric below" />
                           </a>
-                          <p><span className="font-bold">Technologies Used:</span><br />Angular 3/7/13+, Javascript, SCSS(Sass), Multiple Auth APIs, UX/UI Design, Figma, Adobe XD</p>
+                          <p><span className="font-bold">Frontend Developer and UX/UI Designer<br /></span>Technologies Used:<br />Angular 3/7/13+, Javascript, SCSS(Sass), UX/UI Design, Adobe XD, Figma</p>
                         </div>
 
                         <div className="bg-zinc-800 w-full rounded p-4 mb-2">
                           <a target="_blank" href="https://www.ultradent.com/">
                             <img className="w-12 mb-2" src={ultradentLogo} alt="Ultradent Logo - UPI in white for Ultradent Products Inc." />
                           </a>
-                          <p><span className="font-bold">Technologies Used:</span><br />React/Preact, Javascript, jQuery, Webpack, Storybook, React Testing Library, SCSS(Sass), Razor Views, Figma, Sketch</p>
+                          <p><span className="font-bold">Front End Developer<br /></span>Technologies Used:<br />React/Preact, Javascript, jQuery, Webpack, Storybook, React Testing Library, SCSS(Sass), Razor Views, Figma, Sketch</p>
                         </div>
 
                       </div>

src/components/MainContent.jsx

@@ -3,21 +3,17 @@ import logo from '../assets/logos/fd..svg';
 const MainContent = () => {
 
   return (
+    <>
     <main className="container">
       <nav className="flex items-center w-full">
         <img
-          alt="Frank Delaguila - Designer and Developer Logo (FD.)"
+          alt="Frank Delaguila - Front End Web Developer and Designer Logo (FD.)"
           className="w-16"
           src={logo}
         />
-        {/* <ul className="flex items-center justify-between ml-24 w-64">
-          <li>Home</li>
-          <li>About</li>
-          <li>Portfolio</li>
-          <li>Contact</li>
-        </ul> */}
       </nav>
     </main>
+    </>
   );
 };
 

src/scripts/app.js

@@ -12,7 +12,7 @@ render(
     <Suspense fallback={null}>
       <MainContent />
       <Canvas shadows mode='concurrent' dpr={Math.max(window.devicePixelRatio, 2)} gl={{ antialias: true }} camera={{position: [0, 0, 0]}} id="canvas-container" style={{position: 'absolute'}}>
-        <ScrollControls damping={10} pages={10}>
+        <ScrollControls damping={10} pages={1}>
           <Scroll>
             <App />
           </Scroll>

src/styles/styles.scss

@@ -11,6 +11,7 @@ body {
 }
 
 #root {
+  text-rendering: optimizeLegibility;
   position: relative;
   height: 100vh;
   .container {

src/views/index.html

@@ -5,7 +5,7 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="shortcut icon" type="image/jpg" href="../assets/logos/fd..svg"/>
-  <title>Designer and Developer</title>
+  <title>Font End Web Developer and Designer</title>
 
   <link rel="stylesheet" href="https://use.typekit.net/vkd2vwx.css">
 </head>