Skip to content

Commit 5aab8ef

Browse files
Bikram GoleBikram Gole
Bikram Gole
authored and
Bikram Gole
committed
Enhance motion system and hero visuals
1 parent c01111b commit 5aab8ef

5 files changed

Lines changed: 243 additions & 19 deletions

File tree

‎about.html‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,8 +73,23 @@
7373

7474
<main>
7575
<section class="hero compact reveal skew-left">
76+
<span class="hero-pulse" aria-hidden="true"></span>
77+
<svg class="hero-motif" viewBox="0 0 220 140" aria-hidden="true">
78+
<path class="motif-line" d="M10 110 L60 40 L120 70 L170 25 L210 60" />
79+
<path class="motif-line secondary" d="M20 25 L70 60 L140 20 L200 100" />
80+
<circle class="motif-node" cx="10" cy="110" r="3" />
81+
<circle class="motif-node" cx="60" cy="40" r="3" />
82+
<circle class="motif-node alt" cx="120" cy="70" r="3" />
83+
<circle class="motif-node" cx="170" cy="25" r="3" />
84+
<circle class="motif-node alt" cx="210" cy="60" r="3" />
85+
<circle class="motif-node" cx="20" cy="25" r="3" />
86+
<circle class="motif-node alt" cx="70" cy="60" r="3" />
87+
<circle class="motif-node" cx="140" cy="20" r="3" />
88+
<circle class="motif-node alt" cx="200" cy="100" r="3" />
89+
</svg>
7690
<p class="tag">About Neo 🐧</p>
7791
<h1 id="hero-name" data-name="Aura Farmer Profile">Aura Farmer Profile</h1>
92+
<span class="name-underline" aria-hidden="true"></span>
7893
<p class="subtitle">From Gongabu, KTM, Nepal. I am building toward AI Engineering with chaotic fun energy.</p>
7994
<p class="status-line">Shivapuri Secondary School | Grade 10 | ISTJ-A</p>
8095
</section>

‎contact.html‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,8 +73,23 @@
7373

7474
<main>
7575
<section class="hero compact reveal skew-left">
76+
<span class="hero-pulse" aria-hidden="true"></span>
77+
<svg class="hero-motif" viewBox="0 0 220 140" aria-hidden="true">
78+
<path class="motif-line" d="M10 110 L60 40 L120 70 L170 25 L210 60" />
79+
<path class="motif-line secondary" d="M20 25 L70 60 L140 20 L200 100" />
80+
<circle class="motif-node" cx="10" cy="110" r="3" />
81+
<circle class="motif-node" cx="60" cy="40" r="3" />
82+
<circle class="motif-node alt" cx="120" cy="70" r="3" />
83+
<circle class="motif-node" cx="170" cy="25" r="3" />
84+
<circle class="motif-node alt" cx="210" cy="60" r="3" />
85+
<circle class="motif-node" cx="20" cy="25" r="3" />
86+
<circle class="motif-node alt" cx="70" cy="60" r="3" />
87+
<circle class="motif-node" cx="140" cy="20" r="3" />
88+
<circle class="motif-node alt" cx="200" cy="100" r="3" />
89+
</svg>
7690
<p class="tag">Contact 📡</p>
7791
<h1 id="hero-name" data-name="Open Channel ✉️">Open Channel ✉️</h1>
92+
<span class="name-underline" aria-hidden="true"></span>
7893
<p class="subtitle">For AI ideas, open source builds, Linux setup talk, and serious debates.</p>
7994
</section>
8095

‎index.html‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,10 +74,25 @@
7474

