Small update

css/style.css

@@ -8,7 +8,7 @@ body {
 	position: fixed;
 	width: 100%;
 	z-index: 100;
-	font-size: 18px;
+	font-size: 1.2em;
 	font-family: 'Exo 2', sans-serif;
 	background-color: #cecdd9;
 	color: #514b90;
@@ -38,31 +38,31 @@ body {
 }
 .menu ul.top-menu > li {
 	padding-left: 10px;
-	font-size: 20px;
+	font-size: 1.2em;
 }
 
 .androit-green { color: green; }
 .androit-white { color: white; }
 
-.menu ul.top-menu > li > a {
+.menu ul > li > a {
 	color: #514b90;
-	transition: color 0.45s ease-in-out;
+	transition: color 0.5s ease-in-out;
 }
-.menu ul.top-menu > li:hover > a {
+.menu ul > li:hover > a {
 	color: #0e0939;
-	transition: color 0.45s ease-in-out;
+	transition: color 0.5s ease-in-out;
 }
 
 .dropdown-menu {
 	list-style: none;
 	position: absolute;
 	left: 0;
-	width: 200px;
+	/*width: 200px;*/
 	visibility: hidden;
 	backface-visibility: hidden;
 	opacity: 0;
 	z-index: 200;
-	font-size: 18px;
+	font-size: 1.2em;
 	background-color: #aea9c5;
 	border-radius: 5px;
 	transform-origin: left top;
@@ -77,9 +77,45 @@ body {
 	opacity: 1;
 	transform: perspective(600px) rotateX(0deg);
 }
+.arrow-down {
+	margin-bottom: 5px;
+	border: solid #514b90;
+	border-width: 0px 3px 3px 0px;
+	display: inline-block;
+	padding: 3px;
+	transform: rotate(45deg);
+	-webkit-transform: rotate(45deg);
+	-moz-transform: rotate(45deg);
+}
 
 .main-content {
-	padding-top: 40px;
+	/*padding-top: 40px;*/
-	font-size: 18px;
+	padding-top: 2.4em;
+	font-size: 1em;
 	font-family: sans-serif;
 }
+
+.user-info-wrapper {
+	padding-top: 2.8em;
+	display: flex;
+	flex-direction: row;
+}
+.user-info {
+	display: flex;
+	flex-direction: row;
+}
+.user-info-item {
+	margin: 10px;
+}
+.card {
+	border: 2px solid #bbb;
+	border-radius: 30px;
+	box-shadow: 0 0 10px rgba(0, 0, 0, 0);
+	transition: box-shadow 0.3s ease-in-out 0s;
+}
+.card:hover {
+	box-shadow: 0 0 5px rgba(0, 0, 0, 1);
+}
+h2 {
+	margin-bottom: 0;
+}

index.html

@@ -11,7 +11,7 @@
 				<li><a href="#">(Логотип) Главная</a></li>
 				<li><a href="#about-me">Обо мне</a></li>
 				<li id="myproj-item">
-					<a href="https://github.com/DarkCat09">Проекты &#9776;</a>
+					<a href="https://github.com/DarkCat09">Проекты</a> <i class="arrow-down"></i>
 					<ul class="dropdown-menu">
 						<li><a href="https://github.com/DarkCat09/AchSmartHome">AchSmartHome</a></li>
 						<li><a href="https://github.com/IngCenter/SMM">SMM</a></li>
@@ -25,13 +25,25 @@
 				</li>
 				<li id="androit-item"><a href="#"><span class="androit-green">Andro</span><span class="androit-white">IT</span></a></li>
 				<li><a href="http://minespace-world.000webhostapp.com/">Minecraft</a></li>
-				<li><a href="#">Плавание</a></li>
 			</ul>
 		</nav>
 		<div class="main-content">
-			Сайт всё ещё не готов. Пока что можете посмотреть 
+			<div class="user-info-wrapper">
-			<a href="https://github.com/DarkCat09">мой профиль на GitHub</a> 
+				<div class="card">
-			- там действительно много интересных проектов&#9786;
+					<div class="user-info">
+						<div class="avatar user-info-item">
+							<img src="https://avatars.githubusercontent.com/u/50486086?v=4" />
+						</div>
+						<div class="about user-info-item">
+							<h2>DarkCat09</h2>
+							<b>Чечкенёв Андрей</b>
+							<br />
+							<span class="age user-info-field">Возраст: <span id="age-js"></span> лет</span>
+						</div>
+					</div>
+				</div>
+			</div>
 		</div>
+		<script src="js/script.js"></script>
 	</body>
 </html>

js/script.js

@@ -0,0 +1,10 @@
+// Computing My Age
+// Вычисление моего возраста
+var birthday = new Date(2009, 7, 13, 13);
+try {
+	// https://ru.stackoverflow.com/questions/576478/javascript-Вычисление-возраста-по-дате-рождения
+	document.getElementById('age-js').innerHTML = Math.floor((Date.now() - birthday.getTime()) / (24 * 3600 * 365.25 * 1000));
+}
+catch (ex) {
+	console.log('Произошла ошибка при попытке рендеринга моего возраста! Подробнее:\n' + ex.message);
+}