feat: add Project section

Author: mgrinstein

src/components/ContentElement.js

@@ -2,7 +2,7 @@ import Card from "react-bootstrap/Card";
 import Button from "react-bootstrap/Button";
 import "./ContentElement.css";
 
-export function ContentElement({ image, title, description, link, hashtags }) {
+export function ContentElement({ image, title, description, link, hashtags, buttonText }) {
   return (
     <Card className="content-element">
       <Card.Img variant="top" src={image} alt={title} className="img-thumbnail" />
@@ -14,7 +14,7 @@ export function ContentElement({ image, title, description, link, hashtags }) {
         <div className="card-footer">
           {link && (
             <Button href={link} target="_blank" rel="noopener noreferrer">
-              Read More
+              {buttonText || "Read More"}
             </Button>
           )}
           <div className="content-hashtags">

src/components/Navbar.js

@@ -25,12 +25,12 @@ export function WebsiteNavbar() {
           <Nav.Link className={`Nav-link ${location.pathname === "/tech-articles" ? "active" : ""}`} href="/#/tech-articles">
             Tech Articles
           </Nav.Link>
+          <Nav.Link className={`Nav-link ${location.pathname === "/projects" ? "active" : ""}`} href="/#/projects">
+            Projects
+            </Nav.Link>
           <Nav.Link className={`Nav-link ${location.pathname === "/speaking" ? "active" : ""}`} href="/#/speaking">
             Speaking
             </Nav.Link>
-          {/* <Nav.Link className={`Nav-link ${location.pathname === "/space-projects" ? "active" : ""}`} href="/#/space-projects">
-            Space Projects
-          </Nav.Link> */}
           <Nav.Link className={`Nav-link ${location.pathname === "/contact" ? "active" : ""}`} href="/#/contact">
             Contact
           </Nav.Link>

src/images/projects/index.js

@@ -0,0 +1,5 @@
+import settle from './settle.png';
+import volcano from './volcano.png';
+import website from './website.png';
+
+export { settle, volcano, website };

src/images/projects/settle.png

@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom/client';
 import { HashRouter, Routes, Route } from "react-router-dom";  // Change BrowserRouter to HashRouter
 import './index.css';
 import reportWebVitals from './reportWebVitals';
-import { Home, About, SpaceProjects, TechArticles, Speaking, Contact} from "./pages";
+import { Home, About, Projects, TechArticles, Speaking, Contact} from "./pages";
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
@@ -12,9 +12,9 @@ root.render(
       <Routes>
         <Route path="/" element={<Home />} />
         <Route path="/about" element={<About />} />
-        {/* <Route path="/space-projects" element={<SpaceProjects />} /> */}
-        <Route path="/speaking" element={<Speaking />} />
         <Route path="/tech-articles" element={<TechArticles />} />
+        <Route path="/projects" element={<Projects />} />
+        <Route path="/speaking" element={<Speaking />} />
         <Route path="/contact" element={<Contact />} />
       </Routes>
     </HashRouter>

src/images/projects/volcano.png

@@ -0,0 +1,45 @@
+import { ContentElement, WebsiteNavbar } from "../components";
+import * as images from "../images/projects";
+
+export function Projects() {
+  return (
+    <div className="PageContainer">
+      <WebsiteNavbar />
+      <div className="PageContent">
+      <div className="intro-text">
+        <p>
+        Here I showcase projects I have worked on recently.<br/> Other projects, contributions, and stats can be found on <a href="https://github.com/mgrinstein" target="_blank">my GitHub page</a>. <br />
+        </p>
+      </div>
+
+      <div className="content-grid">
+        <ContentElement
+          title="SETTLE - Satellite Element Tracking via TLE"
+          description="Visualising calculated satellite positions on an interactive map"
+          image={images.settle}
+          link="https://github.com/mgrinstein/SETTLE"
+          hashtags={["Python", "CelesTrack", "sgp4"]}
+          buttonText="Source Code"
+        />
+        <ContentElement
+          title="Satellite Image Analysis"
+          description="Processing and analyzing satellite images using the 2024 Kīlauea volcano eruption as an example"
+          image={images.volcano}
+          link="https://github.com/mgrinstein/volcano-image-processing"
+          hashtags={["Python", "JupyterNotebook", "GeoTIFF", "EarthObservation"]}
+          buttonText="Source Code"
+        />
+        <ContentElement
+          title="Portfolio Website"
+          description="Déjà vu? Building this webpage"
+          image={images.website}
+          link="https://github.com/mgrinstein/mgrinstein.github.io"
+          hashtags={["JavaScript", "React", "GitHubActions", "CustomDomain"]}
+          buttonText="Source Code"
+
+        />
+      </div>
+    </div>
+    </div>
+  );
+}

src/images/projects/website.png

@@ -1,6 +1,6 @@
 export * from "./Home";
 export * from "./About";
 export * from "./TechArticles";
-export * from "./SpaceProjects";
+export * from "./Projects";
 export * from "./Contact";
 export * from "./Speaking";