Honors portfolio 33 (#54)

* Attempt using react-chrono

* Primary elements

* Styled

* Smooth scrolling

* Scroll to top button

package.json

@@ -13,6 +13,7 @@
     "photoswipe-dynamic-caption-plugin": "^1.1.1",
     "prop-types": "^15.8.1",
     "react": "^18.1.0",
+    "react-chrono": "^1.16.2",
     "react-dom": "^18.1.0",
     "react-router-dom": "^6.3.0",
     "three": "^0.141.0"

src/components/Artifacts.jsx

@@ -28,7 +28,11 @@ export default function Artifacts(props) {
     if (artifact.year !== curYear) {
       curYear = artifact.year;
       output.push(
-        <div className="Artifacts__year-header" key={`year_${curYear}`} />
+        <div
+          className="Artifacts__year-header"
+          key={`year_${curYear}`}
+          id={`year_${curYear}`}
+        />
       );
     }
 

src/components/NavBar.jsx

@@ -0,0 +1,95 @@
+import "../styles/NavBar.css";
+
+import React, { useEffect } from "react";
+
+/**
+ * @description NavBar component
+ * @returns {JSX.Element} JSX elements for the NavBar
+ */
+export default function NavBar() {
+  useEffect(() => {
+    const scrollToTopButton = document.querySelector("#scroll_to_top_button");
+
+    window.onscroll = () => {
+      if (window.scrollY > 350) {
+        scrollToTopButton.classList.add("show");
+      } else {
+        scrollToTopButton.classList.remove("show");
+      }
+    };
+  });
+
+  /**
+   * @description Function to scroll to the top of the page
+   * @type {(function(): void)|*}
+   */
+  const scrollToTop = React.useCallback(() => {
+    window.scrollTo(0, 0);
+  }, []);
+
+  /**
+   * @description Convert year number to string
+   * @returns {string} Year string
+   */
+  const yearToString = (year) => {
+    switch (year) {
+      case 0:
+        return "Freshman";
+      case 1:
+        return "Sophomore";
+      case 2:
+        return "Junior";
+      case 3:
+        return "Senior";
+      default:
+        return "Graduate";
+    }
+  };
+
+  /**
+   * @description Year nav bar item
+   * @param year {number} Year number
+   * @param disabled {boolean} Whether the year is disabled
+   * @returns {JSX.Element} JSX element for the year nav bar item
+   */
+  const navYearElement = (year, disabled) => {
+    return (
+      <div className={`NavYear ${disabled && "disabled"}`} key={year}>
+        <h2 className="NavYear__title">{yearToString(year)}</h2>
+        <a href={`#year_${year}_quarter_0`} className="NavYear__quarter">
+          Fall
+        </a>
+        <a href={`#year_${year}_quarter_1`} className="NavYear__quarter">
+          Winter
+        </a>
+        <a href={`#year_${year}_quarter_2`} className="NavYear__quarter">
+          Spring
+        </a>
+      </div>
+    );
+  };
+
+  const output = [];
+  output.push(navYearElement(0, false));
+  for (let i = 1; i < 4; i++) {
+    output.push(navYearElement(i, true));
+  }
+  return (
+    <div className="NavBar">
+      {/* Nav items */}
+      {output}
+
+      {/* Scroll to top button */}
+      <button
+        className="NavBar__back-to-top"
+        id="scroll_to_top_button"
+        onClick={scrollToTop}
+        onKeyDown={scrollToTop}
+        tabIndex="0"
+        type="button"
+      >
+        &#8613;
+      </button>
+    </div>
+  );
+}

src/main.jsx

@@ -8,6 +8,7 @@ import Artifacts from "./components/Artifacts";
 import { createRoot } from "react-dom/client";
 import Graphics from "./scripts/graphics"; // skipcq: JS-0249
 import InProgress from "./components/InProgress"; // skipcq: JS-0249
+import NavBar from "./components/NavBar";
 import React from "react";
 
 getContent().then((contentData) => {
@@ -26,6 +27,7 @@ getContent().then((contentData) => {
             <React.StrictMode>
               <div id="top" />
               <InProgress />
+              <NavBar />
               <Artifacts contentData={contentData} />
             </React.StrictMode>
           }

src/styles/ArtifactCard.css

@@ -11,7 +11,7 @@
 }
 
 .ArtifactCard:hover {
-  background-color: #2c3e50;
+  background-color: rgba(81, 115, 148, 0.6);
   border-radius: 15px;
 }
 

src/styles/NavBar.css

@@ -0,0 +1,69 @@
+.NavBar {
+  background: rgba(100, 100, 100, 0.15);
+  padding-bottom: 1.5em;
+  padding-left: 1em;
+  padding-right: 1em;
+
+  border-radius: 15px;
+
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+  grid-gap: 20px;
+}
+
+.NavYear {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-areas: "title title title";
+  grid-gap: 5px;
+}
+
+.NavYear__title {
+  color: white;
+  text-align: center;
+  grid-area: title;
+}
+
+.disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+.NavYear__quarter {
+  color: white;
+  text-decoration: none;
+  text-align: center;
+  font-size: larger;
+  background: rgba(81, 115, 148, 0.3);
+  padding: 0.5em;
+  margin-top: -0.5em;
+  border-radius: 15px;
+}
+
+.NavYear__quarter:hover {
+  background: rgba(81, 115, 148, 0.7);
+}
+
+.NavBar__back-to-top {
+  display: none;
+  position: fixed;
+  bottom: 30px;
+  left: 30px;
+  z-index: 10;
+  border: none;
+  outline: none;
+  background: rgba(81, 115, 148, 0.3);
+  color: white;
+  padding: 15px;
+  border-radius: 15px;
+  font-size: 30px;
+  cursor: pointer;
+}
+
+.NavBar__back-to-top:hover {
+  background: rgba(81, 115, 148, 0.7);
+}
+
+.show {
+  display: block;
+}

src/styles/index.css

@@ -38,3 +38,7 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+
+html {
+  scroll-behavior: smooth;
+}