MAMP Virtual Host Returning 'It Works!' page

Question

I have kind of come to my wits end with this. Earlier tonight my MAMP stopped working once I attempted to restart it. So I decided to uninstall and reinstall MAMP and see if that helped. However it's caused something else that has never occurred before.

If I type localhost in the address bar, it returns 'It works!'. I created a virtual host as I had done before, to what seemed step by step as I had previously, however, it also returns the dreaded 'It works!' page. I have followed tutorials and no one else has seemed to have this issue. I had no idea what I have done incorrectly here. Any advice would be massively appreciated.

Below are the files I have altered

hosts

##
# Host Database
#
# localhost is used to configure the loopback interface
# when the system is booting.  Do not change this entry.
##
127.0.0.1       localhost
255.255.255.255 broadcasthost
::1             localhost
127.0.0.1       portfolio

httpd.conf

Uncommented the following line

# Virtual hosts
Include /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf

httpd-vhosts.conf

#
# Virtual Hosts
#
# If you want to maintain multiple domains/hostnames on your
# machine you can setup VirtualHost containers for them. Most configurations
# use only name-based virtual hosts so the server doesn't need to worry about
# IP addresses. This is indicated by the asterisks in the directives below.
#
# Please see the documentation at 
# <URL:http://httpd.apache.org/docs/2.2/vhosts/>
# for further details before you try to setup virtual hosts.
#
# You may use the command line option '-S' to verify your virtual host
# configuration.

#
# Use name-based virtual hosting.
#
NameVirtualHost *:80

#
# VirtualHost example:
# Almost any Apache directive may go into a VirtualHost container.
# The first VirtualHost section is used for all requests that do not
# match a ServerName or ServerAlias in any <VirtualHost> block.
#

<VirtualHost *:80>
    DocumentRoot "/Applications/MAMP/htdocs"
    ServerName localhost
</VirtualHost>

<VirtualHost *:80>
    ServerAdmin webmaster@dummy-host.example.com
    DocumentRoot "/Applications/MAMP/Library/docs/dummy-host.example.com"
    ServerName dummy-host.example.com
    ServerAlias www.dummy-host.example.com
    ErrorLog "logs/dummy-host.example.com-error_log"
    CustomLog "logs/dummy-host.example.com-access_log" common
</VirtualHost>

<VirtualHost *:80>
    ServerAdmin webmaster@dummy-host2.example.com
    DocumentRoot "/Applications/MAMP/Library/docs/dummy-host2.example.com"
    ServerName dummy-host2.example.com
    ErrorLog "logs/dummy-host2.example.com-error_log"
    CustomLog "logs/dummy-host2.example.com-access_log" common
</VirtualHost>

<VirtualHost *:80>
    DocumentRoot "/Applications/MAMP/htdocs/portfolio"
    ServerName portfolio
</VirtualHost>

What have I done wrong here?

Going to http://localhost:8888/ & http://localhost:8888/portfolio work as expected but localhost & portfolio/ do not.