Merge pull request #81 from build-umass/template-cleanup

src/components/ApplicationCard.jsx → src/components/apply/ApplicationCard.jsx

@@ -1,5 +1,5 @@
 
-export default function ApplicationCard ({
+export default function ApplicationCard({
   title,
   description,
   applicationLink,

src/components/apply/LookForCard.jsx

@@ -0,0 +1,25 @@
+import Col from 'react-bootstrap/Col';
+
+export default function LookForCard({
+  title,
+  description,
+  imgSrc
+}) {
+  return (
+    <Col md={4}>
+      <div className="center-horizontal">
+        <img
+          src={imgSrc}
+          alt={title}
+          className="thumbnail"
+        />
+        <h5>
+          {title}
+        </h5>
+        <p className="light">
+          {description}
+        </p>
+      </div>
+    </Col>
+  );
+}

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.'
+    }
+  ]
+}

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<Breakpoint, number>}
+ * @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<Breakpoint, string>}
+ * @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;
+};