Updated max-sm

Moealsir · Jul 1, 2024 · 5464d5e · 5464d5e
1 parent d4aeee5
commit 5464d5e
Show file tree

Hide file tree

Showing 10 changed files with 68 additions and 42 deletions.
diff --git a/app/components/ResumeCard.jsx b/app/components/ResumeCard.jsx
@@ -5,10 +5,10 @@ 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 px-4 flex flex-col justify-start text-start rounded-md bg-paradiso-800 text-white shadow-xl mb-6 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-4 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 font-semibold'>{title}</h2>
+        <h2 className='text-2xl max-sm:text-2xl font-semibold'>{title}</h2>
       </div>
       <div className='flex flex-col space-y-2 text-wrap'>
         {children}

diff --git a/app/components/SkillsCard.jsx b/app/components/SkillsCard.jsx
@@ -23,8 +23,8 @@ const CustomCard = ({ title, className }) => {
       ref={cardRef}
       className={`scroll-element p-4 flex flex-col bg-paradiso-700 rounded-lg hover:shadow-md ${className}`}
     >
-      <CardHeader className="pb-2 mb-4 flex-col items-center">
-        <h4 ref={cardRef} className="font-bold text-4xl text-center text-white">
+      <CardHeader className="pb-2 mb-4 max-sm:mb-2 flex-col items-center">
+        <h4 ref={cardRef} className="font-bold text-4xl max-sm:text-2xl text-center text-white">
           {title}
         </h4>
       </CardHeader>

diff --git a/app/components/ui/text-generate-effect.tsx b/app/components/ui/text-generate-effect.tsx
@@ -44,7 +44,7 @@ export const TextGenerateEffect = ({
 
 
   return (
-    <div className={cn("font-bold", className)}>
+    <div className={cn("", className)}>
       <div className="mt-4">
         <div className=" dark:text-corinthia leading-snug tracking-wide">
           {renderWords()}

diff --git a/app/globals.css b/app/globals.css
@@ -132,10 +132,22 @@ section {
 }
 
 .sections {
-    @apply bg-paradiso-500 w-full min-h-full justify-center items-center flex flex-col mt-4 mb-4;
+    @apply bg-paradiso-500 w-full min-h-full justify-center items-center flex flex-col mt-4 mb-4 max-sm:mt-0 max-sm:mb-4;
 }
 
-
+.image-slider-container {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .image-slider-container img {
+    max-width: 100%;
+    height: auto;
+    display: block;
+  }
+
 
 .badge {
    @apply flex gap-1 items-center text-center shadow-md rounded-lg ring-1 ring-black ring-opacity-20 py-1 px-2

diff --git a/app/sections/About.jsx b/app/sections/About.jsx
@@ -39,42 +39,58 @@ const About = () => {
   return (
     <section
       id="about"
-      className="flex flex-col padding-x max-container bg-paradiso-500 w-full min-h-full mt-10 justify-center items-center max-sm:p-4 sm:p-4"
+      className="flex flex-col padding-x bg-paradiso-500 w-full min-h-full mt-10 justify-center items-center max-sm:pl-8 max-sm:pr-8 sm:p-4"
     >
-      <div className="flex flex-col items-start mb-16">
-        <h1 ref={h1Ref} className="section-heading pt-8 scroll-element animate">
+      <div className="flex flex-col items-start mb-10">
+        <h1
+          ref={h1Ref}
+          className="section-heading pt-6 scroll-element animate max-sm:text-4xl max-sm:pt-2"
+        >
           About
         </h1>
       </div>
 
-      <div className="flex flex-col bg-paradiso-600 p-2 rounded-xl shadow-lg">
+      <div className="flex flex-col bg-paradiso-600 p-2 rounded-xl shadow-lg max-sm:p-6">
         <div className="flex flex-col md:flex-row md:gap-10 lg:gap-20 lg:mx-6 justify-center items-center">
           <div className="flex justify-center items-center p-0 ">
             <Image
               ref={imgRef}
-              className="rounded-circle profile-img profile-move border-8 border-paradiso-400 w-[270px] h-[270px] max-sm:mt-4 sm:mt-4 sm:mb-4 max-sm:mb-4"
+              className="rounded-circle profile-img profile-move border-8 border-paradiso-400 w-[270px] h-[270px] max-sm:w-[180px] max-sm:h-[180px] sm:mt-4 sm:mb-4 max-sm:mb-4"
               src={profile}
               alt="Mohamed Suliman Picture"
               width={270}
               height={270}
             />
           </div>
-          <div className="lg:w-[600px] max-sm:w-full md:w-[400px] p-4">
-            <p className="text-start text-white font-bold text-2xl">
-              Hello, I&apos;m Mohamed Suliman, I studied <span className="text-paradiso-900">electrical engineering </span>
-              at <span className="text-paradiso-900">Sudan International University </span> and worked in the field of <span className="text-paradiso-900">
-              solar
-              energy</span> after my graduation. I participated in many <span className="text-paradiso-900">volunteer programs </span>
-              in Qatar. I spend my free time writing codes to <span className="text-paradiso-900"> solve
-              real problems</span> or to <span className="text-paradiso-900">design programs </span>that can make life easier. I
-              love <span className="text-paradiso-900">automation</span>.  I am ready to automate everything. I&apos;m an
-              ambitious <span className="text-paradiso-900">full stack developer</span> with an affinity towards <span className="text-paradiso-900">web development.</span> When I&apos;m not coding I love to play <span className="text-paradiso-900">video games.</span>
+          <div className="lg:w-[600px] max-sm:w-full md:w-[400px]">
+            <p className="text-start text-white font-bold text-2xl max-sm:text-lg">
+              Hello, I&apos;m Mohamed Suliman, I studied{" "}
+              <span className="text-paradiso-900">electrical engineering </span>
+              at{" "}
+              <span className="text-paradiso-900">
+                Sudan International University{" "}
+              </span>{" "}
+              and worked in the field of{" "}
+              <span className="text-paradiso-900">solar energy</span> after my
+              graduation. I participated in many{" "}
+              <span className="text-paradiso-900">volunteer programs </span>
+              in Qatar. I spend my free time writing codes to{" "}
+              <span className="text-paradiso-900"> solve real problems</span> or
+              to <span className="text-paradiso-900">design programs </span>that
+              can make life easier. I love{" "}
+              <span className="text-paradiso-900">automation</span>.  I am ready
+              to automate everything. I&apos;m an ambitious{" "}
+              <span className="text-paradiso-900">full stack developer</span>{" "}
+              with an affinity towards{" "}
+              <span className="text-paradiso-900">web development.</span> When
+              I&apos;m not coding I love to play{" "}
+              <span className="text-paradiso-900">video games.</span>
             </p>
           </div>
         </div>
       </div>
       <div className="flex flex-col items-start justify-start mb-0 p-4">
-        <h3 className="section-sub-heading text-center pt-10 scroll-element animate pb-6">
+        <h3 className="section-sub-heading text-center pt-10 max-sm:pt-6 scroll-element animate pb-6">
           Interests
         </h3>
         <div className="scroll-element animate grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 sm:scale-90 gap-4 mb-6 max-sm:gap-1 md:pr-4 md:pl-4 ">

diff --git a/app/sections/Contact.jsx b/app/sections/Contact.jsx
@@ -14,7 +14,7 @@ const About = () => {
         className="flex flex-col padding-x max-container bg-paradiso-600 w-full min-h-full justify-center items-center"
       >
         <div className="flex flex-col items-start mb-16">
-          <h1 ref={h1Ref} className="section-heading pt-8 scroll-element animate">
+          <h1 ref={h1Ref} className="section-heading pt-8 max-sm:text-4xl scroll-element animate">
             Contact
           </h1>
         </div>

diff --git a/app/sections/Hero.jsx b/app/sections/Hero.jsx
@@ -17,9 +17,9 @@ const Hero = () => {
       className="sections padding-x max-container"
     >
       <div className="flex flex-col items-center max-lg:flex max-lg:flex-col max-lg:items-center max-lg:text-center">
-        <TextGenerateEffect words={words} className='font-Yellowtail text-8xl max-sm:text-6xl' />
-        <h2 className="font-bold text-4xl text-paradiso-900">{job}</h2>
-        <Image src={programmer} alt="Programmer" width={550} height={500} className="max-sm:scale-90" />
+        <TextGenerateEffect words={words} className='font-Yellowtail text-8xl max-sm:text-4xl' />
+        <h2 className="font-bold text-4xl max-sm:text-xl text-paradiso-900">{job}</h2>
+        <img src={programmer.src} alt="Programmer" class="w-[550px] h-[500px] max-sm:w-[250px] max-sm:h-[220px]" /> 
       </div>
     </section>
   );

diff --git a/app/sections/Projects.jsx b/app/sections/Projects.jsx
@@ -3,10 +3,8 @@ import React from "react";
 import { projectData } from "../constants/index.js";
 import useIntersectionObserver from "../components/ui/useIntersectionObserver.js";
 import { preview, source } from "../assets/icons";
-import { Image } from "@nextui-org/image";
 import SimpleImageSlider from "react-simple-image-slider";
 
-
 const Projects = () => {
   const h1Ref = useIntersectionObserver({ threshold: 0.05 });
 
@@ -16,11 +14,11 @@ const 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">
-        <h1 className="section-heading pt-8">Projects</h1>
+        <h1 className="section-heading pt-8 max-sm:text-4xl">Projects</h1>
       </div>
       <div
         ref={h1Ref}
-        className="scroll-element animate grid grid-cols-1 sm:grid-cols-2 sm:scale-90 gap-6 mb-6 max-sm:gap-10 md:pr-4 md:pl-4 "
+        className="scroll-element animate grid grid-cols-1 sm:grid-cols-2 sm:scale-90 gap-6 mb-6 max-sm:gap-10 md:pr-4 md:pl-4 max-sm:pr-8 max-sm:pl-8 "
       >
         {projectData.map((project, index) => (
           <div
@@ -30,9 +28,9 @@ const Projects = () => {
             <div className="w-full flex flex-col justify-between">
               <figure className="project-figure w-full">
                 <div className="relative group">
-                  <div className="relative">
-                  <SimpleImageSlider
-                      width={500}
+                  <div className="relative image-slider-container">
+                    <SimpleImageSlider
+                      width="100%"
                       height={300}
                       images={project.imgSrc}
                       showBullets={project.imgSrc.length > 1}

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-4 max-sm:pl-4">
-      <div className="flex flex-col items-start mb-16">
-        <h1 ref={h1Ref} className="section-heading pt-8 scroll-element animate">
+    <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">
+      <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 lg:w-1/2">
+        <div className="w-full">
           <ResumeCard icon={educationIcon} title="Education">
             <div>
               <ul className="flex flex-col gap-2">

diff --git a/app/sections/Skills.jsx b/app/sections/Skills.jsx
@@ -17,13 +17,13 @@ const Skills = () => {
   const h1Ref = useIntersectionObserver({ threshold: 0.5 });
 
   return (
-    <section id="skills" className='sections padding-x  max-container max-sm:pr-4 max-sm:pl-4'>
-      <div className="flex flex-col items-start mb-16">
-        <h1 className="section-heading pt-8">
+    <section id="skills" className='sections max-sm:pr-8 max-sm:pl-8'>
+      <div className="flex flex-col items-start mb-16 max-sm:mb-6 max-sm:mt-4">
+        <h1 className="section-heading pt-8 max-sm:pt-0 max-sm:text-4xl">
           Skills
         </h1>
       </div>
-      <div className="grid grid-cols-2 sm:scale-90 max-sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-4 lg:mb-0 xl:mb-10 lg:scale-110">
+      <div className="grid grid-cols-2 sm:scale-90 max-sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-6 lg:mb-0 xl:mb-10 lg:scale-110">
         <div className="languages">
           <CustomCard title="Languages" sect={Languages} />
         </div>