From 4c5e76fcc2602835b483f988b4bbb7aa155ba092 Mon Sep 17 00:00:00 2001
From: Bisaso Ronald <bronnie313@gmail.com>
Date: Tue, 7 Nov 2023 13:12:21 +0300
Subject: [PATCH] add animation and transition to the project

---
 src/App.css              | 28 ++++++++++++++++++++++++++++
 src/components/Header.js |  1 +
 src/data/projects.js     |  2 +-
 3 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/src/App.css b/src/App.css
index e755782..8a776d9 100644
--- a/src/App.css
+++ b/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 {
diff --git a/src/components/Header.js b/src/components/Header.js
index 174ca16..19bc410 100644
--- a/src/components/Header.js
+++ b/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>
   );
 };
diff --git a/src/data/projects.js b/src/data/projects.js
index 45bb01b..172da80 100644
--- a/src/data/projects.js
+++ b/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',