mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-12 14:16:28 +03:00
Paul BakausandClaude Opus 4.6
3c9f705d49
Each of the 7 dimension icons now has a continuous subtle animation (breathing draws, pulsing circles, bobbing ball, blinking cursor, toggle wobble) plus an enhanced hover effect. Responsive icon uses transform-box: fill-box for a staggered desktop-to-mobile reflow. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
27 lines
911 B
JavaScript
27 lines
911 B
JavaScript
import { skillFocusAreas, dimensionGuidelineCounts } from '../data.js';
|
|
import { foundationAnimations } from './foundation-animations.js';
|
|
|
|
export function initFoundationGrid() {
|
|
const container = document.querySelector('.foundation-grid');
|
|
if (!container) return;
|
|
|
|
const dimensions = skillFocusAreas['impeccable'];
|
|
if (!dimensions) return;
|
|
|
|
container.innerHTML = dimensions.map((dim, i) => `
|
|
<div class="foundation-column">
|
|
<div class="foundation-card">
|
|
<div class="foundation-card-viz">
|
|
${foundationAnimations[dim.area] || ''}
|
|
</div>
|
|
<div class="foundation-card-header">
|
|
<span class="foundation-card-label">${dim.area}</span>
|
|
<span class="foundation-card-count">${dimensionGuidelineCounts[dim.area] || ''}</span>
|
|
</div>
|
|
<p class="foundation-card-detail">${dim.detail}</p>
|
|
</div>
|
|
<div class="foundation-plinth plinth-${i + 1}"></div>
|
|
</div>
|
|
`).join('');
|
|
}
|