The custom fields are easily added:
http://expressionengine.com/docs/modules/member/custom_profile_data.html
You can give your member templates the same look and feel as your frontend simply by altering the member profile templates:
http://expressionengine.com/docs/cp/admin/members_and_groups/member_profile_templates.html
If by look and feel you also mean certain functionality (like adding latest articles in a side bar like they have done) then it is possible, but I don’t think this method is recommended by pMachine as there is a performance hit by running the member templates through the regular EE template engine.
Anyway, if you’re happy with that, this is how.
Go to Admin > Members and Groups > Membership Preferences.
Change the “Profile Triggering Word” to something else (I change it to something no one would guess).
Then go back to the Templates tab and create a new template group called ‘member’.
In the index template within this group add.
{exp:member:manager}
{content}
{/exp:member:manager}
In the last site I’ve just finished I went into the member profile templates and deleted the content from HTML Header and HTML Footer. This means I can have more control in the member/index template. So you could end up with something like:
{exp:member:manager}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>{page_title}</title>
</head>
<body>
<div id="container">
{embed="includes/masthead"}
<div id="content">
<div id="main-content">
{content}
</div>
<div id="sub-content">
<ul>
{exp:weblog:entries weblog="news"}
<li>{title}</li>
{/exp:weblog:entries}
</ul>
</div>
</div>
{embed="includes/footer"}
</div>
</body>
</html>
{/exp:member:manager}
Hope that gets you started.
Make sure you make a copy of the default folder in themes/profile_themes/ and rename it. That way you can modify the templates as much as you like and still revert back if needed.