Restructured styles

src/App.tsx

@@ -1,5 +1,6 @@
 import './style/App.css';
-import './style/index.css';
+import './style/Tailwind.css';
+import './style/Animations.css';
 import { ProjectRoutes } from './routes/ProjectRoutes';
 
 function App() {

src/style/Animations.css

@@ -0,0 +1,104 @@
+/* SLIDE RIGHT */
+.slide-r {
+    animation: slide-r 0.5s forwards;
+}
+
+@keyframes slide-r {
+    0% {
+        transform: translateX(-10%);
+    }
+
+    100% {
+        transform: translateX(0);
+    }
+}
+
+/* SLIDE LEFT */
+.slide-l {
+    animation: slide-l 0.5s forwards;
+}
+
+@keyframes slide-l {
+    0% {
+        transform: translateX(10%);
+    }
+
+    100% {
+        transform: translateX(0);
+    }
+}
+
+/* SLIDE UP */
+.slide-up {
+    animation: slide-up 0.5s forwards;
+}
+
+@keyframes slide-up {
+    0% {
+        transform: translateY(30%);
+    }
+
+    100% {
+        transform: translateY(0);
+    }
+}
+
+/* SLIDE SLOW UP */
+.slide-up2 {
+    animation: slide-up2 1s forwards;
+}
+
+@keyframes slide-up2 {
+    0% {
+        transform: translateY(50%);
+    }
+
+    100% {
+        transform: translateY(0);
+    }
+}
+
+/* SLIDE DOWN */
+.slide-down {
+    animation: slide-down 0.5s forwards;
+}
+
+@keyframes slide-down {
+    0% {
+        transform: translateY(-30%);
+    }
+
+    100% {
+        transform: translateY(0);
+    }
+}
+
+/* FADE IN */
+.fade-in {
+    animation: fadein 0.7s forwards;
+}
+
+@keyframes fadein {
+    0% {
+        filter: opacity(0);
+    }
+
+    100% {
+        filter: opacity(1);
+    }
+}
+
+/* FADE IN SLOW */
+.fade-in2 {
+    animation: fadein2 2s forwards;
+}
+
+@keyframes fadein2 {
+    0% {
+        filter: opacity(0);
+    }
+
+    100% {
+        filter: opacity(1);
+    }
+}

src/style/App.css

@@ -1,122 +1,59 @@
-.custom-img {
-    background-image: url("https://images.unsplash.com/photo-1454496522488-7a8e488e8606?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1955&q=80");
+* {
+    scroll-behavior: smooth;
+    transition: 0.15s !important;
+    -webkit-transition: height 2s;
+    /* For Safari 3.1 to 6.0 */
+    transition: height 2s;
+    font-family: 'Sora', sans-serif;
 }
 
-.fullpage {
-    display: flex;
-    overflow: auto;
-    flex: none;
-
-    flex-flow: column nowrap;
-
-    scroll-snap-type: y mandatory;
-}
-
-.fullpage>div {
-    scroll-snap-align: center;
-    flex: none;
-}
-
-/* make element slide on page load */
-.slide-r {
-    animation: slide-r 0.5s forwards;
+html {
+    scroll-behavior: smooth;
 }
 
-@keyframes slide-r {
-    0% {
-        transform: translateX(-10%);
-    }
-
-    100% {
-        transform: translateX(0);
-    }
-}
+.scrollup {
+    position: fixed;
+    left: 1rem;
+    bottom: -3rem;
+    font-size: 1.25rem;
 
-.slide-l {
-    animation: slide-l 0.5s forwards;
+    opacity: .8;
+    padding: .1rem .7rem .1rem .7rem;
+    border-radius: 1rem;
+    transition: .4s;
 }
 
-@keyframes slide-l {
-    0% {
-        transform: translateX(10%);
-    }
-
-    100% {
-        transform: translateX(0);
-    }
+.scrollup:hover {
+    cursor: pointer;
+    filter: brightness(1.2);
+    transition: 0.1s;
+    transform: scale(1.05);
 }
 
-.slide-up {
-    animation: slide-up 0.5s forwards;
+.show-scroll {
+    bottom: 1rem;
 }
 
-@keyframes slide-up {
-    0% {
-        transform: translateY(30%);
-    }
-
-    100% {
-        transform: translateY(0);
+@media screen and (min-width: 900px) {
+    .scrollup::after {
+        content: " Top";
     }
 }
 
-/* create amimation delay */
-.slide-up2 {
-    animation: slide-up2 1s forwards;
-}
-
-@keyframes slide-up2 {
-    0% {
-        transform: translateY(50%);
-    }
-
-    100% {
-        transform: translateY(0);
-    }
+.addbtn {
+    position: fixed;
+    right: 3rem;
+    bottom: 1rem;
 }
 
-.slide-down {
-    animation: slide-down 0.5s forwards;
-}
-
-@keyframes slide-down {
-    0% {
-        transform: translateY(-30%);
-    }
-
-    100% {
-        transform: translateY(0);
-    }
-}
-
-.fade-in {
-    animation: fadein 0.7s forwards;
-}
-
-@keyframes fadein {
-    0% {
-        filter: opacity(0);
-    }
-
-    100% {
-        filter: opacity(1);
-    }
-}
-
-.fade-in2 {
-    animation: fadein2 2s forwards;
-}
-
-@keyframes fadein2 {
-    0% {
-        filter: opacity(0);
-    }
-
-    100% {
-        filter: opacity(1);
-    }
+.addexpbtn {
+    position: fixed;
+    right: 4rem;
+    bottom: 3rem;
 }
 
-.bg-gray-900 .bg-opacity-50 {
-    filter: blur(10px) !important
+.spltbtn {
+    position: fixed;
+    right: -2rem;
+    bottom: 3rem;
 }

src/style/Tailwind.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;