fix: make responsiveness better

AlexandreBellas · May 30, 2024 · 504bb2d · 504bb2d
1 parent a79f50b
commit 504bb2d
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 16 deletions.
diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx
@@ -20,17 +20,19 @@ export default function Footer() {
   ]
   return (
     <footer className="bg-slate-900 py-4">
-      <div className="flex justify-center gap-2">
-        <p className="text-white">
+      <div className="flex flex-col justify-center gap-2 md:flex-row">
+        <p className="text-center text-white">
           ©️ {currYear} Made by Alexandre Batistella with
         </p>
-        {techs.map((tech) => (
-          <BadgeTech
-            description={tech.description}
-            slug={tech.slug}
-            key={tech.slug}
-          />
-        ))}
+        <div className="flex justify-center gap-2">
+          {techs.map((tech) => (
+            <BadgeTech
+              key={tech.slug}
+              description={tech.description}
+              slug={tech.slug}
+            />
+          ))}
+        </div>
       </div>
     </footer>
   )

diff --git a/src/components/SectionAboutMe/index.tsx b/src/components/SectionAboutMe/index.tsx
@@ -7,9 +7,9 @@ export default function SectionAboutMe() {
 
   return (
     <section id="aboutMe" className="flex justify-center bg-slate-800 py-12">
-      <div className="container">
+      <div className="container mx-4">
         <p className="mb-3 text-3xl font-extrabold text-white">About me</p>
-        <div className="flex space-x-8">
+        <div className="flex flex-col space-x-8 lg:flex-row">
           <div className="flex-1">
             <p className="mb-2 text-justify text-white">
               {`My contact with technology started when I was 4 years old. My

diff --git a/src/components/SectionContactMe/index.tsx b/src/components/SectionContactMe/index.tsx
@@ -7,7 +7,7 @@ export default function SectionContactMe() {
   return (
     <section
       id="contactMe"
-      className="flex min-h-screen flex-col items-center justify-center bg-slate-800 py-12"
+      className="flex min-h-[110vh] flex-col items-center justify-center bg-slate-800 py-12"
     >
       <div className="container mx-auto">
         <p className="mb-3 text-center text-3xl font-extrabold text-white">
@@ -38,7 +38,7 @@ export default function SectionContactMe() {
         <div className="mt-8 flex justify-center">
           <Link
             href="/docs/Alexandre_Batistella_Bellas_CV.pdf"
-            className="flex gap-4 rounded-xl bg-amber-500/75 px-8 py-3 hover:opacity-80"
+            className="flex gap-2 rounded-xl bg-amber-500/75 px-6 py-3 hover:opacity-80"
           >
             <CloudDownloadIcon className="text-amber-950" />
             <p className="font-bold text-amber-950">Download CV</p>

diff --git a/src/components/SectionProjects/index.tsx b/src/components/SectionProjects/index.tsx
@@ -8,9 +8,9 @@ import BadgeTech from '../BadgeTech'
 export default function SectionProjects() {
   return (
     <section id="projects" className="flex justify-center bg-slate-900 py-12">
-      <div className="container">
+      <div className="container mx-4">
         <p className="text-3xl font-extrabold text-white">Projects</p>
-        <div className="mt-4 grid grid-cols-3 gap-x-4 gap-y-4">
+        <div className="mt-4 grid grid-cols-1 gap-x-4 gap-y-4 md:grid-cols-2 lg:grid-cols-3">
           {projects.map((project) => (
             <div
               key={project.slug}

diff --git a/src/helpers/get-years-of-experience.ts b/src/helpers/get-years-of-experience.ts
@@ -1,5 +1,5 @@
 import { differenceInYears } from 'date-fns'
 
 export default function getYearsOfExperience(): number {
-  return differenceInYears(new Date(), new Date(2018, 5, 1))
+  return differenceInYears(new Date(), new Date(2018, 4, 1))
 }