现在的我们部分

src/data/people.ts

@@ -1,6 +1,6 @@
 export const peopleIntro = {
-  title: "一年后的我们",
+  title: "如今的我们",
-  text: "这里可以做成同学卡片：姓名、所在城市、学校或方向，以及一句想对大家说的话。点进个人页，可以看到更完整的一年后近况。"
+  text: "这里可以做成同学卡片：近照、姓名、所在城市、学校或方向，以及一句想对大家说的话。点进个人页，可以看到更完整的近况。"
 };
 
 export const people = [
@@ -8,6 +8,7 @@ export const people = [
     slug: "student-a",
     initial: "A",
     name: "同学 A",
+    photo: "",
     location: "北京",
     school: "示例大学",
     direction: "计算机科学",
@@ -19,117 +20,5 @@ export const people = [
     messageToClass: "希望下次见面时，我们还能像以前一样很快聊起来。",
     favoriteMemory: "晚自习后一起走出教学楼，风吹过来的那几分钟。",
     contact: "可填写微信、邮箱或留空"
-  },
-  {
-    slug: "student-b",
-    initial: "B",
-    name: "同学 B",
-    location: "上海",
-    school: "示例学院",
-    direction: "新闻传播",
-    keywords: ["观察", "表达", "勇气"],
-    text: "偶尔还是会梦到上课铃。高中最珍贵的是：有人陪你一起把普通日子过得很亮。",
-    currentStatus: "这一年开始更频繁地记录生活，拍照、写稿、做采访，也更习惯主动表达自己的想法。",
-    highlight: "加入了校园媒体，第一次以采访者的身份认识陌生人。",
-    toPastSelf: "不要总觉得自己不够好，你其实一直在认真长大。",
-    messageToClass: "愿大家都有很多新的故事，也别忘了把故事讲给老同学听。",
-    favoriteMemory: "运动会看台上大家一起喊加油，声音乱七八糟但特别真。",
-    contact: "可填写微信、邮箱或留空"
-  },
-  {
-    slug: "student-c",
-    initial: "C",
-    name: "同学 C",
-    location: "广州",
-    school: "示例大学",
-    direction: "临床医学",
-    keywords: ["忙碌", "坚持", "珍惜"],
-    text: "现在比以前更忙，也更懂得珍惜。希望大家都在自己的路上慢慢发光。",
-    currentStatus: "课很多，节奏也快，但渐渐知道自己为什么选择这条路。",
-    highlight: "第一次在实验课上把课本里的知识和真实操作连起来。",
-    toPastSelf: "可以慢一点，但不要轻易否定自己。",
-    messageToClass: "大家都要好好吃饭、好好睡觉、好好生活。",
-    favoriteMemory: "高三春天的倒计时牌，每天都少一点，也每天更靠近终点。",
-    contact: "可填写微信、邮箱或留空"
-  },
-  {
-    slug: "student-d",
-    initial: "D",
-    name: "同学 D",
-    location: "成都",
-    school: "示例大学",
-    direction: "建筑学",
-    keywords: ["画图", "熬夜", "发现"],
-    text: "想念晚自习后的小卖部，也想念那些不用解释就能笑出来的人。",
-    currentStatus: "经常画图画到很晚，也开始用新的方式观察城市和空间。",
-    highlight: "第一次做完整模型，手上都是胶水，但看着它成型很有成就感。",
-    toPastSelf: "不用急着证明什么，你会慢慢找到自己的节奏。",
-    messageToClass: "下次聚会一定别只说说，真的要约起来。",
-    favoriteMemory: "课间围在一起聊天，最后因为上课铃匆匆散开。",
-    contact: "可填写微信、邮箱或留空"
-  },
-  {
-    slug: "student-e",
-    initial: "E",
-    name: "同学 E",
-    location: "武汉",
-    school: "示例大学",
-    direction: "经济学",
-    keywords: ["变化", "尝试", "班群"],
-    text: "一年过去，很多事情都变了，但听到班级群消息还是会立刻点开。",
-    currentStatus: "试着参加社团、认识新人，也学会接受生活里那些计划外的变化。",
-    highlight: "第一次做公开展示，紧张到手心出汗，但还是讲完了。",
-    toPastSelf: "别害怕出错，很多机会都是试出来的。",
-    messageToClass: "班群别沉太久，偶尔冒泡也很好。",
-    favoriteMemory: "毕业照那天大家到处找笔签名，像在认真保存彼此。",
-    contact: "可填写微信、邮箱或留空"
-  },
-  {
-    slug: "student-f",
-    initial: "F",
-    name: "同学 F",
-    location: "南京",
-    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: "可填写微信、邮箱或留空"
   }
 ];

src/data/site.ts

@@ -12,7 +12,7 @@ export const navItems = [
   { label: "首页", href: "/" },
   { label: "三年时间线", href: "/timeline/" },
   { label: "照片墙", href: "/gallery/" },
-  { label: "一年后的我们", href: "/people/" },
+  { label: "如今的我们", href: "/people/" },
   { label: "留言墙", href: "/messages/" }
 ];
 

src/pages/index.astro

@@ -114,7 +114,10 @@ const previewPeople = people.slice(0, 6);
           {
             previewPeople.map((person) => (
               <a class="person person-link" href={`/people/${person.slug}/`}>
-                <div class="avatar">{person.initial}</div>
+                <div class="person-photo" style={person.photo ? `--person-photo: url("${person.photo}")` : ""}>
+                  <span>{person.initial}</span>
+                </div>
+                <div class="person-body">
                   <h3>
                     {person.name} · {person.location}
                   </h3>
@@ -123,12 +126,13 @@ const previewPeople = people.slice(0, 6);
                     <span>{person.direction}</span>
                   </div>
                   <p>{person.text}</p>
+                </div>
               </a>
             ))
           }
         </div>
 
-        <a class="section-link" href="/people/">查看所有同学</a>
+        <a class="section-link" href="/people/">查看如今的我们</a>
       </div>
     </section>
 

src/pages/people.astro

@@ -21,7 +21,10 @@ import { site } from "../data/site";
           {
             people.map((person) => (
               <a class="person person-link" href={`/people/${person.slug}/`}>
-                <div class="avatar">{person.initial}</div>
+                <div class="person-photo" style={person.photo ? `--person-photo: url("${person.photo}")` : ""}>
+                  <span>{person.initial}</span>
+                </div>
+                <div class="person-body">
                   <h3>
                     {person.name} · {person.location}
                   </h3>
@@ -33,6 +36,7 @@ import { site } from "../data/site";
                     {person.keywords.map((keyword) => <span>{keyword}</span>)}
                   </div>
                   <p>{person.text}</p>
+                </div>
               </a>
             ))
           }

src/pages/people/[slug].astro

@@ -24,7 +24,9 @@ const { person } = Astro.props;
           <p>{person.text}</p>
         </div>
         <aside class="profile-card">
-          <div class="avatar profile-avatar">{person.initial}</div>
+          <div class="profile-photo" style={person.photo ? `--person-photo: url("${person.photo}")` : ""}>
+            <span>{person.initial}</span>
+          </div>
           <dl>
             <div>
               <dt>所在城市</dt>
@@ -38,6 +40,10 @@ const { person } = Astro.props;
               <dt>方向</dt>
               <dd>{person.direction}</dd>
             </div>
+            <div>
+              <dt>联系方式</dt>
+              <dd>{person.contact}</dd>
+            </div>
           </dl>
         </aside>
       </div>

src/styles/global.css

@@ -528,7 +528,7 @@ h2 {
 
 .person {
   min-height: 210px;
-  padding: 22px;
+  overflow: hidden;
   border: 1px solid var(--line);
   border-radius: 8px;
   background: #fff;
@@ -548,6 +548,36 @@ h2 {
   box-shadow: 0 16px 38px rgba(39, 55, 52, 0.12);
 }
 
+.person-photo,
+.profile-photo {
+  min-height: 150px;
+  display: grid;
+  place-items: center;
+  color: #fffdf7;
+  background:
+    linear-gradient(0deg, rgba(31, 43, 42, 0.28), rgba(31, 43, 42, 0.04)),
+    var(--person-photo, linear-gradient(135deg, var(--accent), #e8a84c));
+  background-size: cover;
+  background-position: center;
+}
+
+.person-photo span,
+.profile-photo span {
+  width: 54px;
+  height: 54px;
+  display: grid;
+  place-items: center;
+  border: 1px solid rgba(255, 253, 247, 0.4);
+  border-radius: 50%;
+  background: rgba(31, 43, 42, 0.28);
+  font-weight: 900;
+  backdrop-filter: blur(8px);
+}
+
+.person-body {
+  padding: 20px 22px 22px;
+}
+
 .person-meta,
 .keyword-row {
   display: flex;
@@ -569,18 +599,6 @@ h2 {
   font-weight: 800;
 }
 
-.avatar {
-  width: 54px;
-  height: 54px;
-  display: grid;
-  place-items: center;
-  margin-bottom: 22px;
-  border-radius: 50%;
-  background: color-mix(in srgb, var(--accent), white 72%);
-  color: var(--accent);
-  font-weight: 900;
-}
-
 .person:nth-child(1) { --accent: var(--green); }
 .person:nth-child(2) { --accent: var(--blue); }
 .person:nth-child(3) { --accent: var(--coral); }
@@ -605,12 +623,16 @@ h2 {
   backdrop-filter: blur(12px);
 }
 
-.profile-avatar {
+.profile-photo {
+  min-height: 230px;
+  margin-bottom: 22px;
+  border-radius: 6px;
+  --accent: #f1c979;
+}
+
+.profile-photo span {
   width: 72px;
   height: 72px;
-  margin-bottom: 22px;
-  background: #f1c979;
-  color: #21312d;
   font-size: 24px;
 }