violin/violin-cv
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add ISP footer link
continuous-integration/drone/push Build is failing
Details

Browse Source
This commit is contained in:
simple321vip
2026-06-29 23:47:46 +08:00
parent 86d7359727
commit 299cdb84e0
5 changed files with 799 additions and 418 deletions
Download Patch File Download Diff File Expand all files Collapse all files
k8s/README.md
+43
View File
@@ -0,0 +1,43 @@
# violin-cv K8s 部署
## 一键部署
```bash
kubectl apply -f namespace.yaml
kubectl apply -f deployment.yaml
kubectl apply -f service.yaml
kubectl apply -f ingress.yaml
```
## 验证
```bash
# 看 pod 启动
kubectl get pods -n drone -l app=violin-cv
# 看 service / ingress
kubectl get svc,ing -n drone -l app=violin-cv
# 测访问
curl -I http://cv.violin-work.online/
```
## 文件说明
| 文件 | 作用 |
|------|------|
| `namespace.yaml` | K8s namespace（**不会真正创建**，因为 drone namespace 已存在；保留是声明依赖） |
| `deployment.yaml` | 1 个 nginx 容器跑 HTML，replicas=1，资源极省 |
| `service.yaml` | ClusterIP，端口 80 |
| `ingress.yaml` | `cv.violin-work.online` → service:80（TLS 暂时不配，用 cert-manager 后再说） |
## 镜像
由 `.drone.yml` 自动 push 到 `ccr.ccs.tencentyun.com/violin/violin-cv:latest`
## 域名
`cv.violin-work.online` 需要：
1. 你的 DNS 把这个域名解析到 K8s ingress 公网 IP
2. 集群已装 nginx-ingress-controller
3. （可选）cert-manager 给 `cv.violin-work.online` 申请证书
k8s/deployment.yaml
+31
View File
@@ -0,0 +1,31 @@
apiVersion: apps/v1
kind: Deployment
metadata:
name: violin-cv
namespace: violin
labels:
app: violin-cv
spec:
replicas: 1
selector:
matchLabels:
app: violin-cv
template:
metadata:
labels:
app: violin-cv
spec:
containers:
- name: cv
image: ccr.ccs.tencentyun.com/violin/violin-cv:latest
imagePullPolicy: Always
ports:
- name: http
containerPort: 80
resources:
requests:
cpu: 50m
memory: 64Mi
limits:
cpu: 200m
memory: 128Mi
k8s/ingress.yaml
+26
View File
@@ -0,0 +1,26 @@
kind: Ingress
apiVersion: networking.k8s.io/v1
metadata:
name: violin-ingress
namespace: violin
creationTimestamp: "2026-06-29T15:36:21Z"
annotations:
kubesphere.io/creator: akadmin
traefik.ingress.kubernetes.io/router.entrypoints: websecure
spec:
ingressClassName: traefik
tls:
- hosts:
- cv.violin-home.cn
secretName: violin-tls
rules:
- host: cv.violin-home.cn
http:
paths:
- path: /
pathType: Prefix
backend:
service:
name: violin-cv
port:
number: 80
k8s/service.yaml
+13
View File
@@ -0,0 +1,13 @@
apiVersion: v1
kind: Service
metadata:
name: violin-cv
namespace: violin
spec:
type: ClusterIP
selector:
app: violin-cv
ports:
- name: http
port: 80
targetPort: http
src/pages/index.html
+341 -73
View File
@@ -1,13 +1,22 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="zh-CN"> <html lang="zh-CN">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Portfolio</title> <title>Portfolio</title>
<link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.googleapis.com" />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet" /> <link
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=JetBrains+Mono:wght@400;600&display=swap"
rel="stylesheet" />
<style> <style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } *,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root { :root {
--bg: #0a0a0f; --bg: #0a0a0f;
@@ -21,7 +30,9 @@
--radius: 14px; --radius: 14px;
} }
html { scroll-behavior: smooth; } html {
scroll-behavior: smooth;
}
body { body {
font-family: 'Inter', system-ui, sans-serif; font-family: 'Inter', system-ui, sans-serif;
@@ -53,28 +64,47 @@
z-index: 0; z-index: 0;
animation: orbFloat 20s ease-in-out infinite; animation: orbFloat 20s ease-in-out infinite;
} }
.orb-1 { .orb-1 {
width: 500px; height: 500px; width: 500px;
height: 500px;
background: radial-gradient(circle, rgba(108, 99, 255, 0.15), transparent 70%); background: radial-gradient(circle, rgba(108, 99, 255, 0.15), transparent 70%);
top: -150px; right: -100px; top: -150px;
right: -100px;
animation-delay: 0s; animation-delay: 0s;
} }
.orb-2 { .orb-2 {
width: 400px; height: 400px; width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(0, 212, 255, 0.1), transparent 70%); background: radial-gradient(circle, rgba(0, 212, 255, 0.1), transparent 70%);
bottom: -100px; left: -80px; bottom: -100px;
left: -80px;
animation-delay: -10s; animation-delay: -10s;
} }
@keyframes orbFloat { @keyframes orbFloat {
0%, 100% { transform: translate(0,0) scale(1); }
33% { transform: translate(30px,-40px) scale(1.05); } 0%,
66% { transform: translate(-20px,20px) scale(0.95); } 100% {
transform: translate(0, 0) scale(1);
}
33% {
transform: translate(30px, -40px) scale(1.05);
}
66% {
transform: translate(-20px, 20px) scale(0.95);
}
} }
/* Navigation */ /* Navigation */
nav { nav {
position: fixed; position: fixed;
top: 0; left: 0; right: 0; top: 0;
left: 0;
right: 0;
z-index: 100; z-index: 100;
padding: 20px 40px; padding: 20px 40px;
display: flex; display: flex;
@@ -84,6 +114,7 @@
backdrop-filter: blur(20px); backdrop-filter: blur(20px);
border-bottom: 1px solid var(--border); border-bottom: 1px solid var(--border);
} }
nav .logo { nav .logo {
font-family: 'JetBrains Mono', monospace; font-family: 'JetBrains Mono', monospace;
font-size: 1.1rem; font-size: 1.1rem;
@@ -91,12 +122,17 @@
color: var(--accent); color: var(--accent);
letter-spacing: -0.5px; letter-spacing: -0.5px;
} }
nav .logo span { color: var(--text); }
nav .logo span {
color: var(--text);
}
nav ul { nav ul {
list-style: none; list-style: none;
display: flex; display: flex;
gap: 32px; gap: 32px;
} }
nav ul a { nav ul a {
color: var(--text-muted); color: var(--text-muted);
text-decoration: none; text-decoration: none;
@@ -105,10 +141,16 @@
letter-spacing: 0.5px; letter-spacing: 0.5px;
transition: color 0.2s; transition: color 0.2s;
} }
nav ul a:hover { color: var(--text); }
nav ul a:hover {
color: var(--text);
}
/* Sections */ /* Sections */
section { position: relative; z-index: 1; } section {
position: relative;
z-index: 1;
}
.container { .container {
max-width: 960px; max-width: 960px;
@@ -122,7 +164,10 @@
display: flex; display: flex;
align-items: center; align-items: center;
} }
#hero .hero-inner { width: 100%; }
#hero .hero-inner {
width: 100%;
}
.tag-line { .tag-line {
display: inline-flex; display: inline-flex;
@@ -138,16 +183,26 @@
opacity: 0; opacity: 0;
animation: fadeUp 0.6s ease forwards; animation: fadeUp 0.6s ease forwards;
} }
.tag-line .dot { .tag-line .dot {
width: 6px; height: 6px; width: 6px;
height: 6px;
background: #4ade80; background: #4ade80;
border-radius: 50%; border-radius: 50%;
box-shadow: 0 0 8px rgba(74, 222, 128, 0.6); box-shadow: 0 0 8px rgba(74, 222, 128, 0.6);
animation: pulse 2s ease-in-out infinite; animation: pulse 2s ease-in-out infinite;
} }
@keyframes pulse { @keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; } 0%,
100% {
opacity: 1;
}
50% {
opacity: 0.4;
}
} }
#hero h1 { #hero h1 {
@@ -159,12 +214,14 @@
opacity: 0; opacity: 0;
animation: fadeUp 0.6s 0.1s ease forwards; animation: fadeUp 0.6s 0.1s ease forwards;
} }
#hero h1 .gradient { #hero h1 .gradient {
background: linear-gradient(135deg, var(--accent), var(--accent2)); background: linear-gradient(135deg, var(--accent), var(--accent2));
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
background-clip: text; background-clip: text;
} }
#hero .subtitle { #hero .subtitle {
font-size: 1.15rem; font-size: 1.15rem;
color: var(--text-muted); color: var(--text-muted);
@@ -174,6 +231,7 @@
opacity: 0; opacity: 0;
animation: fadeUp 0.6s 0.2s ease forwards; animation: fadeUp 0.6s 0.2s ease forwards;
} }
.hero-cta { .hero-cta {
display: flex; display: flex;
gap: 14px; gap: 14px;
@@ -181,6 +239,7 @@
opacity: 0; opacity: 0;
animation: fadeUp 0.6s 0.3s ease forwards; animation: fadeUp 0.6s 0.3s ease forwards;
} }
.btn { .btn {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
@@ -194,21 +253,25 @@
cursor: pointer; cursor: pointer;
border: none; border: none;
} }
.btn-primary { .btn-primary {
background: var(--accent); background: var(--accent);
color: #fff; color: #fff;
box-shadow: 0 0 20px var(--accent-glow); box-shadow: 0 0 20px var(--accent-glow);
} }
.btn-primary:hover { .btn-primary:hover {
background: #7c74ff; background: #7c74ff;
box-shadow: 0 0 30px rgba(108, 99, 255, 0.4); box-shadow: 0 0 30px rgba(108, 99, 255, 0.4);
transform: translateY(-1px); transform: translateY(-1px);
} }
.btn-ghost { .btn-ghost {
background: var(--surface); background: var(--surface);
color: var(--text); color: var(--text);
border: 1px solid var(--border); border: 1px solid var(--border);
} }
.btn-ghost:hover { .btn-ghost:hover {
background: rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.15);
@@ -228,23 +291,40 @@
opacity: 0; opacity: 0;
animation: fadeUp 0.6s 0.8s ease forwards; animation: fadeUp 0.6s 0.8s ease forwards;
} }
.scroll-line { .scroll-line {
width: 1px; width: 1px;
height: 40px; height: 40px;
background: linear-gradient(to bottom, var(--accent), transparent); background: linear-gradient(to bottom, var(--accent), transparent);
animation: scrollDown 2s ease-in-out infinite; animation: scrollDown 2s ease-in-out infinite;
} }
@keyframes scrollDown { @keyframes scrollDown {
0% { transform: scaleY(0); transform-origin: top; } 0% {
50% { transform: scaleY(1); transform-origin: top; } transform: scaleY(0);
51% { transform-origin: bottom; } transform-origin: top;
100% { transform: scaleY(0); transform-origin: bottom; } }
50% {
transform: scaleY(1);
transform-origin: top;
}
51% {
transform-origin: bottom;
}
100% {
transform: scaleY(0);
transform-origin: bottom;
}
} }
/* Section headers */ /* Section headers */
.section-header { .section-header {
margin-bottom: 48px; margin-bottom: 48px;
} }
.section-label { .section-label {
font-family: 'JetBrains Mono', monospace; font-family: 'JetBrains Mono', monospace;
font-size: 0.75rem; font-size: 0.75rem;
@@ -253,6 +333,7 @@
text-transform: uppercase; text-transform: uppercase;
margin-bottom: 10px; margin-bottom: 10px;
} }
.section-title { .section-title {
font-size: 2rem; font-size: 2rem;
font-weight: 700; font-weight: 700;
@@ -260,23 +341,29 @@
} }
/* About */ /* About */
#about { padding: 120px 0; } #about {
padding: 120px 0;
}
.about-grid { .about-grid {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
gap: 48px; gap: 48px;
align-items: start; align-items: start;
} }
.about-text p { .about-text p {
color: var(--text-muted); color: var(--text-muted);
margin-bottom: 16px; margin-bottom: 16px;
font-size: 0.95rem; font-size: 0.95rem;
} }
.stats { .stats {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
gap: 16px; gap: 16px;
} }
.stat-card { .stat-card {
background: var(--surface); background: var(--surface);
border: 1px solid var(--border); border: 1px solid var(--border);
@@ -284,6 +371,7 @@
padding: 20px; padding: 20px;
text-align: center; text-align: center;
} }
.stat-card .number { .stat-card .number {
font-size: 2rem; font-size: 2rem;
font-weight: 700; font-weight: 700;
@@ -293,6 +381,7 @@
background-clip: text; background-clip: text;
display: block; display: block;
} }
.stat-card .label { .stat-card .label {
font-size: 0.78rem; font-size: 0.78rem;
color: var(--text-muted); color: var(--text-muted);
@@ -300,12 +389,16 @@
} }
/* Skills */ /* Skills */
#skills { padding: 120px 0; } #skills {
padding: 120px 0;
}
.skills-grid { .skills-grid {
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
gap: 16px; gap: 16px;
} }
.skill-card { .skill-card {
background: var(--surface); background: var(--surface);
border: 1px solid var(--border); border: 1px solid var(--border);
@@ -316,6 +409,7 @@
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
.skill-card::before { .skill-card::before {
content: ''; content: '';
position: absolute; position: absolute;
@@ -324,13 +418,19 @@
opacity: 0; opacity: 0;
transition: opacity 0.3s; transition: opacity 0.3s;
} }
.skill-card:hover { .skill-card:hover {
border-color: rgba(108, 99, 255, 0.3); border-color: rgba(108, 99, 255, 0.3);
transform: translateY(-3px); transform: translateY(-3px);
} }
.skill-card:hover::before { opacity: 1; }
.skill-card:hover::before {
opacity: 1;
}
.skill-icon { .skill-icon {
width: 40px; height: 40px; width: 40px;
height: 40px;
background: rgba(108, 99, 255, 0.1); background: rgba(108, 99, 255, 0.1);
border-radius: 10px; border-radius: 10px;
display: flex; display: flex;
@@ -340,18 +440,21 @@
font-size: 1.2rem; font-size: 1.2rem;
position: relative; position: relative;
} }
.skill-name { .skill-name {
font-weight: 600; font-weight: 600;
font-size: 0.95rem; font-size: 0.95rem;
margin-bottom: 6px; margin-bottom: 6px;
position: relative; position: relative;
} }
.skill-desc { .skill-desc {
font-size: 0.8rem; font-size: 0.8rem;
color: var(--text-muted); color: var(--text-muted);
line-height: 1.5; line-height: 1.5;
position: relative; position: relative;
} }
.skill-bar { .skill-bar {
margin-top: 12px; margin-top: 12px;
height: 3px; height: 3px;
@@ -360,6 +463,7 @@
overflow: hidden; overflow: hidden;
position: relative; position: relative;
} }
.skill-bar-fill { .skill-bar-fill {
height: 100%; height: 100%;
background: linear-gradient(90deg, var(--accent), var(--accent2)); background: linear-gradient(90deg, var(--accent), var(--accent2));
@@ -369,18 +473,25 @@
} }
/* Experience */ /* Experience */
#experience { padding: 120px 0; } #experience {
padding: 120px 0;
}
.timeline { .timeline {
position: relative; position: relative;
padding-left: 32px; padding-left: 32px;
} }
.timeline::before { .timeline::before {
content: ''; content: '';
position: absolute; position: absolute;
left: 0; top: 8px; bottom: 8px; left: 0;
top: 8px;
bottom: 8px;
width: 1px; width: 1px;
background: linear-gradient(to bottom, var(--accent), transparent); background: linear-gradient(to bottom, var(--accent), transparent);
} }
.timeline-item { .timeline-item {
position: relative; position: relative;
margin-bottom: 40px; margin-bottom: 40px;
@@ -388,47 +499,56 @@
transform: translateY(20px); transform: translateY(20px);
transition: all 0.5s ease; transition: all 0.5s ease;
} }
.timeline-item.visible { .timeline-item.visible {
opacity: 1; opacity: 1;
transform: translateY(0); transform: translateY(0);
} }
.timeline-item::before { .timeline-item::before {
content: ''; content: '';
position: absolute; position: absolute;
left: -36px; left: -36px;
top: 8px; top: 8px;
width: 9px; height: 9px; width: 9px;
height: 9px;
border-radius: 50%; border-radius: 50%;
background: var(--accent); background: var(--accent);
box-shadow: 0 0 12px var(--accent-glow); box-shadow: 0 0 12px var(--accent-glow);
} }
.timeline-date { .timeline-date {
font-family: 'JetBrains Mono', monospace; font-family: 'JetBrains Mono', monospace;
font-size: 0.75rem; font-size: 0.75rem;
color: var(--text-muted); color: var(--text-muted);
margin-bottom: 6px; margin-bottom: 6px;
} }
.timeline-role { .timeline-role {
font-size: 1.1rem; font-size: 1.1rem;
font-weight: 600; font-weight: 600;
margin-bottom: 4px; margin-bottom: 4px;
} }
.timeline-company { .timeline-company {
color: var(--accent); color: var(--accent);
font-size: 0.88rem; font-size: 0.88rem;
margin-bottom: 10px; margin-bottom: 10px;
} }
.timeline-desc { .timeline-desc {
color: var(--text-muted); color: var(--text-muted);
font-size: 0.88rem; font-size: 0.88rem;
line-height: 1.7; line-height: 1.7;
} }
.timeline-tags { .timeline-tags {
display: flex; display: flex;
gap: 8px; gap: 8px;
flex-wrap: wrap; flex-wrap: wrap;
margin-top: 12px; margin-top: 12px;
} }
.tag { .tag {
padding: 3px 10px; padding: 3px 10px;
background: rgba(108, 99, 255, 0.08); background: rgba(108, 99, 255, 0.08);
@@ -440,12 +560,16 @@
} }
/* Projects */ /* Projects */
#projects { padding: 120px 0; } #projects {
padding: 120px 0;
}
.projects-grid { .projects-grid {
display: grid; display: grid;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
gap: 20px; gap: 20px;
} }
.project-card { .project-card {
background: var(--surface); background: var(--surface);
border: 1px solid var(--border); border: 1px solid var(--border);
@@ -456,18 +580,22 @@
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
.project-card:hover { .project-card:hover {
border-color: rgba(108, 99, 255, 0.3); border-color: rgba(108, 99, 255, 0.3);
transform: translateY(-4px); transform: translateY(-4px);
} }
.project-top { .project-top {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: start; align-items: start;
margin-bottom: 16px; margin-bottom: 16px;
} }
.project-icon { .project-icon {
width: 42px; height: 42px; width: 42px;
height: 42px;
background: rgba(108, 99, 255, 0.1); background: rgba(108, 99, 255, 0.1);
border-radius: 10px; border-radius: 10px;
display: flex; display: flex;
@@ -475,9 +603,15 @@
justify-content: center; justify-content: center;
font-size: 1.2rem; font-size: 1.2rem;
} }
.project-links { display: flex; gap: 10px; }
.project-links {
display: flex;
gap: 10px;
}
.project-link { .project-link {
width: 30px; height: 30px; width: 30px;
height: 30px;
border-radius: 6px; border-radius: 6px;
background: var(--border); background: var(--border);
display: flex; display: flex;
@@ -488,18 +622,25 @@
font-size: 0.8rem; font-size: 0.8rem;
transition: all 0.2s; transition: all 0.2s;
} }
.project-link:hover { background: var(--accent); color: #fff; }
.project-link:hover {
background: var(--accent);
color: #fff;
}
.project-name { .project-name {
font-size: 1.05rem; font-size: 1.05rem;
font-weight: 600; font-weight: 600;
margin-bottom: 8px; margin-bottom: 8px;
} }
.project-desc { .project-desc {
font-size: 0.85rem; font-size: 0.85rem;
color: var(--text-muted); color: var(--text-muted);
line-height: 1.6; line-height: 1.6;
margin-bottom: 16px; margin-bottom: 16px;
} }
.project-tech { .project-tech {
display: flex; display: flex;
gap: 6px; gap: 6px;
@@ -507,18 +648,28 @@
} }
/* Contact */ /* Contact */
#contact { padding: 120px 0 80px; } #contact {
padding: 120px 0 80px;
}
.contact-grid { .contact-grid {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
gap: 48px; gap: 48px;
} }
.contact-info p { .contact-info p {
color: var(--text-muted); color: var(--text-muted);
font-size: 0.95rem; font-size: 0.95rem;
margin-bottom: 28px; margin-bottom: 28px;
} }
.contact-links { display: flex; flex-direction: column; gap: 14px; }
.contact-links {
display: flex;
flex-direction: column;
gap: 14px;
}
.contact-link { .contact-link {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -532,12 +683,15 @@
font-size: 0.88rem; font-size: 0.88rem;
transition: all 0.2s; transition: all 0.2s;
} }
.contact-link:hover { .contact-link:hover {
border-color: rgba(108, 99, 255, 0.3); border-color: rgba(108, 99, 255, 0.3);
background: rgba(108, 99, 255, 0.05); background: rgba(108, 99, 255, 0.05);
} }
.contact-link .cl-icon { .contact-link .cl-icon {
width: 34px; height: 34px; width: 34px;
height: 34px;
background: rgba(108, 99, 255, 0.1); background: rgba(108, 99, 255, 0.1);
border-radius: 8px; border-radius: 8px;
display: flex; display: flex;
@@ -546,11 +700,13 @@
font-size: 0.9rem; font-size: 0.9rem;
flex-shrink: 0; flex-shrink: 0;
} }
.contact-form { .contact-form {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 14px; gap: 14px;
} }
.form-group input, .form-group input,
.form-group textarea { .form-group textarea {
width: 100%; width: 100%;
@@ -565,15 +721,21 @@
transition: border-color 0.2s; transition: border-color 0.2s;
resize: none; resize: none;
} }
.form-group input:focus, .form-group input:focus,
.form-group textarea:focus { .form-group textarea:focus {
border-color: var(--accent); border-color: var(--accent);
} }
.form-group input::placeholder, .form-group input::placeholder,
.form-group textarea::placeholder { .form-group textarea::placeholder {
color: var(--text-muted); color: var(--text-muted);
} }
.form-group textarea { min-height: 120px; }
.form-group textarea {
min-height: 120px;
}
.form-group button { .form-group button {
align-self: flex-start; align-self: flex-start;
} }
@@ -588,13 +750,42 @@
font-size: 0.78rem; font-size: 0.78rem;
border-top: 1px solid var(--border); border-top: 1px solid var(--border);
} }
footer a { color: var(--text-muted); text-decoration: none; }
footer a:hover { color: var(--accent); } footer a {
color: var(--text-muted);
text-decoration: none;
}
footer a:hover {
color: var(--accent);
}
footer .icp {
margin-top: 6px;
font-size: 0.72rem;
opacity: 0.7;
}
footer .icp a {
color: var(--text-muted);
text-decoration: none;
}
footer .icp a:hover {
color: var(--accent);
}
/* Animations */ /* Animations */
@keyframes fadeUp { @keyframes fadeUp {
from { opacity: 0; transform: translateY(20px); } from {
to { opacity: 1; transform: translateY(0); } opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
} }
.reveal { .reveal {
@@ -602,6 +793,7 @@
transform: translateY(30px); transform: translateY(30px);
transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1); transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);
} }
.reveal.visible { .reveal.visible {
opacity: 1; opacity: 1;
transform: translateY(0); transform: translateY(0);
@@ -610,7 +802,8 @@
/* Cursor follower */ /* Cursor follower */
.cursor-glow { .cursor-glow {
position: fixed; position: fixed;
width: 300px; height: 300px; width: 300px;
height: 300px;
border-radius: 50%; border-radius: 50%;
background: radial-gradient(circle, rgba(108, 99, 255, 0.06), transparent 70%); background: radial-gradient(circle, rgba(108, 99, 255, 0.06), transparent 70%);
pointer-events: none; pointer-events: none;
@@ -621,21 +814,45 @@
/* Responsive */ /* Responsive */
@media (max-width: 768px) { @media (max-width: 768px) {
nav { padding: 16px 20px; } nav {
nav ul { gap: 18px; } padding: 16px 20px;
.container { padding: 0 20px; } }
nav ul {
gap: 18px;
}
.container {
padding: 0 20px;
}
.about-grid, .about-grid,
.contact-grid, .contact-grid,
.projects-grid { grid-template-columns: 1fr; } .projects-grid {
.skills-grid { grid-template-columns: repeat(2, 1fr); } grid-template-columns: 1fr;
.stats { grid-template-columns: 1fr 1fr; }
} }
.skills-grid {
grid-template-columns: repeat(2, 1fr);
}
.stats {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 480px) { @media (max-width: 480px) {
.skills-grid { grid-template-columns: 1fr; } .skills-grid {
nav ul { display: none; } grid-template-columns: 1fr;
}
nav ul {
display: none;
}
} }
</style> </style>
</head> </head>
<body> <body>
<div class="orb orb-1"></div> <div class="orb orb-1"></div>
@@ -662,15 +879,20 @@
<span class="dot"></span> <span class="dot"></span>
Open to work Open to work
</div> </div>
<h1>你好，我是<br /><span class="gradient">王明</span></h1> <h1>你好，我是<br /><span class="gradient">管祥玮</span></h1>
<p class="subtitle">全栈工程师，专注 Kubernetes、云原生架构与分布式系统。热爱把复杂的东西拆干净、再装回去。</p> <p class="subtitle">全栈工程师，专注 Kubernetes、云原生架构与分布式系统。热爱把复杂的东西拆干净、再装回去。</p>
<div class="hero-cta"> <div class="hero-cta">
<a href="#contact" class="btn btn-primary"> <a href="#contact" class="btn btn-primary">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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"/><polyline points="22,6 12,13 2,6"/></svg> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<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" />
<polyline points="22,6 12,13 2,6" />
</svg>
联系我 联系我
</a> </a>
<a href="#projects" class="btn btn-ghost"> <a href="#projects" class="btn btn-ghost">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" />
</svg>
看项目 看项目
</a> </a>
</div> </div>
@@ -697,7 +919,7 @@
</div> </div>
<div class="stats reveal"> <div class="stats reveal">
<div class="stat-card"> <div class="stat-card">
<span class="number">6+</span> <span class="number">8+</span>
<span class="label">年经验</span> <span class="label">年经验</span>
</div> </div>
<div class="stat-card"> <div class="stat-card">
@@ -729,37 +951,49 @@
<div class="skill-icon">☸</div> <div class="skill-icon">☸</div>
<div class="skill-name">Kubernetes</div> <div class="skill-name">Kubernetes</div>
<div class="skill-desc">集群管理、Operator 开发、HPA/VPA、自动扩缩容、集群联邦</div> <div class="skill-desc">集群管理、Operator 开发、HPA/VPA、自动扩缩容、集群联邦</div>
<div class="skill-bar"><div class="skill-bar-fill" data-width="92"></div></div> <div class="skill-bar">
<div class="skill-bar-fill" data-width="92"></div>
</div>
</div> </div>
<div class="skill-card reveal"> <div class="skill-card reveal">
<div class="skill-icon">🐳</div> <div class="skill-icon">🐳</div>
<div class="skill-name">Docker / Containerd</div> <div class="skill-name">Docker / Containerd</div>
<div class="skill-desc">镜像构建优化、多阶段构建、Harbor 私有仓库、安全扫描</div> <div class="skill-desc">镜像构建优化、多阶段构建、Harbor 私有仓库、安全扫描</div>
<div class="skill-bar"><div class="skill-bar-fill" data-width="90"></div></div> <div class="skill-bar">
<div class="skill-bar-fill" data-width="90"></div>
</div>
</div> </div>
<div class="skill-card reveal"> <div class="skill-card reveal">
<div class="skill-icon">⚡</div> <div class="skill-icon">⚡</div>
<div class="skill-name">Go</div> <div class="skill-name">Go</div>
<div class="skill-desc">Kubernetes 客户端开发、CLI 工具、微服务编写、性能调优</div> <div class="skill-desc">Kubernetes 客户端开发、CLI 工具、微服务编写、性能调优</div>
<div class="skill-bar"><div class="skill-bar-fill" data-width="85"></div></div> <div class="skill-bar">
<div class="skill-bar-fill" data-width="85"></div>
</div>
</div> </div>
<div class="skill-card reveal"> <div class="skill-card reveal">
<div class="skill-icon">🔀</div> <div class="skill-icon">🔀</div>
<div class="skill-name">CI/CD</div> <div class="skill-name">CI/CD</div>
<div class="skill-desc">ArgoCD、GitLab CI、Jenkins、FluxCD GitOps 流水线</div> <div class="skill-desc">ArgoCD、GitLab CI、Jenkins、FluxCD GitOps 流水线</div>
<div class="skill-bar"><div class="skill-bar-fill" data-width="88"></div></div> <div class="skill-bar">
<div class="skill-bar-fill" data-width="88"></div>
</div>
</div> </div>
<div class="skill-card reveal"> <div class="skill-card reveal">
<div class="skill-icon">📊</div> <div class="skill-icon">📊</div>
<div class="skill-name">可观测性</div> <div class="skill-name">可观测性</div>
<div class="skill-desc">Prometheus + Grafana 监控体系、Jaeger 链路追踪、Loki 日志</div> <div class="skill-desc">Prometheus + Grafana 监控体系、Jaeger 链路追踪、Loki 日志</div>
<div class="skill-bar"><div class="skill-bar-fill" data-width="85"></div></div> <div class="skill-bar">
<div class="skill-bar-fill" data-width="85"></div>
</div>
</div> </div>
<div class="skill-card reveal"> <div class="skill-card reveal">
<div class="skill-icon">☁️</div> <div class="skill-icon">☁️</div>
<div class="skill-name">公有云 / IaC</div> <div class="skill-name">公有云 / IaC</div>
<div class="skill-desc">AWS / GCP / 阿里云，Terraform / Pulumi 基础设施代码化</div> <div class="skill-desc">AWS / GCP / 阿里云，Terraform / Pulumi 基础设施代码化</div>
<div class="skill-bar"><div class="skill-bar-fill" data-width="80"></div></div> <div class="skill-bar">
<div class="skill-bar-fill" data-width="80"></div>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -777,7 +1011,8 @@
<div class="timeline-date">2022 — 至今</div> <div class="timeline-date">2022 — 至今</div>
<div class="timeline-role">高级 DevOps / 云原生工程师</div> <div class="timeline-role">高级 DevOps / 云原生工程师</div>
<div class="timeline-company">某科技公司 · 基础设施部</div> <div class="timeline-company">某科技公司 · 基础设施部</div>
<div class="timeline-desc">负责公司 K8s 集群（50+节点）运维与优化，推进 GitOps 落地，搭建全链路可观测体系，SLA 达 99.95%。主导容器安全加固项目，漏洞响应时间从 24h 降至 2h。</div> <div class="timeline-desc">负责公司 K8s 集群（50+节点）运维与优化，推进 GitOps 落地，搭建全链路可观测体系，SLA 达 99.95%。主导容器安全加固项目，漏洞响应时间从 24h
降至 2h。</div>
<div class="timeline-tags"> <div class="timeline-tags">
<span class="tag">Kubernetes</span> <span class="tag">Kubernetes</span>
<span class="tag">ArgoCD</span> <span class="tag">ArgoCD</span>
@@ -790,7 +1025,8 @@
<div class="timeline-date">2020 — 2022</div> <div class="timeline-date">2020 — 2022</div>
<div class="timeline-role">后端开发工程师</div> <div class="timeline-role">后端开发工程师</div>
<div class="timeline-company">某互联网公司 · 平台技术部</div> <div class="timeline-company">某互联网公司 · 平台技术部</div>
<div class="timeline-desc">负责订单系统微服务化改造（单体 → 12 个服务），引入 gRPC + Istio 服务网格，QPS 从 200 提升至 3000+，P99 延迟降低 60%。</div> <div class="timeline-desc">负责订单系统微服务化改造（单体 → 12 个服务），引入 gRPC + Istio 服务网格，QPS 从 200 提升至 3000+，P99 延迟降低 60%。
</div>
<div class="timeline-tags"> <div class="timeline-tags">
<span class="tag">Go</span> <span class="tag">Go</span>
<span class="tag">gRPC</span> <span class="tag">gRPC</span>
@@ -828,10 +1064,17 @@
<div class="project-icon">☸</div> <div class="project-icon">☸</div>
<div class="project-links"> <div class="project-links">
<a href="#" class="project-link" title="GitHub"> <a href="#" class="project-link" title="GitHub">
<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z"/></svg> <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
<path
d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z" />
</svg>
</a> </a>
<a href="#" class="project-link" title="外部链接"> <a href="#" class="project-link" title="外部链接">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<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>
</a> </a>
</div> </div>
</div> </div>
@@ -848,7 +1091,10 @@
<div class="project-icon">🔀</div> <div class="project-icon">🔀</div>
<div class="project-links"> <div class="project-links">
<a href="#" class="project-link" title="GitHub"> <a href="#" class="project-link" title="GitHub">
<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z"/></svg> <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
<path
d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z" />
</svg>
</a> </a>
</div> </div>
</div> </div>
@@ -866,7 +1112,10 @@
<div class="project-icon">📊</div> <div class="project-icon">📊</div>
<div class="project-links"> <div class="project-links">
<a href="#" class="project-link" title="GitHub"> <a href="#" class="project-link" title="GitHub">
<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z"/></svg> <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
<path
d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z" />
</svg>
</a> </a>
</div> </div>
</div> </div>
@@ -884,7 +1133,10 @@
<div class="project-icon">⚡</div> <div class="project-icon">⚡</div>
<div class="project-links"> <div class="project-links">
<a href="#" class="project-link" title="GitHub"> <a href="#" class="project-link" title="GitHub">
<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z"/></svg> <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
<path
d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z" />
</svg>
</a> </a>
</div> </div>
</div> </div>
@@ -913,19 +1165,28 @@
<div class="contact-links"> <div class="contact-links">
<a href="mailto:hello@example.com" class="contact-link"> <a href="mailto:hello@example.com" class="contact-link">
<div class="cl-icon"> <div class="cl-icon">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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"/><polyline points="22,6 12,13 2,6"/></svg> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<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" />
<polyline points="22,6 12,13 2,6" />
</svg>
</div> </div>
hello@example.com hello@example.com
</a> </a>
<a href="#" class="contact-link"> <a href="#" class="contact-link">
<div class="cl-icon"> <div class="cl-icon">
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z"/></svg> <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
<path
d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z" />
</svg>
</div> </div>
github.com/wangming github.com/wangming
</a> </a>
<a href="#" class="contact-link"> <a href="#" class="contact-link">
<div class="cl-icon"> <div class="cl-icon">
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg> <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
<path
d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />
</svg>
</div> </div>
linkedin.com/in/wangming linkedin.com/in/wangming
</a> </a>
@@ -942,7 +1203,10 @@
<textarea placeholder="想说点什么..."></textarea> <textarea placeholder="想说点什么..."></textarea>
</div> </div>
<button type="submit" class="btn btn-primary"> <button type="submit" class="btn btn-primary">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<line x1="22" y1="2" x2="11" y2="13" />
<polygon points="22 2 15 22 11 13 2 9 22 2" />
</svg>
发送消息 发送消息
</button> </button>
</form> </form>
@@ -952,7 +1216,10 @@
<!-- Footer --> <!-- Footer -->
<footer> <footer>
<p>Designed &amp; Built by <a href="#">Wang Ming</a> · 2024</p> <p>Designed &amp; Built by <a href="#">Wang Ming</a> · Violin Home ©Copyright 2022-2026</p>
<p class="icp">
<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank" rel="noopener">辽ICP备2022003637号-2</a>
</p>
</footer> </footer>
<script> <script>
@@ -999,4 +1266,5 @@
</script> </script>
</body> </body>
</html> </html>