fix: properly handle binary proxied responses, enforce bun usage, proper mobile-friendly frontend

src/main.rs

@@ -503,7 +503,7 @@ async fn isr_handler(State(state): State<Arc<AppState>>, req: Request) -> Respon
 async fn proxy_to_bun(
     url: &str,
     state: Arc<AppState>,
-) -> Result<(StatusCode, HeaderMap, String), ProxyError> {
+) -> Result<(StatusCode, HeaderMap, axum::body::Bytes), ProxyError> {
     let client = if state.unix_client.is_some() {
         state.unix_client.as_ref().unwrap()
     } else {
@@ -532,7 +532,7 @@ async fn proxy_to_bun(
         }
     }
 
-    let body = response.text().await.map_err(ProxyError::Network)?;
+    let body = response.bytes().await.map_err(ProxyError::Network)?;
     Ok((status, headers, body))
 }
 

web/package.json

@@ -1,7 +1,9 @@
 {
   "private": true,
   "type": "module",
+  "packageManager": "bun@latest",
   "scripts": {
+    "preinstall": "npx only-allow bun",
     "dev": "vite dev",
     "build": "vite build",
     "preview": "vite preview",

web/src/routes/+layout.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-  import "../app.css";
+  import "@fontsource-variable/inter/wght.css";
-  import "@fontsource-variable/inter";
   import "@fontsource/hanken-grotesk/900.css";
-  import "@fontsource-variable/schibsted-grotesk";
+  import "@fontsource-variable/schibsted-grotesk/wght.css";
+  import "../app.css";
 
   let { children, data } = $props();
 

web/src/routes/+page.svelte

@@ -12,17 +12,17 @@
 
   <div class="flex items-center flex-col">
     <div
-      class="max-w-2xl mx-6 border-b border-zinc-700 divide-y divide-zinc-700"
+      class="max-w-2xl mx-4 border-b border-zinc-700 divide-y divide-zinc-700 sm:mx-6"
     >
       <div class="flex flex-col pb-4">
-        <span class="text-3xl font-bold text-white">Ryan Walters,</span>
+        <span class="text-2xl font-bold text-white sm:text-3xl">Ryan Walters,</span>
-        <span class="text-2xl font-normal text-zinc-400">
+        <span class="text-xl font-normal text-zinc-400 sm:text-2xl">
           Full-Stack Software Engineer
         </span>
       </div>
 
       <div class="py-4 text-zinc-200">
-        <p class="text-[0.95em]">
+        <p class="text-sm sm:text-[0.95em]">
           A fanatical software engineer with expertise and passion for sound,
           scalable and high-performance applications. I'm always working on
           something new. <br />
@@ -32,41 +32,41 @@
 
       <div class="py-3">
         <span class="text-zinc-200">Connect with me</span>
-        <div class="flex gap-x-2 pl-3 pt-3 pb-2">
+        <div class="flex flex-wrap gap-2 pl-3 pt-3 pb-2">
           <a
             href="https://github.com/Xevion"
             class="flex items-center gap-x-1.5 px-1.5 py-1 rounded-sm bg-zinc-900 shadow-sm hover:bg-zinc-800 transition-colors"
           >
             <IconSimpleIconsGithub class="size-4 text-zinc-300" />
-            <span class="text-sm text-zinc-100">GitHub</span>
+            <span class="whitespace-nowrap text-sm text-zinc-100">GitHub</span>
           </a>
           <a
             href="https://linkedin.com/in/ryancwalters"
             class="flex items-center gap-x-1.5 px-1.5 py-1 rounded-sm bg-zinc-900 shadow-sm hover:bg-zinc-800 transition-colors"
           >
             <IconSimpleIconsLinkedin class="size-4 text-zinc-300" />
-            <span class="text-sm text-zinc-100">LinkedIn</span>
+            <span class="whitespace-nowrap text-sm text-zinc-100">LinkedIn</span>
           </a>
           <button
             type="button"
             class="flex items-center gap-x-1.5 px-1.5 py-1 rounded-sm bg-zinc-900 shadow-sm hover:bg-zinc-800 transition-colors"
           >
             <IconSimpleIconsDiscord class="size-4 text-zinc-300" />
-            <span class="text-sm text-zinc-100">Discord</span>
+            <span class="whitespace-nowrap text-sm text-zinc-100">Discord</span>
           </button>
           <a
             href="mailto:your.email@example.com"
             class="flex items-center gap-x-1.5 px-1.5 py-1 rounded-sm bg-zinc-900 shadow-sm hover:bg-zinc-800 transition-colors"
           >
             <MaterialSymbolsMailRounded class="size-4.5 text-zinc-300" />
-            <span class="text-sm text-zinc-100">Email</span>
+            <span class="whitespace-nowrap text-sm text-zinc-100">Email</span>
           </a>
           <button
             type="button"
             class="flex items-center gap-x-1.5 px-1.5 py-1 rounded-sm bg-zinc-900 shadow-sm hover:bg-zinc-800 transition-colors"
           >
             <MaterialSymbolsVpnKey class="size-4.5 text-zinc-300" />
-            <span class="text-sm text-zinc-100">PGP Key</span>
+            <span class="whitespace-nowrap text-sm text-zinc-100">PGP Key</span>
           </button>
         </div>
       </div>