@mintfolio/theme-verdant 0.2.0

package/pages/page.astro

@@ -0,0 +1,434 @@
+---
+/**
+ * About page - Personal introduction and profile details.
+ *
+ * Displays extended profile information including:
+ * - Avatar and basic info
+ * - Bio/introduction sections
+ * - Social links with platform icons
+ * - Skills breakdown
+ */
+import Base from '../layouts/Base.astro';
+import type { PageProps, StaticPageData } from '@mintfolio/theme-api/astro';
+import type { VerdantSettings } from '../settings';
+
+interface Props extends PageProps<VerdantSettings, StaticPageData> {}
+import Image from '@mintfolio/core/components/Image.astro';
+
+const { theme, page } = Astro.props;
+const platformIcons: Record<string, string> = {
+  github: '🐙',
+  email: '✉️',
+  twitter: '🐦',
+  linkedin: '💼',
+  bilibili: '📺',
+  juejin: '🧩',
+};
+
+const profileAvatar = theme.site.profile.avatar;
+---
+
+<Base theme={theme} page={page}>
+  <main class="about-page" id="content">
+    <div class="container">
+      <nav class="page-nav" aria-label="页面导航">
+        <a href={theme.urls.home()} class="back-btn" aria-label="返回首页">← 返回首页</a>
+      </nav>
+
+      <header class="about-header">
+        <Image src={profileAvatar} alt={`${theme.site.profile.name}的头像`} class="avatar" width={84} height={84} />
+        <div>
+          <h1 class="title">关于我</h1>
+          <p class="subtitle">{theme.site.profile.name} · 📍{theme.site.profile.location}</p>
+        </div>
+      </header>
+
+      <section class="card contact-card" aria-labelledby="contact-heading">
+        <h2 class="section-title" id="contact-heading"><span class="title-icon" aria-hidden="true">📬</span>联系我</h2>
+        <p>邮箱：<a href={`mailto:${theme.site.contact.email}`}>{theme.site.contact.email}</a></p>
+        <div class="social-links">
+          {theme.site.social.map((item) => (
+            <a class="social-chip" href={item.url} target="_blank" rel="noopener noreferrer" aria-label={`访问${item.platform}`}>
+              <span class="social-emoji" aria-hidden="true">{platformIcons[item.icon] || '🔗'}</span>
+              <span>{item.platform}</span>
+            </a>
+          ))}
+        </div>
+      </section>
+
+      <section class="card intro-card" aria-labelledby="intro-heading">
+        <h2 class="section-title" id="intro-heading"><span class="title-icon" aria-hidden="true">👋</span>个人简介</h2>
+        <p class="bio">{theme.site.profile.bio}</p>
+      </section>
+
+      <section class="card" aria-labelledby="skills-heading">
+        <h2 class="section-title" id="skills-heading"><span class="title-icon" aria-hidden="true">🛠️</span>技能栈</h2>
+        <div class="skill-groups">
+          {theme.site.skills.map((group) => (
+            <article class="skill-group">
+              <h3>{group.category}</h3>
+              <ul>
+                {group.items.map((item) => (
+                  <li>
+                    <span>{item.name}</span>
+                    <span class="level">{item.level}%</span>
+                  </li>
+                ))}
+              </ul>
+            </article>
+          ))}
+        </div>
+      </section>
+
+      <section class="card" aria-labelledby="projects-heading">
+        <h2 class="section-title" id="projects-heading"><span class="title-icon" aria-hidden="true">🚀</span>项目</h2>
+        <div class="project-list">
+          {theme.site.projects.map((project) => (
+            <article class="project-item" aria-labelledby={`project-${project.title}`}>
+              <h3 id={`project-${project.title}`}>{project.title}</h3>
+              <p>{project.description}</p>
+              <div class="tags">
+                {project.tags.map((tag) => (
+                  <span class="tag">{tag}</span>
+                ))}
+              </div>
+              <div class="links">
+                {project.link && (
+                  <a href={project.link} target="_blank" rel="noopener noreferrer" aria-label={`${project.title}在线预览`}>🌐 在线预览</a>
+                )}
+                {project.repo && (
+                  <a href={project.repo} target="_blank" rel="noopener noreferrer" aria-label={`${project.title}源码`}>📦 源码</a>
+                )}
+              </div>
+            </article>
+          ))}
+        </div>
+      </section>
+
+      <footer class="footer">
+        <p>© {new Date().getFullYear()} {theme.site.profile.name}</p>
+        <p class="site-links">
+          <a href={theme.urls.rss()} target="_blank" rel="noopener noreferrer">RSS 订阅</a>
+          <span>·</span>
+          <a href={theme.urls.sitemap()} target="_blank" rel="noopener noreferrer">网站树</a>
+        </p>
+        {theme.site.icp && (
+          <p class="icp">
+            <a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer">{theme.site.icp}</a>
+          </p>
+        )}
+      </footer>
+    </div>
+  </main>
+</Base>
+
+<style>
+  .about-page {
+    min-height: 100vh;
+    padding: 2rem 1.5rem 4rem;
+    background:
+      radial-gradient(120% 120% at 100% 0%, color-mix(in srgb, var(--color-primary) 10%, transparent) 0%, transparent 50%),
+      var(--color-bg);
+  }
+
+  .container {
+    max-width: 960px;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    gap: 1.25rem;
+  }
+
+  .page-nav {
+    margin-bottom: 0.5rem;
+  }
+
+  .back-btn {
+    display: inline-flex;
+    align-items: center;
+    padding: 0.5rem 0.9rem;
+    border-radius: var(--radius-md);
+    border: 1px solid var(--color-border);
+    color: var(--color-text-muted);
+    background: var(--color-surface);
+    text-decoration: none;
+    transition: all var(--transition-fast);
+  }
+
+  .back-btn:hover {
+    color: var(--color-secondary);
+    border-color: var(--color-secondary);
+  }
+
+  .about-header,
+  .card,
+  .footer {
+    background: var(--color-surface);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-sm);
+    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
+  }
+
+  .card:hover,
+  .about-header:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-md);
+  }
+
+  .about-header {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: 1rem;
+    align-items: center;
+    background: linear-gradient(120deg, var(--color-play-soft), var(--color-accent-soft));
+    position: relative;
+    overflow: hidden;
+    box-shadow: var(--shadow-offset);
+    padding: 2rem;
+  }
+
+  .avatar {
+    width: 84px;
+    height: 84px;
+    border-radius: 50%;
+    border: 3px solid var(--color-primary);
+    object-fit: cover;
+  }
+
+  .title {
+    font-family: var(--font-display);
+    font-size: clamp(1.8rem, 4vw, 2.4rem);
+    margin-bottom: 0.3rem;
+    color: var(--color-text-headline);
+  }
+
+  .subtitle {
+    color: var(--color-text-muted);
+    margin-bottom: 0.5rem;
+    font-size: 0.95rem;
+  }
+
+  .bio {
+    color: var(--color-text);
+    line-height: 1.75;
+  }
+
+  .card {
+    padding: 1.3rem 1.4rem;
+  }
+
+  .card h2 {
+    font-family: var(--font-display);
+    margin-bottom: 1rem;
+    color: var(--color-text-headline);
+  }
+
+  .section-title {
+    display: flex;
+    align-items: center;
+    gap: 0.45rem;
+  }
+
+  .title-icon {
+    width: 28px;
+    height: 28px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    background: color-mix(in srgb, var(--color-primary) 18%, transparent);
+    font-size: 0.95rem;
+  }
+
+  .skill-groups {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+    gap: 0.85rem;
+  }
+
+  .skill-group {
+    padding: 0.9rem;
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-md);
+    background: var(--color-bg-alt);
+  }
+
+  .skill-group h3 {
+    margin-bottom: 0.6rem;
+    font-size: 0.95rem;
+    color: var(--color-text);
+  }
+
+  .skill-group ul {
+    list-style: none;
+    display: flex;
+    flex-direction: column;
+    gap: 0.45rem;
+    margin: 0;
+    padding: 0;
+  }
+
+  .skill-group li {
+    display: flex;
+    justify-content: space-between;
+    color: var(--color-text-muted);
+    font-size: 0.87rem;
+  }
+
+  .level {
+    color: var(--color-secondary);
+    font-family: var(--font-mono);
+  }
+
+  .project-list {
+    display: grid;
+    gap: 0.85rem;
+  }
+
+  .project-item {
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-md);
+    padding: 1rem;
+    background: var(--color-bg-alt);
+  }
+
+  .project-item h3 {
+    color: var(--color-text-headline);
+    margin-bottom: 0.4rem;
+  }
+
+  .project-item p {
+    color: var(--color-text-muted);
+    line-height: 1.65;
+    margin-bottom: 0.7rem;
+  }
+
+  .tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.35rem;
+    margin-bottom: 0.8rem;
+  }
+
+  .tag {
+    background: var(--color-tag-bg);
+    color: var(--color-tag-text);
+    border-radius: var(--radius-full);
+    padding: 0.16rem 0.55rem;
+    font-size: 0.74rem;
+  }
+
+  .links {
+    display: flex;
+    gap: 0.8rem;
+  }
+
+  .links a,
+  .contact-card a,
+  .icp a {
+    color: var(--color-secondary);
+    text-decoration: none;
+    transition: opacity var(--transition-fast);
+  }
+
+  .links a:hover,
+  .contact-card a:hover,
+  .icp a:hover {
+    opacity: 0.75;
+  }
+
+  .social-links {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.75rem;
+    margin-top: 0.6rem;
+  }
+
+  .social-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+    padding: 0.35rem 0.65rem;
+    border-radius: var(--radius-full);
+    border: 1px solid var(--color-border);
+    background: var(--color-bg-alt);
+    color: var(--color-text);
+    text-decoration: none;
+    font-size: 0.82rem;
+    transition: all var(--transition-fast);
+  }
+
+  .social-chip:hover {
+    border-color: var(--color-secondary);
+    color: var(--color-secondary);
+    transform: translateY(-1px);
+  }
+
+  .contact-card .social-chip {
+    transition:
+      transform var(--transition-fast),
+      color var(--transition-fast),
+      border-color var(--transition-fast),
+      opacity var(--transition-fast);
+  }
+
+  .social-emoji {
+    font-size: 0.9rem;
+    line-height: 1;
+  }
+
+  .footer {
+    padding: 1rem 1.2rem;
+    text-align: center;
+    color: var(--color-text-muted);
+    font-size: 0.86rem;
+  }
+
+  .icp {
+    margin-top: 0.35rem;
+  }
+
+  .site-links {
+    margin-top: 0.35rem;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.45rem;
+    font-size: 0.82rem;
+  }
+
+  .site-links a {
+    color: var(--color-secondary);
+    text-decoration: none;
+  }
+
+  .site-links a:hover {
+    opacity: 0.75;
+  }
+
+  @media (max-width: 680px) {
+    .about-header {
+      grid-template-columns: 1fr;
+      text-align: center;
+      justify-items: center;
+    }
+  }
+
+  .about-header::after { content: ''; width: 160px; height: 160px; border: 30px solid var(--color-accent); border-radius: 50%; position: absolute; right: -70px; top: -60px; opacity: .25; pointer-events: none; }
+
+  .about-header > * { position: relative; z-index: 1; }
+
+  .contact-card { border-top: 4px solid var(--color-primary); }
+
+  .intro-card { border-top: 4px solid var(--color-accent); }
+
+  .skill-group:nth-child(2) { background: var(--color-accent-soft); }
+
+  .skill-group:nth-child(3) { background: var(--color-play-soft); }
+
+  .project-item { border-left: 4px solid var(--color-primary); }
+
+  .project-item:nth-child(2) { border-left-color: var(--color-accent); }
+
+  .project-item:nth-child(3) { border-left-color: var(--color-play); }
+</style>