diff --git a/src/components/ApplicationCard.jsx b/src/components/apply/ApplicationCard.jsx similarity index 95% rename from src/components/ApplicationCard.jsx rename to src/components/apply/ApplicationCard.jsx index a6beede..002ece3 100644 --- a/src/components/ApplicationCard.jsx +++ b/src/components/apply/ApplicationCard.jsx @@ -1,5 +1,5 @@ -export default function ApplicationCard ({ +export default function ApplicationCard({ title, description, applicationLink, diff --git a/src/components/apply/LookForCard.jsx b/src/components/apply/LookForCard.jsx new file mode 100644 index 0000000..9fef0ac --- /dev/null +++ b/src/components/apply/LookForCard.jsx @@ -0,0 +1,25 @@ +import Col from 'react-bootstrap/Col'; + +export default function LookForCard({ + title, + description, + imgSrc +}) { + return ( + +
+ {title} +
+ {title} +
+

+ {description} +

+
+ + ); +} \ No newline at end of file diff --git a/src/content/apply.js b/src/content/apply.js new file mode 100644 index 0000000..cd5b0ef --- /dev/null +++ b/src/content/apply.js @@ -0,0 +1,54 @@ +export const content = { + roles: [ + { + title: 'Software Developer', + description: 'Work alongside other developers in a team to design, implement, and review code for a product. Ensure smooth feature integration and deliver exceptional solutions.', + applicationLink: 'https://forms.gle/nZR43PcqQNQbgtCg8' + }, + { + title: 'Product Manager', + description: 'Collaborate closely with clients to optimize their utilization of BUILD\'s services. Effectively convey client requirements to a team of developers.', + applicationLink: 'https://forms.gle/hjPdzXopGWTWJY4m8' + } + ], + lookingFor: [ + { + title: 'Teamwork', + description: 'Are you a team player? Do you work well with others and value a collaborative environment?', + img: '/img/illustrations/teamwork.svg' + }, + { + title: 'Passion', + description: 'Are you passionate about technology and its potential to make a positive impact?', + img: '/img/illustrations/passion.svg' + }, + { + title: 'Growth', + description: 'Do you challenge yourself and actively explore opportunities for improvement?', + img: '/img/illustrations/growth.svg' + }, + { + title: 'Culture', + description: 'Do you value empowering non-profits to achieve their missions through tech?', + img: '/img/illustrations/culture.svg' + } + ], + faqs: [ + { + question: 'How much of a time commitment is BUILD?', + answer: 'We expect members to contribute a minimum of 2 hours per week. We take it easy during exam weeks.' + }, + { + question: 'Do we get paid?', + answer: 'BUILD provides students with an opportunity to volunteer their time and skills to make a difference by help non-profits in the community.' + }, + { + question: 'How much experience do I need to join?', + answer: 'BUILD is open to all years and majors. We do expect software developers to be familiar with basic data structures and programming methodologies.' + }, + { + question: 'What is the application process like?', + answer: 'After filling out our application form, if selected for an interview, we\'ll reach out to schedule a single 40 minute virtual interview which will consist of a behavioral and technical portion.' + } + ] +} \ No newline at end of file diff --git a/src/hooks/useBreakpoint.js b/src/hooks/useBreakpoint.js new file mode 100644 index 0000000..7e188b9 --- /dev/null +++ b/src/hooks/useBreakpoint.js @@ -0,0 +1,64 @@ + +import { useState, useEffect } from 'react'; +import { debounce } from 'lodash'; + +/** + * @typedef {"xs" | "sm" | "md" | "lg" | "xl" | "xxl"} Breakpoint + */ + +/** + * @type {Record} + * @description enum for the different breakpoint sizes + * @example BreakpointSize.xs === 576 + */ +export const BreakpointSize = { + xs: 576, + sm: 768, + md: 992, + lg: 1200, + xl: 1440, + xxl: 9999, +}; + +/** + * @type {Record} + * @description enum for the different breakpoints + * @example Breakpoint.xs === 'xs' + */ +export const Breakpoint = { + xs: 'xs', + sm: 'sm', + md: 'md', + lg: 'lg', + xl: 'xl', + xxl: 'xxl', +}; + +/** + * @param {number} width + * @returns {Breakpoint} + */ +const resolveBreakpoint = (width) => { + const breakpoints = Object.entries(BreakpointSize); + const [breakpoint] = breakpoints.find(([_, value]) => width < value); + return breakpoint; +}; + +/** + * @returns {Breakpoint} + */ +export const useBreakpoint = () => { + const [size, setSize] = useState(() => resolveBreakpoint(window.innerWidth)); + + const setBreakpoint = () => { + setSize(resolveBreakpoint(window.innerWidth)); + }; + + useEffect(() => { + const calcInnerWidth = debounce(setBreakpoint, 200); + window.addEventListener('resize', calcInnerWidth); + return () => window.removeEventListener('resize', calcInnerWidth); + }, []); + + return size; +}; \ No newline at end of file diff --git a/src/pages/apply.js b/src/pages/apply.js index c7c302d..5e556c7 100644 --- a/src/pages/apply.js +++ b/src/pages/apply.js @@ -3,64 +3,56 @@ import Particles from 'react-particles-js'; import Container from 'react-bootstrap/Container'; import Row from 'react-bootstrap/Row'; import Col from 'react-bootstrap/Col'; -import ApplicationCard from '../components/ApplicationCard.jsx'; + +import ApplicationCard from '../components/apply/ApplicationCard.jsx'; +import LookForCard from '../components/apply/LookForCard.jsx'; import Footer from '../components/Footer'; import Navbar from '../components/Navbar'; +import { content } from '../content/apply'; +import { useBreakpoint, Breakpoint } from '../hooks/useBreakpoint'; + import ParticleJSConfig from '../styles/particlejs_config.json'; export default function apply() { const APPLICATIONS_OPEN = false; + const { roles, lookingFor, faqs } = content; + const currBreakpoint = useBreakpoint(); - const roles = [ - { - title: 'Software Developer', - description: 'Work alongside other developers in a team to design, implement, and review code for a product. Software engineers at BUILD ensure smooth feature integration and deliver exceptional solutions.', - applicationLink: 'https://forms.gle/nZR43PcqQNQbgtCg8' - }, - { - title: 'Product Manager', - description: 'Collaborate closely with clients to optimize their utilization of BUILD\'s services. Effectively convey client requirements to a team of developers. Product Managers at BUILD exhibit strong organizational and communication skills.', - applicationLink: 'https://forms.gle/hjPdzXopGWTWJY4m8' - } - ] + const navBarHeightPx = 80; + const jumbotronHeightPx = 500; return (
- + {/* Jumbotron */}
{/* Navbar */} - - - -
- - -

- Join our amazing team! -

- - - - -

- BUILD is on the lookout for passionate and talented individuals who are eager to make a difference in our community. Are you interested in applying what you have been learning in class to real-world projects in a dynamic team environment? If so, consider applying! -

- - -
- - - +
+
+

+ Join Our Amazing Team! +

+

+ BUILD is on the lookout for passionate and talented individuals who are eager to make a difference in our community. Are you interested in applying what you have been learning in class to real-world projects in a dynamic team environment? If so, consider applying! +

+
+
{/* Body */} - -
- + + +
+

Roles at BUILD @@ -70,151 +62,83 @@ export default function apply() {

- - { roles.map((role, index) => ( - -
- -
- +
+ {roles.map((role, index) => ( +
+ +
))} - +

-
- + +
+

- What we look for + What We Look For

- - -
- Teamwork -
Teamwork
-

- Are you a team player? Do you work well with others and value a collaborative environment? -

-
- - -
- Passion -
Passion
-

- Are you passionate about technology and its potential to make a positive impact? -

-
- - - - -
- Growth -
Growth
-

- Do you challenge yourself and actively explore opportunities for improvement? -

-
- - -
- Culture -
Culture
-

- Do you value empowering non-profits to achieve their missions - through tech? -

-
- + + + { lookingFor.map((weLookFor, index) => ( + + ))}
-
- + +
+ -

Frequently Asked Questions

+

+ Frequently Asked Questions +

-
-
- - -
How much of a time commitment is BUILD?
- - - - -

- We expect members to contribute a minimum of 2 hours per week. We take it easy during exam weeks. -

- - -
-
- - -
Do we get paid?
- - - - -

- BUILD provides students with an opportunity to volunteer their time and skills to make a difference by help non-profits in the community, therefore, we are unable to offer monetary compensation. -

- - -
-
- - -
How much experience do I need to join?
- - - - -

- BUILD is open to all years and majors. We do expect - software developers to be familiar with basic data structures and programming methodologies. -

- - -
-
- - -
What is the application process like?
- - - - -

- After filling out our application form, if selected for an interview, we'll reach out to schedule a single 40 minute virtual interview which will consist of a behavioral and technical portion. +

+ { faqs.map(({ question, answer }) => ( + + +
+ {question} +
+ + +

+ {answer}

- - -
+ + + ))}
diff --git a/src/public/img/logo/Pinia-Cheat-Sheet.pdf b/src/public/img/logo/Pinia-Cheat-Sheet.pdf new file mode 100644 index 0000000..f74d991 Binary files /dev/null and b/src/public/img/logo/Pinia-Cheat-Sheet.pdf differ diff --git a/src/public/img/logo/Vue-Essentials-Cheat-Sheet.pdf b/src/public/img/logo/Vue-Essentials-Cheat-Sheet.pdf new file mode 100644 index 0000000..e4ef1f6 Binary files /dev/null and b/src/public/img/logo/Vue-Essentials-Cheat-Sheet.pdf differ diff --git a/src/styles/style.scss b/src/styles/style.scss index 69ef157..feb8c00 100644 --- a/src/styles/style.scss +++ b/src/styles/style.scss @@ -685,10 +685,6 @@ a { background: linear-gradient(to right, #a30000, #f44708); } -.particlejs { - position: absolute; -} - // Projects page .year-title { font-weight: 800;