Merge develop into main

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,18 +119,18 @@ 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>
               <textarea
                 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}

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}

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>
   );
 };

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} />

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>

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>