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

fix: add radiant glow and brighten sun illustration to match moon

Browse Source
This commit is contained in:
Amirhossein Khalili
2026-09-06 12:33:46 +03:30
parent 5927ee40e2
commit 2b188aa293
3 changed files with 93 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
public/assets/bg-illustrations/sun.svg
View File

@@ -1,15 +1,15 @@
<svg width="139" height="139" viewBox="0 0 139 139" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="139" height="139" viewBox="0 0 139 139" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M108.635 69.2868C108.635 91.0182 91.0183 108.635 69.287 108.635C47.5556 108.635 29.9388 91.0182 29.9388 69.2868C29.9388 47.5555 47.5556 29.9387 69.287 29.9387C91.0183 29.9387 108.635 47.5555 108.635 69.2868Z" fill="#FEDB4B"/> <path d="M108.635 69.2868C108.635 91.0182 91.0183 108.635 69.287 108.635C47.5556 108.635 29.9388 91.0182 29.9388 69.2868C29.9388 47.5555 47.5556 29.9387 69.287 29.9387C91.0183 29.9387 108.635 47.5555 108.635 69.2868Z" fill="var(--hero-illus-sun, #FFE66D)"/>
<rect x="64.1548" width="10.2647" height="22.2402" fill="#FEDB4B"/> <rect x="64.1548" width="10.2647" height="22.2402" fill="var(--hero-illus-sun, #FFE66D)"/>
<rect x="64.1548" y="116.333" width="10.2647" height="22.2402" fill="#FEDB4B"/> <rect x="64.1548" y="116.333" width="10.2647" height="22.2402" fill="var(--hero-illus-sun, #FFE66D)"/>
<rect x="0.00012207" y="74.4192" width="10.2647" height="22.2402" transform="rotate(-90 0.00012207 74.4192)" fill="#FEDB4B"/> <rect x="0.00012207" y="74.4192" width="10.2647" height="22.2402" transform="rotate(-90 0.00012207 74.4192)" fill="var(--hero-illus-sun, #FFE66D)"/>
<rect x="116.334" y="74.4192" width="10.2647" height="22.2402" transform="rotate(-90 116.334 74.4192)" fill="#FEDB4B"/> <rect x="116.334" y="74.4192" width="10.2647" height="22.2402" transform="rotate(-90 116.334 74.4192)" fill="var(--hero-illus-sun, #FFE66D)"/>
<rect x="108.375" y="126.725" width="10.2647" height="22.2402" transform="rotate(150 108.375 126.725)" fill="#FEDB4B"/> <rect x="108.375" y="126.725" width="10.2647" height="22.2402" transform="rotate(150 108.375 126.725)" fill="var(--hero-illus-sun, #FFE66D)"/>
<rect x="50.2089" y="25.9771" width="10.2647" height="22.2402" transform="rotate(150 50.2089 25.9771)" fill="#FEDB4B"/> <rect x="50.2089" y="25.9771" width="10.2647" height="22.2402" transform="rotate(150 50.2089 25.9771)" fill="var(--hero-illus-sun, #FFE66D)"/>
<rect x="99.4855" y="6.71606" width="10.2647" height="22.2402" transform="rotate(30 99.4855 6.71606)" fill="#FEDB4B"/> <rect x="99.4855" y="6.71606" width="10.2647" height="22.2402" transform="rotate(30 99.4855 6.71606)" fill="var(--hero-illus-sun, #FFE66D)"/>
<rect x="41.3184" y="107.464" width="10.2647" height="22.2402" transform="rotate(30 41.3184 107.464)" fill="#FEDB4B"/> <rect x="41.3184" y="107.464" width="10.2647" height="22.2402" transform="rotate(30 41.3184 107.464)" fill="var(--hero-illus-sun, #FFE66D)"/>
<rect x="6.71667" y="39.0881" width="10.2647" height="22.2402" transform="rotate(-60 6.71667 39.0881)" fill="#FEDB4B"/> <rect x="6.71667" y="39.0881" width="10.2647" height="22.2402" transform="rotate(-60 6.71667 39.0881)" fill="var(--hero-illus-sun, #FFE66D)"/>
<rect x="107.464" y="97.2551" width="10.2647" height="22.2402" transform="rotate(-60 107.464 97.2551)" fill="#FEDB4B"/> <rect x="107.464" y="97.2551" width="10.2647" height="22.2402" transform="rotate(-60 107.464 97.2551)" fill="var(--hero-illus-sun, #FFE66D)"/>
<rect x="11.849" y="108.375" width="10.2647" height="22.2402" transform="rotate(-120 11.849 108.375)" fill="#FEDB4B"/> <rect x="11.849" y="108.375" width="10.2647" height="22.2402" transform="rotate(-120 11.849 108.375)" fill="var(--hero-illus-sun, #FFE66D)"/>
<rect x="112.597" y="50.208" width="10.2647" height="22.2402" transform="rotate(-120 112.597 50.208)" fill="#FEDB4B"/> <rect x="112.597" y="50.208" width="10.2647" height="22.2402" transform="rotate(-120 112.597 50.208)" fill="var(--hero-illus-sun, #FFE66D)"/>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

63
src/components/ScenicHeroJourney.module.css
View File

