(This was originally published in my blog at https://vascoabelha.com/blog/simplify-dev-portfolio/)

(最初发布在我的博客中， 网址为https://vascoabelha.com/blog/simplify-dev-portfolio/ )

嘿大家！ 👋 (Hey everyone! 👋)

This is my first post ever and I know that this is just another drop in the ocean of guides in “how to build your own webpage/portfolio”. Nevertheless, I hope that I can shed a different light and approach in the planning of your portfolio. This is also for me a first step in giving back to the dev community, the help and guidance I have received so far.

这是我的第一篇文章，我知道这只是“如何构建自己的网页/作品集”指南中的又一滴。 不过，我希望我可以在规划您的投资组合时有所不同。 对我来说，这也是回馈开发人员社区的第一步，到目前为止，我已经获得了帮助和指导。

语境 (Context)

Over the last month, I have built my personal website and tried to keep it simple but aesthetically pleasing.

在过去的一个月中，我建立了我的个人网站，并试图使其保持简单但美观。

During the development, I documented every decisions and steps I made in order to help me solidify some concepts. Since there are already many and good guides in how to build portfolios, I will abstain from delving in coding breakdown/guides and will focus on a more generic perspective. Besides I don’t think it would be valuable for the reader to be imposed with a design and code that he is not comfortable with. Our personal/portfolios websites should be a representation of ourselves, preferences and likes.

在开发过程中，我记录了我所做的每个决定和步骤，以帮助巩固一些概念。 由于已经有很多关于如何建立投资组合的良好指南，因此我将不再研究编码故障/指南，而将重点放在更通用的角度。 此外，我认为读者不熟悉自己的设计和代码对他们来说没有什么价值。 我们的个人/投资组合网站应代表自己，喜好和喜好。

In this post, I will describe what I used for building my webpage (JAMStack) and reasons for choosing this architecture. There will also be a short section regarding the design of your website and some tips to help you stand out!

在本文中，我将描述构建网页(JAMStack)所用的内容以及选择此体系结构的原因。 还将有一个简短的部分介绍您的网站设计，并提供一些技巧来帮助您脱颖而出！

So why JAMStack?

那么为什么要使用JAMStack？

My decision with going with JAMStack can be quickly summarized in wanting:

我对使用JAMStack的决定可以快速总结为：

A Fast, Cheaper, Secured and Simpler way of developing and maintaining a website.

开发和维护网站的快速，便宜，安全和简单的方法。

JAMStack is a term used to describe a new architecture for building websites and applications where

JAMStack是一个术语，用于描述用于构建网站和应用程序的新架构，其中

JAM → J = JavaScript | A = API | M = Markup

JAM→J = JavaScript | A = API | M =标记

JavaScript (JavaScript)

JavaScript role is building dynamic content on your website, fetching data, etc. This does not mean that everything in a JAMStack is built with Javascript. In fact, you have different SSG (Static Site Generators) built on different languages. Eg: Hugo in Golang, Jekyll in Ruby, Pelican in Python, etc.

JavaScript角色是在您的网站上构建动态内容，获取数据等。这并不意味着JAMStack中的所有内容都是使用Javascript构建的。 实际上，您具有基于不同语言构建的不同SSG(静态站点生成器)。 例如：Golang中的Hugo，Ruby中的Jekyll，Python中的Pelican等。

For a list of available SSG you can go to:

有关可用的SSG的列表，您可以转到：

API (API)

Where usually we have Server-side functions to access/consume/query data, in JAMStack these API/services are accessed and consumed as you want. JAMStack is agnostic to API. We can easily use 3rd party services as well as building our own specific APIs.

通常我们在服务器端具有访问/使用/查询数据的功能，而在JAMStack中，可以根据需要访问和使用这些API /服务。 JAMStack与API无关。 我们可以轻松使用第三方服务以及构建我们自己的特定API。

标记 (Markup)

This is where the fun is! Everything that you see in your site is served through HTML Static Files created during the building phase. These files have already the structure and information needed to be presented when accessing the page.

这就是乐趣所在！ 您在网站中看到的所有内容均通过在构建阶段创建HTML静态文件提供。 这些文件已经具有访问页面时需要呈现的结构和信息。

Unlike dynamic website based on templates, you don’t need to wait for the server to query the api/database to present and render the webpage, since the website and its respective pages were prebuilt at the time of the build. The frontend is decoupled from the backend and thus the website can “live on its own” — serverless.

与基于模板的动态网站不同，您无需等待服务器查询api /数据库来呈现和呈现网页，因为该网站及其各个页面是在构建时预先构建的。 前端与后端脱钩，因此网站可以“独立运行” —无服务器。

In the end, we have:

最后，我们有：

• A more secure website since it does not need to interact with a backend;• Faster and more responsive website since everything is built on static html files, we don’t need to query or wait for anyone to render the page;•Scalable due to the CDN (Content Delivery Network) for the website and the strict separation/modularity, between frontend/website and backend;• Cheaper because you have companies that can even host your static files for free!

•更加安全的网站，因为它不需要与后端交互；•速度更快，响应速度更快的网站，因为所有内容都基于静态html文件构建，因此我们无需查询或等待任何人来呈现页面；•可伸缩到网站的CDN(内容交付网络)，以及前端/网站和后端之间严格的分隔/模块化；•便宜，因为您拥有可以免费托管静态文件的公司！

With this in mind, and after checking the available static site generators, I ended up choosing the GatsbyJS due to:

考虑到这一点，在检查了可用的静态站点生成器之后，由于以下原因，我最终选择了GatsbyJS ：

• better SEO features;• documentation — this was a decisive factor. Gatsby.JS documentation is clear and more than sufficient to guide you in every step of the way, from preparing, developing, to building and deploying a website;• larger dev community, in which can be seen as: “I will most likely fail somewhere, but at least I have a higher chance of finding someone that had the same problem” 😂.

•更好的SEO功能；•文档-这是决定性因素。 Gatsby.JS文档非常清晰，足以指导您从准备，开发，构建和部署网站的各个步骤；•更大的开发者社区，在其中可以被视为：“我很可能会失败某个地方，但至少我更有机会找到遇到相同问题的人。”

Setting aside the technological decisions, we can now focus on a more subjective and personal based decision — the design.

撇开技术决策，我们现在可以专注于更主观和基于个人的决策-设计。

设计 (Design)

在模板之间进行选择或自行设计。 (Choosing between templates or designing yourself.)

Like many of you, I am not a designer or specialised in any kind of UI/UX. Everything that I know is from self-learning and probably not much 😬. However, we can’t be hostage of our own shortcomings, so what can we do to fill the gaps?

像你们中的许多人一样，我不是任何UI / UX的设计师或专家。 我所知道的一切都来自于自学，也许不多。 但是，我们不能束缚自己的缺点，那么我们该怎么做才能填补空白呢？

Well we can either use an already built template/theme available 😞 or we can do some research on what does a good design entails and view some examples as inspiration 🤩.

好吧，我们可以使用已经构建的模板/主题(😞)，也可以对优秀设计的内容进行一些研究，并将一些示例视为灵感🤩。

Here is a list of some good websites/resources that I tend to use when I am in need of inspiration:

以下是一些我需要灵感时倾向于使用的优秀网站/资源的列表：

• https://dribbble.com/

• https://dribbble.com/

•https://webframe.xyz/

• https://webframe.xyz/

•https://land-book.com/

• https://land-book.com/

• https://www.behance.net/

• https://www.behance.net/

• https://www.designnotes.co/

• https://www.designnotes.co/

• https://edu.gcfglobal.org/en/beginning-graphic-design/ (I believe this is a good tutorial to help you grasp some of the basic concepts of graphic design)

• https://edu.gcfglobal.org/en/beginning-graphic-design/ (我相信这是一个很好的教程，可以帮助您掌握一些图形设计的基本概念)

Now if you ask me if I would use a theme/template or build one from scratch, I would undoubtedly choose the latter, due to the fact that I believe in the importance of showing ourselves, our uniqueness through what we design and build. Even though a prebuilt template would most likely save me time, I tend to see everything that I do as an opportunity to invest in myself and learn new things and comparing both options I probably wouldn’t learn a lot with using a template.

现在，如果您问我是要使用主题/模板还是从头开始构建主题/模板，则毫无疑问，我会选择后者，因为我相信通过设计和构建展现自己，独特性的重要性。 即使预先构建的模板最有可能节省我时间，但我还是倾向于将自己所做的一切视为投资自己和学习新事物以及比较这两种选择的机会，我可能不会从使用模板中学到很多东西。

在设计和开发过程中要考虑的事项。 (Things to take in consideration during the design and development.)

Before coding, I would advise you to create some Mockups of your website. This will not only force you to organise your ideas on what and how do you want to show, but also help delineate a plan, a series of steps needed to effectively assist and guide you during the coding sessions. For this you can use tools like Figma, Adobe XD, Sketch, etc.

在编码之前，我建议您创建网站的一些模型。 这不仅会迫使您根据要展示的内容和方式来组织想法，而且还有助于描述计划，这是在编码会议期间有效协助和指导您的一系列步骤。 为此，您可以使用Figma，Adobe XD，Sketch等工具。

Here are some tips to help you start designing your portfolio/personal websites:

以下是一些技巧，可帮助您开始设计自己的投资组合/个人网站：

• Fonts play an important role. It sets the tone of your design. If you are stuck in choosing a pair of fonts with good contrast for your website, you could use a tool like [https://fonts.google.com/](https://fonts.google.com/) or [https://fontjoy.com/](https://fontjoy.com/) to help you decide.

  字体起着重要作用。 它设定了您的设计基调。 如果您在为网站选择对比度高的一对字体时遇到麻烦，可以使用[ https://fonts.google.com/](https://fonts.google.com/)或[ https ：//fontjoy.com/](https://fontjoy.com/)来帮助您做出决定。

• In terms of colours, you will probably be fine with 2–3 colours that work well together. If you are interested in learning more, you can search for colour theory. There are also websites that help you building pallets of colours like : [http://colormind.io/](http://colormind.io/)

  在颜色方面，使用2到3种可以很好地搭配使用的颜色可能会很好。 如果您有兴趣了解更多信息，可以搜索色彩理论。 也有一些网站可以帮助您构建各种颜色的托盘，例如：[ http://colormind.io/] ( http://colormind.io/)

• On top of linking your social media, a Contact Form is also an important tool to build bridges between you and your visitors. Nowadays, depending on the stack that you are using, it is super simple to build and deploy a reasonable Contact Form — E.g. Netlify Forms and Formspree.
  除了链接您的社交媒体之外，联系表单也是在您和访问者之间架起桥梁的重要工具。 如今，根据所使用的堆栈，构建和部署合理的联系表(例如Netlify Forms和Formspree)非常简单。
• In addition to publishing your work in the website, you should also have a hyperlink to a detailed CV. This may speed and ease the process of recruiters or agencies that are searching for candidates, and if they end up in your website, then you are probably a suitable candidate for what they are searching 🤔
  除了在网站上发布您的作品外，您还应该具有指向详细简历的超链接。 这可以加快并简化招聘人员或代理机构在寻找候选人的过程，如果他们最终出现在您的网站中，那么您可能是他们所搜索的对象的合适候选人🤔
• This isn’t related to design, but if you have the possibility, you should buy a domain. Having a custom domain name will improve your credibility and professionalism in the eyes of the visitors.
  这与设计无关，但是如果有可能，您应该购买域名。 在访客看来，拥有自定义域名将提高您的信誉和专业水平。

结论 (Conclusion)

For this post, I have covered everything that I wanted:

对于这篇文章，我涵盖了我想要的一切：

• JAMStack;
  JAMStack;
• Decisions that made me choose a JAMStack Architecture and GatsbyJS;
  决定让我选择JAMStack体系结构和GatsbyJS；
• Resources to help you start designing your website;
  帮助您开始设计网站的资源；
• What approach to have when building your portfolio in order to stand out, save time and reduce indecisiveness → No Templates, Mockups First and Code later;
  建立投资组合以脱颖而出，节省时间并减少犹豫不决的方法是什么？→没有模板，首先没有模型，没有代码。
• General tips to take in consideration while designing and building your portfolio.
  在设计和构建投资组合时要考虑的一般提示。

If you wanna chat or discussing anything feel free to reach me at https://twitter.com/VaapVa

如果您想聊天或讨论任何内容，请随时通过https://twitter.com/VaapVa与我联系。

Take care 👋 !

保重👋！