Commit Graph

23 Commits

Author SHA1 Message Date
juanatsap 075a58efe4 fix: category badge before project title 2026-05-04 14:53:01 +01:00
juanatsap ea5e0c5aab fix: category badge moved to end of badge row (after GitHub+stars) 2026-05-04 14:49:04 +01:00
juanatsap 27cd4d06e8 fix: badge order — GitHub icon, number, star icon 2026-05-04 14:46:53 +01:00
juanatsap c8e680f7ea feat: 3-letter category tags, merged GitHub+stars badge, pastel colors
- Category badges: CLI, APP, WEB, PLG, SDK, OSS in pastel tones
- GitHub + stars merged into single dark badge with gold star count
- La Porra fixed to "web" category
2026-05-04 14:37:36 +01:00
juanatsap 542419de45 feat: category icon badges on projects — CLI, App, Web, Plugin, SDK
Each project now shows a colored icon badge indicating its type:
- CLI (purple terminal), App (blue apple), Web (cyan globe)
- WebApp (teal app), Plugin (amber puzzle), SDK (violet package)
- Contrib (gray pull request)
2026-05-04 14:28:37 +01:00
juanatsap 29aa3d1fd7 fix: stars badge on all projects with a GitHub repo, not just openSource 2026-05-04 14:19:26 +01:00
juanatsap 96ca60babe fix: stars badge shows "13 stars" (number first), SoundInbox not open source
- Badge text order: number before "stars"
- SoundInbox: removed gitRepoUrl, removed "open-source" from descriptions
- SoundInbox is a native app, not an open-source project
2026-05-04 14:08:22 +01:00
juanatsap 7322c1a158 fix: stars count rendered server-side with 30min cache, no client-side API calls 2026-05-04 13:52:53 +01:00
juanatsap 76d9649ec2 feat: custom gold stars badge matching other badges, live count via GitHub API 2026-05-04 13:47:05 +01:00
juanatsap 9a2343a71e feat: GitHub stars badge on open-source projects via shields.io
- New openSource field in project model distinguishes OS from private
- shields.io badge shows live star count for open-source projects
- SoundInbox marked as NOT open source (no badge, no stars)
- Immich Photo Manager, Cmux Resurrect, Gotify Commander, CDC Starter Kit → open source
- Stars badge hidden in print view
2026-05-04 13:42:40 +01:00
juanatsap 9547bc7130 feat: remove Commando project, add Gotify Commander logo, drolosoft linked
- Remove unreleased Commando project from CV
- Add gotify-commander.png logo from GitHub repo
- "drolosoft" lowercase with link to drolosoft.com in summary
- Replace Certifications chip with Open source chip in chat
2026-04-27 00:32:54 +01:00
juanatsap d5c90248cc feat: Teams-style chat UX overhaul
Bubbles:
- Teams-style layout: bot avatar (green circle) on left, message beside it
- User messages right-aligned, no avatar (clean, like Teams)
- Rounded bubbles (border-radius: 16px) instead of square
- Distinct corner radii for conversation flow

Navigation:
- Links no longer close the chat — panel stays open for continued navigation
- Added #certifications anchor (alias to courses section)
- Fixed agent instruction to use #courses for certifications references

Theme:
- All colors use CSS variables from _themes.css
- Automatically adapts to light/dark without explicit .theme-clean overrides
- Panel uses --paper-bg (white in light, dark in dark theme)

Size modes:
- 3 discrete toggle buttons: compact, half-screen, fullscreen
- Active state highlighted, direct selection (no confusing cycling)
- Removed chat-half-left (simplified to compact/half/full)

Intelligence:
- React query now returns results (verified: 4 companies + 2 projects + skills)
2026-04-08 17:51:14 +01:00
juanatsap 61efe98240 feat: link projects to drolosoft.com pages and add GitHub badge
Main project URLs now point to drolosoft.com product pages with
language-aware links. GitHub repos are shown via a new badge next
to the existing LIVE badge.
2026-04-03 23:15:59 +01:00
juanatsap b5a50ca3ef feat: implement CSS sprite system for image optimization
Reduces HTTP requests from 44+ individual images to 3 sprite sheets
(~93% reduction). Includes Go sprite generator tool, CSS classes,
template integration, and E2E tests.

- Add cmd/sprites/main.go for sprite generation (60x60px + 120x120px @2x)
- Add _sprites.css with responsive sizing and retina support
- Update templates to use sprites with logoIndex fallback
- Add Makefile targets: sprites, sprites-clean
- Add 9-test E2E suite for sprite functionality
- Add doc/22-SPRITES.md with usage documentation
2025-12-04 11:38:36 +00:00
juanatsap d95c62bad4 refactor: remove outdated server design documentation
Remove 557-line server-design.md from _go-learning/architecture - content is now covered in updated architecture documentation with real implementation examples and test coverage.
2025-12-02 20:25:05 +00:00
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 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 f25f2de8b3 fix: Use direct shortcut URLs in references instead of modal
## Problem
- References section PDF link opened modal dialog
- Modal doesn't work in PDF or non-browser environments
- Link was not usable when CV exported as PDF

## Solution
- Changed from `onclick="openPdfModal()"` to direct shortcut URL
- Spanish CV: `/cv-jamr-2025-es.pdf`
- English CV: `/cv-jamr-2025-en.pdf`
- Language-aware: Uses {{$.Lang}} template variable
- Year-aware: Uses {{$.CurrentYear}} for auto-updates

