Leonid Fedotov

Никак :)
А если серьезно, то придётся писать все под Bootstrap. Вот и задайтесь вопросом - подходит ли макет "который не под bootstrap" под те нужны, с которыми Вы хотите использовать Bootstrap. Да и нужно оно ли Вам? Неподходящий макет, например, имеющий другую сетку, создаст Вам много головной боли :)

Можно стандартными HTML с CSS3 (2 волшебных свойства: border и border-radius).
В HTML делаете DIV (рядом с нужными Вам мышкой коробкой):
<div class="Arrow TopLeft"></div>
Затем в CSS делаете несколько правил:

.Arrow{
display:block;
position:absolute;
padding:0;
margin:0;
width:300px; // Вам потребуется самостоятельно подправить ширину/высоту
height:250px;
border-radius:50%;
}
.Arrow.TopLeft{
margin:0 0 0 0; // Самостоятельно делаете позиционирование
border-top-left:1px solid #6e6e6e;
}

И так дублируете необходимые субклассы для каждой .Arrow стрелки. Просто, сердито, очень даже векторно без канвасов и SVG :)

PHP вечен и всегда будет к месту, Node.js еще (относительно) молод, но весьма перспективен. Знание обоих языков будет Вам двойным плюсом. Backend бывает разный, но в основной массе это PHP. Начните с PHP, изучите его вдоль и поперек, сделайте свой небольшой пробный проект, а дальше всё сами поймете куда идти дальше.

"Хотелось бы бой между любителями PHP & Node.js" - тут Вам не бойцовский клуб. Причем существуют адекватные разрабы как на PHP, так и на node.js.

Для начала перейдите на хостинг (или хотя бы поставьте на локалке Denwer), а не загружайте сайт со своего диска D:/

Вам надо пользоваться OG-meta tags и Twitter-meta tags. Возможно в дальнейшем при оптимизации Вам потребуется весь набор:

<meta name="keywords" content="zuru,zuru os,zuruos,zuru cloud os,вход зуру,вход zuru,zuru entrance,zuru login">
<meta name="description" content="Entrance to the Zuru Cloud OS">
<meta name="robots" content="index,nofollow">
<meta name="generator" content="Zuru 1.0"/>
<meta name="author" content="iLeonidze">
<link rel="canonical" href="http://home.zuru.ml/"/>
<link rel="shortlink" href="http://home.zuru.ml"/>
<meta name="MobileOptimized" content="320">
<meta name="HandheldFriendly" content="True">
<meta http-equiv="cleartype" content="on">
<meta name="format-detection" content="telephone=yes">
<meta name="format-detection" content="address=yes">
<meta name="distribution" content="global">
<link rel="sitemap" type="application/xml" title="Sitemap" href="http://home.zuru.ml/sitemap.xml"/>
<meta name="application-name" content="Zuru Cloud OS">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<link rel="apple-touch-icon" href="http://home.zuru.ml/images/specials/apple/touch-icon-60x60.png"/>
<link rel="apple-touch-icon" sizes="76x76" href="http://home.zuru.ml/images/specials/apple/touch-icon-76x76.png"/>
<link rel="apple-touch-icon" sizes="120x120" href="http://home.zuru.ml/images/specials/apple/touch-icon-120x120.png"/>
<link rel="apple-touch-icon" sizes="152x152" href="http://home.zuru.ml/images/specials/apple/touch-icon-152x152.png"/>
<link rel="apple-touch-startup-image" media="(device-width: 320px)" href="http://<?=$_SERVER['SERVER_NAME']?>/images/specials/apple/touch-startup-image-320x460.png">
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" href="http://<?=$_SERVER['SERVER_NAME']?>/images/specials/apple/touch-startup-image-640x920.png">
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="http://<?=$_SERVER['SERVER_NAME']?>/images/specials/apple/touch-startup-image-640x1096.png">
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (orientation: portrait)" href="http://<?=$_SERVER['SERVER_NAME']?>/images/specials/apple/touch-startup-image-768x1004.png">
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (orientation: landscape)" href="http://<?=$_SERVER['SERVER_NAME']?>/images/specials/apple/touch-startup-image-1024x748.png">
<link rel="apple-touch-startup-image" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" href="http://<?=$_SERVER['SERVER_NAME']?>/images/specials/apple/touch-startup-image-1536x2008.png">
<link rel="apple-touch-startup-image" media="(device-width: 1536px)  and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" href="http://<?=$_SERVER['SERVER_NAME']?>/images/specials/apple/touch-startup-image-2048x1496.png">
<meta name="msapplication-tooltip" content="Zuru Cloud OS"/>
<meta name="msapplication-config" content="IEconfig.xml" />
<meta name="msapplication-TileColor" content="#FFFFFF"/>
<meta name="msapplication-square70x70logo" content="./images/specials/windows8/square_70x70_logo.png"/>
<meta name="msapplication-square150x150logo" content="./images/specials/windows8/square_150x150_logo.png"/>
<meta name="msapplication-wide310x150logo" content="./images/specials/windows8/wide_310x150_logo.png"/>
<meta name="msapplication-square310x310logo" content="./images/specials/windows8/square_310x310_logo.png"/>
<meta name="msapplication-starturl" content="http://home.zuru.ml/"/>
<meta name="msapplication-navbutton-color" content="#FFF"/>
<meta name="msapplication-task" content="name=Start Zuru Cloud OS; action-uri=http://home.zuru.ml; icon-uri=http://home.zuru.ml/favicon.ico" />
<meta name="msapplication-task" content="name=Go to official website; action-uri=http://zuru.ml; icon-uri=http://home.zuru.ml/favicon.ico" />
<meta name="msapplication-task" content="name=Read out Twitter; action-uri=https://twitter.com/ZuruTeam; icon-uri=https://abs.twimg.com/favicons/favicon.ico" />
<meta name="msapplication-task" content="name=Subscribe to our VK Page; action-uri=https://twitter.com/ZuruTeam; icon-uri=http://vk.com/images/faviconnew.ico" />
<meta http-equiv="imagetoolbar" content="false"/>
<meta name="dc.language" content="RU">
<meta name="dc.source" content="http://home.zuru.ml/">
<meta name="dc.title" content="Zuru">
<meta name="dc.description" content="Cloud Operating System">
<link rel="yandex-tableau-widget" href="./yandex-tableau-manifest.json" />

Здесь дополнительные Meta-tags под Apple, Microsoft, Yandex Widgets и сервисы, понимающие тип dc.* + самое базовое SEO.

Если исходить удобства в дальнейшем использовании, то конечно белый в топе. Большинство изображений, графики, рекламных блоков, готовых решений, наборов цветовых схем и т.п. заточены под белый фон ибо он самый читабельный. Конечно, Вы можете попробовать брутальный черный, но, поверьте, замучаетесь в дальнейшем :)

Notepad++
Mousepad
Webstorm/PHPStorm