feat: fix Work and Education mobile views

martapanc · Jul 22, 2023 · ce0c835 · ce0c835
1 parent c576c14
commit ce0c835
Show file tree

Hide file tree

Showing 3 changed files with 92 additions and 12 deletions.
diff --git a/src/components/organisms/Education/Education.tsx b/src/components/organisms/Education/Education.tsx
@@ -2,7 +2,6 @@
 
 import { PortableText } from '@portabletext/react';
 import Image from 'next/image';
-// import {useTheme} from "next-themes";
 import * as React from 'react';
 
 import { School } from '@/types/School';
@@ -12,8 +11,6 @@ export interface EducationProps {
 }
 
 const Education = ({ schools }: EducationProps) => {
-  // const { theme } = useTheme();
-
   return (
     <div className=''>
       <div className='m-2 flex'>
@@ -26,8 +23,8 @@ const Education = ({ schools }: EducationProps) => {
             key={school._id}
             className='mb-4 rounded-md p-4 shadow-md dark:bg-slate-900'
           >
-            {/* Start School Header */}
-            <div className='flex border-b-2 border-slate-200 pb-2'>
+            {/* Start School Header - Desktop */}
+            <div className='hidden border-b-2 border-slate-200 pb-2 md:flex'>
               <Image
                 className='me-3 rounded-sm'
                 src={school.schoolIcon}
@@ -69,11 +66,52 @@ const Education = ({ schools }: EducationProps) => {
                 </div>
               </div>
             </div>
-            {/* End School Header */}
+            {/* End School Header - Desktop */}
+
+            {/* Start School Header - Mobile */}
+            <div className='flex flex-col border-b-2 border-slate-200 pb-2 md:hidden'>
+              <div className='flex'>
+                <Image
+                  className='me-3 rounded-sm'
+                  src={school.schoolIcon}
+                  alt={school.schoolName}
+                  width={60}
+                  height={60}
+                />
+
+                <div className='flex w-full justify-between'>
+                  <div className='flex flex-col'>
+                    <div className='flex flex-row justify-between'>
+                      <h4 className='me-4'>
+                        <a href={school.degreeUrl}>{school.schoolName}</a>
+                      </h4>
+
+                      <Image
+                        src={school.flagUrl}
+                        alt={school.schoolName}
+                        width={20}
+                        height={20}
+                      />
+                    </div>
+
+                    <h5 className='font-medium'>{school.degreeName}</h5>
+                  </div>
+                </div>
+              </div>
+
+              <div className='-mt-1 flex flex-row justify-end'>
+                <span className='me-8 text-sm font-normal'>{school.grade}</span>
+
+                <span className='text-sm font-normal'>
+                  {school.startYear}&nbsp; — &nbsp;{school.endYear}
+                </span>
+              </div>
+            </div>
+            {/* End School Header - Mobile */}
 
             {/* Start School Content */}
             <div className='job-content pt-4'>
-              <div className='skill-description pb-2 text-justify font-light'>
+              <div className='sm-skill-description md:skill-description pb-2 text-justify font-light'>
                 <PortableText value={school.description} />
               </div>
             </div>

diff --git a/src/components/organisms/WorkExperience/WorkExperience.tsx b/src/components/organisms/WorkExperience/WorkExperience.tsx
@@ -26,8 +26,8 @@ const WorkExperience = ({ jobs }: WorkExperienceProps) => {
             key={job._id}
             className='mb-4 rounded-md p-4 shadow-md dark:bg-slate-900'
           >
-            {/* Start Job Header */}
-            <div className='flex border-b-2 border-slate-200 pb-2'>
+            {/* Start Job Header - Desktop */}
+            <div className='hidden border-b-2 border-slate-200 pb-2 md:flex'>
               <Image
                 className='me-3 rounded-sm'
                 src={job.iconUrl}
@@ -55,23 +55,55 @@ const WorkExperience = ({ jobs }: WorkExperienceProps) => {
                 </div>
               </div>
             </div>
-            {/* End Job Header */}
+            {/* End Job Header - Desktop*/}
+
+            {/* Start Job Header - Mobile */}
+            <div className='flex flex-col border-b-2 border-slate-200 pb-2 md:hidden'>
+              <div className='flex'>
+                <Image
+                  className='me-3 rounded-sm'
+                  src={job.iconUrl}
+                  alt={job.company}
+                  width={60}
+                  height={60}
+                />
+
+                <div className='flex w-full justify-between'>
+                  <div className='flex flex-col'>
+                    <span className='text-sm font-semibold'>
+                      {job.company} {job.location && `~`} {job.location}
+                    </span>
+
+                    <span className='text-sm'>{job.jobTitle}</span>
+                  </div>
+                </div>
+              </div>
+
+              <div className='flex justify-end'>
+                <span className='text-xs font-medium'>
+                  {format(job.startDate)}
+                  &nbsp; — &nbsp;
+                  {job.isCurrentJob ? `present` : format(job.endDate)}
+                </span>
+              </div>
+            </div>
+            {/* End Job Header - Mobile*/}
 
             {/* Start Job Content */}
             <div className='job-content pt-4'>
               <div className='skill-description pb-2 text-justify font-light'>
                 <PortableText value={job.description} />
               </div>
 
-              <div className='mb-2 flex justify-end'>
+              <div className='mb-2 flex flex-wrap justify-end md:w-full'>
                 {job.technologies.map((tech) => (
                   <div
                     key={tech}
                     style={{
                       backgroundColor:
                         theme === 'dark' ? job.darkColor : job.mainColor,
                     }}
-                    className='ms-2 rounded-md px-2 py-0.5 text-white dark:text-black'
+                    className='mb-1 ms-1 rounded-sm px-1 py-0.5 text-xs text-white dark:text-black md:ms-2 md:rounded-md md:px-2 md:text-base'
                   >
                     {tech}
                   </div>

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -246,4 +246,14 @@
     padding-left: 8px;
     margin-bottom: 4px;
   }
+
+  .sm-skill-description > ul {
+    list-style: disc;
+    padding-left: 20px;
+  }
+
+  .sm-skill-description > ul > li {
+    padding-left: 4px;
+    margin-bottom: 4px;
+  }
 }