fix: remove unnecessary max-width classes from various components

feat: add launch configuration for development environment

.claude/launch.json

@@ -0,0 +1,11 @@
+{
+  "version": "0.0.1",
+  "configurations": [
+    {
+      "name": "portfolio-dev",
+      "runtimeExecutable": "pnpm",
+      "runtimeArgs": ["run", "dev"],
+      "port": 5173
+    }
+  ]
+}

src/app/contact/page.tsx

@@ -23,19 +23,19 @@ export default function ContactPage() {
         </div>
 
         <div className="grid w-full max-w-4xl grid-cols-1 gap-4 text-center sm:grid-cols-2 md:grid-cols-3 sm:gap-6">
-          <div className="group mx-auto w-full max-w-[20rem] rounded-3xl border border-white/10 bg-white/5 p-5 backdrop-blur-sm transition-all duration-300 hover:border-blue-500/30 sm:max-w-none sm:p-6">
+          <div className="group w-full rounded-3xl border border-white/10 bg-white/5 p-5 backdrop-blur-sm transition-all duration-300 hover:border-blue-500/30 sm:p-6">
             <div className="text-3xl mb-4 group-hover:scale-110 transition-transform">📧</div>
             <h3 className="font-bold mb-1">Email</h3>
             <p className="text-sm text-gray-500 underline underline-offset-4 decoration-white/20 hover:decoration-blue-500 transition-colors">
               space@reversed.dev
             </p>
           </div>
-          <div className="group mx-auto w-full max-w-[20rem] rounded-3xl border border-white/10 bg-white/5 p-5 backdrop-blur-sm transition-all duration-300 hover:border-purple-500/30 sm:max-w-none sm:p-6">
+          <div className="group w-full rounded-3xl border border-white/10 bg-white/5 p-5 backdrop-blur-sm transition-all duration-300 hover:border-purple-500/30 sm:p-6">
             <div className="text-3xl mb-4 group-hover:scale-110 transition-transform">👾</div>
             <h3 className="font-bold mb-1">Discord</h3>
             <p className="text-sm text-gray-500">@getspaced</p>
           </div>
-          <div className="group mx-auto w-full max-w-[20rem] rounded-3xl border border-white/10 bg-white/5 p-5 backdrop-blur-sm transition-all duration-300 hover:border-pink-500/30 sm:max-w-none sm:p-6">
+          <div className="group w-full rounded-3xl border border-white/10 bg-white/5 p-5 backdrop-blur-sm transition-all duration-300 hover:border-pink-500/30 sm:p-6">
             <div className="text-3xl mb-4 group-hover:scale-110 transition-transform">💻</div>
             <h3 className="font-bold mb-1">GitHub</h3>
             <p className="text-sm text-gray-500">github.com/Space-Banane</p>

src/components/ExperienceCard.tsx

@@ -19,7 +19,7 @@ export function ExperienceCard({
   return (
     <div
       onClick={isClickable ? onClick : undefined}
-      className={`group mx-auto flex w-full max-w-[20rem] items-center gap-3 rounded-lg border border-white/10 bg-gradient-to-br from-white/5 to-white/2 p-3 backdrop-blur-sm transition-all duration-200 sm:max-w-none ${
+      className={`group flex w-full items-center gap-3 rounded-lg border border-white/10 bg-gradient-to-br from-white/5 to-white/2 p-3 backdrop-blur-sm transition-all duration-200 ${
         isClickable
           ? "cursor-pointer hover:border-purple-500/50 hover:bg-white/10 hover:-translate-y-0.5"
           : ""

src/components/MiniProjectCard.tsx

@@ -12,7 +12,7 @@ export function MiniProjectCard({
   return (
     <div
       onClick={onClick}
-      className="group relative mx-auto flex w-full max-w-[20rem] cursor-pointer flex-col rounded-2xl border border-white/10 bg-gradient-to-br from-white/5 to-white/2 p-4 backdrop-blur-sm transition-all duration-300 hover:-translate-y-2 hover:border-purple-500/50 hover:shadow-2xl hover:shadow-purple-500/20 sm:max-w-none sm:p-6"
+      className="group relative flex w-full cursor-pointer flex-col rounded-2xl border border-white/10 bg-gradient-to-br from-white/5 to-white/2 p-4 backdrop-blur-sm transition-all duration-300 hover:-translate-y-2 hover:border-purple-500/50 hover:shadow-2xl hover:shadow-purple-500/20 sm:p-6"
     >
       {project.image && (
         <div className="mb-4 flex aspect-video items-center justify-center overflow-hidden rounded-xl bg-black/20">

src/components/ProjectCard.tsx

@@ -4,7 +4,7 @@ import type { Project } from "../types";
 
 export function ProjectCard({ project }: { project: Project }) {
   return (
-    <div className="group relative mx-auto flex w-full max-w-[20rem] flex-col rounded-2xl border border-white/10 bg-gradient-to-br from-white/10 to-white/5 p-4 backdrop-blur-sm transition-all duration-300 hover:-translate-y-1 hover:border-purple-500/30 hover:shadow-2xl hover:shadow-purple-500/10 sm:max-w-none sm:p-6">
+    <div className="group relative flex w-full flex-col rounded-2xl border border-white/10 bg-gradient-to-br from-white/10 to-white/5 p-4 backdrop-blur-sm transition-all duration-300 hover:-translate-y-1 hover:border-purple-500/30 hover:shadow-2xl hover:shadow-purple-500/10 sm:p-6">
       {project.image && (
         <div className="relative mb-4 flex aspect-video items-center justify-center overflow-hidden rounded-xl bg-black/20 sm:mb-6">
           <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />

src/components/TimezoneClockBlock.tsx

@@ -101,10 +101,10 @@ export function TimezoneClockBlock({ warningThresholdHours = 5 }: { warningThres
         </div>
       )}
 
-      <div className="flex flex-wrap items-stretch justify-center gap-3">
-        <div className="relative w-full max-w-[11rem] rounded-2xl border border-white/15 bg-white/5 px-4 py-3 shadow-lg backdrop-blur-sm sm:w-auto">
+      <div className="flex w-full items-stretch justify-center gap-3">
+        <div className="relative flex-1 max-w-[11rem] min-w-0 rounded-2xl border border-white/15 bg-white/5 px-4 py-3 shadow-lg backdrop-blur-sm">
           <div className="absolute right-0 top-1/2 h-0 w-0 -translate-y-1/2 translate-x-2 border-b-8 border-b-transparent border-l-8 border-l-white/15 border-t-8 border-t-transparent" />
-          <p className="text-[11px] uppercase tracking-[0.24em] text-gray-400">
+          <p className="text-[11px] uppercase tracking-[0.24em] text-gray-400 whitespace-nowrap">
             Local time
           </p>
           <p className="mt-1 font-mono text-sm font-semibold text-gray-100">
@@ -112,7 +112,7 @@ export function TimezoneClockBlock({ warningThresholdHours = 5 }: { warningThres
           </p>
         </div>
 
-        <div className="relative w-full max-w-[11rem] rounded-2xl border border-white/15 bg-white/5 px-4 py-3 shadow-lg backdrop-blur-sm sm:w-auto">
+        <div className="relative flex-1 max-w-[11rem] min-w-0 rounded-2xl border border-white/15 bg-white/5 px-4 py-3 shadow-lg backdrop-blur-sm">
           <div className="absolute left-0 top-1/2 h-0 w-0 -translate-x-2 -translate-y-1/2 border-b-8 border-b-transparent border-r-8 border-r-white/15 border-t-8 border-t-transparent" />
           <p className="text-[11px] uppercase tracking-[0.24em] text-gray-400">
             My time

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>