1- The mouse over border, overlay and title effect that is used in the example site.
I see your portfolio page here:
https://jonathansander.com/portfolio/
But the rollover effects aren’t working.
I think this may be because the errors at the top of the page are preventing the page from rendering correctly.
You see this:
Warning: array_unique() expects parameter 1 to be array, null given in /home/jonathan/public_html/wp-includes/post-template.php on line 757
Warning: join(): Invalid arguments passed in /home/jonathan/public_html/wp-includes/post-template.php on line 546
class="">
Those errors are preventing the body tag from being output correctly, which you can see if you view the browser source:
<body <br />
Did you make any changes to the theme files directly? (That’s not something that should ever be done.) If so, try reinstalling a fresh copy of the theme via FTP.
If you didn’t touch the theme files, try temporarily deactivating all your plugins. Does the problem persist? If the problem is gone, reactivate your plugins one-by-one, look at the site in between each reactivation, to find the conflict.
2- How to make the text align in a left column as per the example site.
This should happen automatically when you add media like images to a single portfolio project. Try adding an image within the body of your portfolio post, in addition to the featured image.