Skip to content

Commit

Permalink
Merge branch 'Akshatchaube01:main' into about_us_toggle_fix
Browse files Browse the repository at this point in the history
  • Loading branch information
@Yogesh-ok55
Yogesh-ok55 authored Jul 26, 2024
2 parents de78ff9 + 2caa93f commit 17bd1b5
Show file tree
Hide file tree
Showing 2 changed files with 69 additions and 34 deletions.
6 changes: 6 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,12 @@
pointer-events: none;
z-index: 9999;
}

@media (max-width: 780px) {
.circle-container{
display: none;
}
}
</style>

</head>
Expand Down
97 changes: 63 additions & 34 deletions src/components/AboutUs.jsx
View file
Original file line number Diff line number Diff line change
@@ -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([]);
Expand All @@ -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);
Expand Down Expand Up @@ -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}
Expand All @@ -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 ">
Expand All @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -207,4 +236,4 @@ const AboutUs = () => {
);
};

export default AboutUs;
export default AboutUs;

0 comments on commit 17bd1b5

Please sign in to comment.