diff --git a/src/assets/pics/Leads/Brian_face.png b/src/assets/pics/Leads/Brian_face.png new file mode 100644 index 0000000..654269c Binary files /dev/null and b/src/assets/pics/Leads/Brian_face.png differ diff --git a/src/assets/pics/Leads/Brians_face.jpg b/src/assets/pics/Leads/Brians_face.jpg deleted file mode 100644 index 1c9c688..0000000 Binary files a/src/assets/pics/Leads/Brians_face.jpg and /dev/null differ diff --git a/src/assets/pics/Leads/Javi_face.png b/src/assets/pics/Leads/Javi_face.png new file mode 100644 index 0000000..f61c6ef Binary files /dev/null and b/src/assets/pics/Leads/Javi_face.png differ diff --git a/src/pages/meet-the-leads/MeetTheLeads.tsx b/src/pages/meet-the-leads/MeetTheLeads.tsx index ffbb842..859d260 100644 --- a/src/pages/meet-the-leads/MeetTheLeads.tsx +++ b/src/pages/meet-the-leads/MeetTheLeads.tsx @@ -13,10 +13,11 @@ import Styles from './MeetTheLeadsStyles' import TanishkasFace from '../../assets/pics/Leads/Tanishkas_face.jpg' import RoccosFace from '../../assets/pics/Leads/roccos_face.jpg' import MalinsFace from '../../assets/pics/Leads/Malins_face.jpg' -import BriansFace from '../../assets/pics/Leads/Brians_face.jpg' +import BriansFace from '../../assets/pics/Leads/Brian_face.png' import AlessiasFace from '../../assets/pics/Leads/Alessia_headshot.png' import JonahsFace from '../../assets/pics/Leads/Jonah_Face.jpg' import JadensFace from '../../assets/pics/Leads/Jadens_face.jpg' +import JavisFace from '../../assets/pics/Leads/Javi_face.png' // a separator is needed for some reason, troubleshoot this or create a very small section div or style this like the robotics page //use robotics format //bakround is implemented but sections are not made to be compatible, change to gallery sections @@ -93,6 +94,15 @@ const MeetTheLeads = (): React.ReactElement => {
+
+ +
+
+

Meet our Chief of Marketing & Development!

+

+ Javier Price-Butler +

