diff --git a/static/css/01-foundation/_variables.css b/static/css/01-foundation/_variables.css
index 5a82cd4..90c0041 100644
--- a/static/css/01-foundation/_variables.css
+++ b/static/css/01-foundation/_variables.css
@@ -13,7 +13,7 @@
--accent-blue: #0066cc;
--border-gray: #dddddd;
- /* Theme System - These get overridden by color-theme.css */
+ /* Theme System - These get overridden by _themes.css */
/* Page Background */
--page-bg: #d6d6d6;
diff --git a/static/css/03-components/_cv-section.css b/static/css/03-components/_cv-section.css
index d646e66..525a68b 100644
--- a/static/css/03-components/_cv-section.css
+++ b/static/css/03-components/_cv-section.css
@@ -95,7 +95,7 @@
}
/* Experience */
-/* Experience item layout moved to logo-toggle.css */
+/* Experience item layout moved to _toggles.css */
.experience-header {
margin-bottom: 0.6rem;
diff --git a/static/css/03-components/_experience.css b/static/css/03-components/_experience.css
index 26a0b39..1d89f5c 100644
--- a/static/css/03-components/_experience.css
+++ b/static/css/03-components/_experience.css
@@ -1,5 +1,5 @@
/* Experience */
-/* Experience item layout moved to logo-toggle.css */
+/* Experience item layout moved to _toggles.css */
.experience-header {
margin-bottom: 0.6rem;
diff --git a/static/css/04-interactive/_scroll-behavior.css b/static/css/04-interactive/_scroll-behavior.css
index 8aab9a3..843569a 100644
--- a/static/css/04-interactive/_scroll-behavior.css
+++ b/static/css/04-interactive/_scroll-behavior.css
@@ -190,7 +190,7 @@
left: calc(50% - 55px) !important; /* Third button */
}
- /* Theme switcher button - fourth position (defined in color-theme.css) */
+ /* Theme switcher button - fourth position (defined in _themes.css) */
/* left: calc(50% + 5px) !important; */
.info-button {
@@ -219,7 +219,7 @@
left: calc(50% - 85px) !important; /* Second button */
}
- /* Theme switcher on mobile - third position (see color-theme.css for override) */
+ /* Theme switcher on mobile - third position (see _themes.css for override) */
.is-mobile-device .info-button {
left: calc(50% + 35px) !important; /* Fourth button */
diff --git a/static/css/04-interactive/_toggles.css b/static/css/04-interactive/_toggles.css
index c20f134..8ff79c4 100644
--- a/static/css/04-interactive/_toggles.css
+++ b/static/css/04-interactive/_toggles.css
@@ -227,7 +227,7 @@
height: auto;
}
-/* Company icons visible in print - styling controlled by print.css */
+/* Company icons visible in print - styling controlled by _print.css */
/* Mobile responsiveness */
@media (max-width: 768px) {
diff --git a/static/css/08-contexts/_print.css b/static/css/08-contexts/_print.css
deleted file mode 100644
index f8ce3e9..0000000
--- a/static/css/08-contexts/_print.css
+++ /dev/null
@@ -1,722 +0,0 @@
-/* Print Styles - A4 Optimized - Consolidated & Fixed */
-
-@media print {
- /* ===================================
- CRITICAL: FORCE LIGHT MODE FOR ALL PDFs
- =================================== */
- /* PDF generation MUST ALWAYS use light mode colors */
- /* This overrides ANY color theme (dark/auto/light) */
- *,
- :root,
- [data-color-theme="dark"],
- [data-color-theme="auto"],
- [data-color-theme="light"],
- html,
- body {
- /* Page Background - Softer version for light mode */
- --page-bg: #b8bbbe !important;
-
- /* Paper/Card Backgrounds */
- --paper-bg: #ffffff !important;
- --paper-secondary-bg: #f5f5f5 !important;
-
- /* Text Colors - Dark text for light background */
- --text-primary: #1a1a1a !important;
- --text-secondary: #333333 !important;
- --text-muted: #666666 !important;
- --text-light: #999999 !important;
-
- /* Action Bar & Navigation */
- --action-bar-bg: #2b2b2b !important;
- --action-bar-text: #ffffff !important;
- --action-bar-text-muted: rgba(255, 255, 255, 0.85) !important;
-
- /* Borders & Dividers */
- --border-color: #333333 !important;
- --border-light: #e0e0e0 !important;
- --icon-border: #ddd !important;
- --item-separator: rgba(0, 0, 0, 0.1) !important;
-
- /* Shadows */
- --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
- --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
- --shadow-lg: 2px 2px 9px rgba(0, 0, 0, 0.5) !important;
-
- /* Interactive Elements */
- --button-bg: transparent !important;
- --button-bg-hover: rgba(0, 0, 0, 0.05) !important;
- --button-bg-active: rgba(0, 0, 0, 0.1) !important;
-
- /* Accent Colors */
- --accent-blue: #0066cc !important;
- --accent-green: #27ae60 !important;
-
- /* Sidebar (for non-clean theme) */
- --sidebar-bg: #d1d4d2 !important;
-
- /* Legacy CV content variables - light mode */
- --text-dark: #1a1a1a !important;
- --text-gray: #333333 !important;
- }
-
- /* ===================================
- CRITICAL: Print Color Accuracy
- =================================== */
- * {
- -webkit-print-color-adjust: exact !important;
- print-color-adjust: exact !important;
- color-adjust: exact !important;
- }
-
- /* ===================================
- PAGE SETUP - A4 with Minimal Margins
- =================================== */
- @page {
- size: A4 portrait;
- margin: 8mm; /* Minimal printer margins */
- }
-
- body {
- background: white !important;
- margin: 0 !important;
- padding: 0 !important;
- }
-
- /* ===================================
- HIDE NON-PRINT ELEMENTS
- =================================== */
- /* IMPORTANT: print.css is ONLY for clean/print-friendly version */
- /* Extended version uses screen rendering, NOT print CSS */
- .no-print,
- .action-bar,
- .navigation-menu,
- .hamburger-btn,
- footer,
- .back-to-top,
- .info-button,
- .info-modal,
- .error-toast,
- .cv-sidebar,
- .cv-sidebar-left,
- .cv-sidebar-right,
- .cv-title-badges-header,
- .cv-footer {
- display: none !important;
- }
-
- /* ===================================
- SHOW ALL ICONS, ICONS, AND BADGES - Print Default
- =================================== */
-
- /* Section title icons - smaller for print */
- .section-icon {
- width: 16px !important;
- height: 16px !important;
- vertical-align: middle !important;
- margin-right: 4px !important;
- }
-
- /* Company/Project/Course icons - compact for print */
- .company-logo,
- .project-icon,
- .course-icon,
- .award-logo {
- width: 40px !important;
- height: 40px !important;
- flex-shrink: 0 !important;
- }
-
- .company-logo img,
- .project-icon img,
- .course-icon img,
- .award-logo img {
- width: 40px !important;
- height: 40px !important;
- object-fit: contain !important;
- }
-
- /* Default fallback icons - show at print size */
- .default-company-icon,
- .default-project-icon,
- .default-course-icon,
- .default-award-icon {
- width: 40px !important;
- height: 40px !important;
- }
-
- /* Badges - keep visible for print */
- .current-badge,
- .live-badge,
- .expired-badge,
- .maintained-badge {
- font-size: 7pt !important;
- padding: 1px 4px !important;
- }
-
- .live-badge iconify-icon {
- width: 10px !important;
- height: 10px !important;
- }
-
- /* ===================================
- REMOVE ALL SHADOWS & BORDERS (Nuclear Option)
- =================================== */
- *,
- *::before,
- *::after {
- box-shadow: none !important;
- text-shadow: none !important;
- }
-
- /* ===================================
- CV CONTAINER - Full Page Width
- =================================== */
- .cv-container {
- width: 100%;
- max-width: 100%;
- margin: 0;
- padding: 0;
- gap: 0;
- }
-
- .cv-container.theme-clean {
- padding: 0;
- }
-
- /* ===================================
- CV PAPER - Reduced Padding (20mm → 12mm)
- =================================== */
- .cv-paper {
- width: 100%;
- min-height: auto !important;
- background: white !important;
- padding: 12mm !important; /* Reduced from 20mm */
- box-shadow: none !important;
- border: none !important;
- margin: 0 !important;
- page-break-after: auto;
- transform: none !important;
- }
-
- /* ===================================
- CV PAGE - Remove All Decorations & Page Breaks
- =================================== */
- .cv-page,
- .theme-clean .cv-page {
- box-shadow: none !important;
- border: none !important;
- background: white !important;
- margin: 0 !important;
- padding: 0 !important;
- transform: scale(1) !important;
- max-width: 100% !important;
- page-break-after: auto !important; /* Let content flow naturally */
- page-break-inside: auto !important; /* Allow breaking inside */
- }
-
- .cv-page.page-2 {
- page-break-after: auto !important;
- }
-
- /* ===================================
- PAGE CONTENT GRID - Allow Natural Flow
- =================================== */
- .page-content {
- page-break-inside: auto !important; /* Allow content to break naturally */
- display: block !important; /* Remove grid for print */
- }
-
- /* ===================================
- PAGE BREAKS - Optimized for Content Flow
- =================================== */
- .page-break {
- page-break-after: auto !important; /* Remove forced page breaks */
- break-after: auto !important;
- }
-
- /* Sections CAN break across pages - flow naturally */
- .cv-section {
- page-break-inside: auto !important;
- break-inside: auto !important;
- page-break-before: auto !important; /* No forced breaks before sections */
- page-break-after: auto !important; /* No forced breaks after sections */
- }
-
- /* Keep individual items together */
- .avoid-break,
- .experience-item,
- .project-item,
- .course-item,
- .award-item {
- page-break-inside: avoid !important;
- break-inside: avoid !important;
- }
-
- /* Experience section should flow into Awards - no page break */
- #experience {
- page-break-after: auto !important;
- }
-
- /* ===================================
- HEADER - Reduced Spacing with Desktop Layout
- =================================== */
- .cv-header {
- page-break-after: avoid;
- margin-bottom: 8mm !important; /* Reduced from 15mm */
- }
-
- /* Override mobile layout - use positioned layout for print */
- .cv-header-content {
- display: block !important; /* Use block instead of flex */
- position: relative !important;
- }
-
- .cv-header-left {
- display: block !important;
- position: static !important;
- padding-right: 130px !important; /* Make room for bigger photo on the right */
- text-align: right !important; /* Right-align name and years */
- }
-
- .cv-name {
- font-size: 20pt;
- margin-bottom: 4pt;
- text-align: right !important; /* Override mobile center alignment */
- }
-
- .cv-title {
- font-size: 12pt;
- }
-
- .years-experience,
- .cv-experience-years {
- font-size: 10pt;
- text-align: right !important; /* Override mobile center alignment */
- }
-
- /* ===================================
- PHOTO - FIXED ASPECT RATIO (3:4 Portrait) - RIGHT SIDE
- =================================== */
- .cv-photo {
- width: 110px !important; /* Increased from 90px */
- height: 147px !important; /* Maintains 3:4 ratio (110 * 1.33) */
- object-fit: contain !important; /* Show full photo, no crop */
- border: none !important; /* Remove border */
- box-shadow: none !important;
- page-break-inside: avoid;
- /* Position photo to the right */
- position: absolute !important;
- top: 0 !important;
- right: 0 !important;
- margin: 10px 0 0 0!important;
- max-width: none !important;
- }
-
- .cv-photo img {
- width: 100%;
- height: 100%;
- object-fit: contain !important;
- }
-
- /* Intro text should be justified and below name/years */
- .intro-text {
- font-size: 9pt !important;
- line-height: 1.5 !important;
- text-align: justify !important; /* Justified text for print */
- margin-top: 3mm !important;
- width: 100% !important;
- padding-right: 0 !important; /* Intro text extends full width below photo */
- text-align-last: left !important; /* Last line left-aligned */
- }
-
- /* ===================================
- SECTIONS - REDUCED SPACING (48px → 19px)
- =================================== */
- .cv-section {
- margin-bottom: 5mm !important; /* ~19px, down from 48px */
- margin-top: 7mm !important; /* More breathing space between sections */
- }
-
- .section-title {
- font-size: 12pt !important; /* Equalized size for all titles */
- font-weight: 600 !important;
- margin-top: 0 !important;
- margin-bottom: 1mm !important; /* Minimal bottom margin - matches Training/Skills */
- page-break-after: avoid;
- border-bottom: 0.5pt solid #dddddd !important;
- padding-bottom: 2mm !important;
- padding-top: 2mm !important; /* Breathing space above */
- line-height: 1.3 !important; /* Consistent line height */
- }
-
- /* Languages and References need more breathing space below title */
- #languages .section-title,
- #references .section-title {
- margin-bottom: 3mm !important; /* More space for lists */
- }
-
- .summary-text {
- font-size: 9pt;
- line-height: 1.5;
- }
-
- /* ===================================
- EXPERIENCE - REDUCED SPACING (60px → 26px)
- =================================== */
- .experience-item {
- display: flex !important; /* Show icons side-by-side with content */
- gap: 12px !important;
- margin-bottom: 4mm !important; /* ~15px, down from 40px */
- padding-bottom: 3mm !important; /* ~11px, down from 32px */
- border-bottom: 0.5pt solid #dddddd !important;
- }
-
- .experience-item:last-child {
- border-bottom: none !important;
- margin-bottom: 0 !important; /* Remove bottom margin from last experience */
- padding-bottom: 2mm !important; /* Minimal padding */
- }
-
- .position {
- font-size: 10pt;
- margin-bottom: 2pt;
- }
-
- .company,
- .company-link {
- font-size: 9pt;
- }
-
- .experience-period,
- .experience-location,
- .experience-duration {
- font-size: 8pt;
- }
-
- .short-desc {
- font-size: 9pt !important;
- line-height: 1.4 !important;
- margin-top: 1mm !important;
- margin-bottom: 1mm !important;
- }
-
- .responsibilities {
- margin-top: 2mm;
- }
-
- .responsibilities li {
- font-size: 9pt !important;
- line-height: 1.4 !important;
- margin-bottom: 1mm;
- }
-
- /* Ensure all experience content is properly sized */
- .experience-item p,
- .experience-item div {
- font-size: 9pt !important;
- line-height: 1.4 !important;
- }
-
- /* Logos are visible at 40x40 for compact print layout */
-
- /* ===================================
- PROJECTS & COURSES
- =================================== */
- .project-item,
- .course-item,
- .award-item {
- display: flex !important; /* Show icons side-by-side with content */
- gap: 12px !important;
- margin-bottom: 4mm !important;
- padding-bottom: 3mm !important;
- border-bottom: 0.5pt solid #dddddd !important;
- }
-
- .project-item:last-child,
- .course-item:last-child,
- .award-item:last-child {
- border-bottom: none !important; /* Remove border from last item */
- }
-
- /* Projects footer - "See all projects" link */
- .projects-footer {
- margin-top: 4mm !important;
- padding-top: 3mm !important;
- text-align: center !important;
- font-size: 9pt !important;
- border-top: 0.5pt solid #dddddd !important; /* Single separator */
- }
-
- .projects-footer p {
- margin: 0 !important;
- padding: 2mm 0 !important;
- }
-
- .projects-footer a {
- color: #0066cc !important;
- text-decoration: none !important;
- font-weight: 600 !important;
- }
-
- /* Logos visible at 40x40 - default icons remain hidden */
-
- /* Consistent item titles */
- .project-title,
- .course-title,
- .experience-title,
- .award-title {
- font-size: 10pt !important;
- font-weight: 600 !important;
- line-height: 1.3 !important;
- display: block !important;
- margin-bottom: 1mm !important;
- }
-
- .project-desc,
- .course-desc,
- .award-desc {
- font-size: 9pt !important;
- line-height: 1.4 !important;
- margin-top: 1mm !important;
- }
-
- /* Course/Project headers - match Experience spacing */
- .course-header,
- .project-header {
- margin-bottom: 0.5mm !important; /* Minimal spacing */
- }
-
- .course-item small,
- .project-item small {
- font-size: 8pt !important;
- color: #666 !important;
- display: inline !important; /* Inline like experience dates */
- margin-top: 0 !important;
- margin-left: 0.5mm !important;
- }
-
- /* Course metadata (date, location) - match experience style */
- .course-period,
- .course-location,
- .course-separator {
- font-size: 8pt !important;
- color: #666 !important;
- display: inline !important;
- }
-
- /* Ensure all text and paragraphs in course items are properly sized */
- .course-item p,
- .course-item div,
- .project-item p,
- .project-item div {
- font-size: 9pt !important;
- line-height: 1.4 !important;
- margin-top: 1mm !important;
- margin-bottom: 1mm !important;
- }
-
- .project-technologies,
- .technologies {
- font-size: 8pt;
- }
-
- /* ===================================
- EDUCATION & SKILLS
- =================================== */
- .degree,
- .skill-title,
- .project-name {
- font-size: 9.5pt;
- }
-
- .institution,
- .skill-list,
- .project-description {
- font-size: 8.5pt;
- }
-
- .education-item {
- margin-bottom: 3mm;
- font-size: 9pt !important; /* Match body text size (equivalent to 0.95rem) */
- line-height: 1.5 !important;
- }
-
- .education-item strong {
- font-size: 9pt !important; /* Ensure degree title matches body text */
- font-weight: 600 !important;
- }
-
- /* ===================================
- CERTIFICATIONS & AWARDS
- =================================== */
- .cert-item,
- .award-item {
- margin-bottom: 3mm !important;
- padding-bottom: 2mm !important;
- }
-
- .award-item strong,
- .cert-item strong {
- font-size: 10pt !important;
- font-weight: 600 !important;
- display: block !important;
- margin-bottom: 1mm !important;
- }
-
- .award-item small,
- .cert-item small {
- font-size: 8pt !important;
- color: #666 !important;
- }
-
- /* Ensure all award/cert content is properly sized */
- .award-item p,
- .award-item div,
- .cert-item p,
- .cert-item div {
- font-size: 9pt !important;
- line-height: 1.4 !important;
- margin-top: 1mm !important;
- margin-bottom: 1mm !important;
- }
-
- /* ===================================
- LANGUAGES
- =================================== */
- .languages-list {
- display: grid;
- grid-template-columns: repeat(2, 1fr);
- gap: 2mm;
- }
-
- .language-item {
- font-size: 9pt !important;
- line-height: 1.3 !important;
- margin-bottom: 1mm !important;
- }
-
- .language-item small {
- font-size: 8pt;
- }
-
- /* ===================================
- REFERENCES & OTHER
- =================================== */
- .reference-item,
- .other-content {
- font-size: 9pt !important;
- line-height: 1.3 !important;
- margin-bottom: 1mm !important;
- }
-
- /* ===================================
- CONTACT INFO
- =================================== */
- .cv-contact {
- font-size: 8.5pt;
- grid-template-columns: repeat(2, 1fr);
- gap: 2mm;
- }
-
- /* ===================================
- CLEAN THEME - Full Width Main Content
- =================================== */
- .theme-clean .page-content,
- .page-content {
- display: block !important;
- grid-template-columns: 1fr !important;
- }
-
- .theme-clean .cv-main,
- .cv-main {
- grid-column: 1 !important;
- padding: 0 !important;
- max-width: 100% !important;
- }
-
- /* ===================================
- LINKS - Print Styling
- =================================== */
- a {
- color: #0066cc;
- text-decoration: none;
- font-weight: 600;
- }
-
- /* ===================================
- CV LENGTH TOGGLE - Force Short Version for Print Friendly
- =================================== */
- /* Show short descriptions */
- .cv-short .short-desc {
- display: block !important;
- font-size: 9pt;
- line-height: 1.5;
- margin-top: 2mm;
- }
-
- /* Hide long-only content (detailed descriptions) */
- .cv-short .long-only,
- .long-only {
- display: none !important;
- }
-
- /* Hide responsibilities (detailed bullet points) */
- .cv-short .responsibilities,
- .responsibilities {
- display: none !important;
- }
-
- /* Long version rules (should not apply, but just in case) */
- .cv-long .short-desc {
- display: none !important;
- }
-
- .cv-long .long-only {
- display: block !important;
- }
-
- .cv-long .responsibilities {
- display: block !important;
- }
-
- /* ===================================
- THEME CLEAN - Minimal Print Mode
- =================================== */
- /* All sidebars, headers, footers already hidden above */
- /* Main content takes full width */
-
- /* ===================================
- COLLAPSIBLE SECTIONS - Force Open
- =================================== */
- details {
- display: block !important;
- }
-
- summary {
- display: block !important;
- list-style: none !important;
- }
-
- summary::after,
- summary .section-title::after,
- .sidebar-section summary::after {
- display: none !important; /* Hide collapse indicators */
- }
-
- details > *:not(summary) {
- display: block !important;
- opacity: 1 !important;
- max-height: none !important;
- transform: none !important;
- }
-
- /* ===================================
- ENSURE PROPER TEXT RENDERING
- =================================== */
- body,
- .cv-paper {
- font-smoothing: antialiased;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- }
-}
diff --git a/static/css/color-theme.css b/static/css/color-theme.css
deleted file mode 100644
index 1c85959..0000000
--- a/static/css/color-theme.css
+++ /dev/null
@@ -1,333 +0,0 @@
-/* ==============================================================================
- COLOR THEME SYSTEM
- ============================================================================== */
-/*
- IMPORTANT: This is the COLOR theme system (light/dark/auto)
- This is SEPARATE from the LAYOUT theme (.theme-clean)
-
- - COLOR theme: Controls backgrounds, text colors, shadows
- - LAYOUT theme (.theme-clean): Controls sidebars, layout structure
-
- Both systems work independently and can be combined.
-*/
-
-/* ==============================================================================
- LIGHT THEME (DEFAULT)
- ============================================================================== */
-:root {
- /* Page Background - Softer version of dark theme */
- --page-bg: #b8bbbe;
-
- /* TEST: Woven Fabric Pattern - Light (TESTING - can be removed later) */
- --page-bg-pattern: repeating-linear-gradient(0deg, rgba(75, 85, 99, 0.08), rgba(75, 85, 99, 0.08) 2px, transparent 2px, transparent 6px),
- repeating-linear-gradient(90deg, rgba(107, 114, 128, 0.06), rgba(107, 114, 128, 0.06) 2px, transparent 2px, transparent 6px),
- repeating-linear-gradient(0deg, rgba(55, 65, 81, 0.04), rgba(55, 65, 81, 0.04) 1px, transparent 1px, transparent 12px),
- repeating-linear-gradient(90deg, rgba(55, 65, 81, 0.04), rgba(55, 65, 81, 0.04) 1px, transparent 1px, transparent 12px);
-
- /* Paper/Card Backgrounds */
- --paper-bg: #ffffff;
- --paper-secondary-bg: #f5f5f5;
-
- /* Text Colors */
- --text-primary: #1a1a1a;
- --text-secondary: #333333;
- --text-muted: #666666;
- --text-light: #999999;
-
- /* Action Bar & Navigation */
- --action-bar-bg: #2b2b2b;
- --action-bar-text: #ffffff;
- --action-bar-text-muted: rgba(255, 255, 255, 0.85);
-
- /* Borders & Dividers */
- --border-color: #ffffff;
- --border-light: #e0e0e0;
-
- /* Shadows */
- --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
- --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.15);
- --shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.06);
-
- /* Interactive Elements */
- --button-bg: transparent;
- --button-bg-hover: rgba(0, 0, 0, 0.05);
- --button-bg-active: rgba(0, 0, 0, 0.1);
-
- /* Accent Colors (unchanged in dark mode) */
- --accent-blue: #0066cc;
- --accent-green: #27ae60;
-
- /* Sidebar (for non-clean theme) */
- --sidebar-bg: #d1d4d2;
-
- /* Legacy CV content variables - theme-aware overrides */
- --text-dark: #1a1a1a; /* Dark text for light background */
- --text-gray: #333333; /* Secondary text for light background */
-}
-
-/* ==============================================================================
- DARK THEME
- ============================================================================== */
-[data-color-theme="dark"] {
- /* Page Background - Original background */
- --page-bg: rgb(82, 86, 89);
-
- /* TEST: Diagonal Grid with Green Glow (TESTING - can be removed later) */
- --page-bg-pattern: repeating-linear-gradient(45deg, rgba(0, 255, 128, 0.1) 0, rgba(0, 255, 128, 0.1) 1px, transparent 1px, transparent 20px),
- repeating-linear-gradient(-45deg, rgba(0, 255, 128, 0.1) 0, rgba(0, 255, 128, 0.1) 1px, transparent 1px, transparent 20px);
-
- /* Paper/Card Backgrounds */
- --paper-bg: #1a1a1a;
- --paper-secondary-bg: #2a2a2a;
-
- /* Text Colors */
- --text-primary: #e0e0e0;
- --text-secondary: #d0d0d0;
- --text-muted: #b0b0b0;
- --text-light: #808080;
-
- /* Action Bar & Navigation */
- --action-bar-bg: #1a1a1a;
- --action-bar-text: #e0e0e0;
- --action-bar-text-muted: rgba(224, 224, 224, 0.85);
-
- /* Borders & Dividers */
- --border-color: #404040;
- --border-light: #333333;
-
- /* Shadows */
- --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
- --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.4);
- --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.6);
-
- /* Interactive Elements */
- --button-bg: transparent;
- --button-bg-hover: rgba(255, 255, 255, 0.05);
- --button-bg-active: rgba(255, 255, 255, 0.1);
-
- /* Accent Colors - slightly brighter in dark mode */
- --accent-blue: #3399ff;
- --accent-green: #2ecc71;
-
- /* Sidebar (for non-clean theme) */
- --sidebar-bg: #2a2a2a;
-
- /* Legacy CV content variables - theme-aware overrides */
- --text-dark: #e0e0e0; /* Light text for dark background */
- --text-gray: #d0d0d0; /* Secondary text for dark background */
-}
-
-/* ==============================================================================
- AUTO THEME - Follows System Preference
- ============================================================================== */
-@media (prefers-color-scheme: dark) {
- [data-color-theme="auto"] {
- /* Page Background - Original background */
- --page-bg: rgb(82, 86, 89);
-
- /* TEST: Diagonal Grid with Green Glow (TESTING - can be removed later) */
- --page-bg-pattern: repeating-linear-gradient(45deg, rgba(0, 255, 128, 0.1) 0, rgba(0, 255, 128, 0.1) 1px, transparent 1px, transparent 20px),
- repeating-linear-gradient(-45deg, rgba(0, 255, 128, 0.1) 0, rgba(0, 255, 128, 0.1) 1px, transparent 1px, transparent 20px);
-
- /* Paper/Card Backgrounds */
- --paper-bg: #1a1a1a;
- --paper-secondary-bg: #2a2a2a;
-
- /* Text Colors */
- --text-primary: #e0e0e0;
- --text-secondary: #d0d0d0;
- --text-muted: #b0b0b0;
- --text-light: #808080;
-
- /* Action Bar & Navigation */
- --action-bar-bg: #1a1a1a;
- --action-bar-text: #e0e0e0;
- --action-bar-text-muted: rgba(224, 224, 224, 0.85);
-
- /* Borders & Dividers */
- --border-color: #404040;
- --border-light: #333333;
-
- /* Shadows */
- --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
- --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.4);
- --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.6);
-
- /* Interactive Elements */
- --button-bg: transparent;
- --button-bg-hover: rgba(255, 255, 255, 0.05);
- --button-bg-active: rgba(255, 255, 255, 0.1);
-
- /* Accent Colors - slightly brighter in dark mode */
- --accent-blue: #3399ff;
- --accent-green: #2ecc71;
-
- /* Sidebar (for non-clean theme) */
- --sidebar-bg: #2a2a2a;
-
- /* Legacy CV content variables - theme-aware overrides */
- --text-dark: #e0e0e0; /* Light text for dark background */
- --text-gray: #d0d0d0; /* Secondary text for dark background */
- }
-}
-
-/* ==============================================================================
- THEME SWITCHER BUTTON STYLES - Dynamic colors based on theme mode
- ============================================================================== */
-.color-theme-switcher {
- position: fixed;
- bottom: 14rem; /* Middle position - between print (18rem) and shortcuts (10rem) */
- left: 2rem;
- width: 50px;
- height: 50px;
- background: var(--black-bar);
- color: white;
- border: none;
- border-radius: 50%;
- cursor: pointer;
- display: flex;
- align-items: center;
- justify-content: center;
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
- transition: all 0.3s ease;
- z-index: 999;
- opacity: 0.6;
-}
-
-/* Dynamic colors ONLY on hover based on active theme mode */
-.color-theme-switcher:hover[data-theme-mode="light"] {
- background: #d4b200 !important; /* Bright sun yellow (gold) for light mode */
-}
-
-.color-theme-switcher:hover[data-theme-mode="dark"] {
- background: #013c77 !important; /* Dark nighty blue for dark mode */
-}
-
-.color-theme-switcher:hover[data-theme-mode="auto"] {
- background: #9b59b6 !important; /* Purple for auto mode (mix of both) */
-}
-
-.color-theme-switcher:hover {
- opacity: 1 !important;
- transform: translateY(-3px);
- box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
-}
-
-/* At-bottom state - dynamic colors based on theme mode (matches hover) */
-.color-theme-switcher.at-bottom[data-theme-mode="light"] {
- opacity: 1;
- background: #d4b200 !important; /* Bright sun yellow (gold) for light mode */
-}
-
-.color-theme-switcher.at-bottom[data-theme-mode="dark"] {
- opacity: 1;
- background: #013c77 !important; /* Dark nighty blue for dark mode */
-}
-
-.color-theme-switcher.at-bottom[data-theme-mode="auto"] {
- opacity: 1;
- background: #9b59b6 !important; /* Purple for auto mode */
-}
-
-.color-theme-switcher iconify-icon {
- color: white !important;
- transition: color 0.3s ease;
-}
-
-.color-theme-switcher:hover iconify-icon {
- color: white !important;
-}
-
-/* Hide the internal theme buttons - we'll cycle through on click */
-.theme-option-btn {
- display: none;
-}
-
-/* ==============================================================================
- ICON COLOR PRESERVATION
- ============================================================================== */
-/* Ensure all iconify icons keep their intended colors across themes */
-
-/* Section icons - keep their brand colors */
-.section-icon iconify-icon,
-.project-icon iconify-icon,
-.course-icon iconify-icon,
-.default-project-icon iconify-icon {
- color: inherit !important;
-}
-
-/* Toggle switch icons - keep their state-specific colors */
-/* Note: Already defined in main.css with !important - just ensure they're not overridden */
-
-/* Hamburger menu and site icons */
-.site-icon iconify-icon,
-.site-icon-mobile iconify-icon {
- color: white !important;
-}
-
-/* CV content icons */
-.cv-paper iconify-icon {
- color: inherit !important;
-}
-
-/* Error toast icon */
-.error-icon iconify-icon {
- color: #dc3545 !important;
-}
-
-/* Mobile adjustments */
-@media (max-width: 900px) {
- .color-theme-switcher {
- position: fixed !important;
- bottom: 1.5rem !important;
- left: auto !important;
- right: auto !important;
- width: 50px !important;
- height: 50px !important;
- opacity: 1 !important; /* Full opacity on mobile (no transparency with blur bar) */
- transform: none !important;
- /* Desktop mobile view: 6 buttons with shortcuts */
- /* Download, Print, Shortcuts, Theme, Info, Back-to-top */
- /* Total width: 6 * 50px + 5 * 10px = 350px */
- left: calc(50% + 5px) !important; /* Fourth button */
- }
-
- /* REAL MOBILE DEVICES: 5 buttons without shortcuts */
- /* Download, Print, Theme, Info, Back-to-top */
- /* Total width: 5 * 50px + 4 * 10px = 290px */
- .is-mobile-device .color-theme-switcher {
- left: calc(50% - 25px) !important; /* Third button (no gap) */
- }
-
- /* Show theme colors at full opacity on mobile (no transparency with blur bar) */
- .color-theme-switcher[data-theme-mode="light"] {
- background: rgba(212, 178, 0, 1) !important; /* Gold - full opacity */
- opacity: 1 !important; /* Override base opacity */
- }
-
- .color-theme-switcher[data-theme-mode="dark"] {
- background: rgba(1, 60, 119, 1) !important; /* Blue - full opacity */
- opacity: 1 !important; /* Override base opacity */
- }
-
- .color-theme-switcher[data-theme-mode="auto"] {
- background: rgba(155, 89, 182, 1) !important; /* Purple - full opacity */
- opacity: 1 !important; /* Override base opacity */
- }
-
- /* Full color opacity on hover */
- .color-theme-switcher:hover[data-theme-mode="light"] {
- background: rgba(212, 178, 0, 1) !important; /* Full gold opacity */
- transform: translateY(-3px) !important;
- }
-
- .color-theme-switcher:hover[data-theme-mode="dark"] {
- background: rgba(1, 60, 119, 1) !important; /* Full blue opacity */
- transform: translateY(-3px) !important;
- }
-
- .color-theme-switcher:hover[data-theme-mode="auto"] {
- background: rgba(155, 89, 182, 1) !important; /* Full purple opacity */
- transform: translateY(-3px) !important;
- }
-}
diff --git a/static/css/logo-toggle.css b/static/css/logo-toggle.css
deleted file mode 100644
index 004cd9f..0000000
--- a/static/css/logo-toggle.css
+++ /dev/null
@@ -1,229 +0,0 @@
-/* Toggle Components - Unified Design */
-.language-toggle,
-.cv-length-toggle,
-.logo-toggle {
- display: inline-flex;
- align-items: center;
- justify-content: center;
- gap: 0.5rem;
- white-space: nowrap;
-}
-
-.toggle-switch {
- display: inline-block;
- cursor: pointer;
- user-select: none;
- position: relative;
-}
-
-.toggle-switch input[type="checkbox"] {
- position: absolute;
- opacity: 0;
- width: 0;
- height: 0;
-}
-
-.toggle-slider {
- position: relative;
- display: inline-block;
- width: 50px;
- height: 26px;
- background-color: #555;
- border-radius: 26px;
- transition: background-color 0.3s ease;
-}
-
-.toggle-slider::after {
- content: '';
- position: absolute;
- width: 20px;
- height: 20px;
- border-radius: 50%;
- background-color: white;
- top: 3px;
- left: 3px;
- transition: transform 0.3s ease;
- box-shadow: 0 2px 4px rgba(0,0,0,0.2);
-}
-
-.toggle-switch input[type="checkbox"]:checked + .toggle-slider {
- background-color: var(--accent-blue);
-}
-
-.toggle-switch input[type="checkbox"]:checked + .toggle-slider::after {
- transform: translateX(24px);
-}
-
-.toggle-switch input[type="checkbox"]:focus + .toggle-slider {
- box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.2);
-}
-
-.toggle-label-left,
-.toggle-label-right {
- font-size: 0.8rem;
- font-weight: 500;
- color: #999;
- transition: all 0.3s ease;
- white-space: nowrap;
- display: flex;
- align-items: center;
- justify-content: center;
- height: 28px;
-}
-
-/* Flag icons - special styling */
-.flag-icon {
- border-radius: 50%;
- overflow: hidden;
- display: flex;
- align-items: center;
- justify-content: center;
-}
-
-/* Highlight active label/icon based on parent container state */
-.language-toggle:has(#langToggle:not(:checked)) .toggle-label-left,
-.cv-length-toggle:has(#lengthToggle:not(:checked)) .toggle-label-left,
-.logo-toggle:has(#logoToggle:not(:checked)) .toggle-label-left {
- color: #fff;
- opacity: 1;
-}
-
-.language-toggle:has(#langToggle:checked) .toggle-label-right,
-.cv-length-toggle:has(#lengthToggle:checked) .toggle-label-right,
-.logo-toggle:has(#logoToggle:checked) .toggle-label-right {
- color: #fff;
- opacity: 1;
-}
-
-/* Dim inactive icons */
-.language-toggle:has(#langToggle:not(:checked)) .toggle-label-right,
-.cv-length-toggle:has(#lengthToggle:not(:checked)) .toggle-label-right,
-.logo-toggle:has(#logoToggle:not(:checked)) .toggle-label-right {
- opacity: 0.4;
-}
-
-.language-toggle:has(#langToggle:checked) .toggle-label-left,
-.cv-length-toggle:has(#lengthToggle:checked) .toggle-label-left,
-.logo-toggle:has(#logoToggle:checked) .toggle-label-left {
- opacity: 0.4;
-}
-
-/* Experience Item with Logo Support */
-.experience-item {
- margin-bottom: 2.5rem;
- padding-bottom: 2rem;
- border-bottom: 2px solid var(--icon-border);
- page-break-inside: avoid;
- display: flex;
- gap: 1.2rem;
- position: relative;
- transition: gap 0.3s ease-in-out;
-}
-
-.experience-item:last-child {
- border-bottom: none;
- padding-bottom: 0;
-}
-
-/* Adjust gap when icons are hidden */
-.cv-paper:not(.show-icons) .experience-item {
- gap: 0;
-}
-
-.company-logo {
- display: block;
- flex-shrink: 0;
-}
-
-.company-logo img {
- width: 80px;
- height: 80px;
- object-fit: contain;
- border-radius: 4px;
- border: 1px solid var(--icon-border);
- background: white;
- padding: 10px;
-}
-
-.default-company-icon {
- width: 80px;
- height: 80px;
- display: flex;
- align-items: center;
- justify-content: center;
- border-radius: 4px;
- border: 1px solid var(--icon-border);
- background: #f5f5f5;
- color: #999;
- padding: 10px;
-}
-
-.experience-content {
- flex: 1;
- min-width: 0; /* Prevents flex item from overflowing */
-}
-
-/* Animate icons with fade and scale */
-.company-logo,
-.award-logo {
- overflow: hidden;
- transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, width 0.3s ease-in-out, height 0.3s ease-in-out, margin 0.3s ease-in-out;
- opacity: 1;
- transform: scale(1);
- width: auto;
- height: auto;
-}
-
-/* Hide icons when toggle is OFF - with animation */
-.cv-paper:not(.show-icons) .company-logo,
-.cv-paper:not(.show-icons) .award-logo {
- opacity: 0;
- transform: scale(0.8);
- width: 0;
- height: 0;
- margin: 0;
- padding: 0;
- pointer-events: none;
- overflow: hidden;
-}
-
-/* Show icons when toggle is ON (default) - with animation */
-.show-icons .company-logo,
-.show-icons .award-logo {
- opacity: 1;
- transform: scale(1);
- width: auto;
- height: auto;
-}
-
-/* Company icons visible in print - styling controlled by print.css */
-
-/* Mobile responsiveness */
-@media (max-width: 768px) {
- .logo-toggle {
- order: 3; /* Move to bottom on mobile */
- }
-
- .toggle-label {
- font-size: 0.85rem;
- }
-
- .toggle-slider {
- width: 38px;
- height: 20px;
- }
-
- .toggle-slider::after {
- width: 14px;
- height: 14px;
- }
-
- .toggle-switch input[type="checkbox"]:checked + .toggle-slider::after {
- transform: translateX(18px);
- }
-
- .company-logo img {
- width: 40px;
- height: 40px;
- }
-}
diff --git a/static/css/main.css b/static/css/main.css
index 2e55590..783f5f3 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -41,5 +41,4 @@
/* 06 - Effects */
@import './06-effects/_skeleton.css';
-/* 08 - Contexts */
-@import './08-contexts/_print.css';
+/* NOTE: print.css is loaded separately in HTML with media="print" */
diff --git a/static/css/main.new.css b/static/css/main.new.css
deleted file mode 100644
index 2e1c228..0000000
--- a/static/css/main.new.css
+++ /dev/null
@@ -1,36 +0,0 @@
-/* ============================================================================
- MAIN.CSS - Entry Point (New Modular Structure)
- ============================================================================ */
-
-/* 01 - Foundation */
-@import './01-foundation/_reset.css';
-@import './01-foundation/_variables.css';
-@import './01-foundation/_typography.css';
-@import './01-foundation/_themes.css';
-
-/* 02 - Layout */
-@import './02-layout/_container.css';
-@import './02-layout/_page.css';
-@import './02-layout/_grid.css';
-@import './02-layout/_paper.css';
-
-/* 03 - Components */
-@import './03-components/_action-bar.css';
-@import './03-components/_sidebar.css';
-@import './03-components/_cv-header.css';
-@import './03-components/_cv-section.css';
-@import './03-components/_experience.css';
-@import './03-components/_projects.css';
-@import './03-components/_courses.css';
-@import './03-components/_education.css';
-@import './03-components/_languages.css';
-
-/* 04 - Interactive (includes hamburger, buttons, modals, zoom - TO BE SPLIT LATER) */
-@import './04-interactive/_toggles.css';
-@import './04-interactive/_remaining.css';
-
-/* 06 - Effects */
-@import './06-effects/_skeleton.css';
-
-/* 08 - Contexts */
-@import './08-contexts/_print.css';
diff --git a/static/css/skeleton.css b/static/css/skeleton.css
deleted file mode 100644
index b181f49..0000000
--- a/static/css/skeleton.css
+++ /dev/null
@@ -1,603 +0,0 @@
-/**
- * Component-Level Skeleton Loaders for Language Transitions
- * ==========================================================
- * Each CV component has dual-state structure:
- * - .actual-content (real CV content)
- * - .skeleton-content (gray pulsing placeholders)
- *
- * Loading state controlled via .loading class on component wrapper
- */
-
-/* ========================================================================
- BASE SKELETON STYLES
- ======================================================================== */
-
-.skeleton {
- background: linear-gradient(
- 90deg,
- #f0f0f0 0%,
- #e8e8e8 20%,
- #f0f0f0 40%,
- #f0f0f0 100%
- );
- background-size: 200% 100%;
- animation: skeleton-shimmer 1.8s ease-in-out infinite;
- border-radius: 4px;
- will-change: background-position;
-}
-
-@keyframes skeleton-shimmer {
- 0% {
- background-position: 200% 0;
- }
- 100% {
- background-position: -200% 0;
- }
-}
-
-/* ========================================================================
- COMPONENT WRAPPER STATE TOGGLING
- ======================================================================== */
-
-/* Default state: Show actual content, hide skeleton */
-.component-wrapper {
- position: relative;
-}
-
-.component-wrapper .actual-content {
- opacity: 1;
- transition: opacity 250ms ease-out;
-}
-
-.component-wrapper .skeleton-content {
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- opacity: 0;
- pointer-events: none;
- transition: opacity 250ms ease-out;
-}
-
-/* Loading state: Hide actual content, show skeleton */
-/* Triggered by manual .loading class OR when parent page container has .loading */
-.component-wrapper.loading .actual-content,
-.loading .component-wrapper .actual-content {
- opacity: 0;
- pointer-events: none;
-}
-
-.component-wrapper.loading .skeleton-content,
-.loading .component-wrapper .skeleton-content {
- opacity: 1;
- pointer-events: all;
-}
-
-/* ========================================================================
- SKELETON SHAPE DEFINITIONS
- ======================================================================== */
-
-/* Header Section Skeleton */
-/* Matches actual header layout with photo absolutely positioned on right */
-.skeleton-header {
- position: relative;
- padding-right: 185px; /* Match .cv-header-left padding */
- min-height: 200px; /* Ensure space for photo */
-}
-
-.skeleton-header-text {
- position: relative;
- z-index: 1;
-}
-
-.skeleton-name {
- height: 40px; /* Larger to match h1 */
- width: 75%;
- margin-bottom: 12px;
-}
-
-.skeleton-experience-years {
- height: 24px; /* Larger subtitle */
- width: 55%;
- margin-bottom: 24px;
-}
-
-.skeleton-photo {
- width: 150px; /* Match actual photo */
- height: 200px; /* Match actual photo */
- border-radius: 0; /* No border-radius on actual photo */
- border: 3px solid #e8e8e8; /* Match photo border style */
-
- /* Absolute positioning to match actual layout */
- position: absolute;
- top: 15px;
- right: 15px;
- flex-shrink: 0;
-}
-
-.skeleton-intro {
- height: 90px; /* Taller for 3-4 lines of text */
- width: 100%;
- margin-top: 12px;
-}
-
-/* Section Title Skeleton */
-.skeleton-section-title {
- display: flex;
- align-items: center;
- gap: 8px;
- margin-bottom: 16px;
-}
-
-.skeleton-icon {
- width: 24px;
- height: 24px;
- border-radius: 4px;
- flex-shrink: 0;
-}
-
-.skeleton-title-text {
- height: 24px;
- width: 40%;
-}
-
-/* Skill Item Skeleton (Sidebar) */
-.skeleton-skill-category {
- margin-bottom: 20px;
-}
-
-.skeleton-skill-title {
- height: 20px;
- width: 60%;
- margin-bottom: 12px;
-}
-
-.skeleton-skill-items {
- display: flex;
- flex-direction: column;
- gap: 8px;
-}
-
-.skeleton-skill-item {
- height: 32px;
- width: 100%;
-}
-
-.skeleton-skill-item:nth-child(2) {
- width: 85%;
-}
-
-.skeleton-skill-item:nth-child(3) {
- width: 90%;
-}
-
-.skeleton-skill-item:nth-child(4) {
- width: 75%;
-}
-
-/* Experience Entry Skeleton */
-.skeleton-experience-item {
- display: flex;
- gap: 16px;
- margin-bottom: 24px;
-}
-
-.skeleton-company-logo {
- width: 60px;
- height: 60px;
- border-radius: 8px;
- flex-shrink: 0;
-}
-
-.skeleton-experience-content {
- flex: 1;
- display: flex;
- flex-direction: column;
- gap: 8px;
-}
-
-/* NEW: Structural skeleton lines for experience */
-.skeleton-position-line {
- height: 20px;
- width: 80%;
-}
-
-.skeleton-date-line {
- height: 14px;
- width: 50%;
-}
-
-.skeleton-description-line {
- height: 16px;
- width: 100%;
- margin-top: 4px;
-}
-
-.skeleton-responsibility-line {
- height: 14px;
- width: 100%;
- margin-left: 16px; /* Indent like list items */
-}
-
-/* Legacy styles (keeping for backward compatibility) */
-.skeleton-position {
- height: 20px;
- width: 80%;
-}
-
-.skeleton-company-info {
- height: 16px;
- width: 60%;
-}
-
-.skeleton-description {
- height: 40px;
- width: 100%;
- margin-top: 4px;
-}
-
-.skeleton-description.short {
- width: 85%;
-}
-
-/* Section Skeleton Base */
-.skeleton-section {
- padding: 16px 0;
-}
-
-.skeleton-section-title {
- height: 28px;
- width: 35%;
- margin-bottom: 20px;
-}
-
-/* Education Item Skeleton */
-.skeleton-education-item {
- height: 48px;
- width: 100%;
- margin-bottom: 12px;
-}
-
-.skeleton-education-item:last-child {
- margin-bottom: 0;
-}
-
-/* Skills Summary Skeleton */
-.skeleton-summary-paragraph {
- height: 18px;
- width: 100%;
- margin-bottom: 10px;
-}
-
-.skeleton-summary-paragraph:last-child {
- margin-bottom: 0;
-}
-
-/* Award Item Skeleton */
-.skeleton-award-item {
- display: flex;
- gap: 16px;
- margin-bottom: 24px;
-}
-
-.skeleton-award-logo {
- width: 60px;
- height: 60px;
- border-radius: 8px;
- flex-shrink: 0;
-}
-
-.skeleton-award-content {
- flex: 1;
- display: flex;
- flex-direction: column;
- gap: 8px;
-}
-
-/* NEW: Structural skeleton lines for awards */
-.skeleton-award-title-line {
- height: 20px;
- width: 70%;
-}
-
-.skeleton-award-info-line {
- height: 14px;
- width: 50%;
-}
-
-/* Legacy styles (keeping for backward compatibility) */
-.skeleton-award-title {
- height: 20px;
- width: 70%;
-}
-
-.skeleton-award-info {
- height: 16px;
- width: 50%;
-}
-
-.skeleton-award-description {
- height: 40px;
- width: 100%;
- margin-top: 4px;
-}
-
-/* Project Item Skeleton */
-.skeleton-project-item {
- display: flex;
- gap: 16px;
- margin-bottom: 24px;
-}
-
-.skeleton-project-icon {
- width: 80px;
- height: 80px;
- border-radius: 8px;
- flex-shrink: 0;
-}
-
-.skeleton-project-content {
- flex: 1;
- display: flex;
- flex-direction: column;
- gap: 8px;
-}
-
-/* NEW: Structural skeleton lines for projects */
-.skeleton-project-title-line {
- height: 20px;
- width: 75%;
-}
-
-.skeleton-tech-line {
- height: 14px;
- width: 85%;
- margin-top: 4px;
-}
-
-.skeleton-footer-line {
- height: 16px;
- width: 70%;
- margin-top: 16px;
-}
-
-/* Legacy styles (keeping for backward compatibility) */
-.skeleton-project-title {
- height: 20px;
- width: 75%;
-}
-
-.skeleton-project-info {
- height: 16px;
- width: 55%;
-}
-
-.skeleton-project-description {
- height: 40px;
- width: 100%;
- margin-top: 4px;
-}
-
-.skeleton-project-description.short {
- width: 80%;
-}
-
-/* Course Item Skeleton */
-.skeleton-course-item {
- display: flex;
- gap: 16px;
- margin-bottom: 20px;
-}
-
-.skeleton-course-icon {
- width: 80px;
- height: 80px;
- border-radius: 8px;
- flex-shrink: 0;
-}
-
-.skeleton-course-content {
- flex: 1;
- display: flex;
- flex-direction: column;
- gap: 8px;
-}
-
-/* NEW: Structural skeleton lines for courses */
-.skeleton-course-title-line {
- height: 18px;
- width: 70%;
-}
-
-.skeleton-course-info-line {
- height: 14px;
- width: 60%;
-}
-
-/* Legacy styles (keeping for backward compatibility) */
-.skeleton-course-title {
- height: 18px;
- width: 70%;
-}
-
-.skeleton-course-info {
- height: 16px;
- width: 60%;
-}
-
-/* Language Item Skeleton */
-.skeleton-language-item {
- height: 20px;
- width: 100%;
- margin-bottom: 12px;
-}
-
-.skeleton-language-item:last-child {
- margin-bottom: 0;
-}
-
-/* Reference Item Skeleton */
-.skeleton-reference-item {
- height: 22px;
- width: 100%;
- margin-bottom: 10px;
-}
-
-.skeleton-reference-item:last-child {
- margin-bottom: 0;
-}
-
-/* Other Section Skeleton */
-.skeleton-other-item {
- height: 20px;
- width: 60%;
-}
-
-/* Sidebar Skeleton */
-.skeleton-sidebar {
- padding: 16px 0;
-}
-
-.skeleton-sidebar-header {
- height: 28px;
- width: 80%;
- margin-bottom: 20px;
-}
-
-/* Skill Item Skeleton (Sidebar) - Already defined above but keeping for reference */
-
-/* Footer Skeleton */
-.skeleton-footer {
- display: flex;
- flex-direction: column;
- gap: 12px;
- padding: 16px 0;
-}
-
-.skeleton-footer-item {
- height: 20px;
- width: 100%;
-}
-
-.skeleton-footer-item:nth-child(2) {
- width: 90%;
-}
-
-.skeleton-footer-item:nth-child(3) {
- width: 85%;
-}
-
-.skeleton-footer-item:nth-child(4) {
- width: 80%;
-}
-
-.skeleton-footer-item:nth-child(5) {
- width: 75%;
-}
-
-/* Text Block Skeletons (Generic) */
-.skeleton-text {
- height: 16px;
- margin-bottom: 8px;
-}
-
-.skeleton-text.short {
- width: 60%;
-}
-
-.skeleton-text.medium {
- width: 80%;
-}
-
-.skeleton-text.long {
- width: 95%;
-}
-
-/* ========================================================================
- RESPONSIVE ADJUSTMENTS
- ======================================================================== */
-
-@media (max-width: 768px) {
- .skeleton-header {
- flex-direction: column;
- align-items: center;
- }
-
- .skeleton-header-text {
- text-align: center;
- width: 100%;
- }
-
- .skeleton-name,
- .skeleton-experience-years {
- width: 80%;
- margin-left: auto;
- margin-right: auto;
- }
-
- .skeleton-photo {
- width: 100px;
- height: 100px;
- border-radius: 8px;
- }
-
- .skeleton-experience-item {
- flex-direction: column;
- gap: 12px;
- }
-
- .skeleton-company-logo {
- width: 50px;
- height: 50px;
- }
-}
-
-/* ========================================================================
- ACCESSIBILITY - REDUCED MOTION
- ======================================================================== */
-
-@media (prefers-reduced-motion: reduce) {
- .skeleton {
- animation: none;
- background: #e8e8e8;
- }
-
- .component-wrapper .actual-content,
- .component-wrapper .skeleton-content {
- transition: none;
- }
-}
-
-/* ========================================================================
- PRINT STYLES
- ======================================================================== */
-
-@media print {
- .skeleton-content {
- display: none !important;
- }
-
- .component-wrapper .actual-content {
- opacity: 1 !important;
- }
-}
-
-/* ========================================================================
- PERFORMANCE OPTIMIZATIONS
- ======================================================================== */
-
-/* Force GPU acceleration for skeleton elements */
-.skeleton {
- transform: translateZ(0);
- backface-visibility: hidden;
-}
-
-/* Contain layout/paint/style to prevent reflow */
-.component-wrapper {
- contain: layout style;
-}
-
-/* Optimize skeleton rendering */
-.skeleton-content {
- contain: layout paint;
-}
diff --git a/templates/index.html b/templates/index.html
index 8d53610..da362b4 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -111,6 +111,8 @@
+
+