Finish Volunteers Section, fixed images

src/assets/profiles/volunteers/index.js

@@ -0,0 +1,10 @@
+export { default as v1 } from "./DevrinCommCute.jpg";
+export { default as v2 } from "./DevrinCommCute.jpg";
+export { default as v3 } from "./DevrinCommCute.jpg";
+export { default as v4 } from "./DevrinCommCute.jpg";
+export { default as v5 } from "./DevrinCommCute.jpg";
+export { default as v6 } from "./DevrinCommCute.jpg";
+export { default as v7 } from "./DevrinCommCute.jpg";
+export { default as v8 } from "./DevrinCommCute.jpg";
+export { default as v9 } from "./DevrinCommCute.jpg";
+export { default as v10 } from "./DevrinCommCute.jpg";

src/components/Profile/Profile.jsx

@@ -0,0 +1,14 @@
+import React from "react";
+import "./profile.css";
+function Profile(props) {
+  return (
+    <figure className="profile-container">
+      <a href={props.link}>
+        <img className="profileImg" src={props.img} alt={props.name} />
+        <figcaption class="caption">{props.name}</figcaption>
+      </a>
+    </figure>
+  );
+}
+
+export default Profile;

src/components/Profile/profile.css

@@ -0,0 +1,22 @@
+figure.item {
+    /* To correctly align image, regardless of content height: */
+    vertical-align: top;
+    /* To horizontally center images and caption */
+    text-align: center;
+    /* The width of the container also implies margin around the images. */
+    width: 120px;
+}
+
+img {
+    width: 100px;
+    border-radius: 50%;
+}
+
+.caption {
+    /* Make the caption a block so it occupies its own line. */
+    padding-top: 10px;
+    display: block;
+    text-align: center;
+    color: #fff;
+    font-family: var(--font-family);
+}

src/components/index.js

@@ -3,3 +3,4 @@ export { default as CardSat } from "./Cards/CardSat";
 export { default as CardSun } from "./Cards/CardSun";
 export { default as CardMon } from "./Cards/CardMon";
 export { default as Navbar } from "./navbar/Navbar";
+export { default as Profile } from "./Profile/Profile";

src/components/navbar/Navbar.jsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { RiMenu3Line, RiCloseLine } from "react-icons/ri";
-import logo from "../../assets/ThetaHacks.svg";
+import logo from "../../assets/logos/ThetaHacks.svg";
 import "./navbar.css";
 
 const Menu = () => (

src/containers/header/Header.jsx

@@ -1,11 +1,13 @@
 import React from "react";
 import "./header.css";
-import theta_logo from "../../assets/(NO BUFFER) theta.png";
+import theta_logo from "../../assets/logos/(NO BUFFER) theta.png";
 export const Header = () => {
   return (
     <div className="theta_header section_padding" id="home">
       <div className="theta_header-content">
-        <h1 className="theta_header-text">ThetaHacks II <span className="theta_header-text-span">is here.</span></h1>
+        <h1 className="theta_header-text">
+          ThetaHacks II <span className="theta_header-text-span">is here.</span>
+        </h1>
         <p className="theta_header-desc">
           36 hours. $20k in prizes. What will you build?
         </p>

src/containers/merch/merch.css

@@ -3,6 +3,8 @@
     font-family: var(--font-family);
     color: #fff;
     text-align: center;
+    margin-top: 50px;
+    margin-bottom: 10px;
 }
 
 .merch_list {

src/containers/volunteers/Volunteers.jsx

@@ -1,8 +1,36 @@
 import React from "react";
 import "./volunteers.css";
-
-export const Volunteers = () => {
-  return <div>Volunteers</div>;
-};
+import {
+  v1,
+  v2,
+  v3,
+  v4,
+  v5,
+  v6,
+  v7,
+  v8,
+  v9,
+  v10,
+} from "../../assets/profiles/volunteers";
+import { Profile } from "../../components/index";
+export const Volunteers = () => (
+  <div id="volunteers">
+    <div className="theta_volunteers-heading">
+      <h1>Volunteers</h1>
+    </div>
+    <div className="theta_volunteers-imgs">
+      <Profile name="Kai" img={v1} link="https://devrim.tech" />
+      <Profile name="Kai" img={v2} link="https://devrim.tech" />
+      <Profile name="Kai" img={v3} link="https://devrim.tech" />
+      <Profile name="Kai" img={v4} link="https://devrim.tech" />
+      <Profile name="Kai" img={v5} link="https://devrim.tech" />
+      <Profile name="Kai" img={v6} link="https://devrim.tech" />
+      <Profile name="Kai" img={v7} link="https://devrim.tech" />
+      <Profile name="Kai" img={v8} link="https://devrim.tech" />
+      <Profile name="Kai" img={v9} link="https://devrim.tech" />
+      <Profile name="Kai" img={v10} link="https://devrim.tech" />
+    </div>
+  </div>
+);
 
 export default Volunteers;

src/containers/volunteers/volunteers.css

@@ -0,0 +1,24 @@
+#volunteers {
+    margin-top: 100px;
+}
+
+.theta_volunteers-heading {
+    justify-content: center;
+    font-family: var(--font-family);
+    color: #fff;
+    text-align: center;
+    padding-bottom: 50px;
+}
+
+.theta_volunteers-imgs {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    flex-wrap: wrap;
+    padding-right: 50px
+}
+
+.theta_volunteers-imgs>* {
+    padding-left: 50px;
+    padding-bottom: 50px;
+}