add animation and transition to the project

src/App.css

@@ -6,6 +6,7 @@
 .App {
   height: 100vh;
   padding: 0;
+  scroll-behavior: smooth;
 }
 
 * {
@@ -50,6 +51,33 @@ ul {
   position: absolute;
   width: 30%;
   z-index: -9999;
+  opacity: 0.1;
+  animation: fadeInOut 10s ease-in-out infinite, drift 8s linear infinite;
+}
+
+@keyframes fadeInOut {
+  0%,
+  100% {
+    opacity: 0.1;
+  }
+
+  50% {
+    opacity: 2;
+  }
+}
+
+@keyframes drift {
+  0% {
+    transform: translate(0, 0);
+  }
+
+  50% {
+    transform: translate(20px, 10px);
+  }
+
+  100% {
+    transform: translate(0, 0);
+  }
 }
 
 .home-background-pic2 {

src/components/Header.js

@@ -103,6 +103,7 @@ const Header = () => {
         </li>
       </ul>
       <button type="button" className="btn btn-outline-success btn-sm" aria-label="Download CV"><a className="cv" href="https://docs.google.com/document/d/1BNoFCStYQbHl8Bwq073pdJt1owdG0XDF3TrVxV-KHgE/edit?usp=sharing">Download CV</a></button>
+      {/* <hr className="header-line" /> */}
     </nav>
   );
 };

src/data/projects.js

@@ -42,7 +42,7 @@ const projects = [
   {
     id: 5,
     title: 'Space Traveller',
-    description: 'pace Traveler offers the users a8 chance to book a Rocket through The Rockets section where a list of rockets available is displayed. Users can book each rocket by clicking the reservation button or cancel the previously made booking',
+    description: "Space Traveler offers users a chance to book a rocket through the 'The Rockets' section, where a list of available rockets is displayed. Users can book each rocket by clicking the reservation button or cancel the previously made booking",
     image: './images/space.PNG',
     link: 'https://space-traveler-hmq1.onrender.com/',
     github: 'https://github.com/bronnie313/space-traveler',