How To Build A Great Technical Portfolio

Portfolios are a representation of you, and they ‘re much one of the inaugural impressions a recruiter will have of you and your employment.
frankincense, it ‘s imperative you build a portfolio which encompasses you, and your work, at your best .
Let ‘s take a search at some of my tips for building a great technical portfolio .
bill : These suggestions are built off of my personal experience. There are many ways to build a bang-up portfolio, so use these as guidelines, not hard-and-fast rules. If you have a different border on that works for you, feel free to share it down below !

What makes a good portfolio
Portfolios explain who you are as a person and what type of skills you bring to the table. They ‘re besides a great means to showcase your development skills ! There are a few key things you should incorporate to ensure your portfolio is ace .
Your portfolio should tell people about you
portfolios are your way to shine ! What do you like to do for fun ? What ‘s your life fib in a nutshell ? What do you want people to know about you ?
By adding in some personal touches, you ‘re giving potential employers an idea about what it ‘s like to work with you !
here ‘s a short snip from my portfolio ‘s about foliate. Feel loose to check out the wide page here .
Showcase your best work
If you have any projects or work that you ‘re gallant of, and which exemplify your gull or plan abilities, your portfolio is the position to showcase them .
many companies produce proprietorship ( confidential ) exercise, thus you may be wondering how you can incorporate these into a public portfolio .
unfortunately the answer is…you ca n’t. My trace is to have two to three side projects which showcase your abilities. I know this is n’t feasible for everyone, but there is n’t a lot you can do when your employment is confidential .
To display your solve, describe the technologies you used, what your function was within the project ( if applicable ), include a screenshot or two, and post a radio link to the code ( if you ‘re able to ) .
here ‘s how I laid out the ferment section of my portfolio. You can check out the full page here .
Exemplify your skills
One great way to catch an employer ‘s eye is to use your portfolio as a side project. I used Gatsby with React.js in order to build my portfolio simply because I wanted to experiment with a site generator and showcase my React skills .
I besides designed my integral portfolio in Sketch prior to building it. I recommend drawing out a hierarchy of how you want to display your information .
Check out the “ What Technology Should I Use To Build My Portfolio ? ” segment below for more details on the different ways in which you can build your portfolio !
Recruiters and likely employers may be searching through your portfolio, even if you have n’t updated it in years. therefore, it ‘s authoritative to keep your information equally up-to-date as potential .
If you take on a new function, update your portfolio. If you build a cool new app, update your portfolio !
You want this to be a theatrical performance of you and your current skill-set. thus, it ‘s crucial you build something easily maintainable and which will stand the quiz of time .
You should always provide a method of contact in your portfolio. truthfully, at this here and now in meter, I do n’t have a method acting of contact listed within mine ( shame on me ! ) .
If you do n’t provide a method of contact, recruiters ca n’t contact you about electric potential roles .
so include a associate to your social media ( if you use that as a basal means of communication ), your e-mail, or your phone number ( if you do n’t mind receiving a multitude of calls ) .
Give them some way to get in reach with you .
Designing a portfolio can be the most unmanageable job, specially if you are a back-end developer or have little to no design experience .
When I ‘m building a site or lotion, I use dribbble for divine guidance and color palettes. additionally, you can check out Wix and Squarespace to see some of their templates. I ‘m not advising you rip off person else ‘s designs, but it ‘s a good start sharpen for getting inhalation.

I recommend keeping the design fairly simple. You want something that will look full five or even ten years from now. Choose dim-witted, but accessible colors. Use clear fonts at an appropriate size .
It besides helps to write out an information computer architecture. What information do you want on your portfolio ? How do you want it laid out ? Single-page ? Multiple routes ? Make these decisions prior to coding and you ‘ll save a long ton of meter .
If you need graphics, I recommend unDraw. They ‘re free to use and easy to customize !
There are many different technologies with which you can choose to build your portfolio. Let ‘s take a front at some of the choices for both back-end and front-end developers .

Back-end Developers

If you ‘re a back-end developer, or are n’t comfortable building a UI, you have respective routes you can take .

1. Leverage a CMS

contented Management Systems ( CMS ) manage the initiation and care of digital contentedness .
WordPress is one of the most popular content management systems out there, and is a great option for developers who are n’t super comfortable building their own UI .

2. Use vanilla HTML & CSS

A bang-up way to branch out if you know a moment of basic web exploitation is to build your web site using vanilla HTML and CSS. Do n’t feel like you need to go overboard in the design/styling of the UI if that ‘s not where your skills shine. But building your locate in HTML and CSS show your ability to learn skills outside of your comfort zone .
You do n’t need to have JavaScript in club to create an amazing portfolio !

