New apply page

README.md

@@ -1,8 +1,6 @@
-# CUBluePrint's New Website 
+# carletonblueprint.org
 
-Our new and updated website for CUBluePrint!
-
-You can find our live website available at: [link](enter link here thanks)
+Our new and updated website for CU Blueprint available at [carletonblueprint.org](https://carletonblueprint.org/)
 
 
 
@@ -34,24 +32,28 @@ The following is a visual map of how to navigate our website:
 
 ## How to run the website in Development
 
-To run the project in development mode on a local server, run the following command inside the project directory:
+First make sure you install [Node.js v16.20.2](https://nodejs.org/download/release/v16.20.2/). You can use nvm [(Node Version Manager)](https://github.com/nvm-sh/nvm) to switch between node versions.
+
+Next, to install dependencies run the following command inside the project directory ("cublueprint.github.io"):
+
+### `yarn install`
+
+Then to run the project in development mode on a local server, run the following command:
 
 ### `yarn start`
 
 This command will run the app on default [http://localhost:3000](http://localhost:3000). It can be accessed via a web browser. The page will reload if you make edits. You will also see any lint errors in the console.
 
-### `yarn test`
+## Deployment
 
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+todo: add more specific steps here...
 
 ### `yarn build`
 
 Builds the app for production to the `build` folder.\
 It correctly bundles React in production mode and optimizes the build for the best performance.
 
 The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
 
 See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
 
@@ -62,4 +64,5 @@ Credits for the website go to:
 * [Deen](https://www.linkedin.com/in/deenhaque)
 * [Meera](https://www.linkedin.com/in/meera-balsara/)
 * [Seneli](https://www.linkedin.com/in/seneliseneviratne/)
-* [Samee](https://www.linkedin.com/in/samee-shahood/)
+* [Samee](https://www.linkedin.com/in/samee-shahood/)
+* todo: add others too

package.json

@@ -16,22 +16,24 @@
     "@typeform/embed-react": "^2.22.0",
     "@types/jest": "^26.0.15",
     "@types/node": "^12.0.0",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
+    "@types/react": "^18.2.55",
+    "@types/react-dom": "^18.2.19",
     "@types/react-router-dom": "^5.1.8",
-    "@types/styled-components": "^5.1.14",
-    "react": "^17.0.2",
+    "@types/styled-components": "^5.1.34",
+    "@typescript-eslint/eslint-plugin": "^6.21.0",
+    "@typescript-eslint/parser": "^6.21.0",
+    "react": "^18.2.0",
     "react-app-rewired": "^2.2.1",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.2.0",
     "react-multi-carousel": "^2.8.4",
     "react-router-dom": "^6.8.1",
     "react-scripts": "4.0.3",
     "sass": "^1.63.6",
     "serve": "^14.2.0",
-    "styled-components": "^5.3.1",
+    "styled-components": "^6.1.8",
     "styled-components-carousel": "^0.2.0",
     "swiper": "^10.0.4",
-    "typescript": "^4.1.2",
+    "typescript": "^5.3.3",
     "web-vitals": "^1.0.1"
   },
   "scripts": {
@@ -42,12 +44,6 @@
     "deploy": "gh-pages -d build",
     "eject": "react-scripts eject"
   },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
   "browserslist": {
     "production": [
       ">0.2%",

src/components/Button.tsx

@@ -40,7 +40,7 @@ const BlueprintButton = styled.button`
     content: '>';
   }
   @media ${(props) => `${props.theme.viewport.hover}`} {
-    :hover {
+    &:hover {
       background: ${(props) => props.theme.colors.primaryBlue};
       color: ${(props) => props.theme.colors.lightBlue};
       transition: 0.2s ease-in-out;

src/components/ProjectsTextMultiCarousel.tsx

@@ -32,15 +32,16 @@ const ProjectsTextMultiCarousel = ({ content }: HomeBlockProps) => {
 
   useEffect(() => {
     const setBreakpoints = (options: Options): Options => {
-      if (content.slider!.length === 1){
+      const sliderLength = content.slider?.length;
+      if (sliderLength === 1){
         options["perPage"] = 1;
         setArrowRemoval(1);
-      } else if (content.slider!.length === 2){
+      } else if (sliderLength === 2){
         options["perPage"] = 2;
         setArrowRemoval(2);
       } else {
         options["perPage"] = 3;
-        if (content.slider!.length === 3){
+        if (sliderLength === 3){
           setArrowRemoval(3);
         }
       }
@@ -59,15 +60,15 @@ const ProjectsTextMultiCarousel = ({ content }: HomeBlockProps) => {
   return (
     <>
       <MobileProjects>
-        {content.slider!.map((project) => (
+        {content.slider?.map((project) => (
             <ProjectCard props={project} />
         ))}
       </MobileProjects>
 
       {renderCarousel &&
         <CustomSplide hasTrack={ false } tag={"section"} options={options}>
           <CustomSplideTrack>
-            {content.slider!.map((project) => (
+            {content.slider?.map((project) => (
               <SplideSlide>
                 <ProjectCard props={project} />
               </SplideSlide>

src/pages/apply/Apply.tsx

@@ -15,15 +15,15 @@ const Apply = () => {
         <SectionHeader>I am:</SectionHeader>
         <ApplicationTextContainer>
           <ApplicationText
-            title={'Non Profit'}
+            title={'Non Profit 123'}
             body={
               'Looking for a group of volunteer student developers to help with my software needs'
             }
             url={'apply/non-profit'} // SHOULD WE REPLACE DIRECTLY WITH A TYPEFORM/GOOGLE FORM LINK?
             linkText={'Learn more!'}
           />
           <ApplicationText
-            title={'Student'}
+            title={'Student 123'}
             body={
               'Looking to develop my skills and contribute to my community with like-minded peers'
             }

src/pages/apply/ApplyOptions.tsx

@@ -26,7 +26,7 @@ const Container = styled.div`
   border: 1px solid ${(props) => props.theme.colors.primaryBlue};
   border-radius: 10px;
   padding: 20px;
-  :hover {
+  &:hover {
     -webkit-box-shadow: 2px 5px 18px 0px
       ${(props) => props.theme.colors.primaryBlue}80;
     box-shadow: 2px 5px 18px 0px ${(props) => props.theme.colors.primaryBlue}80;

src/pages/teams/BackPersonCard.tsx

@@ -122,8 +122,8 @@ const Socials = styled.div`
 const SocialIcon = styled.img`
   width: 30px;
   height: 30px;
-  :hover,
-  :active {
+  &:hover,
+  &:active {
     cursor: pointer;
     transform: scale(1.1);
   }
@@ -144,7 +144,7 @@ const Badge = styled.span<BadgeProps>`
   font-size: 0.7rem;
   width: fit-content;
   margin: 0 5px 5px 0;
-  :hover {
+  &:hover {
     transition: 0.3s;
     background-color: ${(props) =>
       projectInfo[props.projectName].color || '#888'};

src/pages/teams/PersonCard.tsx

@@ -63,8 +63,8 @@ const CardFace = styled.div<CardFaceProps>`
   -webkit-box-shadow: -1px 4px 14px -2px rgba(51, 51, 51, 0.66);
   -moz-box-shadow: -1px 4px 14px -2px rgba(51, 51, 51, 0.66);
   background-color: white;
-  :hover,
-  :active {
+  &:hover,
+  &:active {
     cursor: pointer;
     box-shadow: -1px 4px 14px -2px rgba(57, 136, 255, 0.66);
     -webkit-box-shadow: -1px 4px 14px -2px rgba(57, 136, 255, 0.66);

src/partials/footer/Footer.tsx

@@ -65,7 +65,7 @@ const FooterTitle = styled(Link)`
   height: 35px;
   text-decoration: none;
   color: ${(props) => props.theme.colors.offWhite};
-  :hover {
+  &:hover {
     color: white;
   }
 `;
@@ -80,7 +80,7 @@ const SocialIcon = styled.img`
   margin-right: 10px;
   filter: invert(87%) sepia(70%) saturate(5510%) hue-rotate(177deg)
     brightness(106%) contrast(104%);
-  :hover {
+  &:hover {
     filter: invert(98%) sepia(6%) saturate(2%) hue-rotate(208deg)
       brightness(116%) contrast(100%);
   }