🧑‍💻 我如何在一个月内开发我的投资组合🗓 + 演示🍿

完整投资组合演示

介绍

设计

技术

主页

主页 CodePen 演示：

我的天啊

投资组合页面

最后的润色

响应式

总结结果

结束

完整投资组合演示

完整投资组合演示

介绍

今天我想和大家分享我打造个人作品集的经验。我知道很多人看到标题后立刻就感到疑惑。And why spend so much time developing a portfolio at all? After all, you just need to create a small one-page website and add all the information about yourself and your works there.在这里，我完全同意大家的观点：如果你正在开发一个名片网站，那么这是一个非常有效的选择。你甚至不需要花几天时间去开发这样的网站，4-6个小时就能搞定。

But I set myself a different task我想创建一个作品集，从外观上展现我是哪种类型的开发者以及我的能力。我希望使用动画，用 HTML 和 CSS 构建复杂的对象，在页面之间实现流畅的过渡，并为网站选择明亮的色彩。但与此同时，我当然不想做一个九十年代风格的网站，那样的网站通常会让用户感到不适。

我希望我的作品集就像我像艺术家一样画的一幅画。

我不想在我的网站上充斥着枯燥乏味的文字内容。说实话，没人关心你早上喜欢吃什么，晚上喜欢吃什么，也没人关心你最喜欢什么电视节目和电影，你玩什么游戏，以及你如何消磨时间。The employer is not even interested in whether you watch anime? 这都是默认的。

所以我决定专注于网站的外观。因此，我们首先要和大家讨论的是设计。

设计

1. 颜色

第一步是讨论我决定在项目中使用的颜色。
这是：
Vinous：#9b2d30

和米色：#f7e0b5

我一直梦想着将这些颜色一起使用，但不幸的是我无法在工作中做到这一点，所以最后我决定在我的个人作品集中使用它们。

我觉得这些颜色很适合harmony with each other。以后我们还会用到更多颜色，不过以后的章节里会更详细地讲解。

2. 页面

至于页面，我决定只做两个。这两个页面home page会用来放置我的照片、我的简介以及我的社交网络链接，以便人们联系我。第二个页面，我决定整理我的works，可以通过special presentation（稍后会详细介绍）查看。

3. 风格

我决定以极简主义风格设计网站的外观。我不想在网站上出现大量不必要的照片之类的内容。我希望网站看起来简洁明了。因此，我决定将其用作Flat design作品集元素的设计。

4.动画

至于动画，这里的方法与元素样式相同。动画应该看起来合适，并与所有周围的元素相结合。网站上的动画和静态元素应该look like a single whole……

完美！ 👌

技术

在我们继续之前，我应该告诉您我用于开发的工具。

1. HTML

为了创建DOM结构，我决定使用PUG预处理器。由于能够使用loops和 ，它显著帮助我减少了代码量mixins。

2. CSS

为了给元素创建样式，我更喜欢使用带语法SASS的预处理器SCSS。这样做的原因与PUG预处理器相同。

3. JavaScript

为了创建动画，我需要使用三个JS libraries：

1. TweenMax.js
2. Anime.js
3. Revealer.js

主页

最后，我们可以直接开始分析投资组合本身的页面。

当我开始处理 DOM 结构，并处理到应该包含照片的部分时，我思考了一会儿，问了自己这个问题。Why would I just insert my photo?我觉得这对我来说太简单了。Is it really impossible to use this place more effectively, instead of just occupying this place with a photo?

此外，我不喜欢被拍照。

在这里我想回到我最近的引言。

我希望我的作品集就像我像艺术家一样画的一幅画。

我认为我可以运用自己对 HTML 和 CSS 的了解来简单地draw myself。

我开始了一份艰难的工作。🥷

1. 第一步

一开始并不容易，但最重要的是在网上找到一个能给你灵感的头像布局，这样你就能自己设计头像了CSS portrait。（CSS 肖像——听起来很奇怪）

事情是这样的：

CodePen：

我花了大约6-7个小时来制作它。这还考虑到我花了很多时间在网上寻找合适的头像范例。

2. 第二步

总的来说，我对结果感到满意，但是正如您所见，头像本身的small尺寸是这样的，并且头像要替换的图像的large尺寸也是这样的。

