dockerization.

2025-01-27 14:26:40 -07:00
parent a9b1fa419e
commit 3e69802567
34 changed files with 1003 additions and 3470 deletions
@@ -0,0 +1,44 @@
+import React from "react";
+import { Swiper, SwiperSlide } from "swiper/react";
+import { Mousewheel, Pagination } from "swiper/modules";
+
+import "swiper/css";
+import "swiper/css/pagination";
+
+/*
+ * For my portfolio, this is the wrapper in which all other content is displayed. Every component is
+ * a child of the VerticalSlider, excluding the Resume page (for now?). 
+ *
+ * Utilizes swiperjs, see https://swiperjs.com/ for documentation.
+ *
+ * @param slides ReactComponent[], an array of pages or "slides" to display in a vertical slider.
+ */
+const VerticalSlider = ({ slides }) => {
+  // Mousewheel is for scrolling effect. Pagination is for "bullets" to indicate active and inactive slides. Pagination
+  // clickable allows for going to the corresponding page or "slide".
+  return (
+    <>
+      <Swiper
+        modules={[Mousewheel, Pagination]}
+        direction={"vertical"}
+        speed={800}
+        loop={false}
+        pagination={{
+          clickable: true,
+        }}
+        mousewheel={{
+          thresholdDelta: 50,
+          sensitivity: 1,
+        }}
+      >
+        {slides.map((slide, index) => (
+          <SwiperSlide key={index}>
+            {<div className="slide-container">{slide}</div>}
+          </SwiperSlide>
+        ))}
+      </Swiper>
+    </>
+  );
+}
+
+export default VerticalSlider;