+
diff --git a/src/pages/meet-the-leads/MeetTheLeadsStyles.tsx b/src/pages/meet-the-leads/MeetTheLeadsStyles.tsx index 1089268..f368b49 100644 --- a/src/pages/meet-the-leads/MeetTheLeadsStyles.tsx +++ b/src/pages/meet-the-leads/MeetTheLeadsStyles.tsx @@ -8,7 +8,7 @@ export default class MeetTheLeadsStyles { grid-template-columns: 100%; grid-template-rows: calc(var(--vh) * .2) /* Intro heading */ - calc(var(--vh) * 2.39) /* Outreach gallery and photo gallery */ + calc(var(--vh) * 0.3904 * 7) /* Outreach gallery and photo gallery */ max(calc(var(--vh) * .15), 100px); /* Contact info */ justify-content: center; align-content: center; @@ -17,15 +17,12 @@ export default class MeetTheLeadsStyles { display: grid; grid-template-columns: 100%; grid-template-rows: - calc(var(--vh) * .2) /* Intro heading */ - calc(var(--vh) * 2.65) /* Outreach gallery and photo gallery */ - max(calc(var(--vh) * .15), 100px); /* Contact info */ - justify-content: center; - align-content: center; - + calc(var(--vh) * .2) /* Intro heading */ + calc(var(--vh) * 0.4282 * 7) /* Outreach gallery and photo gallery */ + max(calc(var(--vh) * .15), 100px); /* Contact info */ + justify-content: center; + align-content: center; } - - ` static readonly TitleContainer = styled.div` @@ -45,7 +42,7 @@ export default class MeetTheLeadsStyles { //grid of leads text and img squares display: grid; grid-template-columns: repeat(2 , minmax(0, 1fr)); - grid-template-rows: calc(var(--vh) * .4) repeat(6, minmax(0, 1fr)); + grid-template-rows: calc(var(--vh) * .4) repeat(7, minmax(0, 1fr)); row-gap: 20px; column-gap: 4%; justify-items: center; @@ -53,12 +50,26 @@ export default class MeetTheLeadsStyles { text-align: center; margin-top: auto; - & > h2 { + & p { + font-size: calc(var(--vh) * 0.023); + margin-top: 50px; + @media (max-width: 718px) { + font-size: calc(var(--vh) * 0.023); + margin-top: 10px; + } + } + + + & h2 { ${FONT_FAMILY.TITLE} + font-size: calc(var(--vh) * 0.042); grid-column-start: 1; grid-column-end: 3; text-align: center; - margin: 0; + @media (max-width: 718px) { + font-size: calc(var(--vh) * 0.042); + } + margin-bottom: 10px; } & > .Leads-img-container { @@ -88,6 +99,7 @@ export default class MeetTheLeadsStyles { padding-right: 20%; } + ` static readonly SpaceBackground = styled.div` diff --git a/src/pages/robotic-mining/RoboticMiningStyles.tsx b/src/pages/robotic-mining/RoboticMiningStyles.tsx index 805ae6b..d50e48a 100644 --- a/src/pages/robotic-mining/RoboticMiningStyles.tsx +++ b/src/pages/robotic-mining/RoboticMiningStyles.tsx @@ -8,11 +8,12 @@ export const MEET_THE_TEAM: GalleryImage[] = [ { image: RMC_TEAM[0], title: 'Dr. John Helferty', description: 'Head Advisor' }, { image: RMC_TEAM[1], title: 'Rocco Gruzman', description: 'Robotic\'s President' }, { image: RMC_TEAM[2], title: 'Malin Kussi', description: 'Vice President' }, - { image: RMC_TEAM[3], title: 'Jaden Howard', description: 'Electrical Lead' }, - { image: RMC_TEAM[4], title: 'Alessia Smith', description: 'Mechanical Lead' }, - { image: RMC_TEAM[5], title: 'Brian Ervin', description: 'Programming Lead' }, - { image: RMC_TEAM[6], title: 'Tanishka Shah', description: 'Project Manager' }, - { image: RMC_TEAM[7], title: 'Jonah Tesler', description: 'Shop Manager' } + { image: RMC_TEAM[3], title: 'Javier Price-Butler', description: 'Chief of Development' }, + { image: RMC_TEAM[4], title: 'Jaden Howard', description: 'Electrical Lead' }, + { image: RMC_TEAM[5], title: 'Alessia Smith', description: 'Mechanical Lead' }, + { image: RMC_TEAM[6], title: 'Brian Ervin', description: 'Programming Lead' }, + { image: RMC_TEAM[7], title: 'Tanishka Shah', description: 'Project Manager' }, + { image: RMC_TEAM[8], title: 'Jonah Tesler', description: 'Shop Manager' } ] export default class RoboticMiningStyles { diff --git a/src/tools/Constants.tsx b/src/tools/Constants.tsx index 2cbbc16..aa1ff8a 100644 --- a/src/tools/Constants.tsx +++ b/src/tools/Constants.tsx @@ -34,9 +34,10 @@ export const RMC_TEAM = [ require('../assets/pics/team/john-helferty.jpg'), require('../assets/pics/Leads/roccos_face.jpg'), require('../assets/pics/Leads/Malins_face.jpg'), + require('../assets/pics/Leads/Javi_face.png'), require('../assets/pics/Leads/Jadens_face.jpg'), require('../assets/pics/Leads/Alessia_headshot.png'), - require('../assets/pics/Leads/Brians_face.jpg'), + require('../assets/pics/Leads/Brian_face.png'), require('../assets/pics/Leads/Tanishkas_face.jpg'), require('../assets/pics/Leads/Jonah_Face.jpg') ]