diff --git a/src/components/App.jsx b/src/components/App.jsx index f5b2dc3..1bb291a 100644 --- a/src/components/App.jsx +++ b/src/components/App.jsx @@ -4,9 +4,7 @@ import { useRef, useState } from 'react'; import { useFrame, useThree, useLoader } from '@react-three/fiber'; import { Text, - MeshReflectorMaterial, Html, - Image, useScroll, useGLTF, } from '@react-three/drei'; @@ -20,36 +18,51 @@ 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'; +import { toTitleCase } from '../scripts/utils'; + const SocialSphere = ({texture, position, rotation, scale, url}) => { const [hovered, setHovered] = useState(false); const sphereRef = useRef(); + const tooltipRef = useRef(); useFrame((state, delta) => { // console.log( sphereRef.current.scale ); if( hovered ) { + tooltipRef.current.style.opacity = 1; gsap.to( sphereRef.current.scale, { x: 1.2, y: 1.2, z: 1.2 } ); } else { + tooltipRef.current.style.opacity = 0; gsap.to( sphereRef.current.scale, { x: 1, y: 1, z: 1 } ); } - }) + }); + + function platformTitle() { + return url.includes('linkedin') ? 'LinkedIn' : 'Github' ; + } function routeToSocial() { window.open(url, '_blank'); } return ( - setHovered(true)} onPointerLeave={() => setHovered(false)} onPointerDown={() => routeToSocial()} receiveShadow castShadow position={position} rotation={rotation}> - - - + <> + setHovered(true)} onPointerLeave={() => setHovered(false)} onPointerDown={() => routeToSocial()} receiveShadow castShadow position={position} rotation={rotation}> + + + + + Click to view my {platformTitle()} +
+ + ); }; @@ -106,7 +119,7 @@ const App = () => { gsap.to( sectionTwoRef.current.position, {x: -1.85} ); gsap.to( sectionTwoRef.current, {fillOpacity: 1} ); } else { - gsap.to( sectionTwoRef.current.position, {x: -5} ); + gsap.to( sectionTwoRef.current.position, {x: -7} ); gsap.to( sectionOneRef.current, { fillOpacity: 1 }); gsap.to( sectionTwoRef.current, { fillOpacity: 0 } ); } @@ -123,16 +136,13 @@ const App = () => { - - { +
+

Hi, my name is Frank Delaguila!


+

I work as a Front End Web Developer and UX/UI Designer. I have experience in frameworks/libraries and languages such as Angular, React, Javascript, jQuery, Node.js, GraphQL, MongoDB, and Express.

+ I have experience with testing libraries such as Jest, Enzyme, and React testing library.

+ Automation tools, and task runners such as Webpack, Grunt, and NPM.

+ + I also work as a UX/UI designer using tools such as the Adobe Suite(Adobe XD, Adobe Illustrator, etc.), Sketch, and Figma. +

+
+ +

Experience

+
Monumetric Logo - Graphic of the Pale Blue Dot from Caral Sagan with Monumetric below -

Frontend Developer and UX/UI Designer
Technologies Used:
Angular 3/7/13+, Javascript, SCSS(Sass), UX/UI Design, Adobe XD, Figma

+

+ Frontend Developer and UX/UI Designer
 + Oct 2021 - Present
+ Technologies Used:
+ Angular 3/7/13+, Javascript, SCSS(Sass), UX/UI Design, Adobe XD, Figma +

Ultradent Logo - UPI in white for Ultradent Products Inc. -

Front End Developer
Technologies Used:
React/Preact, Javascript, jQuery, Webpack, Storybook, React Testing Library, SCSS(Sass), Razor Views, Figma, Sketch

+

+ Front End Developer
 + May 2018 - Apr 2020
+ Technologies Used:
+ React/Preact, Javascript, jQuery, Webpack, Storybook, React Testing Library, SCSS(Sass), Razor Views, Figma, Sketch

diff --git a/src/scripts/app.js b/src/scripts/app.js index 9187aca..1302e2c 100644 --- a/src/scripts/app.js +++ b/src/scripts/app.js @@ -12,7 +12,7 @@ render( - + diff --git a/src/scripts/utils.js b/src/scripts/utils.js new file mode 100644 index 0000000..6ca8d80 --- /dev/null +++ b/src/scripts/utils.js @@ -0,0 +1,8 @@ +export function toTitleCase(str) { + return str.replace( + /\w\S*/g, + function(txt) { + return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase(); + } + ); +} \ No newline at end of file diff --git a/src/styles/styles.scss b/src/styles/styles.scss index 79b56ad..0885cf4 100644 --- a/src/styles/styles.scss +++ b/src/styles/styles.scss @@ -10,6 +10,14 @@ body { font-family: 'Museo Sans', 'Helvetica', sans-serif; } +:root { + --primary: #9c2018; +} + +.primary-color { + color: var(--primary); +} + #root { text-rendering: optimizeLegibility; position: relative; @@ -31,6 +39,28 @@ body { } } +.tooltip { + background-color: #1a1a1d; + color: white; + padding: 0.5rem; + width: 200px; + border-radius: 8px; + opacity: 0; + transition: opacity .2s ease-in-out; + + .left-point { + width: 0; + height: 0; + border-left: 1vh solid transparent; + border-right: 1vh solid transparent; + border-top: 2vh solid #1a1a1d; + position: absolute; + top: 65%; + left: -4%; + transform: rotate(50deg); + } +} + .content { width: 334px; height: 216px;