added size warning for chatjs

projects.css

@@ -43,6 +43,7 @@ body {
     overflow: hidden;
     border-top-left-radius: 10px;
     border-top-right-radius: 10px;
+    position: relative;
 }
 
 .project-preview img {
@@ -118,3 +119,36 @@ body {
         margin: 30px 0;
     }
 }
+
+.centered-text {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%) rotate(45deg); /* Rotate the text diagonally */
+    font-size: 25px;
+    font-weight: bold;
+    color: red !important;
+    filter: none !important;
+    text-shadow: 2px 2px 4px rgba(0,0,0,0.6);
+    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
+    width: 90%;
+    z-index: 999;
+    display: none;
+}
+
+@media (max-width: 500px) {
+    .chatJS-toGrey {
+        /* https://stackoverflow.com/questions/5081690/how-to-gray-out-a-html-element lmao 
+        opacity: 0.5; /* Real browsers * /
+        filter: alpha(opacity = 60); /* MSIE */
+        filter: grayscale(100%);
+    }
+
+    .centered-text {
+        display: block;
+    }
+
+    .chatJS-info {
+        background-color: #808080;
+    }
+}

projects.html

@@ -5,8 +5,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta property="og:title" content="ION606.com">
-    <meta property="og:description"
+    <meta property="og:description" content="My personal website!">
-        content="My personal website!">
     <meta property="og:image" content="https://avatars.githubusercontent.com/u/58801387">
     <meta property="og:url" content="https://ion606.com/">
     <meta property="og:type" content="website">
@@ -54,12 +53,14 @@
             </div>
         </div>
 
-        <div class="project-card" onclick="window.open('https://chat.ion606.com', target='_blank')">
+        <div class="project-card chatJS-info" onclick="window.open('https://chat.ion606.com', target='_blank')">
             <div class="project-preview">
-                <img src="https://github.com/Proto-Chat/chatJS-main/blob/main/client/assets/favicon.png?raw=true"
+                <p class="centered-text">SCREEN MUST BE LARGER THAN 500PX</p>
+                <img class="chatJS-toGrey"
+                    src="https://github.com/Proto-Chat/chatJS-main/blob/main/client/assets/favicon.png?raw=true"
                     alt="Online Chat Application Preview">
             </div>
-            <div class="project-info">
+            <div class="project-info chatJS-toGrey">
                 <h2>Online Chat Application</h2>
                 <p>My online chat application (it's....it's a Discord clone).</p>
                 <a href="https://chat.ion606.com" target="_blank">Visit Website</a>