而且头像和背景颜色融合了。😂

special environment因此，我决定在头像周围创建一个，以填充原本应该在empty space的位置。photo

后来我决定将这个环境制作成动画，让画面看起来更加生动。

事情是这样的：

CodePen:（参见格式0.5x）

我已经在我的第一篇文章中发布了这个作品。

CodePen - CSS 插图（动画）

罗登・21年5月19日

#codepen #css #html #webdev

3. 第三步

接下来，我需要创建一段简短的自我介绍（我是谁，我住在哪里）。在这里我决定使用straight font，因为它与整体风格非常契合。

类似这样的：

结果已经很好了，令人高兴。

4. 第四步

接下来，我需要实现导航，以便在网站页面之间切换。我决定将其设计得简约而不固定，这样它在滚动时就不会跟随窗口移动。但这并非必要。

但请不要忘记adaptability，因为在 上看起来不错的东西desktop在 上看起来不一定好看phone。

因此，我决定让页面的文本链接在小于的屏幕上消失，900px并burger menu出现。

当您点击时burger menu button，会出现一个，Popup menu其中有指向页面和社交网络的必要链接。

我有一篇关于这个汉堡菜单的单独文章。

汉堡弹出菜单 (anime.js) 🍔

罗登・21年5月23日

#codepen #webdev #css #html

CodePen：

5. 第五步

我决定将我的社交网络和电子邮件链接附加到屏幕的下边缘。我还添加了position: fixed;这些链接，以便它们在滚动时跟随屏幕移动。

6. 第六步

我决定在主页上做的最后一件事是描述我的个人品质。

为了做到这一点，我决定使用图标。这很合乎逻辑。描述你的个人特质，并用图标将其形象化。

但后来我也开始怀疑这一点。我告诉自己。所以，停下来，停下来，停下来，等等？你不能自己画这样的图标吗？是的，这不容易，但还是可以的，对吧？你难道不厌倦那些在无数个网站上都能找到的静态图片吗？

再想了想之后，我还是决定开始谈正事。

我又开始画画了，但这次是图标。🥷

这就是我得到的。哦，我忘了说我还想给它们做动画。我喜欢做这个。

我还写了一篇关于他们的单独文章。

CodePen - CSS 图标（动画）

罗登・21年5月21日

#codepen #webdev #css #html

CodePen：

剩下的就是添加文本了。主页就完成了。

结果：

7. 第七步

好了，主页创建工作结束了。我花了不到三周的时间才完成。是的，是的，别惊讶，因为要完成第一次描述的所有内容并不容易。在我们开始第二页之前，我建议你先看看结果。

主页 CodePen 演示：

我的天啊

投资组合页面

有了作品集页面，一切都变得简单了，不再需要为页面设计样式。但还有一个问题。你知道，在展示我的作品时，我计划每件作品都单独创建一个页面。但我很快意识到我不想制作一个large number of identical html files。几年后，当作品数量显著增加时，会发生什么？

我决定在页面上创建一个部分来展示我的作品，其中包含我展出的项目。

演示文稿的这一部分应该按照以下原则工作：
1.您点击任何项目的特殊卡片；
2.演示文稿按照的原则打开Popup menu，只有在演示文稿的情况下，它才会在打开right，而不是在打开top；
3.演示文稿本身的内容根据您通过点击卡片选择的项目填写，并且有关项目的所有数据都存储在数组中

工作原理如下：

要close the presentation，请点击round button左上角的 。

关闭按钮

我已经为这次演示创建了一篇单独的文章。

🔥适用于您项目的超棒开发者作品集页面📱（响应式）

罗登 ・ 21 年 6 月 6 日

#codepen #webdev #css #javascript

迷你 CodePen 演示：

最后的润色

好了，作品集完成了。只剩下一些小细节需要添加。也就是preloader。你看，怎么回事？huge number of elements网站上有一些 ，需要一个little time to load，为了不让用户看到元素的加载，small preloader需要一个 。

并且还添加了元素浮现的小动画，为网站增添光彩elegance。

