Ask a Question ?
Design & Publish Websites Faster

Minimalist Portfolio Site Recreated with Breezi

Hey there! Today we’ll present the first of a series of experiments consisting in recreating live & working sites from around the web.

The idea is to present examples of “real” sites and how they can be made in Breezi.

Use Case

In this case, we will use as an example a designer’s micro site: matoweb, a graphic designer from Slovenia. This is his portfolio website.

Matoweb designer micro site

This designer site is what we’ll make in Breezi

Video

Check out this video of the whole process. Its a bit long, but it shows each and every step! Be sure to watch it full screen and in HD.

Steps

We took the flow of this micro site’s homepage and made them into blocks in Breezi. We’re going to go block by block, step by step.

These are the sections of this post, as we organized them in logical blocks:

  1. Header (site logo and navigation)
  2. Intro – (featured section & intro)
  3. Body 1 – (portfolio of projects)
  4. Body 2 – (about)
  5. Body 3 – (blog summary)
  6. Body 4 – (client testimonials)
  7. Body 5 – (contact form )
  8. Footer – (copyright information)

Before Beginning

We’ll start with the assumption that you’ve already created a site (else, go to our homepage and click on Sign Up!).

Once you have your site open, go to the shelf, open the More menu, and reset your site.

Admin bar on the shelf: "Reset Site" highlighted

Resetting your site deletes everything (apps, pages, layouts, content, etc). Careful!

We’ll do this to pick a new starting point. Look for the one labeled “Blank”.

Hovering over the "Blank" starting point

Choose this starting point to get an empty layout

This will get us an empty page, from where we’ll start.

Blank starting point

This is what your site will look like once finished resetting

1. Header Block

The header is what we’ll do first. This is how the original looks:

First thing: the header

Header of the original site

Select the Style Dot of the block, and change its color to white. By default it comes in gray.

Header Style Dot

Changing color of the Header block

Next, we’ll merge the columns to have just one (as the original). we’ll also create an additional section below current one.

Clicking on "Merge Columns" will make one out of any two given columns

Merging the two columns on the Header

Now we’ll put the apps in place: an Image app for the logo, and a Navigation app for the menu.

Installing the apps on the Header

An Image app and a Navigation app are needed

We’ll customize them accordingly, switching the default image with the actual logo, and editing the content of the navigation.

The image will need resizing, as it appears by default at a larger scale.

Resizing the Header logo

Resize the image to 100% (original size) just by dragging it from its lower right corner

The navigation may need some more customization, as it comes with more default data. Let’s open its settings and change its alignment to “Center”.

Changing the alignment to "center"

The menu should be centered, to resemble the original site

Now we’ll change the content, and add the respective links.

Editing and adding links on the CMS panel

We’ll edit the 3 links that appear by default and add 2 more

We’ll also delete the sub level links (on “Manage Links”).

Deleting sub levels on the Dropdown Navigation app

If we don’t delete those, they’ll show as a sub menu of one of our top level items

