Yanbai Independent Designer Portfolio
A dark portfolio for an independent designer: a profile column on the left with availability status, a light-streak primary button and the live local time; on the right an infinite work canvas you can drag in any direction with inertia. Opening a piece shows a large image viewer, plus an electric-outline quote dialog and a project brief form.
Overview
A complete single-file page to start from. Structure, copy slots and responsive layout are all in place; copy the prompt to your model and it rewrites the copy, colors and images for your brand.
Where to use it
DesignWork室, 自由职业者和PersonalPortfolio网站.
Install
With Builder, fetch the full page source with the 8pt CLI or call it directly from an editor connected to 8pt MCP.
$ npm i -g @8pt-dev/cli && 8pt template yanbai-portfolio-canvas
mcp › Use 8pt MCP to call get_template("yanbai-portfolio-canvas")
Code
Single-file HTML + CSS, no build step.
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>砚白 · 独立产品设计师</title>
<meta name="description" content="砚白的作品集：可拖拽的无限作品画布、报价与项目需求弹窗。">
<style>
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%;background:#12100f;color:#efe9de;font-family:"PingFang SC","Noto Sans SC","Noto Sans CJK SC","Microsoft YaHei",system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow:hidden}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0}
…Subscribe to Builder to see the full source.See pricing