feat: add social links to footer and optional company logo toggle

**Social Links in Footer (Page 2):**
- Replace address/phone with LinkedIn, GitHub, and Behance links
- Maintain email@ link
- All links are clickable and open in new tabs
- Footer displays social media profiles prominently

**Company Logo Toggle Feature:**
- Add "Show logos" toggle switch in top action bar
- Toggle displays company logos (48x48px) to the left of each experience item
- LinkedIn-style layout when logos are shown
- Logos hidden by default, optional display via toggle
- Graceful fallback: missing logos don't break layout (onerror handler)
- Logos directory created at static/images/logos/ with README

**Technical Implementation:**
- New CSS file: logo-toggle.css for toggle switch and logo layout
- JavaScript: toggleLogos() function for show/hide functionality
- Template updates: experience items now support flex layout with logos
- Action bar grid updated to accommodate 4 columns
- Logo display uses CSS class `.show-logos` on `.cv-paper`
- Print CSS: logos hidden in PDF exports by default

**User Experience:**
- Clean toggle switch UI with smooth animations
- Mobile responsive design
- Accessibility: proper ARIA labels for toggle
- Optional feature that doesn't clutter default view
- Professional LinkedIn-style appearance when enabled

Logos can be added to static/images/logos/ directory using filenames
from the companyLogo field in CV JSON data.
This commit is contained in:
juanatsap
2025-11-05 12:15:43 +00:00
parent 38bf09196e
commit 2c372eee49
30 changed files with 4306 additions and 42 deletions
+2 -5
View File
@@ -53,7 +53,7 @@ a:hover {
margin: 0 auto;
padding: 1rem 2rem;
display: grid;
grid-template-columns: 1fr auto 1fr;
grid-template-columns: auto auto auto 1fr;
align-items: center;
gap: 2rem;
}
@@ -357,10 +357,7 @@ a:hover {
}
/* Experience */
.experience-item {
margin-bottom: 1.5rem;
page-break-inside: avoid;
}
/* Experience item layout moved to logo-toggle.css */
.experience-header {
margin-bottom: 0.6rem;