<!DOCTYPE html>

<head>

<title>Devin | AI Native 商业架构师</title>

<style>

@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&family=Inter:wght@300;400;600;800&display=swap');

:root {

--accent: #3b82f6;

--purple: #8b5cf6;

--yellow: #f59e0b;

--bg-dark: #08080a;

--terminal-green: #4ade80;

}

body {

background-color: var(--bg-dark);

color: #fff;

font-family: 'Inter', sans-serif;

overflow-x: hidden;

margin: 0;

}

/* 神经元背景容器 */

#canvas-container {

position: fixed;

top: 0; left: 0; width: 100%; height: 100%;

z-index: -1;

/* 深紫色到深蓝色的径向渐变 */

background: radial-gradient(circle at center, #1a1025 0%, #0a0a12 100%);

}

/* 终端加载层 */

#terminal-loader {

position: fixed;

top: 0; left: 0; width: 100%; height: 100%;

background: #000;

z-index: 100;

display: flex;

justify-content: center;

align-items: center;

font-family: 'Fira Code', monospace;

}

.terminal-window {

width: 90%;

max-width: 700px;

background: rgba(20, 20, 20, 0.95);

border-radius: 8px;

box-shadow: 0 30px 60px rgba(0,0,0,0.5);

border: 1px solid #333;

overflow: hidden;

}

