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 mac from '../assets/models/mac-draco.glb';
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)
@@ -221,9 +222,18 @@ const App = () => {
<mesh castShadow material={materials['matte.001']} geometry={nodes['Cube008_1'].geometry} />
<mesh castShadow geometry={nodes['Cube008_2'].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>
<div className="wrapper">
<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="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>
</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>
</Html>
</mesh>

10
src/components/MainContent.jsx
View File

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

6
src/styles/styles.scss
View File

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