diff --git a/src/portfolio/sections/Experience/CityGroup.tsx b/src/portfolio/sections/Experience/CityGroup.tsx index 5ebabd6..fbcbce9 100644 --- a/src/portfolio/sections/Experience/CityGroup.tsx +++ b/src/portfolio/sections/Experience/CityGroup.tsx @@ -33,7 +33,7 @@ const CityGroup: FC = ({ group }) => { {job.endDate ? `${job.startDate} - ${job.endDate}` : `Since ${job.startDate}`} ))} - {group.hasMore && ( + {group.hasMore ? ( - )} + ) : displayedJobs.length === 2 ? ( +
+ Placeholder +
+ ) : null}
{group.city} diff --git a/src/portfolio/styling/currentWork.module.scss b/src/portfolio/styling/currentWork.module.scss index 2e776ca..94a1653 100644 --- a/src/portfolio/styling/currentWork.module.scss +++ b/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; } diff --git a/src/portfolio/styling/experience.module.scss b/src/portfolio/styling/experience.module.scss index c24989a..0be826c 100644 --- a/src/portfolio/styling/experience.module.scss +++ b/src/portfolio/styling/experience.module.scss @@ -61,6 +61,7 @@ width: 90%; padding: 2rem 1rem; margin-bottom: 4rem; + min-height: 250px; &::after { bottom: -2rem; diff --git a/src/portfolio/styling/intro.module.scss b/src/portfolio/styling/intro.module.scss index dc5d6cf..42a47c8 100644 --- a/src/portfolio/styling/intro.module.scss +++ b/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; } } diff --git a/src/portfolio/styling/skillsLinks.module.scss b/src/portfolio/styling/skillsLinks.module.scss index fbb508b..9affadc 100644 --- a/src/portfolio/styling/skillsLinks.module.scss +++ b/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; + } } } }