Refactoring the Portfolio: 3D Cards & Architecture ✨

Why Refactor?

The initial version of this portfolio was built fast. Too fast. Inline styles, repetitive Tailwind classes, and duplicated scripts across every HTML file.

Today's goal (Phase 2) was to professionalize the codebase without losing the "Cyberpunk" soul.

The Changes

• CSS Centralization: Extracted all global styles (gradients, animations, fonts) into assets/css/style.css.
• Tailwind Config: Created a shared tailwind.config.js to manage the custom color palette (Slate & Purple).
• DevLog System: You're reading it! A simple static blog structure to document engineering headaches.

The Cool Part: 3D Tilt

To make the UI feel more "alive", I implemented a subtle 3D tilt effect on project cards using Vanilla JS. It calculates the mouse position relative to the card center and applies a dynamic transform: perspective(1000px) rotateX(...) rotateY(...).

// Calculating rotation based on cursor pos
const rotateX = ((y - centerY) / centerY) * -5; // Max 5 deg
const rotateY = ((x - centerX) / centerX) * 5;

card.style.transform = `
  perspective(1000px) 
  rotateX(${rotateX}deg) 
  rotateY(${rotateY}deg) 
  scale3d(1.02, 1.02, 1.02)
`;

Lesson Learned: WebKit browsers (Chrome/Safari) love to render jagged edges on 3D transforms. The fix? A combination of backface-visibility: hidden and a transparent 1px outline to force proper anti-aliasing.