From aebeed3964f88e37e57b1df5c6faad694d061c3b Mon Sep 17 00:00:00 2001
From: Space-Banane <paulwaehner923@gmail.com>
Date: Wed, 3 Jun 2026 15:58:29 +0200
Subject: [PATCH] Codex tried to make the site more responsive on mobile

---
 src/app/contact/page.tsx              | 14 +++++++-------
 src/app/page.tsx                      | 18 ++++++++---------
 src/components/ExperienceCard.tsx     |  2 +-
 src/components/ExperienceModal.tsx    | 14 +++++++-------
 src/components/MiniProjectCard.tsx    | 14 +++++++-------
 src/components/MiniProjectModal.tsx   | 12 ++++++------
 src/components/Navbar.tsx             |  6 +++---
 src/components/ProjectCard.tsx        | 18 ++++++++---------
 src/components/TimezoneClockBlock.tsx |  6 +++---
 src/components/TypingRoomIntro.tsx    | 28 +++++++++++++--------------
 src/sections/Activity.tsx             |  8 ++++----
 src/sections/Affiliates.tsx           | 10 +++++-----
 src/sections/AgentSkills.tsx          | 18 ++++++++---------
 src/sections/Contact.tsx              | 14 +++++++-------
 src/sections/Hero.tsx                 | 23 +++++++++++-----------
 src/sections/SkillsExperience.tsx     | 10 +++++-----
 src/sections/TechStack.tsx            | 12 ++++++------
 src/sections/Uptime.tsx               | 20 +++++++++----------
 src/sections/WorkExperience.tsx       | 14 +++++++-------
 19 files changed, 130 insertions(+), 131 deletions(-)

diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index 7021fb0..23a116e 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -8,12 +8,12 @@ export default function ContactPage() {
   return (
     <>
       <Navbar />
-      <div className="flex flex-col items-center justify-center min-h-screen px-4 space-y-12 w-full max-w-4xl mx-auto pt-24 pb-20 text-white">
+      <div className="flex min-h-screen w-full max-w-4xl flex-col items-center justify-center space-y-10 px-4 pb-16 pt-20 text-white sm:space-y-12 sm:pb-20 sm:pt-24">
         <div className="text-center space-y-4 w-full">
-          <h1 className="text-5xl md:text-6xl font-extrabold text-white">
+          <h1 className="text-4xl font-extrabold text-white sm:text-5xl md:text-6xl">
             Let's <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-500">Connect</span>
           </h1>
-          <p className="text-gray-400 text-xl max-w-xl mx-auto">
+          <p className="mx-auto max-w-xl text-base text-gray-400 sm:text-lg md:text-xl">
             Whatever you've got in mind, I'm just a few clicks away.
           </p>
         </div>
@@ -22,20 +22,20 @@ export default function ContactPage() {
           <ContactSection />
         </div>
 
-        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 w-full max-w-4xl text-center">
-          <div className="bg-white/5 border border-white/10 p-6 rounded-3xl backdrop-blur-sm group hover:border-blue-500/30 transition-all duration-300">
+        <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="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="bg-white/5 border border-white/10 p-6 rounded-3xl backdrop-blur-sm group hover:border-purple-500/30 transition-all duration-300">
+          <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="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="bg-white/5 border border-white/10 p-6 rounded-3xl backdrop-blur-sm group hover:border-pink-500/30 transition-all duration-300">
+          <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="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>
diff --git a/src/app/page.tsx b/src/app/page.tsx
index c022dc2..3699ae6 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -52,7 +52,7 @@ export default function Home() {
       {!showTypingIntro && (
         <>
           <Navbar />
-          <div className="space-y-24 pb-20 pt-20">
+          <div className="space-y-20 pb-16 pt-16 sm:space-y-24 sm:pb-20 sm:pt-20">
             <Hero
               glowColor={glowColor}
               borderStatus={borderStatus}
@@ -71,28 +71,28 @@ export default function Home() {
 
             <AgentSkills />
 
-            <section className="w-full max-w-6xl mx-auto space-y-12 px-4">
+            <section className="w-full max-w-6xl mx-auto space-y-8 px-4 sm:space-y-12">
               <div className="text-center space-y-4">
-                <h2 className="text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-500">
+                <h2 className="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-500 sm:text-4xl">
                   Featured Projects
                 </h2>
-                <p className="text-gray-400 max-w-2xl mx-auto">
+                <p className="mx-auto max-w-2xl text-sm text-gray-400 sm:text-base">
                   A selection of my personal favorites. Many more on my GitHub.
                 </p>
               </div>
-              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+              <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3 sm:gap-8">
                 {projects.map((project, index) => (
                   <ProjectCard key={index} project={project} />
                 ))}
               </div>
             </section>
 
-            <section className="w-full max-w-6xl mx-auto space-y-12 px-4">
+            <section className="w-full max-w-6xl mx-auto space-y-8 px-4 sm:space-y-12">
               <div className="text-center space-y-4">
-                <h2 className="text-3xl font-bold">More Projects</h2>
-                <p className="text-gray-400">Smaller projects or tools I've built.</p>
+                <h2 className="text-2xl font-bold sm:text-3xl">More Projects</h2>
+                <p className="text-sm text-gray-400 sm:text-base">Smaller projects or tools I've built.</p>
               </div>
-              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+              <div className="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3 sm:gap-6">
                 {miniProjects.map((project, index) => (
                   <MiniProjectCard
                     key={index}
diff --git a/src/components/ExperienceCard.tsx b/src/components/ExperienceCard.tsx
index d1c606b..bdf2ce4 100644
--- a/src/components/ExperienceCard.tsx
+++ b/src/components/ExperienceCard.tsx
@@ -19,7 +19,7 @@ export function ExperienceCard({
   return (
     <div
       onClick={isClickable ? onClick : undefined}
-      className={`group flex items-center gap-3 p-3 rounded-lg bg-gradient-to-br from-white/5 to-white/2 backdrop-blur-sm border border-white/10 transition-all duration-200 ${
+      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 ${
         isClickable
           ? "cursor-pointer hover:border-purple-500/50 hover:bg-white/10 hover:-translate-y-0.5"
           : ""
diff --git a/src/components/ExperienceModal.tsx b/src/components/ExperienceModal.tsx
index 0ee622a..a15b434 100644
--- a/src/components/ExperienceModal.tsx
+++ b/src/components/ExperienceModal.tsx
@@ -12,17 +12,17 @@ export function ExperienceModal({
 }) {
   return (
     <div
-      className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm animate-fade-in"
+      className="fixed inset-0 z-50 flex items-center justify-center p-3 bg-black/80 backdrop-blur-sm animate-fade-in sm:p-4"
       onClick={onClose}
     >
       <div
-        className="relative max-w-2xl w-full max-h-[90vh] overflow-y-auto bg-gradient-to-br from-gray-900 to-black border border-purple-500/30 rounded-2xl shadow-2xl animate-scale-in"
+        className="relative max-h-[92vh] w-full max-w-[20rem] overflow-y-auto rounded-2xl border border-purple-500/30 bg-gradient-to-br from-gray-900 to-black shadow-2xl animate-scale-in sm:max-w-2xl"
         onClick={(e) => e.stopPropagation()}
       >
         {/* Close Button */}
         <button
           onClick={onClose}
-          className="absolute top-4 right-4 p-2 rounded-full bg-white/10 hover:bg-white/20 text-white transition-colors z-10"
+          className="absolute right-3 top-3 z-10 rounded-full bg-white/10 p-2 text-white transition-colors hover:bg-white/20 sm:right-4 sm:top-4"
         >
           <svg
             className="w-6 h-6"
@@ -40,10 +40,10 @@ export function ExperienceModal({
         </button>
 
         {/* Content */}
-        <div className="p-8 space-y-6">
-          <div className="flex items-center gap-4">
+        <div className="space-y-4 p-4 sm:space-y-6 sm:p-8">
+          <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:gap-4">
             <div
-              className={`text-4xl p-3 rounded-lg ${getTypeColor(experience.type)} flex items-center justify-center shrink-0 ${experience.image ? "w-16 h-16" : ""}`}
+              className={`flex shrink-0 items-center justify-center rounded-lg p-3 text-2xl ${getTypeColor(experience.type)} ${experience.image ? "h-12 w-12 sm:h-16 sm:w-16" : ""}`}
             >
               {experience.image ? (
                 <img
@@ -56,7 +56,7 @@ export function ExperienceModal({
               )}
             </div>
             <div>
-              <h2 className="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-500">
+              <h2 className="text-xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-500 sm:text-3xl">
                 {experience.name}
               </h2>
               <p className="text-sm text-gray-400 mt-1">
diff --git a/src/components/MiniProjectCard.tsx b/src/components/MiniProjectCard.tsx
index 899f908..23866fe 100644
--- a/src/components/MiniProjectCard.tsx
+++ b/src/components/MiniProjectCard.tsx
@@ -12,31 +12,31 @@ export function MiniProjectCard({
   return (
     <div
       onClick={onClick}
-      className="group cursor-pointer relative flex flex-col p-6 rounded-2xl bg-gradient-to-br from-white/5 to-white/2 backdrop-blur-sm border border-white/10 hover:border-purple-500/50 transition-all duration-300 hover:-translate-y-2 hover:shadow-2xl hover:shadow-purple-500/20"
+      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"
     >
       {project.image && (
-        <div className="mb-4 overflow-hidden rounded-xl bg-black/20 aspect-video flex items-center justify-center">
+        <div className="mb-4 flex aspect-video items-center justify-center overflow-hidden rounded-xl bg-black/20">
           <img
             src={project.image}
             alt={project.title}
-            className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
+            className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110"
           />
         </div>
       )}
 
-      <h3 className="text-xl font-bold text-white mb-2 group-hover:text-purple-400 transition-colors">
+      <h3 className="mb-2 text-lg font-bold text-white transition-colors group-hover:text-purple-400 sm:text-xl">
         {project.title}
       </h3>
-      <p className="text-gray-400 text-sm line-clamp-2 mb-4">
+      <p className="mb-4 line-clamp-2 text-sm text-gray-400">
         {project.description}
       </p>
       {project.last_commit && (
-        <p className="text-gray-400 text-xs mb-2">
+        <p className="mb-2 text-xs text-gray-400">
           Last commit: {new Date(project.last_commit).toLocaleDateString()}
         </p>
       )}
 
-      <div className="flex items-center text-purple-400 text-sm font-medium mt-auto">
+      <div className="mt-auto flex items-center text-sm font-medium text-purple-400">
         Click to learn more
         <svg
           className="w-4 h-4 ml-1 group-hover:translate-x-1 transition-transform"
diff --git a/src/components/MiniProjectModal.tsx b/src/components/MiniProjectModal.tsx
index 2fc12a2..8cc8d9b 100644
--- a/src/components/MiniProjectModal.tsx
+++ b/src/components/MiniProjectModal.tsx
@@ -11,17 +11,17 @@ export function MiniProjectModal({
 }) {
   return (
     <div
-      className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm animate-fade-in"
+      className="fixed inset-0 z-50 flex items-center justify-center p-3 bg-black/80 backdrop-blur-sm animate-fade-in sm:p-4"
       onClick={onClose}
     >
       <div
-        className="relative max-w-3xl w-full max-h-[90vh] overflow-y-auto bg-gradient-to-br from-gray-900 to-black border border-purple-500/30 rounded-2xl shadow-2xl animate-scale-in"
+        className="relative max-h-[92vh] w-full max-w-[20rem] overflow-y-auto rounded-2xl border border-purple-500/30 bg-gradient-to-br from-gray-900 to-black shadow-2xl animate-scale-in sm:max-w-3xl"
         onClick={(e) => e.stopPropagation()}
       >
         {/* Close Button */}
         <button
           onClick={onClose}
-          className="absolute top-4 right-4 p-2 rounded-full bg-white/10 hover:bg-white/20 text-white transition-colors z-10"
+          className="absolute right-3 top-3 z-10 rounded-full bg-white/10 p-2 text-white transition-colors hover:bg-white/20 sm:right-4 sm:top-4"
         >
           <svg
             className="w-6 h-6"
@@ -40,7 +40,7 @@ export function MiniProjectModal({
 
         {/* Image */}
         {project.image && (
-          <div className="w-full h-64 overflow-hidden bg-black/40 rounded-t-2xl">
+          <div className="h-36 w-full overflow-hidden rounded-t-2xl bg-black/40 sm:h-64">
             <img
               src={project.image}
               alt={project.title}
@@ -50,8 +50,8 @@ export function MiniProjectModal({
         )}
 
         {/* Content */}
-        <div className="p-8 space-y-6">
-          <h2 className="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-500">
+        <div className="space-y-4 p-4 sm:space-y-6 sm:p-8">
+          <h2 className="text-xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-500 sm:text-3xl">
             {project.title}
           </h2>
 
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 2c2a94e..fcc7ff7 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -18,14 +18,14 @@ export function Navbar() {
   };
 
   return (
-    <nav className="fixed top-8 left-1/2 -translate-x-1/2 z-[100] w-[min(90%,400px)]">
-      <div className="bg-black/20 backdrop-blur-xl border border-white/10 rounded-full px-6 py-3 flex items-center justify-between gap-4 shadow-2xl">
+    <nav className="fixed top-4 left-1/2 z-[100] w-[min(100vw-1rem,400px)] -translate-x-1/2 sm:top-8 sm:w-[min(90%,400px)]">
+      <div className="bg-black/20 backdrop-blur-xl border border-white/10 rounded-full px-3 py-2 sm:px-6 sm:py-3 flex items-center justify-between gap-2 sm:gap-4 shadow-2xl">
         {navItems.map((item) => (
           <Link
             key={item.path}
             href={item.path}
             onClick={() => handleSwitch(item.path)}
-            className={`text-sm font-semibold transition-all duration-300 px-4 py-2 rounded-full 
+            className={`flex-1 text-center text-xs sm:text-sm font-semibold transition-all duration-300 px-3 py-2 rounded-full 
               ${
                 pathname === item.path
                   ? "bg-white text-black scale-105 shadow-xl shadow-white/10"
diff --git a/src/components/ProjectCard.tsx b/src/components/ProjectCard.tsx
index c40aac3..8a0a35c 100644
--- a/src/components/ProjectCard.tsx
+++ b/src/components/ProjectCard.tsx
@@ -4,36 +4,36 @@ import type { Project } from "../types";
 
 export function ProjectCard({ project }: { project: Project }) {
   return (
-    <div className="group relative flex flex-col p-6 rounded-2xl bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-sm border border-white/10 hover:border-purple-500/30 transition-all duration-300 hover:-translate-y-1 hover:shadow-2xl hover:shadow-purple-500/10">
+    <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">
       {project.image && (
-        <div className="mb-6 overflow-hidden rounded-xl bg-black/20 aspect-video flex items-center justify-center relative">
+        <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" />
           <img
             src={project.image}
             alt={project.name}
-            className={`object-contain ${project.rounded === false ? "w-full h-auto max-h-24 rounded-lg" : "h-24 w-24 rounded-full"} shadow-lg group-hover:scale-110 transition-transform duration-500`}
+            className={`object-contain shadow-lg transition-transform duration-500 group-hover:scale-110 ${project.rounded === false ? "h-auto w-full max-h-20 rounded-lg sm:max-h-24" : "h-20 w-20 rounded-full sm:h-24 sm:w-24"}`}
           />
         </div>
       )}
 
-      <h3 className="text-xl font-bold text-white mb-2 group-hover:text-purple-400 transition-colors">
+      <h3 className="mb-2 text-lg font-bold text-white transition-colors group-hover:text-purple-400 sm:text-xl">
         {project.name}
       </h3>
-      <p className="text-gray-400 text-sm flex-grow mb-6 leading-relaxed">
+      <p className="mb-5 flex-grow text-sm leading-relaxed text-gray-400 sm:mb-6">
         {project.description}
       </p>
       {project.last_commit && (
-        <p className="text-gray-400 text-xs mb-2">
+        <p className="mb-2 text-xs text-gray-400">
           Last commit: {new Date(project.last_commit).toLocaleDateString()}
         </p>
       )}
 
-      <div className="flex gap-3 mt-auto">
+      <div className="mt-auto flex flex-col gap-3 sm:flex-row">
         <a
           href={project.link + "?utm_source=portfolio&ref=space"}
           target="_blank"
           rel="noreferrer"
-          className="flex-1 py-2 px-4 rounded-lg bg-white/10 hover:bg-white/20 text-white text-sm font-medium text-center transition-colors flex items-center justify-center gap-2"
+          className="flex flex-1 items-center justify-center gap-2 rounded-lg bg-white/10 px-4 py-2 text-center text-sm font-medium text-white transition-colors hover:bg-white/20"
         >
           Visit
           <svg
@@ -55,7 +55,7 @@ export function ProjectCard({ project }: { project: Project }) {
             href={project.open_source.link}
             target="_blank"
             rel="noreferrer"
-            className="p-2 rounded-lg bg-white/5 hover:bg-white/10 text-gray-400 hover:text-white transition-colors border border-white/5"
+            className="self-center rounded-lg border border-white/5 bg-white/5 p-2 text-gray-400 transition-colors hover:bg-white/10 hover:text-white sm:self-auto"
             title="View Source"
           >
             <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
diff --git a/src/components/TimezoneClockBlock.tsx b/src/components/TimezoneClockBlock.tsx
index a1ad486..91109a7 100644
--- a/src/components/TimezoneClockBlock.tsx
+++ b/src/components/TimezoneClockBlock.tsx
@@ -81,7 +81,7 @@ export function TimezoneClockBlock({ warningThresholdHours = 5 }: { warningThres
         ) / 60;
 
   return (
-    <div className="pt-3 flex flex-col items-center gap-3">
+    <div className="pt-3 flex flex-col items-center gap-3 px-4">
       <p className="text-[11px] uppercase tracking-[0.3em] text-gray-500">Time</p>
       
       {clocksMatch && (
@@ -102,7 +102,7 @@ export function TimezoneClockBlock({ warningThresholdHours = 5 }: { warningThres
       )}
 
       <div className="flex flex-wrap items-stretch justify-center gap-3">
-        <div className="relative rounded-2xl border border-white/15 bg-white/5 px-4 py-3 shadow-lg backdrop-blur-sm">
+        <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="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">
             Local time
@@ -112,7 +112,7 @@ export function TimezoneClockBlock({ warningThresholdHours = 5 }: { warningThres
           </p>
         </div>
 
-        <div className="relative rounded-2xl border border-white/15 bg-white/5 px-4 py-3 shadow-lg backdrop-blur-sm">
+        <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="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
diff --git a/src/components/TypingRoomIntro.tsx b/src/components/TypingRoomIntro.tsx
index a38d524..b2eac3e 100644
--- a/src/components/TypingRoomIntro.tsx
+++ b/src/components/TypingRoomIntro.tsx
@@ -112,10 +112,10 @@ export function TypingRoomIntro({ active, onFinish }: TypingRoomIntroProps) {
             initial={{ y: 32, scale: 0.96, opacity: 0 }}
             animate={{ y: 0, scale: 1, opacity: 1 }}
             exit={{ y: -24, scale: 0.98, opacity: 0 }}
-            transition={{ duration: 0.55, ease: [0.22, 1, 0.36, 1] }}
-            className="relative w-full max-w-2xl overflow-hidden rounded-3xl border border-cyan-300/20 bg-black/55 backdrop-blur-xl shadow-[0_32px_90px_rgba(14,165,233,0.25)]"
+          transition={{ duration: 0.55, ease: [0.22, 1, 0.36, 1] }}
+            className="relative w-full max-w-[20rem] overflow-hidden rounded-3xl border border-cyan-300/20 bg-black/55 backdrop-blur-xl shadow-[0_32px_90px_rgba(14,165,233,0.25)] sm:max-w-2xl"
           >
-            <div className="flex items-center justify-between border-b border-white/10 bg-white/5 px-5 py-3">
+            <div className="flex items-center justify-between border-b border-white/10 bg-white/5 px-4 py-3 sm:px-5">
               <div className="flex items-center gap-2">
                 <span className="h-2.5 w-2.5 rounded-full bg-red-400/80" />
                 <span className="h-2.5 w-2.5 rounded-full bg-amber-300/80" />
@@ -129,7 +129,7 @@ export function TypingRoomIntro({ active, onFinish }: TypingRoomIntroProps) {
               </span>
             </div>
 
-            <div className="space-y-4 p-6 md:p-8">
+            <div className="space-y-4 p-4 sm:p-6 md:p-8">
               <motion.p
                 initial={{ opacity: 0 }}
                 animate={{ opacity: 1 }}
@@ -142,7 +142,7 @@ export function TypingRoomIntro({ active, onFinish }: TypingRoomIntroProps) {
                 <motion.div
                   initial={{ opacity: 0, x: -16 }}
                   animate={{ opacity: 1, x: 0 }}
-                  className="max-w-[80%] rounded-2xl rounded-bl-md border border-white/10 bg-white/10 px-4 py-3 text-sm text-gray-100"
+                  className="max-w-[86%] rounded-2xl rounded-bl-md border border-white/10 bg-white/10 px-3 py-2.5 text-xs text-gray-100 sm:px-4 sm:py-3 sm:text-sm"
                 >
                   Why is this page taking so long to load??
                 </motion.div>
@@ -152,7 +152,7 @@ export function TypingRoomIntro({ active, onFinish }: TypingRoomIntroProps) {
                 <motion.div
                   initial={{ opacity: 0, x: 16 }}
                   animate={{ opacity: 1, x: 0 }}
-                  className="ml-auto max-w-[85%] rounded-2xl rounded-br-md border border-cyan-300/30 bg-cyan-400/15 px-4 py-3 text-sm text-cyan-50"
+                  className="ml-auto max-w-[88%] rounded-2xl rounded-br-md border border-cyan-300/30 bg-cyan-400/15 px-3 py-2.5 text-xs text-cyan-50 sm:px-4 sm:py-3 sm:text-sm"
                 >
                   I have to somehow hide the fact that my discord status is taking a while to load... :D
                 </motion.div>
@@ -162,18 +162,18 @@ export function TypingRoomIntro({ active, onFinish }: TypingRoomIntroProps) {
                 <motion.div
                   initial={{ opacity: 0, x: 12 }}
                   animate={{ opacity: 1, x: 0 }}
-                  className="ml-auto max-w-[85%] rounded-2xl rounded-br-md border border-cyan-300/35 bg-cyan-400/20 px-4 py-3 text-sm text-cyan-50"
+                  className="ml-auto max-w-[88%] rounded-2xl rounded-br-md border border-cyan-300/35 bg-cyan-400/20 px-3 py-2.5 text-xs text-cyan-50 sm:px-4 sm:py-3 sm:text-sm"
                 >
                   Ok done, just one more animation
                 </motion.div>
               )}
             </div>
 
-            <div className="relative border-t border-white/10 bg-black/35 px-6 pb-5 pt-4">
+            <div className="relative border-t border-white/10 bg-black/35 px-4 pb-4 pt-4 sm:px-6 sm:pb-5">
               {/* Small badge left-above the input showing typing status (hidden once final message shows) */}
               {step < 4 && (
-                <div className="absolute left-6 -top-6 flex items-center gap-2">
-                  <span className="text-sm font-medium text-cyan-100">Space is typing...</span>
+                <div className="absolute left-4 -top-6 flex items-center gap-2 sm:left-6">
+                  <span className="text-xs font-medium text-cyan-100 sm:text-sm">Space is typing...</span>
                   <div className="flex items-center gap-1.5">
                     {[0, 1, 2].map((dot) => (
                       <motion.span
@@ -195,13 +195,13 @@ export function TypingRoomIntro({ active, onFinish }: TypingRoomIntroProps) {
                 <span className="text-[11px] text-gray-400">Esc to skip</span>
               </div>
 
-              <div className="mt-3 rounded-xl border border-white/10 bg-white/5 px-4 py-2.5 min-h-[44px] flex items-center">
+              <div className="mt-3 flex min-h-[44px] items-center rounded-xl border border-white/10 bg-white/5 px-3 py-2.5 sm:px-4">
                 {step >= 3 && step < 4 ? (
-                  <motion.div initial={{ opacity: 0, y: 6 }} animate={{ opacity: 1, y: 0 }} className="flex items-center gap-2.5 font-mono text-sm text-cyan-100">
+                  <motion.div initial={{ opacity: 0, y: 6 }} animate={{ opacity: 1, y: 0 }} className="flex items-center gap-2.5 font-mono text-xs text-cyan-100 sm:text-sm">
                     <span className="select-all">{garble || "…"}</span>
                   </motion.div>
                 ) : (
-                  <p className="text-sm text-gray-500">Message Space</p>
+                  <p className="text-xs text-gray-500 sm:text-sm">Message Space</p>
                 )}
               </div>
             </div>
@@ -217,4 +217,4 @@ export function TypingRoomIntro({ active, onFinish }: TypingRoomIntroProps) {
       )}
     </AnimatePresence>
   );
-}
\ No newline at end of file
+}
diff --git a/src/sections/Activity.tsx b/src/sections/Activity.tsx
index 3f996d7..58c4741 100644
--- a/src/sections/Activity.tsx
+++ b/src/sections/Activity.tsx
@@ -22,12 +22,12 @@ export function Activity() {
   }, []);
 
   return (
-    <section className="w-full max-w-6xl mx-auto space-y-8 px-4">
+    <section className="w-full max-w-6xl mx-auto space-y-6 px-4 sm:space-y-8">
       <div className="text-center space-y-4">
-        <h2 className="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-500">
+        <h2 className="text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-500 sm:text-3xl">
           Code Activity
         </h2>
-        <p className="text-gray-400 max-w-2xl mx-auto">
+        <p className="mx-auto max-w-2xl text-sm text-gray-400 sm:text-base">
           Today, i've already been coding for
           <span className="font-mono text-base text-green-400 ml-1">
             {dailyActivity || "..."}
@@ -40,7 +40,7 @@ export function Activity() {
         </p>
       </div>
 
-      <div className="max-w-5xl mx-auto rounded-3xl border border-white/10 bg-white/5 backdrop-blur-sm p-4 md:p-6 shadow-[0_20px_80px_rgba(0,0,0,0.35)]">
+      <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]">
           <img
             src={activitySvg}
diff --git a/src/sections/Affiliates.tsx b/src/sections/Affiliates.tsx
index c74fc1f..cb12b47 100644
--- a/src/sections/Affiliates.tsx
+++ b/src/sections/Affiliates.tsx
@@ -33,24 +33,24 @@ const affiliates: Affiliate[] = [
 
 export function Affiliates() {
   return (
-    <section className="w-full max-w-5xl mx-auto space-y-8 px-4">
+    <section className="w-full max-w-5xl mx-auto space-y-6 px-4 sm:space-y-8">
       <div className="text-center space-y-4">
-        <h2 className="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-500">
+        <h2 className="text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-500 sm:text-3xl">
           Affiliates
         </h2>
-        <p className="text-gray-400 max-w-2xl mx-auto">
+        <p className="mx-auto max-w-2xl text-sm text-gray-400 sm:text-base">
           Looking for hosting? I recommend checking out Datalix!
         </p>
       </div>
 
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-2 sm:gap-5">
         {affiliates.map((affiliate) => (
           <a
             key={affiliate.name}
             href={affiliate.link}
             target="_blank"
             rel="noopener noreferrer"
-            className="rounded-xl border border-white/10 bg-white/5 backdrop-blur-sm p-4 hover:bg-white/10 hover:border-purple-500/40 transition-all duration-300"
+            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"
           >
             <div className="flex flex-col items-center text-center gap-2 mb-3">
               <img
diff --git a/src/sections/AgentSkills.tsx b/src/sections/AgentSkills.tsx
index e5c2b58..1709f12 100644
--- a/src/sections/AgentSkills.tsx
+++ b/src/sections/AgentSkills.tsx
@@ -6,28 +6,28 @@ export function AgentSkills() {
   const { skills } = useProfile();
 
   return (
-    <section className="w-full max-w-6xl mx-auto px-4 space-y-8">
+    <section className="w-full max-w-6xl mx-auto px-4 space-y-6 sm:space-y-8">
       <div className="text-center space-y-3">
-        <h2 className="text-4xl font-bold leading-tight text-transparent bg-clip-text bg-gradient-to-r from-amber-400 to-orange-500">
+        <h2 className="text-3xl font-bold leading-tight text-transparent bg-clip-text bg-gradient-to-r from-amber-400 to-orange-500 sm:text-4xl">
           Agent Skills
         </h2>
-        <p className="text-gray-400 max-w-2xl mx-auto">
+        <p className="mx-auto max-w-2xl text-sm text-gray-400 sm:text-base">
           Skills i throw at my Agents to help them solve my prompts.
         </p>
       </div>
 
       {skills.length === 0 ? (
-        <div className="rounded-3xl border border-white/10 bg-white/5 px-6 py-10 text-center text-gray-400">
+        <div className="rounded-3xl border border-white/10 bg-white/5 px-5 py-8 text-center text-gray-400 sm:px-6 sm:py-10">
           No agent skills published yet.
         </div>
       ) : (
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <div className="grid grid-cols-1 gap-5 lg:grid-cols-2 sm:gap-6">
           {skills.map((skill, index) => (
             <article
               key={`${skill.name}-${index}`}
-              className="group rounded-3xl border border-amber-500/20 bg-gradient-to-br from-amber-500/10 via-white/5 to-orange-500/5 p-6 md:p-7 shadow-[0_0_0_1px_rgba(245,158,11,0.08)] backdrop-blur-sm transition-all duration-300 hover:border-amber-500/40"
+              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"
             >
-              <div className="flex flex-wrap items-start justify-between gap-4">
+              <div className="flex flex-col gap-4 sm:flex-row sm:flex-wrap sm:items-start sm:justify-between">
                 <div className="space-y-2">
                   <div className="flex flex-wrap gap-2">
                     {(skill.emojis || []).map((emoji, emojiIndex) => (
@@ -40,7 +40,7 @@ export function AgentSkills() {
                       </span>
                     ))}
                   </div>
-                  <h3 className="text-2xl font-semibold text-white">{skill.name}</h3>
+                  <h3 className="text-xl font-semibold text-white sm:text-2xl">{skill.name}</h3>
                 </div>
 
                 {skill.link ? (
@@ -48,7 +48,7 @@ export function AgentSkills() {
                     href={skill.link}
                     target="_blank"
                     rel="noreferrer"
-                    className="inline-flex items-center rounded-full border border-amber-400/30 bg-amber-400/10 px-4 py-2 text-xs font-semibold text-amber-100 transition-colors hover:bg-amber-400/20"
+                    className="inline-flex items-center justify-center rounded-full border border-amber-400/30 bg-amber-400/10 px-4 py-2 text-xs font-semibold text-amber-100 transition-colors hover:bg-amber-400/20 sm:self-start"
                   >
                     Open Link
                   </a>
diff --git a/src/sections/Contact.tsx b/src/sections/Contact.tsx
index 65e1828..3b38b3e 100644
--- a/src/sections/Contact.tsx
+++ b/src/sections/Contact.tsx
@@ -2,18 +2,18 @@
 
 export function Contact() {
   return (
-    <section className="w-full max-w-2xl text-center space-y-4 pb-8 mx-auto">
-      <h2 className="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-green-400 via-blue-500 to-purple-500">
+    <section className="mx-auto w-full max-w-[20rem] space-y-4 pb-8 text-center sm:max-w-2xl">
+      <h2 className="text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-green-400 via-blue-500 to-purple-500 sm:text-3xl">
         Want to talk?
       </h2>
-      <div className="p-8 rounded-3xl bg-gradient-to-br from-blue-500/10 via-purple-500/10 to-pink-500/10 border border-blue-500/20 backdrop-blur-md">
-        <p className="text-gray-300 mb-8 text-lg">
+      <div className="rounded-3xl border border-blue-500/20 bg-gradient-to-br from-blue-500/10 via-purple-500/10 to-pink-500/10 p-5 backdrop-blur-md sm:p-8">
+        <p className="mb-6 text-sm text-gray-300 sm:mb-8 sm:text-lg">
           Im almost always down to talk about anything. Tech, life and whatever. Feel free to reach out to me on Discord or via Email, i usually respond pretty quickly.
         </p>
-        <div className="flex flex-col sm:flex-row gap-4 justify-center">
+        <div className="flex flex-col justify-center gap-3 sm:flex-row sm:gap-4">
           <a
             href="mailto:space@reversed.dev"
-            className="px-8 py-3 rounded-full bg-gradient-to-r from-white to-gray-100 text-black font-bold hover:from-gray-100 hover:to-white transition-all shadow-lg shadow-white/20 hover:shadow-white/30"
+            className="rounded-full bg-gradient-to-r from-white to-gray-100 px-6 py-3 font-bold text-black transition-all shadow-lg shadow-white/20 hover:from-gray-100 hover:to-white hover:shadow-white/30"
           >
             Shoot me an Email
           </a>
@@ -21,7 +21,7 @@ export function Contact() {
             href="https://discord.com/users/456443941169004545"
             target="_blank"
             rel="noreferrer"
-            className="px-8 py-3 rounded-full bg-gradient-to-r from-[#5865F2] to-[#4752C4] text-white font-bold hover:from-[#4752C4] hover:to-[#5865F2] transition-all shadow-lg shadow-[#5865F2]/30 hover:shadow-[#5865F2]/50"
+            className="rounded-full bg-gradient-to-r from-[#5865F2] to-[#4752C4] px-6 py-3 font-bold text-white transition-all shadow-lg shadow-[#5865F2]/30 hover:from-[#4752C4] hover:to-[#5865F2] hover:shadow-[#5865F2]/50"
           >
             Chat on Discord
           </a>
diff --git a/src/sections/Hero.tsx b/src/sections/Hero.tsx
index 0c070b4..442a842 100644
--- a/src/sections/Hero.tsx
+++ b/src/sections/Hero.tsx
@@ -60,7 +60,7 @@ export function Hero({
 
   return (
     <section
-      className="mt-20 flex flex-col items-center text-center space-y-8 animate-fade-in"
+      className="mt-16 flex flex-col items-center text-center space-y-6 px-4 sm:mt-20 sm:space-y-8 animate-fade-in"
       data-old-usernames={oldUsernames.join(",")}
     >
       <div className="relative group" onMouseMove={handleMouseMove}>
@@ -69,17 +69,17 @@ export function Hero({
           style={{ backgroundColor: glowColor }}
         ></div>
         <div
-          className={`relative w-48 h-48 rounded-full border-4 transition-colors duration-500 overflow-hidden ${borderStatus} bg-black`}
+          className={`relative h-32 w-32 overflow-hidden rounded-full border-4 bg-black transition-colors duration-500 sm:h-48 sm:w-48 ${borderStatus}`}
         >
           <img
             src="https://cdn.reversed.dev/pictures/20250405_120402.png"
             alt="Space"
-            className="w-full h-full object-cover scale-110 transition-transform duration-700 group-hover:scale-125"
+            className="h-full w-full scale-110 object-cover transition-transform duration-700 group-hover:scale-125"
           />
         </div>
 
         {/* Rotating Message Bubble (Left Side) */}
-        <div className="absolute -left-4 top-4 -translate-x-full">
+        <div className="absolute -left-4 top-4 hidden -translate-x-full md:block">
           <div className="relative 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-3 shadow-lg">
             {/* Arrow pointing to profile */}
             <div className="absolute right-0 top-1/2 translate-x-2 -translate-y-1/2 w-0 h-0 border-t-8 border-t-transparent border-b-8 border-b-transparent border-l-8 border-l-purple-500/30"></div>
@@ -92,7 +92,7 @@ export function Hero({
         </div>
 
         {/* Status Bubble (Right Side) */}
-        <div className="absolute -right-4 top-8 translate-x-full">
+        <div className="absolute -right-4 top-8 hidden translate-x-full md:block">
           <div className="relative bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-sm border border-white/20 rounded-2xl px-4 py-3 shadow-lg">
             {/* Arrow pointing to profile */}
             <div className="absolute left-0 top-1/2 -translate-x-2 -translate-y-1/2 w-0 h-0 border-t-8 border-t-transparent border-b-8 border-b-transparent border-r-8 border-r-white/20"></div>
@@ -115,7 +115,7 @@ export function Hero({
 
       {/* Name & Description */}
       <div className="space-y-4 max-w-2xl">
-        <h1 className="text-6xl md:text-7xl font-extrabold">
+        <h1 className="text-4xl font-extrabold leading-tight sm:text-5xl md:text-7xl">
           Hey, I'm{" "}
           <span
             className="relative inline-block text-transparent bg-clip-text bg-gradient-to-r from-blue-400 via-purple-500 to-pink-500 px-2"
@@ -124,7 +124,7 @@ export function Hero({
             Space²
           </span>
         </h1>
-        <p className="text-2xl text-gray-400 font-light">
+        <p className="text-base font-light text-gray-400 sm:text-xl md:text-2xl">
           A{" "}
           <span className="line-through decoration-purple-500/50 decoration-2">
             Self-proclaimed
@@ -134,13 +134,12 @@ export function Hero({
 
         {/* Luna AI Profile Link */}
         <div className="pt-4 flex justify-center">
-
-          <div className="flex items-center gap-3">
+          <div className="flex flex-wrap items-center justify-center gap-3">
             <a
               href="https://luna.spaceistyping.com"
               target="_blank"
               rel="noopener noreferrer"
-              className="group relative flex items-center gap-3 px-6 py-2.5 rounded-full bg-white/5 border border-white/10 hover:bg-white/10 hover:border-purple-500/50 transition-all duration-300 shadow-lg hover:shadow-purple-500/10"
+              className="group relative flex w-full items-center justify-center gap-3 rounded-full border border-white/10 bg-white/5 px-5 py-2.5 text-center shadow-lg transition-all duration-300 hover:border-purple-500/50 hover:bg-white/10 hover:shadow-purple-500/10 sm:w-auto"
             >
               <div className="w-3 h-3 rounded-full bg-purple-500" />
               <span className="text-sm font-medium text-gray-300 group-hover:text-white transition-colors">
@@ -152,7 +151,7 @@ export function Hero({
               href="https://github.com/Space-Banane"
               target="_blank"
               rel="noopener noreferrer"
-              className="group relative flex items-center gap-2 px-4 py-2 rounded-full bg-white/5 border border-white/10 hover:bg-white/10 hover:border-gray-400 transition-all duration-300 shadow-sm"
+              className="group relative flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-4 py-2 shadow-sm transition-all duration-300 hover:border-gray-400 hover:bg-white/10"
               aria-label="GitHub"
             >
               <svg className="w-6 h-6 text-gray-300 group-hover:text-white" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
@@ -164,7 +163,7 @@ export function Hero({
               href="https://gitea.reversed.dev/space"
               target="_blank"
               rel="noopener noreferrer"
-              className="group relative flex items-center gap-2 px-4 py-2 rounded-full bg-white/5 border border-white/10 hover:bg-white/10 hover:border-yellow-400 transition-all duration-300 shadow-sm"
+              className="group relative flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-4 py-2 shadow-sm transition-all duration-300 hover:border-yellow-400 hover:bg-white/10"
               aria-label="Gitea"
             >
               <img
diff --git a/src/sections/SkillsExperience.tsx b/src/sections/SkillsExperience.tsx
index f0e1a41..c794928 100644
--- a/src/sections/SkillsExperience.tsx
+++ b/src/sections/SkillsExperience.tsx
@@ -28,22 +28,22 @@ export function SkillsExperience({
   );
 
   return (
-    <section className="w-full max-w-6xl mx-auto space-y-12 px-4 pb-20">
+    <section className="w-full max-w-6xl mx-auto space-y-8 px-4 pb-20 sm:space-y-12">
       <div className="text-center space-y-4">
-        <h2 className="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-500">
+        <h2 className="text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-500 sm:text-3xl">
           Skills & Experience
         </h2>
-        <p className="text-gray-400">
+        <p className="text-sm text-gray-400 sm:text-base">
           <span className="text-red-400">
             THIS IS MISSING A LOT OF THINGS, BE AWARE
           </span>{" "}
           - Things I've worked with over the years.
         </p>
       </div>
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
+      <div className="grid grid-cols-1 gap-8 md:grid-cols-2 sm:gap-12">
         {Object.entries(groupedExperiences).map(([type, items]) => (
           <div key={type} className="space-y-6">
-            <h3 className="text-xl font-semibold border-l-4 border-blue-500 pl-4 capitalize">
+            <h3 className="border-l-4 border-blue-500 pl-4 text-lg font-semibold capitalize sm:text-xl">
               {type}
             </h3>
             <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
diff --git a/src/sections/TechStack.tsx b/src/sections/TechStack.tsx
index bd8a5a3..272e2bc 100644
--- a/src/sections/TechStack.tsx
+++ b/src/sections/TechStack.tsx
@@ -57,12 +57,12 @@ export function TechStack() {
   if (!ENABLE_TECH_STACK) {
     // Disabled
     return (
-      <section className="w-full max-w-4xl mx-auto px-4 space-y-12 mt-16 mb-24">
+      <section className="w-full max-w-4xl mx-auto px-4 space-y-10 mt-16 mb-24">
         <div className="text-center space-y-3">
-          <h2 className="text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-500">
+          <h2 className="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-500 sm:text-4xl">
             Tech Stack
           </h2>
-          <p className="text-gray-400 max-w-2xl mx-auto text-sm md:text-base">
+          <p className="mx-auto max-w-2xl text-sm text-gray-400 md:text-base">
             This section is currently disabled. It may be re-enabled in the future, but for now, it's hidden.
           </p>
         </div>
@@ -70,12 +70,12 @@ export function TechStack() {
     )
   }
   return (
-    <section className="w-full max-w-4xl mx-auto px-4 space-y-12 mt-16 mb-24">
+    <section className="w-full max-w-4xl mx-auto px-4 space-y-10 mt-16 mb-24">
       <div className="text-center space-y-3">
-        <h2 className="text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-500">
+        <h2 className="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-500 sm:text-4xl">
           Tech Stack
         </h2>
-        <p className="text-gray-400 max-w-2xl mx-auto text-sm md:text-base">
+        <p className="mx-auto max-w-2xl text-sm text-gray-400 md:text-base">
           A overview of the tools and technologies I use to build and host my applications.
         </p>
       </div>
diff --git a/src/sections/Uptime.tsx b/src/sections/Uptime.tsx
index f0d1481..4b5d10b 100644
--- a/src/sections/Uptime.tsx
+++ b/src/sections/Uptime.tsx
@@ -2,32 +2,32 @@
 
 export function Uptime() {
   return (
-    <section className="w-full max-w-6xl mx-auto space-y-10 px-4">
+    <section className="w-full max-w-6xl mx-auto space-y-8 px-4 sm:space-y-10">
       <div className="text-center space-y-4">
-        <h2 className="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-500">
+        <h2 className="text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-500 sm:text-3xl">
           Downtime
         </h2>
-        <p className="text-gray-400 max-w-2xl mx-auto">
+        <p className="mx-auto max-w-2xl text-sm text-gray-400 sm:text-base">
           I love selfhosting stuff, can you tell?
         </p>
       </div>
 
-      <div className="max-w-3xl mx-auto">
-        <div className="p-6 rounded-2xl bg-gradient-to-br from-gray-800/20 to-transparent backdrop-blur-sm border border-white/6">
-          <h3 className="text-2xl font-semibold text-white mb-4 text-center">
+      <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">
+          <h3 className="mb-4 text-center text-xl font-semibold text-white sm:text-2xl">
             Github vs HomeLab Uptime
           </h3>
-          <div className="flex gap-6 items-center justify-between">
+          <div className="flex flex-col items-center justify-between gap-6 sm:flex-row">
             <div className="flex-1 text-center">
-              <img src="/gh_down.png" alt="GitHub downtime" className="mx-auto h-28 object-contain" />
+              <img src="/gh_down.png" alt="GitHub downtime" className="mx-auto h-24 object-contain sm:h-28" />
               <h4 className="mt-3 font-medium text-white">GitHub</h4>
               <p className="text-gray-400 mt-1">Goes down more.</p>
             </div>
 
-            <div className="w-px h-24 bg-white/6" />
+            <div className="h-px w-24 bg-white/6 sm:h-24 sm:w-px" />
 
             <div className="flex-1 text-center">
-              <img src="/homelab_down.png" alt="HomeLab" className="mx-auto h-28 object-contain" />
+              <img src="/homelab_down.png" alt="HomeLab" className="mx-auto h-24 object-contain sm:h-28" />
               <h4 className="mt-3 font-medium text-white">HomeLab</h4>
               <p className="text-gray-400 mt-1">Goes down less.</p>
             </div>
diff --git a/src/sections/WorkExperience.tsx b/src/sections/WorkExperience.tsx
index 6387c2e..8e3248b 100644
--- a/src/sections/WorkExperience.tsx
+++ b/src/sections/WorkExperience.tsx
@@ -51,18 +51,18 @@ export function WorkExperience({ realWork }: WorkExperienceProps) {
 	);
 
 	return (
-		<section className="w-full max-w-4xl mx-auto px-4 space-y-8">
+		<section className="w-full max-w-4xl mx-auto px-4 space-y-6 sm:space-y-8">
 			<div className="text-center space-y-2">
-				<h2 className="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-500">
+				<h2 className="text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-500 sm:text-3xl">
 					Work Experience
 				</h2>
-				<p className="text-gray-400 max-w-2xl mx-auto">
+				<p className="mx-auto max-w-2xl text-sm text-gray-400 sm:text-base">
 					Actual work that i did at actual companies.
 				</p>
 			</div>
 
 			{realWork.length === 0 ? (
-				<div className="p-6 md:p-8 rounded-2xl bg-gradient-to-br from-cyan-500/10 to-blue-500/5 backdrop-blur-sm border border-cyan-500/20 text-center">
+				<div className="rounded-2xl border border-cyan-500/20 bg-gradient-to-br from-cyan-500/10 to-blue-500/5 p-5 text-center backdrop-blur-sm sm:p-6 md:p-8">
 					<p className="text-gray-300">No work experience entries available yet.</p>
 				</div>
 			) : (
@@ -70,11 +70,11 @@ export function WorkExperience({ realWork }: WorkExperienceProps) {
 					{sortedRealWork.map((entry, index) => (
 						<div
 							key={`${entry.company}-${index}`}
-							className="p-6 md:p-8 rounded-2xl bg-gradient-to-br from-cyan-500/10 to-blue-500/5 backdrop-blur-sm border border-cyan-500/20 space-y-5"
+							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"
 						>
-							<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
+							<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between sm:gap-2">
 								<div>
-									<h3 className="text-2xl font-semibold text-white">{entry.company}</h3>
+									<h3 className="text-xl font-semibold text-white sm:text-2xl">{entry.company}</h3>
 									{entry.role ? (
 										<p className="text-sm font-medium text-cyan-200/90 mt-1">{entry.role}</p>
 									) : null}