From 58ccb3e74acbb300b6931d7e12494e6dd8caa3d8 Mon Sep 17 00:00:00 2001 From: biss Date: Sat, 2 May 2026 20:55:27 +0800 Subject: [PATCH] =?UTF-8?q?=E4=B8=AA=E4=BA=BA=E9=A1=B5=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/data/people.ts | 106 +++++++++++++++++++++-- src/pages/index.astro | 8 +- src/pages/people.astro | 11 ++- src/pages/people/[slug].astro | 88 +++++++++++++++++++ src/styles/global.css | 157 ++++++++++++++++++++++++++++++++-- 5 files changed, 354 insertions(+), 16 deletions(-) create mode 100644 src/pages/people/[slug].astro diff --git a/src/data/people.ts b/src/data/people.ts index b3a6d31..3195d98 100644 --- a/src/data/people.ts +++ b/src/data/people.ts @@ -1,43 +1,135 @@ export const peopleIntro = { title: "一年后的我们", - text: "这里可以做成同学卡片：姓名、所在城市、学校或方向，以及一句想对大家说的话。" + text: "这里可以做成同学卡片：姓名、所在城市、学校或方向，以及一句想对大家说的话。点进个人页，可以看到更完整的一年后近况。" }; export const people = [ { + slug: "student-a", initial: "A", name: "同学 A", location: "北京", - text: "这一年的关键词：开始、独立、想念。想和大家说：下次见面一定要拍一张新的合照。" + school: "示例大学", + direction: "计算机科学", + keywords: ["开始", "独立", "想念"], + text: "这一年的关键词：开始、独立、想念。想和大家说：下次见面一定要拍一张新的合照。", + currentStatus: "在新的城市慢慢适应大学节奏，学会了自己安排时间，也开始认真做一些以前只停留在想法里的事情。", + highlight: "第一次独自完成一个小项目，虽然过程有点乱，但最后跑起来的时候很开心。", + toPastSelf: "别太紧张，后来你会发现，那些看起来很难的日子真的会过去。", + messageToClass: "希望下次见面时，我们还能像以前一样很快聊起来。", + favoriteMemory: "晚自习后一起走出教学楼，风吹过来的那几分钟。", + contact: "可填写微信、邮箱或留空" }, { + slug: "student-b", initial: "B", name: "同学 B", location: "上海", - text: "偶尔还是会梦到上课铃。高中最珍贵的是：有人陪你一起把普通日子过得很亮。" + school: "示例学院", + direction: "新闻传播", + keywords: ["观察", "表达", "勇气"], + text: "偶尔还是会梦到上课铃。高中最珍贵的是：有人陪你一起把普通日子过得很亮。", + currentStatus: "这一年开始更频繁地记录生活，拍照、写稿、做采访，也更习惯主动表达自己的想法。", + highlight: "加入了校园媒体，第一次以采访者的身份认识陌生人。", + toPastSelf: "不要总觉得自己不够好，你其实一直在认真长大。", + messageToClass: "愿大家都有很多新的故事，也别忘了把故事讲给老同学听。", + favoriteMemory: "运动会看台上大家一起喊加油，声音乱七八糟但特别真。", + contact: "可填写微信、邮箱或留空" }, { + slug: "student-c", initial: "C", name: "同学 C", location: "广州", - text: "现在比以前更忙，也更懂得珍惜。希望大家都在自己的路上慢慢发光。" + school: "示例大学", + direction: "临床医学", + keywords: ["忙碌", "坚持", "珍惜"], + text: "现在比以前更忙，也更懂得珍惜。希望大家都在自己的路上慢慢发光。", + currentStatus: "课很多，节奏也快，但渐渐知道自己为什么选择这条路。", + highlight: "第一次在实验课上把课本里的知识和真实操作连起来。", + toPastSelf: "可以慢一点，但不要轻易否定自己。", + messageToClass: "大家都要好好吃饭、好好睡觉、好好生活。", + favoriteMemory: "高三春天的倒计时牌，每天都少一点，也每天更靠近终点。", + contact: "可填写微信、邮箱或留空" }, { + slug: "student-d", initial: "D", name: "同学 D", location: "成都", - text: "想念晚自习后的小卖部，也想念那些不用解释就能笑出来的人。" + school: "示例大学", + direction: "建筑学", + keywords: ["画图", "熬夜", "发现"], + text: "想念晚自习后的小卖部，也想念那些不用解释就能笑出来的人。", + currentStatus: "经常画图画到很晚，也开始用新的方式观察城市和空间。", + highlight: "第一次做完整模型，手上都是胶水，但看着它成型很有成就感。", + toPastSelf: "不用急着证明什么，你会慢慢找到自己的节奏。", + messageToClass: "下次聚会一定别只说说，真的要约起来。", + favoriteMemory: "课间围在一起聊天，最后因为上课铃匆匆散开。", + contact: "可填写微信、邮箱或留空" }, { + slug: "student-e", initial: "E", name: "同学 E", location: "武汉", - text: "一年过去，很多事情都变了，但听到班级群消息还是会立刻点开。" + school: "示例大学", + direction: "经济学", + keywords: ["变化", "尝试", "班群"], + text: "一年过去，很多事情都变了，但听到班级群消息还是会立刻点开。", + currentStatus: "试着参加社团、认识新人，也学会接受生活里那些计划外的变化。", + highlight: "第一次做公开展示，紧张到手心出汗，但还是讲完了。", + toPastSelf: "别害怕出错，很多机会都是试出来的。", + messageToClass: "班群别沉太久，偶尔冒泡也很好。", + favoriteMemory: "毕业照那天大家到处找笔签名，像在认真保存彼此。", + contact: "可填写微信、邮箱或留空" }, { + slug: "student-f", initial: "F", name: "同学 F", location: "南京", - text: "希望我们都成为更好的自己，也永远记得曾经一起努力过的样子。" + school: "示例大学", + direction: "软件工程", + keywords: ["代码", "成长", "再见面"], + text: "希望我们都成为更好的自己，也永远记得曾经一起努力过的样子。", + currentStatus: "写了很多以前看不懂的代码，也慢慢习惯从错误信息里找答案。", + highlight: "第一次把自己的网页部署上线，发给朋友看的时候很有仪式感。", + toPastSelf: "高三辛苦是真的，但你比自己想象得更能坚持。", + messageToClass: "愿我们下次见面，既能聊过去，也能聊现在。", + favoriteMemory: "最后一节课结束后，没有人马上离开教室。", + contact: "可填写微信、邮箱或留空" + }, + { + slug: "student-g", + initial: "G", + name: "同学 G", + location: "杭州", + school: "示例大学", + direction: "视觉传达", + keywords: ["审美", "作品", "灵感"], + text: "这一年开始认真做作品集，也更相信普通生活里有很多值得记录的东西。", + currentStatus: "在学习排版、摄影和品牌设计，手机相册里多了很多路牌、海报和天空。", + highlight: "第一次参加小型展览，看到自己的作品被别人停下来观看。", + toPastSelf: "你喜欢的东西不是没用，它会慢慢变成你的方向。", + messageToClass: "以后大家有照片和故事都发我，我来整理成页面。", + favoriteMemory: "教室窗帘被风吹起来，阳光落在桌面上的下午。", + contact: "可填写微信、邮箱或留空" + }, + { + slug: "student-h", + initial: "H", + name: "同学 H", + location: "西安", + school: "示例大学", + direction: "自动化", + keywords: ["实验", "社团", "稳定"], + text: "新的生活没有想象中轻松，但也有很多意料之外的有趣。", + currentStatus: "在实验室和社团之间来回切换，逐渐学会把复杂的事拆成一步一步。", + highlight: "和同学一起做了一个能动起来的小装置。", + toPastSelf: "保持好奇，别把自己困在成绩单里。", + messageToClass: "希望每个人都能在新环境里遇见好朋友。", + favoriteMemory: "晚读时有人忍不住笑，整排人都跟着憋笑。", + contact: "可填写微信、邮箱或留空" } ]; diff --git a/src/pages/index.astro b/src/pages/index.astro index 9c528c1..1afc116 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -113,13 +113,17 @@ const previewPeople = people.slice(0, 6);
{ previewPeople.map((person) => ( - + )) }
diff --git a/src/pages/people.astro b/src/pages/people.astro index e17b4ee..4ffa36b 100644 --- a/src/pages/people.astro +++ b/src/pages/people.astro @@ -20,13 +20,20 @@ import { site } from "../data/site";
{ people.map((person) => ( - + )) }
diff --git a/src/pages/people/[slug].astro b/src/pages/people/[slug].astro new file mode 100644 index 0000000..0f79af7 --- /dev/null +++ b/src/pages/people/[slug].astro @@ -0,0 +1,88 @@ +--- +import BaseLayout from "../../layouts/BaseLayout.astro"; +import { people, peopleIntro } from "../../data/people"; +import { site } from "../../data/site"; + +export function getStaticPaths() { + return people.map((person) => ({ + params: { slug: person.slug }, + props: { person } + })); +} + +const { person } = Astro.props; +--- + + +
+
+
+
+ 返回同学列表 +

