Developer Portfolio: Learn how to create your own

Developer Portfolio: Learn how to create your own

·

5 min read

🛂 Versão Português Brasil

A developer portfolio is the place where developers show the best projects they had already executed (in the case of those who already have professional experience) or the technologies and languages ​​that they studied/are studying, such as serverless, edge computing, blockchain, Web3 etc.

As well as traditional CVs, the portfolio records the developer's trajectory so that potential hires or recruiters can assess whether their profile is suitable for the job opportunity in question.

It is through your portfolio that you will prove that you know how to create an app, a website or a system, for example.

Developer Portfolio Types

The developer portfolio can be a website focused on visually displaying the projects or the code for those projects.

The visual portfolio is quite obvious: it shows the work done through illustrations.

portfolio-de-programador- gustavo-willeman.png

The code portfolio, better known as repository, shows how you wrote your code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Portfolio</title>
  <link rel="stylesheet" href="styles.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js"></script>
  <script src="/scripts/paralax-carousel.js" type="module"></script>

The main code repository is Microsoft's github, which looks like this:

portfolio-de-programador-github-bohr.png

And this is the bohr.io repository⇗ on github.

Tips for creating a programmer portfolio

First of all, you need to have something to show, right? You must have at least one project on hand to exhibit in your portfolio (it could be the one you developed in college) or a list of systems and languages you master.

Obviously, portfolios with impressive work will make you more interesting for the job market.

But everyone has to start somehow, right? 🚀

inĂ­cio de carreira de dev.gif

And here's a tip that not every dev exploits:

Don't miss the opportunity to work on your personal brand and to express your personality! This gives potential employers a better understanding of how you might fit into their company culture or whether you will succeed in the role they want you to fill in.

Another cool tip is to show your hard skills - and especially your soft skills - in your portfolio.

According to the Exame website, these are the skills types definitions⇗ that recruiters are always seeking for in developer portfolios:

▶️ Hard skills (technical skills)

These are skills that can be learned and easily quantified. You learn hard skills in the classroom, with books, handouts, online courses or even at work.

In general, they are proven through certificates and diplomas.

▶️ Soft skills (behavioral skills)

These are subjective skills, linked to the way you relate and interact with people - therefore, they are more difficult to assess.

đź’ˇRecruiters pay special attention to soft skills because it is much easier for the company to train a technical competence than a behavioral one.

Here are some examples of soft skills: communication, conflict resolution, attitude, creativity, critical thinking, organizational skills, leadership, ethics, flexibility, teamwork, and time management, among many others.

Golden tip for exploring soft skills: read the job description carefully to understand which skills the company is looking for in candidates and be thoughtful in describing your skills that match the expectations of the contractors.

Crucial components of a developer's portfolio

According to Springboard⇗, a junior developer's portfolio should include at least 3 main components:

  • About Me – People want to know who you are. So include your name, a photo, and a brief synopsis of what you've done and where you hope to go in your career. It's a good idea to refine this narrative over time as your career progresses.

  • Projects – The best samples of your work are the critical component of the programming portfolio. This section should be as captivating as possible. Get creative: Use compelling videos, GIFs, designs, and text.

  • Contact - Ideally, it would be nice if you include a contact form + social media channels (especially LinkedIn). If you don't want to do this, at the very least you should add your email address and links to github.

Want to go beyond the basics and dive in a little deeper? 🔥

Also according to Springboard, these are the 7 best practices for building a developer portfolio:

  1. Adapt the portfolio to the position you are looking for: e.g. if you are applying for a coding job, edit the material and add more experience related to writing code.

  2. Include extracurricular work: You can develop, on your own initiative, a new version of a landing page or website for the company you are trying to impress. This will not only show your skills but also prove that you have a self-taught attitude.

  3. Make sure you have a responsive design: Find a responsive template that offers a fantastic user experience on all devices (or better yet, develop your own đź’Ş).

  4. Attractive design and layout: Using a free template saves a lot of time spent on design or development, but it is very important to customize it. Also, you must create a visually appealing layout that will impress your visitors.

  5. Custom URL: Your programming portfolio is a big part of your personal brand. So choose a proper URL (ideally, it should include your name or at least reflect the work you do). Also, buying your own domain gives a more professional impression than using a free one.

  6. Minimize touchpoints: A junior developer's portfolio doesn't have to be a complex maze with many pages and options. You should make the UI smooth and straightforward so that visitors can navigate your site with just a few clicks.

  7. Include social proof: Getting testimonials from satisfied customers is always a plus for your programming portfolio. If you can, encourage past clients to write a few sentences that explicitly state how your work has had a positive impact on the project or business.

How to create a developer portfolio with bohr.io

When you create your bohr.io account you will receive a link⇗, where you will need to click on the Use this template button:

portfolio-de-desenvolvedor-1.png

Then you name the repository and click Create repository from template:

portfolio-de-desenvolvedor-2.png

Then github will create a new repository in your account:

portfolio-de-desenvolvedor-3.png

After that, github will automatically trigger bohr.io to deploy:

portfolio-de-desenvolvedor-4.png

In less than 1 minute the deploy will be completed and bohr.io will create an environment:

portfolio-de-desenvolvedor-5.png

portfolio-de-desenvolvedor-6.png

And that's it! âś…

portfolio-de-desenvolvedor-7.png

Got any questions or need some assistance?

Access our Discord server⇗. There are always people ready to help you out. 🤝

Â