Merge pull request #6 from spencer-rafada/spencer/background

added star background

package.json

@@ -13,7 +13,8 @@
     "normalize.css": "^8.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-icons": "^4.10.1"
+    "react-icons": "^4.10.1",
+    "react-starfield-animation": "^1.0.1"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",

src/App.jsx

@@ -4,23 +4,45 @@ import About from './components/About'
 import Experience from './components/Experience'
 import FeaturedProjects from './components/FeaturedProjects'
 import Footer from './components/Footer'
+import StarfieldAnimation from 'react-starfield-animation'
 
 export default function App() {
   const aboutRef = useRef(null)
   const expRef = useRef(null)
   const projRef = useRef(null)
 
   return (
-    <div className='mainSection'>
-      <div className='mainSection__grid'>
-        <InfoSection aboutRef={aboutRef} expRef={expRef} projRef={projRef} />
-        <div className='displaySection'>
-          <About aRef={aboutRef} />
-          <Experience aRef={expRef} />
-          <FeaturedProjects aRef={projRef} />
-          <Footer />
+    <>
+      <StarfieldAnimation
+        style={{
+          position: 'absolute',
+          width: '100%',
+          height: '100%',
+          'z-index': '-5',
+          'background-color': '#070a13',
+        }}
+        numParticles={400}
+        particleSpeed={0}
+        dx={0.000000001} // x speed of stars in px/frame, default 0.05
+        dy={0.000000001}
+      />
+      <main>
+        <div className='mainSection'>
+          <div className='mainSection__grid'>
+            <InfoSection
+              aboutRef={aboutRef}
+              expRef={expRef}
+              projRef={projRef}
+            />
+            <div className='displaySection'>
+              <About aRef={aboutRef} />
+              <Experience aRef={expRef} />
+              <FeaturedProjects aRef={projRef} />
+              <Footer />
+            </div>
+          </div>
         </div>
-      </div>
-    </div>
+      </main>
+    </>
   )
 }