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

style: convert project sizing to scalable rem units with responsive root font scaling

Browse Source
This commit is contained in:
Amirhossein Khalili
2026-09-06 13:58:17 +03:30
parent c7ef6dff3e
commit 9f14e9a4f4
12 changed files with 342 additions and 325 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
src/components/HeroSection.module.css
View File

@@ -20,7 +20,7 @@
display: flex;
align-items: center;
justify-content: space-between;
padding: clamp(18px, 2.5vw, 32px) var(--layout-page-gutter) 0;
padding: clamp(1.125rem, 2.5vw, 2rem) var(--layout-page-gutter) 0;
}
/* ── Icon buttons ───────────────────────────────────────────── */
@@ -67,29 +67,29 @@
align-items: center;
justify-content: flex-start;
width: 100%;
max-width: 920px;
max-width: 57.5rem;
margin: 0 auto;
height: auto;
min-height: 100%;
padding-top: clamp(64px, 6.5vw, 96px);
padding-bottom: clamp(28px, 3vw, 40px);
padding-left: 20px;
padding-right: 20px;
padding-top: clamp(4rem, 6.5vw, 6rem);
padding-bottom: clamp(1.75rem, 3vw, 2.5rem);
padding-left: 1.25rem;
padding-right: 1.25rem;
text-align: center;
}
/* ── Avatar ─────────────────────────────────────────────────── */
.avatarWrapper {
margin-bottom: clamp(14px, 1.8vw, 22px);
margin-bottom: clamp(0.875rem, 1.8vw, 1.375rem);
}
.avatarRingOuter {
display: inline-block;
padding: clamp(4px, 0.5vw, 7px);
padding: clamp(0.25rem, 0.5vw, 0.4375rem);
border: clamp(2px, 0.25vw, 3px) solid var(--color-blue-700);
border-radius: 50%;
background: transparent;
box-shadow: 0 8px 32px var(--shadow-color);
box-shadow: 0 0.5rem 2rem var(--shadow-color);
}
[data-theme="dark"] .avatarRingOuter {
@@ -98,8 +98,8 @@
.avatarContainer {
position: relative;
width: clamp(100px, 13vw, 168px);
height: clamp(100px, 13vw, 168px);
width: clamp(6.25rem, 13vw, 10.5rem);
height: clamp(6.25rem, 13vw, 10.5rem);
overflow: hidden;
border: 0;
border-radius: 50%;
@@ -113,9 +113,9 @@
/* ── Display title ──────────────────────────────────────────── */
.heroTitle {
margin-bottom: clamp(8px, 1vw, 14px);
margin-bottom: clamp(0.5rem, 1vw, 0.875rem);
color: var(--text-primary);
font-size: clamp(32px, 3.6vw, 54px);
font-size: clamp(2rem, 3.6vw, 3.375rem);
line-height: 1.15;
text-shadow: none;
white-space: nowrap;
@@ -123,9 +123,9 @@
/* ── Subtitle ───────────────────────────────────────────────── */
.heroSubtitle {
margin-bottom: clamp(20px, 2.8vw, 36px);
margin-bottom: clamp(1.25rem, 2.8vw, 2.25rem);
color: var(--text-primary);
font-size: clamp(11px, 1vw, 15px);
font-size: clamp(0.6875rem, 1vw, 0.9375rem);
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
@@ -135,16 +135,16 @@
.actionButtons {
display: flex;
align-items: center;
gap: clamp(10px, 1.4vw, 20px);
margin-bottom: clamp(18px, 2.2vw, 30px);
gap: clamp(0.625rem, 1.4vw, 1.25rem);
margin-bottom: clamp(1.125rem, 2.2vw, 1.875rem);
}
.heroButton {
min-width: clamp(80px, 9vw, 120px);
height: clamp(40px, 4.5vw, 52px);
padding: 0 clamp(16px, 2vw, 28px);
min-width: clamp(5rem, 9vw, 7.5rem);
height: clamp(2.5rem, 4.5vw, 3.25rem);
padding: 0 clamp(1rem, 2vw, 1.75rem);
border-width: 2px;
font-size: clamp(13px, 1.1vw, 16px);
font-size: clamp(0.8125rem, 1.1vw, 1rem);
}
.heroButtonOutline {
@@ -181,11 +181,11 @@
display: inline-flex;
align-items: center;
justify-content: center;
gap: clamp(10px, 1.4vw, 18px);
gap: clamp(0.625rem, 1.4vw, 1.125rem);
border: 0;
background: transparent;
color: var(--color-blue-700);
font-size: clamp(11px, 1vw, 14px);
font-size: clamp(0.6875rem, 1vw, 0.875rem);
font-weight: 500;
line-height: 1.6;
white-space: nowrap;
@@ -198,7 +198,7 @@
.contactItem {
display: inline-flex;
align-items: center;
gap: 6px;
gap: 0.375rem;
color: inherit;
white-space: nowrap;
transition: opacity var(--motion-duration-fast) ease;
@@ -221,7 +221,7 @@
.contactDivider {
width: 1px;
height: 18px;
height: 1.125rem;
background: var(--color-blue-500);
opacity: 0.6;
}
@@ -235,20 +235,20 @@
@media (max-width: 1100px) and (min-width: 651px) {
.heroContentWrapper {
height: auto;
min-height: clamp(540px, 64vw, 640px);
min-height: clamp(33.75rem, 64vw, 40rem);
}
.heroContent {
height: auto;
min-height: clamp(540px, 64vw, 640px);
min-height: clamp(33.75rem, 64vw, 40rem);
justify-content: flex-start;
padding-top: clamp(60px, 8vw, 90px);
padding-bottom: 40px;
padding-top: clamp(3.75rem, 8vw, 5.625rem);
padding-bottom: 2.5rem;
}
.heroTitle {
/* Allow wrapping at tablet so text stays within the center zone */
max-width: 520px;
max-width: 32.5rem;
white-space: normal;
}
@@ -256,7 +256,7 @@
/* Wrap contact items on narrow tablets */
flex-wrap: wrap;
justify-content: center;
gap: 8px 14px;
gap: 0.5rem 0.875rem;
white-space: normal;
}
@@ -271,36 +271,36 @@
@media (max-width: 650px) {
.heroContentWrapper {
height: auto;
min-height: 540px;
min-height: 33.75rem;
}
.topBar {
padding: 16px 14px 0;
padding: 1rem 0.875rem 0;
}
.iconButton {
width: 40px;
height: 40px;
width: 2.5rem;
height: 2.5rem;
}
.heroContent {
height: auto;
min-height: 540px;
padding: 66px 16px 40px;
min-height: 33.75rem;
padding: 4.125rem 1rem 2.5rem;
justify-content: flex-start;
}
.heroTitle {
font-size: clamp(26px, 7.8vw, 36px);
font-size: clamp(1.625rem, 7.8vw, 2.25rem);
white-space: normal;
max-width: 270px;
max-width: 17rem;
line-height: 1.15;
}
.heroSubtitle {
white-space: normal;
max-width: 250px;
font-size: 11px;
max-width: 15.625rem;
font-size: 0.6875rem;
letter-spacing: 0.12em;
}
@@ -308,23 +308,23 @@
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
width: 100%;
max-width: 276px;
gap: 6px;
max-width: 17.25rem;
gap: 0.375rem;
}
.heroButton {
min-width: 0;
width: auto;
height: 38px;
padding: 0 6px;
font-size: 12px;
height: 2.375rem;
padding: 0 0.375rem;
font-size: 0.75rem;
}
.contactBar {
flex-direction: column;
gap: 5px;
gap: 0.3125rem;
white-space: normal;
font-size: 11.5px;
font-size: 0.71875rem;
}
.contactItem {