amiirkhl/my-protfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: adapt portfolio sections for smaller screens

Browse Source
This commit is contained in:
Amirhossein Khalili
2026-09-05 17:26:06 +08:00
parent f6228f8507
commit 3d12f48f32
9 changed files with 440 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

149
src/components/ProjectsSection.module.css
View File

@@ -28,7 +28,11 @@
border: 2px solid var(--color-blue-600);
border-radius: 50%;
cursor: pointer;
transition: color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
transition:
color var(--motion-duration-fast) ease,
background-color var(--motion-duration-fast) ease,
border-color var(--motion-duration-fast) ease,
transform var(--motion-duration-fast) var(--motion-ease-out);
}
.navButtonPrevious {
@@ -41,19 +45,6 @@
color: var(--color-blue-white);
}
.navButton:hover:not(:disabled) {
transform: translateY(-1px);
}
.navButtonPrevious:hover:not(:disabled) {
background: var(--color-blue-200);
}
.navButtonNext:hover:not(:disabled) {
border-color: var(--color-blue-700);
background: var(--color-blue-700);
}
.navButton:focus-visible {
outline: 3px solid var(--focus-ring);
outline-offset: 3px;
@@ -68,20 +59,12 @@
color: var(--color-blue-white);
}
[data-theme="dark"] .navButtonPrevious:hover:not(:disabled) {
background: rgba(255, 255, 255, 0.12);
}
[data-theme="dark"] .navButtonNext {
border-color: var(--color-blue-white);
background: var(--color-blue-white);
color: var(--color-blue-950);
}
[data-theme="dark"] .navButtonNext:hover:not(:disabled) {
background: var(--color-blue-200);
}
.carouselViewport {
position: relative;
width: 100%;
@@ -130,12 +113,6 @@
transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.card:hover {
border-color: var(--border-strong);
box-shadow: 0 10px 24px var(--shadow-color);
transform: translateY(-2px);
}
.mediaContainer {
position: relative;
width: 100%;
@@ -150,10 +127,6 @@
transition: transform 0.3s ease;
}
.card:hover .projectImage {
transform: scale(1.02);
}
.cardBody {
display: flex;
flex: 1;
@@ -243,11 +216,6 @@
transition: color 0.2s ease, gap 0.2s ease;
}
.caseStudyLink:hover {
gap: 14px;
color: var(--color-blue-700);
}
.caseStudyLink:focus-visible {
border-radius: 2px;
outline: 3px solid var(--focus-ring);
@@ -258,10 +226,6 @@
color: var(--accent-default);
}
[data-theme="dark"] .caseStudyLink:hover {
color: var(--color-blue-100);
}
.scrollbarWrapper {
display: flex;
justify-content: center;
@@ -329,3 +293,106 @@
[data-theme="dark"] .scrollbar::-moz-range-thumb {
background: var(--color-blue-300);
}
@media (max-width: 1024px) {
.projectsSection {
padding-top: var(--space-8);
padding-bottom: var(--space-9);
}
.carouselTrack {
gap: var(--space-4);
}
.card {
flex-basis: min(340px, calc(100vw - (2 * var(--layout-page-gutter))));
width: min(340px, calc(100vw - (2 * var(--layout-page-gutter))));
}
}
@media (max-width: 640px) {
.headerRow {
align-items: stretch;
flex-direction: column;
gap: var(--space-3);
margin-bottom: var(--space-6);
}
.arrowButtons {
align-self: flex-end;
gap: var(--space-2);
}
.navButton {
width: 40px;
height: 40px;
}
.carouselViewport {
margin-inline: calc(-1 * var(--layout-page-gutter));
width: calc(100% + (2 * var(--layout-page-gutter)));
padding-inline: var(--layout-page-gutter);
scroll-padding-inline: var(--layout-page-gutter);
scroll-snap-type: x mandatory;
}
.card {
flex-basis: min(320px, calc(100vw - 40px));
width: min(320px, calc(100vw - 40px));
min-height: 460px;
}
.mediaContainer {
height: 200px;
}
.cardBody {
padding: var(--space-5);
}
.scrollbarWrapper {
display: none;
}
}
@media (hover: hover) and (pointer: fine) {
.navButton:hover:not(:disabled) {
transform: translateY(-1px);
}
.navButtonPrevious:hover:not(:disabled) {
background: var(--color-blue-200);
}
.navButtonNext:hover:not(:disabled) {
border-color: var(--color-blue-700);
background: var(--color-blue-700);
}
.card:hover {
border-color: var(--border-strong);
box-shadow: 0 10px 24px var(--shadow-color);
transform: translateY(-2px);
}
.card:hover .projectImage {
transform: scale(1.02);
}
.caseStudyLink:hover {
gap: 14px;
color: var(--color-blue-700);
}
[data-theme="dark"] .caseStudyLink:hover {
color: var(--color-blue-100);
}
[data-theme="dark"] .navButtonPrevious:hover:not(:disabled) {
background: rgba(255, 255, 255, 0.12);
}
[data-theme="dark"] .navButtonNext:hover:not(:disabled) {
background: var(--color-blue-200);
}
}