我如何建立我的完美分数投资组合网站

2025-06-07

我如何建立我的完美分数投资组合网站

我最近发布了我的投资组合jemimaabu.com的第四个版本。
在这个版本中，我尝试让代码尽可能高效易用，同时又保留了一个可交互的网站。所以本文将讲述我是如何做到这一点的。

作品集设计-tiny.gif

我们将要讨论的是我的投资组合中的以下特点：

  • 内容清晰，易于浏览。
  • 使用 HTML、CSS 和 JavaScript 构建（无需框架或库）
  • 适用于禁用 JS 的浏览器
  • Vanilla JavaScript 实现智能导航和滚动动画
  • 6 种不同的颜色主题
  • 在可访问性、性能、最佳实践和 SEO 方面获得满分

完成后，我在 Twitter 上分享了这个作品集，得到了很多反馈，也收到了人们询问某些功能的消息，所以我决定写这篇文章来解释这些功能。

1. 创建设计

我花了大约一个月的时间来设计我的作品集，主要是因为我是在反复试验的基础上设计整个作品集的——更换不同的布局和颜色，直到我喜欢它的外观。

我还在互联网上浏览其他人的作品集以寻找灵感并使用我喜欢的功能。

以下是我从中获得灵感的一些投资组合：

清除内容

我想要修改以前版本的投资组合的一个主要原因是希望将所有内容都放在我的网站上，而不会使登陆页面超载。

我为每种内容设置了不同的页面，并选择了我认为最能呈现信息的设计：

  • 关于页面- 将部分拆分为可扩展的细节，以减少页面上的文本显示
  • 文章页面- 根据大多数博客文章的显示方式显示简单的文章标题和描述。
  • 讨论页面- 响应式表格中设置的信息（表格在较小的屏幕上转换为列表）
  • 项目页面- 项目设置在滑块轮播中，这样我就可以包含尽可能多的项目，而不需要很长的页面。

我还在登录页面上包含了每个内容的选定部分以及指向每个页面的号召性用语按钮，以鼓励用户导航。

2.编写代码

自从我的投资组合的第二个版本（它无疑是所有版本中性能最差的版本）以来，我总是使用 HTML 和 CSS 从头开始​​构建我的投资组合，尽可能少地使用 JavaScript 依赖。

我还尽量避免使用框架或库，以便优化代码的性能和可访问性。

适用于非 JS 浏览器

页面上的许多交互实际上是通过 CSS 或语义 HTML 而不是 JavaScript 完成的，例如：

这样做的好处是该网站不依赖 JavaScript 来显示信息，因此即使没有 JavaScript 也能正常工作。

Vanilla JS 实现

我使用 JavaScript 来处理页面上的一些小交互，例如滚动时元素淡入淡出、智能导航以及处理多种颜色主题。我还写了两篇文章来介绍我是如何做到的：

为了确保内容不依赖于 JavaScript 的显示，我只在 JavaScript 加载完成后才对元素实现效果。例如，对于scroll-in元素，我的 JavaScript 代码如下所示：

scrollElements.forEach((el) => {
  el.classList.add('js-opacity');
})
Enter fullscreen mode Exit fullscreen mode

然后我通过仅针对附加的类来处理样式js-opacity。

.scroll-in.js-opacity {
  opacity: 0;
}
Enter fullscreen mode Exit fullscreen mode

这样，只有当脚本实际加载时元素才会隐藏，并且由于登录页面不太重或没有进行多次调用，脚本几乎会立即加载。

如何实现多种颜色主题

配色方案.png
这绝对是最有趣的功能。

我的作品集的第一个版本有一个深色/浅色主题切换，但这次我想要一些更有趣的东西，所以我想，既然可以有六种颜色，为什么还要只有两种颜色呢。

我使用原生 JavaScript 和 CSS 实现了多颜色主题功能。
最棒的是，有了这项功能，我可以根据需要设置任意数量的颜色主题。

这是处理主题切换的 JavaScript 代码：

const setTheme = (className) => {
  var root = document.getElementsByTagName('html')[0];
  root.className = className;
}
Enter fullscreen mode Exit fullscreen mode

我们需要做的就是根据所选内容为根元素分配一个 className。
然后 HTML 代码如下：

<button onclick="setTheme('light')" aria-label="Set light theme">
</button>
<button onclick="setTheme('dark')" aria-label="Set dark theme">
</button>
<button onclick="setTheme('brown')" aria-label="Set brown theme">
</button>
...
Enter fullscreen mode Exit fullscreen mode

我们的 CSS 如下所示：

:root,
:root.light {
  --background-color: #fafafa;
  --text-color: #000;
  ...
}

:root.dark {
  --background-color: #0d1926;
  --text-color: #f7fafc;
  ...
}

:root.brown {
  --background-color: #eeeae2;
  --text-color: #120c07;
  ...
}
...
Enter fullscreen mode Exit fullscreen mode

