Add sidebar navigation to HTML CV

- Add fixed sidebar with section links for quick navigation
- Fix download button hover color (lighter green tint)
- Add scroll-margin-top so section titles visible when navigating
- Hide sidebar on screens <1200px and in print
- Sidebar aligns with CV container top

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <[email protected]>

Author: jeremymanning

css/cv.css

@@ -43,10 +43,13 @@
 :root {
     --primary-green: rgb(0, 105, 62);
     --bg-green: rgba(0, 105, 62, 0.2);
+    --bg-green-light: rgba(0, 112, 60, 0.15);
+    --hover-green-light: rgba(255, 255, 255, 0.25);
     --dark-text: rgba(0, 0, 0, 0.7);
     --light-gray: #f5f5f5;
     --border-gray: #e0e0e0;
     --max-width: 900px;
+    --sidebar-width: 200px;
     --spacing-unit: 1rem;
 }
 
@@ -116,18 +119,99 @@ body {
 }
 
 .cv-download-bar .download-btn:hover {
-    background-color: var(--bg-green);
+    background-color: var(--hover-green-light);
     color: white;
     transform: translateY(-2px);
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 }
 
+/* Sidebar Navigation
+   ========================================================================== */
+
+.cv-sidebar {
+    position: fixed;
+    top: 92px;
+    left: 20px;
+    width: var(--sidebar-width);
+    max-height: calc(100vh - 110px);
+    overflow-y: auto;
+    background-color: white;
+    border: 1px solid var(--border-gray);
+    border-radius: 4px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    padding: 1rem 0;
+    z-index: 100;
+}
+
+.cv-sidebar-title {
+    font-size: 0.9rem;
+    font-weight: bold;
+    color: var(--primary-green);
+    padding: 0 1rem 0.5rem 1rem;
+    margin-bottom: 0.5rem;
+    border-bottom: 1px solid var(--border-gray);
+    letter-spacing: 0.5px;
+}
+
+.cv-sidebar nav {
+    display: flex;
+    flex-direction: column;
+}
+
+.cv-sidebar nav a {
+    font-size: 0.85rem;
+    color: var(--dark-text);
+    text-decoration: none;
+    padding: 0.4rem 1rem;
+    border-left: 3px solid transparent;
+    transition: all 0.2s ease;
+    line-height: 1.3;
+}
+
+.cv-sidebar nav a:hover {
+    background-color: var(--bg-green-light);
+    border-left-color: var(--primary-green);
+    color: var(--primary-green);
+    text-decoration: none;
+}
+
+.cv-sidebar nav a.active {
+    background-color: var(--bg-green);
+    border-left-color: var(--primary-green);
+    color: var(--primary-green);
+    font-weight: bold;
+}
+
+/* Scrollbar styling for sidebar */
+.cv-sidebar::-webkit-scrollbar {
+    width: 4px;
+}
+
+.cv-sidebar::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.cv-sidebar::-webkit-scrollbar-thumb {
+    background-color: var(--border-gray);
+    border-radius: 2px;
+}
+
+.cv-sidebar::-webkit-scrollbar-thumb:hover {
+    background-color: var(--primary-green);
+}
+
 /* Main Content Container
    ========================================================================== */
 
+.cv-wrapper {
+    display: flex;
+    justify-content: center;
+}
+
 .cv-content {
     max-width: var(--max-width);
     margin: 2rem auto;
+    margin-left: calc(var(--sidebar-width) + 60px);
     padding: 2rem;
     background-color: white;
     box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
@@ -180,6 +264,11 @@ h2 {
     letter-spacing: 0;
 }
 
+/* Scroll offset for anchor links (accounts for fixed header) */
+section[id] {
+    scroll-margin-top: 80px;
+}
+
 h3 {
     font-size: 1.05rem;
     font-weight: normal;
@@ -372,6 +461,17 @@ strong, b {
 /* Responsive Design - Tablet
    ========================================================================== */
 
+@media screen and (max-width: 1200px) {
+    .cv-sidebar {
+        display: none;
+    }
+
+    .cv-content {
+        margin-left: auto;
+        margin-right: auto;
+    }
+}
+
 @media screen and (max-width: 768px) {
     body {
         padding-top: 80px;
@@ -495,13 +595,15 @@ strong, b {
         background: white;
     }
 
-    .cv-download-bar {
+    .cv-download-bar,
+    .cv-sidebar {
         display: none;
     }
 
     .cv-content {
         max-width: 100%;
         margin: 0;
+        margin-left: 0;
         padding: 0;
         box-shadow: none;
     }

documents/JRM_CV.html

@@ -14,6 +14,20 @@
         </div>
     </div>
 
+    <aside class="cv-sidebar">
+        <div class="cv-sidebar-title">Sections</div>
+        <nav>
+            <a href="#employment">Employment</a>
+            <a href="#education">Education</a>
+            <a href="#grants-honors-and-awards-selected">Grants, honors, and aw...</a>
+            <a href="#publications">Publications</a>
+            <a href="#invited-talks-selected">Invited talks (selected)</a>
+            <a href="#software-selected">Software (selected)</a>
+            <a href="#teaching-and-instruction">Teaching and instruction</a>
+            <a href="#service">Service</a>
+        </nav>
+    </aside>
+
     <div class="cv-content">
         <header class="cv-header">
             <h1>Jeremy R. Manning, <span class="small-caps">Ph.D.</span></h1>

documents/JRM_CV.pdf

@@ -537,6 +537,18 @@ def generate_html(tex_content: str) -> str:
 
     html_parts = []
 
+    # Build sidebar navigation from sections
+    sidebar_links = []
+    for section in sections:
+        section_id = section.title.lower()
+        section_id = re.sub(r'[^a-z0-9]+', '-', section_id).strip('-')
+        # Shorten some section titles for sidebar display
+        display_title = section.title
+        if len(display_title) > 25:
+            # Truncate long titles
+            display_title = display_title[:22] + '...'
+        sidebar_links.append(f'            <a href="#{section_id}">{display_title}</a>\n')
+
     # HTML header
     html_parts.append('''<!DOCTYPE html>
 <html lang="en">
@@ -554,6 +566,14 @@ def generate_html(tex_content: str) -> str:
         </div>
     </div>
 
+    <aside class="cv-sidebar">
+        <div class="cv-sidebar-title">Sections</div>
+        <nav>
+''')
+    html_parts.extend(sidebar_links)
+    html_parts.append('''        </nav>
+    </aside>
+
     <div class="cv-content">
 ''')