fix: remove unnecessary max-width classes from various components

feat: add launch configuration for development environment

src/sections/Activity.tsx

@@ -41,7 +41,7 @@ export function Activity() {
       </div>
 
       <div className="mx-auto max-w-5xl rounded-3xl border border-white/10 bg-white/5 p-3 shadow-[0_20px_80px_rgba(0,0,0,0.35)] backdrop-blur-sm sm:p-4 md:p-6">
-        <div className="overflow-hidden rounded-2xl border border-white/10 bg-[#0a0a12]">
+        <div className="overflow-x-auto rounded-2xl border border-white/10 bg-[#0a0a12]">
           <img
             src={activitySvg}
             alt="Git activity graph"

src/sections/Affiliates.tsx

@@ -50,7 +50,7 @@ export function Affiliates() {
             href={affiliate.link}
             target="_blank"
             rel="noopener noreferrer"
-            className="mx-auto w-full max-w-[20rem] rounded-xl border border-white/10 bg-white/5 p-4 backdrop-blur-sm transition-all duration-300 hover:border-purple-500/40 hover:bg-white/10 sm:max-w-none sm:p-4"
+            className="w-full rounded-xl border border-white/10 bg-white/5 p-4 backdrop-blur-sm transition-all duration-300 hover:border-purple-500/40 hover:bg-white/10"
           >
             <div className="flex flex-col items-center text-center gap-2 mb-3">
               <img

src/sections/AgentSkills.tsx

@@ -25,7 +25,7 @@ export function AgentSkills() {
           {skills.map((skill, index) => (
             <article
               key={`${skill.name}-${index}`}
-              className="group mx-auto w-full max-w-[20rem] rounded-3xl border border-amber-500/20 bg-gradient-to-br from-amber-500/10 via-white/5 to-orange-500/5 p-5 shadow-[0_0_0_1px_rgba(245,158,11,0.08)] backdrop-blur-sm transition-all duration-300 hover:border-amber-500/40 sm:max-w-none sm:p-6 md:p-7"
+              className="group w-full rounded-3xl border border-amber-500/20 bg-gradient-to-br from-amber-500/10 via-white/5 to-orange-500/5 p-5 shadow-[0_0_0_1px_rgba(245,158,11,0.08)] backdrop-blur-sm transition-all duration-300 hover:border-amber-500/40 sm:p-6 md:p-7"
             >
               <div className="flex flex-col gap-4 sm:flex-row sm:flex-wrap sm:items-start sm:justify-between">
                 <div className="space-y-2">

src/sections/Hero.tsx

@@ -113,6 +113,23 @@ export function Hero({
         </div>
       </div>
 
+      {/* Mobile: Discord status + message (hidden on md+ where bubbles appear) */}
+      <div className="flex flex-col items-center gap-2 md:hidden w-full max-w-sm">
+        {(displayMessage || rotatingMessages[0]) && (
+          <div className="w-full bg-gradient-to-br from-purple-500/20 to-pink-500/10 backdrop-blur-sm border border-purple-500/30 rounded-2xl px-4 py-2.5 text-sm text-gray-200 font-mono text-center">
+            {displayMessage || rotatingMessages[0]}
+          </div>
+        )}
+        {statusMessage && (
+          <div className="flex items-center gap-2 rounded-2xl border border-white/15 bg-white/5 px-4 py-2.5 text-sm backdrop-blur-sm">
+            <span className="h-2 w-2 shrink-0 rounded-full bg-green-400" />
+            <span className="text-gray-300">Currently</span>
+            <span className="font-semibold text-white">{statusMessage}</span>
+            <span className="text-gray-400">on Discord</span>
+          </div>
+        )}
+      </div>
+
       {/* Name & Description */}
       <div className="space-y-4 max-w-2xl">
         <h1 className="text-4xl font-extrabold leading-tight sm:text-5xl md:text-7xl">

src/sections/Uptime.tsx

@@ -13,7 +13,7 @@ export function Uptime() {
       </div>
 
       <div className="mx-auto max-w-3xl">
-        <div className="mx-auto w-full max-w-[20rem] rounded-2xl border border-white/6 bg-gradient-to-br from-gray-800/20 to-transparent p-5 backdrop-blur-sm sm:max-w-none sm:p-6">
+        <div className="w-full rounded-2xl border border-white/6 bg-gradient-to-br from-gray-800/20 to-transparent p-5 backdrop-blur-sm sm:p-6">
           <h3 className="mb-4 text-center text-xl font-semibold text-white sm:text-2xl">
             Github vs HomeLab Uptime
           </h3>

src/sections/WorkExperience.tsx

@@ -70,7 +70,7 @@ export function WorkExperience({ realWork }: WorkExperienceProps) {
 					{sortedRealWork.map((entry, index) => (
 						<div
 							key={`${entry.company}-${index}`}
-							className="mx-auto w-full max-w-[20rem] space-y-4 rounded-2xl border border-cyan-500/20 bg-gradient-to-br from-cyan-500/10 to-blue-500/5 p-5 backdrop-blur-sm sm:max-w-none sm:space-y-5 sm:p-6 md:p-8"
+							className="w-full space-y-4 rounded-2xl border border-cyan-500/20 bg-gradient-to-br from-cyan-500/10 to-blue-500/5 p-5 backdrop-blur-sm sm:space-y-5 sm:p-6 md:p-8"
 						>
 							<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between sm:gap-2">
 								<div>