Merge branch 'master' of gitea:lance/dope-site

package.json

@@ -14,8 +14,11 @@
     "react": "^18.2.0",
     "react-awesome-button": "^7.0.4",
     "react-dom": "^18.2.0",
+    "react-parallax": "^3.5.1",
     "react-scripts": "5.0.1",
+    "react-scroll-parallax": "^3.3.2",
     "react-ts-typewriter": "^0.1.8-b",
+    "react-visibility-sensor": "^5.1.1",
     "typescript": "^4.9.4",
     "wagmi": "^0.9.2"
   },

src/index.js

@@ -12,9 +12,10 @@ import { mainnet, goerli, localhost } from 'wagmi/chains';
 import { publicProvider } from 'wagmi/providers/public';
 
 import ParticlesBg from "particles-bg";
+import { ParallaxProvider } from 'react-scroll-parallax';
 
 import { Wallet } from "./Wallet";
-import { Panel } from "./template/Panel";
+import { Section1, Section2 } from './template/Sections';
 import { Footer } from "./template/Footer";
 
 
@@ -36,9 +37,11 @@ const wagmiClient = createClient({
 });
 
 ReactDOM.createRoot(document.getElementById("root")).render(
+  <ParallaxProvider>
     <WagmiConfig client={wagmiClient}>
         <RainbowKitProvider chains={chains}>
             <Wallet />
+<<<<<<< HEAD
             <Panel txt="I need money to buy crack. You'll probably just use it for illiquid jpegs and ponzi schemes. Give it to me, I'll make good use of it." />
         </RainbowKitProvider>
         <ParticlesBg type="cobweb" num={400} bg={{
@@ -46,5 +49,16 @@ ReactDOM.createRoot(document.getElementById("root")).render(
             zIndex: -1,
         }}/>
         <Footer title="Give me your ETH and then fuck off (respectfully)." />
+=======
+            <ParticlesBg type="cobweb" num={10} bg={{
+                position: "fixed",
+                zIndex: -1,
+            }}/>
+            <Section1 />
+            <Section2 />
+            <Footer title="Send me your ETH you worthless piece of shit. Nobody loves you." />
+        </RainbowKitProvider>
+>>>>>>> d6eedc0b33640d1cf1806e7c82ed88a2a93b5ed3
     </WagmiConfig>
+  </ParallaxProvider>
 );

src/styles.css

@@ -1,14 +1,20 @@
 .mainPanel {
   backdrop-filter: blur(3px);
   background-color: rgba(255,255,255,0.6);
+<<<<<<< HEAD
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   height: 400px;
   width: 400px;
+=======
+  height: 300px;
+  width: 300px;
+>>>>>>> d6eedc0b33640d1cf1806e7c82ed88a2a93b5ed3
   text-align: center;
   border-radius: 10px;
+  margin: 0 auto;
 }
 
 .wrap {
@@ -140,9 +146,14 @@ body {
     line-height: 14px;
   }
   
-  /* #root {
-    height: 500vh;
-  } */
+  #root {
+    height: 100vh;
+  }
+
+  .section {
+    height: 100vh;
+    
+  }
   
   footer::before {
     display: block;

src/template/Panel.jsx

@@ -5,7 +5,11 @@ import { usePrepareSendTransaction, useSendTransaction, useAccount } from 'wagmi
 import Typewriter from 'react-ts-typewriter';
 
 
+<<<<<<< HEAD
 export function Panel({ txt }) {
+=======
+export function Panel(opacity) {
+>>>>>>> d6eedc0b33640d1cf1806e7c82ed88a2a93b5ed3
     const { isConnected } = useAccount();
     const { config } = usePrepareSendTransaction({
         request: {
@@ -15,7 +19,7 @@ export function Panel({ txt }) {
     });
     const { isLoading, isSuccess, sendTransaction } = useSendTransaction(config);
     return (
-        <Card elevation={Elevation.FOUR} className="mainPanel">
+        <Card elevation={Elevation.FOUR} className="mainPanel" style={{opacity: opacity}}>
             <p className="wrap">
                 <Typewriter text={txt} random={10} />
             </p>

src/template/Sections.jsx

@@ -0,0 +1,32 @@
+import VisibilitySensor from "react-visibility-sensor";
+import { Parallax } from 'react-parallax';
+
+import { Panel } from "./Panel";
+
+
+
+export function Section1() {
+    return (
+        <section id="sec1" className="section">
+            <Parallax speed={-50}>
+                <h1>ongod bruh</h1>
+            </Parallax>
+        </section>
+    )
+}
+
+export function Section2() {
+    return (
+        <section id="sec2" className="section">
+            <VisibilitySensor>
+                {({ isVisible }) => (
+                    <div style={{ opacity: isVisible ? 1 : 0, transition: ".75s ease all"}}>
+                        <Parallax speed={-10} easing="easeOutQuad">
+                            <Panel />
+                        </Parallax>
+                    </div>
+                )}
+            </VisibilitySensor>
+        </section>
+    )
+}