个人项目平台构建之旅：从过程与探索中生长的作品集

路径交汇：从灵感板到代码实践

今年夏天，我创建了个人项目平台。这个想法并非一开始就计划好的，当我意识到这个过程将引领我去向何方时，我已经走在了这条路上。

技术选型与架构决策

既然我们在Codrops上，让我们谈谈代码。我有PHP和JavaScript背景——那是ES6或TypeScript之前的旧式开发，更不用说Vue或React了。我想利用这个项目学习新技术。

经过研究，我选择了Nuxt.js。根据我的了解，它比Next.js更容易设置。由于我的平台不太可能很快需要扩展，我认为它能胜任工作。几年前我还接触过Prismic CMS，它轻量级，功能不多，但对我来说足够了。于是我观看了一些Nuxt.js+Prismic教程，就开始了。

交互组件的实现

英雄区域设计

我知道我想要交互式组件，让访问者能立即感受到我的工作。让我们从英雄区域开始。

在我的第一个草图中，花朵从小到大缩放，实际上是生长的。但后来我想：有多少次我卡在一个草图上，为一个无法实现的想法的感到沮丧？所以我决定线性增长并不诚实。大多数时候，当我从事项目时，我的思绪是混乱的。事物应该随机缩放，它们甚至不需要在宽度和高度上匹配。我喜欢这样，它反映了我工作中控制与混乱之间的张力。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33


/**
 * 获取下一张图像的一部分
 */
public getPortion(): p5.Image {
  // 获取原始图像
  const original = this.getNext();
  if (!original) return null;

  // 源坐标
  const ow = original.width;
  const oh = original.height;
  const sx = Math.random() * ow;
  const sy = Math.random() * oh;

  // 剩余部分
  const loW = ow - sx;
  const loH = oh - sy;

  let sw = Math.round(loW * Math.random()) + 10;
  let sh = Math.round(loH * Math.random()) + 10;

  // 目标坐标
  const dx = 0;
  const dy = 0;
  const dw = sw;
  const dh = sh;
   
  // 创建新图像
  const copy = this.p.createImage(dw, dh);
  copy.copy(original, sx, sy, sw, sh, dx, dy, dw, dh);

  return copy;
}

页脚交互设计

为了平衡英雄区域，我也让页脚具有交互性。我使用了一个较早的草图作为基础，添加了深度和纹理，使其感觉有点像抽象的海洋。

对我来说，它带来了一种平静和专注感——具有微妙的垂直运动，以及当你沿着x轴移动鼠标时变化的色调。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50


/**
 * 计算所有数据
 */
public update() {
  // 动画设置
  let duration: number = 128;
  let progress: number = this.p.frameCount % duration;
  if(progress == 0) this.iteration++;
   
  // 行数和高度
  let numRowsDrawn: number = this.numRows + 1 + this.iteration;
  let colW: number = this.p.width / this.numCols;
  let rowH: number = this.p.height / this.numRows;

  let count = 0;
  // 循环遍历行
  for (let y: number = this.iteration; y<numRowsDrawn; y++) {
     
    // 计算y位置（从底部开始）
    let targetY: number = this.p.height - (y+1) * rowH + this.iteration * rowH;

    // 我们在进度中的位置
    let posY: number = this.p.map(progress, 0, duration, targetY, targetY+rowH);
    // 鼠标影响
    const smoothing = 0.06;
    this.currentMouseX += (this.p.mouseX - this.currentMouseX) * smoothing;
    const mouseInfluence: number = this.p.map(this.currentMouseX, 0, this.p.width, .8, -.3);

    // 基于y位置的影响
    let yInfluence: number = this.p.map(posY / this.numRows, 0, rowH, 1, this.numRows+1) * mouseInfluence;
    // 每行双倍列数
    let extraCols: number = Math.exp(yInfluence * Math.LN2); 
    // 尺寸和位置
    let currentW: number = colW + extraCols * colW;
     
    // 循环遍历列
    for (let x:number = 0; x<this.numCols; x++) {
      // 计算x位置
      let posX: number = x * currentW - (extraCols * yInfluence + 1) * colW;

      // 不绘制屏幕x轴外的内容
      if(posX > this.p.width) continue;
      if(posX + currentW < 0) continue;

      // 绘制
      this.display(x, y, posX, posY, currentW, rowH);
      count++;
     }
   }
 }

