From e46137d2df6a8344cd15a5d50963b571cc72dbb3 Mon Sep 17 00:00:00 2001
From: Harding <000894566@mohawkcollege.ca>
Date: Wed, 26 Feb 2025 15:43:32 -0500
Subject: [PATCH] Fixed webpage functionality on mobile

---
 package.json                        |  2 +-
 src/app.css                         | 10 ++++++++++
 src/lib/components/Contact.svelte   |  4 ++--
 src/lib/components/Hero.svelte      |  2 +-
 src/lib/components/Projects.svelte  |  4 ++--
 src/lib/components/TechStack.svelte | 30 +++++++++++++++++++++++------
 src/routes/+page.svelte             |  8 +++++++-
 7 files changed, 47 insertions(+), 13 deletions(-)

diff --git a/package.json b/package.json
index 21a4cd3..f325819 100644
--- a/package.json
+++ b/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 .",
diff --git a/src/app.css b/src/app.css
index 4465d8c..8abcca8 100644
--- a/src/app.css
+++ b/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');
diff --git a/src/lib/components/Contact.svelte b/src/lib/components/Contact.svelte
index d1b46ce..2945fbd 100644
--- a/src/lib/components/Contact.svelte
+++ b/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>
diff --git a/src/lib/components/Hero.svelte b/src/lib/components/Hero.svelte
index 561ea56..1585cb9 100644
--- a/src/lib/components/Hero.svelte
+++ b/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">
diff --git a/src/lib/components/Projects.svelte b/src/lib/components/Projects.svelte
index 76a18e8..0580be0 100644
--- a/src/lib/components/Projects.svelte
+++ b/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>
-  <div class="flex gap-4 p-4 w-max m-auto">
+  <h2 class="h2 text-center w-screen pt-4 overflow-hidden">Projects</h2>
+  <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>
diff --git a/src/lib/components/TechStack.svelte b/src/lib/components/TechStack.svelte
index 2642557..c01b1cd 100644
--- a/src/lib/components/TechStack.svelte
+++ b/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">
-  <h2 class="h2 font-bold pb-0">Our Preferred Tech Stack</h2>
-  <span class="text-sm pt-0 pb-4 text-surface-200">Subject to change</span>
-  <div class="w-1/2 flex flex-wrap gap-4 justify-center">
+<!-- <div class="w-screen h-screen text-center pb-32 flex justify-center items-center px-8">
+  <div class="wrapper h-max overflow-visible">
+    <h2 class="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 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>
\ No newline at end of file
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 9c54953..b0d1a15 100644
--- a/src/routes/+page.svelte
+++ b/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;