## Benefits
-  Works in any environment (PDF, browser, external links)
-  Direct download without JavaScript/modal
-  Shareable, permanent URLs
-  Auto-updates yearly with no code changes

Technical details:
- File: templates/partials/sections/references.html:16
- Uses shortcut URLs created in previous feature
- Maintains target="_blank" and security attributes
2025-11-20 12:40:25 +00:00
juanatsap f7cda5dba3 refactor: Modularize CSS and fix theme-aware text colors
CSS Restructuring:
- Reorganize monolithic main.css into modular architecture
- Create foundation/ (reset, variables, typography, themes)
- Create layout/ (container, page, grid, paper)
- Create components/ (8 component files)
- Create interactive/ (toggles, remaining for future split)
- Create effects/ (skeleton loading)
- Create contexts/ (print styles)

Theme Support Fixes:
- Replace all hardcoded text colors with CSS variables
- Fix .section-title: rgb(51,51,51) → var(--text-primary)
- Fix .cv-name, .intro-text: hardcoded → theme-aware
- Fix .experience-period, .duration-text: #555/#aaa → variables
- Fix course/project/experience text colors
- Support proper light/dark theme text contrast

Icon & Layout Fixes:
- Standardize all icon sizes to 80×80px
- Change all icon backgrounds to transparent
- Fix award section layout (missing flexbox)
- Update HTML templates (experience.html, awards.html) to width='80'
- Fix default icon sizing conflicts

View Switcher Fix:
- Fix toggleTheme() to target .cv-container instead of body
- Ensures clean/default theme toggle works correctly

Files: 40+ CSS files modularized, 3 templates updated, 7 tests added
2025-11-19 14:31:17 +00:00
juanatsap 2ca13a218e feat: Extend skeleton loaders to all 13 CV sections with structural fidelity
Implemented comprehensive skeleton loaders for the entire CV curriculum,
providing smooth loading animations during language transitions across
all sections.

**Sections Implemented (13 total):**
- Header (title-badges + personal info)
- Education
- Skills Summary
- Experience (with company logos, descriptions, responsibilities)
- Awards (with logos, issuers, descriptions)
- Projects (with icons, descriptions, tech stacks)
- Courses (with icons, institutions, dates)
- Languages
- References
- Other Information
- Skills Sidebars (left and right)
- Footer

**Key Features:**
- Structural fidelity: Skeletons mirror exact HTML structure of actual content
- Each section has realistic placeholders (e.g., 3 experience items, 2 projects)
- Smooth CSS transitions with shimmer animations
- Zero layout shift
- Component-level architecture allows independent loading states

**Technical Implementation:**
- Modified all section templates in templates/partials/sections/
- Added .component-wrapper with .actual-content + .skeleton-content structure
- Extended skeleton.css with structural skeleton classes
- JavaScript event handlers in main.js already handle all sections via CSS cascade

**Testing:**
- Manual Playwright test: 13/13 component wrappers verified
- Automated test: 7/7 tests passing
- All skeleton loaders show during language switches
- No stuck loading states

**Documentation:**
- Updated tests/TEST-SUMMARY.md with all 13 sections
- Updated doc/2-MODERN-WEB-TECHNIQUES.md with comprehensive details
- Added structural fidelity table showing skeleton elements for each section

Files modified: 14 templates + CSS + 2 docs
2025-11-18 20:18:28 +00:00
juanatsap 481003fcf8 refactor: update skeleton header to pixel-perfect match actual layout
Updates skeleton header to exactly match the actual CV header layout with
photo absolutely positioned on the right side.

**Layout Changes:**
- Photo: 150x200px positioned absolutely (top: 15px, right: 15px)
- Name: 40px height (h1 size)
- Subtitle: 24px height (larger)
- Intro text: 90px height (3-4 lines)
- Header has padding-right: 185px to accommodate photo
- Removed flex layout, using absolute positioning like actual

**Visual Improvements:**
- Photo border: 3px solid #e8e8e8 (matches actual white border)
- No border-radius on photo (matches actual)
- Larger text blocks for better visual match
- Proper spacing between elements

**Tests:**
- test-skeleton-verify.mjs:  All 4 language switches pass
- Skeleton displays correctly on every transition
2025-11-18 13:03:15 +00:00
juanatsap 534e0f16e5 feat: implement component-level skeleton loaders for language transitions
Implemented dual-state skeleton system as specified in prompt:
- Each component has actual-content + skeleton-content structure
- CSS toggles visibility via .loading class on component-wrapper
- Individual skeleton boxes (name, photo, intro, etc.) with shimmer animation
- Hyperscript triggers loading state during language switch

Changes:
- skeleton.css: Complete component-level skeleton CSS system with shimmer
- language-selector.html: Hyperscript to add/remove .loading class
- header.html: Dual-state structure with skeleton placeholders

Behavior:
- Click language button → .loading class added to components
- Actual content fades out (opacity → 0) in 250ms
- Skeleton boxes appear and shimmer
- After HTMX swap + 100ms delay → .loading class removed
- New content fades in (opacity → 1) in 250ms

Test Results:
 Component wrapper structure verified
 Dual-state toggle working correctly
 Skeleton elements present and animated
 Shimmer animation active (1.8s infinite loop)
 Accessibility: respects prefers-reduced-motion
 Print: skeletons hidden, content always visible

Next: Add skeleton structure to remaining components (experience, education, skills, projects)
2025-11-18 11:32:12 +00:00
juanatsap d36b67d1f1 templating phase i 2025-11-12 18:26:18 +00:00