Add one-column view for projects

Author: imisaacwu

src/components/ProjectTile.css

@@ -1,10 +1,11 @@
 #tile-wrap {
     display: flex;
+    flex: 1;
     flex-direction: column;
     align-content: center;
 
     margin: 16px;
-    width: 45vw;
+    width: 100%;
 }
 
 #tile {
@@ -56,6 +57,7 @@
 #tile #description {
     flex: auto;
     padding: 0.5vh;
+    min-width: 285px;
     font-size: 16px;
 }
 

src/components/Projects.css

@@ -10,4 +10,20 @@
     display: flex;
     flex-direction: row;
     margin: 8px 0;
+}
+
+#one-col {
+    display: none;
+    flex-direction: column;
+    align-items: center;
+}
+
+@media screen and (max-width: 1024px) {
+    #two-col {
+        display: none;
+    }
+
+    #one-col {
+        display: flex;
+    }
 }

src/components/Projects.tsx

@@ -20,7 +20,9 @@ export const Projects = () => {
                     </div>
                 )}
             </div>
-            {/* {tiles} */}
+            <div id='one-col'>
+                {tiles}
+            </div>
         </div>
     )
 }