Skip to content

Commit

Permalink
Updated about section
Browse files Browse the repository at this point in the history
  • Loading branch information
@BodaNabeel
BodaNabeel committed Feb 21, 2024
1 parent 461f485 commit 0f64596
Show file tree
Hide file tree
Showing 3 changed files with 53 additions and 133 deletions.
163 changes: 41 additions & 122 deletions ui/src/components/Gallery.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,132 +8,51 @@ import Image from "next/image";
import React, { useEffect, useRef, useState } from "react";

export default function Gallery() {
const carouselRef = useRef(null);
const [activeIndex, setActiveIndex] = useState(0);

useEffect(() => {
const handleScroll = () => {
const carousel = carouselRef.current;
const scrollPosition = carousel.scrollTop;
const itemHeight = carousel.clientHeight;
const newIndex = Math.round(scrollPosition / itemHeight);
setActiveIndex(newIndex);
};
const carousel = carouselRef.current;
carousel.addEventListener("scroll", handleScroll);

return () => {
carousel.removeEventListener("scroll", handleScroll);
};
}, []);

return (
<>
<section className="hidden md:flex">
<div className="flex flex-col py-2 gap-2 self-center ">
{[1, 2, 3].map((index) => (
<button
key={index}
className={`btn btn-xs ${
activeIndex === index - 1 ? "bg-blue-500" : ""
}`}
>
{index}
</button>
))}
</div>

<section className=" space-y-16 md:space-y-32 my-14">
{TEAM.map((element, index) => (
<div
className="max-h-min md:h-[540px] carousel carousel-vertical "
ref={carouselRef}
className={`flex flex-col justify-evenly ${
index % 2 === 0 ? "md:flex-row" : "md:flex-row-reverse"
}`}
key={index}
>
{TEAM.map((element, index) => (
<div
key={index}
className="carousel-item h-full flex items-center md:justify-around flex-col md:flex-row"
>
<div className="w-[40%] flex items-center justify-center">
<Image
src={element.img}
className="rounded-2xl"
height={350}
width={350}
/>
</div>
<aside className="w-[40%] flex flex-col justify-between lg:py-16 py-4">
<div>
<h2 className="text-4xl mb-4 font-medium">{element.name}</h2>
<p className="mb-4 text-gray-600 md:leading-9 text-lg">
{element.description}
</p>
</div>
<div className="flex self-end gap-4 ">
<a
target="_blank"
href={element.github}
className="hover:text-primary-900 transition-all duration-300"
>
<IconBrandGithub />
</a>
<a
target="_blank"
href={element.linkedin}
className="hover:text-primary-900 transition-all duration-300"
>
<IconBrandLinkedin />
</a>
<a
target="_blank"
href={element.twitter}
className="hover:text-primary-900 transition-all duration-300"
>
<IconBrandTwitter />
</a>
</div>
</aside>
</div>
))}
</div>
</section>
<section className="flex flex-col items-center justify-center md:hidden">
{TEAM.map((element, index) => (
<div
key={index}
className="card card-compact w-96 bg-base-100 shadow-xl my-14"
>
<figure>
<img src={element.img} alt={`Picture of ${element.name}`} />
</figure>
<div className="card-body">
<h2 className="card-title">{element.name}</h2>
<p>{element.description}</p>
<div className="card-actions justify-end">
<a
target="_blank"
href={element.github}
className="hover:text-primary-900 transition-all duration-300"
>
<IconBrandGithub />
</a>
<a
target="_blank"
href={element.linkedin}
className="hover:text-primary-900 transition-all duration-300"
>
<IconBrandLinkedin />
</a>
<a
target="_blank"
href={element.twitter}
className="hover:text-primary-900 transition-all duration-300"
>
<IconBrandTwitter />
</a>
</div>
<img
src={element.img}
className="lg:w-[20%] md:w-[30%] aspect-w-4 aspect-h-3 rounded-2xl self-center"
alt={`Picture of ${element.name}`}
/>
<div className="md:w-[40%] mt-2 md:mt-0">
<h2 className="text-4xl mb-4 font-medium">{element.name}</h2>
<p className="mb-4 text-gray-600 md:leading-9 md:text-lg">
{element.description}
</p>
<div className="flex self-end gap-4">
<a
target="_blank"
href={element.github}
className="hover:text-primary-900 transition-all duration-300"
>
<IconBrandGithub />
</a>
<a
target="_blank"
href={element.linkedin}
className="hover:text-primary-900 transition-all duration-300"
>
<IconBrandLinkedin />
</a>
<a
target="_blank"
href={element.twitter}
className="hover:text-primary-900 transition-all duration-300"
>
<IconBrandTwitter />
</a>
</div>
</div>
))}
</section>
</>
</div>
))}
</section>
);
}
21 changes: 11 additions & 10 deletions ui/src/constants.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,31 +16,32 @@ export const SOURCE_LANGUAGES = [

export const TEAM = [
{
name: "Kurain Benoy",
img: "/kurain.jpg",
name: "Aldrin",
img: "/aldrin.jpeg",
description: `Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni
blanditiis voluptate repellendus unde, tempora perferendis
quisquam quidem, saepe at autem harum maxime sequi praesentium
aliquam dignissimos quasi nemo nam obcaecati ratione porro?
Doloremque commodi, facilis ratione amet qui recusandae? Illo
nostrum esse tenetur.`,
github: "https://github.com/kurianbenoy",
linkedin: "https://www.linkedin.com/in/kurianbenoy/",
twitter: "https://twitter.com/kurianbenoy2",
github: "https://github.com/aldrinjenson",
linkedin: "https://www.linkedin.com/in/aldrinjenson/",
twitter: "https://twitter.com/aldrinjenson",
},
{
name: "Aldrin",
img: "/aldrin.jpeg",
name: "Kurain Benoy",
img: "/kurain.jpg",
description: `Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni
blanditiis voluptate repellendus unde, tempora perferendis
quisquam quidem, saepe at autem harum maxime sequi praesentium
aliquam dignissimos quasi nemo nam obcaecati ratione porro?
Doloremque commodi, facilis ratione amet qui recusandae? Illo
nostrum esse tenetur.`,
github: "https://github.com/aldrinjenson",
linkedin: "https://www.linkedin.com/in/aldrinjenson/",
twitter: "https://twitter.com/aldrinjenson",
github: "https://github.com/kurianbenoy",
linkedin: "https://www.linkedin.com/in/kurianbenoy/",
twitter: "https://twitter.com/kurianbenoy2",
},

{
name: "Nabeel Boda",
img: "/nabeel.jpeg",
Expand Down
2 changes: 1 addition & 1 deletion ui/src/pages/about.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import Gallery from "@components/components/Gallery";

function About() {
return (
<main className="md:mx-28 mx-2">
<main className="lg:mx-28 mx-2">
<section className="mb-7 md:mt-14">
<h1 className="text-3xl font-medium">Meet Our Team</h1>
<p className="text-gray-400 md:w-[80ch] leading-7 mt-2">
Expand Down

0 comments on commit 0f64596

Please sign in to comment.