3. Use a CSS framework

If you ‘re decently comfortable with basic HTML and CSS, but want a more consistent UI, you may want to check out a CSS framework .
CSS frameworks make it easier, and quick, to stylus elements. It ‘s significant to note that if you ‘re applying for a front-end developer function, using a CSS framework may not be the best option as employers will be looking for a developer who is comfortable developing CSS. But for a back-end developer, these can be a big option .
I recommend checking out Foundation, Bulma, SemanticUI, or Bootstrap .

4. Use a website builder

If you good want to get your contented up a quickly as possible, you can besides go the route of using a web site builder such as Wix or Squarespace .
These make it highly promptly and easy to deploy a web site. You can even integrate a custom knowledge domain .
If, however, you are applying for a front-end developer character, I caution against using a web site initiation platform. This is a chance to showcase your development skills ! Go big or go home !

Front-end Developers

If you ‘re a front-end developer, there are many more options available for building your web site .

1. Use vanilla HTML, CSS, & JavaScript

You can never go improper with a simple vanilla web site. There ‘s no need to over-complicate the computer architecture of your portfolio if you do n’t want or need to. Just the simple fact that you built your web site from cancel shows electric potential employers that you ‘re willing to take some extra time to showcase your skills .

2. Use a JavaScript framework

You may want to use your portfolio as a way to practice ( and case ) your JavaScript abilities by leveraging a framework or library. I suggest choosing one you ‘re comfortable with ( or to heck with it, choose one you ‘ve been wanting to learn ! ) or which is apposite to the types of roles you ‘ll be looking for .
much, these frameworks or libraries have a CLI that you can use to create a newcomer stick out. These can save you a long ton of time with setting up an environment, and will keep you from having to compile, minimize, and lint your code on your own .

3. Use a static site generator

static locate generators are gaining notoriety in the technical school diligence with the adoption of popular libraries and frameworks ( React, Vue, Angular, and so forth ). I built my portfolio using Gatsby : a site generator for React .
There are many different locate generators to choose from such as Next.js for React applications and VuePress for Vue.js .
These offer many benefits such as plug-ins for image optimization, mobile-friendly responsiveness, and handiness .
Tips For Coding Your Own Portfolio

  • Ensure your code is organized in a thoughtful and efficient way. It’s extremely easy to throw all of your content into one page (and you can do that) but breaking different sections/content out into native web components or HTML pages can make a big difference.
  • Ensure your CSS is clean and organized. Try to stick to more modern CSS for positioning elements (such as Flexbox or CSS-Grid over floats). This shows you stay up-to-date with the specs.
  • Make use of semantic HTML. Structure your code into a hierarchy with the major regions defined. Use these landmark regions (




    , , etc.) to denote important landmarks of your portfolio. Try to use

    and sparingly.

I always recommend including the be sections in your portfolio :

  • About: Who are you? What do you like to do in your spare time? Any fun facts?
  • Work/Projects/Skills: What technologies have you worked with? What projects have you built?
  • Blog (optional): If you have a blog, showcase it here.
  • Contact: How can recruiters get in touch?

again, this is my personal predilection. You may want to equitable create a land page which routes to different platforms ( social media, GitHub, etc. )
Your portfolio should be a representation of you. There is no one-size-fits-all for portfolios. Make it yours !
I hope this blog was useful and will encourage you to build an amazing portfolio to showcase your employment. If you have any questions, do n’t hesitate to reach out on chirrup ! happy cryptography !

source :
Category : Finance

Related Posts

How to Calculate Credit Card Interest Rates

interest rates are one of the ways to work out how much it will cost you to use your credit card, along with other charges and fees….

What debt collectors can & cannot do

If you are dealing with a debt collector, you have protections under the law. A debt collector must not mislead, harass, coerce or act unconscionably towards you….

Can You Afford a New Home? How to Determine Your Homebuying Budget

Can You Afford a New Home? How to Determine Your Homebuying Budget As with any major purchase, determining what you can afford before you look for a…

Why Did My Credit Score Drop?

Why Did My Credit Score Go Down When Nothing Changed? sometimes your mark does change based on factors outside of your control, but most times your behavior…

Why Do I Owe Taxes To The IRS & How To Avoid Them

Are you wondering why you owe indeed much in taxes this year ? Want to make certain you never owe a big tax bill – or any…

The 5 reasons why your credit score might suddenly drop

Select ’ s editorial team works independently to review fiscal products and write articles we think our readers will find useful. We earn a perpetration from affiliate…