Add accessibility improvements, hero section, category icons, and visual polish

Copilot · 0xrinegade · Copilot · commit 617813dc3eaf · 2025-10-09T14:17:47.000Z
Co-authored-by: 0xrinegade &lt;101195284+0xrinegade@users.noreply.github.com&gt;
diff --git a/app.js b/app.js
@@ -6,6 +6,44 @@ let likes = new Map();
 let learningPaths = [];
 let searchDebounceTimer = null;
 
+// Category icon mapping
+function getCategoryIcon(category) {
+    const iconMap = {
+        'AI': '🤖',
+        'BLOCKCHAIN': '⛓️',
+        'SOLANA': '◎',
+        'ETHEREUM': '⟠',
+        'REACT': '⚛️',
+        'RUST': '🦀',
+        'PYTHON': '🐍',
+        'JAVASCRIPT': '📜',
+        'TYPESCRIPT': '💙',
+        'GO': '🐹',
+        'DATABASE': '🗄️',
+        'WEB': '🌐',
+        'MOBILE': '📱',
+        'SECURITY': '🔒',
+        'DEVOPS': '🚀',
+        'TESTING': '✅',
+        'GAMING': '🎮',
+        'MACHINE LEARNING': '🧠',
+        'NLP': '💬',
+        'COMPUTER VISION': '👁️',
+        'DATA': '📊',
+        'CLOUD': '☁️'
+    };
+    
+    // Try to match category with icon map
+    const upperCategory = category.toUpperCase();
+    for (const [key, icon] of Object.entries(iconMap)) {
+        if (upperCategory.includes(key)) {
+            return icon;
+        }
+    }
+    
+    return '📦'; // Default icon
+}
+
 // Load from localStorage
 function loadFromStorage() {
     const saved = localStorage.getItem('awesome-stargazer-data');
@@ -159,11 +197,12 @@ function renderRepos(repos) {
         const isBookmarked = bookmarks.has(repo.id);
         const likeCount = likes.get(repo.id) || 0;
         const isLiked = likeCount > 0;
+        const categoryIcon = getCategoryIcon(repo.category);
         
         return `
             <div class="repo-card" data-repo-id="${repo.id}">
                 <div class="repo-header">
-                    <div class="repo-icon">📦</div>
+                    <div class="repo-icon">${categoryIcon}</div>
                     <div class="repo-info">
                         <a href="${repo.url}" class="repo-name" target="_blank" rel="noopener">${repo.name}</a>
                         <div class="repo-category">${repo.category}</div>
diff --git a/index.html b/index.html
@@ -9,6 +9,9 @@
     <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>⭐</text></svg>">
 </head>
 <body class="dark-mode">
+    <!-- Skip to content for accessibility -->
+    <a href="#main-content" class="skip-to-content">Skip to main content</a>
+    
     <!-- Header -->
     <header class="header">
         <div class="container header-content">
@@ -57,10 +60,16 @@ <h1 class="site-title">Awesome Stargazer</h1>
     </header>
 
     <!-- Main Content -->
-    <main class="main-content">
+    <main class="main-content" id="main-content">
         <!-- Explorer Tab -->
         <div class="tab-content active" id="explorer-tab">
             <div class="container">
+                <!-- Hero Section -->
+                <div class="hero-section">
+                    <h1 class="hero-title">Discover Amazing GitHub Repositories</h1>
+                    <p class="hero-subtitle">Explore 59,000+ curated repositories across 575 categories</p>
+                </div>
+
                 <div class="search-section">
                     <div class="search-wrapper">
                         <svg class="search-icon" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
@@ -72,8 +81,9 @@ <h1 class="site-title">Awesome Stargazer</h1>
                             class="search-input" 
                             placeholder="Search repositories by name, topic, language, or description..."
                             autocomplete="off"
+                            aria-label="Search repositories"
                         >
-                        <button class="search-clear hidden" id="search-clear" title="Clear search (Esc)">
+                        <button class="search-clear hidden" id="search-clear" title="Clear search (Esc)" aria-label="Clear search">
                             <svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                 <path d="M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z"></path>
                             </svg>
diff --git a/styles.css b/styles.css
@@ -5,7 +5,7 @@
     --bg-overlay: rgba(13, 17, 23, 0.8);
     --border-default: #30363d;
     --border-muted: #21262d;
-    --text-primary: #c9d1d9;
+    --text-primary: #e6edf3;
     --text-secondary: #8b949e;
     --text-link: #58a6ff;
     --text-link-hover: #79c0ff;
@@ -48,6 +48,24 @@ html {
     scroll-behavior: smooth;
 }
 
+/* Skip to content link for accessibility */
+.skip-to-content {
+    position: absolute;
+    top: -40px;
+    left: 0;
+    background: var(--accent-primary);
+    color: white;
+    padding: 8px 16px;
+    text-decoration: none;
+    border-radius: 0 0 6px 0;
+    z-index: 1000;
+    font-weight: 500;
+}
+
+.skip-to-content:focus {
+    top: 0;
+}
+
 body {
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
     background: var(--bg-primary);
@@ -185,6 +203,29 @@ body {
     to { opacity: 1; transform: translateY(0); }
 }
 
+/* Hero Section */
+.hero-section {
+    text-align: center;
+    padding: 48px 24px 32px;
+    animation: fadeIn 0.6s ease;
+}
+
+.hero-title {
+    font-size: 36px;
+    font-weight: 700;
+    background: linear-gradient(135deg, var(--text-primary), var(--text-link));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    margin-bottom: 12px;
+}
+
+.hero-subtitle {
+    font-size: 18px;
+    color: var(--text-secondary);
+    font-weight: 400;
+}
+
 /* Search Section */
 .search-section {
     margin-bottom: 24px;
@@ -222,6 +263,10 @@ body {
     box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.1);
 }
 
+.search-input:not(:placeholder-shown) {
+    background: var(--bg-tertiary);
+}
+
 .search-clear {
     position: absolute;
     right: 12px;
@@ -381,17 +426,29 @@ kbd {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    transition: color 0.2s ease;
 }
 
 .repo-name:hover {
     color: var(--text-link-hover);
-    text-decoration: underline;
+}
+
+.repo-name:focus {
+    outline: 2px solid var(--text-link);
+    outline-offset: 2px;
+    border-radius: 3px;
 }
 
 .repo-category {
     font-size: 12px;
     color: var(--text-secondary);
     margin-top: 2px;
+    display: inline-block;
+    padding: 2px 8px;
+    background: var(--bg-tertiary);
+    border-radius: 12px;
+    border: 1px solid var(--border-muted);
+    font-weight: 500;
 }
 
 .repo-description {
@@ -1116,4 +1173,12 @@ kbd {
     .toast {
         min-width: auto;
     }
+
+    .hero-title {
+        font-size: 28px;
+    }
+
+    .hero-subtitle {
+        font-size: 16px;
+    }
 }
