added some animation and fixed some bug

README.md

@@ -4,8 +4,8 @@ My space on web
 
 ## TODO
 
-- [ ] Add Preloader
-- [ ] Add animations (framer motion)
+- [x] Add Preloader
+- [x] Add animations (framer motion)
 - [ ] Add custom error page
 - [ ] Add custom 404 page
 - [ ] Add custom 500 page

src/components/Contact.tsx

@@ -4,7 +4,7 @@ import { Title } from './common/Title'
 export const Contact = () => {
   return (
     <section id='contact'>
-        <Title title='Contact' />
+        <Title title='Get in Touch' />
 
         <div className='text-center tracking-tighter'>
             <p className='my-4'>For any inquiries, please contact me at:</p>

src/components/Hero.tsx

@@ -17,10 +17,10 @@ const container = (delay: number) => ({
 
 export const Hero = () => {
   return (
-    <div className="h-screen">
+    <div className="h-full pb-40">
       <div className="flex flex-wrap">
         <div className="w-full lg:w-1/2">
-          <div className="flex flex-col items-center lg:items-start mt-10 lg:mt-0">
+          <div className="flex flex-col justify-between items-center text-center lg:text-left lg:items-start mt-10 lg:mt-0">
             <motion.h1
               variants={container(0)}
               initial="hidden"

src/components/common/NavIcons.tsx

@@ -1,28 +1,26 @@
-import React, { FC } from "react";
-import { ToolTip } from "./ToolTip";
+import { FC } from "react";
+import { motion } from "framer-motion";
 
 interface NavIconsProps {
   icons: React.ElementType;
   className?: string;
   href?: string;
-  tooltip?: string;
 }
 
 export const NavIcons: FC<NavIconsProps> = ({
   icons: ReactIconsCompoents,
   className = "",
   href = "#",
-  tooltip = "",
 }) => {
   return (
-    <ToolTip
-      content={tooltip}
-      placement="bottom"
-      className="inline-block relative"
+    <motion.a
+      whileHover={{ scale: 1.3 }}
+      rel="noreferrer noopener"
+      target="_blank"
+      href={href}
+      className="text-slate-200 hover:text-purple-300"
     >
-      <a rel="noreferrer noopener" target="_blank" href={href} className="text-fuchsia-200">
-        <ReactIconsCompoents className={className} />
-      </a>
-    </ToolTip>
+      <ReactIconsCompoents className={className} />
+    </motion.a>
   );
 };

src/components/common/Title.tsx

@@ -12,10 +12,13 @@ export const Title: FC<TitleProps> = ({ title, subTitle }) => {
       whileInView={{ opacity: 1, y: 0 }}
       initial={{ opacity: 0, y: -100 }}
       transition={{ duration: 0.5 }}
-      className="mb-10 font-nasalization text-center text-4xl"
+      whileHover={{
+        scale: 1.05
+      }}
+      className="mb-10 font-nasalization text-slate-200 text-center text-4xl"
     >
       {title}
-      {subTitle && <span className="text-neutral-500"> Me</span>}
+      {subTitle && <span className="text-purple-200"> Me</span>}
     </motion.h2>
   );
 };