@@ -35,17 +35,58 @@
user-select: none; user-select: none;
} }
/* ── All backdrop imgs are absolutely positioned ─────────────── */ /* ── All backdrop SVGs are absolutely positioned ─────────────── */
.heroBackdrop svg,
.heroBackdrop img { .heroBackdrop img {
position: absolute; position: absolute;
display: block; display: block;
height: auto; height: auto;
} }
/* ── Dark-mode tint ─────────────────────────────────────────── */ .heroBackdrop svg path,
.heroBackdrop svg rect {
transition: fill 0.3s ease;
}
/* ── Dark-mode styling ─────────────────────────────────────────── */
:global([data-theme="dark"]) .heroBackdrop { :global([data-theme="dark"]) .heroBackdrop {
opacity: 0.82; opacity: 1;
filter: saturate(0.88) brightness(0.9); }
/* ── Celestial Bodies (Sun & Moon) ──────────────────────────── */
.backdropSun,
.backdropMoon {
position: absolute;
display: block;
height: auto;
pointer-events: none;
user-select: none;
transition: opacity 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* Light mode (default): Sun shines brightly with solar glow, Moon hidden */
.backdropSun {
opacity: 1;
transform: scale(1) rotate(0deg);
filter: drop-shadow(0 0 16px var(--hero-illus-sun-glow)) drop-shadow(0 0 4px rgba(255, 255, 255, 0.85));
}
.backdropMoon {
opacity: 0;
transform: scale(0.65) rotate(-25deg);
}
/* Dark mode: Bright half-moon shines with lunar glow, Sun gracefully sets */
:global([data-theme="dark"]) .backdropSun {
opacity: 0;
transform: scale(0.65) rotate(35deg);
}
:global([data-theme="dark"]) .backdropMoon {
opacity: 1;
transform: scale(1) rotate(0deg);
filter: drop-shadow(0 0 16px var(--hero-illus-moon-glow)) drop-shadow(0 0 4px rgba(255, 255, 255, 0.8));
} }
/* ================================================================ /* ================================================================
@@ -64,7 +105,8 @@
width: clamp(250px, 29vw, 460px); width: clamp(250px, 29vw, 460px);
} }
.backdropSun { .backdropSun,
.backdropMoon {
top: clamp(20px, 3.5vw, 52px); top: clamp(20px, 3.5vw, 52px);
right: clamp(100px, calc(22% + 2vw), 380px); right: clamp(100px, calc(22% + 2vw), 380px);
width: clamp(52px, 10vw, 139px); width: clamp(52px, 10vw, 139px);
@@ -95,8 +137,9 @@
width: clamp(295px, 38vw, 380px); width: clamp(295px, 38vw, 380px);
} }
/* Sun — upper-right zone, between avatar and right cubes */ /* Celestial — upper-right zone, between avatar and right cubes */
.backdropSun { .backdropSun,
.backdropMoon {
top: clamp(26px, 3.5vw, 44px); top: clamp(26px, 3.5vw, 44px);
right: clamp(120px, 33vw, 280px); right: clamp(120px, 33vw, 280px);
width: clamp(62px, 9vw, 96px); width: clamp(62px, 9vw, 96px);
@@ -130,7 +173,8 @@
width: clamp(210px, 46vw, 260px); width: clamp(210px, 46vw, 260px);
} }
.backdropSun { .backdropSun,
.backdropMoon {
top: clamp(24px, 5vw, 36px); top: clamp(24px, 5vw, 36px);
right: clamp(52px, 15vw, 68px); right: clamp(52px, 15vw, 68px);
width: clamp(34px, 8vw, 42px); width: clamp(34px, 8vw, 42px);
@@ -162,7 +206,8 @@
width: 418px; width: 418px;
} }
.backdropSun { .backdropSun,
.backdropMoon {
top: 50px; top: 50px;
right: 346px; right: 346px;
width: 139px; width: 139px;

26
src/styles/tokens.css
View File

@@ -107,6 +107,19 @@
--focus-ring: #3D8AFA; --focus-ring: #3D8AFA;
--overlay-contact: rgba(255, 255, 255, 0.721569); --overlay-contact: rgba(255, 255, 255, 0.721569);
--shadow-color: rgba(16, 63, 127, 0.078431); --shadow-color: rgba(16, 63, 127, 0.078431);
/* Hero Scenic Landscape Palette (Day / Light Mode) */
--hero-illus-cube-top: #9DCDFD;
--hero-illus-cube-front: #2066AB;
--hero-illus-cube-side: #0E4073;
--hero-illus-cube-shadow: #0C234F;
--hero-illus-tree-light: #2166A9;
--hero-illus-tree-dark: #104179;
--hero-illus-tree-trunk: #08234B;
--hero-illus-sun: #FFE66D;
--hero-illus-sun-glow: rgba(255, 220, 80, 0.6);
--hero-illus-moon: #FFFDF0;
--hero-illus-moon-glow: rgba(255, 253, 240, 0.4);
} }
[data-theme="dark"] { [data-theme="dark"] {
@@ -131,6 +144,19 @@
--focus-ring: #82B5FF; --focus-ring: #82B5FF;
--overlay-contact: rgba(1, 13, 39, 0.721569); --overlay-contact: rgba(1, 13, 39, 0.721569);
--shadow-color: rgba(0, 0, 0, 0.239216); --shadow-color: rgba(0, 0, 0, 0.239216);
/* Hero Scenic Landscape Palette (Night / Dark Mode) */
--hero-illus-cube-top: #528AE6;
--hero-illus-cube-front: #1D4685;
--hero-illus-cube-side: #122955;
--hero-illus-cube-shadow: #091A3E;
--hero-illus-tree-light: #428CE8;
--hero-illus-tree-dark: #18366B;
--hero-illus-tree-trunk: #0A1B3D;
--hero-illus-sun: #FDE047;
--hero-illus-sun-glow: rgba(253, 224, 71, 0.45);
--hero-illus-moon: #FFFDF0;
--hero-illus-moon-glow: rgba(255, 253, 240, 0.65);
} }
@media (max-width: 1024px) { @media (max-width: 1024px) {