Harshith Nayaka L portfolio docs

Harshith — 作品集

AI 工程师作品集。单页滚动页面（个人资料、关于、作品、我的创作、经历、技术栈、Agent 技能、GitHub 动态、常见问题、联系），另有各项目的案例研究路由和法律页面，采用 21 世纪初赛车运动风格：陈列中的 F1 头盔、那个年代的数码相机、那个年代的汽车音响，以及驶过屏幕的汽车。浅色画布，支持深色模式；标题使用 Instrument Serif，正文和标签使用 Inter。之前的设计已归档在 classic-design 分支。

这个网站也针对机器阅读进行了构建：每个页面都会预渲染为静态 HTML，提供对应的 Markdown 版本，并通过只读 JSON API 镜像。

技术栈

• Vite + React 18 + TypeScript
• Tailwind CSS v4（@tailwindcss/vite）；所有主题令牌都位于 src/index.css
• 使用 React Router 处理案例研究和法律页面路由
• 通过 @fontsource 自托管字体：Inter Variable（正文和标签）、Instrument Serif（展示标题）、Poppins（主视觉标题）——从 public/fonts 提供，并在 index.html 中预加载
• Phosphor 图标
• 使用 @bible-strong/avatar-core 定义吉祥物的几何形状
• 使用 @vercel/edge 实现内容协商中间件

没有使用动画库。滚动显示效果和页面过渡使用 CSS 关键帧与 IntersectionObserver 实现；为此引入运行时会让整个库进入初始打包文件。

开发

npm install
npm run dev      # http://localhost:5173
npm run build    # type-check, client build, SSR build, prerender, API
npm run preview  # serve the production build
npm run lint     # type-check only

npm run build 分为四个阶段，后面几个才是关键：vite build 输出客户端打包文件，第二次运行 vite build --ssr 输出 dist-ssr/entry-server.js，scripts/prerender.mjs 遍历所有路由并写入实际 HTML 及每个页面对应的 Markdown 版本，最后 scripts/build-api.mjs 输出静态 JSON API。直接运行 vite build（npm run build:client）会跳过所有这些步骤，生成一个空壳 SPA。

检查

npm run verify:negotiation   # 25 client shapes get the right representation
npm run verify:onee          # every mascot animation is reachable
npm run verify:llms <origin> # needs a Vercel deployment, not npm run preview

verify:llms 将源站地址作为第一个参数。请传入 Vercel 部署地址：vite preview 不会运行中间件或重写规则，而是对每个嵌套路由都回退到根页面，因此即使页面在生产环境中正常，也会导致检查失败。

部署

Vercel。构建命令 npm run build，输出目录 dist。

• middleware.ts 在边缘运行，负责内容协商、API 路由表，以及 /api 下所有请求的 JSON 错误响应。
• vercel.json 定义了重写规则和响应头。
• public/_redirects 是为 Netlify 保留的；Vercel 不会读取它。

内容

所有实际内容都位于 src/data/：

• projects.ts — 精选作品卡片，以及电子邮件、GitHub 和 LinkedIn。
• caseStudies.ts — 完整案例研究（问题、构建过程、流水线图、判断依据、结果、技术）。架构图由数据驱动：编辑 pipeline 数组即可重新渲染节点图。
• skills.ts — Agent 技能部分。
• seo.ts — 各路由的标题、描述和 JSON-LD。
• onee.avatar.json — 吉祥物定义。

添加或移除项目时，需要修改 projects.ts、caseStudies.ts 以及 middleware.ts 中的 slug 集合。scripts/build-api.mjs 会在构建时检查这些内容是否一致；若有差异，构建就会失败，从而避免将不匹配的内容发布出去。

导航栏的玻璃效果

src/components/GlassFilter.tsx 中有一个 CONFIG 配置块，使用 liquid-glass.ybouane.com 中的参数名称——blurAmount、refraction、chromAberration、edgeHighlight、fresnel、zRadius 等。修改这些数值即可调整导航栏；滤镜图形会根据这些参数构建。

这个库本身无法在这里运行：它会将 WebGL 画布调整为覆盖所有折射内容，而本页面在桌面端高达 12,473px，在手机上高达 19,236px，需要的画布会超过 Chromium 的 16,384px 上限。因此，这里将效果重建为一个由 backdrop-filter 引用的 SVG 滤镜。WebKit 和 Gecko 无法解析其中的滤镜引用，因此会回退到旁边声明的普通模糊效果——边缘处没有折射，但磨砂质感相同。

待处理

• 自定义域名。规范 URL 和 og:url 目前指向 vercel.app 子域名。
• 在 iOS Safari 中确认玻璃效果。回退方案声明在前，因此应该能正常生效，但尚未在真实的 WebKit 引擎上检查。
• 预渲染的 HTML 约为 110KB，其中约 40% 是 Tailwind 类属性（642 个元素共 47,748 字节），11% 是 JSON-LD。