砌体网格布局

我一直喜欢有很多内容的灵感网站。你会看到各种图像和视频，它们本身就很强大，但在不同背景下获得了新的意义。这就是我为案例概述想要的。

由于我不追求任何特定的图形风格，我喜欢它更像参考资料的集合。这就是为什么我决定使用砌体网格。我不想使用插件，所以我构建了这个CSS/JavaScript小工具，使用CSS Grid行来分布图像，并使用JavaScript计算它应该跨越多少行，取决于在CMS中设置的宽高比。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32


function applyMasonry() {
  // 获取网格和项目
  const grid = document.querySelector('.masonry-grid');
  const items = grid?.querySelectorAll('.masonry-item');

  // 确保两者都已加载
  if (!grid || !items) return

  // 从CSS获取属性
  const rowHeight = parseInt(getComputedStyle(grid).getPropertyValue('grid-auto-rows'))
  const gap = parseInt(getComputedStyle(grid).getPropertyValue('gap') || 0)
   
  items.forEach(item => {
    // 分别获取媒体和信息容器
    const media = item.querySelector('.masonry-item__image-container')
    const info = item.querySelector('.masonry-item__info-container')

    if (!media || !info) return

    // 将它们合并为项目高度
    const mediaHeight = media.getBoundingClientRect().height
    const infoHeight = info.getBoundingClientRect().height
    const itemHeight = mediaHeight + infoHeight

    // 计算要跨越的行数
    const rowSpan = Math.ceil((itemHeight + gap) / (rowHeight + gap))

    // 应用行跨度
    item.style.gridRowEnd = `span ${rowSpan}`;
    item.style.opacity = 1;
  })
}

技术栈性能对比：p5.js vs Three.js

因为我的英雄区域和页脚组件都是p5.js，所以这是我的首选。但它很慢——我是说真的很慢。无论我如何尝试优化它，3D工作负载都严重影响了性能。

几年前我只用过一次Three.js，但我记得它处理3D相当好。不确定使用多个库是否能获得最佳性能的网站，但既然这一切都是为了乐趣，我决定试一试。使用Three.js版本，我可以为结构添加更多细节，与p5.js版本相比，它仍然表现完美。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29


let instanceId: number = 0;

// 使用体素分辨率（细节）循环，而不是图像分辨率
for (let z: number = 0; z < detail; z++) {
 for (let y: number = 0; y < detail; y++) {
   const flippedY: number = detail - 1 - y;

   for (let x: number = 0; x < detail; x++) {
     // 使用归一化坐标采样图像
     const sampleX: number = Math.floor((x / detail) * imgDetail);
     const sampleY: number = Math.floor((flippedY / detail) * imgDetail);
     const sampleZ: number = Math.floor((z / detail) * imgDetail);

     const brightness1: number = getBrightnessAt(imgData, imgDetail, sampleX, sampleY);
     const brightness2: number = getBrightnessAt(imgData, imgDetail, sampleZ, sampleY);

     if (brightness1 < 100 && brightness2 < 100 && instanceId < maxInstances) {
       dummy.position.set(
         x * cellSize - (detail * cellSize) / 2,
         y * cellSize - (detail * cellSize) / 2,
         z * cellSize - (detail * cellSize) / 2
         );
       dummy.updateMatrix();
       mesh.setMatrixAt(instanceId, dummy.matrix);
       instanceId++;
     }
   }
 }
}

资源与代码共享

由于我真心想鼓励人们开始自己的个人项目之旅，我想分享资源和代码示例来帮助他们入门。

当然，随着这个平台的推出，我不得不为20多个项目追溯性地做这件事，所以未来我可能会分享更多过程和幕后内容。

结语

这个平台还没有完成——这就是重点。这是一个与我的编码工具互动的空间，是分享草图以供进一步探索的空间，是让过程本身保持可见的空间。如果你是一名设计师或程序员，我希望它能推动你开始或继续自己的副业。这就是创造力保持活力的方式。