mouse

curser mouse animation added
vishwamartur · Feb 24, 2024 · 65c82df · 65c82df
1 parent 57df25b
commit 65c82df
Show file tree

Hide file tree

Showing 10 changed files with 100 additions and 42 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,6 +10,7 @@
     "axios": "^1.6.2",
     "bootstrap": "^5.3.2",
     "react": "^18.2.0",
+    "react-animated-cursor": "^2.11.2",
     "react-dom": "^18.2.0",
     "react-scripts": "^5.0.1",
     "react-scroll": "^1.9.0",

diff --git a/src/App.css b/src/App.css
@@ -1,5 +1,6 @@
 .App {
   text-align: center;
+  background-color: black;
 }
 
 .App-logo {
@@ -22,7 +23,7 @@
   align-items: center;
   justify-content: center;
   /* Use a custom font */
-  font-family: 'Roboto', sans-serif;
+  font-family: "Roboto", sans-serif;
   font-size: calc(10px + 2vmin);
   color: white;
 }

diff --git a/src/App.js b/src/App.js
@@ -6,10 +6,27 @@ import Projects from "./components/Projects";
 import Skills from "./components/Skills";
 import Testimonials from "./components/Testimonials";
 import Contact from "./components/Contact";
+import AnimatedCursor from "react-animated-cursor";
 
 export default function App() {
   return (
-    <main style={{backgroundImage: "url(/image.jpg)", backgroundSize: "cover", backgroundPosition: "center", backgroundRepeat: "no-repeat"}}>
+    <main
+      style={{
+        backgroundImage: "url(/image.jpg)",
+        backgroundSize: "cover",
+        backgroundPosition: "center",
+        backgroundRepeat: "no-repeat",
+        backgroundColor: "white",
+      }}
+    >
+      <AnimatedCursor
+        innerSize={8}
+        outerSize={8}
+        color="255, 165, 0"
+        outerAlpha={0.2}
+        innerScale={0.7}
+        outerScale={5}
+      />
       <Navbar />
       <About />
       <Projects />

diff --git a/src/components/About.js b/src/components/About.js
@@ -6,23 +6,35 @@ export default function About() {
     <section id="about" className="container py-5">
       <div className="row">
         <div className="col-lg-6 col-md-12">
-          <img src="/profile.jpg" alt="Profile" className="img-fluid rounded-circle mb-3" />
+          <img
+            src="/profile.jpg"
+            alt="Profile"
+            className="img-fluid rounded-circle mb-3"
+          />
         </div>
         <div className="col-lg-6 col-md-12">
-          <h2 className="text-primary">About Me</h2>
-          <p className="lead">
-            Hi, <b>Vishwanath M,</b>a Product Engineer based in Bengaluru, India. I love creating
-            beautiful and functional websites using modern technologies like React, Node, MongoDB,
-            etc. I have over 2 years of experience in web development and have worked on various
-            projects ranging from e-commerce, social media, infrastructure used websites, and more.
+          <h2 className="text-black">About Me</h2>
+          <p className="lead text-black">
+            Hi, <b>Vishwanath M,</b>a Product Engineer based in Bengaluru,
+            India. I love creating beautiful and functional websites using
+            modern technologies like React, Node, MongoDB, etc. I have over 2
+            years of experience in web development and have worked on various
+            projects ranging from e-commerce, social media, infrastructure used
+            websites, and more.
           </p>
-          <p className="lead">
-            I'm passionate about learning new skills and exploring new challenges. I'm always open
-            to new opportunities and collaborations. If you have a project that you want to get
-            started, or you need some help with your existing project, feel free to contact me. I
-            would love to hear from you and work with you.
+          <p className="lead text-black">
+            I'm passionate about learning new skills and exploring new
+            challenges. I'm always open to new opportunities and collaborations.
+            If you have a project that you want to get started, or you need some
+            help with your existing project, feel free to contact me. I would
+            love to hear from you and work with you.
           </p>
-          <a href="/resume.pdf" className="btn btn-primary mr-3" target="_blank" rel="noreferrer">
+          <a
+            href="/resume.pdf"
+            className="btn btn-primary mr-3"
+            target="_blank"
+            rel="noreferrer"
+          >
             Download Resume
           </a>
           <a href="#contact" className="btn btn-outline-primary">

diff --git a/src/components/Contact.js b/src/components/Contact.js
@@ -32,13 +32,13 @@ export default function Contact() {
   return (
     <section id="contact" className="container py-5">
       <h2 className="text-primary">Contact</h2>
-      <p className="lead">
-        If you want to get in touch with me, you can fill out the contact form below and I will get
-        back to you as soon as possible. You can also find my email, phone, and social media links
-        at the bottom of this page.
+      <p className="lead text-black">
+        If you want to get in touch with me, you can fill out the contact form
+        below and I will get back to you as soon as possible. You can also find
+        my email, phone, and social media links at the bottom of this page.
       </p>
       <form onSubmit={handleSubmit}>
-        <div className="form-group">
+        <div className="form-group text-black">
           <label htmlFor="name">Name</label>
           <input
             type="text"
@@ -50,7 +50,7 @@ export default function Contact() {
             required
           />
         </div>
-        <div className="form-group">
+        <div className="form-group text-black">
           <label htmlFor="email">Email</label>
           <input
             type="email"
@@ -62,7 +62,7 @@ export default function Contact() {
             required
           />
         </div>
-        <div className="form-group">
+        <div className="form-group text-black">
           <label htmlFor="message">Message</label>
           <textarea
             className="form-control"

diff --git a/src/components/Projects.js b/src/components/Projects.js
@@ -6,13 +6,15 @@ export default function Projects() {
   const projects = [
     {
       title: "E-commerce Website",
-      description: "A full-stack e-commerce website built with React, Node, Express, and MongoDB. It features user authentication, product listing, shopping cart, checkout, payment, and order history.",
+      description:
+        "A full-stack e-commerce website built with React, Node, Express, and MongoDB. It features user authentication, product listing, shopping cart, checkout, payment, and order history.",
       image: "/ecommerce.jpg", // You will need to save your project images in the public folder and use the relative path
       link: "https://ecommerce.com", // You can use the link to your live demo or GitHub repository
     },
     {
       title: "Social Media App",
-      description: "A full-stack social media app built with React, Node, Express, and MongoDB. It features user authentication, profile creation, post creation, likes, comments, and followers.",
+      description:
+        "A full-stack social media app built with React, Node, Express, and MongoDB. It features user authentication, profile creation, post creation, likes, comments, and followers.",
       image: "/social.jpg",
       link: "https://social.com",
     },
@@ -27,15 +29,20 @@ export default function Projects() {
   return (
     <section id="projects" className="container py-5">
       <h2 className="text-primary">Projects</h2>
-      <p className="lead">
-        Here are some of the projects I have made using various web technologies. You can click on
-        the project title to view the live demo or the source code.
+      <p className="lead text-black">
+        Here are some of the projects I have made using various web
+        technologies. You can click on the project title to view the live demo
+        or the source code.
       </p>
       <div className="row">
         {projects.map((project, index) => (
           <div className="col-lg-4 col-md-6 mb-4" key={index}>
             <div className="card h-100">
-              <img src={project.image} alt={project.title} className="card-img-top" />
+              <img
+                src={project.image}
+                alt={project.title}
+                className="card-img-top"
+              />
               <div className="card-body">
                 <h5 className="card-title">
                   <a href={project.link} target="_blank" rel="noreferrer">

diff --git a/src/components/Skills.js b/src/components/Skills.js
@@ -44,16 +44,19 @@ export default function Skills() {
   return (
     <section id="skills" className="container py-5">
       <h2 className="text-primary">Skills</h2>
-      <p className="lead">
-        Here are some of the skills I have used in making my projects. You can see the icons, names,
-        and levels of my skills below.
+      <p className="lead text-black">
+        Here are some of the skills I have used in making my projects. You can
+        see the icons, names, and levels of my skills below.
       </p>
       <div className="row">
         {skills.map((skill, index) => (
           <div className="col-lg-4 col-md-6 mb-4" key={index}>
             <div className="card h-100">
               <div className="card-body text-center">
-                <i className={skill.icon} style={{ fontSize: "5rem", color: "#007bff" }}></i>
+                <i
+                  className={skill.icon}
+                  style={{ fontSize: "5rem", color: "#007bff" }}
+                ></i>
                 <h5 className="card-title">{skill.name}</h5>
                 <p className="card-text">{skill.level}</p>
               </div>

diff --git a/src/components/Testimonials.js b/src/components/Testimonials.js
@@ -7,32 +7,39 @@ export default function Testimonials() {
     {
       name: "Alice Smith",
       photo: "/alice.jpg", // You will need to save your client or employer photos in the public folder and use the relative path
-      quote: "John is a talented and reliable web developer. He delivered the project on time and with high quality. He was always responsive and communicative. I highly recommend him for any web development project.",
+      quote:
+        "John is a talented and reliable web developer. He delivered the project on time and with high quality. He was always responsive and communicative. I highly recommend him for any web development project.",
     },
     {
       name: "Bob Jones",
       photo: "/bob.jpg",
-      quote: "John is a great web developer who knows how to create amazing websites using modern technologies. He was very helpful and friendly throughout the project. He exceeded my expectations and I'm very happy with the result.",
+      quote:
+        "John is a great web developer who knows how to create amazing websites using modern technologies. He was very helpful and friendly throughout the project. He exceeded my expectations and I'm very happy with the result.",
     },
     {
       name: "Charlie Lee",
       photo: "/charlie.jpg",
-      quote: "John is a skilled and professional web developer who can handle any challenge. He was very flexible and adaptable to the changing requirements of the project. He delivered a stunning website that met all my needs and goals.",
+      quote:
+        "John is a skilled and professional web developer who can handle any challenge. He was very flexible and adaptable to the changing requirements of the project. He delivered a stunning website that met all my needs and goals.",
     },
   ];
 
   return (
     <section id="testimonials" className="container py-5">
       <h2 className="text-primary">Testimonials</h2>
-      <p className="lead">
-        Here are some of the testimonials from my clients and employers. You can see their photos,
-        names, and quotes below.
+      <p className="lead text-black">
+        Here are some of the testimonials from my clients and employers. You can
+        see their photos, names, and quotes below.
       </p>
       <div className="row">
         {testimonials.map((testimonial, index) => (
           <div className="col-lg-4 col-md-6 mb-4" key={index}>
             <div className="card h-100">
-              <img src={testimonial.photo} alt={testimonial.name} className="card-img-top" />
+              <img
+                src={testimonial.photo}
+                alt={testimonial.name}
+                className="card-img-top"
+              />
               <div className="card-body">
                 <h5 className="card-title">{testimonial.name}</h5>
                 <p className="card-text">{testimonial.quote}</p>

diff --git a/src/index.css b/src/index.css
@@ -1,13 +1,13 @@
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }