About us fix (#54)

* added balloon, added borders to slides * add: breakpoints * enforce use of double quotes and update size of balloon * implement balloon animation * lint --------- Co-authored-by: Andrew Li <[email protected]>
NUWildHacks · Jan 18, 2025 · 7d05efb · 7d05efb
1 parent c386087
commit 7d05efb
Show file tree

Hide file tree

Showing 8 changed files with 632 additions and 885 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,17 @@
+{
+  "arrowParens": "avoid",
+  "bracketSpacing": true,
+  "htmlWhitespaceSensitivity": "css",
+  "insertPragma": false,
+  "jsxBracketSameLine": false,
+  "jsxSingleQuote": false,
+  "printWidth": 80,
+  "proseWrap": "always",
+  "quoteProps": "as-needed",
+  "requirePragma": false,
+  "semi": true,
+  "singleQuote": false,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "useTabs": false
+}
diff --git a/bun.lockb b/bun.lockb
diff --git a/eslint.config.js b/eslint.config.js
diff --git a/package.json b/package.json
@@ -32,9 +32,6 @@
     "@types/react": "^18.3.10",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.2",
-    "eslint": "^9.11.1",
-    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
-    "eslint-plugin-react-refresh": "^0.4.12",
     "globals": "^15.9.0",
     "prettier": "^3.3.3",
     "typescript": "^5.5.3",

diff --git a/src/components/AboutUs/AboutUs.scss b/src/components/AboutUs/AboutUs.scss
@@ -1,4 +1,5 @@
 @use "../../shared/colors";
+@use "../../shared/breakpoints";
 
 .sour-gummy-heading {
   font-family: "Sour Gummy", sans-serif;
@@ -7,18 +8,62 @@
 }
 
 .about_us__wrapper {
+  padding: 8% 0;
   background-color: colors.$global-dark-green;
   color: colors.$global-light;
-  padding: 1rem;
 
-  .about_us__header {
-    font-size: 2rem;
-    margin-bottom: 1rem;
-    color: colors.$global-yellow-1;
-    @extend .sour-gummy-heading;
+  @include breakpoints.xl {
+    padding-top: 0;
   }
+  // padding: 1rem;
 
-  .about_us__body {
-    margin-bottom: 1rem;
+  .about_us__content {
+    padding: 0;
+    width: 85%;
+    position: relative;
+    margin: 0 auto;
+    display: flex;
+    align-items: center;
+
+    @include breakpoints.xl {
+      padding: 4rem 6rem;
+      width: 100%;
+    }
+
+    .about_us__text {
+      flex: 1;
+
+      @include breakpoints.lg {
+        flex: 3;
+      }
+      .about_us__header {
+        font-size: 3.2rem;
+        margin-bottom: 1rem;
+        color: colors.$global-yellow-1;
+        @extend .sour-gummy-heading;
+      }
+      .about_us__body {
+        font-size: 1.3rem;
+        margin-bottom: 1rem;
+      }
+    }
+
+    .balloon {
+      flex: 1;
+      position: relative;
+      display: none;
+      justify-content: end;
+
+      @include breakpoints.sm {
+        display: flex;
+      }
+
+      @include breakpoints.lg {
+        flex: 2;
+      }
+      img {
+        width: 85%;
+      }
+    }
   }
 }
diff --git a/src/components/AboutUs/AboutUs.tsx b/src/components/AboutUs/AboutUs.tsx
@@ -1,5 +1,3 @@
-import { Carousel } from "@mantine/carousel";
-
 import picture_1 from "../../assets/pictures/picture_1.jpg";
 import picture_2 from "../../assets/pictures/picture_2.jpg";
 import picture_3 from "../../assets/pictures/picture_3.jpg";
@@ -36,9 +34,27 @@ import picture_33 from "../../assets/pictures/picture_33.jpg";
 import picture_34 from "../../assets/pictures/picture_34.jpg";
 import picture_35 from "../../assets/pictures/picture_35.jpg";
 import picture_36 from "../../assets/pictures/picture_36.jpg";
+import balloon from "../../assets/bg/balloon.svg";
+
+import { motion, Variants } from "motion/react";
+import { Carousel } from "@mantine/carousel";
 
 import "./AboutUs.scss";
 
+const balloonVariants: Variants = {
+  offscreen: {
+    x: 700,
+  },
+  onscreen: {
+    x: 50,
+    transition: {
+      type: "spring",
+      bounce: 0.25,
+      duration: 3.2,
+    },
+  },
+};
+
 interface IAboutUs {}
 
 export const AboutUs: React.FC<IAboutUs> = () => {
@@ -80,19 +96,35 @@ export const AboutUs: React.FC<IAboutUs> = () => {
     picture_35,
     picture_36,
   ];
+
   return (
     <div className="about_us__wrapper">
-      <div className="about_us__header">About Us</div>
-      <div className="about_us__body">
-        WildHacks is Northwestern's overnight hackathon taking place in-person
-        April 5-7 2024. As Northwestern's largest hackathon, WildHacks is an
-        opportunity for students to learn programming skills and develop a final
-        project in a collaborative and inclusive environment. Through workshops,
-        mentorship, and prizes, WildHacks aims to be an inclusive event that
-        welcomes students of all skill levels, majors, and backgrounds.
+      <div className="about_us__content">
+        <div className="about_us__text">
+          <div className="about_us__header">About Us</div>
+          <div className="about_us__body">
+            WildHacks is Northwestern's overnight hackathon taking place
+            in-person April 4-6, 2025. As Northwestern's largest hackathon,
+            WildHacks is an opportunity for students to learn programming skills
+            and develop a final project in a collaborative and inclusive
+            environment. Through workshops, mentorship, and prizes, WildHacks
+            aims to be an inclusive event that welcomes students of all skill
+            levels, majors, and backgrounds.
+          </div>
+        </div>
+        <motion.div
+          initial="offscreen"
+          whileInView="onscreen"
+          viewport={{ amount: 0.8 }}
+          className="balloon"
+        >
+          <motion.div variants={balloonVariants}>
+            <img src={balloon} alt="hot air balloon" />
+          </motion.div>
+        </motion.div>
       </div>
       <Carousel
-        slideSize="70%"
+        slideSize={{ base: "90%", sm: "80%", md: "55%", lg: "45%" }}
         height="100%"
         slideGap="lg"
         controlSize={18}
@@ -103,10 +135,18 @@ export const AboutUs: React.FC<IAboutUs> = () => {
       >
         {pictures
           .sort((_a, _b) => Math.random() - 0.5)
-          .map((elem) => (
+          .map(elem => (
             <Carousel.Slide>
               <div style={{ padding: "1rem" }}>
-                <img src={elem} width="100%" />
+                <img
+                  src={elem}
+                  width="100%"
+                  style={{
+                    borderRadius: "25px",
+                    border: "8px solid rgb(29, 74, 22)",
+                    boxShadow: "0px 10px 0px 0px rgba(29, 74, 22, 0.15)",
+                  }}
+                />
               </div>
             </Carousel.Slide>
           ))}

diff --git a/src/shared/breakpoints.scss b/src/shared/breakpoints.scss
@@ -0,0 +1,45 @@
+// breakpoints: {
+//   xs: '30em',
+//   sm: '48em',
+//   md: '64em',
+//   lg: '74em',
+//   xl: '90em',
+// },
+
+$xs: 30em;
+$sm: 48em;
+$md: 64em;
+$lg: 74em;
+$xl: 90em;
+
+@mixin xs {
+  @media (min-width: #{$xs}) {
+    @content;
+  }
+}
+@mixin sm {
+  @media (min-width: #{$sm}) {
+    @content;
+  }
+}
+
+// Medium devices
+@mixin md {
+  @media (min-width: #{$md}) {
+    @content;
+  }
+}
+
+// Large devices
+@mixin lg {
+  @media (min-width: #{$lg}) {
+    @content;
+  }
+}
+
+// Extra large devices
+@mixin xl {
+  @media (min-width: #{$xl}) {
+    @content;
+  }
+}