Skip to content

Commit

Permalink
fixed carousel + added current contributors/alumni
Browse files Browse the repository at this point in the history
  • Loading branch information
@arhum-k
arhum-k committed Mar 10, 2024
1 parent 34d9af3 commit b0b4b8b
Show file tree
Hide file tree
Showing 6 changed files with 305 additions and 78 deletions.
8 changes: 6 additions & 2 deletions frontend/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,12 +20,16 @@
"airtable": "^0.12.2",
"bt": "^0.0.1",
"classnames": "^2.5.1",
"glider": "^0.1.0",
"iconoir-react": "^7.4.0",
"moment": "^2.30.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-glider": "^4.0.2",
"react-multi-carousel": "^2.8.4",
"react-router": "^6.21.3",
"react-router-dom": "^6.21.3"
"react-router-dom": "^6.21.3",
"swiper": "^11.0.7"
},
"devDependencies": {
"@trivago/prettier-plugin-sort-imports": "^4.3.0",
Expand All @@ -40,7 +44,7 @@
"eslint-plugin-react-refresh": "^0.4.5",
"g-sheets-api": "^2.2.0",
"prettier": "^3.2.4",
"sass": "^1.70.0",
"sass": "^1.71.1",
"typescript": "^5.3.3",
"vite": "^5.0.12"
}
Expand Down
51 changes: 28 additions & 23 deletions frontend/src/app/About/About.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,19 @@ $bt-light-grey: #A0A0A0;
.aboutOurTeam {
text-align: center;

margin-top: 48px;
margin-bottom: 48px;

h1 {
margin-bottom: 8px;
font-weight: bold;
}

p {
color: $bt-light-text;
line-height: 1.75;
width: 500px;
margin-bottom: 16px;

@media (max-width: 768px) {
width: 300px;
Expand Down Expand Up @@ -50,6 +59,12 @@ $bt-light-grey: #A0A0A0;
display: none;
transition: filter 1s ease, transform 1s ease;

>img {
max-width: 100%; // Ensure image does not exceed the container width
height: auto; // Maintain aspect ratio
object-fit: cover; // Cover the container fully
}

&.aboutCarouselActive {
display: block;
transform: translateX(0) scale(0.9);
Expand All @@ -58,10 +73,9 @@ $bt-light-grey: #A0A0A0;

&.aboutCarouselActivePrev {
@extend .aboutCarouselActive;
order: 0;
}

order: 0;

&.aboutCarouselActiveFirst {
@extend .aboutCarouselActive;
order: 1;
Expand All @@ -84,12 +98,12 @@ $bt-light-grey: #A0A0A0;
order: 4;
}

&.focus-in {
&.focusIn {
transform: scale(1);
filter: brightness(1);
}

&.focus-out {
&.focusOut {
transform: scale(0.9);
filter: brightness(0.35);
}
Expand All @@ -102,24 +116,19 @@ $bt-light-grey: #A0A0A0;
}

@media (min-width: 1024px) {
.aboutCarouselItem {
height: 400px;
width: 711px;
}
height: 400px;
width: 711px;
}

@media (min-width: 768px) and (max-width: 1023px) {
.aboutCarouselItem {
height: 300px;
width: 533px;
}

@media (min-width: 768px) and (max-width: 1023) {
height: 300px;
width: 533px;
}

@media (max-width: 767px) {
.aboutCarouselItem {
height: 200px;
width: 356px;
}
height: 200px;
width: 356px;
}
}

Expand Down Expand Up @@ -197,7 +206,7 @@ $bt-light-grey: #A0A0A0;

font-weight: bold;
font-size: 24px;
width: 100%;


@media (max-width: 768px) {
// Mobile
Expand All @@ -220,14 +229,10 @@ $bt-light-grey: #A0A0A0;
}
}






.value {
height: 100%;
padding: 0 20px;
width: 600px;

.valueContent {
height: 100%;
Expand Down
63 changes: 26 additions & 37 deletions frontend/src/app/About/AboutCarousel.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,45 +1,36 @@
import { useEffect, useRef, useState } from 'react';
import { NavArrowLeft, NavArrowRight } from 'iconoir-react';

import styles from "./About.module.scss"

//import doe from 'assets/img/about/group/doe.jpg';
import michaels from '/images/michaels.jpeg';
import retreat from '/images/retreat.png';
//import grace_janet from '/images/grace_janet.jpg';
import will from '/images/will.jpeg';
import jemma from '/images/jemma.jpeg';
import christina_janet from '/images/christina_janet.jpeg';
import retreat_silly from '/images/retreat_silly.jpg';
import zoom from '/images/zoom.png';


//import logo from "/favicon.png";




const images = [
{ img: retreat_silly, alt: 'retreat silly' },
{ img: zoom, alt: 'zoom' },
{ img: retreat, alt: 'retreat' },
{ img: christina_janet, alt: 'christina_janet' },
{ img: michaels, alt: 'michaels' },
{ img: will, alt: 'will' },
{ img: jemma, alt: 'jemma' }
];


import styles from './About.module.scss';

enum Sliding {
Still = 0,
Right = 1,
Left = 2
}

const images = [
{ img: retreat_silly, alt: 'retreat silly' },
/* { img: zoom, alt: 'zoom' }, */
/* { img: doe, alt: 'doe' }, */
/* { img: grace_janet, alt: 'grace_janet' }, */
/* { img: retreat, alt: 'retreat' },
{ img: christina_janet, alt: 'christina_janet' },
{ img: michaels, alt: 'michaels' },
{ img: will, alt: 'will' }, */
/* { img: jemma, alt: 'jemma' } */
];


const wrap = (val: number) => (val + images.length) % images.length;

Expand Down Expand Up @@ -78,52 +69,50 @@ const AboutCarousel = () => {
};

const getCarouselItemClass = (idx: number) => {
let classes = styles.aboutCarouselItem;
let classes = `${styles.aboutCarouselItem} `;
if (idx === wrap(shownImage - 2)) {
classes += styles.aboutCarouselActivePrev;
classes += `${styles.aboutCarouselActivePrev} `;;
} else if (idx === wrap(shownImage - 1)) {
classes += styles.aboutCarouselActiveFirst;
classes += `${styles.aboutCarouselActiveFirst} `;
if (sliding === Sliding.Right) {
classes += styles.focusIn;
classes += `${styles.focusIn} `;
}
} else if (idx === shownImage) {
classes += styles.aboutCarouselActiveSecond;
classes += `${styles.aboutCarouselActiveSecond} `;
if (sliding !== Sliding.Still) {
classes += styles.focusOut;
classes += `${styles.focusOut} `;
}
} else if (idx === wrap(shownImage + 1)) {
classes += styles.aboutCarouselActiveThird;
classes += `${styles.aboutCarouselActiveThird} `;
if (sliding === Sliding.Left) {
classes += styles.focusIn;
classes += `${styles.focusIn} `;;
}
} else if (idx === wrap(shownImage + 2)) {
classes += styles.aboutCarouselActiveNext;
classes += `${styles.aboutCarouselActiveNext} `;;
}
return classes;
return classes.trim();
};

const getCarouselClass = () => {
let classes = styles.aboutCarousel;
let classes = `${styles.aboutCarousel} `;;
if (sliding === Sliding.Left) {
classes += styles.aboutCarouselSlideLeft;
classes += `${styles.aboutCarouselSlideLeft} `;;
} else if (sliding === Sliding.Right) {
classes += styles.aboutCarouselSlideRight;
classes += `${styles.aboutCarouselSlideRight} `;;
}
console.log(classes)
return classes;

return classes.trim();
};

return (
<div className="group mb-5">
<div className={styles.group}>
<div
className={getCarouselClass()}
onTransitionEnd={(e) => {
if (e.target === e.currentTarget) triggerSwap();
}}
>
{images.map((imgVal, index) => (
<div key={imgVal.alt} className={getCarouselItemClass(index)}>
<div key={imgVal.alt} className={(getCarouselItemClass(index))}>
<img src={imgVal.img} alt={imgVal.alt} />
</div>
))}
Expand Down
101 changes: 101 additions & 0 deletions frontend/src/app/About/Contributors.module.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
$z-index-serious: 1;
$bt-grey-text: #535353;
$bt-light-text: #8A8A8A;
$bt-button-background: #8e9fc81c;

.currentContributors,
.pastContributors {
display: flex;
flex-direction: column;
margin-bottom: 48px;

h1 {
margin-bottom: 24px;
font-weight: bold;
}

>div {
display: grid;
grid-template-columns: repeat(4, 150px);
justify-content: center;
flex-wrap: wrap;
gap: 25px;

@media (max-width: 768px) {
grid-template-columns: repeat(2, 150px);
}
}
}

.pastContributors {
margin-bottom: 16px;
}

.contributorCard {
display: flex;
flex-direction: column;
align-items: flex-start;
margin-bottom: 25px;

// use width/height to enforce aspect ratio i guess
.headshot {

width: 150px;
height: 150px;

margin-bottom: 10px;

img {
width: 150px;
height: 150px;

position: absolute;
object-fit: cover;
object-position: 50% 20%;
border-radius: 3px;
}

.serious {
z-index: $z-index-serious;
transition: 0.2s;

&:hover {
opacity: 0;
}
}
}

.name {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;

width: 100%;
margin-bottom: 3px;

p {
font-weight: 500;
color: $bt-grey-text;
}

svg {
width: 22px;
height: 21px;
padding: 2px;
transition: 0.2s;
border-radius: 4px;
margin-bottom: 2px;

&:hover {
background-color: $bt-button-background;
}
}
}

.role {
font-size: 14px;
word-wrap: normal;
color: $bt-light-text;
}
}
Loading

0 comments on commit b0b4b8b

Please sign in to comment.