fix: background dots on portfolio page

src/routes/portfolio/+page.svelte

@@ -11,14 +11,15 @@
   <meta name="author" content="Youwen Wu" />
 </svelte:head>
 
-<main class="container mx-auto max-w-5xl my-20 dots-background">
+<div class="dots-background py-20">
+  <main class="container mx-auto max-w-5xl bg-background rounded-lg py-4">
     <h1 class="font-serif text-5xl font-medium tracking-tight">
       Portfolio
       <hr class="w-32 mt-0.5 h-1 bg-muted-foreground rounded-lg" />
     </h1>
     <p class="text-xl mt-4">
-    Here's some of the stuff I've worked on which I think is notable or interesting enough to write
-    about.
+      Here's some of the stuff I've worked on which I think is notable or interesting enough to
+      write about.
     </p>
     <h2 class="text-4xl font-serif font-medium mt-8">Projects</h2>
     <hr class="w-32 mt-1 h-1 bg-muted-foreground rounded-lg" />
@@ -43,8 +44,8 @@
             <p>
               It displays the robot's telemetry through a network connection established via the
               NetworkTables protocol, including speed, orientation, acceleration, heading, and other
-            vital metrics. It also features a full 3D robot visualization and looks like a Tesla UI.
-            It was used in production for the first time at the <a
+              vital metrics. It also features a full 3D robot visualization and looks like a Tesla
+              UI. It was used in production for the first time at the <a
                 class="link"
                 href="https://cafirst.org/frc/centralvalley/">Central Valley Regional</a
               >, where we made it to the playoffs as 2nd pick.
@@ -79,4 +80,5 @@
     <h2 class="text-4xl font-serif font-medium mt-8">Research</h2>
     <hr class="w-32 mt-1 h-1 bg-muted-foreground rounded-lg" />
     <p class="text-lg mt-8">Nothing here for now...</p>
-</main>
+  </main>
+</div>