Khối
Masthead
Block: the nameplate, folio line with the language switch, and the section nav.
Nội dung tham khảo viết bằng tiếng Anh; mục “Vietnamese” có ví dụ tiếng Việt.
Xem trước
Pham Do Nhat MinhAgentic Software EngineerHo Chi Minh City
ENVI
Install
bash
npx shadcn add @eloquent/mastheadUsage
tsx
import { Masthead } from "@/components/blocks/masthead";
<Masthead
nameplate="The Eloquent"
nameplateHref="/"
folio={{ name: "Pham Do Nhat Minh", title: "Agentic Software Engineer", city: "Ho Chi Minh City" }}
languageSwitch={{ locale: "en", label: "Language", hrefFor: (locale) => `/${locale}` }}
nav={{ label: "Sections", items: [{ label: "Work", href: "/work", current: true }, { label: "Contact", href: "/contact" }] }}
/>States
| State | Treatment |
|---|---|
| Nameplate and folio only | Omit languageSwitch and nav |
| Current section | aria-current="page", bold, 2px ink underline |
| Mobile | The language switch takes its own right-aligned row above the nav |
Keyboard
| Key | Action |
|---|---|
| Tab | Nameplate link, language link, then each section link in reading order |
| Shift+Tab | Back through the same stops |
| Enter | Follows the focused link |
Vietnamese
Phạm Đỗ Nhật MinhKỹ sư phần mềm AgenticTP. Hồ Chí Minh
ENVI
The nameplate "The Eloquent" stays English in the Vietnamese edition.
Ink adaptation
Block with no upstream. A heavy ink rule opens the head, hairlines frame the folio line and close the nav, and the current section is shown by an underline rather than colour. Links have no hover effect.