npm - claude-code-templates - Versions diffs - 1.21.11 → 1.21.13 - Mend

claude-code-templates 1.21.11 → 1.21.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (797) hide show

package/docs/jobs.html ADDED Viewed

@@ -0,0 +1,1059 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Claude Code Jobs - Find Your Next AI-Powered Development Role</title>
+    <meta name="description" content="Discover the latest job opportunities requiring Claude Code expertise. Find positions at Anthropic and other companies building the future of AI-powered development.">
+    <!-- Open Graph / Facebook -->
+    <meta property="og:type" content="website">
+    <meta property="og:url" content="https://davila7.github.io/claude-code-templates/jobs.html">
+    <meta property="og:title" content="Claude Code Jobs - Find Your Next AI-Powered Development Role">
+    <meta property="og:description" content="Discover the latest job opportunities requiring Claude Code expertise. Find positions at Anthropic and other companies building the future of AI-powered development.">
+    <meta property="og:image" content="https://raw.githubusercontent.com/davila7/claude-code-templates/main/social-preview.png">
+    <meta property="og:image:width" content="1200">
+    <meta property="og:image:height" content="630">
+    <meta property="og:image:alt" content="Claude Code Jobs - Find Your Next AI-Powered Development Role">
+    <meta property="og:site_name" content="Claude Code Templates">
+    <!-- Twitter -->
+    <meta property="twitter:card" content="summary_large_image">
+    <meta property="twitter:url" content="https://davila7.github.io/claude-code-templates/jobs.html">
+    <meta property="twitter:title" content="Claude Code Jobs - Find Your Next AI-Powered Development Role">
+    <meta property="twitter:description" content="Discover the latest job opportunities requiring Claude Code expertise. Find positions at Anthropic and other companies building the future of AI-powered development.">
+    <meta property="twitter:image" content="https://raw.githubusercontent.com/davila7/claude-code-templates/main/social-preview.png">
+    <meta property="twitter:image:alt" content="Claude Code Jobs - Find Your Next AI-Powered Development Role">
+    <meta property="twitter:creator" content="@davila7">
+    <meta property="twitter:site" content="@davila7">
+    <!-- Additional SEO -->
+    <meta name="keywords" content="Claude Code jobs, Anthropic careers, AI development jobs, Claude Code careers, AI engineer positions, developer jobs, AI-powered development, Claude Code opportunities">
+    <meta name="author" content="Claude Code Templates Community">
+    <meta name="robots" content="index, follow">
+    <link rel="canonical" href="https://davila7.github.io/claude-code-templates/jobs.html">
+    <!-- Claude Code / Anthropic relation -->
+    <meta name="product" content="Claude Code Jobs">
+    <meta name="platform" content="Anthropic Claude Code">
+    <meta name="category" content="AI Development Careers">
+    <link rel="stylesheet" href="css/styles.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <script src="https://cdn.counter.dev/script.js" data-id="1f599060-4af4-4cbc-a809-a158768ab768" data-utcoffset="-4"></script>
+    <!-- Hotjar Tracking Code for https://aitmpl.com -->
+    <script>
+        (function(h,o,t,j,a,r){
+            h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
+            h._hjSettings={hjid:6519181,hjsv:6};
+            a=o.getElementsByTagName('head')[0];
+            r=o.createElement('script');r.async=1;
+            r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
+            a.appendChild(r);
+        })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
+    </script>
+    <style>
+        /* Terminal Jobs Page Styling */
+        .jobs-container {
+            max-width: 1400px;
+            margin: 0 auto;
+            padding: 2rem 1rem;
+        }
+        .jobs-header {
+            text-align: center;
+            margin-bottom: 3rem;
+            padding: 2rem 0;
+            border-bottom: 1px solid var(--border-primary);
+            position: relative;
+        }
+        .jobs-header::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 50%;
+            width: 100px;
+            height: 2px;
+            background: linear-gradient(90deg, transparent, var(--text-accent), transparent);
+            transform: translateX(-50%);
+            animation: glow-line 3s ease-in-out infinite;
+        }
+        @keyframes glow-line {
+            0%, 100% { opacity: 0.5; width: 100px; }
+            50% { opacity: 1; width: 200px; }
+        }
+        .jobs-title {
+            color: var(--text-accent);
+            font-size: clamp(2rem, 5vw, 2.5rem);
+            font-weight: 700;
+            margin-bottom: 1rem;
+            text-shadow: 0 0 20px rgba(217, 119, 6, 0.3);
+            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+            letter-spacing: -0.025em;
+        }
+        .jobs-subtitle {
+            color: var(--text-secondary);
+            font-size: 1.1rem;
+            max-width: 600px;
+            margin: 0 auto 2rem auto;
+            line-height: 1.6;
+            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+        }
+        .terminal-prompt-line {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 0.5rem;
+            margin: 1rem 0;
+            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+            font-size: 0.9rem;
+        }
+        .prompt-symbol {
+            color: var(--text-success);
+            font-weight: bold;
+        }
+        .prompt-text {
+            color: var(--text-primary);
+        }
+        .cursor {
+            width: 8px;
+            height: 16px;
+            background: var(--text-accent);
+            display: inline-block;
+            animation: blink 1s infinite;
+        }
+        @keyframes blink {
+            0%, 50% { opacity: 1; }
+            51%, 100% { opacity: 0; }
+        }
+        .jobs-stats {
+            display: flex;
+            justify-content: center;
+            gap: 2rem;
+            margin-top: 2rem;
+            flex-wrap: wrap;
+        }
+        .stat-item {
+            background: var(--bg-secondary);
+            border: 1px solid var(--border-primary);
+            border-radius: 8px;
+            padding: 1.5rem 2rem;
+            text-align: center;
+            position: relative;
+            overflow: hidden;
+            transition: all 0.3s ease;
+            backdrop-filter: blur(10px);
+        }
+        .stat-item::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 2px;
+            background: linear-gradient(90deg, transparent, var(--text-accent), transparent);
+            transition: left 0.5s ease;
+        }
+        .stat-item:hover::before {
+            left: 100%;
+        }
+        .stat-item:hover {
+            border-color: var(--text-accent);
+            transform: translateY(-2px);
+            box-shadow: 0 8px 32px rgba(217, 119, 6, 0.2);
+        }
+        .stat-number {
+            display: block;
+            font-size: 2.5rem;
+            font-weight: 700;
+            color: var(--text-accent);
+            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+            margin-bottom: 0.5rem;
+        }
+        .stat-label {
+            color: var(--text-secondary);
+            font-size: 0.9rem;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+        }
+        .back-nav {
+            margin-bottom: 2rem;
+        }
+        .back-link {
+            display: inline-flex;
+            align-items: center;
+            gap: 0.5rem;
+            color: var(--text-accent);
+            text-decoration: none;
+            padding: 0.75rem 1.25rem;
+            border: 1px solid var(--border-primary);
+            border-radius: 6px;
+            transition: all 0.3s ease;
+            font-weight: 500;
+            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+            background: var(--bg-secondary);
+            position: relative;
+            overflow: hidden;
+        }
+        .back-link::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(217, 119, 6, 0.1), transparent);
+            transition: left 0.3s ease;
+        }
+        .back-link:hover::before {
+            left: 100%;
+        }
+        .back-link:hover {
+            background: var(--bg-tertiary);
+            border-color: var(--text-accent);
+            transform: translateX(-4px);
+        }
+        /* Search and Filter Section */
+        .controls-section {
+            display: grid;
+            grid-template-columns: 1fr auto;
+            gap: 2rem;
+            margin-bottom: 2rem;
+            align-items: start;
+        }
+        .search-container {
+            position: relative;
+        }
+        .terminal-search-wrapper {
+            display: flex;
+            align-items: center;
+            background: var(--bg-secondary);
+            border: 1px solid var(--border-primary);
+            border-radius: 8px;
+            padding: 0.75rem 1rem;
+            transition: all 0.3s ease;
+        }
+        .terminal-search-wrapper:focus-within {
+            border-color: var(--text-accent);
+            box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.2);
+        }
+        .terminal-prompt {
+            color: var(--text-success);
+            font-weight: bold;
+            margin-right: 0.5rem;
+            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+        }
+        .terminal-search-input {
+            flex: 1;
+            background: transparent;
+            border: none;
+            color: var(--text-primary);
+            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+            font-size: 0.95rem;
+            outline: none;
+            padding: 0.25rem 0;
+        }
+        .terminal-search-input::placeholder {
+            color: var(--text-secondary);
+        }
+        .search-icon {
+            color: var(--text-secondary);
+            margin-left: 0.5rem;
+            width: 18px;
+            height: 18px;
+        }
+        .controls-section {
+            display: flex;
+            flex-direction: column;
+            gap: 1.5rem;
+            margin-bottom: 2rem;
+        }
+        .search-container {
+            width: 100%;
+        }
+        .filter-section {
+            background: var(--bg-secondary);
+            border: 1px solid var(--border-primary);
+            border-radius: 8px;
+            padding: 1.5rem;
+            backdrop-filter: blur(10px);
+            position: relative;
+            overflow: hidden;
+            width: 100%;
+        }
+        .filter-section::before {
+            content: '';
+            position: absolute;
+            top: -2px;
+            left: -2px;
+            right: -2px;
+            height: 2px;
+            background: linear-gradient(90deg,
+                var(--text-success),
+                var(--text-accent),
+                var(--text-info),
+                var(--text-success)
+            );
+            background-size: 200% 100%;
+            animation: filter-glow 4s linear infinite;
+        }
+        @keyframes filter-glow {
+            0% { background-position: 200% 0; }
+            100% { background-position: -200% 0; }
+        }
+        .filter-title {
+            color: var(--text-accent);
+            font-size: 1.1rem;
+            font-weight: 600;
+            margin-bottom: 1rem;
+            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+        .filter-title::before {
+            content: '>';
+            color: var(--text-success);
+            font-weight: bold;
+        }
+        .filter-options {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 0.75rem;
+        }
+        .filter-btn {
+            padding: 0.6rem 1.2rem;
+            background: var(--bg-tertiary);
+            border: 1px solid var(--border-secondary);
+            border-radius: 6px;
+            color: var(--text-secondary);
+            cursor: pointer;
+            transition: all 0.3s ease;
+            font-size: 0.85rem;
+            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+            position: relative;
+            overflow: hidden;
+        }
+        .filter-btn::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(217, 119, 6, 0.1), transparent);
+            transition: left 0.3s ease;
+        }
+        .filter-btn:hover::before {
+            left: 100%;
+        }
+        .filter-btn:hover,
+        .filter-btn.active {
+            background: rgba(217, 119, 6, 0.15);
+            border-color: var(--text-accent);
+            color: var(--text-accent);
+            transform: translateY(-1px);
+        }
+        .filter-btn.active {
+            font-weight: 600;
+            box-shadow: 0 2px 8px rgba(217, 119, 6, 0.3);
+        }
+        /* Jobs Grid */
+        .jobs-grid {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 1.5rem;
+            margin-top: 2rem;
+            width: 100%;
+        }
+        .job-card {
+            background: var(--bg-secondary);
+            border: 1px solid var(--border-primary);
+            border-radius: 12px;
+            padding: 1.25rem;
+            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+            position: relative;
+            backdrop-filter: blur(10px);
+            overflow: hidden;
+        }
+        .job-card::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 2px;
+            background: linear-gradient(90deg, transparent, var(--text-accent), transparent);
+            transition: left 0.5s ease;
+        }
+        .job-card:hover::before {
+            left: 100%;
+        }
+        .job-card:hover {
+            border-color: var(--text-accent);
+            transform: translateY(-8px);
+            box-shadow:
+                0 20px 40px rgba(0, 0, 0, 0.3),
+                0 0 0 1px rgba(217, 119, 6, 0.2),
+                0 0 20px rgba(217, 119, 6, 0.1);
+        }
+        .job-header {
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+            margin-bottom: 1rem;
+            position: relative;
+        }
+        .company-icon {
+            width: 64px;
+            height: 64px;
+            border-radius: 8px;
+            background: var(--bg-tertiary);
+            border: 1px solid var(--border-secondary);
+            padding: 8px;
+            flex-shrink: 0;
+            object-fit: contain;
+            transition: all 0.3s ease;
+        }
+        .job-card:hover .company-icon {
+            border-color: var(--text-accent);
+            transform: scale(1.05);
+        }
+        .job-info {
+            flex: 1;
+            min-width: 0;
+        }
+        .job-title {
+            color: var(--text-primary);
+            font-size: 1.35rem;
+            font-weight: 600;
+            margin-bottom: 0.5rem;
+            line-height: 1.3;
+            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+            transition: color 0.3s ease;
+        }
+        .job-card:hover .job-title {
+            color: var(--text-accent);
+        }
+        .company-name {
+            color: var(--text-success);
+            font-weight: 500;
+            font-size: 1rem;
+            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+        .company-name::before {
+            content: '@';
+            color: var(--text-accent);
+            font-weight: bold;
+        }
+        .job-location {
+            color: var(--text-secondary);
+            font-size: 0.9rem;
+            margin-top: 0.5rem;
+            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+        .job-location::before {
+            content: '📍';
+            font-size: 0.8rem;
+        }
+        .job-description {
+            color: var(--text-secondary);
+            line-height: 1.6;
+            margin-bottom: 1rem;
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+            font-size: 0.9rem;
+        }
+        .job-footer {
+            display: flex;
+            justify-content: flex-end;
+            align-items: center;
+            padding-top: 1rem;
+            border-top: 1px solid var(--border-secondary);
+        }
+        .job-source {
+            color: var(--text-secondary);
+            font-size: 0.8rem;
+            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+        }
+        .job-source::before {
+            content: 'via ';
+            color: var(--text-accent);
+        }
+        .apply-btn {
+            background: linear-gradient(135deg, var(--text-accent), #e8810b);
+            color: var(--bg-primary);
+            text-decoration: none;
+            padding: 0.75rem 1.5rem;
+            border-radius: 6px;
+            font-weight: 600;
+            transition: all 0.3s ease;
+            border: none;
+            cursor: pointer;
+            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+            position: relative;
+            overflow: hidden;
+        }
+        .apply-btn::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+            transition: left 0.3s ease;
+        }
+        .apply-btn:hover::before {
+            left: 100%;
+        }
+        .apply-btn:hover {
+            transform: translateY(-2px) scale(1.02);
+            box-shadow: 0 8px 25px rgba(217, 119, 6, 0.4);
+        }
+        /* Loading and Empty States */
+        .loading {
+            text-align: center;
+            padding: 4rem 2rem;
+            color: var(--text-accent);
+            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+        }
+        .loading::before {
+            content: '> ';
+            color: var(--text-success);
+            font-weight: bold;
+        }
+        .loading::after {
+            content: '';
+            display: inline-block;
+            width: 8px;
+            height: 16px;
+            background: var(--text-accent);
+            margin-left: 4px;
+            animation: blink 1s infinite;
+        }
+        .no-jobs {
+            text-align: center;
+            padding: 4rem 2rem;
+            color: var(--text-secondary);
+            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+        }
+        .no-jobs h3 {
+            color: var(--text-accent);
+            margin-bottom: 1rem;
+        }
+        .no-jobs h3::before {
+            content: '! ';
+            color: var(--text-warning);
+        }
+        /* Responsive Design */
+        @media (max-width: 1200px) {
+            .jobs-grid {
+                grid-template-columns: repeat(2, 1fr);
+            }
+        }
+        @media (max-width: 968px) {
+            .controls-section {
+                grid-template-columns: 1fr;
+                gap: 1.5rem;
+            }
+        }
+        @media (max-width: 768px) {
+            .jobs-grid {
+                grid-template-columns: 1fr;
+            }
+            .jobs-container {
+                max-width: 100%;
+                padding: 1.5rem 1rem;
+            }
+            .jobs-stats {
+                gap: 1rem;
+            }
+            .stat-item {
+                padding: 1rem 1.5rem;
+            }
+            .job-card {
+                padding: 1.5rem;
+            }
+            .filter-options {
+                justify-content: center;
+            }
+            .controls-section {
+                grid-template-columns: 1fr;
+            }
+        }
+        @media (max-width: 480px) {
+            .jobs-container {
+                padding: 1rem 0.5rem;
+            }
+            .job-card {
+                padding: 1rem;
+            }
+            .job-header {
+                flex-direction: column;
+                text-align: center;
+                gap: 0.75rem;
+            }
+            .company-icon {
+                width: 40px;
+                height: 40px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <header class="header">
+        <div class="container">
+            <div class="header-content">
+                <div class="terminal-header">
+                    <div class="ascii-title">
+                        <pre class="ascii-art"> ██████╗██╗      █████╗ ██╗   ██╗██████╗ ███████╗     ██████╗ ██████╗ ██████╗ ███████╗         ██╗ ██████╗ ██████╗ ███████╗
+██╔════╝██║     ██╔══██╗██║   ██║██╔══██╗██╔════╝    ██╔════╝██╔═══██╗██╔══██╗██╔════╝         ██║██╔═══██╗██╔══██╗██╔════╝
+██║     ██║     ███████║██║   ██║██║  ██║█████╗      ██║     ██║   ██║██║  ██║█████╗           ██║██║   ██║██████╔╝███████╗
+██║     ██║     ██╔══██║██║   ██║██║  ██║██╔══╝      ██║     ██║   ██║██║  ██║██╔══╝      ██   ██║██║   ██║██╔══██╗╚════██║
+╚██████╗███████╗██║  ██║╚██████╔╝██████╔╝███████╗    ╚██████╗╚██████╔╝██████╔╝███████╗    ╚█████╔╝╚██████╔╝██████╔╝███████║
+ ╚═════╝╚══════╝╚═╝  ╚═╝ ╚═════╝ ╚═════╝ ╚══════╝     ╚═════╝ ╚═════╝ ╚═════╝ ╚══════╝     ╚════╝  ╚═════╝ ╚═════╝ ╚══════╝</pre>
+                    </div>
+                    <div class="terminal-subtitle">
+                        <span class="status-dot"></span>
+                        Career opportunities in <strong>Claude Code</strong> development
+                    </div>
+                </div>
+                <div class="header-actions">
+                    <a href="index.html" class="header-btn">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+                            <path d="M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z"/>
+                        </svg>
+                        Home
+                    </a>
+                    <a href="https://www.anthropic.com/claude-code?ref=aitmpl.com" target="_blank" class="header-btn anthropic-btn">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+                            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
+                        </svg>
+                        Claude Code
+                    </a>
+                </div>
+            </div>
+        </div>
+    </header>
+    <main class="terminal">
+        <div class="jobs-container">
+            <div class="back-nav">
+                <a href="index.html" class="back-link">
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+                        <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.42-1.41L7.83 13H20v-2z"/>
+                    </svg>
+                    Back to Templates
+                </a>
+            </div>
+            <div class="search-header">
+                <div class="terminal-command">
+                    <div class="header-content">
+                        <h2 class="search-title"><span class="terminal-dot"></span><strong>Search </strong><span class="title-params">(fullstack/datascientist/research)</span></h2>
+                        <p class="search-subtitle">⎿ Find your next AI-powered development role</p>
+                    </div>
+                </div>
+            </div>
+            <div class="controls-section">
+                <div class="search-container">
+                    <div class="terminal-search-wrapper">
+                        <span class="terminal-prompt">$</span>
+                        <input type="text" class="terminal-search-input" id="search-input" placeholder="search jobs by title, company, or keywords...">
+                        <svg class="search-icon" viewBox="0 0 24 24" fill="currentColor">
+                            <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
+                        </svg>
+                    </div>
+                </div>
+                <div class="filter-section">
+                    <h3 class="filter-title">Filter by Company</h3>
+                    <div class="filter-options" id="company-filters">
+                        <button class="filter-btn active" data-company="all">All Companies</button>
+                    </div>
+                </div>
+            </div>
+            <div class="jobs-grid" id="jobs-grid">
+                <div class="loading">Loading job opportunities...</div>
+            </div>
+        </div>
+    </main>
+    <script>
+        let allJobs = [];
+        let filteredJobs = [];
+        let currentSearchTerm = '';
+        let currentCompanyFilter = 'all';
+        // Load and display jobs with enhanced animations
+        async function loadJobs() {
+            try {
+                // Add loading animation
+                showLoadingAnimation();
+                const response = await fetch('claude-jobs.json');
+                const data = await response.json();
+                allJobs = data.jobs || [];
+                filteredJobs = [...allJobs];
+                // Animate stats counter
+                updateStats();
+                setupFilters();
+                setupSearch();
+                renderJobs();
+            } catch (error) {
+                console.error('Error loading jobs:', error);
+                document.getElementById('jobs-grid').innerHTML = `
+                    <div class="no-jobs">
+                        <h3>Unable to load job listings</h3>
+                        <p>Please try again later or check back soon for new opportunities.</p>
+                    </div>
+                `;
+            }
+        }
+        function showLoadingAnimation() {
+            const loadingElement = document.querySelector('.loading');
+            if (loadingElement) {
+                loadingElement.style.animation = 'pulse 1.5s ease-in-out infinite';
+            }
+        }
+        function updateStats() {
+            // Stats removed - no longer needed
+        }
+        function setupSearch() {
+            const searchInput = document.getElementById('search-input');
+            let searchTimeout;
+            searchInput.addEventListener('input', (e) => {
+                clearTimeout(searchTimeout);
+                searchTimeout = setTimeout(() => {
+                    currentSearchTerm = e.target.value.toLowerCase().trim();
+                    applyFilters();
+                }, 300); // Debounce search
+            });
+            // Add search shortcut (Ctrl/Cmd + K)
+            document.addEventListener('keydown', (e) => {
+                if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
+                    e.preventDefault();
+                    searchInput.focus();
+                }
+            });
+        }
+        function setupFilters() {
+            const companies = [...new Set(allJobs.map(job => job.company))].sort();
+            const filtersContainer = document.getElementById('company-filters');
+            // Clear existing filters except "All Companies"
+            const allButton = filtersContainer.querySelector('[data-company="all"]');
+            filtersContainer.innerHTML = '';
+            filtersContainer.appendChild(allButton);
+            // Add company filters with count
+            companies.forEach(company => {
+                if (company && company !== 'Unknown Company') {
+                    const jobCount = allJobs.filter(job => job.company === company).length;
+                    const button = document.createElement('button');
+                    button.className = 'filter-btn';
+                    button.dataset.company = company;
+                    button.innerHTML = `${company} <span style="opacity: 0.7; font-size: 0.8em;">(${jobCount})</span>`;
+                    button.addEventListener('click', () => filterByCompany(company));
+                    filtersContainer.appendChild(button);
+                }
+            });
+            // Add event listener for "All Companies" button
+            allButton.addEventListener('click', () => filterByCompany('all'));
+        }
+        function filterByCompany(company) {
+            currentCompanyFilter = company;
+            // Update active filter button with smooth transition
+            document.querySelectorAll('.filter-btn').forEach(btn => {
+                btn.classList.remove('active');
+            });
+            document.querySelector(`[data-company="${company}"]`).classList.add('active');
+            applyFilters();
+        }
+        function applyFilters() {
+            let jobs = [...allJobs];
+            // Apply company filter
+            if (currentCompanyFilter !== 'all') {
+                jobs = jobs.filter(job => job.company === currentCompanyFilter);
+            }
+            // Apply search filter
+            if (currentSearchTerm) {
+                jobs = jobs.filter(job =>
+                    job.job_title.toLowerCase().includes(currentSearchTerm) ||
+                    job.company.toLowerCase().includes(currentSearchTerm) ||
+                    job.description.toLowerCase().includes(currentSearchTerm) ||
+                    (job.location && job.location.toLowerCase().includes(currentSearchTerm))
+                );
+            }
+            filteredJobs = jobs;
+            updateStats();
+            renderJobs();
+        }
+        function renderJobs() {
+            const container = document.getElementById('jobs-grid');
+            if (filteredJobs.length === 0) {
+                const searchText = currentSearchTerm ? ` for "${currentSearchTerm}"` : '';
+                const companyText = currentCompanyFilter !== 'all' ? ` at ${currentCompanyFilter}` : '';
+                container.innerHTML = `
+                    <div class="no-jobs">
+                        <h3>No jobs found</h3>
+                        <p>No positions found${searchText}${companyText}. Try adjusting your search or filters, or check back later for new opportunities.</p>
+                    </div>
+                `;
+                return;
+            }
+            // Render jobs with staggered animation
+            const jobCards = filteredJobs.map((job, index) => `
+                <div class="job-card" style="animation-delay: ${index * 0.1}s;">
+                    <div class="job-header">
+                        <img src="${job.company_icon}" alt="${job.company}" class="company-icon"
+                             onerror="this.src='https://www.aitmpl.com/static/img/logo.png'">
+                        <div class="job-info">
+                            <h3 class="job-title">${highlightSearchTerms(truncateText(job.job_title, 60))}</h3>
+                            <div class="company-name">${highlightSearchTerms(job.company)}</div>
+                            <div class="job-location">${job.location || 'Location not specified'}</div>
+                        </div>
+                    </div>
+                    <p class="job-description">${highlightSearchTerms(job.description)}</p>
+                    <div class="job-footer">
+                        <a href="${job.job_link}" target="_blank" rel="noopener noreferrer" class="apply-btn"
+                           onclick="trackJobApplication('${job.company}', '${job.job_title}')">
+                            Apply Now
+                        </a>
+                    </div>
+                </div>
+            `).join('');
+            container.innerHTML = jobCards;
+            // Add fade-in animation
+            const cards = container.querySelectorAll('.job-card');
+            cards.forEach((card, index) => {
+                card.style.opacity = '0';
+                card.style.transform = 'translateY(20px)';
+                setTimeout(() => {
+                    card.style.transition = 'all 0.4s ease';
+                    card.style.opacity = '1';
+                    card.style.transform = 'translateY(0)';
+                }, index * 100);
+            });
+        }
+        function highlightSearchTerms(text) {
+            if (!currentSearchTerm || !text) return text;
+            const regex = new RegExp(`(${escapeRegex(currentSearchTerm)})`, 'gi');
+            return text.replace(regex, '<mark style="background: rgba(217, 119, 6, 0.3); color: inherit; padding: 0 2px; border-radius: 2px;">$1</mark>');
+        }
+        function escapeRegex(string) {
+            return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+        }
+        function truncateText(text, maxLength) {
+            if (!text || text.length <= maxLength) return text;
+            return text.substring(0, maxLength).trim() + '...';
+        }
+        function trackJobApplication(company, title) {
+            // Analytics tracking for job applications
+            if (typeof gtag !== 'undefined') {
+                gtag('event', 'job_application_click', {
+                    'company': company,
+                    'job_title': title,
+                    'source': 'claude_jobs_page'
+                });
+            }
+            console.log(`Job application tracked: ${company} - ${title}`);
+        }
+        // Enhanced keyboard shortcuts
+        document.addEventListener('keydown', (e) => {
+            // ESC to clear search
+            if (e.key === 'Escape') {
+                const searchInput = document.getElementById('search-input');
+                if (searchInput.value) {
+                    searchInput.value = '';
+                    searchInput.dispatchEvent(new Event('input'));
+                }
+            }
+        });
+        // Add CSS animation keyframes dynamically
+        const style = document.createElement('style');
+        style.textContent = `
+            @keyframes fadeInUp {
+                from {
+                    opacity: 0;
+                    transform: translateY(30px);
+                }
+                to {
+                    opacity: 1;
+                    transform: translateY(0);
+                }
+            }
+            .job-card {
+                animation: fadeInUp 0.6s ease-out forwards;
+            }
+        `;
+        document.head.appendChild(style);
+        // Initialize when page loads
+        document.addEventListener('DOMContentLoaded', loadJobs);
+        // Add smooth scrolling to top when filtering
+        function scrollToTop() {
+            window.scrollTo({
+                top: 0,
+                behavior: 'smooth'
+            });
+        }
+        // Performance optimization: Intersection Observer for lazy loading
+        const observerOptions = {
+            root: null,
+            rootMargin: '50px',
+            threshold: 0.1
+        };
+        const imageObserver = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    const img = entry.target;
+                    if (img.dataset.src) {
+                        img.src = img.dataset.src;
+                        img.removeAttribute('data-src');
+                        imageObserver.unobserve(img);
+                    }
+                }
+            });
+        }, observerOptions);
+    </script>
+</body>
+</html>