Skip to content

Commit 5e15a40

Browse files
shansitadsshansitads
committed
team tab css reorganization
1 parent 77ef373 commit 5e15a40

File tree

4 files changed

+138
-140
lines changed

4 files changed

+138
-140
lines changed

‎src/components/Team/Team.js‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,19 @@ import { Container, Row, Col } from 'react-bootstrap';
33
import Particle from '../Particle';
44
import TeamCard from './TeamCard';
55
import teamData from './teamData';
6+
import './team.css';
67

78
const TeamSection = ({ title, members, showDivider = false }) => (
89
<div className="team-section-container">
910
{showDivider && <hr className="team-divider" />}
1011
<h2 className="team-category-heading purple mb-4">{title}</h2>
1112
<Row className="team-card-row">
1213
{members.map((member, index) => (
13-
<Col
14-
className="team-card-col col-lg-5-cols"
15-
md={3}
16-
sm={6}
17-
xs={12}
14+
<Col
15+
className="team-card-col col-lg-5-cols"
16+
md={3}
17+
sm={6}
18+
xs={12}
1819
key={`${member.title}-${index}`}
1920
>
2021
<TeamCard

‎src/components/Team/TeamCard.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from "react";
22
import Card from "react-bootstrap/Card";
33
import { BsGithub } from "react-icons/bs";
4+
import './team.css';
45

56
function TeamCard(props) {
67
const hasGitHub = props.ghLink && props.ghLink.trim() !== "" && props.ghLink !== "https://github.com";

‎src/components/Team/team.css‎

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
.team-section {
2+
position: relative !important;
3+
padding-top: 150px !important;
4+
padding-bottom: 30px !important;
5+
background-image: var(--section-background-color) !important;
6+
}
7+
8+
.team-heading {
9+
color: white !important;
10+
font-size: 2.3em !important;
11+
font-weight: 500 !important;
12+
padding-top: 10px !important;
13+
margin-bottom: 40px !important;
14+
}
15+
16+
.team-category-heading {
17+
color: var(--imp-text-color) !important;
18+
font-size: 1.8em !important;
19+
font-weight: 500 !important;
20+
margin-top: 40px !important;
21+
margin-bottom: 30px !important;
22+
text-align: center !important;
23+
padding-bottom: 10px !important;
24+
border-bottom: 2px solid rgba(255, 255, 255, 0.1) !important;
25+
}
26+
27+
.team-card {
28+
padding: 20px !important;
29+
height: 100% !important;
30+
}
31+
32+
.team-card-view {
33+
color: white !important;
34+
background-color: transparent !important;
35+
opacity: 1 !important;
36+
transition: all 0.3s ease 0s !important;
37+
height: 100% !important;
38+
border: none !important;
39+
display: flex !important;
40+
flex-direction: column !important;
41+
align-items: center !important;
42+
margin: 0;
43+
}
44+
45+
.team-card-title {
46+
font-size: 1.3em !important;
47+
font-weight: 600 !important;
48+
margin-top: 15px !important;
49+
margin-bottom: 5px !important;
50+
color: var(--imp-text-color) !important;
51+
text-align: center !important;
52+
}
53+
54+
.team-card-description {
55+
text-align: center !important;
56+
font-size: 1.1em !important;
57+
line-height: 1.6 !important;
58+
margin-bottom: 10px !important;
59+
color: #e6e6e6 !important;
60+
}
61+
62+
.team-card-row {
63+
justify-content: center;
64+
padding-bottom: 10px;
65+
}
66+
67+
.team-card-col {
68+
margin-left: 20px;
69+
margin-right: 20px;
70+
padding: 15px;
71+
}
72+
73+
.teamcard-img-top {
74+
padding: 10px !important;
75+
opacity: 1 !important;
76+
border-radius: 50% !important;
77+
width: 250px !important;
78+
/* Increased from 180px */
79+
height: 250px !important;
80+
/* Increased from 180px */
81+
object-fit: cover !important;
82+
display: block !important;
83+
margin: 0 auto !important;
84+
transition: transform 0.3s ease !important;
85+
}
86+
87+
.team-card-view:hover .teamcard-img-top {
88+
transform: scale(1.05) !important;
89+
}
90+
91+
.github-link {
92+
display: inline-block;
93+
margin-left: 10px;
94+
color: var(--imp-text-color) !important;
95+
transition: color 0.3s ease !important;
96+
}
97+
98+
.github-link:hover {
99+
color: #b19cd9 !important;
100+
}
101+
102+
.github-icon {
103+
font-size: 1.2em;
104+
vertical-align: middle;
105+
}
106+
107+
/* Media queries for responsive image sizes */
108+
@media (max-width: 768px) {
109+
.teamcard-img-top {
110+
width: 200px !important;
111+
height: 200px !important;
112+
}
113+
}
114+
115+
@media (max-width: 576px) {
116+
.teamcard-img-top {
117+
width: 180px !important;
118+
height: 180px !important;
119+
}
120+
}
121+
122+
@media (min-width: 992px) {
123+
.col-lg-5-cols {
124+
flex: 0 0 20%;
125+
max-width: 20%;
126+
}
127+
}

‎src/style.css‎

Lines changed: 4 additions & 135 deletions
Original file line numberDiff line numberDiff line change
@@ -539,141 +539,10 @@ section {
539539

540540
}
541541

542-
/* --------- */
543-
/* Team */
544-
/* --------- */
545-
.team-section {
546-
position: relative !important;
547-
padding-top: 150px !important;
548-
padding-bottom: 30px !important;
549-
background-image: var(--section-background-color) !important;
550-
}
551-
552-
.team-container {
553-
padding: 0 25px;
554-
}
555-
556-
.team-heading {
557-
color: white !important;
558-
font-size: 2.3em !important;
559-
font-weight: 500 !important;
560-
padding-top: 10px !important;
561-
margin-bottom: 40px !important;
562-
}
563-
564-
.team-category-heading {
565-
color: var(--imp-text-color) !important;
566-
font-size: 1.8em !important;
567-
font-weight: 500 !important;
568-
margin-top: 40px !important;
569-
margin-bottom: 30px !important;
570-
text-align: center !important;
571-
padding-bottom: 10px !important;
572-
border-bottom: 2px solid rgba(255, 255, 255, 0.1) !important;
573-
}
574-
575-
.team-card {
576-
padding: 20px !important;
577-
height: 100% !important;
578-
}
579-
580-
.team-card-view {
581-
color: white !important;
582-
background-color: transparent !important;
583-
opacity: 1 !important;
584-
transition: all 0.3s ease 0s !important;
585-
height: 100% !important;
586-
border: none !important;
587-
display: flex !important;
588-
flex-direction: column !important;
589-
align-items: center !important;
590-
margin: 0;
591-
}
592-
593-
.team-card-title {
594-
font-size: 1.3em !important;
595-
font-weight: 600 !important;
596-
margin-top: 15px !important;
597-
margin-bottom: 5px !important;
598-
color: var(--imp-text-color) !important;
599-
text-align: center !important;
600-
}
601-
602-
.team-card-description {
603-
text-align: center !important;
604-
font-size: 1.1em !important;
605-
line-height: 1.6 !important;
606-
margin-bottom: 10px !important;
607-
color: #e6e6e6 !important;
608-
}
609-
610-
.team-card-row {
611-
justify-content: center;
612-
padding-bottom: 10px;
613-
}
614-
615-
.team-card-col {
616-
margin-left: 20px;
617-
margin-right: 20px;
618-
padding: 15px;
619-
}
620-
621-
.teamcard-img-top {
622-
padding: 10px !important;
623-
opacity: 1 !important;
624-
border-radius: 50% !important;
625-
width: 250px !important;
626-
/* Increased from 180px */
627-
height: 250px !important;
628-
/* Increased from 180px */
629-
object-fit: cover !important;
630-
display: block !important;
631-
margin: 0 auto !important;
632-
transition: transform 0.3s ease !important;
633-
}
634-
635-
.team-card-view:hover .teamcard-img-top {
636-
transform: scale(1.05) !important;
637-
}
638-
639-
.github-link {
640-
display: inline-block;
641-
margin-left: 10px;
642-
color: var(--imp-text-color) !important;
643-
transition: color 0.3s ease !important;
644-
}
645-
646-
.github-link:hover {
647-
color: #b19cd9 !important;
648-
}
649-
650-
.github-icon {
651-
font-size: 1.2em;
652-
vertical-align: middle;
653-
}
654-
655-
/* Media queries for responsive image sizes */
656-
@media (max-width: 768px) {
657-
.teamcard-img-top {
658-
width: 200px !important;
659-
height: 200px !important;
660-
}
661-
}
662-
663-
@media (max-width: 576px) {
664-
.teamcard-img-top {
665-
width: 180px !important;
666-
height: 180px !important;
667-
}
668-
}
669-
670-
/* Add this to your existing CSS */
671-
@media (min-width: 992px) {
672-
.col-lg-5-cols {
673-
flex: 0 0 20%;
674-
max-width: 20%;
675-
}
676-
}
542+
/* ---------
543+
Team section
544+
All styles specific to components in the team page are in team.css
545+
--------- */
677546

678547
/* --------- */
679548
/* Project Pitch */

0 commit comments

Comments
 (0)