style: comprehensive mobile responsive overhaul across all sections

- Hero: smoother font scaling (text-[2.75rem] -> sm -> md -> lg), smaller
  photo on mobile, reduced gaps and padding
- About: responsive bento grid with smaller border-radius, compact hobbies
  grid (2-col on mobile), hidden descriptions on small screens
- Projects: wider aspect ratio on mobile (16/10), show tags from sm:,
  smoother title scaling
- Contact: compact form inputs, responsive connect links, smaller gaps
- Footer: reduced top padding and gap on mobile
- HomePage: smaller wave separators (h-12 on mobile)
- 404: compact card padding and button sizing
- ActivityFeed: smaller quote text and min-height on mobile

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

app/components/ActivityFeed.tsx

@@ -115,7 +115,7 @@ export default function ActivityFeed({
         <div className="w-10 h-10 rounded-full bg-liquid-mint/10 flex items-center justify-center">
           <QuoteIcon size={18} className="text-emerald-600 dark:text-liquid-mint" />
         </div>
-        <div className="min-h-[120px] relative">
+        <div className="min-h-[80px] sm:min-h-[120px] relative">
           <AnimatePresence mode="wait">
             <motion.div
               key={quoteIndex}
@@ -125,7 +125,7 @@ export default function ActivityFeed({
               transition={{ duration: 0.5 }}
               className="space-y-4"
             >
-              <p className="text-xl md:text-2xl font-light leading-tight text-stone-700 dark:text-stone-300 italic">
+              <p className="text-base sm:text-lg md:text-xl lg:text-2xl font-light leading-tight text-stone-700 dark:text-stone-300 italic">
                 &ldquo;{allQuotes[quoteIndex].content}&rdquo;
               </p>
               <p className="text-xs font-black text-stone-400 dark:text-stone-500 uppercase tracking-widest">