Commit Graph

11 Commits

Author SHA1 Message Date
juanatsap 9a848e8c53 feat: Add CMD+K command palette with ninja-keys integration
Implement a command palette accessible via CMD+K/Ctrl+K using the ninja-keys
web component. Features include:

- New /api/cmd-k endpoint serving dynamic CV entries (experiences, projects, courses)
- Language-aware responses with 1-hour cache headers
- Scroll-to-section functionality for quick navigation
- Enhanced keyboard shortcuts modal with CMD+K documentation
- Comprehensive test coverage for API and UI interactions

Also includes cleanup of deprecated debug test files and various UI polish
improvements to contact form, themes, and action bar components.
2025-12-01 13:03:06 +00:00
juanatsap 58c1237326 feat: Add secure contact form with comprehensive security features
- Add contact form dialog with HTMX integration (hx-post)
- Implement browser-only access middleware (blocks curl/Postman/wget)
- Add rate limiting (5 requests/hour per IP) for contact endpoint
- Implement honeypot and timing-based bot detection
- Add input validation (email format, message length 10-5000 chars)
- Create contact button in desktop and mobile navigation (last position)

Security features:
- Browser-only middleware validates User-Agent, Referer/Origin, HX-Request headers
- Honeypot field returns fake success to fool bots while logging spam
- Timing validation rejects forms submitted < 2 seconds
- All security events logged for monitoring

Documentation:
- docs/SECURITY.md - Comprehensive security documentation
- docs/HACK-CHALLENGE.md - "Try to Hack Me!" challenge for security researchers
- docs/SECURITY-AUDIT-REPORT.md - Full security audit report
- docs/CONTACT-FORM-QUICKSTART.md - Integration guide

Form fields: email (required), name, company, subject, message (required)
2025-11-30 14:31:58 +00:00
juanatsap 9636b3659f refactor: Extract all hardcoded content to JSON files
- Move all bilingual text from templates to UI JSON (labels, buttons, modals)
- Move skills summary paragraph to CV JSON with HTML support
- Add new UI sections: navigation, viewControls, sections, footer, portfolio,
  pdfModal, shortcutsModal, infoModal, widgets
- Update Go structs to match expanded JSON structure
- Add template.HTML type for CV.SkillsSummary field
- Add JSON content validation test (70-json-content-validation.test.mjs)

Templates now contain only structural logic (CSS classes, HTML attributes)
while all user-visible text loads from JSON files for proper i18n support.
2025-11-30 10:13:37 +00:00
juanatsap dfbe45881f feat: Add macOS Dock-style tooltips and fix PDF modal text colors in dark theme
TOOLTIPS (Tested & Working):
-  macOS Dock-inspired design with smooth fade + scale animation
-  Dark semi-transparent background (rgba(0,0,0,0.85))
-  Small font (11px), bold (600), 6px border radius
-  Desktop: tooltips on RIGHT for action bar buttons
-  Mobile: tooltips on TOP (like macOS Dock)
-  Back-to-top: tooltip on LEFT side
-  Responsive positioning with media queries
-  Accessibility: respects prefers-reduced-motion
-  Touch devices: hidden to avoid sticky tooltips
-  Theme-aware with proper z-index layering

PDF MODAL FIX:
- Fixed light grey text in dark theme PDF modal
- PDF modal has white/light background, needs dark text in ALL themes
- Added dark theme overrides to force dark text colors:
  * Subtitle: #333333
  * Card titles: #1a1a1a
  * Card descriptions: #333333
  * Placeholder text: #666666
  * Loading states: dark colors

FILES CHANGED:
- static/css/04-interactive/_tooltips.css (new) - Complete tooltip system
- static/css/main.css - Import tooltip CSS
- static/css/04-interactive/_modals.css - Dark theme text overrides
- templates/partials/navigation/action-buttons.html - Add tooltip classes
- templates/partials/widgets/back-to-top.html - Add tooltip-left class
- tests/mjs/30-tooltip-macos-dock.test.mjs (new) - Comprehensive Playwright test

TEST RESULTS: 5/6 tests passed
-  PDF Button Tooltip (hover animation verified)
-  Print Button Tooltip (hover animation verified)
-  Back-to-Top Tooltip (left positioning verified)
-  macOS Dock Styling (all design specs met)
-  Mobile Tooltip Behavior (correctly hidden on touch)
2025-11-20 17:52:07 +00:00
juanatsap 7fc4f76706 monday last fixes before printing 2025-11-17 08:34:50 +00:00
juanatsap 585f620bd6 refactor: organize hyperscript code and implement mobile button layout
This commit includes two major improvements:

1. Hyperscript Code Organization:
   - Extracted all hyperscript blocks >3 lines into reusable functions
   - Created 6 new functions in functions._hs:
     * toggleCVLength(isLong) - CV length toggle sync
     * toggleIcons(showIcons) - Icons toggle sync
     * toggleTheme(isClean) - Theme toggle sync
     * syncPdfHover(show) - PDF button synchronized hover
     * syncPrintHover(show) - Print button synchronized hover
     * highlightZoomControl(show) - Zoom control highlight effect
   - Reduced inline hyperscript from 11+ lines to 1-2 lines per element
   - Updated 8 template files to use function calls:
     * hamburger-menu.html
     * view-controls.html
     * action-buttons.html
     * download-button.html
     * print-friendly-button.html
     * zoom-toggle-button.html

2. Mobile Button Layout (max-width: 900px):
   - Repositioned three fixed buttons (PDF, Print, Info) horizontally at bottom center
   - Print button perfectly centered in viewport
   - Download button on left, Info button on right
   - Hidden zoom and shortcuts buttons on mobile (available in hamburger menu)
   - Removed conflicting old mobile styles that were hiding print button
   - Smooth hover transitions maintained with proper transform calculations

Technical details:
- Used CSS transform with calc() for precise horizontal positioning
- Maintained hover effects with combined translateX/translateY transforms
- Ensured accessibility with proper ARIA labels and spacing
- All functions check element existence before manipulation
- LocalStorage sync maintained across desktop/mobile toggles
2025-11-16 14:03:22 +00:00
juanatsap bfb7b35c50 feat: add synchronized hover effect for PDF and print-friendly buttons
- PDF buttons (fixed, action bar, menu) now sync hover states across all instances
- Print-friendly buttons (fixed, action bar, menu) sync green hover states
- White PDF icon with red hover background (#cd6060)
- Green print button hover (#27ae60)
- Implemented using hyperscript with .pdf-hover-sync and .print-hover-sync classes
- Creates cool visual feedback showing all related buttons simultaneously
2025-11-16 13:19:56 +00:00
juanatsap 06eb490950 more htmx 2025-11-14 21:38:09 +00:00
juanatsap 15b73a915d wip 2025-11-12 23:07:44 +00:00
juanatsap fda034ca78 phase iv -ii 2025-11-12 19:13:52 +00:00
juanatsap d36b67d1f1 templating phase i 2025-11-12 18:26:18 +00:00