← 返回列表

你好世界

3 分钟阅读
建站AstroThree.js

为什么要建这个网站

作为一名全栈工程师,我一直想有一个属于自己的空间,用来展示项目、记录技术思考。

技术选型

这个网站使用了以下技术栈:

  • Astro - 内容驱动的静态站点框架
  • React - 交互组件(Three.js 场景、Spline 嵌入)
  • Three.js / R3F - WebGL 3D 粒子动画
  • Tailwind CSS v4 - 原子化样式
  • GSAP - 滚动驱动动画
  • Cloudflare Pages - 全球 CDN 部署

代码示例

import { Canvas } from '@react-three/fiber';

export default function Scene() {
  return (
    <Canvas camera={{ position: [0, 0, 5] }}>
      <ambientLight />
      <mesh>
        <sphereGeometry args={[1, 32, 32]} />
        <meshStandardMaterial color="purple" />
      </mesh>
    </Canvas>
  );
}

下一步计划

  • 完善项目展示页面
  • 添加更多交互动效
  • 持续输出技术博客