hardcoded projects #11

src/app/page.module.scss

@@ -24,10 +24,21 @@
     }
 }
 
+.p1{
+    background: url('./project-images/alveus-ambassadors.png');
+}
+.p2{
+    background: url('./project-images/twitch-chatbot.png');
+}
+.p3{
+    background: url('./project-images/motivation-scale.png');
+}
+.p4{
+    background: url('./project-images/erobb221-extension.png');
+}
 .project{
     height: 100vh;
 
-    background: url('./img.png');
     background-repeat: no-repeat;
     background-size: cover;
     background-attachment: fixed;

src/app/page.tsx

@@ -12,19 +12,51 @@ export default function Home() {
         </h1>
       </main>
 
-      <section className={styles.project}>
+      <section className={`${styles.project} ${styles.p1}`}>
         <div className={styles.projectInfo}>
           <h3 className={styles.number}>01</h3>
+          <h3 className={styles.name}>Alveus Ambassadors</h3>
+          <p className={styles.description}>A Twitch extension that helps an animal sanctuary educate viewers about animal conservation</p>
+
+          <ul className={styles.links}>
+            <li><a href="https://www.twitch.tv/alveussanctuary">view project</a></li>
+            <li><a href="https://github.com/alveusgg/extension" target="_blank">git repo</a></li>
+          </ul>
+        </div>
+      </section>
+      <section className={`${styles.project} ${styles.p2}`}>
+        <div className={styles.projectInfo}>
+          <h3 className={styles.number}>02</h3>
+          <h3 className={styles.name}>Twitch Chatbot</h3>
+          <p className={styles.description}>A chatbot that tells jokes, and facts, and links fun images for Twitch chatters to enjoy.</p>
+
+          <ul className={styles.links}>
+            <li><a href="https://github.com/abdullahmorrison/TwitchChatBot" target="_blank">git repo</a></li>
+          </ul>
+        </div>
+      </section>
+      <section className={`${styles.project} ${styles.p3}`}>
+        <div className={styles.projectInfo}>
+          <h3 className={styles.number}>03</h3>
           <h3 className={styles.name}>Motivation Scale</h3>
           <p className={styles.description}>A mindfulness tool about motivation.</p>
 
           <ul className={styles.links}>
-            <li><a href="">view project</a></li>
-            <li><a href="">git repo</a></li>
+            <li><a href="https://github.com/abdullahmorrison?tab=repositories" target="_blank">git repo</a></li>
           </ul>
         </div>
       </section>
+      <section className={`${styles.project} ${styles.p4}`}>
+        <div className={styles.projectInfo}>
+          <h3 className={styles.number}>04</h3>
+          <h3 className={styles.name}>Erobb221 Twitch Extension</h3>
+          <p className={styles.description}>A Twitch extension that lets viewers play bingo about and throw tomatoes at erobb221.</p>
 
+          <ul className={styles.links}>
+            <li><a href="https://github.com/abdullahmorrison/Erobb221TwitchExtension" target="_blank">git repo</a></li>
+          </ul>
+        </div>
+      </section>
     </div>
   )
 }