[WIP] next js migration

.gitignore

@@ -1,5 +1,34 @@
-node_modules
-node_modules/*
-dist/
-dist/*
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
 .DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel

README.md

@@ -1,2 +1,30 @@
-# weceweb
-Code for WECE <a href="https://wece.ece.illinois.edu">website</a>
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/import?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

components/boardcard.jsx

@@ -0,0 +1,56 @@
+import styles from "../styles/Boardcard.module.css";
+
+export default function BoardCard({
+  name,
+  role,
+  major,
+  year,
+  spiritAnimal,
+  hobbies,
+  quote,
+  img,
+}) {
+  const flipCard = (event) => {
+    const card = event.currentTarget;
+    if (card.classList.contains(styles["active"])) {
+      card.classList.remove(styles["active"]);
+    } else {
+      card.classList.add(styles["active"]);
+    }
+  };
+
+  return (
+    <div className={styles["img-card"]} onClick={flipCard}>
+      <div className={styles["card-inner"]}>
+        <div className={styles["flip-card"]}>
+          <div className={styles["flip-text"]}>
+            <h5>{major}</h5>
+            <h6>{year}</h6>
+            <div className={styles["flip-about"]}>
+              <h5>About Me</h5>
+              <h6>
+                <span className={styles["flip-category"]}>Spirit Animal:</span>{" "}
+                {spiritAnimal}
+              </h6>
+              <h6>
+                <span className={styles["flip-category"]}>Hobbies:</span>{" "}
+                {hobbies}
+              </h6>
+              <h6>
+                <span className={styles["flip-category"]}>
+                  Favorite inspirational quote:
+                </span>{" "}
+                {quote}
+              </h6>
+            </div>
+          </div>
+        </div>
+        <img className={styles["exec-pic"]} src={img} />
+        <div className={styles["exec-text"]}>
+          <h5 className={styles["exec-name"]}>{name}</h5>
+          <h6 className={styles["exec-desc"]}>{role}</h6>
+        </div>
+      </div>
+    </div>
+  );
+}

components/carousel.jsx

@@ -0,0 +1,36 @@
+import Carousel from "react-bootstrap/Carousel";
+
+export default function EventCarousel() {
+  return (
+    <Carousel>
+      <Carousel.Item>
+        <img
+          className="d-block w-100"
+          src="imgs/events/mentorship/mentorship-craft-night-2019.JPG"
+          alt="mentorship craft night"
+        />
+      </Carousel.Item>
+      <Carousel.Item>
+        <img
+          className="d-block w-100"
+          src="imgs/events/leetcode/leetcode2018-19.jpg"
+          alt="leetcode session"
+        />
+      </Carousel.Item>
+      <Carousel.Item>
+        <img
+          className="d-block w-100"
+          src="imgs/events/outreach/next-generation-edison-outreach2018.JPG"
+          alt="next generation outreach"
+        />
+      </Carousel.Item>
+      <Carousel.Item>
+        <img
+          className="d-block w-100"
+          src="imgs/events/infrastructure/html&cssworkshop.jpg"
+          alt="html and css workshop"
+        />
+      </Carousel.Item>
+    </Carousel>
+  );
+}

components/footer.jsx

@@ -0,0 +1,15 @@
+import Navbar from "react-bootstrap/Navbar";
+import styles from "../styles/Footer.module.css";
+
+export default function Footer() {
+  return (
+    <Navbar className={styles.footer} variant="dark">
+      <Navbar.Text className={styles["navbar-text-left"]}>
+        © 2018 UIUC WECE. All rights reserved.
+      </Navbar.Text>
+      <Navbar.Text className={styles["navbar-text-right"]}>
+        1016 ECEB, 306 North Wright Street, Urbana, IL 61801
+      </Navbar.Text>
+    </Navbar>
+  );
+}

components/layout.jsx

@@ -0,0 +1,35 @@
+import Head from "next/head";
+import Footer from "./footer";
+import CustomNavbar from "./nav";
+
+export default function Layout({
+  children,
+  title = "Women in ECE | University of Illinois at Urbana-Champaign",
+}) {
+  return (
+    <>
+      <Head>
+        <title>{title}</title>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
+        <link
+          href="https://fonts.googleapis.com/css?family=IBM+Plex+Mono|Roboto"
+          rel="stylesheet"
+        />
+        <link
+          rel="stylesheet"
+          href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
+          integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
+          crossorigin="anonymous"
+        />
+      </Head>
+      <div className="page">
+        <div id="container">
+          <CustomNavbar></CustomNavbar>
+          {children}
+          <Footer></Footer>
+        </div>
+      </div>
+    </>
+  );
+}

components/lines.svg.jsx

@@ -0,0 +1,42 @@
+import styles from "../styles/Home.module.css";
+
+export default function LinesSvg() {
+  return (
+    <svg
+      version="1.1"
+      className={styles.lines}
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      viewBox="0 0 1000 1000"
+      x="0px"
+      y="0px"
+      xmlSpace="preserve"
+      preserveAspectRatio="none"
+    >
+      <path
+        className={`${styles.path} ${styles.path1}`}
+        d="M 0 150 H 250 L 600 350 H 1000"
+      />
+      <path
+        className={`${styles.path} ${styles.path2}`}
+        d="M 1000 100 H 800 L 400 400 H 0"
+      />
+      <path
+        className={`${styles.path} ${styles.path3}`}
+        d="M 0 600 H 50 L 300 700 H 1000"
+      />
+      <path
+        className={`${styles.path} ${styles.path4}`}
+        d="M 1000 400 H 700 L 300 800 H 0"
+      />
+      <path
+        className={`${styles.path} ${styles.path5}`}
+        d="M 0 550 L 150 475 H 1000"
+      />
+      <path
+        className={`${styles.path} ${styles.path6}`}
+        d="M 1000 275 H 250 L 50 75 H 0"
+      />
+    </svg>
+  );
+}

components/nav.jsx

@@ -0,0 +1,106 @@
+import styles from "../styles/Nav.module.css";
+import Navbar from "react-bootstrap/Navbar";
+import Nav from "react-bootstrap/Nav";
+import NavDropdown from "react-bootstrap/NavDropdown";
+
+export default function CustomNavbar() {
+  return (
+    <>
+      <Navbar
+        variant="dark"
+        expand="lg"
+        fixed="top"
+        className={styles["navbar"]}
+      >
+        <div className={styles["left-navbar"]}>
+          <Navbar.Brand href="/" className={styles["wece-brand"]}>
+            <img
+              src="imgs/wece-logo-h-white.png"
+              height="30px"
+              alt="wece-logo-white"
+            />
+          </Navbar.Brand>
+          <Nav className={styles["left-navbar-imgs"]}>
+            <Nav.Link
+              className={styles["left-navbar-link"]}
+              href="mailto:[email protected]"
+            >
+              <img
+                className={styles["nav-img"]}
+                src="imgs/mail.png"
+                height="25px"
+                alt="email"
+              />
+            </Nav.Link>
+            <Nav.Link
+              className={styles["left-navbar-link"]}
+              href="https://www.facebook.com/wece.uiuc"
+              target="_blank"
+            >
+              <img
+                className={styles["nav-img"]}
+                src="imgs/facebook.png"
+                height="25px"
+                alt="facebook"
+              />
+            </Nav.Link>
+            <Nav.Link
+              className={styles["left-navbar-link"]}
+              href="https://www.instagram.com/wece.uiuc/"
+              target="_blank"
+            >
+              <img
+                className={styles["nav-img"]}
+                src="imgs/instagram.png"
+                height="25px"
+                alt="instagram"
+              />
+            </Nav.Link>
+          </Nav>
+        </div>
+        <Navbar.Toggle className={styles["custom-toggler"]} />
+        <Navbar.Collapse className={"justify-content-end"}>
+          <Nav className={styles["right-navbar"]}>
+            <NavDropdown title="About">
+              <NavDropdown.Item
+                className={styles["dropdown-item"]}
+                href="/about"
+              >
+                Who We Are
+              </NavDropdown.Item>
+              <NavDropdown.Item
+                className={styles["dropdown-item"]}
+                href="/board"
+              >
+                Board Members
+              </NavDropdown.Item>
+              <NavDropdown.Item
+                className={styles["dropdown-item"]}
+                href="/committees"
+              >
+                Committees
+              </NavDropdown.Item>
+            </NavDropdown>
+            <Nav.Link href="/calendar">Events</Nav.Link>
+            <NavDropdown title="Sponsors">
+              <NavDropdown.Item
+                className={styles["dropdown-item"]}
+                href="/sponsors"
+              >
+                2018-19
+              </NavDropdown.Item>
+              {/* <NavDropdown.Item
+                className={styles["dropdown-item"]}
+                href="/resumebook"
+              >
+                Resume Book
+              </NavDropdown.Item> */}
+            </NavDropdown>
+            <Nav.Link href="/contactus">Contact Us</Nav.Link>
+            <Nav.Link href="/join">Join</Nav.Link>
+          </Nav>
+        </Navbar.Collapse>
+      </Navbar>
+    </>
+  );
+}