|
|
@@ -0,0 +1,116 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="zh-CN">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>个人主页 | Java程序员</title>
|
|
|
+ <!-- Bootstrap 5 CSS CDN -->
|
|
|
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
|
+ <!-- 极少量自定义样式，仅作微调 -->
|
|
|
+ <style>
|
|
|
+ .avatar {
|
|
|
+ width: 140px;
|
|
|
+ height: 140px;
|
|
|
+ object-fit: cover;
|
|
|
+ border-radius: 50%;
|
|
|
+ border: 3px solid #fff;
|
|
|
+ box-shadow: 0 4px 8px rgba(0,0,0,0.1);
|
|
|
+ }
|
|
|
+ .skill-badge {
|
|
|
+ background-color: #e9ecef;
|
|
|
+ color: #2c3e50;
|
|
|
+ padding: 0.4rem 1rem;
|
|
|
+ border-radius: 2rem;
|
|
|
+ font-weight: 500;
|
|
|
+ transition: all 0.2s;
|
|
|
+ }
|
|
|
+ .skill-badge:hover {
|
|
|
+ background-color: #0d6efd;
|
|
|
+ color: white;
|
|
|
+ transform: translateY(-2px);
|
|
|
+ }
|
|
|
+ .project-card {
|
|
|
+ transition: transform 0.2s;
|
|
|
+ }
|
|
|
+ .project-card:hover {
|
|
|
+ transform: translateY(-5px);
|
|
|
+ }
|
|
|
+ footer {
|
|
|
+ font-size: 0.85rem;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body class="bg-light">
|
|
|
+
|
|
|
+ <!-- 主体内容 -->
|
|
|
+ <div class="container my-5">
|
|
|
+ <!-- 头像与基本信息 -->
|
|
|
+ <div class="row justify-content-center mb-4">
|
|
|
+ <div class="col-md-8 text-center">
|
|
|
+ <img src="https://ts1.tc.mm.bing.net/th/id/OIP-C.AQGk9qeTNhgOj7L_HkbBRwAAAA?w=199&h=211&c=8&rs=1&qlt=90&o=6&pid=2.1&rm=2" alt="头像" class="avatar mb-3">
|
|
|
+ <h2 class="fw-bold">黄略</h2>
|
|
|
+ <p class="lead text-secondary">Java程序员 | 后端开发 | 技术爱好者</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 关于我 -->
|
|
|
+ <div class="card shadow-sm mb-4">
|
|
|
+ <div class="card-body">
|
|
|
+ <h3 class="card-title h5 fw-bold border-start border-primary border-4 ps-3">📌 关于我</h3>
|
|
|
+ <p class="card-text mt-3">
|
|
|
+ 计算机专业毕业，热爱编程与系统设计。具备扎实的Java基础，熟悉主流框架和微服务架构。
|
|
|
+ 乐于团队协作，追求简洁高效的代码。持续学习新技术，致力于构建稳定、可扩展的后端服务。
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 掌握技能 -->
|
|
|
+ <div class="card shadow-sm mb-4">
|
|
|
+ <div class="card-body">
|
|
|
+ <h3 class="card-title h5 fw-bold border-start border-primary border-4 ps-3">⚙️ 掌握技能</h3>
|
|
|
+ <div class="d-flex flex-wrap gap-2 mt-3">
|
|
|
+ <span class="skill-badge">Java / Spring Boot</span>
|
|
|
+ <span class="skill-badge">Spring Cloud / Alibaba</span>
|
|
|
+ <span class="skill-badge">MySQL / PostgreSQL</span>
|
|
|
+ <span class="skill-badge">Redis / RabbitMQ</span>
|
|
|
+ <span class="skill-badge">MyBatis / JPA</span>
|
|
|
+ <span class="skill-badge">Docker / Kubernetes</span>
|
|
|
+ <span class="skill-badge">Git / Maven</span>
|
|
|
+ <span class="skill-badge">Linux / Nginx</span>
|
|
|
+ <span class="skill-badge">HTML / CSS / Bootstrap</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ <!-- 联系我 -->
|
|
|
+ <div class="card shadow-sm mb-4">
|
|
|
+ <div class="card-body">
|
|
|
+ <h3 class="card-title h5 fw-bold border-start border-primary border-4 ps-3">📬 联系我</h3>
|
|
|
+ <ul class="list-group list-group-flush mt-3">
|
|
|
+ <li class="list-group-item d-flex justify-content-between align-items-center">
|
|
|
+ <span>📧 Email</span>
|
|
|
+ <span class="text-secondary">adad.li@ada.com</span>
|
|
|
+ </li>
|
|
|
+ <li class="list-group-item d-flex justify-content-between align-items-center">
|
|
|
+ <span>📱 手机</span>
|
|
|
+ <span class="text-secondary">+86 123 4567 8901</span>
|
|
|
+ </li>
|
|
|
+ <li class="list-group-item d-flex justify-content-between align-items-center">
|
|
|
+ <span>🏠 地址</span>
|
|
|
+ <span class="text-secondary">白云区良田中路191号</span>
|
|
|
+ </li>
|
|
|
+ <li class="list-group-item d-flex justify-content-between align-items-center">
|
|
|
+ <span>💻 GitHub</span>
|
|
|
+ <span class="text-secondary">github.com/adsd-li</span>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Bootstrap JS Bundle (可选，用于某些交互) -->
|
|
|
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
|
|
|
+</body>
|
|
|
+</html>
|
