重新设计我的投资组合网站

重新设计很有趣

编辑：2019年8月19日上午9:45，
我已将此分支与我的主分支合并。所有链接现在都指向我当前的网站ryanfurrer.dev 。

编辑：8/22/19 @7:10am
我发现 Netlify 有一个很酷的功能，它为所有推送到 Origin 的内容提供了一个唯一的 URL - 这意味着我仍然可以显示我的旧网站！

相关链接

如果您只想查看新旧网站，请点击以下链接：

• 旧投资组合网站
• 新的投资组合网站- 在我与主分支合并之前，使用临时 Netlify 域名

重新设计很有趣

在我的早期旅程中，我创建了我的第一个作品集网站，作为我的第一个“大型”HTML 和 CSS 项目。它非常基础，但在我看来，还不算最难看的网站。

由于我将在接下来的 1-1.5 个月（2019 年 9 月中下旬）内申请工作，因此我想重新创建用于存放我的项目的投资组合网站。

为什么要重新设计？

我想重新设计我的网站有几个原因：

• 过去几个月我学到了很多东西，想把它们都应用到一个项目中
• 我觉得当前的网站不值得花费精力去重构代码，我宁愿从头开始
• 我有一个问题，那就是长时间观察同一个设计。
• 虽然这有点像个笑话，但我经常说我有问题，因为我大约每周更改一次手机的主屏幕（Android）😂

设计过程

在选择网站的外观和风格时，我希望营造一种轻松（感觉上，而非颜色上）、干净、简洁、有意义的感觉。页面上的所有内容都必须有目的性。

我提到颜色是因为我的网站上会有暗模式切换#darkmodeeverything

我还知道我想在里面加入一个“卡片”的概念。这些卡片会包含网页的实际内容。

这些是我最初真正构思的。我先用 HTML 创建了内容，构建了页面的框架。对于内容尚未确定的部分，我只是添加了占位符文本。

接下来我创建了横幅广告。我希望它在页面加载时占据 100% 的屏幕，所以我将高度设置为<header>。100vh您可以在下方的移动设备和桌面设备上看到它。

移动优先

你可能听说过这种“移动优先”的现代网站建设方法。虽然我个人不喜欢设计移动网站，觉得它们很无聊，但我觉得从小到大更容易。

“卡片”设计在移动设备和桌面上都很重要，所以我创建了一个名为的类.content-container并将其应用于我想要“卡片”设计的页面上的每个部分 - 可重复使用的 CSS 是一件美丽的事情。

我也知道我不想在页面顶部使用标准的移动导航。汉堡菜单很棒，但它们无处不在，甚至在一些桌面网站上也是如此。您可以在下面看到，我的移动网站顶部的导航看起来与在大屏幕上的导航相同。

优化

这是我第一次真正使用 Google内置于开发者工具中的Lighthouse Audits 。这是一款非常棒且功能强大的工具，如果你还没用过，我强烈推荐你去体验一下。

审核将您的视野按 0 到 100 的等级分为四个不同的部分：性能、可访问性、最佳实践和 SEO。

性能是指您的网站运行的状况。它包括加载速度、图片优化程度、代码精简程度等等。

无障碍访问目前是一个非常热门的话题，这理所当然。对于那些视力受损的网页浏览者来说，他们需要一种导航方式，而很多人会使用一种叫做屏幕阅读器的东西。Lighthouse 确保您的网站对每个人都能访问，这也是我推荐使用它的主要原因之一。

最佳实践就是确保你使用尽可能最佳的编码实践。我发现最常被忽略的一点就是“避免在页面加载时请求通知权限”😒

如果您想让您的网站出现在搜索结果中， SEO至关重要。SEO 代表“搜索引擎优化”，虽然我不是这方面的专家，但 Google 是，也就是说 Lighthouse 是。

我认为 Lighthouse 最好的一点是，如果你不明白它告诉你要做的事情，审计的每个部分都有一个“了解更多”链接！

仍需做的事情

这些是我希望在将此分支与主分支合并之前完成的项目。完成后，它将替换我域名下的当前网站。

• 修复过度压缩的照片
• 确定字体大小
• 将 LinkedIn 链接添加到页脚
• 添加网站图标
• 清理代码
• 冗余/不必要的 CSS
• 确保 HTML 是语义的
• 调整边距和填充
• 增加边距/填充以留出更多呼吸空间
• 确保一切都在应有的位置相等
• 为网站添加深色主题
• 我将使用ezToggle
• 越过标题时添加浮动导航

结束语

我非常喜欢这个项目，迫不及待地想开始下一个项目。如果你一直等着看新网站，那就来这里吧！

我非常感谢您花时间阅读我的文章，如果您有任何问题、评论、建设性批评……任何事情，请在下面的评论中或在Twitter上与我们联系！

编辑：2019年8月19日上午9:45，
我已将此分支与我的主分支合并。所有链接现在都指向我当前的网站ryanfurrer.dev 。

编辑：8/22/19 @7:10am
我发现 Netlify 有一个很酷的功能，它为所有推送到 Origin 的内容提供了一个唯一的 URL - 这意味着我仍然可以显示我的旧网站！