Skip to content

Commit ba2513a

Browse files
tandedetandede
committed
Simplify contact section
1 parent 5b51c96 commit ba2513a

2 files changed

Lines changed: 13 additions & 11 deletions

File tree

‎app/globals.css‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -297,21 +297,22 @@ html.is-at-top .nav-contact:hover, html.is-at-top .nav-contact:focus-visible { b
297297
.opensource-row > svg { color: var(--blue); transition: transform 180ms ease; }
298298
.opensource-row:hover > svg { transform: translate(3px, -3px); }
299299

300-
.contact-section { position: relative; isolation: isolate; overflow: hidden; padding: 96px 0 30px; color: var(--white); background: #07101e; }
301-
.contact-section::before { position: absolute; z-index: -2; inset: -20px; background: url('/tan-travel-portrait.jpg') center 46% / cover no-repeat; content: ""; filter: blur(4px); transform: scaleX(-1) scale(1.04); }
302-
.contact-section::after { position: absolute; z-index: -1; inset: 0; background: linear-gradient(102deg, rgba(3, 8, 17, 0.9) 0%, rgba(4, 12, 24, 0.68) 52%, rgba(5, 14, 26, 0.48) 100%), linear-gradient(0deg, rgba(2, 7, 14, 0.68) 0%, transparent 58%); content: ""; }
300+
.contact-section { position: relative; isolation: isolate; overflow: hidden; padding: 96px 0 30px; color: var(--ink); background: var(--white); }
301+
.contact-section::before, .contact-section::after { content: none; }
303302
.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; }
304-
.contact-eyebrow { color: rgba(255, 255, 255, 0.74); }
303+
.contact-eyebrow { color: var(--muted); }
305304
.contact-eyebrow > span { background: var(--green); }
305+
.contact-title { display: flex; align-items: center; gap: 18px; }
306+
.contact-title > svg { width: clamp(42px, 4vw, 58px); height: clamp(42px, 4vw, 58px); color: var(--blue); stroke-width: 1.5; }
306307
.contact-section h2 { max-width: 760px; margin: 0; font-size: clamp(40px, 4.8vw, 68px); letter-spacing: -0.055em; line-height: 1.09; }
307-
.contact-note { max-width: 560px; margin: 18px 0 0; color: rgba(255, 255, 255, 0.78); font-size: 14px; line-height: 1.7; }
308+
.contact-note { max-width: 560px; margin: 18px 0 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
308309
.contact-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
309-
.contact-links a { display: grid; grid-template-columns: 24px minmax(0, 1fr) 22px; gap: 14px; align-items: center; min-height: 64px; padding: 0 18px; border: 1px solid rgba(255, 255, 255, 0.38); background: rgba(5, 12, 23, 0.3); backdrop-filter: blur(12px); transition: border-color 180ms ease, background 180ms ease, transform 180ms ease; }
310-
.contact-links a:hover, .contact-links a:focus-visible { border-color: var(--white); background: rgba(255, 255, 255, 0.14); transform: translateY(-3px); }
311-
.contact-links a > svg { width: 18px; height: 18px; color: #a8c5ff; }
310+
.contact-links a { display: grid; grid-template-columns: 24px minmax(0, 1fr) 22px; gap: 14px; align-items: center; min-height: 64px; padding: 0 18px; border: 1px solid var(--line-strong); background: #fbfcfe; transition: border-color 180ms ease, background 180ms ease, transform 180ms ease; }
311+
.contact-links a:hover, .contact-links a:focus-visible { border-color: var(--blue); background: var(--blue-soft); transform: translateY(-3px); }
312+
.contact-links a > svg { width: 18px; height: 18px; color: var(--blue); }
312313
.contact-links strong { font-size: 13px; overflow-wrap: anywhere; }
313-
.contact-section footer { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; margin-top: 90px; padding-top: 22px; color: rgba(255, 255, 255, 0.64); font-family: var(--font-geist-mono), monospace; font-size: 8px; border-top: 1px solid rgba(255, 255, 255, 0.25); }
314-
.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.4); background: rgba(5, 12, 23, 0.32); backdrop-filter: blur(12px); transition: color 180ms ease, background 180ms ease, border-color 180ms ease, transform 180ms ease; }
314+
.contact-section footer { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; margin-top: 90px; padding-top: 22px; color: var(--muted); font-family: var(--font-geist-mono), monospace; font-size: 8px; border-top: 1px solid var(--line); }
315+
.back-to-top { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px; color: var(--blue); font-size: 9px; font-weight: 750; border: 1px solid var(--line-strong); background: var(--white); transition: color 180ms ease, background 180ms ease, border-color 180ms ease, transform 180ms ease; }
315316
.back-to-top svg { width: 14px; height: 14px; }
316317
.back-to-top:hover, .back-to-top:focus-visible { color: var(--white); border-color: var(--blue); background: var(--blue); transform: translateY(-3px); }
317318

‎app/page.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import {
1414
PiEnvelope,
1515
PiGlobeHemisphereWest,
1616
PiShieldCheck,
17+
PiSmiley,
1718
PiStack,
1819
} from 'react-icons/pi';
1920
import { SiGithub, SiGooglescholar, SiLinkedin } from 'react-icons/si';
@@ -213,7 +214,7 @@ export default function Home() {
213214
<div className="section-fold-content"><OpenSourceGrid items={openSource} /></div>
214215
</details></div></section>
215216

216-
<section className="contact-section" id="contact"><div className="section-shell contact-layout" data-reveal><div><p className="contact-eyebrow"><span />CONTACT</p><h2>联系我</h2><p className="contact-note">欢迎通过邮件联系，也可以在学术主页与开源社区找到我。</p></div><div className="contact-links"><a href="mailto:zhewentan1@gmail.com"><PiEnvelope aria-hidden="true" /><strong>邮箱</strong><PiArrowUpRightBold aria-hidden="true" /></a><a href="https://scholar.google.com/citations?user=6uw9ALUAAAAJ" {...externalLinkProps}><SiGooglescholar aria-hidden="true" /><strong>谷歌学术</strong><PiArrowUpRightBold aria-hidden="true" /></a><a href="https://github.com/tandede" {...externalLinkProps}><SiGithub aria-hidden="true" /><strong>GitHub</strong><PiArrowUpRightBold aria-hidden="true" /></a><a href="https://www.linkedin.com/in/zhewen-tan-0ba830401/" {...externalLinkProps}><SiLinkedin aria-hidden="true" /><strong>LinkedIn</strong><PiArrowUpRightBold aria-hidden="true" /></a></div></div><footer className="section-shell"><span>© 2026 ZHEWEN TAN</span><span>BEIJING · CHINA</span><a className="back-to-top" href="#top"><PiArrowUpBold aria-hidden="true" />回到顶部</a></footer></section>
217+
<section className="contact-section" id="contact"><div className="section-shell contact-layout" data-reveal><div><p className="contact-eyebrow"><span />CONTACT</p><div className="contact-title"><h2>联系我</h2><PiSmiley aria-hidden="true" /></div><p className="contact-note">欢迎通过邮件联系，也可以在学术主页与开源社区找到我。</p></div><div className="contact-links"><a href="mailto:zhewentan1@gmail.com"><PiEnvelope aria-hidden="true" /><strong>邮箱</strong><PiArrowUpRightBold aria-hidden="true" /></a><a href="https://scholar.google.com/citations?user=6uw9ALUAAAAJ" {...externalLinkProps}><SiGooglescholar aria-hidden="true" /><strong>谷歌学术</strong><PiArrowUpRightBold aria-hidden="true" /></a><a href="https://github.com/tandede" {...externalLinkProps}><SiGithub aria-hidden="true" /><strong>GitHub</strong><PiArrowUpRightBold aria-hidden="true" /></a><a href="https://www.linkedin.com/in/zhewen-tan-0ba830401/" {...externalLinkProps}><SiLinkedin aria-hidden="true" /><strong>LinkedIn</strong><PiArrowUpRightBold aria-hidden="true" /></a></div></div><footer className="section-shell"><span>© 2026 ZHEWEN TAN</span><span>BEIJING · CHINA</span><a className="back-to-top" href="#top"><PiArrowUpBold aria-hidden="true" />回到顶部</a></footer></section>
217218
</main>
218219
);
219220
}

0 commit comments

Comments
 (0)