Swap hero and contact photography

Author: tandede

app/globals.css

@@ -129,7 +129,7 @@ main > section { transition: margin-left 360ms cubic-bezier(0.22, 1, 0.36, 1); }
 .hero h1 span { display: block; color: var(--blue); }
 .hero-lead { max-width: 910px; margin: 17px 0 0; color: #4b5565; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.72; }
 .profile-card { grid-column: 9 / 13; grid-row: 1; overflow: hidden; border: 1px solid var(--line-strong); background: var(--white); box-shadow: 0 16px 38px rgba(16, 24, 40, 0.08); }
-.profile-card > img { width: 100%; height: 232px; object-fit: cover; object-position: 63% 45%; transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1); }
+.profile-card > img { width: 100%; height: 232px; object-fit: cover; object-position: 52% 52%; transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1); }
 .profile-card:hover > img { transform: scale(1.025); }
 .profile-body { padding: 15px 17px; }
 .profile-name { display: flex; gap: 9px; align-items: baseline; }
@@ -281,25 +281,25 @@ main > section { transition: margin-left 360ms cubic-bezier(0.22, 1, 0.36, 1); }
 .opensource-row > svg { color: var(--blue); transition: transform 180ms ease; }
 .opensource-row:hover > svg { transform: translate(3px, -3px); }
 