.terminal-header { background: #222; padding: 10px 15px; display: flex; gap: 8px; }

.dot { width: 10px; height: 10px; border-radius: 50%; }

.red { background: #ff5f56; }

.yellow-dot { background: #ffbd2e; }

.green { background: #27c93f; }

.terminal-body { padding: 25px; min-height: 250px; color: #aaa; line-height: 1.6; font-size: 13px; }

#main-content { opacity: 0; }

/* 二级页面：实验室界面 */

#project-lab {

position: fixed;

top: 0; left: 0; width: 100%; height: 100%;

z-index: 50;

background: rgba(10, 10, 18, 0.96);

backdrop-filter: blur(30px);

display: none;

opacity: 0;

transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);

transform: scale(1.05);

}

#project-lab.active { display: flex; opacity: 1; transform: scale(1); }

.sidebar-item.active {

background: rgba(59, 130, 246, 0.1);

color: var(--accent);

border-right: 3px solid var(--accent);

}

.tab-btn.active { color: #fff; border-bottom: 2px solid var(--accent); }

/* 导航 */

.nav-link { position: relative; padding: 0.5rem 0; transition: color 0.3s; }

.nav-link::after {

content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px;

background: var(--accent); transition: width 0.3s;

}

.nav-link:hover::after { width: 100%; }

/* 卡片设计 */

.glass-card {

background: rgba(255, 255, 255, 0.03);

backdrop-filter: blur(10px);

border: 1px solid rgba(255, 255, 255, 0.08);

border-radius: 20px;

transition: all 0.3s ease;

}

.glass-card:hover { border-color: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.05); }

/* Services 卡片复刻 */

.card-yellow {

background: linear-gradient(135deg, #fcd34d 0%, #f59e0b 100%);

color: #1a1a1a;

box-shadow: 0 10px 40px rgba(245, 158, 11, 0.2);

}

.card-blue {

background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);

color: #fff;

box-shadow: 0 10px 40px rgba(59, 130, 246, 0.2);

}

.pill-btn {

background: rgba(0,0,0,0.1);

backdrop-filter: blur(5px);

padding: 6px 16px;

border-radius: 99px;

font-size: 0.75rem;

display: inline-flex;

align-items: center;

gap: 6px;

font-weight: 600;

}

.big-bg-text {

position: absolute; right: 10px; top: 10px;

font-size: 6rem; font-weight: 900;

opacity: 0.1; pointer-events: none;

letter-spacing: -5px;

}

.horizontal-scroll {

display: flex; overflow-x: auto; gap: 1.5rem;

padding: 20px 0; scrollbar-width: none;

}

.horizontal-scroll::-webkit-scrollbar { display: none; }

.project-card { flex: 0 0 300px; cursor: pointer; }

.interview-grid {

display: grid; grid-template-columns: 1fr 1.5fr;

background: rgba(255,255,255,0.03);

border-radius: 24px; overflow: hidden;

border: 1px solid rgba(255,255,255,0.05);

}

.interview-panel { padding: 40px; }

/* 首屏内容样式 */

.hero-title { font-size: clamp(3rem, 10vw, 8rem); font-weight: 800; line-height: 0.9; letter-spacing: -0.05em; }

.pixel-text { font-family: 'Fira Code', monospace; color: var(--terminal-green); }

@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.animate-fade-in { animation: fadeIn 0.4s ease-out forwards; }

</style>

</head>

<body>

</div>

</div>

<i class="fas fa-arrow-left"></i> BACK

</button>

</div>

</nav>

</aside>

</header>

</main>

</div>

<div class="text-2xl font-black tracking-tighter cursor-pointer" onclick="window.location.reload()">DEVIN<span class="text-blue-500 italic">X</span></div>

<a href="#vision" class="nav-link hover:text-white transition">VISION</a>

<a href="#project" class="nav-link hover:text-white transition">PROJECT</a>

<a href="#services" class="nav-link hover:text-white transition">SERVICES</a>

<a href="#contact" class="nav-link hover:text-white transition">CONTACT</a>

</div>

</nav>

OPC x AI NATIVE // SYSTEM ONLINE

</div>

<h1 class="hero-title mb-8 tracking-tighter">Devin</h1>

研发总监 / AI 商业闭环架构师

</div>

<div class="text-[10px] tracking-[0.3em] text-blue-500 font-bold">SCROLL DOWN</div>

1 person * AI = 1 team

</div>

</section>

<h4 class="text-xl font-bold mb-4">极致个人生产力</h4>

<p class="text-gray-500 leading-relaxed text-sm">通过 AI Agents 和自动化流，让个体的创造力被无限放大。为个人做生产体效。</p>

</div>

<p class="text-gray-500 leading-relaxed text-sm">One Person Company 思维下的团队重构。将 AI 团队作为插槽部署，为企业做运营优化。</p>

</div>

<h4 class="text-xl font-bold mb-4">商业闭环共创</h4>

<p class="text-gray-500 leading-relaxed text-sm">超越技术实现，为产业寻找 AI Native 商业闭环解决方案。从底层重构盈利逻辑。</p>

</div>

</section>

<h3 class="text-3xl font-black mb-12">AI Project Matrix</h3>

<p class="text-gray-500 text-xs mb-6">数据集与 Model 沉淀，底层研发基座。</p>

<div class="flex gap-2"><span class="px-2 py-1 bg-white/5 rounded text-[9px]">Data-Centric</span></div>

</div>

<p class="text-gray-500 text-xs mb-6">Agent/Claw/Skill 三位一体效能方案。</p>

<div class="flex gap-2"><span class="px-2 py-1 bg-white/5 rounded text-[9px]">Agents</span></div>

</div>

<p class="text-gray-500 text-xs mb-6">在化工、钢铁、零售落地的场景。</p>

<div class="flex gap-2"><span class="px-2 py-1 bg-white/5 rounded text-[9px]">Industry 4.0</span></div>

</div>

</section>

<h3 class="text-3xl font-black">正在做的事</h3>

</div>

<div>

<h3 class="text-2xl font-black mb-3">AI 商业闭环架构</h3>

<p class="text-black/70 text-sm leading-relaxed max-w-xs">不是简单的 AI+ 传统业务，而是从零设计 AI 原生的商业模式。</p>

</div>

<div><div class="pill-btn">AI Native · Business Loop →</div></div>

</div>

<div>

<h3 class="text-2xl font-black mb-3">OPC x AI NATIVE</h3>

<p class="text-white/70 text-sm leading-relaxed max-w-xs">One Person Company powered by AI。为个人做生产体校、为企业做运营优化。</p>

</div>

<div><div class="pill-btn">OPC · 1 Person = 1 Team →</div></div>

</div>

</section>

</main>

// --- Three.js 神经元网络渲染 ---

let scene, camera, renderer, particles, lines;

let particlePositions, linePositions, lineColors;

let pointsGeometry, lineGeometry;

const maxParticleCount = 120; // 神经元粒子数量

const particleData = [];

const minDistance = 150; // 连接最小距离

let mouseX = 0, mouseY = 0;

function initNeuralNetwork() {

const container = document.getElementById('canvas-container');

scene = new THREE.Scene();

camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 4000);

camera.position.z = 1000;

renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });

renderer.setPixelRatio(window.devicePixelRatio);

renderer.setSize(window.innerWidth, window.innerHeight);

container.appendChild(renderer.domElement);

const group = new THREE.Group();

scene.add(group);

// 粒子系统

particlePositions = new Float32Array(maxParticleCount * 3);

for (let i = 0; i < maxParticleCount; i++) {

const x = Math.random() * 800 - 400;

const y = Math.random() * 800 - 400;

const z = Math.random() * 800 - 400;

particlePositions[i * 3] = x;

particlePositions[i * 3 + 1] = y;

particlePositions[i * 3 + 2] = z;

particleData.push({

velocity: new THREE.Vector3(-1 + Math.random() * 2, -1 + Math.random() * 2, -1 + Math.random() * 2),

numConnections: 0

});

}

pointsGeometry = new THREE.BufferGeometry();

pointsGeometry.setAttribute('position', new THREE.BufferAttribute(particlePositions, 3).setUsage(THREE.DynamicDrawUsage));

const pMaterial = new THREE.PointsMaterial({

color: 0x3b82f6,

size: 3,

blending: THREE.AdditiveBlending,

transparent: true,

sizeAttenuation: true

});

particles = new THREE.Points(pointsGeometry, pMaterial);

group.add(particles);

// 线段系统

linePositions = new Float32Array(maxParticleCount * maxParticleCount * 3);

lineColors = new Float32Array(maxParticleCount * maxParticleCount * 3);

lineGeometry = new THREE.BufferGeometry();

lineGeometry.setAttribute('position', new THREE.BufferAttribute(linePositions, 3).setUsage(THREE.DynamicDrawUsage));

lineGeometry.setAttribute('color', new THREE.BufferAttribute(lineColors, 3).setUsage(THREE.DynamicDrawUsage));

const lMaterial = new THREE.LineBasicMaterial({

vertexColors: true,

blending: THREE.AdditiveBlending,

transparent: true,

opacity: 0.4

});

lines = new THREE.LineSegments(lineGeometry, lMaterial);

group.add(lines);

window.addEventListener('resize', onWindowResize);

document.addEventListener('mousemove', (e) => {

mouseX = (e.clientX - window.innerWidth / 2);

mouseY = (e.clientY - window.innerHeight / 2);

});

animate();

}

