Quick fix for work section alignment

urbanobaz · Sep 17, 2024 · d5c1fd4 · d5c1fd4
1 parent 89a7d16
commit d5c1fd4
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 11 deletions.
diff --git a/app/page.tsx b/app/page.tsx
@@ -194,27 +194,27 @@ export default function Home() {
         <div className='max-w-[980px] w-full mt-[80px]'>
           <h2 className="flex flex-col text-xl font-semibold mb-5">Work</h2>
           <div className={cn(styles.workRow, 'flex mb-[16px]')}>
-            <p className={cn('w-[120px]', styles.timeText)}>2023-present</p>
+            <p className={cn('w-[100px]', styles.timeText)}>2023-now</p>
             <div className={styles.arrowDiv}>→</div>
-            <div className={cn('w-[26px] h-[26px] border-[1px] border-black rounded-full mr-[22px]', styles.circleDiv)} />
+            <div className={cn('w-[26px] h-[26px] border-[1px] border-black rounded-full mr-[26px]', styles.circleDiv)} />
             <div className={styles.hrWrapper}>
               <hr className={cn(styles.hrLine, 'h-[18px] w-[1px] bg-slate-900')} />
             </div>
             <p className={styles.employerText}>Frontend Developer, <a href='https://tirerack.com' className='underline underline-offset-4'>Tirerack</a></p>
           </div>
           <div className={cn(styles.workRow, 'flex mb-[16px]')}>
-            <p className={cn('w-[120px]', styles.timeText)}>2021-2023</p>
+            <p className={cn('w-[100px]', styles.timeText)}>2021-2023</p>
             <div className={styles.arrowDiv}>→</div>
-            <div className={cn('w-[26px] h-[26px] border-[1px] border-black rounded-full mr-[22px]', styles.circleDiv)} />
+            <div className={cn('w-[26px] h-[26px] border-[1px] border-black rounded-full mr-[26px]', styles.circleDiv)} />
             <div className={styles.hrWrapper}>
               <hr className={cn(styles.hrLine, 'h-[18px] w-[1px] bg-slate-900')} />
             </div>
             <p className={styles.employerText}>Software Engineer, <a href='https://gohopscotch.com' className='underline underline-offset-4'>Hopscotch</a></p>
           </div>
           <div className={cn(styles.workRow, 'flex mb-[16px]')}>
-            <p className={cn('w-[120px]', styles.timeText)}>2019-2021</p>
+            <p className={cn('w-[100px]', styles.timeText)}>2019-2021</p>
             <div className={styles.arrowDiv}>→</div>
-            <div className={cn('w-[26px] h-[26px] border-[1px] border-black rounded-full mr-[22px]', styles.circleDiv)} />
+            <div className={cn('w-[26px] h-[26px] border-[1px] border-black rounded-full mr-[26px]', styles.circleDiv)} />
             <p className={styles.employerText}>Instructor, <a href='https://theideacenter.co/' className='underline underline-offset-4'>The Idea Center at Miami Dade College</a></p>
           </div>
         </div>

diff --git a/styles/Main.module.css b/styles/Main.module.css
@@ -205,7 +205,7 @@
 }
 
 .hrWrapper {
-  transform: translate(-35px, 24px);
+  transform: translate(-40px, 24px);
 }
 
 /* Responsiveness */
@@ -328,16 +328,16 @@
 @media screen and (max-width: 640px) {
   .timeText {
     font-size: 14px;
-    width: 95px;
-    min-width: 95px;
+    width: 80px;
+    min-width: 80px;
   }
 
   .employerText {
     font-size: 14px;
   }
 
   .circleDiv {
-    margin-right: 8px;
+    margin-right: 12px;
     height: 12px;
     width: 12px;
     min-width: 12px;
@@ -346,7 +346,7 @@
   }
 
   .hrWrapper {
-    transform: translate(-14px, 18px);
+    transform: translate(-18px, 18px);
   }
 
   .hrLine {