Skip to content

Commit be47b3a

Browse files
DevGajjar28DevGajjar28
committed
about page fixed
1 parent 3e1c82c commit be47b3a

File tree

1 file changed

+63
-34
lines changed

1 file changed

+63
-34
lines changed

‎src/components/AboutUs.jsx

Lines changed: 63 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
1-
import React, { useEffect, useState, useMemo } from "react";
2-
import axios from "axios";
1+
import { faGithub, faLinkedin } from "@fortawesome/free-brands-svg-icons";
2+
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
33
import Particles, { initParticlesEngine } from "@tsparticles/react";
4-
import { loadFull } from "tsparticles";
4+
import axios from "axios";
5+
import React, { useEffect, useMemo, useState } from "react";
56
import Tilty from "react-tilty";
6-
import "../components/AboutUs.css";
7-
import aboutImage from "../assets/cartoon.png";
7+
import { loadFull } from "tsparticles";
88
import carImage from "../assets/1 1.png";
9-
import Himank from "../assets/Himank.jpg";
109
import Akshat from "../assets/Akshat.jpg";
11-
import Shreya from "../assets/Shreya.jpg";
10+
import aboutImage from "../assets/cartoon.png";
11+
import Himank from "../assets/Himank.jpg";
1212
import Naman from "../assets/Naman.jpg";
13-
import Footer from './Footer';
14-
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
15-
import { faLinkedin, faGithub } from '@fortawesome/free-brands-svg-icons';
13+
import Shreya from "../assets/Shreya.jpg";
14+
import "../components/AboutUs.css";
15+
import Footer from "./Footer";
1616
// import Tilty from "react-tilty";
17-
import { particles } from "./Particles.jsx";
1817
import BackToTop from "./BottomToTop";
18+
import { particles } from "./Particles.jsx";
1919

2020
const AboutUs = () => {
2121
const [contributors, setContributors] = useState([]);
@@ -29,7 +29,9 @@ const AboutUs = () => {
2929
useEffect(() => {
3030
const fetchContributors = async () => {
3131
try {
32-
const response = await axios.get('https://api.github.com/repos/Akshatchaube01/TimeWarp/contributors');
32+
const response = await axios.get(
33+
"https://api.github.com/repos/Akshatchaube01/TimeWarp/contributors"
34+
);
3335
setContributors(response.data);
3436
} catch (error) {
3537
console.error("Error fetching contributors:", error);
@@ -75,18 +77,18 @@ const AboutUs = () => {
7577
bottomTxt:
7678
"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.",
7779
};
78-
const handlehover=(e)=>{
79-
e.currentTarget.querySelector(".hovereffect").style.transform="scale(1)";
80-
}
81-
const hanleleave=(e)=>{
82-
e.currentTarget.querySelector(".hovereffect").style.transform="scale(0)";
83-
}
80+
const handlehover = (e) => {
81+
e.currentTarget.querySelector(".hovereffect").style.transform = "scale(1)";
82+
};
83+
const hanleleave = (e) => {
84+
e.currentTarget.querySelector(".hovereffect").style.transform = "scale(0)";
85+
};
8486
return (
8587
<div className="about-container md:m-16 mt-8 p-25 ">
8688
<Particles id="tsparticles" options={useMemo(() => particles, [])} />
8789
<BackToTop />
8890
<div className="about-content items-center mb-24 ">
89-
<span className="image-container image-container-one grid justify-center">
91+
<span className="image-container image-container-one grid justify-center">
9092
<Tilty>
9193
<img
9294
src={aboutImage}
@@ -99,15 +101,14 @@ const AboutUs = () => {
99101
<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">
100102
About Us
101103
</h1>
102-
103-
<p className="about-text italic text-lg font-light text-justify mb-4">
104+
105+
<p className="about-text italic text-lg font-light text-justify mb-4 p-6">
104106
{about.topTxt}
105107
</p>
106-
<p className="about-text italic text-lg font-light text-justify">
108+
<p className="about-text italic text-lg font-light text-justify p-6">
107109
{about.bottomTxt}
108110
</p>
109111
</div>
110-
111112
</div>
112113

113114
<div className="our-vision mb-28 ">
@@ -124,10 +125,10 @@ const AboutUs = () => {
124125
<h1 className="about-title rounded-md text-4xl text-center italic font-bold p-2 mb-8 bg-gradient-to-l from-sky-500">
125126
Our Vision
126127
</h1>
127-
<p className="about-text italic text-lg font-light text-justify">
128+
<p className="about-text italic text-lg font-light text-justify p-6">
128129
{vision.topTxt}
129130
</p>
130-
<p className="about-text italic text-lg font-light text-justify">
131+
<p className="about-text italic text-lg font-light text-justify p-6">
131132
{vision.bottomTxt}
132133
</p>
133134
</div>
@@ -142,23 +143,51 @@ const AboutUs = () => {
142143
</div>
143144
<div className="grid grid-cols-1 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3 ">
144145
{teamMembers.map((member, index) => (
145-
<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}>
146+
<Tilty
147+
key={index}
148+
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"
149+
glare
150+
scale={1.05}
151+
maxGlare={0.5}
152+
onMouseEnter={handlehover}
153+
onMouseLeave={hanleleave}
154+
>
146155
<div className="hovereffect absolute bg-black/50 w-full h-full flex justify-center flex-col items-center gap-3 scale-0">
147156
<div className="flex flex-col items-center">
148-
<p className="text-xl text-white font-bold">{member.memberName}</p>
157+
<p className="text-xl text-white font-bold">
158+
{member.memberName}
159+
</p>
149160
<p className="text-xl text-white font-thin mb-2">Member</p>
150161
</div>
151-
<p className="text-xl text-gray-400 font-semibold mb-2">Tech Stack</p>
162+
<p className="text-xl text-gray-400 font-semibold mb-2">
163+
Tech Stack
164+
</p>
152165
<div className="flex gap-8 justify-center items-center flex-wrap">
153-
<a href="https://google.com" target="_blank"><FontAwesomeIcon icon={faLinkedin} size="lg" className="text-white text-3xl" /></a>
154-
<a href="https://github.com" target="_blank"> <FontAwesomeIcon icon={faGithub} size="lg" className="text-white text-3xl" /></a>
166+
<a href="https://google.com" target="_blank">
167+
<FontAwesomeIcon
168+
icon={faLinkedin}
169+
size="lg"
170+
className="text-white text-3xl"
171+
/>
172+
</a>
173+
<a href="https://github.com" target="_blank">
174+
{" "}
175+
<FontAwesomeIcon
176+
icon={faGithub}
177+
size="lg"
178+
className="text-white text-3xl"
179+
/>
180+
</a>
155181
</div>
156182
</div>
157183
<div className="mb-8">
158-
<img className="object-center object-cover rounded-lg h-40 w-40" src={member.imgSrc} alt={member.alt} />
159-
</div>
160-
<div className="text-center">
184+
<img
185+
className="object-center object-cover rounded-lg h-40 w-40"
186+
src={member.imgSrc}
187+
alt={member.alt}
188+
/>
161189
</div>
190+
<div className="text-center"></div>
162191
</Tilty>
163192
))}
164193
</div>
@@ -207,4 +236,4 @@ const AboutUs = () => {
207236
);
208237
};
209238

210-
export default AboutUs;
239+
export default AboutUs;

0 commit comments

Comments
 (0)