最后，确保您仅根据 CSS 变量为每个元素分配颜色。

body {
  background-color: var(--background-color);
  color: var(--text-color);
}
Enter fullscreen mode Exit fullscreen mode

您可以实现一个可选功能，即根据用户的系统设置设置深色/浅色主题。我们可以使用prefers-color-scheme媒体查询来实现。
我们只需要更新默认的根变量：

@media (prefers-color-scheme: dark) {
/* set new default root to same colors in root.dark */
  :root {
    --background-color: #0d1926;
    --text-color: #f7fafc;
  }
}
Enter fullscreen mode Exit fullscreen mode

这就是逻辑的要点。你可以在我的投资组合库中看到完整的实现。

3.部署站点

实现所有内容和逻辑后，我将代码仓库添加到我的 Netlify 网站，并将其连接到我的自定义网站。您可以在“构建我的投资组合灵感”的第三篇文章《如何创建投资组合网站——初学者开发者指南》中阅读我如何从 Netlify 设置持续部署（以及更多托管和部署网站的选项）。

如何在你的网站上获得完美的灯塔评分

您可以使用 DevTools 中的 Lighthouse 审核工具测试您网站的分数。

灯塔标签.png

建议以隐身模式运行 Lighthouse，以防止扩展程序干扰您的评分。它会根据您满足特定指标的程度返回一份报告，给出相应的分数，并指出您可以修复的问题。

您可以通过记录退回的物品并进行相应的修复来轻松提高您的分数。

以下是我确保每个类别获得高分的方法：

可访问性

可访问性.png
确保你的网站尽可能地无障碍始终是最佳选择，而不仅仅是为了分数。你可以观看我的视频“理解无障碍概念”，了解更多信息。

以下是我为确保网站可访问性而采取的一些措施：

  1. 使用可访问性检查表
  2. 使用VSCode 中的Web Accessibility 扩展编写代码
  3. 对自定义元素使用适当的 aria-role
  4. 构建后手动测试网站（检查所有元素是否获得可见焦点、鼠标可操作元素是否可与键盘配合使用等）。

您还可以在构建后使用WAVE 工具进行进一步测试。

性能

性能.png
这确实让我很头疼，但下面是我获得完美性能分数的方法：

  • 压缩所有图片，并设置明确的宽高。这是导致性能分数下降的最常见因素之一，主要是因为实施起来压力很大。我将所有图片的大小调整为它们在页面上渲染的最大宽度，大约 720px，并设置明确的宽高，最后用 CSS 使它们具有响应式布局。
<img src="" width="720" height="340" alt="">
Enter fullscreen mode Exit fullscreen mode 
img {
  width: 100%;
  height: auto;
}
Enter fullscreen mode Exit fullscreen mode

我之所以能够做到这一点，是因为我提供了保存在本地文件夹中的静态图像，因此如果您从 CDN 或其他地方调用图像，请查看它们提供的用于渲染响应式图像的选项。

  • 我根据调用它们的页面拆分了所有代码，以确保不会加载不必要的样式表或脚本。我的网站 CSS 非常繁琐，因此我没有调用一个大型的 CSS 文件，而是根据需要的页面拆分文件。

文件结构.png

  • 减少页面加载动画。Chrome
    会检测文本在页面上显示的时间，该时间会影响性能得分，因此请尽量将加载动画保持在 1 秒（1 秒）以内。

  • 使用 font-face 而不是 link 导入字体。不知何故，Google Chrome 将从 Google Fonts 下载的字体标记为阻止渲染的资源，这让我很奇怪，因为你们不是同一家公司吗？你们修好了，还想让我做什么（我开玩笑的，哈哈。大部分情况下是这样）。

SEO和最佳实践

最佳实践.png
搜索引擎优化.png

SEO 和最佳实践通常与性能和可访问性息息相关，因此只要您在这些方面取得良好的评分，它们就会随之而来。
审核报告会告诉您需要更新哪些内容，以便您随时修复任何出现的错误。

结论

这就是我打造完美分数作品集网站的方法。也许你会好奇，为什么网站上的满分很重要？

当然是为了炫耀。而且，如果你拿到满分，还能得到烟花，这总是很棒的。

灯塔烟花.gif

不过说真的，重要的不是完美的分数，而是其背后的想法。

您应该始终按照最佳实践构建尽可能可访问且性能卓越的网站，而 SEO 则是额外的优势。Lighthouse 评分只是衡量您在这方面做得如何的一种方式。

感谢阅读 :) 如果您发现本文有帮助，请在评论中或在Twitter上告诉我。

文章来源：https://dev.to/jemimaabu/how-i-built-my-perfect-score-portfolio-website-4ek0
Devto 翻译
PREV
Git Rebase 防止合并提交
NEXT
如何伪装成一名软件工程师