From 73c41023d188b8fc94f9a2d4eec790cd9366bd7c Mon Sep 17 00:00:00 2001 From: cioyu Date: Sat, 2 May 2026 20:03:49 +0800 Subject: [PATCH] deepseek-v0.1 --- index.html | 5 +- src/App.vue | 840 ++++++++++++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 816 insertions(+), 29 deletions(-) diff --git a/index.html b/index.html index 39e7caa..4da3ff7 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,5 @@ - + @@ -10,6 +10,9 @@ + + +
diff --git a/src/App.vue b/src/App.vue index 5e30c1f..cfdb7c9 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,37 +1,821 @@ - + + + \ No newline at end of file + +/* Avatar */ +.avatar-ring { + width: 100px; + height: 100px; + margin: 0 auto 24px; + border-radius: 50%; + padding: 4px; + background: conic-gradient(var(--pink-light), var(--purple-light), var(--blue-light), var(--pink-light)); + animation: spinRing 6s linear infinite; +} + +@keyframes spinRing { + to { transform: rotate(360deg); } +} + +.avatar { + width: 100%; + height: 100%; + border-radius: 50%; + background: linear-gradient(135deg, #6b21a8, #db2777); + display: flex; + align-items: center; + justify-content: center; + font-size: 36px; + font-weight: 800; + color: #fff; + transition: transform .3s; +} + +.avatar:hover { + transform: scale(1.06); +} + +/* Title */ +.hero-title { + font-size: clamp(2rem, 6vw, 3.5rem); + font-weight: 800; + letter-spacing: -.03em; + line-height: 1.2; + margin-bottom: 12px; + text-shadow: 0 2px 20px rgba(0,0,0,.2); +} + +/* Subtitle */ +.hero-subtitle { + font-size: 1.05rem; + opacity: .85; + font-weight: 400; + letter-spacing: .02em; +} + +/* CTA */ +.hero-cta { + margin-top: 48px; +} + +.scroll-hint { + display: inline-block; + padding: 8px 24px; + border-radius: 40px; + background: rgba(255,255,255,.12); + backdrop-filter: blur(8px); + border: 1px solid rgba(255,255,255,.2); + font-size: .88rem; + color: rgba(255,255,255,.8); + animation: hintBounce 2.5s infinite; + cursor: pointer; + transition: background .3s; +} + +.scroll-hint:hover { + background: rgba(255,255,255,.2); +} + +@keyframes hintBounce { + 0%, 100% { transform: translateY(0); } + 50% { transform: translateY(6px); } +} + +/* ===== Wave Divider ===== */ +.wave-divider { + position: absolute; + bottom: -1px; + left: 0; + width: 100%; + line-height: 0; + z-index: 2; +} + +.wave-divider svg { + display: block; + width: 100%; + height: 60px; +} + +/* ============================ + Main + ============================ */ +.main { + flex: 1; + padding: 20px 0 60px; + position: relative; + z-index: 1; +} + +/* ============================ + Card + ============================ */ +.card { + position: relative; + background: var(--card-bg); + backdrop-filter: blur(12px); + border-radius: var(--radius); + box-shadow: var(--shadow); + padding: 32px; + margin-bottom: 28px; + border: 1px solid rgba(168,85,247,.08); + overflow: hidden; + transition: box-shadow .3s, transform .3s; +} + +.card:hover { + box-shadow: var(--shadow-lg); + transform: translateY(-3px); +} + +.card-accent { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 4px; + background: linear-gradient(90deg, var(--pink), var(--purple)); + border-radius: var(--radius) var(--radius) 0 0; +} + +.accent-pink { + background: linear-gradient(90deg, var(--pink), var(--pink-light)); +} + +.accent-purple { + background: linear-gradient(90deg, var(--purple), var(--purple-light)); +} + +.accent-blue { + background: linear-gradient(90deg, var(--blue), var(--blue-light)); +} + +.section-title { + font-size: 1.2rem; + font-weight: 700; + margin-bottom: 16px; + color: var(--text); + display: flex; + align-items: center; + gap: 8px; +} + +.title-icon { + font-size: 1.3rem; +} + +/* ============================ + About + ============================ */ +.about-text { + color: var(--text-secondary); + font-size: 1rem; + line-height: 1.9; + opacity: .9; +} + +.about-tags { + display: flex; + flex-wrap: wrap; + gap: 8px; + margin-top: 16px; +} + +.about-tag { + display: inline-block; + font-size: .82rem; + padding: 4px 14px; + border-radius: 20px; + background: linear-gradient(135deg, var(--pink-lighter), #f3e8ff); + color: var(--text-secondary); + font-weight: 500; + border: 1px solid rgba(168,85,247,.1); +} + +/* ============================ + Timeline + ============================ */ +.timeline { + position: relative; + padding-left: 40px; +} + +.timeline::before { + content: ''; + position: absolute; + left: 15px; + top: 8px; + bottom: 8px; + width: 2px; + background: linear-gradient(to bottom, var(--pink), var(--purple), var(--blue)); + border-radius: 2px; +} + +.timeline-item { + position: relative; + padding-bottom: 24px; + animation: slideUp .5s ease-out both; + animation-delay: calc(var(--i) * .1s); +} + +.timeline-item:last-child { padding-bottom: 0; } + +@keyframes slideUp { + from { opacity: 0; transform: translateY(16px); } + to { opacity: 1; transform: translateY(0); } +} + +.timeline-dot { + position: absolute; + left: -40px; + top: 2px; + width: 32px; + height: 32px; + border-radius: 50%; + background: #fff; + border: 2px solid var(--purple-light); + display: flex; + align-items: center; + justify-content: center; + font-size: 15px; + z-index: 1; + box-shadow: 0 0 0 4px rgba(168,85,247,.08); +} + +.timeline-body { + background: linear-gradient(135deg, #faf5ff, #fdf2f8); + border-radius: 14px; + padding: 14px 20px; + border: 1px solid rgba(168,85,247,.06); +} + +.timeline-title { + font-size: 1rem; + font-weight: 700; + background: linear-gradient(135deg, var(--pink), var(--purple)); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + margin-bottom: 4px; +} + +.timeline-desc { + font-size: .9rem; + color: var(--text-secondary); + line-height: 1.6; + opacity: .85; +} + +/* ============================ + Learning + ============================ */ +.learning-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 16px; +} + +.learning-item { + border-radius: 14px; + padding: 22px; + border: 1px solid rgba(168,85,247,.08); +} + +.learning-item.current { + background: linear-gradient(135deg, #fdf2f8, #fce7f3); +} + +.learning-item.future { + background: linear-gradient(135deg, #fff7ed, #ffedd5); +} + +.learning-label { + display: inline-block; + font-size: .7rem; + font-weight: 700; + letter-spacing: .06em; + padding: 3px 12px; + border-radius: 20px; + background: linear-gradient(135deg, var(--pink), var(--purple)); + color: #fff; + margin-bottom: 10px; +} + +.label-orange { + background: linear-gradient(135deg, var(--orange), #fbbf24); +} + +.learning-tags { + display: flex; + flex-wrap: wrap; + gap: 6px; + margin-bottom: 10px; +} + +.tag { + display: inline-block; + font-size: .82rem; + font-weight: 500; + padding: 3px 10px; + border-radius: 8px; + background: rgba(255,255,255,.75); + color: var(--text); + backdrop-filter: blur(4px); +} + +.learning-desc { + font-size: .85rem; + color: var(--text-secondary); + opacity: .8; +} + +/* ============================ + Contact + ============================ */ +.contact-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); + gap: 12px; +} + +.contact-item { + display: flex; + flex-direction: column; + align-items: center; + gap: 6px; + padding: 22px 12px; + border-radius: 14px; + background: linear-gradient(135deg, #faf5ff, #fdf2f8); + border: 1px solid rgba(168,85,247,.06); + transition: background .3s, transform .3s, box-shadow .3s; +} + +.contact-item:hover { + background: linear-gradient(135deg, #f3e8ff, #fce7f3); + transform: translateY(-5px); + box-shadow: var(--shadow-lg); +} + +.contact-icon { + font-size: 1.8rem; +} + +.contact-name { + font-weight: 600; + font-size: .95rem; + color: var(--text); +} + +.contact-sub { + font-size: .75rem; + color: var(--text-muted); + word-break: break-all; + text-align: center; +} + +/* ============================ + Footer + ============================ */ +.footer { + text-align: center; + padding: 32px 0; + color: var(--text-muted); + font-size: .85rem; +} + +.footer-stars { + font-size: .9rem; + letter-spacing: 6px; + margin-bottom: 8px; + opacity: .5; +} + +/* ============================ + Responsive + ============================ */ +@media (max-width: 640px) { + .card { + padding: 24px 18px; + } + + .learning-grid { + grid-template-columns: 1fr; + } + + .contact-grid { + grid-template-columns: 1fr 1fr; + } + + .timeline { + padding-left: 36px; + } + + .timeline-dot { + left: -36px; + width: 28px; + height: 28px; + font-size: 13px; + } + + .hero { + min-height: 60vh; + } + + .wave-divider svg { + height: 30px; + } + + .avatar-ring { + width: 80px; + height: 80px; + } + + .avatar { + font-size: 28px; + } +} +