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

feat(hero): add upcoming actions and LinkedIn contact CTA

Browse Source
This commit is contained in:
Amirhossein Khalili
2026-09-07 22:07:41 +03:30
parent e635e201a0
commit 2d26c6c3a2
2 changed files with 50 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -19,7 +19,7 @@
z-index: 10;
display: flex;
align-items: center;
justify-content: flex-end;
justify-content: flex-start;
padding: clamp(1.125rem, 2.5vw, 2rem) var(--layout-page-gutter) 0;
}
@@ -202,17 +202,23 @@
}
.heroButton {
min-width: clamp(5rem, 9vw, 7.5rem);
display: inline-flex;
align-items: center;
justify-content: center;
min-width: clamp(6.5rem, 10vw, 8.25rem);
height: clamp(2.5rem, 4.5vw, 3.25rem);
padding: 0 clamp(1rem, 2vw, 1.75rem);
gap: 0.5rem;
border-width: 2px;
font-size: clamp(0.8125rem, 1.1vw, 1rem);
}
.heroButtonOutline {
border-color: var(--color-blue-600);
background: transparent;
color: var(--color-blue-700);
.heroButtonUpcoming {
border-color: var(--border-default);
background: color-mix(in srgb, var(--bg-raised) 68%, transparent);
color: var(--text-secondary);
cursor: default;
opacity: 0.78;
}
.heroButtonPrimary {
@@ -226,10 +232,10 @@
outline-offset: 3px;
}
[data-theme="dark"] .heroButtonOutline {
border-color: var(--color-blue-white);
background: transparent;
color: var(--text-primary);
[data-theme="dark"] .heroButtonUpcoming {
border-color: var(--border-default);
background: color-mix(in srgb, var(--bg-raised) 72%, transparent);
color: var(--text-secondary);
}
[data-theme="dark"] .heroButtonPrimary {
@@ -367,9 +373,8 @@
.actionButtons {
display: grid;
grid-template-columns: repeat(2, clamp(5rem, 9vw, 7.5rem));
width: fit-content;
max-width: none;
grid-template-columns: repeat(2, minmax(0, 1fr));
width: min(100%, 21rem);
gap: 0.5rem;
}
@@ -379,9 +384,9 @@
.heroButton {
min-width: 0;
width: auto;
width: 100%;
height: 2.75rem;
padding: 0 0.375rem;
padding: 0 0.75rem;
font-size: 0.875rem;
}
}
@@ -410,21 +415,11 @@
color: var(--accent-default);
}
.heroButtonOutline:hover {
border-color: var(--color-blue-700);
background: rgba(255, 255, 255, 0.2);
}
.heroButtonPrimary:hover {
border-color: var(--color-blue-700);
background: var(--color-blue-700);
}
[data-theme="dark"] .heroButtonOutline:hover {
border-color: var(--color-blue-100);
background: rgba(130, 181, 255, 0.12);
}
[data-theme="dark"] .heroButtonPrimary:hover {
border-color: var(--color-blue-white);
background: var(--color-blue-white);