7575
<main>
7676
<section id="hero-zone" class="hero reveal skew-left">
77+
<span class="hero-pulse" aria-hidden="true"></span>
78+
<svg class="hero-motif" viewBox="0 0 220 140" aria-hidden="true">
79+
<path class="motif-line" d="M10 110 L60 40 L120 70 L170 25 L210 60" />
80+
<path class="motif-line secondary" d="M20 25 L70 60 L140 20 L200 100" />
81+
<circle class="motif-node" cx="10" cy="110" r="3" />
82+
<circle class="motif-node" cx="60" cy="40" r="3" />
83+
<circle class="motif-node alt" cx="120" cy="70" r="3" />
84+
<circle class="motif-node" cx="170" cy="25" r="3" />
85+
<circle class="motif-node alt" cx="210" cy="60" r="3" />
86+
<circle class="motif-node" cx="20" cy="25" r="3" />
87+
<circle class="motif-node alt" cx="70" cy="60" r="3" />
88+
<circle class="motif-node" cx="140" cy="20" r="3" />
89+
<circle class="motif-node alt" cx="200" cy="100" r="3" />
90+
</svg>
7791
<div class="hero-grid">
7892
<div>
7993
<p id="hero-tagline" class="tag">Aura Farmer // Chaotic Fun 🚀</p>
8094
<h1 id="hero-name" data-name="Bikram Gole">Bikram Gole</h1>
95+
<span class="name-underline" aria-hidden="true"></span>
8196
<p id="hero-status" class="status-line" aria-live="polite">Debater mode always ready ⚔️</p>
8297
<div class="chips">
8398
<span>AI</span>

‎script.js‎

Lines changed: 51 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,58 @@ const page = document.body.dataset.page;
22
const navLink = document.querySelector(`[data-nav="${page}"]`);
33
if (navLink) navLink.classList.add("active");
44

