{title}
-{subtitle}
-
-
- );
-}
diff --git a/src/components/Gallery.d.ts b/src/components/Gallery.d.ts
deleted file mode 100644
index f4a15ae..0000000
--- a/src/components/Gallery.d.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { ImageData } from "../scripts/interfaces";
-import { ReactElement } from "react";
-
-export default function Gallery(props: { images: ImageData[] }): ReactElement;
diff --git a/src/components/Gallery.jsx b/src/components/Gallery.jsx
deleted file mode 100644
index 03be15b..0000000
--- a/src/components/Gallery.jsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import "../styles/Gallery.sass";
-import { useEffect } from "react";
-import PhotoSwipeLightbox from "photoswipe/lightbox";
-import "photoswipe/style.css";
-import "photoswipe-dynamic-caption-plugin/photoswipe-dynamic-caption-plugin.css";
-import PropTypes from "prop-types";
-import PhotoSwipeDynamicCaption from "photoswipe-dynamic-caption-plugin";
-
-/**
- * Gallery component, displays a gallery of images
- * @param {object} props - Images to display
- * @constructor
- * @returns {JSX.Element}
- */
-export default function Gallery(props) {
- // Extract prop data
- const { images } = props;
- const galleryID = `gallery_${images[0].artifact
- .replaceAll(" ", "-")
- .toLowerCase()}`;
-
- // Initialize the gallery
- useEffect(() => {
- // Create lightbox
- let lightbox = new PhotoSwipeLightbox({
- gallery: `#${galleryID}`,
- children: "a",
- padding: { top: 30, right: 70, bottom: 30, left: 70 },
- preloaderDelay: 0,
- pswpModule: () => import("photoswipe"),
- });
-
- // Add dynamic caption plugin
- // skipcq: JS-0128
- let caption = new PhotoSwipeDynamicCaption(lightbox, {
- type: "auto",
- captionContent: ".pswp-caption-content",
- });
-
- // Start the lightbox
- lightbox.init();
-
- // Cleanup
- return () => {
- lightbox.destroy();
- lightbox = null;
- caption = null;
- };
- }, []);
-
- // Render
- return (
- ๐ Hello!
-Welcome and thanks for visiting my honors portfolio website!
-- The website is currently being updated. Feel free to scroll around and - see the current progress, or come back later when it's all done! -
-
- {images.map((image) => (
-
- {/* Thumbnail */}
- 
-
- {/* Caption */}
-
-
- {image.description} - - - ))} -
- );
-}
-
-Gallery.propTypes = {
- images: PropTypes.arrayOf(
- PropTypes.shape({
- artifact: PropTypes.string.isRequired,
- width: PropTypes.number.isRequired,
- height: PropTypes.number.isRequired,
- name: PropTypes.string.isRequired,
- description: PropTypes.string,
- thumbnail: PropTypes.string.isRequired,
- image: PropTypes.string.isRequired,
- })
- ),
-};
diff --git a/src/components/Quarter.tsx b/src/components/Quarter.tsx
deleted file mode 100644
index 24641d0..0000000
--- a/src/components/Quarter.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import "../styles/Quarter.sass";
-import ArtifactCard from "./ArtifactCard";
-import { ArtifactData } from "../scripts/interfaces";
-import { ReactElement } from "react";
-
-/**
- * Quarter component. Groups a quarter heading with a grid of artifacts.
- * @param {{filteredArtifacts: ArtifactData[]}} props - filterArtifacts - Artifacts filtered by quarter
- * @constructor
- * @return {ReactElement}
- */
-export default function Quarter(props: {
- filteredArtifacts: ArtifactData[];
-}): ReactElement {
- // Compute quarter string
- let quarter = "Fall";
- switch (props.filteredArtifacts[0].quarter) {
- case 1:
- quarter = "Winter";
- break;
- case 2:
- quarter = "Spring";
- break;
- case 3:
- quarter = "Summer";
- break;
- default:
- break;
- }
-
- // Render
- return (
- {image.name}
-- {image.description} - - - ))} -
-
- );
-}
diff --git a/src/components/RichLink.tsx b/src/components/RichLink.tsx
deleted file mode 100644
index 680f7c1..0000000
--- a/src/components/RichLink.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import "../styles/RichLink.sass";
-import { LinkData } from "../scripts/interfaces";
-import { ReactElement } from "react";
-
-/**
- * RichLink component. Displays a link with a title, description, and thumbnail.
- * @param {{linkData: LinkData}} props - Information about the link
- * @constructor
- * @return {JSX.Element}
- */
-export default function RichLink(props: { linkData: LinkData }): ReactElement {
- // Extract props
- const { url, image, title, description } = props.linkData;
-
- // Render
- return (
-
-
- {quarter}
-
- {props.filteredArtifacts.map((artifact: ArtifactData) => (
-
-
-
-
- );
-}
diff --git a/src/components/Year.tsx b/src/components/Year.tsx
deleted file mode 100644
index a86e486..0000000
--- a/src/components/Year.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import "../styles/Year.sass";
-import { ArtifactData } from "../scripts/interfaces";
-import Quarter from "./Quarter";
-import { ReactElement } from "react";
-
-/**
- * Year component. Groups a year heading with a list of quarters.
- * @param {{filteredArtifacts: ArtifactData[]}} props - Artifacts filtered by year
- * @constructor
- * @return {ReactElement}
- */
-export default function Year(props: {
- filteredArtifacts: ArtifactData[];
-}): ReactElement {
- // Compute year string
- let year = "Freshman 2021 - 2022";
- switch (props.filteredArtifacts[0].year) {
- case 1:
- year = "Sophomore 2022 - 2023";
- break;
- case 2:
- year = "Junior 2023 - 2024";
- break;
- case 3:
- year = "Senior 2024 - 2025";
- break;
- default:
- break;
- }
-
- // Compute quarter set (get unique quarters)
- const quarters: Set{title}
-{description}
-{url}
-
- artifact.quarter === quarter
- )}
- />
- ))}
-
-
- );
-}
diff --git a/src/main.tsx b/src/main.tsx
index 2a4e127..ae11e1d 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,53 +1,17 @@
-import "./styles/index.sass";
-import { ArtifactData } from "./scripts/interfaces";
-import ArtifactPage from "./routes/ArtifactPage";
-import ErrorPage from "./routes/ErrorPage";
-import ParseData from "./scripts/parse-data";
-import React from "react";
-import ReactDOM from "react-dom/client";
-import Root from "./routes/Root";
-// eslint-disable-next-line sort-imports
-import { createHashRouter, RouterProvider } from "react-router-dom";
-import Graphics from "./scripts/graphics";
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App.tsx';
+import { CssBaseline, ThemeProvider } from '@mui/material';
+import { darkTheme } from './themes.ts';
-// Parse data and return as an array of ArtifactPage objects
-const artifacts: ArtifactData[] = ParseData();
-
-// Create router
-const router = createHashRouter([
- {
- path: "/",
- element: {year}
- {Array.from(quarters).map((quarter: number) => ( --
- {/* Title and subtitle */}
-
- );
-}
-
-/**
- * Artifact page, displays artifact information including text, images, and embedded media
- * @constructor
- * @returns {ReactElement}
- */
-export default function ArtifactPage(): ReactElement {
- // Get and extract data
- const artifact = useLoaderData() as ArtifactData;
-
- // Force scroll to top
- window.scroll(0, 0);
-
- // Render
- return (
- {title}
-{subtitle}
- - {/* Year and quarter */} -- Quarter: {yearToString()} {quarterToString()} -
- - {/* External Link */} - {links?.map((link: LinkData) => ( -
- {/* Blur layer */}
-
-
- {/* Back button */}
- {/* skipcq: JS-0394 */}
-
- ← Return to Kenneth's Honors Portfolio
-
-
- {/* 3D graphics element */}
-
-
- {/* Artifact content */}
-
- );
-}
diff --git a/src/routes/ErrorPage.tsx b/src/routes/ErrorPage.tsx
deleted file mode 100644
index d03b570..0000000
--- a/src/routes/ErrorPage.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { ReactElement } from "react";
-import { useRouteError } from "react-router-dom";
-
-interface RouteError {
- statusText?: string;
- message?: string;
-}
-
-/**
- * Error / 404 page, displays error information
- * @param props {fromArtifact: boolean} Whether the error page is being displayed from an artifact page
- * @constructor
- * @returns {ReactElement}
- */
-export default function ErrorPage(props: {
- fromArtifact: boolean;
-}): ReactElement {
- const error = useRouteError() as RouteError;
-
- return (
-
-
-
- {/* Images */}
- {artifact.images && {artifact.text}
-
- {artifact.embeds.map((embed: EmbedData) => (
-
-
- Click here if there is a problem viewing the embedded item
-
-
-
- ))}
-
- )}
-
-
-
- );
-}
diff --git a/src/routes/Root.tsx b/src/routes/Root.tsx
deleted file mode 100644
index b1a5a13..0000000
--- a/src/routes/Root.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { ArtifactData } from "../scripts/interfaces";
-import ComingSoon from "../components/ComingSoon";
-import { ReactElement } from "react";
-import Year from "../components/Year";
-import { useLoaderData } from "react-router-dom";
-
-/**
- * Website root, displays all artifacts and navigation
- * @constructor
- * @returns {ReactElement}
- */
-export default function Root(): ReactElement {
- // Get loader data
- const artifacts = useLoaderData() as ArtifactData[];
-
- // Compute year set (get unique years)
- const years: SetOops!
- {props.fromArtifact ? ( -It appears this artifact doesn't exist!
- ) : ( -Sorry, an unexpected error has occurred.
- )} --
Error message for Kenneth to go figure out:
-{error.statusText || error.message}
-