vndangkhoa/kv-port
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

portfolio and cv static color for both views

Browse source
This commit is contained in:
vndangkhoa 2026-04-29 16:48:38 +07:00
parent fc4b1e657c
commit 11ca4110a6
1 changed files with 15 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
src/App.jsx
View file

@ -44,16 +44,14 @@ function TetrisPiece({ piece, isDark }) {
} }
}; };
// For desktop: start gray, show hover color when hovering // Static pieces (CV, Portfolio): always show their color
// For mobile dark: use colorDark for less gray // Other pieces: desktop starts gray, mobile uses actual color
// For mobile light: use actual color const isStaticPiece = piece.label === 'cv' || piece.featured;
const bgColor = piece.label === 'cv' const bgColor = isStaticPiece
? piece.color ? (isDark ? (piece.colorDark || piece.color) : piece.color)
: (isMobile && isDark) : (isMobile)
? (color || piece.colorDark || piece.color) ? (color || piece.color)
: (isMobile) : '#cccccc'; // Start gray for desktop
? (color || piece.color)
: '#cccccc'; // Start gray for desktop
const rowDelay = (piece.startY * 10) + (piece.startX * 2); // Stagger based on both X and Y position const rowDelay = (piece.startY * 10) + (piece.startX * 2); // Stagger based on both X and Y position
const textColor = '#ffffff'; const textColor = '#ffffff';
const isStatic = piece.label === 'cv' || piece.featured; const isStatic = piece.label === 'cv' || piece.featured;
@ -69,14 +67,16 @@ const bgColor = piece.label === 'cv'
animationFillMode: 'forwards', animationFillMode: 'forwards',
}; };
// For desktop: use hoverColor when hovering, otherwise gray // For static pieces (CV, Portfolio): always show static color
// For mobile: use blinkColor for animation (will start dim via animation) // For non-static: desktop uses hover, mobile uses animation
const bgStyle = { const bgStyle = {
position: 'absolute', position: 'absolute',
inset: 0, inset: 0,
backgroundColor: isDark || isMobile backgroundColor: isStaticPiece
? (color || bgColor) // Use actual color for blink animation ? bgColor // Static pieces always show their color
: (isHovered ? (piece.hoverColor || color) : '#cccccc'), // Hover color or gray : (isDark || isMobile)
? (color || bgColor) // Use actual color for blink animation
: (isHovered ? (piece.hoverColor || color) : '#cccccc'), // Hover color or gray
transition: 'background-color 0.15s ease', transition: 'background-color 0.15s ease',
}; };