5-
const revealElements = document.querySelectorAll(".reveal");
6-
const revealObserver = new IntersectionObserver(
7-
(entries) => {
8-
entries.forEach((entry) => {
9-
if (entry.isIntersecting) {
10-
entry.target.classList.add("show");
11-
revealObserver.unobserve(entry.target);
5+
const prefersReducedMotion = window.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches || false;
6+
const revealTargets = new Set([...document.querySelectorAll(".reveal")]);
7+
8+
if (!prefersReducedMotion) {
9+
document.querySelectorAll(".tilt-zone").forEach((zone) => {
10+
const items = zone.querySelectorAll(".tilt");
11+
items.forEach((item, index) => {
12+
if (!item.classList.contains("reveal")) {
13+
item.classList.add("reveal", "reveal-child");
14+
item.style.setProperty("--reveal-delay", `${Math.min(index * 45, 240)}ms`);
15+
revealTargets.add(item);
1216
}
1317
});
14-
},
15-
{ threshold: 0.16 }
16-
);
17-
revealElements.forEach((el) => revealObserver.observe(el));
18+
});
19+
}
20+
21+
const revealElements = [...revealTargets];
22+
23+
if (prefersReducedMotion) {
24+
revealElements.forEach((el) => el.classList.add("show"));
25+
} else {
26+
let staged = 0;
27+
revealElements.forEach((el) => {
28+
const hasDelayClass = Array.from(el.classList).some((cls) => cls.startsWith("delay-"));
29+
if (!hasDelayClass && !el.style.getPropertyValue("--reveal-delay")) {
30+
el.style.setProperty("--reveal-delay", `${Math.min(staged * 40, 240)}ms`);
31+
staged += 1;
32+
}
33+
});
34+
35+
const revealObserver = new IntersectionObserver(
36+
(entries) => {
37+
entries.forEach((entry) => {
38+
if (entry.isIntersecting) {
39+
entry.target.classList.add("show");
40+
revealObserver.unobserve(entry.target);
41+
}
42+
});
43+
},
44+
{ threshold: 0.16 }
45+
);
46+
revealElements.forEach((el) => revealObserver.observe(el));
47+
}
48+
49+
const heroZone = document.getElementById("hero-zone") || document.querySelector(".hero");
50+
function triggerHeroPulse() {
51+
if (!heroZone) return;
52+
heroZone.classList.remove("pulse-hit");
53+
void heroZone.offsetWidth;
54+
heroZone.classList.add("pulse-hit");
55+
window.setTimeout(() => heroZone.classList.remove("pulse-hit"), 520);
56+
}
1857

1958
const canvas = document.getElementById("starfield");
2059
const ctx = canvas?.getContext("2d");
@@ -1813,6 +1852,7 @@ if (launchBtn && quoteOutput && signalCount) {
18131852
showToast("Pulse override: Matrix rain off.");
18141853
}
18151854

1855+
triggerHeroPulse();
18161856
launches += 1;
18171857
signalCount.textContent = String(launches);
18181858
quoteOutput.textContent = `> Aura pulse ${launches} launched from Mars.`;

‎styles.css‎

Lines changed: 147 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,13 @@
1616
--clean-glow-orange: rgba(255, 170, 105, 0.22);
1717
--clean-shadow: 0 14px 34px rgba(2, 10, 28, 0.3);
1818
--page-gutter: 1.15rem;
19+
--motion-fast: 140ms;
20+
--motion-base: 240ms;
21+
--motion-slow: 420ms;
22+
--motion-xslow: 760ms;
23+
--ease-out: cubic-bezier(0.16, 0.84, 0.28, 1);
24+
--ease-soft: cubic-bezier(0.2, 0.7, 0.2, 1);
25+
--ease-snap: cubic-bezier(0.2, 0.9, 0.25, 1);
1926
}
2027

2128
html {
@@ -798,7 +805,7 @@ nav a.active {
798805
align-items: center;
799806
justify-content: center;
800807
cursor: pointer;
801-
transition: transform 130ms ease, border-color 130ms ease, background 130ms ease;
808+
transition: transform var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), background var(--motion-fast) var(--ease-out);
802809
}
803810

804811
.theme-cycle-btn:hover {
@@ -817,7 +824,7 @@ main {
817824
border-radius: 11px;
818825
background: var(--card);
819826
backdrop-filter: blur(7px);
820-
transition: border-color 320ms cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 360ms cubic-bezier(0.2, 0.7, 0.2, 1), background 320ms cubic-bezier(0.2, 0.7, 0.2, 1);
827+
transition: border-color var(--motion-base) var(--ease-soft), box-shadow var(--motion-slow) var(--ease-soft), background var(--motion-base) var(--ease-soft);
821828
}
822829

823830
.skew-left {
@@ -830,6 +837,9 @@ main {
830837

831838
.hero {
832839
padding: 0.9rem;
840+
position: relative;
841+
overflow: hidden;
842+
isolation: isolate;
833843
background:
834844
radial-gradient(430px 140px at 2% 0%, rgba(74, 149, 255, 0.24), transparent 72%),
835845
radial-gradient(300px 130px at 97% 100%, rgba(255, 154, 67, 0.14), transparent 75%),
@@ -845,6 +855,81 @@ main {
845855
grid-template-columns: 1.55fr 1fr;
846856
gap: 0.58rem;
847857
align-items: stretch;
858+
position: relative;
859+
z-index: 2;
860+
}
861+
862+
.hero > *:not(.hero-pulse):not(.hero-motif) {
863+
position: relative;
864+
z-index: 2;
865+
}
866+
867+
.hero-pulse {
868+
position: absolute;
869+
inset: 0;
870+
pointer-events: none;
871+
opacity: 0;
872+
z-index: 0;
873+
background:
874+
radial-gradient(240px 180px at 18% 12%, rgba(132, 210, 255, 0.55), transparent 70%),
875+
radial-gradient(320px 220px at 78% 25%, rgba(255, 170, 105, 0.32), transparent 72%);
876+
transform: scale(0.92);
877+
}
878+
879+
.hero.pulse-hit .hero-pulse {
880+
animation: hero-pulse var(--motion-slow) var(--ease-snap);
881+
}
882+
883+
.hero-motif {
884+
position: absolute;
885+
right: 0.6rem;
886+
top: 0.4rem;
887+
width: min(44vw, 210px);
888+
height: auto;
889+
opacity: 0.55;
890+
pointer-events: none;
891+
z-index: 1;
892+
}
893+
894+
.hero-motif .motif-line {
895+
stroke: rgba(148, 210, 255, 0.6);
896+
stroke-width: 1.4;
897+
fill: none;
898+
stroke-linecap: round;
899+
stroke-linejoin: round;
900+
stroke-dasharray: 180;
901+
stroke-dashoffset: 180;
902+
animation: motif-draw 2.6s var(--ease-out) 0.25s both;
903+
}
904+
905+
.hero-motif .motif-line.secondary {
906+
stroke: rgba(255, 188, 122, 0.5);
907+
stroke-dasharray: 140;
908+
stroke-dashoffset: 140;
909+
animation-delay: 0.45s;
910+
}
911+
912+
.hero-motif .motif-node {
913+
fill: rgba(172, 222, 255, 0.75);
914+
animation: motif-node 3.2s ease-in-out infinite;
915+
}
916+
917+
.hero-motif .motif-node.alt {
918+
fill: rgba(255, 198, 138, 0.8);
919+
animation-delay: 0.8s;
920+
}
921+
922+
.name-underline {
923+
display: block;
924+
margin-top: 0.2rem;
925+
width: clamp(120px, 28vw, 240px);
926+
height: 3px;
927+
border-radius: 999px;
928+
background: linear-gradient(90deg, rgba(133, 202, 255, 0.95), rgba(255, 169, 106, 0.9), transparent);
929+
transform: scaleX(0);
930+
transform-origin: left center;
931+
opacity: 0.9;
932+
animation: line-trace 1.2s var(--ease-out) 0.2s forwards;
848933
}
849934

850935
.panel {
@@ -2373,18 +2458,72 @@ body[data-theme="material3"] .avatar-card .android-avatar {
23732458

23742459
.reveal {
23752460
opacity: 0;
2376-
transform: translateY(8px);
2377-
transition: opacity 330ms ease, transform 330ms ease;
2461+
transform: translateY(12px) scale(0.985);
2462+
filter: blur(6px);
2463+
transition: opacity var(--motion-base) var(--ease-out), transform var(--motion-base) var(--ease-out), filter var(--motion-base) var(--ease-out);
2464+
transition-delay: var(--reveal-delay, 0ms);
2465+
will-change: transform, opacity;
23782466
}
23792467

23802468
.reveal.show {
23812469
opacity: 1;
2382-
transform: translateY(0);
2470+
transform: translateY(0) scale(1);
2471+
filter: blur(0);
2472+
}
2473+
2474+
.delay-1 { --reveal-delay: 80ms; }
2475+
.delay-2 { --reveal-delay: 150ms; }
2476+
.delay-3 { --reveal-delay: 220ms; }
2477+
2478+
.reveal-child {
2479+
transform-origin: 30% 50%;
2480+
transform: none;
2481+
}
2482+
2483+
.reveal.show.reveal-child {
2484+
transform: none;
2485+
}
2486+
2487+
@keyframes line-trace {
2488+
from { transform: scaleX(0); opacity: 0.4; }
2489+
to { transform: scaleX(1); opacity: 0.95; }
23832490
}
23842491

2385-
.delay-1 { transition-delay: 60ms; }
2386-
.delay-2 { transition-delay: 120ms; }
2387-
.delay-3 { transition-delay: 180ms; }
2492+
@keyframes motif-draw {
2493+
to { stroke-dashoffset: 0; }
2494+
}
2495+
2496+
@keyframes motif-node {
2497+
0%, 100% { r: 3; opacity: 0.7; }
2498+
50% { r: 4.2; opacity: 1; }
2499+
}
2500+
2501+
@keyframes hero-pulse {
2502+
0% { opacity: 0; transform: scale(0.94); }
2503+
30% { opacity: 0.9; }
2504+
100% { opacity: 0; transform: scale(1.02); }
2505+
}
2506+
2507+
@media (prefers-reduced-motion: reduce) {
2508+
* {
2509+
animation-duration: 0.001ms !important;
2510+
animation-iteration-count: 1 !important;
2511+
transition-duration: 0.001ms !important;
2512+
}
2513+
2514+
.reveal {
2515+
opacity: 1;
2516+
transform: none;
2517+
filter: none;
2518+
}
2519+
2520+
.pulse-wave,
2521+
.pulse-core-flash,
2522+
.matrix-layer,
2523+
.hero-pulse {
2524+
display: none !important;
2525+
}
2526+
}
23882527

23892528
.easter-toast {
23902529
position: fixed;

0 commit comments

Comments
 (0)