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

Adding in HTML/styles to laptop mesh

Browse Source
This commit is contained in:
Frank Delaguila
2022-03-21 00:02:05 -06:00
parent 1935e2ed37
commit 6ca271459b
3 changed files with 26 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/App.jsx
View File

@@ -24,6 +24,7 @@ import font from '../assets/fonts/Inter-Bold.woff';
import toyCar from '../assets/models/ToyCar.glb'; import toyCar from '../assets/models/ToyCar.glb';
import mac from '../assets/models/mac-draco.glb'; import mac from '../assets/models/mac-draco.glb';
import { SpotLightHelper, DirectionalLightHelper } from 'three'; import { SpotLightHelper, DirectionalLightHelper } from 'three';
import logo from '../assets/logos/fd..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) 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)
@@ -221,9 +222,18 @@ const App = () => {
<mesh castShadow material={materials['matte.001']} geometry={nodes['Cube008_1'].geometry} /> <mesh castShadow material={materials['matte.001']} geometry={nodes['Cube008_1'].geometry} />
<mesh castShadow geometry={nodes['Cube008_2'].geometry}> <mesh castShadow geometry={nodes['Cube008_2'].geometry}>
{/* Drei's HTML component can now "hide behind" canvas geometry */} {/* Drei's HTML component can now "hide behind" canvas geometry */}
<Html onClick={() => setScreenClicked(!screenClicked)} className="content" rotation-x={-Math.PI / 2} position={[0, 0.05, -0.09]} transform occlude> <Html className="content" rotation-x={-Math.PI / 2} position={[0, 0.05, -0.09]} transform occlude>
<div className="wrapper"> <div className="text-xs text-white" onMouseEnter={() => setScreenClicked(!screenClicked)} onMouseLeave={() => setScreenClicked(!screenClicked)}>
<div className="px-4 wrapper">
<nav className="flex items-center justify-between pt-4 pb-2">
<img alt="Frank Delaguila - Designer and Developer Logo (FD.)" className="w-6" src={logo} />
<h1>Hello</h1> <h1>Hello</h1>
</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>
</div>
</div> </div>
</Html> </Html>
</mesh> </mesh>

10
src/components/MainContent.jsx
View File

@@ -5,13 +5,17 @@ const MainContent = () => {
return ( return (
<main className="container"> <main className="container">
<nav className="flex items-center w-full"> <nav className="flex items-center w-full">
<img alt="Frank Delaguila - Designer and Developer Logo (FD.)" className="w-16" src={logo} /> <img
<ul className="flex items-center justify-between ml-24 w-64"> alt="Frank Delaguila - Designer and Developer Logo (FD.)"
className="w-16"
src={logo}
/>
{/* <ul className="flex items-center justify-between ml-24 w-64">
<li>Home</li> <li>Home</li>
<li>About</li> <li>About</li>
<li>Portfolio</li> <li>Portfolio</li>
<li>Contact</li> <li>Contact</li>
</ul> </ul> */}
</nav> </nav>
</main> </main>
); );

6
src/styles/styles.scss
View File

@@ -33,16 +33,12 @@ body {
.content { .content {
width: 334px; width: 334px;
height: 216px; height: 216px;
background: #f0f0f0; background: #1a1a1d;
border-radius: 3px; border-radius: 3px;
overflow-y: auto; overflow-y: auto;
padding: 0; padding: 0;
} }
.wrapper { .wrapper {
padding: 10px;
width: 668px;
height: 432px; height: 432px;
transform: scale(0.5);
transform-origin: top left;
} }