Tutorial: How to make an illustration & animation portfolio with Carbonmade

by Zoe
Published Jan 1, 2023

Some portfolios look so good, you can't imagine how they did it. They must have hired a developer and worked for hours on the design.

Unless they used Carbonmade.

There's no big secret – anything is possible with Carbonmade blocks. In fact, today I'll show you exactly how Aran Quinn used them to create his animation & illustration portfolio.

Step 1. Project pages

On his project pages, Aran first dragged a Title block onto the page, then clicked the ⚙️ icon and hid the Subheading and Divider.

He then added a combination of Text + Image Blocks underneath. To center the text, click the ⚙️ icon next to the block and choose the center dot under 'Alignment.'

Aran then changed every project background color to complement the illustration or brand. To change a project background color, click the project and then click Page Settings at the top of the left panel. Choose a unique background for each project.

Step 2. The Homepage

First, the homepage title, which you'll create the same way you did for your project pages. Just highlight the text to change the typeface and text sizing.

Your projects will display automatically in the default Portfolio Grid on your homepage. Click the ⚙️ icon next to the Portfolio Grid block, click Layout and choose the Masonry Grid layout. This will make your projects appear in the 'Pinterest style' you see on Aran's homepage.

To make the project thumbnails change color on hover, click Thumbnail Hover under the grid settings and play with your color and opacity. Aran chose an orange color with low opacity and clicked the Show Project Title toggle so the titles show on hover.

Step 3. Logo & Background Color

Click Design 🎨 in the panel on the left side of the Carbonmade editor. Now click Logo & Title and drop an image or GIF into the space. (Aran used a cute GIF for his logo, which appears at the top left corner.)

Next, click Global Styles under the same section and choose your background color. You can also experiment with different link and text colors.

Step 4. The About Page

On his About page, Aran added a Title block followed by an About block, then dragged his image into the profile image placeholder. Below that, he dragged in an Experience block to share his work history, clients, awards & contact info.

Step 5. The Personal Work page

Aran added another page to his nav called Craic, which shows off his personal work. To add your own extra page, go to Design 🎨 again, click Site Navigation and then click the Mange Menu Items button. From there, you can add a new page. Drop images onto it along with a Title block, and you're done!

Want to give it a go? Sign up for Carbonmade (it's completely free until you launch!) and follow these steps and experiment along the way to create your own unique layout.

Related reading: