added one ai project.

public/src/Home.js

@@ -4,11 +4,22 @@ import ProjectCard from './components/ProjectCard';
 import Footer from './components/Footer';
 import FeaturedContent from './components/FeaturedContent';
 
-export default function Home() {
-  const projectCards = [
-    <ProjectCard img="./assets/img/dnd.png" name="D&D" description="Dungeons and Dragons character builder app, developed in Java." url="https://github.com/quaxlyqueen/dnd"/>,
-    <ProjectCard img="./assets/img/graph.png" name="Graph Visualizer" description="Interactive representation of a graph data structure, developed in Java." url="https://github.com/quaxlyqueen/2420-graph-visualizer"/>,
-  ];
+export default function Home( {projects} ) {
+  const projectCards = projects.map((project) => {
+    // Create a new ProjectCard object for each project in the 'projects' array
+    return (
+      <ProjectCard
+        key={project.id} // Add a unique key for each ProjectCard
+        frontend={project.frontend}
+        backend={project.backend}
+        id={project.id}
+        name={project.name}
+        description={project.description}
+        url={project.url}
+        img={project.img}
+      />
+    );
+  });
   return (
     <>
       <Navigation />

public/src/Projects.js

@@ -4,49 +4,30 @@ import ProjectCard from './components/ProjectCard';
 
 /*
  * The Projects page.
+ *
+ * @param String[] projects "An array of attributes, frontend, backend, id, name, description, url, img, and imgCaption"
  */
-export default function Projects() {
-  /*
-   * An array of project data to feed to the ProjectDisplay component.
-     {
-        frontend: "",
-        backend: "",
-        id: "",
-        name: "",
-        description: "",
-        url: "",
-        img: ""
-     },
-   */
-  const data = [
-     {
-        frontend: "java",
-        backend: "",
-        id: "dnd",
-        name: "D&D",
-        description: "Dungeons and Dragons character builder app, developed in Java.",
-        url: "https://github.com/quaxlyqueen/dnd",
-        img: "/assets/img/dnd.png"
-     },
-     {
-        frontend: "java",
-        backend: "",
-        id: "graph",
-        name: "Graph Visualizer",
-        description: "Interactive representation of a graph data structure, developed in Java.",
-        url: "https://github.com/quaxlyqueen/2420-graph-visualizer",
-        img: "/assets/img/graph.png"
-     },
-  ];
-
-  let i = 0;
+export default function Projects( {projects} ) {
+   const projectCards = projects.map((project) => {
+      // Create a new ProjectCard object for each project in the 'projects' array
+      return (
+         <ProjectCard
+         key={project.id} // Add a unique key for each ProjectCard
+         frontend={project.frontend}
+         backend={project.backend}
+         id={project.id}
+         name={project.name}
+         description={project.description}
+         url={project.url}
+         img={project.img}
+         />
+      );
+   });
   return (
     <>
       <Navigation />
         <div className="project-grid">
-          {data.map(item => (
-            <ProjectCard frontend={item.frontend} backend={item.backend} id={item.id} name={item.name} description={item.description} url={item.url} img={item.img} />
-          ))}
+            {projectCards}
         </div>
       <Footer />
     </>

public/src/components/FeaturedContent.js

@@ -8,7 +8,7 @@
 export default function FeaturedContent( {content} ) {
   return (
     <>
-      <div className="row">
+      <div className="row flex-row">
         <div className="col">
           {content[0]}
         </div>

public/src/components/ProjectCard.js

@@ -9,9 +9,10 @@
  * @param String url "The URL for the repository of the project."
  * @param String img "Path to an image."
  * @param String imgCaption "Accessibile caption for the image."
+ *
+ * TODO: Add project keys.
  */
 export default function ProjectCard( {frontend, backend, id, name, description, url, img, imgCaption} ) {
-  console.log(img);
   return (
     <>
       <div className={`card ${frontend} ${backend}`}>

public/src/index.js

@@ -14,11 +14,57 @@ import Resume from "./Resume";
 
 const root = document.getElementById("root");
 
+/*
+ * TEMPLATE:
+ {
+    frontend: "",
+    backend: "",
+    id: "",
+    name: "",
+    description: "",
+    url: "",
+    img: "",
+    imgCaption: ""
+ },
+ */
+const projects = [
+  {
+    frontend: "java",
+    backend: "",
+    id: "graph",
+    name: "Graph",
+    description: "Interactive representation of a graph data structure, developed in Java.",
+    url: "https://github.com/quaxlyqueen/2420-graph-visualizer",
+    img: "/assets/img/graph.png",
+    imgCaption: "A screenshot of my graph data structure visualizer application."
+  },
+  {
+    frontend: "flutter",
+    backend: "go",
+    id: "one-ai",
+    name: "OneAI",
+    description: "An end-to-end deployment wrapper for Meta's Ollama.",
+    url: "https://github.com/quaxlyqueen/one-ai",
+    img: "/assets/img/one-ai.png",
+    imgCaption: "A screenshot of a conversation with a self-hosted artificial intelligence."
+  },
+  {
+    frontend: "java",
+    backend: "",
+    id: "dnd",
+    name: "D&D",
+    description: "A Dungeons and Dragons character builder app, developed in Java.",
+    url: "https://github.com/quaxlyqueen/dnd",
+    img: "/assets/img/dnd.png",
+    imgCaption: "A screenshot of my Dungeons and Dragons character builder application."
+  },
+];
+
 ReactDOM.createRoot(root).render(
   <BrowserRouter>
     <Routes>
-      <Route path="/" element={<Home />} />
-      <Route path="/projects" element={<Projects />} />
+      <Route path="/" element={<Home projects={projects} />} />
+      <Route path="/projects" element={<Projects projects={projects} />} />
       <Route path="/contact" element={<Contact />} />
       <Route path="/about" element={<About />} />
       <Route path="/blog" element={<Blog />} />

public/src/styles.css

@@ -306,6 +306,16 @@ input[type="radio"]:hover + label {
     font-size: 2vw;
 }
 
+.flex-row {
+  display: flex; /* Enable flexbox layout */
+  height: 100%; /* Set the height of the container */
+}
+
+.flex-row > .col {
+  display: flex; 
+  flex-direction: column; /* Ensure content flows vertically */
+  height: 100%; /* Make each column fill the container's height */
+}
 
 /*Buttons*/
 .btn {
@@ -409,6 +419,25 @@ input[type="radio"]:hover + label {
   .social-links li a {
       font-size: 2vw;
   }
+    h1 {
+        font-size: 8vw;
+    }
+
+    h2 {
+        font-size: 6vw;
+    }
+
+    h3, .navbar-brand {
+        font-size: 5vw;
+    }
+
+    h4 {
+        font-size: 3vw;
+    }
+
+    p, .nav-link, .nav-link > .nav-item {
+        font-size: 2vw;
+    }
 }
 
 @media (max-width: 991px) {