299 lines
8.0 KiB
Plaintext
299 lines
8.0 KiB
Plaintext
---
|
|
import Layout from "@/layouts/Layout.astro";
|
|
import Tag from "@/components/Tag.astro";
|
|
import { metadata } from "@/consts";
|
|
|
|
const { author, email, githubUrl, aboutBio, skills } = metadata;
|
|
---
|
|
|
|
<Layout title="关于" description="关于我和这个博客">
|
|
<article class="about">
|
|
<!-- 个人简介区域 -->
|
|
<section class="profile-section">
|
|
<div class="avatar-container">
|
|
<div class="avatar">
|
|
<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<circle cx="50" cy="50" r="50" fill="url(#gradient)"/>
|
|
<circle cx="50" cy="35" r="15" fill="white" opacity="0.9"/>
|
|
<path d="M25 75 Q25 55, 50 55 T75 75" fill="white" opacity="0.9"/>
|
|
<defs>
|
|
<linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#0066FF;stop-opacity:1" />
|
|
<stop offset="100%" style="stop-color:#7B1FA2;stop-opacity:1" />
|
|
</linearGradient>
|
|
</defs>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<h1 class="page-title">关于我</h1>
|
|
|
|
<div class="bio">
|
|
{aboutBio.split('\n\n').map((paragraph: string) => (
|
|
<p>{paragraph}</p>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 技能标签云 -->
|
|
<section class="skills-section">
|
|
<h2 class="section-title">技能标签</h2>
|
|
<div class="skills-cloud">
|
|
{skills.map((skill: string) => (
|
|
<Tag tag={skill} size="medium" />
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 联系方式 -->
|
|
<section class="contact-section">
|
|
<h2 class="section-title">联系方式</h2>
|
|
<div class="contact-links">
|
|
{email && (
|
|
<a href={`mailto:${email}`} class="contact-link">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
|
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" stroke-width="2"/>
|
|
<polyline points="22,6 12,13 2,6" stroke-width="2"/>
|
|
</svg>
|
|
<span>Email</span>
|
|
</a>
|
|
)}
|
|
|
|
{githubUrl && (
|
|
<a href={githubUrl} class="contact-link" target="_blank" rel="noopener">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
|
|
</svg>
|
|
<span>GitHub</span>
|
|
</a>
|
|
)}
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 关于博客 -->
|
|
<section class="blog-info-section">
|
|
<h2 class="section-title">关于这个博客</h2>
|
|
<div class="blog-info">
|
|
<p>
|
|
这个博客使用 <a href="https://astro.build" target="_blank" rel="noopener">Astro</a>
|
|
构建，配合 <a href="https://www.solidjs.com" target="_blank" rel="noopener">SolidJS</a>
|
|
实现交互功能。
|
|
</p>
|
|
<p>
|
|
设计追求简洁、优雅和高性能，支持明暗主题切换，提供舒适的阅读体验。
|
|
</p>
|
|
<div class="tech-stack">
|
|
<div class="tech-item">
|
|
<strong>框架</strong>
|
|
<span>Astro</span>
|
|
</div>
|
|
<div class="tech-item">
|
|
<strong>UI 库</strong>
|
|
<span>SolidJS</span>
|
|
</div>
|
|
<div class="tech-item">
|
|
<strong>语言</strong>
|
|
<span>TypeScript</span>
|
|
</div>
|
|
<div class="tech-item">
|
|
<strong>样式</strong>
|
|
<span>CSS Variables</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</article>
|
|
</Layout>
|
|
|
|
<style>
|
|
.about {
|
|
max-width: var(--content-width);
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* 个人简介区域 */
|
|
.profile-section {
|
|
text-align: center;
|
|
margin-bottom: var(--space-2xl);
|
|
padding-bottom: var(--space-2xl);
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.avatar-container {
|
|
margin-bottom: var(--space-xl);
|
|
}
|
|
|
|
.avatar {
|
|
width: 120px;
|
|
height: 120px;
|
|
margin: 0 auto;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
.avatar svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.page-title {
|
|
font-size: var(--text-h1);
|
|
line-height: var(--line-h1);
|
|
font-weight: 800;
|
|
margin: 0 0 var(--space-lg) 0;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.bio {
|
|
max-width: 600px;
|
|
margin: 0 auto;
|
|
text-align: left;
|
|
}
|
|
|
|
.bio p {
|
|
font-size: var(--text-base);
|
|
line-height: var(--line-base);
|
|
color: var(--text-secondary);
|
|
margin-bottom: var(--space-md);
|
|
}
|
|
|
|
/* 技能区域 */
|
|
.skills-section {
|
|
margin-bottom: var(--space-2xl);
|
|
padding-bottom: var(--space-2xl);
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.section-title {
|
|
font-size: var(--text-h2);
|
|
line-height: var(--line-h2);
|
|
font-weight: 700;
|
|
margin: 0 0 var(--space-lg) 0;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.skills-cloud {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--space-md);
|
|
justify-content: center;
|
|
}
|
|
|
|
/* 联系方式区域 */
|
|
.contact-section {
|
|
margin-bottom: var(--space-2xl);
|
|
padding-bottom: var(--space-2xl);
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.contact-links {
|
|
display: flex;
|
|
gap: var(--space-lg);
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.contact-link {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--space-sm);
|
|
padding: var(--space-md) var(--space-lg);
|
|
background-color: var(--bg-secondary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--radius-md);
|
|
color: var(--text-primary);
|
|
text-decoration: none;
|
|
transition: all var(--transition-base);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.contact-link:hover {
|
|
background-color: var(--accent-color);
|
|
border-color: var(--accent-color);
|
|
color: white;
|
|
transform: translateY(-2px);
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
/* 博客信息区域 */
|
|
.blog-info-section {
|
|
margin-bottom: var(--space-2xl);
|
|
}
|
|
|
|
.blog-info p {
|
|
font-size: var(--text-base);
|
|
line-height: var(--line-base);
|
|
color: var(--text-secondary);
|
|
margin-bottom: var(--space-md);
|
|
}
|
|
|
|
.blog-info a {
|
|
color: var(--accent-color);
|
|
text-decoration: none;
|
|
border-bottom: 1px solid transparent;
|
|
transition: border-color var(--transition-fast);
|
|
}
|
|
|
|
.blog-info a:hover {
|
|
border-bottom-color: var(--accent-color);
|
|
}
|
|
|
|
.tech-stack {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
|
gap: var(--space-md);
|
|
margin-top: var(--space-lg);
|
|
}
|
|
|
|
.tech-item {
|
|
padding: var(--space-md);
|
|
background-color: var(--bg-secondary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--radius-sm);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-xs);
|
|
}
|
|
|
|
.tech-item strong {
|
|
font-size: var(--text-small);
|
|
color: var(--text-secondary);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.tech-item span {
|
|
font-size: var(--text-base);
|
|
color: var(--text-primary);
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* 响应式设计 */
|
|
@media (max-width: 640px) {
|
|
.page-title {
|
|
font-size: 28px;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 24px;
|
|
}
|
|
|
|
.bio {
|
|
text-align: left;
|
|
}
|
|
|
|
.contact-links {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.contact-link {
|
|
justify-content: center;
|
|
}
|
|
|
|
.tech-stack {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
</style>
|