fdel/portfolio-redesign
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Pushing up more changes for spheres, tooltips

Browse Source
This commit is contained in:
Frank Delaguila
2022-07-09 22:43:29 -06:00
parent 8f9f4d4fb5
commit d183d9cf27
4 changed files with 83 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
src/components/App.jsx
View File

@@ -4,9 +4,7 @@ import { useRef, useState } from 'react';
import { useFrame, useThree, useLoader } from '@react-three/fiber'; import { useFrame, useThree, useLoader } from '@react-three/fiber';
import { import {
Text, Text,
MeshReflectorMaterial,
Html, Html,
Image,
useScroll, useScroll,
useGLTF, useGLTF,
} from '@react-three/drei'; } 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 linkedInLogo from '../assets/logos/linkedin-logo.png';
import git from '../assets/logos/git-logo.png'; import git from '../assets/logos/git-logo.png';
import { toTitleCase } from '../scripts/utils';
const SocialSphere = ({texture, position, rotation, scale, url}) => { const SocialSphere = ({texture, position, rotation, scale, url}) => {
const [hovered, setHovered] = useState(false); const [hovered, setHovered] = useState(false);
const sphereRef = useRef(); const sphereRef = useRef();
const tooltipRef = useRef();
useFrame((state, delta) => { useFrame((state, delta) => {
// console.log( sphereRef.current.scale ); // console.log( sphereRef.current.scale );
if( hovered ) { if( hovered ) {
tooltipRef.current.style.opacity = 1;
gsap.to( sphereRef.current.scale, { gsap.to( sphereRef.current.scale, {
x: 1.2, x: 1.2,
y: 1.2, y: 1.2,
z: 1.2 z: 1.2
} ); } );
} else { } else {
tooltipRef.current.style.opacity = 0;
gsap.to( sphereRef.current.scale, { gsap.to( sphereRef.current.scale, {
x: 1, x: 1,
y: 1, y: 1,
z: 1 z: 1
} ); } );
} }
}) });
function platformTitle() {
return url.includes('linkedin') ? 'LinkedIn' : 'Github' ;
}
function routeToSocial() { function routeToSocial() {
window.open(url, '_blank'); window.open(url, '_blank');
} }
return ( return (
<mesh ref={sphereRef} onPointerEnter={() => setHovered(true)} onPointerLeave={() => setHovered(false)} onPointerDown={() => routeToSocial()} receiveShadow castShadow position={position} rotation={rotation}> <>
<sphereBufferGeometry args={scale} /> <mesh ref={sphereRef} onPointerEnter={() => setHovered(true)} onPointerLeave={() => setHovered(false)} onPointerDown={() => routeToSocial()} receiveShadow castShadow position={position} rotation={rotation}>
<meshPhysicalMaterial attach="material" color={"white"} map={texture} /> <sphereBufferGeometry args={scale} />
</mesh> <meshPhysicalMaterial attach="material" color={"white"} map={texture} />
</mesh>
<Html ref={tooltipRef} className="tooltip" position={[position[0], position[1] + 0.6, position[2]]} rotation={rotation}>
Click to view my {platformTitle()}
<div class="left-point"></div>
</Html>
</>
); );
}; };
@@ -106,7 +119,7 @@ const App = () => {
gsap.to( sectionTwoRef.current.position, {x: -1.85} ); gsap.to( sectionTwoRef.current.position, {x: -1.85} );
gsap.to( sectionTwoRef.current, {fillOpacity: 1} ); gsap.to( sectionTwoRef.current, {fillOpacity: 1} );
} else { } else {
gsap.to( sectionTwoRef.current.position, {x: -5} ); gsap.to( sectionTwoRef.current.position, {x: -7} );
gsap.to( sectionOneRef.current, { fillOpacity: 1 }); gsap.to( sectionOneRef.current, { fillOpacity: 1 });
gsap.to( sectionTwoRef.current, { fillOpacity: 0 } ); gsap.to( sectionTwoRef.current, { fillOpacity: 0 } );
} }
@@ -123,16 +136,13 @@ const App = () => {
</mesh> </mesh>
<group ref={spheresRef}> <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={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/"/> <SocialSphere texture={gitTexture} position={[2.5, 0, -3]} scale={[0.4]} rotation={[0, -2, -0.2]} url="https://github.com/franky212/"/>
</group> </group>
<spotLight <spotLight
shadow-mapSize-width={1024 * 4} shadow-mapSize-width={1024 * 4}
shadow-mapSize-height={1024 * 4} shadow-mapSize-height={1024 * 4}
// shadow={{ bias: 0 }}
ref={spotlightRef} ref={spotlightRef}
position={[-1.5, 0, 3]} position={[-1.5, 0, 3]}
penumbra={0.4} penumbra={0.4}
@@ -203,18 +213,39 @@ const App = () => {
</div> </div>
</nav> </nav>
<div className="bg-zinc-800 w-full rounded p-4 mb-2">
<h1 className="text-xl font-bold">Hi, my name is Frank Delaguila!</h1><br />
<p>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.<br /><br />
I have experience with testing libraries such as Jest, Enzyme, and React testing library.<br /><br />
Automation tools, and task runners such as Webpack, Grunt, and NPM.<br /><br />
I also work as a UX/UI designer using tools such as the Adobe Suite(Adobe XD, Adobe Illustrator, etc.), Sketch, and Figma.
</p>
</div>
<h2 className="text-xl font-bold text-center my-4">Experience</h2>
<div className="bg-zinc-800 w-full rounded p-4 mb-2"> <div className="bg-zinc-800 w-full rounded p-4 mb-2">
<a target="_blank" href="https://www.monumetric.com/"> <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" /> <img className="w-16 mb-2" src={monumetricLogo} alt="Monumetric Logo - Graphic of the Pale Blue Dot from Caral Sagan with Monumetric below" />
</a> </a>
<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> <p>
<span className="font-bold">Frontend Developer and UX/UI Designer<br /></span>
Oct 2021 - Present<br />
Technologies Used:<br />
Angular 3/7/13+, Javascript, SCSS(Sass), UX/UI Design, Adobe XD, Figma
</p>
</div> </div>
<div className="bg-zinc-800 w-full rounded p-4 mb-2"> <div className="bg-zinc-800 w-full rounded p-4 mb-2">
<a target="_blank" href="https://www.ultradent.com/"> <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." /> <img className="w-12 mb-2" src={ultradentLogo} alt="Ultradent Logo - UPI in white for Ultradent Products Inc." />
</a> </a>
<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> <p>
<span className="font-bold">Front End Developer<br /></span>
May 2018 - Apr 2020<br />
Technologies Used:<br />
React/Preact, Javascript, jQuery, Webpack, Storybook, React Testing Library, SCSS(Sass), Razor Views, Figma, Sketch</p>
</div> </div>
</div> </div>

2
src/scripts/app.js
View File

@@ -12,7 +12,7 @@ render(
<Suspense fallback={null}> <Suspense fallback={null}>
<MainContent /> <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'}}> <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={1}> <ScrollControls distance={4} pages={1}>
<Scroll> <Scroll>
<App /> <App />
</Scroll> </Scroll>

8
src/scripts/utils.js Normal file
View File

@@ -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();
}
);
}

30
src/styles/styles.scss
View File

@@ -10,6 +10,14 @@ body {
font-family: 'Museo Sans', 'Helvetica', sans-serif; font-family: 'Museo Sans', 'Helvetica', sans-serif;
} }
:root {
--primary: #9c2018;
}
.primary-color {
color: var(--primary);
}
#root { #root {
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
position: relative; 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 { .content {
width: 334px; width: 334px;
height: 216px; height: 216px;