Merge branch 'main' into main

Akshatchaube01 · Aug 9, 2024 · 1571baa · 1571baa
2 parents bc1b4f3 + 4b3fbdc
commit 1571baa
Show file tree

Hide file tree

Showing 7 changed files with 189 additions and 71 deletions.
diff --git a/index.html b/index.html
@@ -43,6 +43,12 @@
             pointer-events: none;
             z-index: 9999;
         }
+
+        @media (max-width: 780px) {
+            .circle-container{
+                display: none;
+            }
+        }
     </style>
 
 </head>

diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/AboutUs.css b/src/components/AboutUs.css
@@ -1,6 +1,6 @@
 body {
-  background-color: #000;
-  color: #fff;
+  /* background-color: #000;
+  color: #fff; */
   margin: 0;
   padding: 0;
   overflow-x: hidden;

diff --git a/src/components/AboutUs.jsx b/src/components/AboutUs.jsx
@@ -1,21 +1,21 @@
-import React, { useEffect, useState, useMemo } from "react";
-import axios from "axios";
+import { faGithub, faLinkedin } from "@fortawesome/free-brands-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import Particles, { initParticlesEngine } from "@tsparticles/react";
-import { loadFull } from "tsparticles";
+import axios from "axios";
+import React, { useEffect, useMemo, useState } from "react";
 import Tilty from "react-tilty";
-import "../components/AboutUs.css";
-import aboutImage from "../assets/cartoon.png";
+import { loadFull } from "tsparticles";
 import carImage from "../assets/1 1.png";
-import Himank from "../assets/Himank.jpg";
 import Akshat from "../assets/Akshat.jpg";
-import Shreya from "../assets/Shreya.jpg";
+import aboutImage from "../assets/cartoon.png";
+import Himank from "../assets/Himank.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 Shreya from "../assets/Shreya.jpg";
+import "../components/AboutUs.css";
+import Footer from "./Footer";
 // import Tilty from "react-tilty";
-import { particles } from "./Particles.jsx";
 import BackToTop from "./BottomToTop";
+import { particles } from "./Particles.jsx";
 
 const AboutUs = () => {
   const [contributors, setContributors] = useState([]);
@@ -29,7 +29,9 @@ const AboutUs = () => {
   useEffect(() => {
     const fetchContributors = async () => {
       try {
-        const response = await axios.get('https://api.github.com/repos/Akshatchaube01/TimeWarp/contributors');
+        const response = await axios.get(
+          "https://api.github.com/repos/Akshatchaube01/TimeWarp/contributors"
+        );
         setContributors(response.data);
       } catch (error) {
         console.error("Error fetching contributors:", error);
@@ -75,18 +77,18 @@ 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)";
-   }
+  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-25 ">
       <Particles id="tsparticles" options={useMemo(() => particles, [])} />
       <BackToTop />
       <div className="about-content  items-center mb-24 ">
-      <span className="image-container image-container-one grid justify-center">
+        <span className="image-container image-container-one grid justify-center">
           <Tilty>
             <img
               src={aboutImage}
@@ -99,15 +101,14 @@ const AboutUs = () => {
           <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">
+
+          <p className="about-text italic text-lg font-light text-justify mb-4 p-6">
             {about.topTxt}
           </p>
-          <p className="about-text italic text-lg font-light text-justify">
+          <p className="about-text italic text-lg font-light text-justify p-6">
             {about.bottomTxt}
           </p>
         </div>
-
       </div>
 
       <div className="our-vision  mb-28 ">
@@ -124,10 +125,10 @@ const AboutUs = () => {
           <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">
+          <p className="about-text italic text-lg font-light text-justify p-6">
             {vision.topTxt}
           </p>
-          <p className="about-text italic text-lg font-light text-justify">
+          <p className="about-text italic text-lg font-light text-justify p-6">
             {vision.bottomTxt}
           </p>
         </div>
@@ -142,23 +143,51 @@ 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} onMouseEnter={handlehover} onMouseLeave={hanleleave}>
+              <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-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>
+                  <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>
+                    <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-lg h-40 w-40" src={member.imgSrc} alt={member.alt} />
-                </div>
-                <div className="text-center">
+                  <img
+                    className="object-center object-cover rounded-lg h-40 w-40"
+                    src={member.imgSrc}
+                    alt={member.alt}
+                  />
                 </div>
+                <div className="text-center"></div>
               </Tilty>
             ))}
           </div>
@@ -207,4 +236,4 @@ const AboutUs = () => {
   );
 };
 
-export default AboutUs;
+export default AboutUs;
diff --git a/src/components/BottomToTop.jsx b/src/components/BottomToTop.jsx
@@ -1,5 +1,4 @@
 import React, { useState, useEffect } from "react";
-import styled from "styled-components";
 import { FaArrowUp } from "react-icons/fa";
 
 const GoToTop = () => {
@@ -25,14 +24,19 @@ const GoToTop = () => {
   return (
     <>
       {isVisible && (
-        <Wrapper onClick={goToTop}>
-          <FaArrowUp className="top-btn--icon" />
-        </Wrapper>
+        <div
+          onClick={goToTop}
+          className="flex justify-center items-center fixed bottom-20 right-5 w-12 h-12 bg-blue-500 text-white rounded-full cursor-pointer transition-transform transform hover:bg-blue-700 hover:-translate-y-1"
+          style={{ zIndex: 9999 }} 
+        >
+          <FaArrowUp className="text-lg" />
+        </div>
       )}
     </>
   );
 };
 
+
 const Wrapper = styled.div`
 @media(max-width:481px){
 bottom:7%;

diff --git a/src/components/Footer.css b/src/components/Footer.css
@@ -19,7 +19,7 @@ a:hover {
 .footer-content {
     display: flex;
     flex-direction: column;
-    align-items: center;
+    align-items: flex-start;
     justify-content: space-around;
     max-width: 1200px;
     margin: auto;
@@ -154,8 +154,9 @@ a:hover {
 
 .footer-section ul li a:hover,
 .footer-section p a:hover {
-    color: #90a9bb;
-    transform: scale(1.1);
+    color: #90d0fe;
+    text-decoration:solid;
+    transform: scale(1.3);
 }
 
 .smedia {
@@ -290,3 +291,67 @@ a:hover {
   }
 
 
+  .modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    animation: fadeIn 0.5s;
+  }
+
+  .modal-content {
+    background: rgb(255, 255, 255);
+    padding: 20px;
+    border-radius: 8px;
+    text-align: center;
+    animation: fadeIn 0.5s;
+  }
+
+  .modal-content h2 {
+    margin-top: 0;
+    color: #072183;
+    font-weight: bold;
+  }
+
+  .modal-content p {
+    color: #000000;
+  }
+
+
+  .modal-content button {
+    background: #093eba;
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 5px;
+    cursor: pointer;
+    margin-top: 20px;
+  }
+
+  .modal-content button:hover {
+    background: #05286f;
+  }
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes fadeOut {
+    from {
+      opacity: 1;
+    }
+    to {
+      opacity: 0;
+    }
+  }
+