Compatibility:

WebSite X5 Evo anf Pro

If you are asking yourself if you should create a website to present your portfolio, the simple fact you are asking yourself this question suggests the right answer: yes.

An online portfolio with a perfectly designed website is the modern version of a business card, resume, and project showcase all in one. If you are a freelance, you can use it to show your work and allow potential customers to contact you. If, on the other hand, you are a student or a professional looking for work, you can use it to show your skills to companies and convince them to call you for an interview.


With the Portfolio Object you can easily create your online portfolio. Let's see how WebSite X5 portfolio is organized and how you should proceed to use it on your website.



How WebSite X5 portfolio is organized

The portfolio that you can create with WebSite X5 is designed to allow you to present your work in the best possible way and to offer those who look at it the necessary research tools to quickly identify the elements that interest them most. It therefore consists of 2 parts:

  • The search bars

Positioned at the top, they provide a search by categories, the field to perform a free search and the filter by date / alphabetical order. You can decide which search tools you want to activate and how to present them: if you want to, you can also disable all the search functions and present the cards only.

  • The wall consisting in one card for each element added in the portfolio

Each card contains a background image and, on the bottom, a bar reporting title and data. On mouseover, the title, description and possible buttons to in-depth pages are shown with a colored overlay effect. You have much customization room here: you can use colors, effects and formatting settings so to get the result which best represents you.

Now that we know how it is organized and how it works, let's see how we can create our portfolio.


Defining the card list

The first thing you have to do, of course, is to insert all the elements you want to present in your portfolio, by specifying for each one all the details necessary to compose the cards and to organize them in homogeneous categories.

  • After inserting the Portfolio Object inside a cell of the page layout, double-click on the Object to access the Portfolio Object > List window. In this section, you will find all the commands you need to organize your portfolio 
  • Start by entering the necessary categories. For example, you can organize your graphic design works into categories such as: Websites, Brand Identity and Print. To add a category, all you have to do is click on the New Category button, type the name you want to give it and click on the Enter key (or outside the label) to confirm.
  • You can now select a category and click on New Card to open the Card Settings window.
  • Now add a title for the cards, import the image to use as card background and write a brief description.
  • Also decide if you want a date to be displayed on the card, possibly from the period in which you worked at the element you are presenting: in this case, activate the date option and use the calendar to set it. Associating a date to the cards is necessary if you want to allow chronological sorting.
  • Finally, complete the card by inserting one or two buttons: for each you can specify the text and action. You can, for example, set a button that opens a zoomed preview image and a second button that points to an in-depth page.
  • Repeat the reported steps to enter all the categories and all the cards you need. Remember that you don't have to set them all right away - you can add and edit them at any time.


#tip - To proceed faster when creating the list, you can copy and paste a card in order to duplicate it: you can do this using the commands of the keyboard located above the summary table or those of the contextual menu called up by clicking with the right mouse button on the title of a card.

  

Customizing the card style

Now that the card list for your portfolio is ready, you can move on and work on the graphic aspects:

  • Go to Portfolio Settings > Card.
  • Start by defining some general options by reporting the number of Cards per row, the Card height, the Cards Rounded Corners as well as the Card Margins and the Effects.
  • Now define the style of the title bar displayed at the bottom of each card: you can decide the background color and its opacity, as well as the text formatting and color. Remember that you can make the title bar background transparent simply by setting the opacity to 0.
  • The last aspect to manage is the appearance / behavior of the card on mouseover. Select the wished element from the menu and use the options available to make the customizations you want:
    • Background: You can define the color and opacity of the layer which, on mouseover, covers the background image set for the card. In addition, you can choose the effects with which both the colored layer and the background image appear / disappear.    
    • Description:  You can format the card title and description displayed  on mouseover.
    • Buttons: You can set up the buttons displayed on mouseover by defining texts, background, borders and margins.


#tip - The card width is determined based on the overall width of the object and the number of cards to be displayed for each row. The background images will be automatically resized according to the available space.


Setting up the search tools

The last thing you can do to make your portfolio functional is to equip it with practical search tools that allow those who consult it to quickly find the cards with the element that interest them most. All the search tools are collected in two bars that you can decide how to compose and stylize.

  • Go to Portfolio Settings > Filers
  • First, you can decide to present the list of all the categories in which you have organized your portfolio. To do this ,you just have to activate the Show Category list Bar option.
  • If you also activate the On load, show all the categories option, make sure that the "All categories" entry is also added to the category list bar.
  • Once the categories bar is activated, you can customize the style by adjusting the fonts, borders and colors of the different elements.
  • Under the category list bar, there can be a second bar with a field to perform a free search and the button to set the card sorting. You can decide whether to make these 2 tools available by activating the Show Search Field and Allow sorting items.
  • This second bar can also be stylized by acting on the fonts, borders and colors of the various elements.


#tip - Of course, for the category list bar and the chronological sorting to work correctly, you need to have provided categories when inserting the elements and specified a date for each.


Now that your portfolio is finished, all you have to do is publish your site online and start promoting it to show  the quality of your work to potential clients or business partners.