From 4cc262bedb90c18b681a31c1239dfc0ebd8791f5 Mon Sep 17 00:00:00 2001
From: Jason Thompson <jason@jasonthompson.org>
Date: Tue, 16 Dec 2025 18:41:31 -0500
Subject: [PATCH 1/6] style: improve mobile layout for Homepage section
 alignment and text positioning

---
 src/app/page.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 3640385..e5227b4 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -36,7 +36,7 @@ const Homepage = () => {
           className="rounded-t-3xl object-contain"
         />
       </section>
-      <section className="h-1/2 lg:h-full lg:w-1/2 flex flex-col gap-8 items-center justify-center text-primary-text">
+      <section className="h-1/2 lg:h-full lg:w-1/2 flex flex-col gap-8 items-center justify-center text-primary-text text-center lg:text-left">
         <h1 className="text-4xl font-bold md:text-6xl">
           Software Engineer at Capital One.
         </h1>
@@ -47,7 +47,7 @@ const Homepage = () => {
           tools and Agile methodologies. Adept at problem-solving and
           collaborative team efforts.
         </p>
-        <div className="flex w-full gap-4">
+        <div className="flex w-full flex-col sm:flex-row gap-3 sm:gap-4 items-stretch sm:items-center">
           <Link
             href="/portfolio"
             className={BUTTON_STYLES.primary}

From 04092e6376fbfc24312cea593810a3d32cb7eb05 Mon Sep 17 00:00:00 2001
From: Jason Thompson <jason@jasonthompson.org>
Date: Tue, 16 Dec 2025 18:42:11 -0500
Subject: [PATCH 2/6] style: enhance form layout and spacing for improved
 mobile responsiveness on Contact page

---
 src/app/contact/page.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index 2d9963d..b0ce828 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -93,15 +93,15 @@ const ContactPage = () => {
         />
       </div>
       <div className="flex w-full lg:w-1/2 items-center justify-center lg:h-full">
-        <form ref={refForm} onSubmit={sendEmail}>
-          <ul className="rounded-xl text-xl flex flex-col gap-8 justify-center p-24">
+        <form ref={refForm} onSubmit={sendEmail} className="w-full max-w-xl">
+          <ul className="rounded-xl text-xl flex flex-col gap-6 sm:gap-8 justify-center p-6 sm:p-10 md:p-12 lg:p-16">
             <li>
               <input
                 type="text"
                 name="name"
                 placeholder="Name"
                 required
-                className="bg-transparent border-b-2 border-b-primary-bg outline-none focus:border-b-primary-accent transition-colors"
+                className="w-full bg-transparent border-b-2 border-b-primary-bg outline-none focus:border-b-primary-accent transition-colors"
               />
             </li>
             <li>
@@ -110,7 +110,7 @@ const ContactPage = () => {
                 name="email"
                 placeholder="Email"
                 required
-                className="bg-transparent border-b-2 border-b-primary-bg outline-none focus:border-b-primary-accent transition-colors"
+                className="w-full bg-transparent border-b-2 border-b-primary-bg outline-none focus:border-b-primary-accent transition-colors"
               />
             </li>
             <li>
@@ -119,7 +119,7 @@ const ContactPage = () => {
                 type="text"
                 name="subject"
                 required
-                className="bg-transparent border-b-2 border-b-primary-bg outline-none focus:border-b-primary-accent transition-colors"
+                className="w-full bg-transparent border-b-2 border-b-primary-bg outline-none focus:border-b-primary-accent transition-colors"
               />
             </li>
             <li>
@@ -127,10 +127,10 @@ const ContactPage = () => {
                 placeholder="Message"
                 name="message"
                 required
-                className="bg-transparent border-b-2 border-b-primary-bg outline-none focus:border-b-primary-accent transition-colors"
+                className="w-full bg-transparent border-b-2 border-b-primary-bg outline-none focus:border-b-primary-accent transition-colors min-h-28"
               ></textarea>
             </li>
-            <li className="flex flex-row items-center">
+            <li className="flex flex-row items-center pt-2">
               <input
                 type="submit"
                 disabled={sending}

From 74ce536474cc4e1497bcef3c64a1725b307b4b6c Mon Sep 17 00:00:00 2001
From: Jason Thompson <jason@jasonthompson.org>
Date: Tue, 16 Dec 2025 18:42:29 -0500
Subject: [PATCH 3/6] style: adjust padding and text sizes for improved mobile
 layout on Portfolio page

---
 src/app/portfolio/page.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/app/portfolio/page.tsx b/src/app/portfolio/page.tsx
index 5eb4aa9..bddce48 100644
--- a/src/app/portfolio/page.tsx
+++ b/src/app/portfolio/page.tsx
@@ -17,21 +17,21 @@ const PortfolioPage = () => {
 
   return (
     <div
-      className={`sm:pt-8 md:pt-12 lg:pt-20 xl:pt-32 ${
+      className={`pt-4 sm:pt-8 md:pt-12 lg:pt-20 xl:pt-32 ${
         isRendered ? "" : "hidden"
       }`}
     >
-      <div className="flex flex-col items-center">
+      <div className="flex flex-col items-center px-4">
         <div className="md:outline-double outline-[#cad3f5] p-4 m-4 inline-block md:py-6 md:px-10 md:-m-6 lg:py-14 lg:px-28 lg:-m-14 xl:py-20 xl:px-36 xl:-m-20">
-          <h1 className="text-[#cad3f5] text-6xl text-center font-semibold sm:px-8 md:px-12 lg:px-20 xl:px-48">
+          <h1 className="text-[#cad3f5] text-3xl sm:text-4xl md:text-5xl lg:text-6xl text-center font-semibold sm:px-4 md:px-8 lg:px-20 xl:px-48">
             My Different Projects
           </h1>
-          <h3 className="text-xl pt-4 text-[#cad3f5] text-center font-semibold">
+          <h3 className="text-base sm:text-lg md:text-xl pt-2 sm:pt-4 text-[#cad3f5] text-center font-semibold">
             Click on each project to learn more!
           </h3>
         </div>
       </div>
-      <div className="flex flex-row flex-wrap text-[#cad3f5] justify-center gap-5 sm:py-3 md:py-8 lg:py-16 xl:py-24">
+      <div className="flex flex-row flex-wrap text-[#cad3f5] justify-center gap-4 sm:gap-5 px-4 sm:py-3 md:py-8 lg:py-16 xl:py-24">
         {projects.map((project: Project) => (
           <Link href={`/portfolio/${project.name}`} key={project.name}>
             <PortfolioPane project={project} />

From 11b04c57a543d2ed1f8fb6bd0fc71b02674b2539 Mon Sep 17 00:00:00 2001
From: Jason Thompson <jason@jasonthompson.org>
Date: Tue, 16 Dec 2025 18:42:40 -0500
Subject: [PATCH 4/6] style: refine layout and spacing for improved mobile
 responsiveness on Project page

---
 src/app/portfolio/[projectName]/page.tsx | 27 ++++++++++++------------
 1 file changed, 14 insertions(+), 13 deletions(-)

diff --git a/src/app/portfolio/[projectName]/page.tsx b/src/app/portfolio/[projectName]/page.tsx
index 1d3804a..4d5e5c2 100644
--- a/src/app/portfolio/[projectName]/page.tsx
+++ b/src/app/portfolio/[projectName]/page.tsx
@@ -14,25 +14,26 @@ const ProjectPage = ({ params }: Props) => {
   }
 
   return (
-    <div className="h-screen flex flex-col justify-around text-[#cad3f5]">
-      <div className="relative w-full sm:h-[5vh] md:h-[20vh] lg:h-[40vh] xl:h-[50vh]">
-        <div className="-z-10">
-          <Image
-            src={project.img}
-            alt={project.alt_text}
-            layout="fill"
-            objectFit="cover"
-            objectPosition="center"
-          />
-        </div>
+    <div className="min-h-screen flex flex-col gap-6 sm:gap-8 md:gap-10 text-[#cad3f5]">
+      <div className="relative w-full h-40 sm:h-52 md:h-72 lg:h-96 xl:h-[50vh]">
+        <Image
+          src={project.img}
+          alt={project.alt_text}
+          fill
+          className="object-cover"
+          sizes="(max-width: 640px) 100vw, (max-width: 1024px) 90vw, 1200px"
+          priority={false}
+        />
       </div>
       <Link
         href={project.github_url}
-        className="text-4xl text-center font-semibold sm:px-8 md:px-12 lg:px-20 xl:px-48 underline text-[#7dc4e4]"
+        className="text-3xl sm:text-4xl md:text-5xl text-center font-semibold px-4 sm:px-8 md:px-12 lg:px-20 xl:px-48 underline text-[#7dc4e4]"
       >
         {project.name.replace("_", " ")}
       </Link>
-      <div className="text-center py-5 px-16">{project.long_desc}</div>
+      <div className="text-center text-base sm:text-lg py-4 px-4 sm:px-8 md:px-12 lg:px-20 xl:px-48">
+        {project.long_desc}
+      </div>
     </div>
   );
 };

From 990afbdfba6cf6ed5ce3cd9ac4ff91fa1a064368 Mon Sep 17 00:00:00 2001
From: Jason Thompson <jason@jasonthompson.org>
Date: Tue, 16 Dec 2025 18:42:53 -0500
Subject: [PATCH 5/6] style: enhance layout and responsiveness for
 PortfolioPane component

---
 src/components/portfoliopane.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/portfoliopane.tsx b/src/components/portfoliopane.tsx
index cafa3c4..d385a07 100644
--- a/src/components/portfoliopane.tsx
+++ b/src/components/portfoliopane.tsx
@@ -6,21 +6,21 @@ type PropsList = { project: Project };
 
 const PortfolioPane = (props: PropsList) => {
   return (
-    <div className="flex flex-col flex-wrap justify-center items-center">
+    <div className="flex flex-col flex-wrap justify-center items-center max-w-full">
       <h1 className="font-semibold py-2">
         {props.project.name.replace("_", " ")}
       </h1>
-      <div className="relative w-[480px] h-[235px] max-w-full">
+      <div className="relative w-full sm:w-[420px] md:w-[480px] h-[200px] sm:h-[220px] md:h-[235px]">
         <Image
           src={props.project.img}
           alt={props.project.alt_text}
           fill
           className="object-cover rounded shadow-md"
-          sizes="480px"
+          sizes="(max-width: 640px) 90vw, (max-width: 768px) 420px, 480px"
           priority={false}
         />
       </div>
-      <div className="flex items-center justify-center text-center w-1/2">
+      <div className="flex items-center justify-center text-center w-11/12 sm:w-4/5 md:w-2/3 lg:w-1/2">
         {props.project.short_desc}
       </div>
     </div>

From d304fe58b72c06e75666a9f56b73261d11e7e20f Mon Sep 17 00:00:00 2001
From: Jason Thompson <jason@jasonthompson.org>
Date: Tue, 16 Dec 2025 18:43:17 -0500
Subject: [PATCH 6/6] style: enhance layout and spacing for improved mobile
 responsiveness on Skills page

---
 src/app/skills/page.tsx | 22 +++++++++++++---------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/app/skills/page.tsx b/src/app/skills/page.tsx
index 3a82c91..92965c7 100644
--- a/src/app/skills/page.tsx
+++ b/src/app/skills/page.tsx
@@ -21,30 +21,34 @@ const SkillsPage = () => {
         isRendered ? "" : "hidden"
       }`}
     >
-      <div className="h-screen flex flex-col items-center justify-evenly">
-        <div className="flex flex-col justify-center items-center font-semibold sm:outline-double sm:py-10 sm:px-14 sm:-m-10 md:py-10 md:px-20 md:-m-10 lg:py-16 lg:px-36 lg:-m-16 xl:py-20 xl:px-44 xl:-m-20">
-          <h1 className="text-6xl text-center">Skills and Background</h1>
-          <h1 className="pt-4 text-xl">Click on each skill to learn more!</h1>
+      <div className="h-screen flex flex-col items-center justify-evenly px-4">
+        <div className="flex flex-col justify-center items-center font-semibold sm:outline-double sm:py-6 sm:px-8 sm:-m-6 md:py-10 md:px-20 md:-m-10 lg:py-16 lg:px-36 lg:-m-16 xl:py-20 xl:px-44 xl:-m-20">
+          <h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl text-center">
+            Skills and Background
+          </h1>
+          <h1 className="pt-2 sm:pt-4 text-base sm:text-lg md:text-xl">
+            Click on each skill to learn more!
+          </h1>
         </div>
-        <div className="flex gap-4 flex-wrap items-center justify-center w-1/2">
+        <div className="flex gap-2 sm:gap-4 flex-wrap items-center justify-center w-full sm:w-4/5 md:w-2/3 lg:w-1/2 px-2">
           {skillList.map((skill: Skill) => (
             <Link
               href={`#${skill.name}`}
               key={skill.name}
-              className="rounded p-2 text-sm cursor-pointer bg-primary-bg text-primary-text hover:bg-primary-accent hover:text-primary-secondary transition-colors"
+              className="rounded px-3 py-2 text-sm cursor-pointer bg-primary-bg text-primary-text hover:bg-primary-accent hover:text-primary-secondary transition-colors"
             >
               {skill.name}
             </Link>
           ))}
         </div>
       </div>
-      <div className="flex justify-center">
-        <div className="grid grid-cols-1 sm:grid-cols-2 gap-8 w-full max-w-4xl pb-6">
+      <div className="flex justify-center px-4">
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6 lg:gap-8 w-full max-w-6xl pb-10">
           {skillList.map((skill: Skill) => (
             <div
               id={skill.name}
               key={skill.name}
-              className="bg-primary-surface rounded-xl border border-primary-border shadow-md p-6 transition-all duration-200 hover:shadow-xl hover:border-primary-success hover:scale-105"
+              className="bg-primary-surface rounded-xl border border-primary-border shadow-md p-4 sm:p-6 transition-all duration-200 hover:shadow-xl hover:border-primary-success hover:scale-[1.02]"
             >
               <Skillblock skill={skill} />
             </div>