redirects file added

public/_redirects

@@ -0,0 +1 @@
+/* /index.html 200

src/animations/reactNative.json

@@ -0,0 +1 @@
+{"v":"4.6.3","fr":29.9700012207031,"ip":0,"op":141.000005743048,"w":800,"h":800,"nm":"Comp 1","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"center_circle","ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[401,389,0]},"a":{"a":0,"k":[-13.063,-22.86,0]},"s":{"a":0,"k":[119.72,119.72,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[77.344,77.344]},"p":{"a":0,"k":[0,0]},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse"},{"ty":"st","c":{"a":0,"k":[0.847,0.847,0.847,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":0},"lc":1,"lj":1,"ml":4,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke"},{"ty":"fl","c":{"a":0,"k":[0.91,0.525,0.204,1]},"o":{"a":0,"k":100},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"a":0,"k":[-14.328,-25.328],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667],"y":[1,1]},"o":{"x":[0.333,0.333],"y":[0,0]},"n":["0p667_1_0p333_0","0p667_1_0p333_0"],"t":24,"s":[0,0],"e":[160,160]},{"i":{"x":[0.667,0.667],"y":[1,1]},"o":{"x":[0.333,0.333],"y":[0,0]},"n":["0p667_1_0p333_0","0p667_1_0p333_0"],"t":45,"s":[160,160],"e":[70,70]},{"i":{"x":[0.667,0.667],"y":[1,1]},"o":{"x":[0.333,0.333],"y":[0,0]},"n":["0p667_1_0p333_0","0p667_1_0p333_0"],"t":61,"s":[70,70],"e":[130,130]},{"i":{"x":[0.667,0.667],"y":[1,1]},"o":{"x":[0.333,0.333],"y":[0,0]},"n":["0p667_1_0p333_0","0p667_1_0p333_0"],"t":73,"s":[130,130],"e":[80,80]},{"i":{"x":[0.667,0.667],"y":[1,1]},"o":{"x":[0.333,0.333],"y":[0,0]},"n":["0p667_1_0p333_0","0p667_1_0p333_0"],"t":84,"s":[80,80],"e":[110,110]},{"i":{"x":[0.667,0.667],"y":[1,1]},"o":{"x":[0.333,0.333],"y":[0,0]},"n":["0p667_1_0p333_0","0p667_1_0p333_0"],"t":98,"s":[110,110],"e":[100,100]},{"t":116.000004724777}],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group"}],"ip":0,"op":900.000036657751,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":2,"ty":4,"nm":"circle3","ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":-120.543},"p":{"a":0,"k":[406,375,0]},"a":{"a":0,"k":[0,0,0]},"s":{"a":0,"k":[104.627,108.478,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[497.445,195.844]},"p":{"a":0,"k":[0,0]},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse"},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.333],"y":[0]},"n":["0p833_1_0p333_0"],"t":64,"s":[100],"e":[0]},{"t":110.000004480392}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.333],"y":[0.333]},"n":["0p833_0p833_0p333_0p333"],"t":64,"s":[100],"e":[100]},{"t":110.000004480392}],"ix":2},"o":{"a":1,"k":[{"i":{"x":[0.69],"y":[3.268]},"o":{"x":[0.294],"y":[0]},"n":["0p69_3p268_0p294_0"],"t":64,"s":[1886.781],"e":[1765.781]},{"t":115.000004684046}],"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim"},{"ty":"st","c":{"a":0,"k":[0.957,0.655,0.243,1]},"o":{"a":0,"k":100},"w":{"a":1,"k":[{"i":{"x":[0.667],"y":[0.936]},"o":{"x":[0.333],"y":[0]},"n":["0p667_0p936_0p333_0"],"t":55,"s":[0],"e":[23.039]},{"i":{"x":[0.667],"y":[1.13]},"o":{"x":[0.333],"y":[-0.043]},"n":["0p667_1p13_0p333_-0p043"],"t":74,"s":[23.039],"e":[3]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0.158]},"n":["0p667_1_0p333_0p158"],"t":85,"s":[3],"e":[24]},{"t":99.0000040323527}]},"lc":2,"lj":2,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke"},{"ty":"tr","p":{"a":0,"k":[-6.277,-10.078],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[89.823,86.077],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group"}],"ip":0,"op":900.000036657751,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":3,"ty":4,"nm":"circle2","ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":-59.94},"p":{"a":0,"k":[413,385,0]},"a":{"a":0,"k":[0,0,0]},"s":{"a":0,"k":[104.627,108.478,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[497.445,195.844]},"p":{"a":0,"k":[0,0]},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse"},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"n":["0p667_1_0p333_0"],"t":46,"s":[100],"e":[84.162]},{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.333],"y":[-0.084]},"n":["0p833_1_0p333_-0p084"],"t":73,"s":[84.162],"e":[100]},{"t":104.000004236007}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.324],"y":[0]},"n":["0p833_1_0p324_0"],"t":46,"s":[100],"e":[0]},{"t":104.000004236007}],"ix":2},"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[0.953]},"o":{"x":[0.327],"y":[0]},"n":["0p667_0p953_0p327_0"],"t":46,"s":[50],"e":[2101.915]},{"t":105.000004276738}],"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim"},{"ty":"st","c":{"a":0,"k":[0.976,0.796,0.322,1]},"o":{"a":0,"k":100},"w":{"a":1,"k":[{"i":{"x":[0.667],"y":[0.91]},"o":{"x":[0.333],"y":[0]},"n":["0p667_0p91_0p333_0"],"t":60,"s":[0],"e":[13]},{"i":{"x":[0.667],"y":[1.258]},"o":{"x":[0.333],"y":[-0.085]},"n":["0p667_1p258_0p333_-0p085"],"t":75,"s":[13],"e":[2]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0.183]},"n":["0p667_1_0p333_0p183"],"t":87,"s":[2],"e":[24]},{"t":104.000004236007}]},"lc":2,"lj":2,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke"},{"ty":"tr","p":{"a":0,"k":[-7.277,-10.078],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[89.823,86.077],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group"}],"ip":0,"op":900.000036657751,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":4,"ty":4,"nm":"circle1","ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[407,397,0]},"a":{"a":0,"k":[0,0,0]},"s":{"a":0,"k":[104.627,108.478,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[497.445,195.844]},"p":{"a":0,"k":[0,0]},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse"},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":0,"s":[100],"e":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"n":["0p667_1_0p333_0"],"t":53,"s":[100],"e":[55.162]},{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.333],"y":[0.01]},"n":["0p833_1_0p333_0p01"],"t":92,"s":[55.162],"e":[0]},{"t":105.000004276738}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":0,"s":[100],"e":[100]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.333],"y":[0.333]},"n":["0p833_0p833_0p333_0p333"],"t":53,"s":[100],"e":[100]},{"t":103.000004195276}],"ix":2},"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_1_0p167_0p167"],"t":0,"s":[100],"e":[50]},{"i":{"x":[0.714],"y":[0.721]},"o":{"x":[0.303],"y":[0]},"n":["0p714_0p721_0p303_0"],"t":53,"s":[50],"e":[958.781]},{"t":104.000004236007}],"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim"},{"ty":"st","c":{"a":0,"k":[0.91,0.525,0.204,1]},"o":{"a":0,"k":100},"w":{"a":1,"k":[{"i":{"x":[0.667],"y":[0.908]},"o":{"x":[0.333],"y":[0]},"n":["0p667_0p908_0p333_0"],"t":52,"s":[0],"e":[16.039]},{"i":{"x":[0.667],"y":[1.259]},"o":{"x":[0.333],"y":[-0.085]},"n":["0p667_1p259_0p333_-0p085"],"t":71,"s":[16.039],"e":[6]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0.184]},"n":["0p667_1_0p333_0p184"],"t":82,"s":[6],"e":[24]},{"t":96.0000039101602}]},"lc":2,"lj":2,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke"},{"ty":"tr","p":{"a":0,"k":[-7.277,-10.078],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[89.823,86.077],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group"}],"ip":0,"op":900.000036657751,"st":0,"bm":0,"sr":1}]}

src/components/BannerContent.js

@@ -111,7 +111,7 @@ export default function BannerContent() {
         <span aria-hidden="true">shy&#60;X/&#62;perience</span>
       </h1>
 
-      <motion.p className=" d-flex flex-column bannerText">
+      <motion.p className=" d-flex flex-column bannerText text-has-shadow">
         <span>"Hi, Welcome i'm Abba i'm a</span>
         <span className="text-danger">
           <Typewriter
@@ -125,7 +125,7 @@ export default function BannerContent() {
           />
         </span>
         <br />
-        who just wants to code"
+        <span>who just wants to code"</span>
       </motion.p>
 
       <div className="d-flex flex-wrap mb-2 align-items-center justify-content-center">

src/components/TechStacks.js

@@ -4,6 +4,7 @@ import * as javascriptLogo from "../animations/javascript.json";
 import * as firebaseLogo from "../animations/firebase.json";
 import * as htmlLogo from "../animations/html5.json";
 import * as cssLogo from "../animations/css3.json";
+import * as reactNativeLogo from "../animations/reactNative.json";
 import Lottie from "react-lottie";
 import { useInView } from "react-intersection-observer";
 import { motion, useAnimation } from "framer-motion";
@@ -44,6 +45,13 @@ const techStacks = [
     width: 91,
     id: 5,
   },
+  {
+    objName: reactNativeLogo,
+    title: "React-native",
+    height: 91,
+    width: 91,
+    id: 6,
+  },
 ];
 
 const defaultOptions = {

src/index.css

@@ -1,6 +1,9 @@
 @import url("https://fonts.googleapis.com/css2?family=Lobster&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Annie+Use+Your+Telescope&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap");
+body {
+  height: 100vh;
+}
 .cursive {
   font-family: "Lobster", cursive;
   font-weight: 700;
@@ -256,10 +259,9 @@
 .bannerText {
   font-size: 1.7rem;
   color: #fff;
-  /* font-family: "Lobster", cursive; */
 
-  font-family: "Annie Use Your Telescope", cursive;
-  /* font-family: "Abril Fatface", cursive; */
+  /* font-family: "Annie Use Your Telescope", cursive; */
+  font-family: "Abril Fatface", cursive;
   text-align: center;
   font-weight: 800;
 }