updates

components/PortfolioEntry.jsx

@@ -36,7 +36,17 @@ export default function PortfolioEntry({ title, description, url, image }) {
     return (
         <div className="portfolio-entry-block">
             <h2 style={ { marginTop: "0" } }><TextShuffler textInput={ title } /></h2>
-            <img src={ image } alt="" />
+            <div style={ {
+                width: "100%",
+                height: "300px",
+                marginBottom: "15px"
+            } }>
+                <img src={ image } alt="" style={ {
+                    width: "100%",
+                    height: "100%",
+                    objectFit: "cover"
+                } } />
+            </div>
             <span>
                 <TextShuffler textInput={ description } />
             </span>

components/portfolioEntries.json

@@ -1,4 +1,16 @@
 [
+    {
+        "title": "Stirrmedia Social webapp",
+        "description": "A new social media experience without censorship",
+        "url": "https://stirrmedia.com",
+        "image": "/images/stirrmediascreenshot.png"
+    },
+    {
+        "title": "Traderhub",
+        "description": "A marketplace for traders of all kinds in Nigeria",
+        "url": "https://traderhub.ng",
+        "image": "/images/traderhubscreenshot.png"
+    },
     {
         "title": "Next 7 Web Engine",
         "description": "Next 7 is an all-in-one web engine featuring a web page builder and a content management system",

styles/main.css

@@ -245,10 +245,10 @@ nav a:hover {
 
 /*############################################# -- Portfolio page */
 .portfolio-entries-block {
-    display: flex;
-    align-items: flex-start;
+    display: grid;
     gap: 40px;
-    flex-wrap: wrap;
+    grid-template-columns: 1fr 1fr;
+    width: 100%;
 }
 
 .portfolio-entry-block {
@@ -319,6 +319,9 @@ textarea {
 }
 
 @media (max-width: 990px) {
+    .portfolio-entries-block {
+        grid-template-columns: 1fr;
+    }
 }
 
 @media (max-width: 800px) {