Ibrahim-jaber.com logo
Work With Me

As I started developing my portfolio section, I noticed 6 great killer portfolio tips that I thought could improve just about any web portfolio. Having a great web portfolio is a must as it helps to describe what you can do, even though you may have a CV / Resume, a portfolio stands out the most. It helps create a difference between landing a job and being the secondary choice. So lets look into the 6 great tips.

Contents

Portfolio listing

Portfolio Tip #1: Showcase the best

Show your best works, it will illuminate your works better instead of throwing out all the different works you have done. If you are not satisfied with a work its best to avoid it in the portfolio. This will ensure you receive quality work instead impractical tasks.

Portfolio Tip #2: Keep it simple

Someone browsing your portfolio only came there for a lot of reasons. Hopefully, to check out what you have accomplished, assess that which you’re able to, if they like what they see, hire you.
This ensures that the shorter, plus more obvious, you create the path to browsing live types of your work, better an impact you are going to leave on a potential employer or co-worker.

Example: Simple Portfolio

Portfolio Tip #3: The Real Thing

It really helps to engage a person when they can browse live versions of your hard work. Imagine how disappointed a potential employer is going to be after they go to a nice piece of work that like, and would like to explore, but it ends up to simply be considered a barely perceptible image of an online site. So, create a link and provides them genuine!

Portfolio Tip #4: Good Website Design

Having a design that does not only looks good: but, is easy to see, navigate, and engages an individual is very important for making a good impression online. Using the A.I.D.A. formula is a fantastic idea when making: A – you would like to capture their Attention. I – Hold their Interest D – Convince them they Desire what your offering and finally A – Lead them to take action.

Portfolio Tip #5: Have a Strong Logo

For a business or any individual, having a logo and a logo to represent that brand can help get you noticed and remembered. A logo signifies strength of a portfolio website. It really is important to have someone that knows what they are doing for this one; if you’re not acquainted with the procedure yourself, rely on someone else which is. Building a brand name and logo that is certainly memorable, distinct, and truly represents the theme of your business or your work.

Portfolio Tip #6: More isn’t always better

If you have plenty of work to exhibit though, if not think of limiting your selection for a best items of work. Think about which pieces highlight skills you would like to offer, highlight stronger interests you pursue, and constantly try to select one that flaunts something was challenging for you: this to spotlight your more advanced/valuable skills.

Conclusion

Having a a great web portfolio describes you and your work. It not only defines what you can do but also help you on landing high paid contracts and jobs, simply ensuring what you have to present to them. Most people look for specific niche thus the illustrations of your work will help to create a vision in their mind what to expect from you.

Extras

Courses you can opt -in to better your portfolio:

Ads Temporarily Disabled

Scope (How the Integration Came to be)

I have recently migrated all my posts from DIVI builder to Gutenberg and plan to use it going forward. Recently diving into Oxygen Builder I found some mismatches in the CSS and they were bugging me a lot. Being a curious new player in the field I wanted to fix it.

Version History

Version 1 - NOV 2019

The first set of integration work is live and is working flawlessly with few errors. Almost all the blocks were working correctly except the Embed of Facebook & Audio.

Version 2 - 10 FEB 2020

Updated it too look better on some cases.
Fixed Bug: Caption links and caption texts on images

Installation - Oxygen Template System

The Installation of this integration is fairly easy. One of the greatest feature in oxygen comes to play regarding this, Inner Content. Inner Content out of the box does not do anything but the mixing of code levels it up.

Steps

  1. Create New Template - No Design Inherits & in the others section toggle Inner Content. What this will do is capture everything that is passes the inner content but is not built with Oxygen Builder itself. Example if a page is made with Gutenberg only that will pass through this template nothing else.
  2. Go to Templates and Navigate to your Blog Post Template (Single Blog Post). Open the template in Oxygen.
  3. Once the Oxygen builder opens, click add and then add a section. Inside the section place a inner content element. This is the default system meant for Oxygen to work correctly. you should already have the inner content template. On the same section follow step 4.
  4. Add a Code Block Element to the section below inner content. Add the below codes to the code block respectively to get them working.

Codes

PHP & HTML

<?php
add_theme_support( 'responsive-embeds' );
add_theme_support( 'customize-selective-refresh-widgets' );
add_theme_support( 'wp-block-styles' );
add_theme_support( 'align-wide' );
add_theme_support( 'editor-styles' );
add_editor_style( 'style-editor.css' );
?>

CSS

.wp-block-preformatted {
display: block;
  font-family: Menlo, Consolas, monaco, monospace;
  white-space: pre-wrap;
  word-wrap: break-word;
  text-align: justify;
  margin: 1em 0;}

    
.wp-block-code {
	font-family: Menlo, Consolas, monaco, monospace;
	font-size: 14px;
	color: #23282d;
	padding: 0.8em 1em;
	border: 1px solid #e2e4e7;
	border-radius: 4px;
 	white-space: pre-wrap;
}

.wp-block-audio{
color: #23282d;
	font-size: $default-font-size;
  text-align: center;}

pre.wp-block-verse {
  white-space: pre-wrap;
}

.wp-block-image figcaption {
  overflow-wrap: break-word;
  text-align: center;
  font-size: x-small;
}

The above should work for all Oxygen versions.

Ads Temporarily Disabled

chevron-down-circle