hover color variable added

Author: Shm-Rsuf

src/components/About.js

@@ -1,7 +1,7 @@
 import { useRef } from "react";
-import SectionTitle from "./SectionTitle";
-import { useHoverEffect } from "../hooks/useHoverEffect";
 import { useGsapProjectLeftRightReveal } from "../hooks/gsap";
+import { useHoverEffect } from "../hooks/useHoverEffect";
+import SectionTitle from "./SectionTitle";
 
 const data = {
   img1: "https://res.cloudinary.com/dlc8v0etj/image/upload/v1675931938/cover1_vtesoo.jpg",
@@ -17,12 +17,12 @@ const About = () => {
   useGsapProjectLeftRightReveal(aboutArr);
 
   return (
-    <div className="container mx-auto mt-40" id="about">
+    <div className='container mx-auto mt-40' id='about'>
       <SectionTitle title={"About"} />
 
-      <div className="about-wrapper mt-40 grid grid-cols-2 gap-20 overflow-hidden">
-        <div className="about-left" ref={aboutLeftRef}></div>
-        <div className="about-right" ref={aboutRightRef}>
+      <div className='about-wrapper mt-40 grid grid-cols-2 gap-20 overflow-hidden'>
+        <div className='about-left' ref={aboutLeftRef}></div>
+        <div className='about-right' ref={aboutRightRef}>
           <p>
             I am a Front-End-Developer specializing in React, Tailwind CSS,
             Redux, responsive design, JavaScript, and React Router would be
@@ -31,17 +31,17 @@ const About = () => {
             technologies. My expertise in these technologies allows me to design
             and implement responsive layouts.
           </p>
-          <p className="mt-10">
+          <p className='mt-10'>
             Additionally, I would have a strong understanding of javaScript and
             be able to write high-quality code using React. My passion for
             delivering exceptional user experiences, combined with my technical
             skills, make me a valuable asset to any development team.
           </p>
           <a
-            href="https://drive.google.com/file/d/1-kShfd5skxs8tuQgsZePOmCYRuwUceUa/view?usp=sharing"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="uppercase py-4 px-8 border border-white/20 rounded-full hover:bg-cyan-400/20 hover:border-cyan-50/20 duration-500 inline-block mt-10"
+            href='https://drive.google.com/file/d/1-kShfd5skxs8tuQgsZePOmCYRuwUceUa/view?usp=sharing'
+            target='_blank'
+            rel='noopener noreferrer'
+            className='uppercase py-4 px-8 border border-cyan-500 rounded-full hover:bg-hover-color hover:text-gray-900 duration-500 inline-block mt-10'
           >
             Resume
           </a>

src/components/Contact.js

@@ -1,7 +1,7 @@
+import emailjs from "@emailjs/browser";
 import { useRef } from "react";
 import { useGsapInputReveal } from "../hooks/gsap";
 import SectionTitle from "./SectionTitle";
-import emailjs from "@emailjs/browser";
 
 const Contact = () => {
   const formRef = useRef(null);
@@ -42,47 +42,47 @@ const Contact = () => {
   };
 
   return (
-    <div className="contact container mx-auto mt-40" id="contact">
+    <div className='contact container mx-auto mt-40' id='contact'>
       <SectionTitle title={"Let's Talk"} />
 
       <form
         onSubmit={sendEmailHandler}
-        className="mt-40 grid grid-cols-2 gap-20"
+        className='mt-40 grid grid-cols-2 gap-20'
         ref={formRef}
       >
-        <div className=" form-control overflow-hidden" ref={input1Ref}>
+        <div className=' form-control overflow-hidden' ref={input1Ref}>
           <input
-            type="text"
-            placeholder="write your name"
-            name="fullname"
+            type='text'
+            placeholder='write your name'
+            name='fullname'
             required
-            className="fullname bg-transparent py-8 px-16 border border-white/20 outline-none rounded-full focus:border-cyan-400 duration-500 w-full"
+            className='fullname bg-transparent py-8 px-16 border border-cyan-500 outline-none rounded-full focus:border-cyan-400 duration-500 w-full'
           />
         </div>
-        <div className=" form-control overflow-hidden" ref={input2Ref}>
+        <div className=' form-control overflow-hidden' ref={input2Ref}>
           <input
-            type="email"
-            placeholder="write your email"
-            name="email"
+            type='email'
+            placeholder='write your email'
+            name='email'
             required
-            className="email bg-transparent py-8 px-16 border border-white/20 outline-none rounded-full focus:border-cyan-400 duration-500 w-full"
+            className='email bg-transparent py-8 px-16 border border-cyan-500 outline-none rounded-full focus:border-cyan-400 duration-500 w-full'
           />
         </div>
-        <div className=" form-control overflow-hidden" ref={input3Ref}>
+        <div className=' form-control overflow-hidden' ref={input3Ref}>
           <textarea
-            placeholder="write your message"
-            name="message"
+            placeholder='write your message'
+            name='message'
             required
-            rows="1"
-            cols="30"
-            className="message bg-transparent py-8 px-16 border border-white/20 outline-none rounded-full focus:border-cyan-400 duration-500 w-full resize-none"
+            rows='1'
+            cols='30'
+            className='message bg-transparent py-8 px-16 border border-cyan-500 outline-none rounded-full focus:border-cyan-400 duration-500 w-full resize-none'
           />
         </div>
-        <div className="form-control overflow-hidden" ref={input4Ref}>
+        <div className='form-control overflow-hidden' ref={input4Ref}>
           <input
-            type="submit"
-            value="send message"
-            className=" py-8 px-16 border border-white/20 rounded-full hover:bg-cyan-400/20 hover:border-cyan-400/20 duration-500 w-full uppercase cursor-pointer"
+            type='submit'
+            value='send message'
+            className=' py-8 px-16 border border-cyan-500 rounded-full hover:bg-cyan-400/20 hover:border-cyan-400/20 duration-500 w-full uppercase cursor-pointer'
           />
         </div>
       </form>

src/components/Project.js

@@ -11,54 +11,54 @@ const Project = ({ project }) => {
   useGsapProjectLeftRightReveal(projectArr);
 
   return (
-    <div className="project grid grid-cols-5 overflow-hidden">
+    <div className='project grid grid-cols-5 overflow-hidden'>
       <div
-        className="project-left col-span-3 flex flex-col gap-8"
+        className='project-left col-span-3 flex flex-col gap-8'
         ref={projectLeftRef}
       >
-        <span className="text-7xl text-white/50">
+        <span className='text-7xl text-white/50'>
           {String(project.id).padStart(2, 0)}
         </span>
-        <h3 className="uppercase text-4xl leading-relaxed tracking-wider text-cyan-400">
+        <h3 className='uppercase text-4xl leading-relaxed tracking-wider text-cyan-400'>
           {project.title}
         </h3>
-        <p className="text-white/75">{project.description}</p>
-        <span className="text-cyan-400 flex gap-5 flex-wrap leading-none">
+        <p className='text-white/75'>{project.description}</p>
+        <span className='text-cyan-400 flex gap-5 flex-wrap leading-none'>
           {project.tools.map((tool, i) => (
             <span key={i}>{tool}</span>
           ))}
         </span>
-        <div className="flex gap-8 flex-wrap">
+        <div className='flex gap-8 flex-wrap'>
           <a
             href={project.liveLink}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="uppercase py-4 px-8 border border-white/20 rounded-full hover:bg-cyan-400/20 hover:border-cyan-50/20 duration-500"
+            target='_blank'
+            rel='noopener noreferrer'
+            className='uppercase py-4 px-8 border border-cyan-500 rounded-full hover:bg-hover-color hover:text-gray-900 duration-500'
           >
             Live Site
           </a>
           <a
             href={project.frontEndLink}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="uppercase py-4 px-8 border border-white/20 rounded-full hover:bg-cyan-400/20 hover:border-cyan-50/20 duration-500"
+            target='_blank'
+            rel='noopener noreferrer'
+            className='uppercase py-4 px-8 border border-cyan-500 rounded-full hover:bg-hover-color hover:text-gray-900 duration-500'
           >
             Front-End Code
           </a>
           {project.backEndLink && (
             <a
               href={project.backEndLink}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="uppercase py-4 px-8 border border-white/20 rounded-full hover:bg-cyan-400/20 hover:border-cyan-50/20 duration-500"
+              target='_blank'
+              rel='noopener noreferrer'
+              className='uppercase py-4 px-8 border border-white/20 rounded-full hover:bg-cyan-400/20 hover:border-cyan-50/20 duration-500'
             >
               Back-End Code
             </a>
           )}
         </div>
       </div>
       <div
-        className="project-right col-span-2 justify-self-end"
+        className='project-right col-span-2 justify-self-end'
         ref={projectRightRef}
       ></div>
     </div>

src/index.css

@@ -12,6 +12,7 @@
 :root {
   --color-dark: #050505;
   --color-light: #f7f7ff;
+  --hover-color: #22d3ee;
 }
 ::-webkit-scrollbar {
   width: 10px;
@@ -118,7 +119,7 @@ input[type="submit"] {
 
 .link-item::after {
   content: "";
-  background-color: var(--color-light);
+  background-color: var(--hover-color);
   position: absolute;
   width: 0%;
   height: 1px;

tailwind.config.js

@@ -2,7 +2,11 @@
 module.exports = {
   content: ["./src/**/*.{js,jsx,ts,tsx}"],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        "hover-color": "var(--hover-color)",
+      },
+    },
   },
   plugins: [],
 };