我如何建立我的梦想作品集网站

介绍

我创造梦想

TL;DR

2021 年，我的个人网站迎来了重大更新！这次更新version 6带来了一些我多年来一直努力打造的超酷功能。（欢迎大家提供任何关于改进网站的反馈。）

查看已部署的站点 ↗️

目录

1. 介绍
2. v0.1（模板）
3. v1- v4Bootstrap 优点
4. v5标志着一个巨大的变化
5. v6整合一切
   • 职业时间表（可拖动）
   • 带有动画缩略图的文章
   • Dev.to API 集成
   • 优化文件结构
   • 重建导航
   • 简化动画

介绍

以下是一段编码之旅，对我作为开发人员的成长至关重要。

正如你所见，我网站的最初几个版本并不像我想象的那样。但随着我的编程技能逐渐成熟，我的网站也逐渐成型。

我分享这段经历是为了表达一个想法。虽然新项目令人兴奋，但重温旧项目也能带来巨大的学习体验。有时，经过多次重构才能达到预期的效果……

返回顶部

v0.1（模板）

长期以来，我一直有一个 Adob​​e Portfolio 网站，用来展示我的设计项目，效果非常好。它链接到我的Behance 个人资料，所以添加新内容非常方便。（实际上，我仍然使用这个网站来发布我的设计相关内容。）

我通过它找到了设计工作，甚至在数字营销比赛中获得了三等奖。然而，我当时只能使用模板布局，一直想真正地建立自己的网站。

因此，当我在 2020 年开始我的全栈开发训练营时，我非常兴奋，因为我们的作业包括编写新的作品集网站的代码。

返回顶部

v1- v4Bootstrap 优点

我一开始v1只是做一个普通的静态 Bootstrap 网站，在课程期间不断添加项目和进行 UI 微调。虽然网站很普通，但我很高兴自己写的代码能上线。🙌（而且能及时提交评分。）

我记得我当时对项目缩略图上的这个小悬停效果非常自豪。我花了好几个小时才搞明白。😆

返回顶部

v5标志着一个巨大的变化

在训练营快结束时，我学到了足够的代码知识，可以创建我自己的 React 作品集了！这个版本v5带来了我品牌的彻底重新设计和构想。🎉（缩略图也更好了。😉）

我花了大约一周的时间设计并编写了整个网站，直到今天，我仍然保留着许多基本元素。

• 深色配色方案使工作示例脱颖而出
• 使用“空白”来划分部分的最小布局
• 技能部分列出了我使用的技术和示例项目
• 链接到我的 Adob​​e Portfolio 网站的设计项目简化版本

增量更新

在接下来的几个月里，我的网站进行了许多小的或实验性的更新。

• 使用 GSAP3 实现滚动动画
• 固定侧面部分包含社交链接和导航。
• 展示我的爱好的卡片，带有自定义悬停效果

返回顶部

v6整合一切

尽管尝试新功能很有趣，但我的网站却变成了一个科学怪人。

我还真的想创建一个博客，并以某种方式在我的网站上显示帖子，而无需完全创建后端。

需要更新的关键区域...

• 完善并进一步充实设计方向
• 删除/简化动画等不起作用的内容
• 添加缺少的核心功能，例如博客和职业部分
• 重组站点导航和组件文件夹以支持未来的发展。

事不宜迟，以下是已更改的区域！✨

返回顶部

1. 职业时间轴（可拖动）

我希望以一种视觉上引人入胜的方式展示我的工作经历，而无需人们费力地去查看我的领英或简历。颜色与技术部分的颜色相呼应，分别对应{开发：蓝色}、{设计：红色}和{学习/教育：绿色}。

此部分可在移动设备上使用鼠标或手指拖动。使用 CSS Grids 和 Flexbox 编写代码真是太棒了！

返回顶部

2. 带有动画缩略图的文章

我选择在 Dev.to 上开设我的博客，并用它来支持我网站文章的“后端”。（更多详情请见下一节。）

为了我的品牌形象，保持商品卡片的极简风格至关重要。我喜欢使用简洁的元素，每个元素都有其用途，然后再添加一个小的或单个的“流行”元素。

