Logo

菜单

发布于 2026-01-06 6 阅读
0

我如何重写我的作品集网站 DEV 的全球展示挑战赛，由 Mux 呈现：推介你的项目！

我是如何重写我的作品集网站的

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

这周，我没去学什么新东西，而是有点沉迷于重写我的作品集网站。我决定写一篇博客文章，记录这个过程以及我一路学到的东西，而不是像往常那样写一篇关于某项技术的文章。在这个项目中，我用到了三个以前不太常用的工具：P5.js、CSS动画和Flexbox。

这周早些时候，我在创意编程俱乐部 (Creative Coding Club) 的网站上发现了一个很喜欢的动画。“Creative Coding Club”的标题会在鼠标悬停时动态移动。我打开 CodePen，尝试复刻这个动画。最终我做出的动画效果和之前不太一样，字母会先下落，几秒钟后才会回到原来的位置。我最初用 CSS 实现了鼠标悬停时的动画效果；但是，鼠标移开后动画就停止了。所以我不得不使用 JavaScript 动态添加一个类，并在动画结束后移除该类。

这是我第一次使用关键帧和CSS动画，没想到这么简单！相关代码如下：

@keyframes myanimation {
    0% {
      top: 0px;
    }
    50% {
      top: 50px;
    }
    100% {
      top: 0px;
  }
}

.hovered {
  animation: myanimation 3s;
}
Enter fullscreen mode Exit fullscreen mode 
Array.from(document.getElementsByClassName('letter')).forEach(letter => {
  letter.addEventListener("mouseover", (e) => {
    letter.classList.add("hovered")
  })
  letter.addEventListener("animationend", (e) => {
    letter.classList.remove("hovered")
  })
})
Enter fullscreen mode Exit fullscreen mode

经过一番CSS调整，我最终在Codepen上做出了一个以我的名字为原型的设计稿。我非常喜欢这个动画效果，于是决定以此为基础，重新设计网站的其他部分，让名字也像彩虹一样绚丽多彩！我并非专业设计师，而且——虽然我应该学学——我通常不会事先绘制网站线框图，也不会使用任何设计软件。我只是先添加一个我设想的功能，然后不断调整，直到它在页面上看起来效果满意为止。

Codepen 模型

我还决定使用原生 JavaScript（不使用框架）和我自己编写的 CSS（同样不使用框架）。

最近我在 CodePen 上看到了一些很棒的 p5.js 项目。其中我最喜欢的是一个交互式物理实验平台和一个维基百科变更可视化工具。于是我决定为了这个项目学习一下这个库。我浏览了 p5 网站上的基础示例。我觉得根据用户输入绘制一些随机形状应该挺有意思的。而实现起来也相当简单，只是在网站示例的基础上做了一些扩展。

交互式物理游乐场

维基百科变更可视化工具

我的随机形状

P5 JavaScript 代码如下所示：

const numShapes = 3
const maxSize = 200

let colors = []
function setup () {
  colors = [
    color(255, 143, 0, 80),
    color(255, 128, 171, 80),
    color(255, 193, 7, 80),
    color(76, 175, 80, 80),
    color(0, 188, 212, 80),
    color(171, 71, 188, 80),
    color(239, 83, 80, 80)
  ]
  createCanvas(window.innerWidth, document.body.offsetHeight)
  noStroke()
}

function randomNumber (size) {
  return Math.floor(Math.random() * size)
}

function randomChoice  (choices) {
  let index = randomNumber(choices.length)
  return choices[index]
}

function mouseClicked () {
  let sideLength = randomNumber(maxSize)
  fill(randomChoice(colors))
  let shapeType = randomNumber(numShapes)
  if (shapeType % numShapes == 0) {
    ellipse(mouseX, mouseY, sideLength, sideLength)
  } else if (shapeType % numShapes == 1) {
    rect(mouseX, mouseY, sideLength, sideLength)
  } else {
    triangle(mouseX, mouseY, mouseX + sideLength, mouseY, 
      mouseX + (.5 * sideLength), mouseY - sideLength)
  }
}
Enter fullscreen mode Exit fullscreen mode

setup 函数会在文件加载完成后立即运行——它会初始化一个 HTML 画布。mouseClicked 函数会在用户点击画布上的任意位置时运行。它会运行几次随机数生成来获取画布的大小、颜色和形状。我发现它用起来非常简单，以后我还会再次使用它。

接下来，我需要向下滚动页面，添加“关于我”、“作品集”和“联系我”等版块。最近我一直在练习 Flexbox，因为我以前的大部分项目都使用 Bootstrap 和 Materialize 等带有内置网格的 CSS 库。我非常喜欢Flexbox Froggy这个学习工具——如果你想快速掌握 CSS Grid，可以试试CSS Grid Garden！我用它为包含照片和个人简介的两部分个人简介版块以及展示作品集的卡片式页面创建了网格布局。我觉得在 Safari 浏览器和超大屏幕上仍然存在一些问题，但我相信我已经快要完善它了！

总的来说，我非常享受这次网站全面重写的过程，而且网站流量也大幅增长（根据谷歌分析的数据，增长了21416.7%！）。当然，这很大程度上要归功于重写后社交媒体的使用，但大家对新网站的评价也非常好！

我一直以来都尽量减少库的使用，这巩固了我对标准 JavaScript 和 CSS 库的理解。我确实认为 React 或 Vue 可以让一些 HTML 代码更加模块化——最终的 HTML 代码超过 400 行！

我真的很喜欢这个设计，它既有趣又色彩缤纷，虽然可能打破了三色设计的规则！我觉得它很好地展现了我的个性，也很好地展示了我的作品。如果你想看看这个网站，网址是aspittel.github.io，代码在我的GitHub 仓库里！

这是我的“学习新事物系列”的一部分

文章来源：https://dev.to/aspittel/how-i-re-wrote-my-portfolio-site-cg
Brain.js DEV 全球展示...
3D CSS：学习用立方体而不是盒...