Alien
骑着复古街车的 Alien,戴哑光黑全盔、穿卡其色外套

你好,我是Hi, I'm Alien

写前端,也造框架。
东西要好看,更要够快。
I write frontend, and build the framework under it.
Good-looking, and above all, fast.

FRONTEND ENGINEER · CINEVIEW AUTHOR

关于我About

喜欢敲前端代码,I write frontend 玩转各种现代 Web 技术。for a living, and for fun.

专注把页面做得流畅好看、性能在线。Smooth, good-looking pages, with performance that holds up.

写代码有热爱,过日子有自由。Code with passion, live free.

框架Frameworks
React · Vue · Nuxt · Web Components
语言Languages
TypeScript · Node.js
工程Tooling
Vite · Pinia · Framer Motion
专长Focus
性能优化 · 前端架构 · 交互动效Performance · Architecture · Motion

路上On the road

不写代码的时候When I'm not coding

往下滚,跟上前面的车队 ↓Scroll to catch up with the group ↓

01听歌Music耳机不离身headphones always on

02骑摩托Riding和车友往山里跑into the mountains with friends

03旅行Travel到处溜达wherever the road goes

云层下的雪山和山谷
五位骑手背对镜头,坐在摩托车上手拉着手,面朝雪山
2022 年 10 月 · 和车友们October 2022 · with the crew

骑够了,就回来接着写代码。When the ride's over, back to the code.

作品Works

刚才那段山路,That ride you just scrolled 就是用 CineView 做的。was built with CineView.

CineView v2.0.1

我写的落地页框架。页面就是普通 HTML 加几个自定义元素:分成几幕,每幕一条时间线,读者往下滚,时间线就往前走。没有运行时依赖,还附带一套给 AI 用的设计技能,让它先和你定好分镜,再动手写页面。 A landing-page framework I wrote. Pages are plain HTML plus a few custom elements: split into scenes, each with a timeline that moves as the reader scrolls. No runtime dependencies, and a design skill that has an AI plan the storyboard with you before it writes the page.

7
个自定义元素custom elements
0
个运行时依赖runtime dependencies
41
条设计参考design references
90%
行覆盖率line coverage
那段山路的写法(节选)How that ride is written (abridged)
<cv-scene zone>
  <cv-video src="road.mp4" duration="3000"></cv-video>
  <cv-animate delay="450" duration="850">
    <p>听歌</p>
  </cv-animate>
</cv-scene>

开源Open source

Resume

一个海外招聘平台的前端,职位和简历都有,支持中英文。自带模拟数据,不用后端,克隆下来就能跑。The frontend of an overseas hiring platform, with jobs and résumés in Chinese and English. It ships its own mock data, so it runs without a backend: clone it and go.

Vue 3 · Vite · Ant Design Vue · Pinia · Vue I18n

GitHub

还在做Work in progress

Mowen

一个 AI agent 运行时,重点是不编造:每一步都留记录、能重放,回答里的事实要先过校验才发出去。An AI agent runtime focused on not making things up: every step is recorded and can be replayed, and facts in an answer pass a check before they go out.

Python · FastAPI · PostgreSQL