Subjugator5 Page Created

src/App.jsx

@@ -9,6 +9,7 @@ import RoboSub from "./Pages/RoboSub";
 import AUVTechnology from "./Pages/AUVTechnology";
 import Sponsors from "./Pages/Sponsors";
 import OurTeam from "./Pages/OurTeam";
+import Subjugator5 from "./Pages/VehiclePages/Subjugator5";
 import "./App.css";
 
 function App() {
@@ -24,6 +25,7 @@ function App() {
           <Route path="/ourteam" element={<OurTeam />} />
           <Route path="/sponsors" element={<Sponsors />} />
           <Route path="/contact" element={<Contact />} />
+          <Route path="/subjugator5" element={<Subjugator5/>}/>
         </Routes>
       </main>
       {/* We'll add a footer component later */}

src/Pages/VehiclePages/Subjugator5.jsx

@@ -0,0 +1,126 @@
+import React, {useState, useEffect, useRef} from "react";
+import "../../styles/Subjugator5.css";
+import SUBJUGATOR5Image from "../../assets/SubjuGator5.jpg";
+import SUBJUGATOR5AImage from "../../assets/SubjuGator5a.jpg";
+
+const SUBJUGATOR5ASPECS = [
+    {title: "Dry Weight", value: "32 lbs"},
+    {title: "Thrusters", value: "5 Seabotix BTD150"},
+    {title: "Dimensions", value: "24″ x 16″ x 14″"},
+    {title: "Max Depth", value: "15 feet"},
+    {title: "Navigation", value: "IMU | Compass"},
+    {title: "Max Speed", value: "0.7 m/s"},
+    {title: "Battery Life", value: "2 hours"},
+    {title: "Active Year", value: "2006 (RoboSub 9)"},
+    {title: "Cameras", value: "2 Webcams"},
+    {title: "Placement", value: "1st"},
+];
+
+const SUBJUGATOR5SPECS = [
+    {title: "Dry Weight", value: "32 lbs"},
+    {title: "Thrusters", value: "5 Seabotix BTD150"},
+    {title: "Dimensions", value: "24″ x 16″ x 14″"},
+    {title: "Max Depth", value: "15 feet"},
+    {title: "Navigation", value: "IMU | Compass"},
+    {title: "Max Speed", value: "0.7 m/s"},
+    {title: "Battery Life", value: "2 hours"},
+    {title: "Active Year", value: "2005 (RoboSub 8)"},
+    {title: "Cameras", value: "2 Webcams"},
+    {title: "Placement", value: "1st"},
+];
+
+const SUBJUGATOR5AINFO = "An upgraded version of our fifth generation autonomous submarine, SubjuGator, will compete in the 2006 AUVSI/ ONR 9th \
+International Autonomous Underwater Vehicle Competition from August 2-August 6, 2006. We have rebuilt our 2005 SubjuGator for this competiton, with about 70% new parts. \
+Almost all of the electronics are new and we have a new body, new hard points, new external electronic box and a new hydrophone array. The 2006 SubjuGator is designed to operate \
+underwater at depths in excess of 15 feet. The mission behavior of SubjuGator is controlled by a network of I2C modules. This system includes sensors, motor controllers, more than 10 \
+microcontrollers, and other necessary peripherals. A single-board Pentium M based computer running the Windows XP Embedded operating system provides processing power for the vision system \
+and advanced signal processing.";
+
+const SUBJUGATOR5INFO = "";
+
+const SUBJUGATOR5ALINKS = {
+    pubLink: "http://subjugator.org/wp-content/uploads/2011/04/publication_2006_auvsi.pdf",
+    photoLink: "http://subjugator.org/?page_id=506",
+    teamLink: "http://subjugator.org/?page_id=560",
+    year: "2006",
+}
+
+const SUBJUGATOR5LINKS = {
+    pubLink: "http://subjugator.org/wp-content/uploads/2011/04/publication_2005_auvsi.pdf",
+    photoLink: "http://subjugator.org/?page_id=511",
+    teamLink: "#",
+    year: "2005",
+}
+
+function InfoCard({title, spec}) {
+    return <div className="info-card">
+        <h5 className="info-card-title">{title}</h5>
+        <p className="info-card-spec">{spec ?? "Unknown"}</p>
+    </div>
+}
+
+function ExtraLinks({publicationLink, photosLink, teamLink, year}) {
+    return <div className="extra-links">
+        <a href={publicationLink} target="_blank" rel="noreferrer" className="extra-link">
+            <h5 className="extra-link-text">Publication {year}</h5>
+        </a>
+        <a href={photosLink} target="_blank" rel="noreferrer" className="extra-link">
+            <h5 className="extra-link-text">Photos</h5>
+        </a>
+        <a href={teamLink} target="_blank" rel="noreferrer" className="extra-link">
+            <h5 className="extra-link-text">Team</h5>
+        </a>
+    </div>
+}
+
+function SubjugatorInfo({name, specs, info, photo, links, ref}) {
+    return <div className="subjugator-info-wrapper" ref={ref}>
+        <div className="subjugator-info-box">
+            <h2 className="subjugator-title">{name}</h2>
+            <p className="subjugator-info">{info && info.trim() ? info : "Information Not Available For This Model."}</p>
+            <ExtraLinks publicationLink={links.pubLink} photosLink={links.photoLink} teamLink={links.teamLink} year={links.year}/>
+        </div>
+        <div className="subjugator-image-box">
+            <img src={photo} className="subjugator-image"/>
+            <h3 className="subjugator-image-label">{name}</h3>
+        </div>
+        <div className="subjugator-specs-box">
+            {specs.map((spec, index) => (
+                <InfoCard key={index} title={spec.title} spec={spec.value}/>
+            ))}
+        </div>
+    </div>
+}
+
+function Subjugator5() {
+
+    const infoRef = useRef(null);
+    const sub1Ref = useRef(null);
+    const sub2Ref = useRef(null);
+
+    useEffect(() => {
+        const info = infoRef.current;
+        const sub1 = sub1Ref.current;
+        const sub2 = sub2Ref.current;
+
+        const tids = [];
+        tids.push(setTimeout(() => info?.classList.add("animate-slideUp"), 100));
+        tids.push(setTimeout(() => sub1?.classList.add("animate-slideUp"), 200));
+        tids.push(setTimeout(() => sub2?.classList.add("animate-slideUp"), 300));
+
+        return () => tids.forEach(clearTimeout);
+    }, []);
+
+    return <>
+        <div className="subjugator5-page">
+            <div className="subjugator5-page-header" ref={infoRef}>
+                <h1 className="subjugator5-page-title">Subjugator 5</h1>
+                <p className="subjugator-page-info">The 5th generation SubjuGator vehicle has participated in 2 years of operation at the University of Florida from 2004 to 2006. Each of the iterations of the deisgn are presented below.</p>
+            </div>
+            <SubjugatorInfo name="Subjugator 5a" specs={SUBJUGATOR5ASPECS} info={SUBJUGATOR5AINFO} photo={SUBJUGATOR5AImage} links={SUBJUGATOR5ALINKS} ref={sub1Ref}/>
+            <SubjugatorInfo name="Subjugator 5" specs={SUBJUGATOR5SPECS} info={SUBJUGATOR5INFO} photo={SUBJUGATOR5Image} links={SUBJUGATOR5LINKS} ref={sub2Ref}/>
+        </div>
+    </>
+}
+
+export default Subjugator5;