I do this exact thing on my local machine and I have over 30 sites setup with it — so don't worry, it is perfectly doable! I have a MAMP Pro setup using Git & Beanstalk to handle VCS, code hosting and deployment.
In order to have the system folder above root, here is an example project folder structure that would work with the system folder moved above root:
site-1/
|--www/
| |--images/
| |--themes/
| |--uploads/
| |--index.php
| |--admin.php
|--system/
| |--codeigniter/
| |--expressionengine/
| |--index.html
| |--index.php
Note:
I have used www as a folder name for the root site folder, but you should use whatever your hosting provider uses. This could be www, public_html, htdocs etc.
So all has happened here is that the system has been moved upwards one level. Of course in order to do this you need to update the system path in index.php as per the EE Docs:
$system_path = '../system';
Then in MAMP Pro create a new host for this site (Server name "site-1" and set the "disk location" to the site-1/www/ folder. If you are unsure about this, you can check out this example video or have a look at the MAMP Pro docs.
With the site up and running locally you can then commit the site to a git repository. I tend to always use the site-1/ folder as the root of the git repository. That way it holds the system folder as well as the www folder.
Once it is in Git you can send your repo to Beanstalk and have Beanstalk deploy it for you. The trick here is to get beanstalk to deploy your files one folder higher than normal so that when it writes the files in the www/ folder, they end up below your site root and can be viewed.
Once setup, you have the ease of use MAMP Pro along with the benefits of using Git & Beanstalk for deployments. You can then start adding multiple projects to your local htdocs folder and creating a new MAMP Host for each site. You'll end up with a collection of your projects all sat neatly beside each other:
site-1/
|--www/
|--system/
site-2/
|--www/
|--system/
site-3/
|--www/
|--system/