Adding in more details to Mac
This commit is contained in:
Frank Delaguila
1
src/assets/logos/monumetric-stacked-white.svg
Normal file
1
src/assets/logos/monumetric-stacked-white.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 7.4 KiB |
1
src/assets/logos/ultradent-white.svg
Normal file
1
src/assets/logos/ultradent-white.svg
Normal file
@@ -0,0 +1 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?><svg viewBox="0 0 194 127" xmlns="http://www.w3.org/2000/svg"><g fill="#FFF" fill-rule="evenodd"><path fill-rule="nonzero" d="M180.625 126.816h-4.384v-10.754h-6.454v-3.575h17.275v3.575h-6.437zM166.431 126.816h-6.989l-8.717-10.771v10.771h-4.122v-14.329h6.989l8.711 10.748v-10.748h4.128zM126.024 112.487h16.107v3.253h-11.723v2.464h10.944v2.832h-10.944v2.556h11.723v3.224h-16.107z"/><path d="M117.162 126.816h-14.356v-14.323h12.728c5.158 0 6.612 1.261 6.612 6.436v.818c0 1.116 0 2.279-.175 3.373-.43 2.493-2.297 3.696-4.809 3.696zm-9.972-10.817v7.317h7.414c2.907 0 3.099-1.1 3.099-3.616v-.132c0-2.452-.041-3.569-3.035-3.569h-7.478zM95.531 126.816l-1.366-2.591h-9.333l-1.43 2.591h-4.897l8.06-14.329h5.937l7.885 14.329h-4.856zm-6.07-11.243l-3.1 5.693h6.199l-3.1-5.693zM61.928 126.816h-4.39v-14.335h13.438c3.407 0 4.838 1.071 4.838 4.531 0 .996-.064 2.095-.605 2.953-.474.733-1.295.981-2.094 1.222-.143.043-.285.086-.424.131 1.85.236 2.954.771 2.954 2.752v2.746h-4.466v-1.365c0-1.577-.064-2.308-1.907-2.308h-7.344v3.673zm0-10.852v3.708h7.21c2.059 0 2.233-.409 2.233-2.004-.017-.754-.04-1.335-.866-1.571-.39-.11-.843-.133-1.256-.133h-7.321z"/><path fill-rule="nonzero" d="M47.676 126.816H43.29v-10.754h-6.454v-3.575h17.27v3.575h-6.431zM27.742 123.241h9.99v3.575H23.358v-14.329h4.384zM18.723 112.522v9.009c0 4.83-2.942 5.469-7.216 5.469-1.192 0-2.407-.023-3.605-.023-4.6 0-7.751-.167-7.751-5.665v-8.796h4.384v7.501c.087 2.688.239 3.379 3.146 3.443l1.977.023 1.826-.023c2.477 0 2.756-.691 2.82-2.821v-8.123h4.42v.006zM193.031 1.553l-1.115 3-1.121-2.93-.028-.07h-.969v4.18h.712V2.68l1.176 3.053h.426l1.177-3.053v3.053H194v-4.18zM186.173 2.213h1.233v3.52h.711v-3.52h1.233v-.66h-3.177z"/><path d="M173.828 0c6.484 0 13.066 7 13.066 13.862l.07 46.872c0 3.517-2.879 6.367-6.431 6.367l-43.507-.017c-3.483-.075-6.35-2.885-6.35-6.35V44.92c0-3.408 2.797-6.35 6.275-6.35h13.031c2.814 0 5.082-2.343 4.907-5.17-.157-2.601-2.465-4.57-5.099-4.57h-21.265c-3.791 0-6.867 3.045-6.867 6.799V89.84c0 7-6.583 14.024-13.06 14.024H12.932C6.454 103.864-.018 96.84 0 89.84.017 84.976 0 5.768 0 5.768 0 2.608 2.588.046 5.78.046h44.664c3.192 0 5.78 2.562 5.78 5.722v51.16c0 2.7 2.366 4.848 5.157 4.526 2.344-.277 4.041-2.378 4.041-4.715V5.774c0-3.16 2.588-5.722 5.78-5.722 0 0 88.909-.052 102.626-.052zm13.066 97.49l.012-14.91c0-3.517-2.879-6.366-6.431-6.36h-43.617c-3.483.08-6.286 2.901-6.286 6.367v14.91c0 3.465 2.803 6.269 6.286 6.349l43.605.012c3.553 0 6.431-2.85 6.431-6.367z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 2.4 KiB |
@@ -17,14 +17,13 @@ import {
|
||||
} from '@react-three/drei';
|
||||
import { gsap } from 'gsap';
|
||||
|
||||
// import floorTexture from '../assets/textures/texture1.jpg';
|
||||
// import floorTextureNormal from '../assets/textures/texture1_normal.jpg';
|
||||
import font from '../assets/fonts/Inter-Bold.woff';
|
||||
// import deskScene from '../assets/models/desk_asset/scene.gltf';
|
||||
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';
|
||||
|
||||
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)
|
||||
|
||||
@@ -50,31 +49,35 @@ const Floor = () => {
|
||||
);
|
||||
};
|
||||
|
||||
const Dog = ({position, scale}) => {
|
||||
const Dog = ({position, scale, index}) => {
|
||||
const ref = useRef();
|
||||
|
||||
const scroll = useScroll();
|
||||
const [hovered, setHovered] = useState(false);
|
||||
const [clicked, setClicked] = useState(false);
|
||||
const [rnd] = useState(() => Math.random());
|
||||
|
||||
useFrame((state, delta) => {
|
||||
// console.log( r1 );
|
||||
// ref.current.position.x = THREE.MathUtils.damp(ref.current.position.x, position[0] - 2, 6, delta);
|
||||
// ref.current.rotation.y = -Math.sin(rnd * state.clock.elapsedTime) / 6;
|
||||
// if( !scroll.range(1 / 3, 1 / 3) ) {
|
||||
// ref.current.position.y = scroll.offset * 10;
|
||||
// console.log( props );
|
||||
// }
|
||||
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)
|
||||
// ref.current.position.x = (position[0] - 1) * scroll.current;
|
||||
// console.log( ref.current.position.x );
|
||||
ref.current.material.color.lerp(new THREE.Color().set(hovered ? 'white' : '#aaa'), hovered ? 0.3 : 0.1);
|
||||
});
|
||||
return (
|
||||
<Image ref={ref} onPointerOver={() => setHovered(true)} onPointerOut={() => setHovered(false)} url="https://picsum.photos/id/237/1920/1024" position={position} rotation={[0, 0, 0]} scale={scale}/>
|
||||
<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}/>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -207,9 +210,9 @@ const App = () => {
|
||||
|
||||
<group ref={lightingTarget}>
|
||||
<group ref={imageGroupRef} position={[0, 0, 0]}>
|
||||
<Dog position={[1.5 * xW, -0.1, -3]} scale={[0.7, 2, 1]} />
|
||||
<Dog position={[2.5 * xW, -0.1, -3]} scale={[0.7, 2, 1]} />
|
||||
<Dog position={[3.5 * xW, -0.1, -3]} scale={[0.7, 2, 1]} />
|
||||
<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} />
|
||||
@@ -223,16 +226,32 @@ const App = () => {
|
||||
<mesh castShadow geometry={nodes['Cube008_2'].geometry}>
|
||||
{/* Drei's HTML component can now "hide behind" canvas geometry */}
|
||||
<Html className="content" rotation-x={-Math.PI / 2} position={[0, 0.05, -0.09]} transform occlude>
|
||||
<div className="text-xs text-white" onMouseEnter={() => setScreenClicked(!screenClicked)} onMouseLeave={() => setScreenClicked(!screenClicked)}>
|
||||
<div className="text-xs text-white">
|
||||
<div className="px-4 wrapper">
|
||||
<nav className="flex items-center justify-between pt-4 pb-2">
|
||||
<nav className="flex items-center justify-between py-2">
|
||||
<img alt="Frank Delaguila - Designer and Developer Logo (FD.)" className="w-6" src={logo} />
|
||||
<h1>Hello</h1>
|
||||
<div className="flex items-center">
|
||||
<p className="mr-2">{!screenClicked ? 'Zoom In' : 'Zoom Out'}</p>
|
||||
<div onMouseDown={() => setScreenClicked(!screenClicked)} className="cursor-pointer bg-zinc-800 py-2 px-4 rounded-sm hover:bg-zinc-700 transition-colors">
|
||||
{!screenClicked ? <i class="fa-solid fa-magnifying-glass-plus"></i> : <i class="fa-solid fa-magnifying-glass-minus"></i>}
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<div className="bg-zinc-800 w-full rounded p-4">
|
||||
<h1 className="font-bold uppercase text-xl" style={ {color: '#e35205'} }>Ultradent</h1>
|
||||
<p>React/Preact, Javascript, jQuery, Webpack, Storybook, React Testing Library</p>
|
||||
|
||||
<div className="bg-zinc-800 w-full rounded p-4 mb-2">
|
||||
<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+, SCSS(Sass), AWS/Google Auth APIs, Social Media APIs, Figma, Adobe XD</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>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</Html>
|
||||
|
||||
@@ -11,7 +11,7 @@ render(
|
||||
<>
|
||||
<Suspense fallback={null}>
|
||||
<MainContent />
|
||||
<Canvas shadows mode='concurrent' gl={{ antialias: true }} dpr={[1, 1.5]} camera={{position: [0, 0, 0]}} id="canvas-container" style={{position: 'absolute'}}>
|
||||
<Canvas shadows mode='concurrent' devicePixelRatio={2} gl={{ antialias: true }} camera={{position: [0, 0, 0]}} id="canvas-container" style={{position: 'absolute'}}>
|
||||
<ScrollControls damping={10} pages={10}>
|
||||
<Scroll>
|
||||
<App />
|
||||
|
||||
@@ -37,6 +37,17 @@ body {
|
||||
border-radius: 3px;
|
||||
overflow-y: auto;
|
||||
padding: 0;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 12px;
|
||||
background-color: #1a1a1d;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
border-radius: 10px;
|
||||
-webkit-box-shadow: inset 0 0 6px rgb(63 63 70);
|
||||
box-shadow: inset 0 0 6px rgb(63 63 70);
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
|
||||
@@ -11,5 +11,7 @@
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
||||
<script src="https://kit.fontawesome.com/9ebadc0c2a.js" crossorigin="anonymous"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user