Backwards/backwards.dev
1
0
Fork 1
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Fixed webpage functionality on mobile

Browse Source
This commit is contained in:
Harding 2025-02-26 15:43:32 -05:00
parent fd2e34c351
commit e46137d2df
7 changed files with 47 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -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 .",

10
src/app.css
View File

@ -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');

4
src/lib/components/Contact.svelte
View File

@ -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>

2
src/lib/components/Hero.svelte
View File

@ -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">

4
src/lib/components/Projects.svelte
View File

@ -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>

30
src/lib/components/TechStack.svelte
View File

@ -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>

8
src/routes/+page.svelte
View File

@ -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;