Originally this was published on my blog. You can find the publication here! If you wanna discuss anything about this feel free to reach me on my Twitter

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!

So why JAMStack?

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

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

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

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.

For a list of available SSG you can go to:

• https://www.staticgen.com/

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.

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.

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.

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!

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

• 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" 😂.

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?

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://webframe.xyz/

• https://land-book.com/

• https://www.behance.net/

• 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)

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.

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/ or https://fontjoy.com/ to help you decide.
• 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/
• 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.
• 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;
• Decisions that made me choose a JAMStack Architecture and 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 there is interest, I can follow-up this post, with one more focused on a review of the existing CSS Frameworks and what I ended up choosing, as well as SEO explanation and guide to help boost the visibility of your webpage.

If you wanna chat or discussing anything feel free to reach me at Twitter !

Take care 👋 !