fix: mobile hover tips, About page updates, and Vercel build#84
Conversation
Co-authored-by: Cursor <cursoragent@cursor.com> Co-authored-by: Claude <noreply@anthropic.com>
Volunteering roles only had years and role, so TypeScript narrowed away optional detail and failed the Vercel production typecheck. Co-authored-by: Claude <noreply@anthropic.com> Co-authored-by: Cursor <cursoragent@cursor.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
📝 WalkthroughWalkthroughThe About page now uses a shared role-item structure for experience and volunteering entries. Experience items render years separately, and volunteering entries now group roles under organizations with optional meta and detail fields. ChangesAbout page role layout refactor
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Comment |
![devin-ai-integration[bot]](https://avatars.githubusercontent.com/in/811515?s=60&v=4){kind=small}
| {/* Volunteering */} | ||
| <div className="mag-card shrink-0"> | ||
| <div className="mag-label">Volunteering</div> | ||
| <div> | ||
| <div className="flex flex-col"> | ||
| {[ | ||
| { | ||
| years: "Oct 2023 – Dec 2025", | ||
| role: "Certified First Aider", | ||
| org: "SUSTech Emergency Rescue Association", | ||
| meta: "Shenzhen", | ||
| roles: [ | ||
| { | ||
| years: "Oct 2023 – Dec 2025", | ||
| role: "Certified First Aider", | ||
| }, | ||
| ] as AboutRole[], | ||
| }, | ||
| ].map(({ years, role, org }, i) => ( | ||
| ].map(({ org, meta: orgMeta, roles }, groupIndex) => ( | ||
| <div | ||
| key={i} | ||
| className="py-4 border-b border-zinc-100 dark:border-zinc-800/60 last:border-0" | ||
| key={org} | ||
| className="py-4 md:py-3 border-b border-zinc-100 dark:border-zinc-800/60 last:border-0" | ||
| > | ||
| <span | ||
| style={{ fontFamily: "'Nunito'", fontWeight: 400, fontSize: 11, letterSpacing: "0.04em" }} | ||
| className="text-zinc-400 dark:text-zinc-600 block mb-1" | ||
| > | ||
| {years} | ||
| </span> | ||
| <p | ||
| style={{ fontFamily: "'Nunito'", fontWeight: 600, fontSize: 17, lineHeight: 1.4 }} | ||
| className="text-zinc-800 dark:text-zinc-200" | ||
| > | ||
| {role} | ||
| </p> | ||
| <p | ||
| style={{ fontFamily: "'Nunito'", fontWeight: 400, fontSize: 16, lineHeight: 1.5 }} | ||
| className="text-[#C4894F] dark:text-[#D9A870] mt-0.5" | ||
| > | ||
| {org} | ||
| </p> | ||
| {orgMeta ? ( | ||
| <p | ||
| style={{ fontFamily: "'Nunito'", fontWeight: 400, fontSize: 11, letterSpacing: "0.04em" }} | ||
| className="text-zinc-400 dark:text-zinc-600 mt-1" | ||
| > | ||
| {orgMeta} | ||
| </p> | ||
| ) : null} | ||
| <div className={roles.length > 1 ? "mt-3 space-y-0" : "mt-2.5"}> | ||
| {roles.map((roleItem, roleIndex) => ( | ||
| <div | ||
| key={`${groupIndex}-${roleIndex}`} | ||
| className={ | ||
| roleIndex > 0 | ||
| ? "pt-4 mt-4 border-t border-zinc-100 dark:border-zinc-800/60" | ||
| : undefined | ||
| } | ||
| > | ||
| <p | ||
| style={{ fontFamily: "'Nunito'", fontWeight: 600, fontSize: 17, lineHeight: 1.4 }} | ||
| className="text-[#C4894F] dark:text-[#D9A870]" | ||
| > | ||
| {roleItem.role} | ||
| </p> | ||
| <span | ||
| style={{ | ||
| fontFamily: "'Nunito'", | ||
| fontWeight: 400, | ||
| fontSize: 11, | ||
| letterSpacing: "0.04em", | ||
| }} | ||
| className="text-zinc-400 dark:text-zinc-600 block mt-1" | ||
| > | ||
| {roleItem.years} | ||
| </span> | ||
| {roleItem.detail ? ( | ||
| <p | ||
| style={{ fontFamily: "'Nunito'", fontWeight: 400, fontSize: 15, lineHeight: 1.55 }} | ||
| className="text-zinc-500 dark:text-zinc-500 mt-1.5" | ||
| > | ||
| {roleItem.detail} | ||
| </p> | ||
| ) : null} | ||
| </div> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| ))} | ||
| </div> |
There was a problem hiding this comment.
🚩 Volunteering section restructured to match Experience — visual ordering changed
The old Volunteering section rendered items in the order: years → role → org (with the org styled as an accent-colored sub-label). The new code at app/about/page.tsx:286-361 restructures it to match Experience: org → meta → role → years. This means the org name is now the primary heading (zinc-800/200) and the role is the accent-colored element beneath it. For the single current entry ('SUSTech Emergency Rescue Association' / 'Certified First Aider'), this changes the visual hierarchy noticeably — the role title ('Certified First Aider') moves from being the large primary text to being the accent sub-heading. This is likely intentional for consistency but is a semantic/visual change worth confirming.
(Refers to lines 286-361)
Was this helpful? React with 👍 or 👎 to provide feedback.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (1)
app/about/page.tsx (1)
299-299: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winAvoid
as AboutRole[]on the inline data.This assertion weakens field checking for future edits in the volunteering block. Typing the collection itself preserves the optional
detailfix without masking misspelled or missing role fields.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@app/about/page.tsx` at line 299, The volunteering data block is using an inline type assertion to AboutRole[], which bypasses field validation. Remove the inline assertion and type the collection itself where it is defined in the About page data so the existing detail optionality is preserved while still catching misspelled or missing role fields in the volunteering entries.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In `@app/about/page.tsx`:
- Line 299: The volunteering data block is using an inline type assertion to
AboutRole[], which bypasses field validation. Remove the inline assertion and
type the collection itself where it is defined in the About page data so the
existing detail optionality is preserved while still catching misspelled or
missing role fields in the volunteering entries.
1 participant
Summary
HoverTiptap-to-toggle, help icon styling, z-index/stacking).AboutRole.detail.Test plan
npm run lint && npm run typecheck && npm run test && npm run build?icon on mobile — tooltip toggles without horizontal overflowMade with Cursor
Summary by CodeRabbit