Add 2 projects to the main page.

routes.js

@@ -1,12 +1,15 @@
 module.exports = function(app){
+    let views = `${__dirname}/views`;
     //MAIN
-    app.get("/", (req, res)=>{res.sendFile(`${__dirname}/views/main/index.html`)});
-    app.get("/style", (req, res)=>{res.sendFile(`${__dirname}/views/main/index.css`)});
+    app.get("/", (req, res)=>{res.sendFile(`${views}/main/index.html`)});
+    app.get("/style", (req, res)=>{res.sendFile(`${views}/main/index.css`)});
 
     //WRITING
-    app.get("/writing/style", (req, res)=>{res.sendFile(`${__dirname}/views/writing/index.css`)});
-    app.get("/writing/touchscreens", (req, res)=>{res.sendFile(`${__dirname}/views/writing/touchscreens.html`)});
+    app.get("/writing/style", (req, res)=>{res.sendFile(`${views}/writing/index.css`)});
+    app.get("/writing/touchscreens", (req, res)=>{res.sendFile(`${views}/writing/touchscreens.html`)});
 
     //IMAGES
-    app.get("/images/touchscreen", (req, res)=>{res.sendFile(`${__dirname}/views/images/touchscreen.jpeg`)});
+    app.get("/images/touchscreen", (req, res)=>{res.sendFile(`${views}/images/touchscreen.jpeg`)});
+    app.get("/images/subline", (req, res)=>{res.sendFile(`${views}/images/subline.png`)});
+    app.get("/images/budgeteer", (req, res)=>{res.sendFile(`${views}/images/budgeteer.jpeg`)});
 }

views/main/index.css

@@ -18,15 +18,30 @@ body{
     padding: 25px;
     text-decoration: none;
     color: black;
+    margin: 25px;
 }
 
     .card:hover{
-        border: 1px solid black;
+        box-shadow: 0 0 3px black;
+    }
+
+    .card h2{
+        margin-bottom: auto;
     }
 
     .card img{
         margin-top: 10px;
         width: 90%;
+        max-height: 150px;
+        max-width: 150px;
+    }
+
+    .card p{
+        text-align: justify;
+    }
+
+    .card > *{
+        margin: 10px 0;
     }
 
 .sidebar{
@@ -97,11 +112,11 @@ body{
     width: 75vw;
 }
 
-    #writing{
+    .cardContainer{
         display: flex;
         flex-wrap: wrap;
         height: 100%;
         width: 100%;
         box-sizing: border-box;
         padding: 25px;
-    }
+    }

views/main/index.html

@@ -83,11 +83,21 @@
                 <h1>About Me</h1>
             </div>
 
-            <div id="projects" style="display:none;">
-                <h1>My Projects</h1>
+            <div id="projects" class="cardContainer" style="display:none;">
+                <a class="card" href="https://thesubline.com">
+                    <h2>The Subline</h2>
+                    <img src="/images/subline" alt="The Subline">
+                    <p>A web application to assist restaurant owners in managing their inventories. Providing insights into usage, waste and other details through the use of data.</p>
+                </a>
+
+                <a class="card" href="https://budgeteer.money">
+                    <h2>Budgeteer</h2>
+                    <img src="/images/budgeteer" alt="Budgeteer">
+                    <p>A simple web application to help people to budget their money in a simple and approachable manner.</p>
+                </a>
             </div>
 
-            <div id="writing" style="display:none;">
+            <div id="writing" class="cardContainer" style="display:none;">
                 <a class="card" href="/writing/touchscreens">
                     <h2>Touchscreens, An Essay</h2>
                     <img src="/images/touchscreen" alt="touchscreen">