Fixed webpage functionality on mobile

package.json

@@ -4,7 +4,7 @@
 	"version": "0.0.1",
 	"type": "module",
 	"scripts": {
-		"dev": "vite dev",
+		"dev": "vite dev --host",
 		"build": "vite build",
 		"preview": "vite preview",
 		"format": "prettier --write .",

src/app.css

@@ -2,6 +2,16 @@
 @import 'tailwindcss/components';
 @import 'tailwindcss/utilities';
 
+* {
+  overflow-x: hidden;
+}
+
+*:not(a),
+*:not(button),
+*:not(input) {
+  user-select: none;
+}
+
 /* @font-face {
   font-family: 'Nunita';
   src: url('$lib/assets/fonts/Nunito-VariableFont_wght.ttf');

src/lib/components/Contact.svelte

@@ -4,7 +4,7 @@
 </script>
 
 <div class="w-screen h-screen flex justify-center items-center">
-  <form action="?/contact" class="dark:bg-surface-900 bg-surface-200 w-1/2 min-h-max p-8 rounded-md">
+  <form action="?/contact" class="w-full min-h-full dark:bg-surface-900 bg-surface-200 lg:w-1/2 lg:min-h-max p-8 rounded-md pr-12 lg:pr-8">
     <h1 class="h1 font-bold ps-4 pb-4">Contact Us</h1>
     <hr class="opacity-25" />
     <p class="pt-4">Fullname</p>
@@ -29,7 +29,7 @@
       </select>
     </div>
     <p>Your Message</p>
-    <textarea class="textarea mb-4" rows="4" placeholder="What can we help you with?" required ></textarea>
+    <textarea class="textarea mb-4" rows="4" placeholder="..." required ></textarea>
     <div class="w-full text-end">
       <button type="submit" class="btn variant-filled-primary">Submit</button>
     </div>

src/lib/components/Hero.svelte

@@ -10,7 +10,7 @@
 </script>
 
 <div class="text-center h-max self-center" id="hero">
-  <h1 class="h1">Backwards Development</h1>
+  <h1 class="h1 overflow-hidden">Backwards Development</h1>
   <h4 class="h4">A Software Development and Distribution Company</h4>
   <div class="flex justify-evenly pt-4">
     <a href="https://github.com/BackwardsUser/" class="btn variant-filled-surface text-2xl p-3 rounded-md spin">

src/lib/components/Projects.svelte

@@ -14,8 +14,8 @@
 
 
 <div class="min-h-screen">
-  <h2 class="h2 text-center w-screen pt-4">Projects</h2>
+  <h2 class="h2 text-center w-screen pt-4 overflow-hidden">Projects</h2>
-  <div class="flex gap-4 p-4 w-max m-auto">
+  <div class="flex flex-wrap gap-4 p-4 w-max max-w-full m-auto">
     {#each projects as project}
       <a href={project.url} class="card w-min variant-glass-surface card-hover overflow-hidden flex flex-col">
         <header>

src/lib/components/TechStack.svelte

@@ -3,16 +3,34 @@
   import { Avatar } from '@skeletonlabs/skeleton';
 </script>
 
-<div class="w-screen h-screen flex flex-col justify-center items-center">
+<!-- <div class="w-screen h-screen text-center pb-32 flex justify-center items-center px-8">
-  <h2 class="h2 font-bold pb-0">Our Preferred Tech Stack</h2>
+  <div class="wrapper h-max overflow-visible">
-  <span class="text-sm pt-0 pb-4 text-surface-200">Subject to change</span>
+    <h2 class="h2 font-bold pb-0 w-full overflow-hidden">My Current Tech Stack</h2>
-  <div class="w-1/2 flex flex-wrap gap-4 justify-center">
+    <span class="text-sm pt-0 text-surface-700 dark:text-surface-200">Subject to change</span>
+    <div class="pt-4 m-auto w-max max-w-full h-max flex flex-wrap gap-4 justify-center">
+      {#each Techs as tech}
+        <a href="{tech.url}" class="min-w-72 flex flex-row justify-between items-center card card-hover p-4 hover:bg-surface-700 rounded-lg">
+          <Avatar class="p-2" src={tech.logo} alt={`Logo of ${tech.name}`} />
+          <span class="text-xl">{tech.name}</span>
+          <div class="spacer"></div>
+        </a>
+      {/each}
+    </div>
+  </div>
+</div> -->
+
+<div class="w-screen h-max min-h-screen flex flex-col justify-center items-center py-32">
+  <div class="header-wrapper text-center overflow-visible">
+    <h2 class="flex-shrink-0 flex-grow-1 h2 font-bold pb-0 w-full overflow-hidden">My Current Tech Stack</h2>
+    <span class="text-sm pt-0 text-surface-700 dark:text-surface-200">Subject to Change</span>
+  </div>
+  <div class="pt-4 w-max max-w-full h-max flex flex-wrap gap-4 justify-center overflow-visible">
     {#each Techs as tech}
-      <a href={tech.url} class="min-w-72 flex flex-row justify-between items-center card card-hover p-4 hover:bg-surface-700 rounded-lg">
+      <a href="{tech.url}" class="min-w-72 flex flex-row justify-between items-center card card-hover p-4 dark:hover:bg-surface-700 hover:bg-surface-200 rounded-lg">
         <Avatar class="p-2" src={tech.logo} alt={`Logo of ${tech.name}`} />
         <span class="text-xl">{tech.name}</span>
         <div class="spacer"></div>
       </a>
     {/each}
   </div>
-</div>
+</div>

src/routes/+page.svelte

@@ -62,11 +62,17 @@
   }
 
   .section {
-    scroll-snap-align: start;
     min-height: 100vh; /* Full viewport height */
     width: 100vw;
   }
 
+  /* Scroll Snapping works well with a mouse, but without it feels forced, weird and wrong. */
+  @media (width >= 64rem) {
+    .section {
+      scroll-snap-align: center;
+    }
+  }
+
   /* Tracker Styles */
   .tracker {
     position: fixed;