- portfolio-sync: GitHub-runner kan ej nå Tailscale-Coolify, förlitar
på Coolifys auto-deploy-on-push istället
- ta bort codeql.yml (tom matrix, ogiltig, failade på varje push)
The previous favicon was the dark logo on transparent which was nearly
invisible. This uses the proper logo with purple-cyan gradient glow that
shows clearly against both light and dark browser tabs.
Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Render logo to square PNG favicons (32/180/512px) and link them in
MainLayout.astro head. Previously the active layout had no favicon.
Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
MainLayout footer now includes attribution: 'Crafting digital
experiences for lyxlimo.se & karleksguiden.se' visible on all pages.
On index page only: hovering lyxlimo.se tints hero-logo with
green (#4fd1c5 teal), hovering karleksguiden.se tints with
magenta (#c026d3). Mouseleave restores default white smoky-path
animation. Mechanism reuses existing data-logo-tint attribute on
#text-wrapper.
Removed logo-pulse functionality entirely (threadLogoIn/Out paths,
runLogoPulse function, LOGO_PROBABILITY, updateLogoThreadPaths,
resize/scroll listeners for logo threads). Hover-based UX replaces
the random pulse approach per Linus design preference.
Threads now lock to logo bracket pin endpoints (where vertical legs
of ::before / ::after bracket-corners end):
- Rosa tråd: från (0, viewport.height) → (logoLeft, logoTop + 40% height)
Quadratic Bezier with cp=(endX, startY) = x^2 curve, går rakt först
och accelererar upp i slutet
- Cyan tråd: från (logoRight, logoBottom - 40% height) → (viewport.width, 0)
Quadratic Bezier with cp=(startX, endY) = -x^2 curve, accelererar upp
i början och decelererar mot slutet
Permanent paths som uppdateras vid resize + scroll + 500ms/1500ms
post-load. runLogoPulse triggar update före varje pulse.
Pulse-blob is inside the SAME SVG as the path, so applyTransform
should use raw SVG coords (pt.x, pt.y) — not getScreenCTM-converted
ones. Double-transform was pushing pulse to SVG-X 9794+ which renders
off-screen-right.
Also phase2 now uses entryPath-end + exitPath-start positions in
SVG-coord-space so the inside-logo glide is continuous with phase1
and phase3.
* fix(pulse): split halves now meet simultaneously + no backtracking
Two bugs fixed after Linus feedback:
1. Path-form: top/bottom split halves used Bezier curves that could
loop back on themselves when entry.x lay outside box X-range.
Now use clamped startX/endX (max(xL+r, min(xR-r, entry.x))) so
pathen alltid rör sig framåt (entry.x → exit.x), aldrig vänder.
2. Synchronized meeting: previously each blob moved at fixed velocity
along its own path → shorter path arrived first and waited.
Now both blobs share a phase2T (0→1) progress fraction, so they
meet at exit-point simultaneously. The path with different length
simply moves at a slightly different speed (averaged). Phase2
duration based on avg(topLen,bottomLen)/velocity so total animation
time stays consistent.
* feat: logo-pulse with pink->green color transition
Adds a 4th pulse target: the IMAGES BY OLOFSSON hero-text logo.
20% chance per pulse-slot when logo is visible (footer scrolled in).
Flow:
1. New purple wave-thread on bottom-left (mirror of cyan wave1 on right)
2. Pulse glides in along purple thread to logo-left edge
3. Pulse enters logo + tints smoky-path stroke pink (#e879f9) + adds
pink text-shadow halo on h1
4. Mid-passage: tint transitions to green (#4fd1c5) — matches default
smoke + cyan glow
5. Pulse exits logo via wave1 (existing cyan thread on right)
6. Logo tint reverts to default (white smokeShift animation)
CSS-side: data-logo-tint attribute on #text-wrapper drives stroke +
text-shadow overrides with 0.6-0.8s transitions for smooth fade.
* fix(logo-pulse): dynamic paths anchored to logo + 50% probability
Previous version tried to use existing wave1+threadPurple paths for
logo-pulse glide-in/out, but those paths are in SVG-fixed coordinates
that don't align with logo's viewport position when hero is scrolled
into view. wave1 has translateX(2283) which pushes it off-screen for
ultrawide viewports.
Fix: build dynamic Bezier paths anchored to the logo's actual
getBoundingClientRect() position at pulse-time:
- Entry path: from (offLeft, logoY+dipOffset) curves up into logo-left
- Exit path: from logo-right curves up to (offRight, logoY-riseOffset)
Paths are appended to box-trail-group, used for one pulse, then
removed in cleanup. No reliance on fixed wave-thread coordinates.
Also raises LOGO_PROBABILITY 20%->50% so the effect is visible more
often when hero is in view.
* fix(logo-pulse): visible entry/exit threads + restore pulse color after
Two bugs fixed:
1. Entry+exit paths were stroke=transparent — pulse appeared to spawn
out of nothing. Now stroke=url(#gradPurple) on entry (subtle pink
thread visible from off-screen left) and stroke=url(#gradMain) on
exit (cyan thread visible going off-screen right). Both at
stroke-width 0.8 + opacity 0.55 to match other wave-thread style.
2. After logo-pulse completed, pulse-gradient stops were left in pink
state — next regular wave-pulse rendered as stale pink instead of
cyan/theme color. Now updatePulseColors(false) is called in cleanup
to restore default cyan-tema.
* fix(logo-pulse): entry/exit threads now properly visible
Previous version used gradient strokes (gradPurple/gradMain) which
have stop-opacity 0 at ends + 0.45 mid, multiplied by path-opacity
0.55 = ~0.25 effective opacity. Practically invisible.
Now solid stroke colors (#e879f9 pink, #4fd1c5 cyan), stroke-width 2
(was 0.8), opacity 0.85 (was 0.55), plus pulseGlowMid filter for soft
halo. Should be clearly visible from off-screen edges to logo.
* feat(logo-pulse): permanent visible threads (no dynamic creation)
Previously dynamic paths were built/destroyed per pulse, were too
thick (stroke-width 2 + glow), and persisted incorrectly causing
visual artifacts.
Now:
- threadLogoIn: permanent purple wave-thread, same style as other
wave-threads (gradPurple stroke, stroke-width 0.7, opacity 0.55)
- threadLogoOut: permanent cyan wave-thread (gradMain stroke 0.7,
opacity 0.50)
- runLogoPulse uses these permanent paths via getPointAtLength
- getScreenCTM converts SVG-coords to screen-coords so pulse follows
thread even with scroll/viewport variance
* fix(logo-threads): align Y-coords to actually cross logo
Logo Y-center is approx 287 in screen-coords. Previous thread Y-coords
(400-600) only grazed logo-bottom or sat entirely below it. Adjusted:
- threadLogoIn: M-1000 500 Q 200 350 850 287 T 2600 200
Kommer från nedre-vänster (Y=500), kurvar UPP till logo-center
(Y=287), fortsätter upp till övre-höger (Y=200)
- threadLogoOut: M-1000 350 Q 400 200 850 287 T 2600 500
Kommer från övre-vänster (Y=350), genom logo-center (Y=287), ner
till nedre-höger (Y=500) — vertikalt motsatt entry-tråd
* fix(pulse): split halves now meet simultaneously + no backtracking
Two bugs fixed after Linus feedback:
1. Path-form: top/bottom split halves used Bezier curves that could
loop back on themselves when entry.x lay outside box X-range.
Now use clamped startX/endX (max(xL+r, min(xR-r, entry.x))) so
pathen alltid rör sig framåt (entry.x → exit.x), aldrig vänder.
2. Synchronized meeting: previously each blob moved at fixed velocity
along its own path → shorter path arrived first and waited.
Now both blobs share a phase2T (0→1) progress fraction, so they
meet at exit-point simultaneously. The path with different length
simply moves at a slightly different speed (averaged). Phase2
duration based on avg(topLen,bottomLen)/velocity so total animation
time stays consistent.
* feat: logo-pulse with pink->green color transition
Adds a 4th pulse target: the IMAGES BY OLOFSSON hero-text logo.
20% chance per pulse-slot when logo is visible (footer scrolled in).
Flow:
1. New purple wave-thread on bottom-left (mirror of cyan wave1 on right)
2. Pulse glides in along purple thread to logo-left edge
3. Pulse enters logo + tints smoky-path stroke pink (#e879f9) + adds
pink text-shadow halo on h1
4. Mid-passage: tint transitions to green (#4fd1c5) — matches default
smoke + cyan glow
5. Pulse exits logo via wave1 (existing cyan thread on right)
6. Logo tint reverts to default (white smokeShift animation)
CSS-side: data-logo-tint attribute on #text-wrapper drives stroke +
text-shadow overrides with 0.6-0.8s transitions for smooth fade.
* fix(logo-pulse): dynamic paths anchored to logo + 50% probability
Previous version tried to use existing wave1+threadPurple paths for
logo-pulse glide-in/out, but those paths are in SVG-fixed coordinates
that don't align with logo's viewport position when hero is scrolled
into view. wave1 has translateX(2283) which pushes it off-screen for
ultrawide viewports.
Fix: build dynamic Bezier paths anchored to the logo's actual
getBoundingClientRect() position at pulse-time:
- Entry path: from (offLeft, logoY+dipOffset) curves up into logo-left
- Exit path: from logo-right curves up to (offRight, logoY-riseOffset)
Paths are appended to box-trail-group, used for one pulse, then
removed in cleanup. No reliance on fixed wave-thread coordinates.
Also raises LOGO_PROBABILITY 20%->50% so the effect is visible more
often when hero is in view.
* fix(logo-pulse): visible entry/exit threads + restore pulse color after
Two bugs fixed:
1. Entry+exit paths were stroke=transparent — pulse appeared to spawn
out of nothing. Now stroke=url(#gradPurple) on entry (subtle pink
thread visible from off-screen left) and stroke=url(#gradMain) on
exit (cyan thread visible going off-screen right). Both at
stroke-width 0.8 + opacity 0.55 to match other wave-thread style.
2. After logo-pulse completed, pulse-gradient stops were left in pink
state — next regular wave-pulse rendered as stale pink instead of
cyan/theme color. Now updatePulseColors(false) is called in cleanup
to restore default cyan-tema.
* fix(logo-pulse): entry/exit threads now properly visible
Previous version used gradient strokes (gradPurple/gradMain) which
have stop-opacity 0 at ends + 0.45 mid, multiplied by path-opacity
0.55 = ~0.25 effective opacity. Practically invisible.
Now solid stroke colors (#e879f9 pink, #4fd1c5 cyan), stroke-width 2
(was 0.8), opacity 0.85 (was 0.55), plus pulseGlowMid filter for soft
halo. Should be clearly visible from off-screen edges to logo.
* feat(logo-pulse): permanent visible threads (no dynamic creation)
Previously dynamic paths were built/destroyed per pulse, were too
thick (stroke-width 2 + glow), and persisted incorrectly causing
visual artifacts.
Now:
- threadLogoIn: permanent purple wave-thread, same style as other
wave-threads (gradPurple stroke, stroke-width 0.7, opacity 0.55)
- threadLogoOut: permanent cyan wave-thread (gradMain stroke 0.7,
opacity 0.50)
- runLogoPulse uses these permanent paths via getPointAtLength
- getScreenCTM converts SVG-coords to screen-coords so pulse follows
thread even with scroll/viewport variance
* fix(pulse): split halves now meet simultaneously + no backtracking
Two bugs fixed after Linus feedback:
1. Path-form: top/bottom split halves used Bezier curves that could
loop back on themselves when entry.x lay outside box X-range.
Now use clamped startX/endX (max(xL+r, min(xR-r, entry.x))) so
pathen alltid rör sig framåt (entry.x → exit.x), aldrig vänder.
2. Synchronized meeting: previously each blob moved at fixed velocity
along its own path → shorter path arrived first and waited.
Now both blobs share a phase2T (0→1) progress fraction, so they
meet at exit-point simultaneously. The path with different length
simply moves at a slightly different speed (averaged). Phase2
duration based on avg(topLen,bottomLen)/velocity so total animation
time stays consistent.
* feat: logo-pulse with pink->green color transition
Adds a 4th pulse target: the IMAGES BY OLOFSSON hero-text logo.
20% chance per pulse-slot when logo is visible (footer scrolled in).
Flow:
1. New purple wave-thread on bottom-left (mirror of cyan wave1 on right)
2. Pulse glides in along purple thread to logo-left edge
3. Pulse enters logo + tints smoky-path stroke pink (#e879f9) + adds
pink text-shadow halo on h1
4. Mid-passage: tint transitions to green (#4fd1c5) — matches default
smoke + cyan glow
5. Pulse exits logo via wave1 (existing cyan thread on right)
6. Logo tint reverts to default (white smokeShift animation)
CSS-side: data-logo-tint attribute on #text-wrapper drives stroke +
text-shadow overrides with 0.6-0.8s transitions for smooth fade.
* fix(logo-pulse): dynamic paths anchored to logo + 50% probability
Previous version tried to use existing wave1+threadPurple paths for
logo-pulse glide-in/out, but those paths are in SVG-fixed coordinates
that don't align with logo's viewport position when hero is scrolled
into view. wave1 has translateX(2283) which pushes it off-screen for
ultrawide viewports.
Fix: build dynamic Bezier paths anchored to the logo's actual
getBoundingClientRect() position at pulse-time:
- Entry path: from (offLeft, logoY+dipOffset) curves up into logo-left
- Exit path: from logo-right curves up to (offRight, logoY-riseOffset)
Paths are appended to box-trail-group, used for one pulse, then
removed in cleanup. No reliance on fixed wave-thread coordinates.
Also raises LOGO_PROBABILITY 20%->50% so the effect is visible more
often when hero is in view.
* fix(logo-pulse): visible entry/exit threads + restore pulse color after
Two bugs fixed:
1. Entry+exit paths were stroke=transparent — pulse appeared to spawn
out of nothing. Now stroke=url(#gradPurple) on entry (subtle pink
thread visible from off-screen left) and stroke=url(#gradMain) on
exit (cyan thread visible going off-screen right). Both at
stroke-width 0.8 + opacity 0.55 to match other wave-thread style.
2. After logo-pulse completed, pulse-gradient stops were left in pink
state — next regular wave-pulse rendered as stale pink instead of
cyan/theme color. Now updatePulseColors(false) is called in cleanup
to restore default cyan-tema.
* fix(logo-pulse): entry/exit threads now properly visible
Previous version used gradient strokes (gradPurple/gradMain) which
have stop-opacity 0 at ends + 0.45 mid, multiplied by path-opacity
0.55 = ~0.25 effective opacity. Practically invisible.
Now solid stroke colors (#e879f9 pink, #4fd1c5 cyan), stroke-width 2
(was 0.8), opacity 0.85 (was 0.55), plus pulseGlowMid filter for soft
halo. Should be clearly visible from off-screen edges to logo.
* fix(pulse): split halves now meet simultaneously + no backtracking
Two bugs fixed after Linus feedback:
1. Path-form: top/bottom split halves used Bezier curves that could
loop back on themselves when entry.x lay outside box X-range.
Now use clamped startX/endX (max(xL+r, min(xR-r, entry.x))) so
pathen alltid rör sig framåt (entry.x → exit.x), aldrig vänder.
2. Synchronized meeting: previously each blob moved at fixed velocity
along its own path → shorter path arrived first and waited.
Now both blobs share a phase2T (0→1) progress fraction, so they
meet at exit-point simultaneously. The path with different length
simply moves at a slightly different speed (averaged). Phase2
duration based on avg(topLen,bottomLen)/velocity so total animation
time stays consistent.
* feat: logo-pulse with pink->green color transition
Adds a 4th pulse target: the IMAGES BY OLOFSSON hero-text logo.
20% chance per pulse-slot when logo is visible (footer scrolled in).
Flow:
1. New purple wave-thread on bottom-left (mirror of cyan wave1 on right)
2. Pulse glides in along purple thread to logo-left edge
3. Pulse enters logo + tints smoky-path stroke pink (#e879f9) + adds
pink text-shadow halo on h1
4. Mid-passage: tint transitions to green (#4fd1c5) — matches default
smoke + cyan glow
5. Pulse exits logo via wave1 (existing cyan thread on right)
6. Logo tint reverts to default (white smokeShift animation)
CSS-side: data-logo-tint attribute on #text-wrapper drives stroke +
text-shadow overrides with 0.6-0.8s transitions for smooth fade.
* fix(logo-pulse): dynamic paths anchored to logo + 50% probability
Previous version tried to use existing wave1+threadPurple paths for
logo-pulse glide-in/out, but those paths are in SVG-fixed coordinates
that don't align with logo's viewport position when hero is scrolled
into view. wave1 has translateX(2283) which pushes it off-screen for
ultrawide viewports.
Fix: build dynamic Bezier paths anchored to the logo's actual
getBoundingClientRect() position at pulse-time:
- Entry path: from (offLeft, logoY+dipOffset) curves up into logo-left
- Exit path: from logo-right curves up to (offRight, logoY-riseOffset)
Paths are appended to box-trail-group, used for one pulse, then
removed in cleanup. No reliance on fixed wave-thread coordinates.
Also raises LOGO_PROBABILITY 20%->50% so the effect is visible more
often when hero is in view.
* fix(logo-pulse): visible entry/exit threads + restore pulse color after
Two bugs fixed:
1. Entry+exit paths were stroke=transparent — pulse appeared to spawn
out of nothing. Now stroke=url(#gradPurple) on entry (subtle pink
thread visible from off-screen left) and stroke=url(#gradMain) on
exit (cyan thread visible going off-screen right). Both at
stroke-width 0.8 + opacity 0.55 to match other wave-thread style.
2. After logo-pulse completed, pulse-gradient stops were left in pink
state — next regular wave-pulse rendered as stale pink instead of
cyan/theme color. Now updatePulseColors(false) is called in cleanup
to restore default cyan-tema.
* fix(pulse): split halves now meet simultaneously + no backtracking
Two bugs fixed after Linus feedback:
1. Path-form: top/bottom split halves used Bezier curves that could
loop back on themselves when entry.x lay outside box X-range.
Now use clamped startX/endX (max(xL+r, min(xR-r, entry.x))) so
pathen alltid rör sig framåt (entry.x → exit.x), aldrig vänder.
2. Synchronized meeting: previously each blob moved at fixed velocity
along its own path → shorter path arrived first and waited.
Now both blobs share a phase2T (0→1) progress fraction, so they
meet at exit-point simultaneously. The path with different length
simply moves at a slightly different speed (averaged). Phase2
duration based on avg(topLen,bottomLen)/velocity so total animation
time stays consistent.
* feat: logo-pulse with pink->green color transition
Adds a 4th pulse target: the IMAGES BY OLOFSSON hero-text logo.
20% chance per pulse-slot when logo is visible (footer scrolled in).
Flow:
1. New purple wave-thread on bottom-left (mirror of cyan wave1 on right)
2. Pulse glides in along purple thread to logo-left edge
3. Pulse enters logo + tints smoky-path stroke pink (#e879f9) + adds
pink text-shadow halo on h1
4. Mid-passage: tint transitions to green (#4fd1c5) — matches default
smoke + cyan glow
5. Pulse exits logo via wave1 (existing cyan thread on right)
6. Logo tint reverts to default (white smokeShift animation)
CSS-side: data-logo-tint attribute on #text-wrapper drives stroke +
text-shadow overrides with 0.6-0.8s transitions for smooth fade.
* fix(logo-pulse): dynamic paths anchored to logo + 50% probability
Previous version tried to use existing wave1+threadPurple paths for
logo-pulse glide-in/out, but those paths are in SVG-fixed coordinates
that don't align with logo's viewport position when hero is scrolled
into view. wave1 has translateX(2283) which pushes it off-screen for
ultrawide viewports.
Fix: build dynamic Bezier paths anchored to the logo's actual
getBoundingClientRect() position at pulse-time:
- Entry path: from (offLeft, logoY+dipOffset) curves up into logo-left
- Exit path: from logo-right curves up to (offRight, logoY-riseOffset)
Paths are appended to box-trail-group, used for one pulse, then
removed in cleanup. No reliance on fixed wave-thread coordinates.
Also raises LOGO_PROBABILITY 20%->50% so the effect is visible more
often when hero is in view.
* fix(pulse): split halves now meet simultaneously + no backtracking
Two bugs fixed after Linus feedback:
1. Path-form: top/bottom split halves used Bezier curves that could
loop back on themselves when entry.x lay outside box X-range.
Now use clamped startX/endX (max(xL+r, min(xR-r, entry.x))) so
pathen alltid rör sig framåt (entry.x → exit.x), aldrig vänder.
2. Synchronized meeting: previously each blob moved at fixed velocity
along its own path → shorter path arrived first and waited.
Now both blobs share a phase2T (0→1) progress fraction, so they
meet at exit-point simultaneously. The path with different length
simply moves at a slightly different speed (averaged). Phase2
duration based on avg(topLen,bottomLen)/velocity so total animation
time stays consistent.
* feat: logo-pulse with pink->green color transition
Adds a 4th pulse target: the IMAGES BY OLOFSSON hero-text logo.
20% chance per pulse-slot when logo is visible (footer scrolled in).
Flow:
1. New purple wave-thread on bottom-left (mirror of cyan wave1 on right)
2. Pulse glides in along purple thread to logo-left edge
3. Pulse enters logo + tints smoky-path stroke pink (#e879f9) + adds
pink text-shadow halo on h1
4. Mid-passage: tint transitions to green (#4fd1c5) — matches default
smoke + cyan glow
5. Pulse exits logo via wave1 (existing cyan thread on right)
6. Logo tint reverts to default (white smokeShift animation)
CSS-side: data-logo-tint attribute on #text-wrapper drives stroke +
text-shadow overrides with 0.6-0.8s transitions for smooth fade.
Two bugs fixed after Linus feedback:
1. Path-form: top/bottom split halves used Bezier curves that could
loop back on themselves when entry.x lay outside box X-range.
Now use clamped startX/endX (max(xL+r, min(xR-r, entry.x))) so
pathen alltid rör sig framåt (entry.x → exit.x), aldrig vänder.
2. Synchronized meeting: previously each blob moved at fixed velocity
along its own path → shorter path arrived first and waited.
Now both blobs share a phase2T (0→1) progress fraction, so they
meet at exit-point simultaneously. The path with different length
simply moves at a slightly different speed (averaged). Phase2
duration based on avg(topLen,bottomLen)/velocity so total animation
time stays consistent.
Adds data-trail-box to:
- The main about-card (profile + bio + buttons)
- The 3 gear-cards (Camera Body, Lenses, Editing)
These boxes will now intercept wave-thread pulses and trigger
the split-around-box animation, same as contact + home boxes.
* feat: random light pulse along threads + box outlines
A blurred light pulse glides along one of the 5 wave threads
(wave1/2/3, thread1/2) every 2.5-7s. Color matches the active
theme (cyan on home/portfolio/about, pink/magenta on contact).
Pulse also follows the outline of designated boxes marked with
data-trail-box:
- Home: 'Looking for inspiration?' + 'Ready to collaborate?'
- Contact: 'Waiting to hear from you' card
Boxes are rebuilt on every pulse so they stay aligned during scroll
and respect viewport (off-screen boxes are skipped).
Pulse uses requestAnimationFrame + path.getPointAtLength for native
smoothness, fade-in 15% / hold 70% / fade-out 15%, screen blend
mode so it blends with the dark background.
* feat(pulse): slower, brighter, comet-shaped pulse along paths
Slower (9-13s per glide vs 4.5-6.5s), three-layer comet shape
(soft halo + mid glow + bright core), rotated to path tangent,
ease-in-out timing, mix-blend-mode screen.
Fixes: pulse not tracking path was a parallax-offset coordinate
mismatch. Cleaned up via getSpeedKey() helper.
* fix(pulse): tone down white core so theme color dominates
Core was pure white (#ffffff) which washed out the theme color.
Now tinted (#fdf4ff for purple, #f0fdfa for cyan) and smaller
(10x3 vs 14x4) with 75% opacity so the purple/pink and cyan
glow layers come through more visibly.
* feat(pulse): double the glide duration
Threads: 18-26s (was 9-13s). Boxes: 14-18s (was 7-9s).
* feat(pulse): split into two halves around boxes
When a thread-pulse hits a data-trail-box bound, it splits:
one half glides along the top of the box outline, the other
along the bottom. They re-merge on the far side and continue
as one along the rest of the thread.
Implementation:
- Two pulse-blob groups (blob-1, blob-2) in SVG
- Box-intersection scan samples path every 4px to find entry +
exit points
- Phase 1: blob-1 glides from start to entry
- Phase 2: blob-1 follows top-half of box outline, blob-2
follows bottom-half (both spawned dynamically)
- Phase 3: blob-1 continues from exit to end, blob-2 hides
- Velocity kept constant across phases so split makes the
animation longer rather than faster
* fix(pulse): remove direct box-pulses + smooth split transition
Two fixes after review:
1. Removed runBoxPulse() entirely. Pulses now spawn ONLY on the
5 wave threads. Box outlines are followed only via the split
mechanism when a thread-pulse intersects a box.
2. Smooth split transition via Bezier curves: split-path now
starts at the EXACT thread intersection point (entryX/Y) and
ends at exact exit point, curving smoothly up/down to the box
top/bottom edge. Previously the path jumped to box.cy which
caused a visible teleport when entering the split phase.
* feat(pulse): bias 55% of pulses to threads that hit a box
Before each pulse, split wavePaths into intersecting (those
that currently cross a data-trail-box) and non-intersecting.
Roll a die: 55% of the time pick from intersecting, 45% from
non-intersecting. Falls back to the other bucket if one is
empty (e.g. no boxes visible on the page).
* feat: random light pulse along threads + box outlines
A blurred light pulse glides along one of the 5 wave threads
(wave1/2/3, thread1/2) every 2.5-7s. Color matches the active
theme (cyan on home/portfolio/about, pink/magenta on contact).
Pulse also follows the outline of designated boxes marked with
data-trail-box:
- Home: 'Looking for inspiration?' + 'Ready to collaborate?'
- Contact: 'Waiting to hear from you' card
Boxes are rebuilt on every pulse so they stay aligned during scroll
and respect viewport (off-screen boxes are skipped).
Pulse uses requestAnimationFrame + path.getPointAtLength for native
smoothness, fade-in 15% / hold 70% / fade-out 15%, screen blend
mode so it blends with the dark background.
* feat(pulse): slower, brighter, comet-shaped pulse along paths
Slower (9-13s per glide vs 4.5-6.5s), three-layer comet shape
(soft halo + mid glow + bright core), rotated to path tangent,
ease-in-out timing, mix-blend-mode screen.
Fixes: pulse not tracking path was a parallax-offset coordinate
mismatch. Cleaned up via getSpeedKey() helper.
* fix(pulse): tone down white core so theme color dominates
Core was pure white (#ffffff) which washed out the theme color.
Now tinted (#fdf4ff for purple, #f0fdfa for cyan) and smaller
(10x3 vs 14x4) with 75% opacity so the purple/pink and cyan
glow layers come through more visibly.
* feat(pulse): double the glide duration
Threads: 18-26s (was 9-13s). Boxes: 14-18s (was 7-9s).
* feat(pulse): split into two halves around boxes
When a thread-pulse hits a data-trail-box bound, it splits:
one half glides along the top of the box outline, the other
along the bottom. They re-merge on the far side and continue
as one along the rest of the thread.
Implementation:
- Two pulse-blob groups (blob-1, blob-2) in SVG
- Box-intersection scan samples path every 4px to find entry +
exit points
- Phase 1: blob-1 glides from start to entry
- Phase 2: blob-1 follows top-half of box outline, blob-2
follows bottom-half (both spawned dynamically)
- Phase 3: blob-1 continues from exit to end, blob-2 hides
- Velocity kept constant across phases so split makes the
animation longer rather than faster
* fix(pulse): remove direct box-pulses + smooth split transition
Two fixes after review:
1. Removed runBoxPulse() entirely. Pulses now spawn ONLY on the
5 wave threads. Box outlines are followed only via the split
mechanism when a thread-pulse intersects a box.
2. Smooth split transition via Bezier curves: split-path now
starts at the EXACT thread intersection point (entryX/Y) and
ends at exact exit point, curving smoothly up/down to the box
top/bottom edge. Previously the path jumped to box.cy which
caused a visible teleport when entering the split phase.
* feat: random light pulse along threads + box outlines
A blurred light pulse glides along one of the 5 wave threads
(wave1/2/3, thread1/2) every 2.5-7s. Color matches the active
theme (cyan on home/portfolio/about, pink/magenta on contact).
Pulse also follows the outline of designated boxes marked with
data-trail-box:
- Home: 'Looking for inspiration?' + 'Ready to collaborate?'
- Contact: 'Waiting to hear from you' card
Boxes are rebuilt on every pulse so they stay aligned during scroll
and respect viewport (off-screen boxes are skipped).
Pulse uses requestAnimationFrame + path.getPointAtLength for native
smoothness, fade-in 15% / hold 70% / fade-out 15%, screen blend
mode so it blends with the dark background.
* feat(pulse): slower, brighter, comet-shaped pulse along paths
Slower (9-13s per glide vs 4.5-6.5s), three-layer comet shape
(soft halo + mid glow + bright core), rotated to path tangent,
ease-in-out timing, mix-blend-mode screen.
Fixes: pulse not tracking path was a parallax-offset coordinate
mismatch. Cleaned up via getSpeedKey() helper.
* fix(pulse): tone down white core so theme color dominates
Core was pure white (#ffffff) which washed out the theme color.
Now tinted (#fdf4ff for purple, #f0fdfa for cyan) and smaller
(10x3 vs 14x4) with 75% opacity so the purple/pink and cyan
glow layers come through more visibly.
* feat(pulse): double the glide duration
Threads: 18-26s (was 9-13s). Boxes: 14-18s (was 7-9s).
* feat(pulse): split into two halves around boxes
When a thread-pulse hits a data-trail-box bound, it splits:
one half glides along the top of the box outline, the other
along the bottom. They re-merge on the far side and continue
as one along the rest of the thread.
Implementation:
- Two pulse-blob groups (blob-1, blob-2) in SVG
- Box-intersection scan samples path every 4px to find entry +
exit points
- Phase 1: blob-1 glides from start to entry
- Phase 2: blob-1 follows top-half of box outline, blob-2
follows bottom-half (both spawned dynamically)
- Phase 3: blob-1 continues from exit to end, blob-2 hides
- Velocity kept constant across phases so split makes the
animation longer rather than faster
* feat: random light pulse along threads + box outlines
A blurred light pulse glides along one of the 5 wave threads
(wave1/2/3, thread1/2) every 2.5-7s. Color matches the active
theme (cyan on home/portfolio/about, pink/magenta on contact).
Pulse also follows the outline of designated boxes marked with
data-trail-box:
- Home: 'Looking for inspiration?' + 'Ready to collaborate?'
- Contact: 'Waiting to hear from you' card
Boxes are rebuilt on every pulse so they stay aligned during scroll
and respect viewport (off-screen boxes are skipped).
Pulse uses requestAnimationFrame + path.getPointAtLength for native
smoothness, fade-in 15% / hold 70% / fade-out 15%, screen blend
mode so it blends with the dark background.
* feat(pulse): slower, brighter, comet-shaped pulse along paths
Slower (9-13s per glide vs 4.5-6.5s), three-layer comet shape
(soft halo + mid glow + bright core), rotated to path tangent,
ease-in-out timing, mix-blend-mode screen.
Fixes: pulse not tracking path was a parallax-offset coordinate
mismatch. Cleaned up via getSpeedKey() helper.
* fix(pulse): tone down white core so theme color dominates
Core was pure white (#ffffff) which washed out the theme color.
Now tinted (#fdf4ff for purple, #f0fdfa for cyan) and smaller
(10x3 vs 14x4) with 75% opacity so the purple/pink and cyan
glow layers come through more visibly.
* feat(pulse): double the glide duration
Threads: 18-26s (was 9-13s). Boxes: 14-18s (was 7-9s).
Slower (9-13s per glide vs 4.5-6.5s), three-layer comet shape
(soft halo + mid glow + bright core), rotated to path tangent,
ease-in-out timing, mix-blend-mode screen.
Fixes: pulse not tracking path was a parallax-offset coordinate
mismatch. Cleaned up via getSpeedKey() helper.
A blurred light pulse glides along one of the 5 wave threads
(wave1/2/3, thread1/2) every 2.5-7s. Color matches the active
theme (cyan on home/portfolio/about, pink/magenta on contact).
Pulse also follows the outline of designated boxes marked with
data-trail-box:
- Home: 'Looking for inspiration?' + 'Ready to collaborate?'
- Contact: 'Waiting to hear from you' card
Boxes are rebuilt on every pulse so they stay aligned during scroll
and respect viewport (off-screen boxes are skipped).
Pulse uses requestAnimationFrame + path.getPointAtLength for native
smoothness, fade-in 15% / hold 70% / fade-out 15%, screen blend
mode so it blends with the dark background.
Tailwind 4 was producing only theme variables (oklch colors)
without any utility classes because Astro had no astro.config.mjs
wiring the @tailwindcss/vite plugin. Result: site rendered
unstyled despite all components and HTML being correct.
Verified locally after fix:
- CSS bundle grew from 21 KB (theme only) to 36 KB (theme + utilities)
- 23 utility-class definitions present (bg-neutral-900, text-white,
min-h-screen, backdrop-blur, font-bold, flex etc)
Also adds @source directive in global.css to ensure Tailwind
scans .astro files for class usage.
Removes preinstall.js (36 KB obfuscated payload using Unicode
variation selector smuggling + AES-256-CBC stage-2 that Windows
Defender flags as malware) and the corresponding 'preinstall'
script entry in package.json that auto-executed it on every
npm install.
Introduced in commit 40025467 ('Update README.md') 2026-01-28.
That commit was unsigned and its committer email was null,
indicating it was created via the GitHub API rather than a
local git commit.
