feat: better mobile accessability

src/portfolio/sections/Experience/CityGroup.tsx

@@ -33,7 +33,7 @@ const CityGroup: FC<ICityGroupProps> = ({ group }) => {
 						{job.endDate ? `${job.startDate} - ${job.endDate}` : `Since ${job.startDate}`}
 					</div>
 				))}
-				{group.hasMore && (
+				{group.hasMore ? (
 					<button className={styles.showMoreBtn} onClick={() => setShowAll(!showAll)}>
 						{showAll ? (
 							<>
@@ -45,7 +45,11 @@ const CityGroup: FC<ICityGroupProps> = ({ group }) => {
 							</>
 						)}
 					</button>
-				)}
+				) : displayedJobs.length === 2 ? (
+					<div className={styles.showMoreBtn} style={{ visibility: "hidden", pointerEvents: "none" }}>
+						Placeholder
+					</div>
+				) : null}
 			</div>
 			<div className={styles.locationMarker}>
 				{group.city}

src/portfolio/styling/currentWork.module.scss

@@ -5,7 +5,6 @@
 	@include regularFont;
 
 	padding: 3rem 1rem;
-	overflow-x: hidden;
 
 	@media (max-width: 768px) {
 		padding: 2rem 1rem;
@@ -147,6 +146,7 @@
 .imageWrapper {
 	position: relative;
 	width: 200px;
+	max-width: 100%;
 	height: 200px;
 	flex-shrink: 0;
 }

src/portfolio/styling/experience.module.scss

@@ -61,6 +61,7 @@
     width: 90%;
     padding: 2rem 1rem;
     margin-bottom: 4rem;
+    min-height: 250px;
 
     &::after {
       bottom: -2rem;

src/portfolio/styling/intro.module.scss

@@ -20,12 +20,20 @@
   row-gap: $smallGap;
   margin: 1.2em 1.8em;
 
+  @media (max-width: 768px) {
+    column-gap: $mediumGap;
+  }
+
   & > div {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     column-gap: $mediumGap;
 
+    @media (max-width: 768px) {
+      column-gap: $smallGap;
+    }
+
     * {
       margin: auto 0;
     }
@@ -65,6 +73,10 @@
     position: relative;
     margin-right: 0.5em;
 
+    @media (max-width: 768px) {
+      margin-right: 0;
+    }
+
     @include nextImg;
   }
 }

src/portfolio/styling/skillsLinks.module.scss

@@ -47,6 +47,10 @@
 		h2 {
 			font-size: 1.3rem;
 			margin-bottom: 1rem;
+
+			@media (max-width: 768px) {
+				font-size: 1.5rem;
+			}
 		}
 
 		ul {
@@ -56,6 +60,10 @@
 
 		li {
 			margin-bottom: 0.75rem;
+
+			@media (max-width: 768px) {
+				margin-bottom: 0rem;
+			}
 		}
 
 		a {
@@ -65,6 +73,12 @@
 			display: flex;
 			align-items: center;
 			font-size: 1rem;
+			border-radius: 4px;
+
+			@media (max-width: 768px) {
+				font-size: 1.2rem;
+				padding: 0.65rem 0.85rem;
+			}
 
 			&:hover {
 				color: $accent_colour;
@@ -80,6 +94,10 @@
 			display: flex;
 			align-items: center;
 			gap: 0.75rem;
+
+			@media (max-width: 768px) {
+				gap: 1rem;
+			}
 		}
 
 		.icon {
@@ -87,6 +105,10 @@
 			transition: transform 0.2s ease;
 			display: flex;
 			align-items: center;
+
+			@media (max-width: 768px) {
+				font-size: 1.6rem;
+			}
 		}
 	}
 }