@mintfolio/theme-verdant 0.2.0

package/components/base/Navigation.astro

@@ -0,0 +1,288 @@
+---
+/**
+ * Navigation - Fixed top navigation bar with mobile hamburger menu.
+ * 
+ * Features:
+ * - Desktop: Horizontal link list with hover underline animation
+ * - Mobile: Hamburger toggle with slide-down menu
+ * - Smooth scroll navigation to page sections
+ * - Keyboard accessible (Escape closes mobile menu)
+ */
+import type { ThemeContext } from '@mintfolio/theme-api';
+import type { VerdantSettings } from '../../settings';
+
+/** Public site data supplied by the containing theme page. */
+interface Props { theme: ThemeContext<VerdantSettings>; }
+const { theme } = Astro.props;
+
+const navLinks = [
+  { href: '#hero', label: '首页' },
+  { href: '#skills', label: '技能' },
+  { href: '#projects', label: '项目' },
+  { href: '#blog', label: '博客' },
+  { href: '#contact', label: '联系' },
+];
+---
+
+<nav class="nav-container glass" role="navigation" aria-label="主导航">
+  <div class="nav-inner">
+    <!-- Logo -->
+    <a href="#hero" class="nav-logo">
+      {theme.site.profile.name}
+    </a>
+
+    <!-- Desktop Navigation -->
+    <ul class="nav-links">
+      {navLinks.map((link) => (
+        <li>
+          <a href={link.href} class="nav-link">{link.label}</a>
+        </li>
+      ))}
+    </ul>
+
+    <!-- Mobile Menu Toggle -->
+    <button
+      class="nav-toggle"
+      id="mobile-menu-toggle"
+      aria-label="切换菜单"
+      aria-expanded="false"
+      aria-controls="mobile-menu"
+    >
+      <span class="hamburger-line" aria-hidden="true"></span>
+      <span class="hamburger-line" aria-hidden="true"></span>
+      <span class="hamburger-line" aria-hidden="true"></span>
+    </button>
+  </div>
+
+  <!-- Mobile Menu -->
+  <div id="mobile-menu" class="mobile-menu" aria-hidden="true" aria-labelledby="mobile-menu-toggle">
+    <ul class="mobile-nav-links">
+      {navLinks.map((link) => (
+        <li>
+          <a href={link.href} class="mobile-nav-link">{link.label}</a>
+        </li>
+      ))}
+    </ul>
+  </div>
+</nav>
+
+<style>
+  .nav-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 1000;
+    border-radius: 0;
+    border-top: none;
+    border-left: none;
+    border-right: none;
+  }
+
+  .nav-inner {
+    max-width: var(--max-width);
+    margin: 0 auto;
+    padding: 1rem 2rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .nav-logo {
+    font-size: 1.25rem;
+    font-weight: 600;
+    color: var(--color-text);
+    text-decoration: none;
+    transition: color 0.2s ease;
+  }
+
+  .nav-logo:hover {
+    color: var(--color-primary);
+  }
+
+  .nav-links {
+    display: flex;
+    align-items: center;
+    gap: 2rem;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .nav-link {
+    color: var(--color-text-muted);
+    text-decoration: none;
+    font-size: 0.9375rem;
+    font-weight: 500;
+    transition: color 0.2s ease;
+    position: relative;
+  }
+
+  .nav-link:hover {
+    color: var(--color-text);
+  }
+
+  .nav-link::after {
+    content: '';
+    position: absolute;
+    bottom: -4px;
+    left: 0;
+    width: 0;
+    height: 2px;
+    background: var(--gradient-primary);
+    transition: width 0.2s ease;
+  }
+
+  .nav-link:hover::after {
+    width: 100%;
+  }
+
+  .nav-toggle {
+    display: none;
+    flex-direction: column;
+    justify-content: center;
+    gap: 5px;
+    width: 32px;
+    height: 32px;
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 0;
+  }
+
+  .hamburger-line {
+    display: block;
+    width: 100%;
+    height: 2px;
+    background-color: var(--color-text);
+    transition: transform 0.3s ease, opacity 0.3s ease;
+  }
+
+  .nav-toggle[aria-expanded="true"] .hamburger-line:nth-child(1) {
+    transform: translateY(7px) rotate(45deg);
+  }
+
+  .nav-toggle[aria-expanded="true"] .hamburger-line:nth-child(2) {
+    opacity: 0;
+  }
+
+  .nav-toggle[aria-expanded="true"] .hamburger-line:nth-child(3) {
+    transform: translateY(-7px) rotate(-45deg);
+  }
+
+  .mobile-menu {
+    display: none;
+    overflow: hidden;
+    max-height: 0;
+    transition: max-height 0.3s ease;
+  }
+
+  .mobile-menu.open {
+    max-height: 400px;
+  }
+
+  .mobile-nav-links {
+    list-style: none;
+    margin: 0;
+    padding: 0.5rem 2rem 1.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .mobile-nav-link {
+    display: block;
+    color: var(--color-text-muted);
+    text-decoration: none;
+    font-size: 1rem;
+    font-weight: 500;
+    padding: 0.75rem 0;
+    transition: color 0.2s ease;
+  }
+
+  .mobile-nav-link:hover {
+    color: var(--color-text);
+  }
+
+  @media (max-width: 768px) {
+    .nav-links {
+      display: none;
+    }
+
+    .nav-toggle {
+      display: flex;
+    }
+
+    .mobile-menu {
+      display: block;
+    }
+  }
+</style>
+
+<script>
+  let cleanupNavigation: (() => void) | null = null;
+
+  function initNavigation() {
+    cleanupNavigation?.();
+
+    const toggle = document.querySelector<HTMLElement>('.nav-toggle');
+    const mobileMenu = document.getElementById('mobile-menu');
+
+    if (!toggle || !mobileMenu) return;
+
+    const disposers: Array<() => void> = [];
+    const addDisposer = (dispose: () => void) => {
+      disposers.push(dispose);
+    };
+
+    const closeMenu = () => {
+      toggle.setAttribute('aria-expanded', 'false');
+      mobileMenu.setAttribute('aria-hidden', 'true');
+      mobileMenu.classList.remove('open');
+    };
+
+    const onToggleClick = () => {
+      const isExpanded = toggle.getAttribute('aria-expanded') === 'true';
+      toggle.setAttribute('aria-expanded', String(!isExpanded));
+      mobileMenu.setAttribute('aria-hidden', String(isExpanded));
+      mobileMenu.classList.toggle('open');
+    };
+    toggle.addEventListener('click', onToggleClick);
+    addDisposer(() => toggle.removeEventListener('click', onToggleClick));
+
+    // Close mobile menu when clicking a link
+    const mobileLinks = mobileMenu.querySelectorAll('.mobile-nav-link');
+    mobileLinks.forEach((link) => {
+      link.addEventListener('click', closeMenu);
+      addDisposer(() => link.removeEventListener('click', closeMenu));
+    });
+
+    // Close mobile menu on escape key
+    const onKeydown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && mobileMenu.classList.contains('open')) {
+        closeMenu();
+      }
+    };
+    document.addEventListener('keydown', onKeydown);
+    addDisposer(() => document.removeEventListener('keydown', onKeydown));
+
+    cleanupNavigation = () => {
+      closeMenu();
+      disposers.forEach((dispose) => dispose());
+      cleanupNavigation = null;
+    };
+  }
+
+  const handleNavigationBeforeSwap = () => {
+    cleanupNavigation?.();
+  };
+
+  const lifecycleFlag = 'navigationLifecycleBound';
+  if (document.documentElement.dataset[lifecycleFlag] !== '1') {
+    document.addEventListener('astro:before-swap', handleNavigationBeforeSwap);
+    document.addEventListener('astro:page-load', initNavigation);
+    document.documentElement.dataset[lifecycleFlag] = '1';
+  }
+
+  initNavigation();
+</script>

package/components/base/Projects.astro

@@ -0,0 +1,207 @@
+---
+/**
+ * Projects - Portfolio projects grid section.
+ * 
+ * Displays project cards with:
+ * - Title and description
+ * - Technology tags
+ * - Links to source code (repo) and live demo (link)
+ * Responsive grid: 3 columns on large screens, auto-fit otherwise.
+ */
+import type { ThemeContext } from '@mintfolio/theme-api';
+import type { VerdantSettings } from '../../settings';
+
+/** Public site data supplied by the containing theme page. */
+interface Props { theme: ThemeContext<VerdantSettings>; }
+import type { Project } from '@mintfolio/theme-api';
+
+const { theme } = Astro.props;
+const { projects } = theme.site;
+---
+
+<section id="projects" class="projects-section">
+  <div class="container">
+    <h2 class="section-title gradient-text">项目作品</h2>
+    
+    <div class="projects-grid">
+      {projects.map((project: Project) => (
+        <article class="project-card glass-card">
+          <div class="card-content">
+            <h3 class="project-title">{project.title}</h3>
+            <p class="project-description">{project.description}</p>
+            
+            <div class="project-tags">
+              {project.tags.map((tag: string) => (
+                <span class="tag">{tag}</span>
+              ))}
+            </div>
+            
+            <div class="project-links">
+              {project.repo && (
+                <a 
+                  href={project.repo} 
+                  class="project-link" 
+                  target="_blank" 
+                  rel="noopener noreferrer"
+                  aria-label={`查看 ${project.title} 源码`}
+                >
+                  <svg class="link-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"/>
+                  </svg>
+                  <span>源码</span>
+                </a>
+              )}
+              {project.link && (
+                <a 
+                  href={project.link} 
+                  class="project-link" 
+                  target="_blank" 
+                  rel="noopener noreferrer"
+                  aria-label={`访问 ${project.title} 在线演示`}
+                >
+                  <svg class="link-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>
+                    <polyline points="15 3 21 3 21 9"/>
+                    <line x1="10" y1="14" x2="21" y2="3"/>
+                  </svg>
+                  <span>演示</span>
+                </a>
+              )}
+            </div>
+          </div>
+        </article>
+      ))}
+    </div>
+  </div>
+</section>
+
+<style>
+  .projects-section {
+    padding: var(--section-padding, 5rem 0);
+  }
+
+  .container {
+    max-width: var(--container-max, 1200px);
+    margin: 0 auto;
+    padding: 0 var(--container-padding, 1.5rem);
+  }
+
+  .section-title {
+    font-size: var(--section-title-size, 2.5rem);
+    font-weight: 700;
+    text-align: center;
+    margin-bottom: var(--section-title-margin, 3rem);
+  }
+
+  .projects-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 350px), 1fr));
+    gap: var(--grid-gap, 1.5rem);
+  }
+
+  .project-card {
+    position: relative;
+    transition: transform var(--transition-duration, 0.3s) ease, box-shadow var(--transition-duration, 0.3s) ease;
+  }
+
+  .project-card:hover {
+    transform: translateY(-4px);
+    box-shadow: var(--card-hover-shadow, 0 20px 40px rgba(0, 0, 0, 0.2));
+  }
+
+  .card-content {
+    padding: var(--card-padding, 1.5rem);
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+
+  .project-title {
+    font-size: var(--project-title-size, 1.25rem);
+    font-weight: 600;
+    color: var(--text-primary, #ffffff);
+    margin-bottom: 0.75rem;
+  }
+
+  .project-description {
+    font-size: var(--project-desc-size, 0.95rem);
+    color: var(--text-secondary, rgba(255, 255, 255, 0.75));
+    line-height: 1.6;
+    margin-bottom: 1rem;
+    flex-grow: 1;
+  }
+
+  .project-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    margin-bottom: 1.25rem;
+  }
+
+  .tag {
+    display: inline-block;
+    padding: 0.25rem 0.75rem;
+    font-size: var(--tag-size, 0.75rem);
+    font-weight: 500;
+    color: var(--tag-color, rgba(255, 255, 255, 0.9));
+    background: var(--tag-bg, rgba(255, 255, 255, 0.1));
+    border: 1px solid var(--tag-border, rgba(255, 255, 255, 0.15));
+    border-radius: var(--tag-radius, 9999px);
+    transition: background var(--transition-duration, 0.2s) ease;
+  }
+
+  .tag:hover {
+    background: var(--tag-bg-hover, rgba(255, 255, 255, 0.2));
+  }
+
+  .project-links {
+    display: flex;
+    gap: 1rem;
+    margin-top: auto;
+    padding-top: 1rem;
+    border-top: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.1));
+  }
+
+  .project-link {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: var(--link-size, 0.875rem);
+    font-weight: 500;
+    color: var(--link-color, rgba(255, 255, 255, 0.8));
+    text-decoration: none;
+    transition: color var(--transition-duration, 0.2s) ease;
+  }
+
+  .project-link:hover {
+    color: var(--link-color-hover, #ffffff);
+  }
+
+  .link-icon {
+    width: 1.125rem;
+    height: 1.125rem;
+    flex-shrink: 0;
+  }
+
+  /* Responsive adjustments */
+  @media (max-width: 768px) {
+    .projects-section {
+      padding: var(--section-padding-mobile, 3rem 0);
+    }
+
+    .section-title {
+      font-size: var(--section-title-size-mobile, 2rem);
+      margin-bottom: var(--section-title-margin-mobile, 2rem);
+    }
+
+    .projects-grid {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  @media (min-width: 1024px) {
+    .projects-grid {
+      grid-template-columns: repeat(3, 1fr);
+    }
+  }
+</style>

package/components/base/Skills.astro

@@ -0,0 +1,158 @@
+---
+/**
+ * Skills - Skills section with progress bar visualization.
+ * 
+ * Displays skills grouped by category (Frontend, Backend, Tools, etc.)
+ * with animated progress bars showing proficiency levels (0-100%).
+ * Responsive grid: 3 columns on desktop, 2 on tablet, 1 on mobile.
+ */
+import type { ThemeContext } from '@mintfolio/theme-api';
+import type { VerdantSettings } from '../../settings';
+
+/** Public site data supplied by the containing theme page. */
+interface Props { theme: ThemeContext<VerdantSettings>; }
+import type { SkillCategory } from '@mintfolio/theme-api';
+
+const { theme } = Astro.props;
+const skills: SkillCategory[] = theme.site.skills;
+---
+
+<section id="skills" class="skills-section">
+  <div class="container">
+    <h2 class="section-title gradient-text">技能</h2>
+    
+    <div class="skills-grid">
+      {skills.map((category, categoryIndex) => (
+        <div class="glass-card skill-category">
+          <h3 class="category-name">{category.category}</h3>
+          
+          <div class="skill-list">
+            {category.items.map((skill, skillIndex) => (
+              <div class="skill-item">
+                <div class="skill-header">
+                  <span class="skill-name">{skill.name}</span>
+                  <span class="skill-level">{skill.level}%</span>
+                </div>
+                <div class="progress-track">
+                  <div 
+                    class="progress-fill" 
+                    style={`--target-width: ${skill.level}%; --delay: ${(categoryIndex * category.items.length + skillIndex) * 0.1}s`}
+                  ></div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  </div>
+</section>
+
+<style>
+  .skills-section {
+    padding: var(--section-padding, 6rem 2rem);
+    position: relative;
+  }
+
+  .container {
+    max-width: var(--max-width, 1200px);
+    margin: 0 auto;
+  }
+
+  .section-title {
+    font-size: 2.5rem;
+    font-weight: 700;
+    text-align: center;
+    margin-bottom: 3rem;
+  }
+
+  .skills-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 1.5rem;
+  }
+
+  @media (max-width: 1024px) {
+    .skills-grid {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+
+  @media (max-width: 640px) {
+    .skills-grid {
+      grid-template-columns: 1fr;
+    }
+
+    .section-title {
+      font-size: 2rem;
+    }
+  }
+
+  .skill-category {
+    padding: 1.5rem;
+  }
+
+  .category-name {
+    font-size: 1.25rem;
+    font-weight: 600;
+    color: var(--color-text, #f8fafc);
+    margin-bottom: 1.25rem;
+    padding-bottom: 0.75rem;
+    border-bottom: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
+  }
+
+  .skill-list {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .skill-item {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .skill-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .skill-name {
+    font-size: 0.9rem;
+    color: var(--color-text, #f8fafc);
+    font-weight: 500;
+  }
+
+  .skill-level {
+    font-size: 0.8rem;
+    color: var(--color-text-muted, #94a3b8);
+    font-weight: 500;
+  }
+
+  .progress-track {
+    height: 6px;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 3px;
+    overflow: hidden;
+  }
+
+  .progress-fill {
+    height: 100%;
+    width: 0;
+    background: linear-gradient(90deg, var(--color-primary, #8b5cf6), var(--color-secondary, #06b6d4));
+    border-radius: 3px;
+    animation: fillProgress 0.8s ease-out forwards;
+    animation-delay: var(--delay, 0s);
+  }
+
+  @keyframes fillProgress {
+    from {
+      width: 0;
+    }
+    to {
+      width: var(--target-width, 0%);
+    }
+  }
+</style>