我想到的解决方案是让文章的图片缩略图在鼠标悬停时显示。同时，交错放置一个行动号召 (CTA) 链接。

返回顶部

3. Dev.to API 集成

如上所述，我使用 Dev.to API 来支持我网站上的文章。

我还有很多计划来过滤和搜索帖子，但 Dev.to API 仍处于测试阶段，功能尚未完善。

因此在这个阶段，我有一个 API 调用，它会查找我的用户发布的文章，一次抓取 9 篇，并动态指示要请求哪个页面。

我还有一个简单的“上一个/下一个”分页系统，用于循环浏览文章组。

axios.get(`https://dev.to/api/articles?username=gedalyakrycer&per_page=9&page=${currentPage}`)
  .then(res => {
    setArticles(res.data);
  })
  .catch(error => {
      console.log(error);
  })

上述 API 调用位于 中，useEffect它还会检查当前页面是否还有更多内容1。如果是，则表示有内容可以返回。这将激活“上一页”分页按钮。

if (currentPage > 1) {
  setNewContentAvailable(true);
} else {
  setNewContentAvailable(false);
}

我正在单独useEffect检查存储 API 数据的状态是否为空。

如果是，那么我会禁用“下一步”按钮并向用户显示一条消息。

useEffect(() => {
  if (articles.length === 0) {
    setOldContentAvailable(false);
  } else {
    setOldContentAvailable(true);
  }
}, [articles])

如果您想查看所有代码的协同工作，请查看我的 github。

返回顶部

4.优化文件结构

我网站的最后一个版本只有两个页面：主页和关于。

在代码方面，我大部分内容都已“组织”在一个巨大的组件文件夹中。

随着网站的发展，这不是一个可持续的解决方案。

因此在最新一轮中，我将所有内容重组为三个主要文件夹。

• /pages文件夹包含最高级别的组件，用于将给定页面的所有内容组合在一起。我使用这些组件来指向我的 ReactRouter。

• /components文件夹现在按特定于每个页面的子文件夹进行组织。

  • 此外，每个站点部分都有一个主要的“容器”组件，用于处理逻辑和大部分状态。它们依次将 props 传递给展示组件。
  • 还有一个/ui子文件夹，用于保存可能出现在多个页面上的任何组件。（例如徽标）。

• /utils文件夹包含所有辅助函数、json 和上下文文件

这种文件夹结构使得查找项目和组织逻辑变得更加容易。

在此处查看完整的文件夹结构。

返回顶部

5. 重建导航

借助新的多页网站结构，我借此机会从头开始重建导航。

我真的很想不使用 React-bootstrap，并且享受从头开始构建的过程。（下次更新时，我希望彻底移除我的网站中的 React-bootstrap。）

在移动设备上，我还将社交媒体图标从垂直布局改为水平布局。我觉得这样更加方便用户使用。

返回顶部

6.简化动画

在我网站的早期版本中，几乎所有元素的动画都是用 GSAP3 制作的。虽然看起来很酷，但说实话，效果难以预测，而且并不总是有效。

最好的情况是动画没有触发，最坏的情况是某个部分会消失。这与其说是 GSAP3 库的问题，不如说是我对它的理解和实现存在缺陷。

我决定把网站精简到只保留那些可以持续工作的动画。我宁愿用那些100%都能完成工作的东西，而不是那些只有50%时间才能发挥出色效果的东西。

随着我的成长和学习，我会慢慢地以正确的方式添加这些额外的元素。:)

返回顶部

概括

感谢您阅读我的作品集网站之旅和最新更新。我对最终的成果非常满意，同时也期待着做出更多改进。😂

一些未来的补充...

1. 打造一个 Gatsby 网站

2. 将所有设计项目从 Adob​​e Portfolio 移到我自己的网站上

3. 掌握动画

4. 在自己的网站上打开文章，但不链接到 dev.to

5. 用我自己的代码重新做联系表单（这是我严格按照教程做的几个部分之一。）

请务必在下面分享你的作品集。我很想看看！

返回顶部

使用Figma设计的缩略图。