最初，我使用 SVG 制作了一个预加载器，上面出现了“欢迎”一词，但我很快意识到这可能看起来不错，但它肯定不能作为我的网站的预加载器。10Because it's a very long time. 秒！！！

因此，我决定放弃动画这个词，并将预加载器动画减少为one second开启both pages。

嗯，就是这样。

响应式

主页：

作品集页面：

该网站适用于以下屏幕分辨率：
@media 1728px
@media 1600px
@media 1440px
@media 1300px
@media 1180px
@media 1080px
@media 960px
@media 890px
@media 830px
@media 720px
@media 642px
@media 576px
@media 414px
@media 375px
@media 320px
@media iPad (min-width: 415px) and (max-width: 1025px) (portrait)
@media iPad (min-width: 415px) and (max-width: 910px) (portrait)
@media iPad (min-width: 415px) and (max-width: 834px) (portrait)
@media iPad (min-width: 415px) and (max-width: 768px) (portrait)
@media iPad (min-width: 415px) and (max-width: 685px) (portrait)
@media iPad (min-width: 415px) and (max-width: 595px) (portrait)
@media iPad (min-width: 415px) and (max-width: 490px) (portrait)
@media (min-width: 1601px) and (max-width: 5000px) and (max-height: 940px)
@media (min-width: 1441px) and (max-width: 1600px) and (max-height: 700px)
@media (min-width: 1301px) and (max-width: 1440px) and (max-height: 670px)
@media (min-width: 1181px) and (max-width: 1300px) and (max-height: 615px)
@media (min-width: 1081px) and (max-width: 1180px) and (max-height: 540px)
@media (min-width: 961px) and (max-width: 1080px) and (max-height: 515px)
@media (min-width: 891px) and (max-width: 960px) and (max-height: 470px)
@media (min-width: 720px) and (max-width: 890px) and (max-height: 425px)
@media (min-width: 376px) and (max-width: 414px) and (max-height: 730px)
@media (min-width: 321px) and (max-width: 375px) and (max-height: 660px)
@media (max-width: 320px) and (max-height: 560px)

不幸的是，数量太多了@media queries，这是因为我用了vh高度值，而这些是viewports高度值。因此，有时需要修剪一些元素，但不要太担心。

总结结果

朋友们，现在是时候盘点一下，计算一下我创建每个元素花了多少时间，以及为什么最终花了大约一个月的时间。

1. 设计：我花了大约3-4 days的时间来Behance思考Dribbble我希望如何展示我的作品集
。2. CSS 插图：我花了大约 的时间week来创建 CSS 插图，好吧，可能更多一点
。3. 导航：我花了 的时间来2 days创建导航
。4. 图标：我花了 的时间week and a half来创建动画图标，这并不容易
。5. 作品集演示：我花了 的时间来week创建作品集和项目演示文稿
。6. 预加载器：我还花了 的时间来2 days创建预加载器。

其结果大约为33 days。

在此期间，900 lines在 上编写了 代码PUG preprocessor，9000 lines在 上编写了 代码SCSS，565 lines在 上编写了 代码JS。

Comrades，别想了，我不是在吹牛。这里没什么好吹嘘的。我只是决定从代码量的角度来总结一下。

但请记住，数量并不意味着质量。

结束

朋友们，该说再见了。感谢你们关注我的帖子。我的天哪，我写了大概五个小时！！！感觉好像才过了不到两个小时。好吧，其实并不可怕。下面是承诺的完整作品集演示链接。

完整投资组合演示

您也可以从我的存储库下载它

我建议您订阅我的Twitter，我也在那里发布我的作品。

最后，我想说，朋友们，想怎么设计作品集就怎么设计吧。如果你想做一个名片网站，不加任何多余的元素、动画之类的，那就去做吧。或者反过来，你想做一个动画效果极佳的作品集，或者用 Three.js 做一个 3D 网站，那完全是你的权利。这里没有什么硬性规定必须遵守。最重要的是，你首先要喜欢它。你的雇主也应该喜欢你的简历。

您还可以查看我最近关于开发人员投资组合主题的文章。

10 个优秀开发者作品集示例👩‍💻🧑‍💻💼，助您灵感迸发🦄

罗登 ・ 21年6月18日

#webdev #tutorial #beginners #css

回头见。