t

beamcode · Dec 9, 2022 · fc8c0fb · fc8c0fb
1 parent ade58c9
commit fc8c0fb
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 55 deletions.
diff --git a/src/App.js b/src/App.js
@@ -3,25 +3,32 @@ import React, { Fragment, useState, useEffect, useRef } from 'react';
 import Navbar from './components/Navbar';
 import Footer from './components/Footer';
 import HomePage from './pages/Home.page';
+import AnimBg from './components/VantaBackground';
 
 export default function App() {
-    //bg-earth bg-cover
-    document.body.classList.add('bg-earth')
+
+    // document.body.classList.add('bg-earth')
     document.body.classList.add('bg-cover')
     document.body.classList.add('bg-fixed')
     document.body.classList.add('bg-[black]')
     document.body.classList.add('min-w-fit')
     // document.body.classList.add('bg-[#ebf0f6]')
 
     return (
-        <div className='lg:mx-0 pt-[10px] lg:pt-[60px] mx-[10px] gap-6 flex flex-col items-center justify-center'>
-            {/* <Navbar /> */}
+        <>
+            <AnimBg className='fixed top-0 left-0 z-[-10] w-full h-full' />
+
+            <div className='lg:mx-0 pt-[10px] lg:pt-[60px] mx-[10px] gap-6 flex flex-col items-center justify-center'>
+                {/* <Navbar /> */}
+
+
+                <main>
 
-            <main>
-                <HomePage />
-            </main>
+                    <HomePage />
+                </main>
 
-            <Footer />
-        </div>
+                <Footer />
+            </div>
+        </>
     )
 }
diff --git a/src/components/CoolLinks.js b/src/components/CoolLinks.js
@@ -2,7 +2,7 @@ import React from 'react'
 
 export default function CoolLinks() {
     return (
-        <div className='flex flex-col shadow-md w-full items-center bg-[white] border-opacity-30 rounded-md'>
+        <div className='flex flex-col shadow-md w-full items-center bg-[white] rounded-md'>
             <h1 className="p-2 text-md bg-[#1a253f] text-white font-bold w-full text-center rounded-md">Cool Links</h1>
 
             <div className="flex p-5 flex-col grow rounded-md w-full">

diff --git a/src/components/Footer.js b/src/components/Footer.js
@@ -2,7 +2,7 @@ import React from "react";
 
 export default function Footer() {
     return (
-        <footer className="flex w-full max-w-[1000px] p-2 rounded-t-xl items-center justify-center bg-[white] border">
+        <footer className="flex w-full max-w-[1000px] p-2 rounded-t-xl items-center justify-center bg-[white]">
             <p className='text-[gray] text-sm whitespace-pre'>2023 © </p>
             <p className='text-[gray] text-sm'>Made with hate 👹 by Beamcode</p>
         </footer>

diff --git a/src/components/VantaBackground.js b/src/components/VantaBackground.js
@@ -0,0 +1,39 @@
+import React, { useState, useEffect, useRef } from 'react'
+import ANIMATION from 'vanta/dist/vanta.net.min'
+import * as THREE from "three";
+
+export default function AnimBg({ children, className }) {
+    const [vantaEffect, setVantaEffect] = useState(null)
+    const myRef = useRef(null)
+
+    useEffect(() => {
+        if (!vantaEffect) {
+            setVantaEffect(ANIMATION({
+                el: myRef.current,
+                THREE: THREE,
+                mouseControls: true,
+                touchControls: true,
+                gyroControls: false,
+                minHeight: 200.00,
+                minWidth: 200.00,
+                scale: 1.00,
+                scaleMobile: 1.00,
+                color: '#50649c',
+                backgroundColor: '#1a253f',
+                spacing: 23.00,
+                points: 11.00,
+                maxDistance: 30.00,
+                showDots: true,
+            }))
+        }
+        return () => {
+            if (vantaEffect) vantaEffect.destroy()
+        }
+    }, [vantaEffect])
+
+    return (
+        <div className={className} ref={myRef}>
+            {children}
+        </div>
+    )
+}
diff --git a/src/pages/Home.page.js b/src/pages/Home.page.js
@@ -1,5 +1,4 @@
-import React, { useState, useEffect, useRef } from 'react'
-import ANIMATION from 'vanta/dist/vanta.net.min'
+import React from 'react'
 import EducationSection from '../components/Education.cv'
 import SkillsSection from '../components/Skills.cv'
 import ExperienceSection from '../components/Experience.cv'
@@ -11,52 +10,16 @@ import UsefullLinks from '../components/CoolLinks'
 import LinkedinButton from '../components/LinkedinButton'
 import GithubButton from '../components/GithubButton'
 import CvButton from '../components/CvButton'
-import * as THREE from "three";
 import pfp from '../assets/pepe.jpg'
 import SpotifyWidget from '../components/SportifyWidget'
-
-function AnimBg({ children }) {
-    const [vantaEffect, setVantaEffect] = useState(null)
-    const myRef = useRef(null)
-
-    useEffect(() => {
-        if (!vantaEffect) {
-            setVantaEffect(ANIMATION({
-                el: myRef.current,
-                THREE: THREE,
-                mouseControls: true,
-                touchControls: true,
-                gyroControls: false,
-                minHeight: 200.00,
-                minWidth: 200.00,
-                scale: 1.00,
-                scaleMobile: 1.00,
-                color: '#50649c',
-                backgroundColor: '#1a253f',
-                spacing: 23.00,
-                points: 11.00,
-                maxDistance: 30.00,
-                showDots: true,
-            }))
-        }
-        return () => {
-            if (vantaEffect) vantaEffect.destroy()
-        }
-    }, [vantaEffect])
-
-    return (
-        <div className='rounded-t-xl z-10 overflow-hidden absolute w-full h-full' ref={myRef}>
-            {children}
-        </div>
-    )
-}
+import AnimBg from '../components/VantaBackground'
 
 export default function HomePage() {
     return (
         <div className="max-w-[1000px] flex flex-col lg:flex-row gap-3">
-            <div className='gap-2 min-h-[100px] w-full rounded-xl shadow-md bg-[#1a253f]'>
-                <div className='rounded-t-xl relative flex flex-col bg-[#1a253f] shadow-xl'>
-                    <AnimBg />
+            <div className='flex flex-col gap-4 min-h-[100px] w-full rounded-xl shadow-md'>
+                <div className='rounded-xl relative flex flex-col bg-[white] shadow-xl'>
+                    {/* <AnimBg className='rounded-t-xl z-10 overflow-hidden absolute w-full h-full'/> */}
                     <div className="flex flex-col md:flex-row gap-6 p-4 z-20">
                         <div className="flex gap-5 justify-between">
                             <img className="rounded-lg overflow-hidden min-w-[150px] min-h-[150px] max-w-[170px] md:max-w-[230px]" src={pfp} />
@@ -84,10 +47,10 @@ export default function HomePage() {
                             </div>
                         </div>
                     </div>
-                    <div className="w-full h-[10px] mb-[-0.3px] z-20 bg-gradient-to-b from-transparent to-white" />
+                    {/* <div className="w-full h-[10px] mb-[-0.3px] z-20 bg-gradient-to-b from-transparent to-white" /> */}
                 </div>
 
-                <div className='p-4 pt-0 bg-white rounded-b-xl relative'>
+                <div className='p-4 pt-0 bg-white rounded-xl relative'>
                     <div className="md:flex">
                         <SkillsSection />
                         <ExperienceSection />