function onWindowResize() {

camera.aspect = window.innerWidth / window.innerHeight;

camera.updateProjectionMatrix();

renderer.setSize(window.innerWidth, window.innerHeight);

}

function animate() {

let vertexpos = 0;

let colorpos = 0;

let numConnected = 0;

for (let i = 0; i < maxParticleCount; i++) particleData[i].numConnections = 0;

for (let i = 0; i < maxParticleCount; i++) {

const pData = particleData[i];

particlePositions[i * 3] += pData.velocity.x * 0.5;

particlePositions[i * 3 + 1] += pData.velocity.y * 0.5;

particlePositions[i * 3 + 2] += pData.velocity.z * 0.5;

// 边界检查

if (particlePositions[i * 3 + 1] < -400 || particlePositions[i * 3 + 1] > 400) pData.velocity.y = -pData.velocity.y;

if (particlePositions[i * 3] < -400 || particlePositions[i * 3] > 400) pData.velocity.x = -pData.velocity.x;

if (particlePositions[i * 3 + 2] < -400 || particlePositions[i * 3 + 2] > 400) pData.velocity.z = -pData.velocity.z;

// 鼠标交互

const dx = particlePositions[i * 3] - mouseX;

const dy = particlePositions[i * 3 + 1] - mouseY;

const distMouse = Math.sqrt(dx*dx + dy*dy);

if(distMouse < 200) {

particlePositions[i * 3] += dx * 0.01;

particlePositions[i * 3 + 1] += dy * 0.01;

}

// 检查粒子间连接

for (let j = i + 1; j < maxParticleCount; j++) {

const dx = particlePositions[i * 3] - particlePositions[j * 3];

const dy = particlePositions[i * 3 + 1] - particlePositions[j * 3 + 1];

const dz = particlePositions[i * 3 + 2] - particlePositions[j * 3 + 2];

const dist = Math.sqrt(dx * dx + dy * dy + dz * dz);

if (dist < minDistance) {

pData.numConnections++;

particleData[j].numConnections++;

const alpha = 1.0 - dist / minDistance;

linePositions[vertexpos++] = particlePositions[i * 3];

linePositions[vertexpos++] = particlePositions[i * 3 + 1];

linePositions[vertexpos++] = particlePositions[i * 3 + 2];

linePositions[vertexpos++] = particlePositions[j * 3];

linePositions[vertexpos++] = particlePositions[j * 3 + 1];

linePositions[vertexpos++] = particlePositions[j * 3 + 2];

// 连线颜色渐变

lineColors[colorpos++] = alpha * 0.3; // R

lineColors[colorpos++] = alpha * 0.5; // G (偏青/紫)

lineColors[colorpos++] = alpha * 1.0; // B

lineColors[colorpos++] = alpha * 0.3;

lineColors[colorpos++] = alpha * 0.5;

lineColors[colorpos++] = alpha * 1.0;

numConnected++;

}

lines.geometry.setDrawRange(0, numConnected * 2);

lines.geometry.attributes.position.needsUpdate = true;

lines.geometry.attributes.color.needsUpdate = true;

particles.geometry.attributes.position.needsUpdate = true;

requestAnimationFrame(animate);

renderer.render(scene, camera);

}

// --- 启动与终端控制 ---

const terminalLoader = document.getElementById('terminal-loader');

const mainContent = document.getElementById('main-content');

const terminalOutput = document.getElementById('terminal-output');

const commands = [

{ cmd: "sys.init()", res: "Neural Network Online..." },

{ cmd: "whoami", res: "Devin | AI Native Architect" },

{ cmd: 'echo "1 person * AI = 1 team"', res: "Potential: UNLIMITED ✨" }

];

async function startApp() {

initNeuralNetwork(); // 始终初始化背景

const hasVisited = sessionStorage.getItem('devin_visited_v2');

if (hasVisited) {

terminalLoader.style.display = 'none';

mainContent.style.opacity = '1';

} else {

terminalLoader.style.display = 'flex';

await typeTerminal();

sessionStorage.setItem('devin_visited_v2', 'true');

setTimeout(() => {

terminalLoader.style.opacity = '0';

setTimeout(() => {

terminalLoader.style.display = 'none';

mainContent.style.opacity = '1';

mainContent.style.transition = 'opacity 1s ease';

}, 500);

}, 400);

}

async function typeTerminal() {

for (let i = 0; i < commands.length; i++) {

const line = document.createElement('div');

line.innerHTML = `<span style="color: #3b82f6">$</span> <span class="cmd-text"></span>`;

terminalOutput.appendChild(line);

const cmdSpan = line.querySelector('.cmd-text');

for (let char of commands[i].cmd) { cmdSpan.textContent += char; await new Promise(r => setTimeout(r, 15)); }

const res = document.createElement('div');

res.style.padding = "4px 0 12px 12px"; res.style.color = "#666"; res.innerHTML = `> ${commands[i].res}`;

terminalOutput.appendChild(res); await new Promise(r => setTimeout(r, 200));

}

window.onload = startApp;

// --- 二级实验室逻辑 (复用) ---

const labData = {

chain: {

tabs: ["数据集", "Model"],

content: {

"数据集": [{ title: "化工产业本体库", desc: "涵盖30万+精细化工语义节点的知识图谱数据集。", tag: "Domain Data" }],

"Model": [{ title: "Indus-LLM-70B", desc: "针对工业调度指令优化的垂直行业大模型。", tag: "Self-trained" }]

}

method: {

tabs: ["Agent", "Claw", "Skill"],

content: {

"Agent": [{ title: "协同型 Agent 框架", desc: "支持多 Agent 任务拆解与自愈的底层编排逻辑。", tag: "Core" }],

"Claw": [{ title: "Claw 流程自动化", desc: "通过 AI 模拟人类操作实现存量系统的无感接入。", tag: "Tool" }],

"Skill": [{ title: "Skill-Set 标准库", desc: "沉淀了500+针对特定业务场景的 Prompt 指令集。", tag: "Library" }]

}

industry: {

tabs: ["化工", "钢铁", "零售"],

content: {

"化工": [{ title: "反应釜优化系统", desc: "利用 AI Native 架构减少 15% 的能源消耗。", tag: "Case Study" }],

"钢铁": [{ title: "智能配煤架构", desc: "基于多目标优化的 AI 商业闭环应用。", tag: "Efficiency" }],

"零售": [{ title: "全渠道智能补货", desc: "OPC 团队在零售侧的闭环赋能实践。", tag: "Operation" }]

}

};

function openLab(category) {

window.currentCat = category;

const lab = document.getElementById('project-lab');

lab.style.display = 'flex';

setTimeout(() => lab.classList.add('active'), 10);

document.body.style.overflow = 'hidden';

renderLab();

}

function closeLab() {

const lab = document.getElementById('project-lab');

lab.classList.remove('active');

setTimeout(() => { lab.style.display = 'none'; }, 500);

document.body.style.overflow = 'auto';

}

function switchCategory(cat) {

window.currentCat = cat;

renderLab();

}

function renderLab() {

document.querySelectorAll('.sidebar-item').forEach(el => el.classList.remove('active'));

const sideEl = document.getElementById(`side-${window.currentCat}`);

if(sideEl) sideEl.classList.add('active');

const data = labData[window.currentCat];

document.getElementById('tab-container').innerHTML = data.tabs.map((tab, idx) => `

${tab.toUpperCase()}

</button>

`).join('');

renderTabContent(data.tabs[0]);

}

function renderTabContent(tabName) {

document.querySelectorAll('.tab-btn').forEach(btn => {

btn.classList.toggle('active', btn.innerText.toLowerCase() === tabName.toLowerCase());

});

const content = labData[window.currentCat].content[tabName];

document.getElementById('lab-content').innerHTML = `

${content.map(item => `

<h4 class="text-lg font-bold mb-3">${item.title}</h4>

</div>

`).join('')}

</div>

}

</script>

</body>

</html>