From 380044c80557fb522300f8d0375d98e0e7e0fc1c Mon Sep 17 00:00:00 2001 From: Akshat Mittal Date: Fri, 22 Sep 2023 15:12:45 +0530 Subject: [PATCH] fix: fixed team page --- components/Team/Card/index.tsx | 76 +++++++------- components/Team/Card/styles.module.scss | 125 ++++++++++-------------- data/people.json | 61 +++++++++--- 3 files changed, 141 insertions(+), 121 deletions(-) diff --git a/components/Team/Card/index.tsx b/components/Team/Card/index.tsx index 0cbbea2..529942c 100644 --- a/components/Team/Card/index.tsx +++ b/components/Team/Card/index.tsx @@ -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"); @@ -18,47 +19,44 @@ const TeamCard: React.FC = ({ email, }) => { return ( -
-
+ - + {name} + +
+ {name} - -
-
-
-

{name}

-

{bio}

-
- -
+ + + {bio} + +
+
diff --git a/components/Team/Card/styles.module.scss b/components/Team/Card/styles.module.scss index 352aac3..0dc3c3b 100644 --- a/components/Team/Card/styles.module.scss +++ b/components/Team/Card/styles.module.scss @@ -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), @@ -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; diff --git a/data/people.json b/data/people.json index ec8ca08..740c302 100644 --- a/data/people.json +++ b/data/people.json @@ -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", @@ -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" } ]