feat: improve element position on CV page

martapanc · Sep 14, 2023 · 8aa2675 · 8aa2675
1 parent 36cb064
commit 8aa2675
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 8 deletions.
diff --git a/src/app/(public)/cv/page.tsx b/src/app/(public)/cv/page.tsx
@@ -58,7 +58,7 @@ const AboutPage = async () => {
 
           <Intro intro={intro} />
 
-          <div className='mb-10 grid grid-cols-1 gap-5 md:grid-cols-3 md:gap-6'>
+          <div className='mb-10 grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-3 lg:gap-6'>
             {skills.map((skill: Skill) => (
               <div
                 key={skill.title}

diff --git a/src/components/atoms/headings/SectionHeading.tsx b/src/components/atoms/headings/SectionHeading.tsx
@@ -14,7 +14,7 @@ const SectionHeading = ({ titlePrefix }: SectionHeadingProps) => {
   const titleIconDimension = 36;
 
   return (
-    <div className='m-2 flex flex-col items-center'>
+    <div className='m-2 mb-3 flex flex-col items-center'>
       <Image
         className='h-auto'
         src={t(`${titlePrefix}.icon`)}

diff --git a/src/components/organisms/about-work/Intro.tsx b/src/components/organisms/about-work/Intro.tsx
@@ -19,7 +19,9 @@ const Intro = ({ intro }: IntroProps) => {
       <SectionHeading titlePrefix='aboutWork.softwareDevelopment' />
 
       <div className='mb-5'>
-        <ReactMarkdown>{intro.content.replace('8', noOfYears)}</ReactMarkdown>
+        <ReactMarkdown className='text-justify'>
+          {intro.content.replace('8', noOfYears)}
+        </ReactMarkdown>
       </div>
     </div>
   );

diff --git a/src/components/organisms/about-work/Languages.tsx b/src/components/organisms/about-work/Languages.tsx
@@ -16,11 +16,11 @@ const Languages = ({ languages }: LanguageProps) => {
     <div className='mb-6 mt-4'>
       <SectionHeading titlePrefix='aboutWork.languages' />
 
-      <div className='mt-4 grid grid-cols-1 gap-3 md:grid-cols-4 md:gap-6'>
+      <div className='mt-4 grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-4 lg:gap-6 justify-items-center'>
         {languages.map((language) => (
           <div
             key={language.id}
-            className='flex flex-row items-center rounded-md p-4 shadow-md dark:bg-slate-900 md:w-64'
+            className='flex flex-row items-center rounded-md p-4 shadow-md dark:bg-slate-900 w-full sm:w-64'
           >
             <Image
               src={language.flag.url}

diff --git a/src/components/organisms/about-work/Publications.tsx b/src/components/organisms/about-work/Publications.tsx
@@ -17,13 +17,15 @@ const Publications = ({ publications }: PublicationProps) => {
     <div className='mb-6 mt-4'>
       <SectionHeading titlePrefix='aboutWork.publications' />
 
-      <div className='mt-4 grid grid-cols-1 gap-3 md:grid-cols-3 md:gap-8'>
+      <div className='mt-4 grid grid-cols-1 md:grid-cols-2 gap-3 lg:grid-cols-3 lg:gap-8'>
         {publications.map((publication) => (
           <div
             key={publication.id}
-            className='flex h-[8.5rem] flex-col justify-between rounded-md p-4 shadow-md dark:bg-slate-900 md:h-40'
+            className='flex min-h-fit max-h-60 flex-col justify-between rounded-md p-4 shadow-md dark:bg-slate-900 lg:max-h-40 lg:h-40'
           >
-            <span className='font-semibold'>{publication.title}</span>
+            <span className='font-semibold mb-2 md:mb-auto'>
+              {publication.title}
+            </span>
 
             <div className='flex flex-row justify-between'>
               <div className='flex flex-col'>