Skip to content

Commit

Permalink
fix: fixed team page
Browse files Browse the repository at this point in the history
  • Loading branch information
@akshatmittal61
akshatmittal61 committed Sep 22, 2023
1 parent dd7204c commit 380044c
Show file tree
Hide file tree
Showing 3 changed files with 141 additions and 121 deletions.
76 changes: 37 additions & 39 deletions components/Team/Card/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { IPerson } from "@/types/people";
import TeamCardSocial from "./Social";
import { stylesConfig } from "@/utils/functions";
import styles from "./styles.module.scss";
import Typography from "@/library/Typography";

const classes = stylesConfig(styles, "team-card");

Expand All @@ -18,47 +19,44 @@ const TeamCard: React.FC<TeamCardProps> = ({
email,
}) => {
return (
<div className={classes("")}>
<div
className={classes("-front")}
style={{
backgroundImage: `
linear-gradient(
to bottom,
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0.8)
), url(${image})
`,
}}
<div
className={classes("")}
style={{
backgroundImage: `url(${image})`,
}}
>
<Typography
type="heading"
variant="title-2"
className={classes("-cover-name")}
data-aos="fade-up"
>
<span className={classes("-front-name")} data-aos="fade-up">
{name}
</Typography>
<div className={classes("-content")}>
<Typography
type="heading"
variant="title-2"
className={classes("-name")}
data-aos="fade-up"
>
{name}
</span>
</div>
<div
className={classes("-back")}
style={{
backgroundImage: `linear-gradient(
105deg,
rgba(0, 0, 0, 0.9) 0%,
rgba(0, 0, 0, 0.9) 60%,
transparent 50%
),
url(${image})`,
}}
>
<div className={classes("-back-content")}>
<h3 className={classes("-name")}>{name}</h3>
<p className={classes("-bio")}>{bio}</p>
<div className={classes("-socials")}>
<TeamCardSocial
twitter={twitter}
instagram={instagram}
linkedin={linkedin}
email={email}
/>
</div>
</Typography>
<Typography
type="body"
variant="large"
className={classes("-bio")}
data-aos="fade-up"
>
{bio}
</Typography>
<div className={classes("-socials")} data-aos="fade-up">
<TeamCardSocial
twitter={twitter}
instagram={instagram}
linkedin={linkedin}
email={email}
/>
</div>
</div>
</div>
Expand Down
125 changes: 54 additions & 71 deletions components/Team/Card/styles.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,92 +3,48 @@

.team-card {
width: 100%;
height: 350px;
height: 500px;
position: relative;
perspective: 1000px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border-radius: 32px 0 32px 0;
overflow: hidden;
box-shadow: var(--shadow-elevation-8dp);
margin: 16px;
cursor: crosshair;

@include responsive(phone) {
height: 200px;
margin: 24px;
}

&:hover &-back {
transform: rotateX(0);
}

&:hover &-front {
transform: rotateX(-180deg);
}

&-front,
&-back {
position: absolute;
top: 0;
left: 0;
&-content {
width: 100%;
height: 100%;
backface-visibility: hidden;
overflow: hidden;
box-shadow: var(--shadow-elevation-4dp);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}

&-front {
display: flex;
justify-content: flex-start;
align-items: flex-end;
padding: 48px;
justify-content: flex-end;
align-items: flex-start;
flex-direction: column;
gap: 16px;
padding: 32px;
transform: translateY(100%);
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0) 0%,
rgba(0, 0, 0, 0.8) 50%
);

@include responsive(phone) {
transform: rotateX(-180deg);
}

&-name {
@include font(
var(--font-red-hat-display),
36px,
500,
150%,
var(--theme-white)
transform: translateY(0);
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0) 0%,
rgba(0, 0, 0, 0.8) 75%
);

@include responsive(phone) {
font-size: 24px;
}
}
}

&-back {
width: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
gap: 24px;
padding: 24px;
transform: rotateX(180deg);
background-color: var(--theme-indigo);

@include responsive(phone) {
transform: rotateX(0);
}

&-content {
width: 60%;
height: 100%;
display: flex;
justify-content: center;
align-items: flex-start;
flex-direction: column;
gap: 16px;
}
}

&:hover &-back-content {
animation: fade-right-in 0.5s ease-in-out forwards;
}

&-cover-name,
&-name {
@include font(
var(--font-red-hat-display),
Expand Down Expand Up @@ -122,6 +78,33 @@
}
}

&-cover-name {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 32px;
z-index: 5;
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0) 0%,
rgba(0, 0, 0, 0.8) 100%
);

@include responsive(phone) {
display: none;
}
}

&:hover &-cover-name {
opacity: 0;
}

&:hover &-content {
transform: translateY(0);
animation: fade-in 0.5s ease-in-out;
}

