From 18732e27fcb5a1bb33ae1ba736b8fa2cadd2325c Mon Sep 17 00:00:00 2001
From: Kurt Hutten <k.hutten@protonmail.ch>
Date: Thu, 23 Sep 2021 18:16:41 +1000
Subject: [PATCH] Add parallax to floaty homepage cards (#524)

* Add parallax to floaty homepage cards

* Add firefox fix and restore model mouse tracking

* Add overflow-x hidden for safety
---
 app/web/src/components/Hero/Hero.tsx          |  75 +++++++++++++-----
 app/web/src/index.html                        |   2 +-
 app/web/src/layouts/MainLayout/Logo_2.jpg     | Bin 6560 -> 0 bytes
 app/web/src/layouts/MainLayout/MainLayout.css |   3 +
 app/web/src/layouts/MainLayout/MainLayout.js  |   6 +-
 app/web/src/pages/HomePage/HomePage.tsx       |   4 +-
 6 files changed, 68 insertions(+), 22 deletions(-)
 delete mode 100644 app/web/src/layouts/MainLayout/Logo_2.jpg
 create mode 100644 app/web/src/layouts/MainLayout/MainLayout.css

diff --git a/app/web/src/components/Hero/Hero.tsx b/app/web/src/components/Hero/Hero.tsx
index 97fdc3a..1e3853c 100644
--- a/app/web/src/components/Hero/Hero.tsx
+++ b/app/web/src/components/Hero/Hero.tsx
@@ -13,7 +13,9 @@ import ProjectsCell from 'src/components/ProjectsCell'
 import OutBound from 'src/components/OutBound/OutBound'
 
 // dynamic import to enable pre-render iof the homepage
-const AssetWithGooey = React.lazy(() => import('src/components/Hero/AssetWithGooey'))
+const AssetWithGooey = React.lazy(
+  () => import('src/components/Hero/AssetWithGooey')
+)
 const cqCode = `from cadquery import *
 
 d1 = 58.5
@@ -79,36 +81,59 @@ export const Hero = () => {
   return (
     <div className="bg-ch-gray-800">
       <div className="relative h-0 w-0">
-        <svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <svg
+          viewBox="0 0 100 100"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
           <defs>
-            <clipPath id="code-blob-clip-path" clipPathUnits="objectBoundingBox" transform="scale(0.0038 0.0056)">
-              <path d="M68.5 169.159C13.3 167.159 5.69181e-05 144.659 0 71.1594C3.99994 13.1594 50.9244 -14.591 121.5 7.65941C223 39.6594 266 25.1594 263.5 113.659C261.634 179.701 191.5 173.616 68.5 169.159Z" fill="#C4C4C4"/>
+            <clipPath
+              id="code-blob-clip-path"
+              clipPathUnits="objectBoundingBox"
+              transform="scale(0.0038 0.0056)"
+            >
+              <path
+                d="M68.5 169.159C13.3 167.159 5.69181e-05 144.659 0 71.1594C3.99994 13.1594 50.9244 -14.591 121.5 7.65941C223 39.6594 266 25.1594 263.5 113.659C261.634 179.701 191.5 173.616 68.5 169.159Z"
+                fill="#C4C4C4"
+              />
             </clipPath>
           </defs>
         </svg>
       </div>
       <div className="grid lg:grid-cols-5 max-w-8xl mx-auto">
         <div className="relative row-start-2 col-start-1 h-full lg:row-start-1 lg:col-span-3 lg:col-start-1">
-
-          <div className="absolute inset-0 my-20 mx-10 lg:mr-40 bg-gradient-to-tr from-pink-400 to-blue-600 opacity-40 overflow-hidden" style={{clipPath: 'url(#code-blob-clip-path)'}}>
+          <div
+            className="absolute inset-0 my-20 mx-10 lg:mr-40 bg-gradient-to-tr from-pink-400 to-blue-600 opacity-40 overflow-hidden"
+            style={{ clipPath: 'url(#code-blob-clip-path)' }}
+          >
             <pre className="lg:ml-20 mt-12 text-blue-100 font-fira-code">
-              {cqCode.map((line, index) => <div key={index}><span className="w-12 pr-6 text-blue-200 text-opacity-50 inline-block text-right">{index+1}</span>{line}</div>)}
+              {cqCode.map((line, index) => (
+                <div key={index}>
+                  <span className="w-12 pr-6 text-blue-200 text-opacity-50 inline-block text-right">
+                    {index + 1}
+                  </span>
+                  {line}
+                </div>
+              ))}
             </pre>
-
-
-
           </div>
           <ModelSection assetUrl="/coffee-lid.stl" scale={0.06} />
         </div>
 
-        <div className="flex items-end justify-center row-start-2 col-start-1 pt-96 pr-12 pl-6 pb-24 lg:col-span-3 lg:col-start-1 lg:row-start-1 lg:pt-0">
+        <div className="flex items-end justify-center row-start-2 col-start-1 pt-96 pr-12 pl-6 pb-24 lg:col-span-3 lg:col-start-1 lg:row-start-1 lg:pt-0 pointer-events-none">
           <Link
             to={routes.project({
               userName: 'irevdev',
               projectTitle: 'coffee-lid',
             })}
           >
-            <div className="grid grid-flow-col gap-2 sm:gap-4 items-center bg-ch-gray-760 bg-opacity-95 text-ch-gray-300 rounded-md p-2 font-fira-sans relative z-10 shadow-ch">
+            <div
+              className="grid grid-flow-col gap-2 sm:gap-4 items-center bg-ch-gray-760 bg-opacity-95 text-ch-gray-300 rounded-md p-2 font-fira-sans relative z-10 shadow-ch pointer-events-auto"
+              style={{
+                transform: 'translate3d(3vw, -100px, 0.3px) scale(0.7)',
+                transformOrigin: 'top center',
+              }}
+            >
               <div className="pl-1 sm:pl-4">
                 <Gravatar
                   image="CadHub/xvrnxvarkv8tdzo4n65u"
@@ -165,12 +190,20 @@ export const Hero = () => {
       <Community />
       <div className="max-w-8xl mx-auto grid lg:grid-cols-5 py-16">
         <div className=" row-start-2 col-start-1 lg:col-span-3 lg:col-start-3 lg:row-start-1 lg:-mx-10 h-full relative">
-
-          <div className="absolute inset-0 mb-24 mt-16 ml:10 mr:10 lg:ml-40 lg:mr-52 bg-gradient-to-tr from-pink-400 to-blue-600 opacity-30 overflow-hidden" style={{clipPath: 'url(#code-blob-clip-path)'}}>
+          <div
+            className="absolute inset-0 mb-24 mt-16 ml:10 mr:10 lg:ml-40 lg:mr-52 bg-gradient-to-tr from-pink-400 to-blue-600 opacity-30 overflow-hidden"
+            style={{ clipPath: 'url(#code-blob-clip-path)' }}
+          >
             <pre className="ml-10 mt-12 text-blue-100 text-xs font-fira-code">
-              {scadCode.map((line, index) => <div key={index}><span className="w-12 pr-6 text-blue-200 text-opacity-50 inline-block text-right">{index+1}</span>{line}</div>)}
+              {scadCode.map((line, index) => (
+                <div key={index}>
+                  <span className="w-12 pr-6 text-blue-200 text-opacity-50 inline-block text-right">
+                    {index + 1}
+                  </span>
+                  {line}
+                </div>
+              ))}
             </pre>
-
           </div>
           <ModelSection assetUrl="/hinge.stl" scale={0.12} />
         </div>
@@ -193,14 +226,20 @@ export const Hero = () => {
           </OutBound>
         </div>
 
-        <div className="flex items-end justify-center row-start-2 col-start-1 pb-24 lg:row-start-1 lg:col-start-3 lg:col-span-3 pt-96 lg:pt-0 lg:pr-10">
+        <div className="flex items-end justify-center row-start-2 col-start-1 pb-24 lg:row-start-1 lg:col-start-3 lg:col-span-3 pt-96 lg:pt-0 lg:pr-10 pointer-events-none">
           <Link
             to={routes.project({
               userName: 'irevdev',
               projectTitle: 'tutorial-hinge',
             })}
           >
-            <div className="grid grid-flow-col sm:gap-2 items-center bg-ch-gray-760 bg-opacity-95 text-ch-gray-300 rounded-md py-2 pl-2 font-fira-sans relative z-10 shadow-ch">
+            <div
+              className="grid grid-flow-col sm:gap-2 items-center bg-ch-gray-760 bg-opacity-95 text-ch-gray-300 rounded-md py-2 pl-2 font-fira-sans relative z-10 shadow-ch pointer-events-auto"
+              style={{
+                transform: 'translate3d(-5vw, -100px, 0.3px) scale(0.7)',
+                transformOrigin: 'top center',
+              }}
+            >
               <div className="pl-1 sm:pl-4">
                 <Gravatar
                   image="CadHub/xvrnxvarkv8tdzo4n65u"
diff --git a/app/web/src/index.html b/app/web/src/index.html
index 0227848..004d983 100644
--- a/app/web/src/index.html
+++ b/app/web/src/index.html
@@ -13,7 +13,7 @@
     <meta property="og:locale" content="en-US" />
   </head>
   <body>
-    <div id="redwood-app">
+    <div id="redwood-app" style="height: 100vh;">
       <%= prerenderPlaceholder %>
     </div>
   </body>
diff --git a/app/web/src/layouts/MainLayout/Logo_2.jpg b/app/web/src/layouts/MainLayout/Logo_2.jpg
deleted file mode 100644
index 47edfa3ff4758bfbca91264c1d8873e3e104b7b3..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 6560
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

diff --git a/app/web/src/layouts/MainLayout/MainLayout.css b/app/web/src/layouts/MainLayout/MainLayout.css
new file mode 100644
index 0000000..a599de1
--- /dev/null
+++ b/app/web/src/layouts/MainLayout/MainLayout.css
@@ -0,0 +1,3 @@
+.preserve-3d-for-children * {
+  transform-style: preserve-3d;
+}
diff --git a/app/web/src/layouts/MainLayout/MainLayout.js b/app/web/src/layouts/MainLayout/MainLayout.js
index b56cfc8..a44b427 100644
--- a/app/web/src/layouts/MainLayout/MainLayout.js
+++ b/app/web/src/layouts/MainLayout/MainLayout.js
@@ -15,6 +15,7 @@ import { isBrowser } from '@redwoodjs/prerender/browserUtils'
 import Svg from 'src/components/Svg'
 import { ImageFallback } from 'src/components/ImageUploader'
 import useUser from 'src/helpers/hooks/useUser'
+import './MainLayout.css'
 
 let previousSubmission = ''
 
@@ -69,7 +70,10 @@ const MainLayout = ({ children, shouldRemoveFooterInIde }) => {
     }
   }, [hash, client])
   return (
-    <div className="min-h-screen flex flex-col ch-scrollbar">
+    <div
+      className="h-full flex flex-col ch-scrollbar overflow-y-scroll preserve-3d-for-children overflow-x-hidden"
+      style={{ perspective: '1px', perspectiveOrigin: 'top center' }}
+    >
       <header id="cadhub-main-header">
         <nav className="flex justify-between h-16 sm:px-4 bg-ch-gray-900">
           <ul className="flex items-center">
diff --git a/app/web/src/pages/HomePage/HomePage.tsx b/app/web/src/pages/HomePage/HomePage.tsx
index f4d49c2..c77aa8c 100644
--- a/app/web/src/pages/HomePage/HomePage.tsx
+++ b/app/web/src/pages/HomePage/HomePage.tsx
@@ -2,7 +2,7 @@ import MainLayout from 'src/layouts/MainLayout'
 import Seo from 'src/components/Seo/Seo'
 import { Hero } from 'src/components/Hero/Hero'
 
-const ProjectsPage = () => {
+const HomePage = () => {
   return (
     <MainLayout shouldRemoveFooterInIde>
       <Seo
@@ -16,4 +16,4 @@ const ProjectsPage = () => {
   )
 }
 
-export default ProjectsPage
+export default HomePage