Classmate Profile

+

{person.name}

+

{person.text}

+
+ +
+
+ +
+
+
+

Now

+

这一年的近况

+

{person.currentStatus}

+
+ +
+

Keywords

+

三个关键词

+
+ {person.keywords.map((keyword) => {keyword})} +
+
+ +
+

Highlight

+

这一年的小事

+

{person.highlight}

+
+ +
+

Past Self

+

想对高中时的自己说

+

{person.toPastSelf}

+
+ +
+

Memory

+

最想带走的高中瞬间

+

{person.favoriteMemory}

+
+ +
+

To Class

+

想对大家说

+

{person.messageToClass}

+
+
+
+
+ diff --git a/src/styles/global.css b/src/styles/global.css index 82769d5..7a70bf8 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -222,8 +222,13 @@ h2 { box-shadow: 0 8px 28px rgba(39, 55, 52, 0.06); } +.moment > div { + grid-column: 2; +} + .moment-link { position: relative; + padding-right: 70px; transition: border-color 180ms ease, box-shadow 180ms ease, @@ -232,10 +237,9 @@ h2 { .moment-link::after { content: "查看"; - align-self: start; - justify-self: end; - grid-column: 2; - grid-row: 1; + position: absolute; + top: 24px; + right: 24px; color: var(--green); font-size: 13px; font-weight: 800; @@ -504,6 +508,41 @@ h2 { background: #fff; } +.person-link { + display: block; + transition: + border-color 180ms ease, + box-shadow 180ms ease, + transform 180ms ease; +} + +.person-link:hover { + transform: translateY(-3px); + border-color: rgba(55, 109, 90, 0.34); + box-shadow: 0 16px 38px rgba(39, 55, 52, 0.12); +} + +.person-meta, +.keyword-row { + display: flex; + flex-wrap: wrap; + gap: 8px; + margin: 0 0 14px; +} + +.person-meta span, +.keyword-row span { + display: inline-flex; + align-items: center; + min-height: 28px; + padding: 4px 9px; + border-radius: 999px; + color: var(--green); + background: color-mix(in srgb, var(--green), white 88%); + font-size: 13px; + font-weight: 800; +} + .avatar { width: 54px; height: 54px; @@ -522,6 +561,97 @@ h2 { .person:nth-child(4) { --accent: #7b6b3a; } .person:nth-child(5) { --accent: #4d796d; } .person:nth-child(6) { --accent: #755c86; } +.person:nth-child(7) { --accent: #8b5f4d; } +.person:nth-child(8) { --accent: #2f6f79; } + +.person-hero-inner { + display: grid; + grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); + gap: clamp(28px, 5vw, 70px); + align-items: end; +} + +.profile-card { + padding: 24px; + border: 1px solid rgba(255, 253, 247, 0.22); + border-radius: 8px; + background: rgba(255, 253, 247, 0.1); + backdrop-filter: blur(12px); +} + +.profile-avatar { + width: 72px; + height: 72px; + margin-bottom: 22px; + background: #f1c979; + color: #21312d; + font-size: 24px; +} + +.profile-card dl { + display: grid; + gap: 14px; + margin: 0; +} + +.profile-card div { + display: grid; + gap: 2px; +} + +.profile-card dt { + color: rgba(255, 253, 247, 0.58); + font-size: 13px; +} + +.profile-card dd { + margin: 0; + color: #fffdf7; + font-weight: 800; +} + +.detail-grid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 18px; +} + +.detail-panel { + min-height: 220px; + padding: 26px; + border: 1px solid var(--line); + border-radius: 8px; + background: #fff; + box-shadow: 0 8px 28px rgba(39, 55, 52, 0.06); +} + +.detail-panel.wide { + grid-column: 1 / -1; +} + +.detail-panel .eyebrow { + color: var(--blue); +} + +.detail-panel h2 { + margin-bottom: 16px; + font-size: clamp(24px, 3vw, 34px); +} + +.detail-panel p { + margin: 0; + color: var(--muted); +} + +.keyword-row.large { + margin: 0; +} + +.keyword-row.large span { + min-height: 40px; + padding: 7px 14px; + font-size: 15px; +} .message-wall { display: grid; @@ -605,7 +735,9 @@ footer { .stats, .section-title, - .message-wall { + .message-wall, + .person-hero-inner, + .detail-grid { grid-template-columns: 1fr; } @@ -627,6 +759,21 @@ footer { .moment { grid-template-columns: 1fr; } + + .moment > div { + grid-column: auto; + } + + .moment-link { + padding-right: 22px; + } + + .moment-link::after { + position: static; + margin-top: 10px; + grid-column: auto; + justify-self: start; + } } @media (max-width: 560px) {