后端开发教程 - Java、Spring Boot 实战 - msg200.com
我的个人网站——五年内从零到英雄
个人网站非常实用，提供完全的创作自由，也是展示作品和测试现有技能的绝佳方式。这里没有客户，也无需向任何人汇报，只需自己负责。内容、方向、技术栈、设计、用户体验、浏览器支持……代码库由你掌控！
为什么人们要投入如此多的时间来打造极富创意、充满爱与激情的个人网站，并让它们在互联网（通常）公式化的平淡中脱颖而出？
“拥有自己的网站表明，除了打卡上下班和领取薪水之外，我更关心自己的工作。这体现了我对自己所创造的东西感到自豪。如果我的品味、我的工作或整个行业发生了变化，我有能力在我的作品集中体现出来。”
在本文中，我想带您回顾我的个人网站（codeadrian.github.io）的 5 年历史，以及它在 4 次重大重新设计过程中的演变，并向您展示我在工作过程中学到的东西。
版本 1 - 卑微的开始 (2015. - 2017.)
2015年，也就是大学最后一年，我创建了自己的第一个个人网站。我觉得这会是一个有趣的项目，而且能帮助我展示我的技能和作品集。
我首先注意到的是，我在每个部分都提供了大量的信息和细节：技能、信息、作品集……我希望我最初的网站看起来像一份在线简历。但今天看来，信息太多了，网站读起来更像是一本自传，而不是简历。你真的需要花些时间和耐心才能找到你需要的信息。
这些信息没有任何摘要或层次结构。如果不翻阅整页信息，你根本无法了解我的工作或技能。
但我真正喜欢的是我想要的风格——鲜艳的色彩、8 位字体的标题组合、对比鲜明的蓝灰容器，以及基本的 jQuery 动画。我承认，即使在这种简陋的状态下，它也确实有其魅力，在当时确实发挥了作用。
我觉得有点好笑的是我展示技能的方式。即使在五年前，我也不喜欢用现在流行的那种量化或评分方式（比如星星、百分比、彩色圆圈、进度条等等）来衡量自己的技能。虽然我已经量化了，但为了避免混淆，我仍然希望在前面加上文字。
技术栈
- 静态 HTML
- 引导 CSS
- 响应式设计
- jQuery
当时，知道如何制作响应式网站是一大优势。但它缺少图片优化、代码压缩、延迟加载以及其他一些我当时没有意识到的关键优化。
它展示了什么？
表面上看没什么特别的。我大概知道一些网页开发基础知识，以及一些美学和设计方面的技能。但这也表明，即使我没有任何行业经验，我也充满学习热情，并且不畏惧挑战。对于计划投资初级开发人员的雇主来说，这是非常宝贵的信息。
所以，基本上，我的网站的第一个版本是为我的潜在雇主设计的，它的内容是：
这是我在空闲时间做的，没有任何经验和基础知识。想象一下，如果我能得到我的指导和指导，我能为贵公司带来多大的成就。
版本 2 - 掌握它（2017 年 - 2018 年）
在我的第一个个人网站帮助我找到一份前端工作并在我获得了一些从事各种项目的经验之后，我觉得我需要重新设计和改造我的个人网站。
自从我完成了一些专业的项目后，我立刻就想简化网站的内容。这样我就可以让我的作品来证明我的技能。我还想打造一个更清晰、更专业的设计，运用各种字体，并运用最新的技术来创作。虽然在字体选择以及一些设计和实现方面我还有一些不足，但我感觉自己离最终的成果越来越近了。
我选择了一个单页网站。首次加载时，你会看到一个英雄元素，上面有我的头像和一些基本信息。这是一个高层次的概述，即使不太熟悉开发的人也能理解。
我甚至连技能的展示方式都变了。当时，它被我主要技能的图标取代了。我把它弄得有点混乱，因为用户需要熟悉图标才能理解发生了什么。我觉得即使是熟悉图标的人，这看起来也让人困惑。我记得我对这个部分不太满意，但当时我还没有足够的技能来以更有意义的方式格式化和分组这类内容。
但我喜欢的是我展示作品的方式。笔记本电脑屏幕上显示着时尚的卡片和网站。鼠标悬停在卡片上时，会显示基本描述，并附带指向项目网站的链接。我对这个部分感到非常自豪。
另外，我专注于移除原生 JS 而不是 jQuery，因为我注意到我当时所在的公司在处理一些简单的情况（比如选择元素和切换类名）时，非常依赖这种庞大的 jQuery 脚本。我希望避免使用不必要的库脚本，并减少页面加载时间。
最终，我只好用一个库脚本了。我最终使用了 modernizr，因为我想使用 Flexbox，并且仍然希望支持旧版浏览器（IE8 及以上）。当时，由于 Windows XP 仍在广泛使用，我们仍然需要支持这些浏览器。
技术栈
- 静态 HTML
- SASS / CSS
- 最小化静态资产（HTML、CSS、JS、图像）
- 香草 JS
- Modernizr.js
它展示了什么？
这对我的职业生涯来说是一大步：我学习了 SASS 和高级 JS 等新技能，并参与了一些很棒的项目。这个网站在技术和美学上都真正体现了这一进步。与之前的网站不同，它除了作为我所有项目、技能和社交媒体链接的中心之外，没有任何更高的用途。
我在这里建立的一些元素（英雄部分、作品集部分）将会在网站的未来迭代中保留下来，并且会随着时间的推移而改进。
版本 3 - 即将完成（2018 年 - 2019 年）
这段时间我的前端技能飞速提升。我利用业余时间学习用户体验，参与一些设计方案颇具挑战性的项目，提升了我的前端和设计技能。而且，我又一次觉得是时候重新设计我的网站了。当时我也在考虑换工作，所以想创建一个既能作为我的在线简历，又能作为作品集的网站。
首先，我设计了一个更好的配色方案。我希望它看起来既专业，又能拥有鲜艳的主色和强调色。
我对英雄部分感觉很好所以我决定保留它，但稍微简化一下。
在之前的迭代中，我对页面的技能部分不太满意。我只展示了我所使用的技术的徽标，其他内容则寥寥无几。在这次迭代中，我特别关注了它，并将之前的所有尝试以更合理的方式整合在一起。我们用图标来吸引注意力，用标题来体现层级结构，并配以简短的描述。它不仅提供了良好的概览，还为感兴趣的用户提供了详细信息。
我还改进了我的作品集部分。卡片看起来很棒，但它们占用了太多空间，可能会让人不知所措（尤其是在移动设备上）。所以我决定尝试一下滑块，看看能有什么效果。结果非常棒，我创建了一个漂亮的滑动和缩放动画，让作品集看起来更令人印象深刻。
这表明，当您跳出固有思维模式时，您可以利用滑块发挥出多大的创造力。
技术栈
- 静态 HTML
- 萨斯
- 光滑的滑块
- 平滑滚动/平滑滚轮
- 图片延迟加载
- 静态资产最小化（HTML、CSS、JS、图像）
- Gulp 任务运行器
- jQuery
- 光滑的滑块
它展示了什么？
在这次迭代中，我想我终于找到了网站在简历和项目及链接中心之间的平衡点。它看起来很棒，用户体验良好，性能也很棒，当时我觉得它已经足够好了，我不需要再对它做任何重大改动。
版本 4 - 瑞士刀（2019 年至今）
2019 年，我深深地迷上了 PWA 的概念。我喜欢这种可以缓存页面和资源以供离线使用，并在网站上获得类似原生应用的体验的可能性。自然而然地，我转向了我的网站，并希望它能够离线运行。然后，我涌现出更多的想法：
- 我也想写文章并发布在我的网站上
- 我想扩展我的个人项目
- 我可以修改 CSS，包括垂直节奏、改进排版和附加约束
- 我还想要一个联系表格
然后，我发现了 Jekyll，一个强大的静态网站生成器，它能帮我实现网站的一切需求。于是，我开始用 Jekyll 和一个通用模板，从零开始重新创建我的网站。
我通过使用垂直节奏保持一致的垂直和水平间距，使整个网站更具视觉吸引力。我还添加了排版比例和一个功能强大且可自定义的 PostCSS 变量模板，至今仍在我的项目中使用。
Jekyll 让创建具有相同通用结构的页面变得非常容易。正因如此，我才乐于在我的项目中进行更多扩展。我只需编写内容，Jekyll 就会使用我创建的模板生成 HTML。我对模板所做的任何更改都会立即应用于所有使用该模板的页面。
去年，我决定写更多文章，之所以选择 DEV，是因为我非常喜欢它的理念、内容质量以及社区的热情。DEV 还提供了一个很棒的 API，可以让我提取文章和其他内容，所以我利用了这个 API，并将其连接到我的网站。博客链接指向 DEV 上的文章。
我还希望所有页面都包含一个主打元素，但我希望整个网站的图片风格保持一致，所以我选择了这种手绘水墨风格。我非常喜欢它们与网站其他部分和内容的契合度。
技术栈
- Jekyll - 静态网站生成器
- PostCSS - postcss-preset-env、CSSnano 等。
- Cloudinary CDN - 优化的 WEBP、JPG、PNG 图像
- PWA - Web 应用清单和服务工作者
- 开发 API
- Formspree.io - 无服务器联系表单
- 静态内容最小化（HTML、CSS、JS）
- 香草 JS
- 图像和视频延迟加载
- Glide.js滑块
它展示了什么？
它展示了我的工作、文章、技能以及以上所有内容的概览。我想我终于在概览和每个部分（作品集、技能、文章等）的详细视图之间找到了平衡。多亏了 Service Worker，它运行速度非常快，并且具备一些基本的离线功能。作为应用安装后，它性能良好，并拥有类似应用的良好用户体验。
就像上次一样，我现在不想再做任何改动，也不知道还能做什么改进。但随着新技术的涌现，新的设计趋势的出现，以及我获得更多的想法和知识，我一定会改进我的网站。正如我在引言中所说：
如果我的品味、我的工作或行业发生了变化，我有能力在我的投资组合中反映出来。
结论
感谢您与我一起踏上这段旅程。希望本文对您有所帮助，并能为您的项目带来一些灵感，或者帮助您改进工作流程。
促使我写这篇文章的原因是，有几个人通过我的新联系表单联系我，问我网站是如何跑得这么快的。虽然我回复邮件只花了几分钟，但我花了好几年才达到今天的水平（而且技术也发展到了这个程度）。
我想说的是——在打造个人网站（或任何项目）时，不要因为技术或知识不足而灰心丧气。始终运用你所了解和拥有的知识，并力争更高水平。你的网站不必是一件艺术品，不必是革命性或独一无二的作品。它只需反映你、你的技能和在某个时刻的成就，这就足够了。
相关文章
以下是我撰写的一些与本文提到的技术和最佳实践相关的文章。如果您有兴趣了解有关特定主题的更多信息，请随时阅读。
这些文章都是咖啡带来的灵感。所以，如果你喜欢我的文章，觉得它有用，不妨请我喝杯咖啡！我会非常感激的。
感谢您花时间阅读这篇文章。如果您觉得它有用，请点赞 ❤️ 或 🦄，分享并评论。
文章来源：https://dev.to/adrianbdesigns/my-personal-website-from-zero-to-hero-in-5-years-12bl