&-socials {
width: 100%;
display: flex;
Expand Down
61 changes: 50 additions & 11 deletions data/people.json
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,17 @@
[
{
"Timestamp": "2023/09/16 8:15:44 PM GMT+5:30",
"Username": "19137@iiitu.ac.in",
"Full Name": "Praveen Kumar",
"Your Email": "praveenkr.564@gmail.com",
"Phone No. (Call + WhatsApp)": "09634049244",
"Short Bio (Bob the builder, building the web)": "SDE @ Quizizz | GSOC 2023 | GDSC Lead | Building Codú | Contributor @ Metacall | ex- SDE Intern @HindustanTimes",
"Designation in Organising Committee": "Alumni Member;Development Team",
"Instagram Profile URL": "https://instagram.com/pkspyder007",
"Twitter Profile URL": "https://twitter.com/pkspyder007",
"LinkedIn Profile URL": "https://linkedin.com/in/pkspyder007",
"Profile Photo(preferably focused on face)": "https://drive.google.com/u/0/open?usp=forms_web&id=16zriGe-bSCoBb8sS4_Yjfk0BiuIgutni"
},
{
"Timestamp": "2023/09/09 12:44:33 PM GMT+5:30",
"Username": "20107@iiitu.ac.in",
Expand Down Expand Up @@ -286,16 +299,42 @@
"Profile Photo(preferably focused on face)": "https://drive.google.com/u/0/open?usp=forms_web&id=1bc2qu8Oprf_oEQ1U8SAPZfYXnkWbs8NK"
},
{
"Timestamp": "2023/09/16 8:15:44 PM GMT+5:30",
"Username": "19137@iiitu.ac.in",
"Full Name": "Praveen Kumar",
"Your Email": "praveenkr.564@gmail.com",
"Phone No. (Call + WhatsApp)": "09634049244",
"Short Bio (Bob the builder, building the web)": "SDE @ Quizizz | GSOC 2023 | GDSC Lead | Building Codú | Contributor @ Metacall | ex- SDE Intern @HindustanTimes",
"Designation in Organising Committee": "Student Coordinator;Alumni Member;Development Team",
"Instagram Profile URL": "https://instagram.com/pkspyder007",
"Twitter Profile URL": "https://twitter.com/pkspyder007",
"LinkedIn Profile URL": "https://linkedin.com/in/pkspyder007",
"Profile Photo(preferably focused on face)": "https://drive.google.com/u/0/open?usp=forms_web&id=16zriGe-bSCoBb8sS4_Yjfk0BiuIgutni"
"Timestamp": "2023/09/18 1:20:52 PM GMT+5:30",
"Username": "20216@iiitu.ac.in",
"Full Name": "Ketan Srivastava",
"Your Email": "Ketan.srivastava2010@gmail.com",
"Phone No. (Call + WhatsApp)": 9958633580,
"Short Bio (Bob the builder, building the web)": "",
"Designation in Organising Committee": "Student Coordinator",
"Instagram Profile URL": "https://instagram.com/ketan_sri22?igshid=OGQ5ZDc2ODk2ZA==",
"Twitter Profile URL": "",
"LinkedIn Profile URL": "https://www.linkedin.com/in/ketan-srivastava22",
"Profile Photo(preferably focused on face)": "https://drive.google.com/u/0/open?usp=forms_web&id=1UvMHjcXME8myBn4N_y41AA_0VSRG8kLf"
},
{
"Timestamp": "2023/09/18 2:20:23 PM GMT+5:30",
"Username": "20238@iiitu.ac.in",
"Full Name": "Sajal Ruhela",
"Your Email": "20238@iiitu.ac.in",
"Phone No. (Call + WhatsApp)": 8077948591,
"Short Bio (Bob the builder, building the web)": "Android Developer",
"Designation in Organising Committee": "Student Coordinator",
"Instagram Profile URL": "",
"Twitter Profile URL": "",
"LinkedIn Profile URL": "https://www.linkedin.com/in/sajal-ruhela",
"Profile Photo(preferably focused on face)": "https://drive.google.com/u/0/open?usp=forms_web&id=1w-w_mCjkkXOnaL81UH1rI6pQGK1DpKNK"
},
{
"Timestamp": "2023/09/18 4:58:15 PM GMT+5:30",
"Username": "20226@iiitu.ac.in",
"Full Name": "Nimish Tiwari",
"Your Email": "20226@iiitu.ac.in",
"Phone No. (Call + WhatsApp)": 9665499462,
"Short Bio (Bob the builder, building the web)": "Generative AI enthusiastic",
"Designation in Organising Committee": "Student Coordinator",
"Instagram Profile URL": "",
"Twitter Profile URL": "",
"LinkedIn Profile URL": "https://www.linkedin.com/in/nimish-tiwari-5b4091229",
"Profile Photo(preferably focused on face)": "https://drive.google.com/u/0/open?usp=forms_web&id=1UVYh3d8NvB43YZ8CP_oCG79j9lYBXPtq"
}
]

0 comments on commit 380044c

Please sign in to comment.