updated sizes

Moealsir · Jul 1, 2024 · 6ae4c55 · 6ae4c55
1 parent 01f9796
commit 6ae4c55
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 7 deletions.
diff --git a/app/components/ResumeCard.jsx b/app/components/ResumeCard.jsx
@@ -5,7 +5,7 @@ import useIntersectionObserver from './ui/useIntersectionObserver';
 const ResumeCard = ({ icon, title, children }) => {
   const h1Ref = useIntersectionObserver({ threshold: 0.2 });
   return (
-    <div ref={h1Ref} className={`scroll-element py-2 max-xl:py-0 px-4 max-sm:px-4 max-sm:py-2 flex flex-col justify-start text-start rounded-md bg-paradiso-800 text-white shadow-xl mb-6 max-sm:mb-4 card-shadow`}>
+    <div ref={h1Ref} className={`scroll-element py-2 max-xl:py-0 px-4 max-sm:px-4 max-sm:py-2 flex flex-col justify-start text-start rounded-md bg-paradiso-800 text-white shadow-xl mb-6 max-sm:mb-8 card-shadow`}>
       <div className='flex items-center gap-2 p-2'>
         <Image src={icon} alt={title} width={30} height={30} style={{ filter: 'invert(1)' }} />
         <h2 className='text-2xl max-sm:text-2xl font-semibold'>{title}</h2>

diff --git a/app/sections/Projects.jsx b/app/sections/Projects.jsx
@@ -13,7 +13,7 @@ const Projects = () => {
       id="projects"
       className="sections padding-x max-container max-sm:pr-4 max-sm:pl-4"
     >
-      <div className="flex flex-col items-start mb-4 lg:mb-10">
+      <div className="flex flex-col items-start mb-10">
         <h1 className="section-heading pt-8 max-sm:text-4xl">Projects</h1>
       </div>
       <div
@@ -23,7 +23,7 @@ const Projects = () => {
         {projectData.map((project, index) => (
           <div
             key={index}
-            className="hover:shadow-md bg-paradiso-400 bg-opacity-90 rounded-xl flex flex-col items-center p-4"
+            className="hover:shadow-md bg-paradiso-400 md:w-[500px] bg-opacity-90 rounded-xl flex flex-col items-center p-4"
           >
             <div className="w-full flex flex-col justify-between">
               <figure className="project-figure w-full">

diff --git a/app/sections/Resume.jsx b/app/sections/Resume.jsx
@@ -13,14 +13,14 @@ const Resume = () => {
   const h1Ref = useIntersectionObserver({ threshold: 0.05 });
 
   return (
-    <section id="resume" className="bg-paradiso-500 w-full justify-center items-center flex flex-col mt-4 mb-4 max-sm:pr-8 max-sm:pl-8">
+    <section id="resume" className="bg-paradiso-500 w-full justify-center items-center flex flex-col mt-4 mb-4 max-sm:pr-8 max-sm:px-8">
       <div className="flex flex-col items-start mb-16 max-sm:mb-6">
         <h1 ref={h1Ref} className="section-heading pt-8 max-sm:text-4xl scroll-element animate">
           Resume
         </h1>
       </div>
-      <div className="flex flex-col lg:flex-row justify-start items-start max-sm:items-center lg:gap-10 max-sm:gap-2 sm:flex-col">
-        <div className="w-full">
+      <div className="flex flex-col lg:flex-row justify-start items-start max-sm:items-center sm:flex-col max-sm:px-8">
+        <div className="w-[500px] max-sm:w-[350px] px-4">
           <ResumeCard icon={educationIcon} title="Education">
             <div>
               <ul className="flex flex-col gap-2">
@@ -68,7 +68,7 @@ const Resume = () => {
             </div>
           </ResumeCard>
         </div>
-        <div className="w-full lg:w-1/2">
+        <div className="w-[500px] max-sm:w-[350px] px-4">
           <ResumeCard icon={workExperienceIcon} title="Work Experience">
             <div>
               <ul className="flex flex-col gap-2">