phone screens message

shettysach · Aug 25, 2024 · efbf9c3 · efbf9c3
1 parent 3664c5f
commit efbf9c3
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 4 deletions.
diff --git a/configs/config.json b/configs/config.json
@@ -7,7 +7,7 @@
 
     "interests": ["Artificial Intelligence", "Machine Learning", "LLMs", "GNU-Linux", "CLIs / TUIs", "Embedded Systems", "WASM"],
 
-    "langs": ["Rust", "Python", "C++", "Bash", "Dart"],
+    "langs": ["Rust", "Python", "C", "C++", "Bash", "Dart"],
 
     "experience": [
       {

diff --git a/index.html b/index.html
@@ -19,7 +19,41 @@
       href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap"
       rel="stylesheet"
     />
+
+    <style>
+      #orientation-warning {
+        display: none;
+        position: fixed;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0, 0, 0, 0.85);
+        color: white;
+        font-size: 1.2rem;
+        text-align: center;
+        padding-top: 30vh;
+      }
+    </style>
   </head>
 
-  <body></body>
+  <body>
+    <div id="orientation-warning">
+      For the best experience, please use landscape mode or switch to a wider
+      screen.
+    </div>
+
+    <script>
+      function checkOrientation() {
+        const isPortrait = window.innerHeight > window.innerWidth;
+        const warning = document.getElementById("orientation-warning");
+        if (isPortrait) {
+          warning.style.display = "block";
+        } else {
+          warning.style.display = "none";
+        }
+      }
+
+      window.addEventListener("resize", checkOrientation);
+      window.addEventListener("load", checkOrientation);
+    </script>
+  </body>
 </html>
diff --git a/styles/styles.css b/styles/styles.css
@@ -18,7 +18,7 @@
   color: var(--white);
   text-underline-offset: 8px;
   text-decoration-thickness: 2px;
-  /* text-shadow: 0px 5px 10px currentColor; */
+  /*text-shadow: 0px 3px 8px currentColor;*/
 }
 
 input {
@@ -31,7 +31,7 @@ input {
 form {
   display: inline-block;
   margin-bottom: 0px;
-  /* caret-shape: block; */
+  caret-shape: block;
   caret-color: var(--green);
   font-weight: 500;
 }