devfolio-page 0.1.0

package/src/generator/themes/srcl/partials/sections/image.html

@@ -0,0 +1,6 @@
+<figure class="content-section section-image">
+  <img src="{{src}}" alt="{{alt}}" loading="lazy">
+  {{#caption}}
+  <figcaption>{{caption}}</figcaption>
+  {{/caption}}
+</figure>

package/src/generator/themes/srcl/partials/sections/interactive.html

@@ -0,0 +1,8 @@
+<section class="content-section section-interactive">
+  {{#title}}
+  <h3 class="section-subtitle">{{title}}</h3>
+  {{/title}}
+  <div class="interactive-embed">
+    <iframe src="{{url}}" frameborder="0" loading="lazy" allowfullscreen></iframe>
+  </div>
+</section>

package/src/generator/themes/srcl/partials/sections/metrics.html

@@ -0,0 +1,10 @@
+<section class="content-section section-metrics">
+  <div class="metrics-grid">
+    {{#data}}
+    <div class="metric">
+      <span class="metric-value">{{value}}</span>
+      <span class="metric-label">{{label}}</span>
+    </div>
+    {{/data}}
+  </div>
+</section>

package/src/generator/themes/srcl/partials/sections/outcomes.html

@@ -0,0 +1,5 @@
+<section class="content-section section-outcomes">
+  <div class="section-content prose">
+    {{{content_html}}}
+  </div>
+</section>

package/src/generator/themes/srcl/partials/sections/overview.html

@@ -0,0 +1,5 @@
+<section class="content-section section-overview">
+  <div class="section-content prose">
+    {{{content_html}}}
+  </div>
+</section>

package/src/generator/themes/srcl/partials/sections/process.html

@@ -0,0 +1,5 @@
+<section class="content-section section-process">
+  <div class="section-content prose">
+    {{{content_html}}}
+  </div>
+</section>

package/src/generator/themes/srcl/partials/skills.html

@@ -0,0 +1,21 @@
+<section id="skills" class="section">
+  <h2 class="section-title">SKILLS</h2>
+  <div class="srcl-data-table">
+    <table>
+      <thead>
+        <tr>
+          <th>CATEGORY</th>
+          <th>TECHNOLOGIES</th>
+        </tr>
+      </thead>
+      <tbody>
+        {{#skillCategories}}
+        <tr>
+          <td class="category">{{category}}</td>
+          <td class="skills">{{skills}}</td>
+        </tr>
+        {{/skillCategories}}
+      </tbody>
+    </table>
+  </div>
+</section>

package/src/generator/themes/srcl/partials/writing.html

@@ -0,0 +1,14 @@
+<section id="writing" class="section">
+  <h2 class="section-title">WRITING</h2>
+  <ul class="srcl-list writing-list">
+    {{#articles}}
+    <li class="writing-item">
+      <div class="writing-header">
+        <a href="{{url}}" target="_blank" class="writing-title">{{title}}</a>
+        <span class="writing-date">{{date}}</span>
+      </div>
+      {{#description}}<p class="writing-description">{{description}}</p>{{/description}}
+    </li>
+    {{/articles}}
+  </ul>
+</section>

package/src/generator/themes/srcl/script.js

@@ -0,0 +1,354 @@
+/**
+ * SRCL Theme Interactive Features
+ * Vanilla JavaScript - No dependencies
+ */
+
+(function() {
+  'use strict';
+
+  // ============================================
+  // Accordion Functionality
+  // ============================================
+  function initAccordions() {
+    const headers = document.querySelectorAll('.accordion-header');
+
+    headers.forEach(header => {
+      header.addEventListener('click', () => {
+        const item = header.parentElement;
+        const isExpanded = item.dataset.expanded === 'true';
+
+        // Close all accordions in the same container
+        const container = item.parentElement;
+        container.querySelectorAll('.accordion-item').forEach(i => {
+          i.dataset.expanded = 'false';
+          i.querySelector('.accordion-header')?.setAttribute('aria-expanded', 'false');
+        });
+
+        // Open this one if it was closed
+        if (!isExpanded) {
+          item.dataset.expanded = 'true';
+          header.setAttribute('aria-expanded', 'true');
+        }
+      });
+
+      // Keyboard support
+      header.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          header.click();
+        }
+      });
+    });
+  }
+
+  // ============================================
+  // Smooth Scroll Navigation
+  // ============================================
+  function initSmoothScroll() {
+    document.querySelectorAll('a[href^="#"]').forEach(link => {
+      link.addEventListener('click', (e) => {
+        const href = link.getAttribute('href');
+        if (href === '#') return;
+
+        const target = document.querySelector(href);
+        if (target) {
+          e.preventDefault();
+
+          // Account for fixed action bar height
+          const actionBar = document.querySelector('.srcl-action-bar');
+          const offset = actionBar ? actionBar.offsetHeight + 16 : 16;
+
+          const targetPosition = target.getBoundingClientRect().top + window.scrollY - offset;
+
+          window.scrollTo({
+            top: targetPosition,
+            behavior: 'smooth'
+          });
+
+          // Update URL hash without jumping
+          history.pushState(null, '', href);
+        }
+      });
+    });
+  }
+
+  // ============================================
+  // Theme Toggle (Dark/Light)
+  // ============================================
+  function toggleTheme() {
+    const current = document.body.dataset.theme || document.documentElement.dataset.theme || 'dark';
+    const newTheme = current === 'dark' ? 'light' : 'dark';
+
+    // Set on both html and body for CSS compatibility
+    document.documentElement.dataset.theme = newTheme;
+    document.body.dataset.theme = newTheme;
+
+    // Persist preference
+    try {
+      localStorage.setItem('srcl-theme', newTheme);
+    } catch (e) {
+      // localStorage not available
+    }
+
+    // Announce change for screen readers
+    announceChange(`Theme changed to ${newTheme} mode`);
+  }
+
+  function loadThemePreference() {
+    try {
+      const saved = localStorage.getItem('srcl-theme');
+      if (saved) {
+        // Set on both html and body for CSS compatibility
+        document.documentElement.dataset.theme = saved;
+        document.body.dataset.theme = saved;
+      }
+    } catch (e) {
+      // localStorage not available
+    }
+  }
+
+  // ============================================
+  // Grid Toggle
+  // ============================================
+  function toggleGrid() {
+    const grid = document.querySelector('.grid-overlay');
+    if (grid) {
+      const isVisible = grid.style.display !== 'none';
+      grid.style.display = isVisible ? 'none' : 'block';
+
+      // Persist preference
+      try {
+        localStorage.setItem('srcl-grid', isVisible ? 'hidden' : 'visible');
+      } catch (e) {
+        // localStorage not available
+      }
+
+      announceChange(`Grid overlay ${isVisible ? 'hidden' : 'visible'}`);
+    }
+  }
+
+  function loadGridPreference() {
+    try {
+      const saved = localStorage.getItem('srcl-grid');
+      const grid = document.querySelector('.grid-overlay');
+      if (grid && saved === 'hidden') {
+        grid.style.display = 'none';
+      }
+    } catch (e) {
+      // localStorage not available
+    }
+  }
+
+  // ============================================
+  // Keyboard Shortcuts
+  // ============================================
+  function initKeyboardShortcuts() {
+    document.addEventListener('keydown', (e) => {
+      // Don't trigger shortcuts when typing in inputs
+      if (e.target.matches('input, textarea, select')) return;
+
+      // Ctrl+T or Cmd+T: Toggle theme
+      if ((e.ctrlKey || e.metaKey) && e.key === 't') {
+        e.preventDefault();
+        toggleTheme();
+      }
+
+      // Ctrl+G or Cmd+G: Toggle grid
+      if ((e.ctrlKey || e.metaKey) && e.key === 'g') {
+        e.preventDefault();
+        toggleGrid();
+      }
+
+      // Number keys 1-9: Jump to sections
+      if (!e.ctrlKey && !e.metaKey && !e.altKey) {
+        const num = parseInt(e.key);
+        if (num >= 1 && num <= 9) {
+          const sections = document.querySelectorAll('.section');
+          const target = sections[num - 1];
+          if (target) {
+            e.preventDefault();
+            target.scrollIntoView({ behavior: 'smooth' });
+          }
+        }
+      }
+
+      // Escape: Close any open accordion
+      if (e.key === 'Escape') {
+        document.querySelectorAll('.accordion-item[data-expanded="true"]').forEach(item => {
+          item.dataset.expanded = 'false';
+          item.querySelector('.accordion-header')?.setAttribute('aria-expanded', 'false');
+        });
+      }
+    });
+
+    // Hotkey button click handlers
+    document.querySelectorAll('.hotkey[data-hotkey]').forEach(button => {
+      button.addEventListener('click', () => {
+        const hotkey = button.dataset.hotkey;
+        if (hotkey === 'ctrl+t') toggleTheme();
+        if (hotkey === 'ctrl+g') toggleGrid();
+      });
+    });
+  }
+
+  // ============================================
+  // Active Section Highlight on Scroll
+  // ============================================
+  function initScrollSpy() {
+    const sections = document.querySelectorAll('.section[id], #hero');
+    const navLinks = document.querySelectorAll('.srcl-action-bar .primary a[href^="#"]');
+
+    if (sections.length === 0 || navLinks.length === 0) return;
+
+    let ticking = false;
+
+    function updateActiveSection() {
+      const scrollPos = window.scrollY + 100; // Offset for header
+
+      let currentSection = '';
+
+      sections.forEach(section => {
+        const sectionTop = section.offsetTop;
+        const sectionHeight = section.offsetHeight;
+
+        if (scrollPos >= sectionTop && scrollPos < sectionTop + sectionHeight) {
+          currentSection = section.getAttribute('id');
+        }
+      });
+
+      navLinks.forEach(link => {
+        const href = link.getAttribute('href').substring(1);
+        if (href === currentSection) {
+          link.classList.add('active');
+        } else {
+          link.classList.remove('active');
+        }
+      });
+
+      ticking = false;
+    }
+
+    window.addEventListener('scroll', () => {
+      if (!ticking) {
+        requestAnimationFrame(updateActiveSection);
+        ticking = true;
+      }
+    }, { passive: true });
+
+    // Initial check
+    updateActiveSection();
+  }
+
+  // ============================================
+  // Cursor Blink Effect
+  // ============================================
+  function initCursorBlink() {
+    // Add blinking cursor to hero name
+    const heroName = document.querySelector('.hero-card .name');
+    if (heroName) {
+      const cursor = document.createElement('span');
+      cursor.className = 'blink-cursor';
+      cursor.textContent = '_';
+      cursor.setAttribute('aria-hidden', 'true');
+      heroName.appendChild(cursor);
+    }
+
+    // Add CSS for cursor if not already present
+    if (!document.querySelector('#srcl-cursor-style')) {
+      const style = document.createElement('style');
+      style.id = 'srcl-cursor-style';
+      style.textContent = `
+        .blink-cursor {
+          animation: cursor-blink 1s step-end infinite;
+          margin-left: 0.25ch;
+        }
+        @keyframes cursor-blink {
+          0%, 50% { opacity: 1; }
+          51%, 100% { opacity: 0; }
+        }
+      `;
+      document.head.appendChild(style);
+    }
+  }
+
+  // ============================================
+  // Active nav link styles
+  // ============================================
+  function initNavStyles() {
+    // Add CSS for active nav links if not present
+    if (!document.querySelector('#srcl-nav-style')) {
+      const style = document.createElement('style');
+      style.id = 'srcl-nav-style';
+      style.textContent = `
+        .srcl-action-bar .primary a.active {
+          background: var(--theme-focused);
+        }
+      `;
+      document.head.appendChild(style);
+    }
+  }
+
+  // ============================================
+  // Accessibility: Screen Reader Announcements
+  // ============================================
+  let announcer = null;
+
+  function announceChange(message) {
+    if (!announcer) {
+      announcer = document.createElement('div');
+      announcer.setAttribute('aria-live', 'polite');
+      announcer.setAttribute('aria-atomic', 'true');
+      announcer.className = 'sr-only';
+      announcer.style.cssText = `
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        white-space: nowrap;
+        border: 0;
+      `;
+      document.body.appendChild(announcer);
+    }
+
+    announcer.textContent = message;
+  }
+
+  // ============================================
+  // Initialize Everything
+  // ============================================
+  function init() {
+    loadThemePreference();
+    loadGridPreference();
+    initAccordions();
+    initSmoothScroll();
+    initKeyboardShortcuts();
+    initScrollSpy();
+    initCursorBlink();
+    initNavStyles();
+
+    // Log available shortcuts
+    console.log('%c[SRCL] Keyboard shortcuts:', 'color: #ef6300; font-weight: bold');
+    console.log('  Ctrl+T: Toggle dark/light theme');
+    console.log('  Ctrl+G: Toggle grid overlay');
+    console.log('  1-9: Jump to sections');
+    console.log('  Esc: Close accordions');
+  }
+
+  // Run on DOM ready
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init);
+  } else {
+    init();
+  }
+
+  // Expose functions globally for debugging
+  window.SRCL = {
+    toggleTheme,
+    toggleGrid,
+    version: '1.0.0'
+  };
+
+})();