Next step: customize the font. We’ll use “Raleway Thin” as it resembles the original “Helvetica” font. We’ll change the color to a custom gray (Hex code #747474) for the default color and a blue (#419efb) for the rollover. Also we’ll select 24 for the size, and remove the bold.

Style Dot for the Dropdown Navigation app

Through this dot we can style up the font of our nav items

And this is how it would look.

Header once set

Our header block finished

2. Intro Block

We’ll continue to the Intro block. Here we find an intro and some featured items in a slideshow.

First, let’s edit the background (on the style dot).

Selecting a custom image for a block's background

We’ll use a repeating image for this block

Once the block’s dot is opened, check the box for “Background Image” and click “Edit”. This will open a new window with default image backgrounds. We’ll use a custom image already prepared for this purpose (a grayed gradient).

It’s important to select “Repeat Horizontally”, as the image is not wide enough to cover the whole area. This option it will make the image repeat as many times as necessary to cover the whole area of the block.

Next: installing a Super Banner app.

Installing a Super Banner app

This is one of the most advanced apps in Breezi

For this app we’ll perform a series of customizations:

Super Banner App Settings

  • Content Settings
    • Content Position: Left
    • Check only: “Display Title”, “Display Subtitle”, “Display Button”
  • Arrow Nav Settings
    • Arrow Type: V-shape Thin
    • Arrow Location: Outside Image
    • Default Color: Light arrows
  • Pagination Settings
    • Pagination Location: Outside Image
    • Pagination Type: Dots
    • Default Color: Custom gray (Hex code #999999)
    • Active State Color: Custom blue (Hex code: #419efb)

The other ones can be left at their default state.

Several options edited to suit our needs

Customizing the Super Banner App

Now, on to the content.

Super Banner App Content Edits

We’ll open the CMS panel, and select a slide. There we will edit the “Slide Title”, the “Slide Description” and the “Button Text”. We’ll also replace the default image wit one of our own. The image was recreated taking into account the dimensions of the original site slideshow, but the height may vary from slide to slide.

The Super Banner App CMS panel

You can edit the content on the CMS panel

This is pretty straight forward. Just modify the respective fields.

Super Banner App Styling

Following, we have some styling to do. First: the content background. We’ll remove it by lowering all the opacity.

Dot for the content of the Super Banner App

Lowering the opacity will make the background “transparent”

Then we can proceed to the button. On its Style Dot, we will:

  • Change the color to our custom blue (#419efb)
  • Change the “Rollover” color to a darker shade of blue (use one of the color picker)
  • Reduce the “Corner Radius” to 5px
  • Adjust the “Width” to 38%
  • Check the “Gradient” box and adjust the intensity
Style Dot for the button inside the Super Banner App

Set the color for the background and the “Rollover”

Now, on to the style of the text inside the button. These kind of Style Dots may be a little bit tricky to select sometimes, but hover around it until it shows, and click it.

Style Dot for the text inside the Button

This Dot will open the styling for the text

Once this toolbar opens, we’ll change the font (Raleway Thin), size (18) and we’ll set the color to white.

Edit in Place Toolbar for the Super Banner app Button text

Here we’ll customize the font, size and color

The slide title needs customizing too: we’ll select the “Raleway Thin” font, 42 as size and our shade of dark gray for the color. As for the slide description text, it will be a lighter gray, and size 14.

And that’s it for the “Intro” block!

3. Portfolio Block

In this block we’ll use 3 Breezi apps: Text, Projects and Button.

Text App

This app we’ll use as a title for our blocks, so we’ll only have to set it up once and then just duplicate it whenever its necessary.

The customizations of text imply: switch to our font of choice (Raleway Thin), size 48, black color, center-align it, and select 48 as “Line Height”.

EIP toolbar

We will duplicate this app wherever its needed

Projects App

The Projects app is also a complex one. We’ll install it right below the title (former step) and we’ll customize its settings as following:

  • Uncheck “Show Categories Above List View”
  • Columns: 3
  • Show Project Info: Over Image
  • Show Project Info On: Rollover state
  • Image Rollover effects
    • Effect: Blend
    • Intensity: High
    • Color: #419efb (our shade of blue)
Settings for the Projects app

Here we’ll personalize the Projects app functionality

Editing content’s next: we’ll only add an image and a project’s name and leave the other defaults.

CMS Panel for the Projects app

We’ll edit only a few places here to resemble the original

Once those fields are modified for the existing items, and new ones are created to have a total of 6, it should look like the following image.

Projects app preview

The projects are in place and all we need to do is add some styling to the text

We’ll change the Style Dot for the text inside each item. Modifying one will affect all.

Style Dot for the text inside each Item

We’ll make the text larger and change font and color

Font will end up as 30 size, Raleway Thin, bold and white.

A Button app will be installed below the projects app. For this one we can just import the style of the button we previously set on the button of the Super Banner App.

First we need to save the style as a profile. Click on “Save Styles as Dot Profile” right below on the Style Dot panel and assign a name to it. Now you can use it in any dot by clicking on the “Load Dot Profile” next to it.

Style Dot panel for a button

Click “Save Styles as Dot Profile” to reuse the style set of the current dot

Some additional options may be tuned too, like removing the “Slogan” on the settings, change alignment (center) and the font, which is actually independent. For it we’ll double click it to open the “Edit in Place Toolbar” and select a white color, 18 as size and Raleway Thin as font.

4. About Block

For the next block we’ll change the background color to a custom light gray (#f2f2f2). Then we’ll duplicate the title (Text app) of the previous block (Portfolio) and move it right into the new block. We’ll change the text to “About”.

Next we’ll add a section and split it into 4 columns. To split them we need to hover over the bordering line of each column.

Splitting columns of a section

When splitting a column, the new pair will have the same width each (the exact half of the original)

Now in each of them we’ll install two things: an Image and a Text app. The image will be from the set we already have (little icons) and the text will be of the original site. We’ll need to modify the font, size and color to match: blue Raleway Thin 22 for the upper text, and gray Arial 15 for the lower.

We’ll also have to reduce the bottom spacing of the image, which will be above the text. Also reduce the top spacing of the text.

Modifying the Style Dot for a Text app

We want to reduce the space between image and text

Then we’ll just duplicate these two apps to fill each of the adjacent columns. We’ll only edit the content (image and verbiage) of each. It will look like this:

Our 4 columns with apps

The About Block is almost ready

We’ll add a new section below this and install another Text app.

Adding a Section with the blue "plus sign"

We need a one-column section for our next apps

The text will be the verbiage from the original site. Styling: centered, gray Arial 18.

Next we’ll install a Social Icons app, below the last one. The settings for this will be:

  • Icons Theme: Candy
  • Alignment: Center
  • Add links to: Facebook, Twitter, Dribbble
Settings of the Social Icons app

We can alternately choose “Glossy Mono” for the Icons Theme for grayed, squared icons

5. Blog Block

Next Block: we’ll start by duplicating the last title and bringing it over. We’ll change the text to “Blog”. We’ll add a new section below, which we’ll divide by two. On each of them we’ll install a Text + Photoblock app.

Fresh installed Text + Photoblock app

We’ll use this app instead of the Blog app for achieving the right look

Customization for these apps (both) imply:

  • Removing the app title as it is not necessary
  • Adding the right picture, title and description to each one right there
  • Resizing the image to 100% (it may automatically appear at a lower size)
  • Changing font to dark gray Raleway Thin 18 for the title and light gray Arial 13 for the description
  • Limiting the “Entries to Show” (settings) to 3

We must have a total of 3 items on each app.

Adding an entry to the Text + Photoblock app

We can do a single app first and then we just duplicate it

Last thing we’ll do for this Block is duplicate the “all my work” button from the Portfolio Block, take it down to the “Blog” Block and change the text to “view my blog”.

Duplicating the "all my work" button

We save time by recycling apps which already share settings/content/styling that we want to replicate

 6. Clients Block

For this Block we’ll change the background to our light gray and duplicate the title from the last Block and change its text to “Clients”.  Next we’ll duplicate the Super Banner app (which already has some settings that we need) and customize it. Settings will be set to:

  • Transition Fx: Dissolve
  • Fx Speed: Medium
  • Content Position: Top
  • Content Checkboxes: should only be checked “Display Title” and “Display Sub-Title”
  • Arrow Location: Don’t Show
Clients Block: Super Banner App settings

We’ll customize the Super Banner App already installed above

Now for the content, we’ll use an image with the same color of the Block’s background. We’ll also edit the slide title and subtitle.

Then we’ll change the styles of the title to gray (#6c6c6c) Georgia 30. We’ll also reduce the bottom padding from the subtitle so its closer to the navigation below.

7. Contact Block

For the Contact Block we’re using a 3 column section with the following measures:

Measures of the columns for the Contact Block

465 pixels for the middle column and 248 pixels for the others

We’re doing it this way to keep the width of our apps there limited, in a “restricted” width.

First thing we’ll start by duplicating the title and change it to “Say Hello”.

Then we’ll install a Contact app below the title.

Fresh installed Contact app

We’ll edit the fields and button to resemble the original

We’ll modify it so its only showing:

  • name & surname
  • e-mail
  • company
  • message

The labels are edited on the settings, while the available fields (which to show and which not to show) on the “Form Settings” button below the form itself.

For the button we can load the Dot Profile we saved previously. For the labels, we’ll also edit the style and center it, and make it a 16 Arial black font.

8. Copyright Block

The “Copyright” is the last Block. It only features an image and some text info. We’ll use… you guessed it! An Image app and a Text app.

Copyright Block (last one)

It only features an image and the text information

For it we only need to replace the image and text. We’ll style it a little bit, with gray centered text and default Arial font, 18 for the first line, and 12 for the rest.

And finally, we’re done! This is how the finished page will look. You can click to enlarge it.

Finished Portfolio site. Click to enlarge!

This is how our Portfolio micro site in Breezi will look

Hope you enjoyed this post. Let us know what you think on the comments below!

Menu