-.contact-section { position: relative; isolation: isolate; overflow: hidden; padding: 96px 0 30px; color: var(--white); background: var(--blue-dark); }
-.contact-section::before { position: absolute; z-index: -2; inset: -18px; background: url('/contact-mountain.jpg') center 48% / cover no-repeat; content: ""; filter: blur(8px); transform: scale(1.035); }
-.contact-section::after { position: absolute; z-index: -1; inset: 0; background: linear-gradient(102deg, rgba(5, 25, 63, 0.92) 0%, rgba(8, 52, 130, 0.85) 48%, rgba(11, 74, 208, 0.76) 100%); content: ""; }
+.contact-section { position: relative; isolation: isolate; overflow: hidden; padding: 96px 0 30px; color: var(--ink); background: #f2f4f7; }
+.contact-section::before { position: absolute; z-index: -2; inset: -20px; background: url('/tan-travel-portrait.jpg') center 46% / cover no-repeat; content: ""; filter: blur(9px); transform: scaleX(-1) scale(1.04); }
+.contact-section::after { position: absolute; z-index: -1; inset: 0; background: linear-gradient(102deg, rgba(250, 251, 253, 0.94) 0%, rgba(250, 251, 253, 0.8) 50%, rgba(250, 251, 253, 0.91) 100%); content: ""; }
 .contact-layout { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(390px, 0.8fr); gap: 100px; align-items: start; }
-.contact-eyebrow { color: #dce8ff; }
-.contact-eyebrow > span { background: #86efac; }
+.contact-eyebrow { color: #344054; }
+.contact-eyebrow > span { background: var(--green); }
 .contact-section h2 { max-width: 760px; margin: 0; font-size: clamp(40px, 4.8vw, 68px); letter-spacing: -0.055em; line-height: 1.09; }
-.contact-note { max-width: 560px; margin: 18px 0 0; color: #c9d7f4; font-size: 14px; line-height: 1.7; }
-.contact-links { border-top: 1px solid rgba(255, 255, 255, 0.28); }
-.contact-links a { display: grid; grid-template-columns: 24px minmax(0, 1fr) 22px; gap: 14px; align-items: center; min-height: 78px; border-bottom: 1px solid rgba(255, 255, 255, 0.28); transition: background 180ms ease, padding 180ms ease; }
-.contact-links a:hover { padding-inline: 10px; background: rgba(255, 255, 255, 0.08); }
-.contact-links a > svg { width: 18px; height: 18px; }
+.contact-note { max-width: 560px; margin: 18px 0 0; color: #475467; font-size: 14px; line-height: 1.7; }
+.contact-links { border-top: 1px solid rgba(11, 18, 32, 0.2); }
+.contact-links a { display: grid; grid-template-columns: 24px minmax(0, 1fr) 22px; gap: 14px; align-items: center; min-height: 78px; border-bottom: 1px solid rgba(11, 18, 32, 0.2); transition: background 180ms ease, padding 180ms ease; }
+.contact-links a:hover { padding-inline: 10px; background: rgba(255, 255, 255, 0.56); }
+.contact-links a > svg { width: 18px; height: 18px; color: var(--blue); }
 .contact-links span { display: grid; gap: 5px; }
-.contact-links small { color: #bfd2fb; font-size: 9px; }
+.contact-links small { color: #667085; font-size: 9px; }
 .contact-links strong { font-size: 13px; overflow-wrap: anywhere; }
-.contact-section footer { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; margin-top: 90px; padding-top: 22px; color: #c8d8f7; font-family: var(--font-geist-mono), monospace; font-size: 8px; border-top: 1px solid rgba(255, 255, 255, 0.32); }
-.back-to-top { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px; color: var(--white); font-size: 9px; font-weight: 750; border: 1px solid rgba(255, 255, 255, 0.42); background: rgba(255, 255, 255, 0.06); transition: color 180ms ease, background 180ms ease, border-color 180ms ease, transform 180ms ease; }
+.contact-section footer { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; margin-top: 90px; padding-top: 22px; color: #475467; font-family: var(--font-geist-mono), monospace; font-size: 8px; border-top: 1px solid rgba(11, 18, 32, 0.22); }
+.back-to-top { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px; color: var(--ink); font-size: 9px; font-weight: 750; border: 1px solid rgba(11, 18, 32, 0.28); background: rgba(255, 255, 255, 0.62); transition: color 180ms ease, background 180ms ease, border-color 180ms ease, transform 180ms ease; }
 .back-to-top svg { width: 14px; height: 14px; }
-.back-to-top:hover, .back-to-top:focus-visible { color: var(--blue-dark); border-color: var(--white); background: var(--white); transform: translateY(-3px); }
+.back-to-top:hover, .back-to-top:focus-visible { color: var(--white); border-color: var(--blue); background: var(--blue); transform: translateY(-3px); }
 
 .has-motion [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 620ms ease, transform 620ms ease; }
 .has-motion [data-reveal].is-visible { opacity: 1; transform: translateY(0); }

app/page.tsx

@@ -176,7 +176,7 @@ export default function Home() {
             <div className="hero-actions"><a className="action-link action-primary" href="#research"><PiArticle aria-hidden="true" /><span>代表论文</span><PiArrowDownRightBold aria-hidden="true" /></a><a className="action-link" href="https://scholar.google.com/citations?user=6uw9ALUAAAAJ" {...externalLinkProps}><SiGooglescholar aria-hidden="true" /><span>谷歌学术</span><PiArrowUpRightBold aria-hidden="true" /></a><a className="action-link" href="https://github.com/tandede" {...externalLinkProps}><SiGithub aria-hidden="true" /><span>GitHub</span><PiArrowUpRightBold aria-hidden="true" /></a><a className="action-link" href="https://www.linkedin.com/in/zhewen-tan-0ba830401/" {...externalLinkProps}><SiLinkedin aria-hidden="true" /><span>LinkedIn</span><PiArrowUpRightBold aria-hidden="true" /></a></div>
           </div>
           <aside className="profile-card" data-reveal>
-            <img src="/tan-travel-portrait.jpg" alt="谭哲文旅行照片" />
+            <img src="/contact-mountain.jpg" alt="谭哲文山顶旅行照片" />
             <div className="profile-body"><div className="profile-name"><strong>谭哲文</strong><span>Tan Zhewen</span></div><p>大语言模型算法研究与工程</p><div className="profile-rule" /><p className="profile-role">小红书 · Dots（Pretrain）算法实习生</p><div className="profile-place"><PiMapPin aria-hidden="true" /> Beijing · Open to connect</div></div>
           </aside>
         </div>