Merge branch 'main' of https://github.com/Akshatchaube01/TimeWarp int…

…o Modified_NavBar
Akshatchaube01 · Jun 26, 2024 · 20fe54a · 20fe54a
2 parents 3c42c89 + aaa9f8c
commit 20fe54a
Show file tree

Hide file tree

Showing 15 changed files with 386 additions and 97 deletions.
diff --git a/index.html b/index.html
@@ -15,6 +15,19 @@
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
         <link rel="stylesheet" href="styles.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+     <script type="text/javascript">
+      function googleTranslateElementInit() {
+        new google.translate.TranslateElement(
+          { pageLanguage: 'en' },
+          'google_translate_element'
+        );
+      }
+    </script>
+    <script
+      type="text/javascript"
+      src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"
+    ></script>
+
 
     </head>
     <body>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,8 +13,10 @@
   "dependencies": {
     "@emailjs/browser": "^4.3.3",
     "@fortawesome/fontawesome-svg-core": "^6.5.2",
+    "@fortawesome/free-brands-svg-icons": "^6.5.2",
+    "@fortawesome/free-regular-svg-icons": "^6.5.2",
     "@fortawesome/free-solid-svg-icons": "^6.5.2",
-    "@fortawesome/react-fontawesome": "^0.2.0",
+    "@fortawesome/react-fontawesome": "^0.2.2",
     "@fullcalendar/core": "^6.1.13",
     "@fullcalendar/daygrid": "^6.1.13",
     "@fullcalendar/react": "^6.1.13",

diff --git a/src/components/AboutUs.css b/src/components/AboutUs.css
@@ -224,3 +224,22 @@ h1::before {
 }
 
 
+.marquee {
+    overflow: hidden;
+    white-space: nowrap;
+  }
+
+  .marquee-content {
+    display: flex;
+    animation: marquee 15s linear infinite;
+  }
+
+  @keyframes marquee {
+    from {
+      transform: translateX(100%);
+    }
+    to {
+      transform: translateX(-100%);
+    }
+  }
+
diff --git a/src/components/AboutUs.jsx b/src/components/AboutUs.jsx
@@ -1,4 +1,5 @@
-import React, { useEffect, useMemo } from "react";
+import React, { useEffect, useState, useMemo } from "react";
+import axios from "axios";
 import Particles, { initParticlesEngine } from "@tsparticles/react";
 import { loadFull } from "tsparticles";
 import Tilty from "react-tilty";
@@ -10,18 +11,34 @@ import Akshat from "../assets/Akshat.jpg";
 import Shreya from "../assets/Shreya.jpg";
 import Naman from "../assets/Naman.jpg";
 import Footer from './Footer';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faLinkedin, faGithub } from '@fortawesome/free-brands-svg-icons';
 // import Tilty from "react-tilty";
 import { particles } from "./Particles.jsx";
 import BackToTop from "./BottomToTop";
 
 const AboutUs = () => {
+  const [contributors, setContributors] = useState([]);
 
   useEffect(() => {
     initParticlesEngine(async (engine) => {
       await loadFull(engine);
     });
   }, []);
 
+  useEffect(() => {
+    const fetchContributors = async () => {
+      try {
+        const response = await axios.get('https://api.github.com/repos/Akshatchaube01/TimeWarp/contributors');
+        setContributors(response.data);
+      } catch (error) {
+        console.error("Error fetching contributors:", error);
+      }
+    };
+
+    fetchContributors();
+  }, []);
+
   const teamMembers = [
     {
       memberName: "Akshat Chaube",
@@ -58,43 +75,53 @@ const AboutUs = () => {
     bottomTxt:
       "Through our passion for exploration and discovery, we seek to inspire curiosity and ignite imaginations, inviting individuals to embark on a journey through time where they can uncover hidden treasures, explore diverse cultures, and witness the remarkable tapestry of human experience.",
   };
-
+   const handlehover=(e)=>{
+    e.currentTarget.querySelector(".hovereffect").style.transform="scale(1)";
+   }
+   const hanleleave=(e)=>{
+    e.currentTarget.querySelector(".hovereffect").style.transform="scale(0)";
+   }
   return (
-    <div className="about-container md:m-16 mt-8 p-8">
+    <div className="about-container md:m-16 mt-8 p-25 ">
       <Particles id="tsparticles" options={useMemo(() => particles, [])} />
       <BackToTop />
-      <div className="about-content flex items-center mb-24 gap-x-12">
+      <div className="about-content  items-center mb-24 ">
+      <span className="image-container image-container-one grid justify-center">
+          <Tilty>
+            <img
+              src={aboutImage}
+              alt="About us"
+              className="ml-10 shadow-sm shadow-sky-600 about-image w-[350px] rounded-full hover:scale-[0.9] transition"
+            />
+          </Tilty>
+        </span>
         <div className="text-container flex-1">
           <h1 className="rounded-md about-title text-4xl text-center italic font-bold p-2 mb-8 mt-[100px] bg-gradient-to-r from-sky-500">
             About Us
           </h1>
+
           <p className="about-text italic text-lg font-light text-justify mb-4">
             {about.topTxt}
           </p>
           <p className="about-text italic text-lg font-light text-justify">
             {about.bottomTxt}
           </p>
         </div>
-        <div className="image-container image-container-one mr-8">
-          <Tilty> <img
-            src={aboutImage}
-            alt="About us"
-            className="ml-8 shadow-sm shadow-sky-600 about-image w-[500px] rounded-full hover:scale-[1.1] transition"
-          />
-          </Tilty>
-        </div>
+
       </div>
 
-      <div className="our-vision flex mb-28">
-        <div className="image-container image-container-two">
-          <Tilty><img
-            src={carImage}
-            alt="About us"
-            className=" shadow-sm shadow-sky-600 about-image w-[500px] rounded-full hover:scale-[1.1] transition"
-          /></Tilty>
+      <div className="our-vision  mb-28 ">
+        <div className="image-container image-container-two grid justify-center ml-25">
+          <Tilty>
+            <img
+              src={carImage}
+              alt="About us"
+              className="shadow-sm shadow-sky-600 about-image w-[350px] rounded-full hover:scale-[0.9] transition mb-10"
+            />
+          </Tilty>
         </div>
         <div className="text-container mx-auto flex-1 text-left">
-          <h1 className="about-title rounded-md text-4xl text-center italic font-bold p-2  mb-8 bg-gradient-to-l from-sky-500">
+          <h1 className="about-title rounded-md text-4xl text-center italic font-bold p-2 mb-8 bg-gradient-to-l from-sky-500">
             Our Vision
           </h1>
           <p className="about-text italic text-lg font-light text-justify">
@@ -115,19 +142,66 @@ const AboutUs = () => {
           </div>
           <div className="grid grid-cols-1 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3 ">
             {teamMembers.map((member, index) => (
-              <Tilty key={index} className="w-full bg-sky-900/50 backdrop-blur-sm shadow-sky-100 rounded-lg shadow-lg p-12 flex flex-col justify-center items-center" glare scale={1.05} maxGlare={0.5}>
+              <Tilty key={index} className="w-full bg-sky-900/50 backdrop-blur-sm shadow-sky-100 rounded-lg shadow-lg p-12 flex flex-col justify-center items-center" glare scale={1.05} maxGlare={0.5} onMouseEnter={handlehover} onMouseLeave={hanleleave}>
+                <div className="hovereffect absolute bg-black/50 w-full h-full flex justify-center flex-col items-center gap-3 scale-0">
+                  <div className="flex flex-col items-center">
+                    <p className="text-xl text-white font-bold">{member.memberName}</p>
+                    <p className="text-xl text-white font-thin mb-2">Member</p>
+                  </div>
+                  <p className="text-xl text-gray-400 font-semibold mb-2">Tech Stack</p>
+                  <div className="flex gap-8 justify-center items-center flex-wrap">
+                    <a href="https://google.com" target="_blank"><FontAwesomeIcon icon={faLinkedin} size="lg" className="text-white text-3xl" /></a>
+                    <a href="https://github.com" target="_blank"> <FontAwesomeIcon icon={faGithub} size="lg" className="text-white text-3xl" /></a>
+                  </div>
+                </div>
                 <div className="mb-8">
-                  <img className="object-center object-cover rounded-full h-36 w-36" src={member.imgSrc} alt={member.alt} />
+                  <img className="object-center object-cover rounded-lg h-40 w-40" src={member.imgSrc} alt={member.alt} />
                 </div>
                 <div className="text-center">
-                  <p className="text-xl text-white font-bold mb-2">{member.memberName}</p>
                 </div>
               </Tilty>
             ))}
           </div>
         </section>
       </div>
 
+      {/* OUR CONTRIBUTORS */}
+      <div className="w-full">
+        <section className="our-team-section max-w-6xl mx-auto px-4 sm:px-6 lg:px-4 py-12">
+          <div className="rounded-md about-title text-4xl text-center italic font-bold p-2 mb-[5%] mt-[100px] bg-gradient-to-r from-sky-500 ">
+            <h1 className="our-team-heading font-bold text-3xl md:text-4xl lg:text-5xl font-heading text-white">
+              Our Contributors
+            </h1>
+          </div>
+          <div className="marquee">
+            <div className="marquee-content">
+              {contributors.map((contributor, index) => (
+                <Tilty
+                  key={index}
+                  className="inline-block bg-sky-900/50 backdrop-blur-sm shadow-sky-100 rounded-lg shadow-lg p-12 flex flex-col justify-center items-center m-2"
+                  glare
+                  scale={1.05}
+                  maxGlare={0.5}
+                >
+                  <div className="mb-8">
+                    <img
+                      className="object-center object-cover rounded-full h-36 w-36"
+                      src={contributor.avatar_url}
+                      alt={contributor.login}
+                    />
+                  </div>
+                  <div className="text-center">
+                    <p className="text-xl text-white font-bold mb-2">
+                      {contributor.login}
+                    </p>
+                  </div>
+                </Tilty>
+              ))}
+            </div>
+          </div>
+        </section>
+      </div>
+
       <Footer />
     </div>
   );

diff --git a/src/components/ContactUs.jsx b/src/components/ContactUs.jsx
@@ -93,7 +93,7 @@ const Contact = () => {
 
         <motion.div
           variants={slideIn("left", "tween", 0.2, 1)}
-          className="flex-[0.75] bg-black-100 p-8 rounded-2xl"
+          className=" bg-black-100 p-8 rounded-2xl"
         >
           <p
             className={