made project board nicer, with bootstrap cards and airbrushed background

src/components/NavBar.tsx

@@ -27,7 +27,7 @@ function NavBar() {
       sections.forEach(section => {
         const sectionTop = section.offsetTop - 50;
         const sectionHeight = section.clientHeight;
-        const offset = 50;
+        const offset = 150;
         if (window.scrollY + offset>= sectionTop && window.scrollY < sectionTop + sectionHeight) {
           const id = section.getAttribute('id');
           const navLinks = document.querySelectorAll('.nav-link');
@@ -57,7 +57,7 @@ function NavBar() {
           <Nav className='nav-collapsed'>
             <Nav.Link href="#home">Home</Nav.Link>
             <Nav.Link href="#projects">Projects</Nav.Link>
-            <Nav.Link href="https://www.linkedin.com/in/sirrenberg/">Contact</Nav.Link>
+            <Nav.Link href="#contact">Contact</Nav.Link>
             <NavDropdown title="Publications" id="NavBarPublicationsDropdown" menuVariant="dark">
               <NavDropdown.Item href="https://www.sosy-lab.org/research/btor2-cert/">
                 Btor2-Cert: A Certifying Hardware-Verification Framework Using Software Analyzers

src/components/ProjectCard.tsx

@@ -0,0 +1,22 @@
+import {Button, Card} from "react-bootstrap";
+import '../styles/Projects.css';
+
+interface ProjectCardProps {
+    title: string;
+    description: string;
+    imgUrl: string;
+    linkToSource: string;
+}
+
+export const ProjectCard: React.FC<ProjectCardProps> = ({ title, description, imgUrl, linkToSource }) => {
+    return (
+        <Card className="bg-dark text-white" style={{ width: '18rem', height: '30rem' }}>
+            <Card.Img variant="top" src={imgUrl} />
+            <Card.Body style={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
+            <Card.Title>{title}</Card.Title>
+            <Card.Text>{description}</Card.Text>
+            <Button className={linkToSource === "" ? "invisible-card" : "visible-card"} href={linkToSource} variant="primary">View source</Button>
+            </Card.Body>
+        </Card>
+    )
+}

src/components/Projects.tsx

@@ -1,61 +1,61 @@
+import { Row, Col } from "react-bootstrap";
 import electionImg from "../assets/project-icons/bavarian-state-election-2023.jpeg";
 import btor2Img from "../assets/project-icons/Btor2-cert.jpeg";
 import golImg from "../assets/project-icons/gol.png";
 import wfpImg from "../assets/project-icons/world-food-programme.jpeg";
 import cyberzulImg from "../assets/project-icons/cyberzul.png";
 import "../styles/Projects.css";
+import { ProjectCard } from "./ProjectCard";
 
 export const Projects = () => {
-
-    const projects = [
-        {
-            title: "Election Information System",
-            description: "A web tool consisting of a PERN stack that provides information about the Bavarian State Election 2023, by visualizing the results of SQL requests on a database.",
-            imgUrl: electionImg,
-        },
-        {
-            title: "Prediction of Refugee Movements",
-            description: "A web tool to predict refugee movements using agent-based modeling with the open source tool flee. This project was developed in collaboration with the World Food Programme and Netlight Consulting.",
-            imgUrl: wfpImg,
-        },
-        {
-            title: "Btor2-Cert",
-            description: "A tool to verify the correctness of hardware designs using software analyzers, by translating the hardware design into a software representation. The witness is then validated by a translation back to the hardware design, and validated with a hardware validator.",
-            imgUrl: btor2Img,
-        },
-        {
-            title: "Cyberzul",
-            description: "A futuristic adaptation of the board game Azul in Java. Enables the player to play against a computer opponent or against up to 4 human players in the same network or on the same machine.",
-            imgUrl: cyberzulImg,
-        },
-        {
-            title: "Game of Life",
-            description: "The good old Game of Life. A two-dimensional cellular automaton devised by John Conway. This project was developed in Java, with a Java Swing GUI.",
-            imgUrl: golImg,
-        },
-    ];
-    return (
-        <section className="projects" id="projects">
-            <div className="container">
-                <div className="row">
-                    <div className="col-12">
-                        <h2>Projects</h2>
-                    </div>
-                </div>
-                <div className="row">
-                    {projects.map((project, index) => {
-                        return (
-                            <div className="col-12 col-md-6 col-lg-4" key={index}>
-                                <div className="project-card">
-                                    <img src={project.imgUrl} alt="Project" />
-                                    <h3>{project.title}</h3>
-                                    <p>{project.description}</p>
-                                </div>
-                            </div>
-                        )
-                    })}
-                </div>
-            </div>
-        </section>
-    );
+  const projects = [
+    {
+      title: "Election Information System",
+      description: "A web tool consisting of a PERN stack that provides information about the Bavarian State Election 2023, by visualizing the results of SQL requests on a database.",
+      imgUrl: electionImg,
+      linkToSource: "https://github.com/sirrenberg/election-information-system"
+    },
+    {
+      title: "Prediction of Refugee Movements",
+      description: "A web tool to predict refugee movements using agent-based modeling with the open source tool flee. This project was developed in collaboration with the World Food Programme and Netlight Consulting.",
+      imgUrl: wfpImg,
+      linkToSource: "https://github.com/sirrenberg/SoftwareEngineering-WS2024-Caturanga"
+    },
+    {
+      title: "Btor2-cert",
+      description: "A tool to verify the correctness of hardware designs using software analyzers, by translating the hardware design into a software representation. The witness is then validated by a translation back to the hardware design, and validated with a hardware validator.",
+      imgUrl: btor2Img,
+      linkToSource: "https://www.sosy-lab.org/research/btor2-cert/"
+    },
+    {
+      title: "Cyberzul",
+      description: "A futuristic adaptation of the board game Azul in Java. Enables the player to play against a computer opponent or against up to 4 human players in the same network or on the same machine.",
+      imgUrl: cyberzulImg,
+      linkToSource: ""
+    },
+    {
+      title: "Game of Life",
+      description: "The good old Game of Life. A two-dimensional cellular automaton devised by John Conway. This project was developed in Java, with a Java Swing GUI.",
+      imgUrl: golImg,
+      linkToSource: ""
+    },
+  ];
+  return (
+    <section className="project" id="projects">
+      <Col size={12}>
+        <h2>Discover What I've Built</h2>
+        <Row className="justify-content-center align-items-center">
+          {
+            projects.map((project, index) => {
+              return (
+                <Col xs={12} sm={6} md={4} lg={2} key={index}>
+                  <ProjectCard {...project}/>
+                </Col>
+              )
+            })
+          }
+        </Row>
+      </Col>
+    </section>
+  );
 }

src/styles/Banner.css

@@ -1,5 +1,4 @@
 .banner {
-    width: 100%;
     height: 1080px;
     margin-top: 0;
     padding: 260px 0 100px 0;

src/styles/Projects.css

@@ -1,4 +1,20 @@
-.projects {
-    width: 100%; /* Adjust as needed */
-    height: 1500px; /* Adjust as needed */
+.project {
+    background-image: url('../assets/gimp-soft-large-airbrush.png');
+    height: 1080px; /* Adjust as needed */
+    display: flex; 
+    justify-content: center;
+}
+
+.project h2 {
+    margin-top: 2em;
+    margin-bottom: 2em;
+    font-size: 45px;
+    font-weight: 700;
+    text-align: center;
+}
+
+/************ ProjectCard ************/
+
+.invisible-card {
+    visibility: hidden;
 }