Merge pull request #312 from happyrao78/newbranch

added all contributors
Akshatchaube01 · Jun 21, 2024 · 82e6259 · 82e6259
2 parents 8c3bfc5 + 4552cc4
commit 82e6259
Show file tree

Hide file tree

Showing 3 changed files with 103 additions and 17 deletions.
diff --git a/package-lock.json b/package-lock.json
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";
@@ -9,19 +10,32 @@ import Himank from "../assets/Himank.jpg";
 import Akshat from "../assets/Akshat.jpg";
 import Shreya from "../assets/Shreya.jpg";
 import Naman from "../assets/Naman.jpg";
-import Footer from './Footer';
-// import Tilty from "react-tilty";
+import Footer from "./Footer";
 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",
@@ -76,25 +90,28 @@ const AboutUs = () => {
           </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>
+            <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>
+          <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>
         <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 +132,68 @@ 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}
+              >
                 <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-full h-36 w-36"
+                    src={member.imgSrc}
+                    alt={member.alt}
+                  />
                 </div>
                 <div className="text-center">
-                  <p className="text-xl text-white font-bold mb-2">{member.memberName}</p>
+                  <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>
   );