Degray84 · Degray84 · Jun 26, 2017 · Jun 26, 2017 · Jun 26, 2017 · Jun 26, 2017
diff --git a/content/another_content.json b/content/another_content.json
@@ -0,0 +1,3 @@
+{
+    "skills": [7, 8, 9]
+}
diff --git a/content/common_content.json b/content/common_content.json
@@ -0,0 +1,12 @@
+{
+    "user_name": "Кацер Сергей",
+    "user_title": "Личный сайт разработчика",
+    "socials": ["vk", "fb", "in"],
+    "skills": ["Frontend", "Backend", "WorkFlow"],
+    "frontend": ["HTML5", "CSS3", "JavaScript & jQuery"],
+    "backend": ["PHP", "mySQL", "Node.js & npm", "Mongo.db"],
+    "workflow": ["Git", "Gulp", "Bower"],
+    "contacts": ["degray84", "gray84@tut.by", "+37529 953 74 36", "Жодино"],
+    "main_footer": "@ Кацер Сергей | Создано с любовью в LoftSchool 2017",
+    "articles": ["Статья 1", "Статья 2", "Статья 3", "Статья 4", "Статья 5"]
+}
diff --git a/docs/about.html b/docs/about.html
@@ -0,0 +1,214 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>About page</title>
+    <meta content="Katser_S" name="author">
+    <meta content="Portfolio_project" name="description">
+    <meta content="LoftSchool" name="keywords">
+    <meta content="width=device-width, initial-scale=1" name="viewport">
+    <meta content="ie=edge" http-equiv="x-ua-compatible">
+    <link rel="stylesheet" href="./assets/css/foundation.css">
+    <link rel="stylesheet" href="./assets/css/app.css">
+    <script src="/assets/js/foundation.js" defer></script>
+    <script src="/assets/js/app.js" defer></script><!--[if lt IE 9]>
+    <script src="http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script><![endif]-->
+  </head>
+  <body>
+    <div class="wrapper">
+      <section class="section hero"><img class="hero__bg" src="./assets/img/bg/mountains.png">
+        <div class="hero__container">
+          <div class="hero__socials">
+            <ul class="socials">
+              <li class="socials__item"><a class="socials__link socials__link_vk" href="#"></a></li>
+              <li class="socials__item"><a class="socials__link socials__link_fb" href="#"></a></li>
+              <li class="socials__item"><a class="socials__link socials__link_in" href="#"></a></li>
+            </ul>
+          </div>
+          <div class="hamburger hero__menu"></div>
+          <div class="arrow-down hero__scroll-button">
+            <svg class="arrow-down__pic">
+              <use xlink:href="./assets/img/sprite.svg#arrow_down"></use>
+            </svg>
+          </div>
+          <div class="hero__title">
+            <div class="section-title">
+              <svg class="section-title__pic">
+                <use xlink:href="./assets/img/sprite.svg#portfolio_header"></use>
+              </svg>
+            </div>
+            <div class="hero__user">
+              <div class="user">
+                <div class="user__pic"><img class="user__pic-img" src="./assets/img/MyPhoto(06.17).jpg" alt=""></div>
+                <div class="user__description">
+                  <div class="user__name">Кацер Сергей</div>
+                  <div class="user__info">Личный сайт разработчика</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+      <section class="section about">
+        <div class="about__left">
+          <div class="triangle triangle_fill_white about__left-triangle">
+            <svg class="triangle__svg" viewbox="0 0 1000 150" preserveAspectRatio="none">
+              <polygon points="0,0 0,150 1000,150"></polygon>
+            </svg>
+          </div>
+          <div class="about__left-title">
+            <div class="block-title" style="background-image: url('/assets/img/decor/about-header.png');">Обо мне</div>
+          </div>
+          <div class="about__left-content">
+            <div class="user-user__description">
+              <div class="user-desription__image"><img class="user-desription__avatar" src="./assets/img/MyPhoto(06.17).jpg" alt=""></div>
+              <div class="user-desription__title">
+                <div class="block-subtitle">Кто я</div>
+              </div>
+              <div class="user-desription__text text-content">
+                <p>Я веб разработчик из Новосибирска. Мне 27 лет. Я занимаюсь разработкой современных сайтов и приложений. Мне нравится делать интересные и современные проекты.</p>
+                <p>Этот сайт я сделал в рамках обучения в Школе онлайн образования LoftSchool. Чуть позже я освежу в нём свой контент. А пока посмотрите,как тут всё классно и красиво!</p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="about__right">
+          <div class="triangle triangle_fill_beige about__left-triangle">
+            <svg class="triangle__svg" viewbox="0 0 1000 150" preserveAspectRatio="none">
+              <polygon points="1000,0 1000,150 0,150"></polygon>
+            </svg>
+          </div>
+          <div class="about_right-title">
+            <div class="block-subtitle">Чем я могу быть полезен</div>
+          </div>
+          <div class="about__right-text text-content">
+            <p></p>
+          </div>
+          <div class="about__right-content">
+            <ul class="skills-list">
+              <li class="skills-list__item"></li>
+              <div class="skills-row">
+                <div class="skills-row__title">Frontend</div>
+                <ul class="skills-row-list"></ul>
+                <li class="skills-row-item"></li>
+                <div class="skills">
+                  <svg class="skills__circle"></svg>
+                  <div class="skill__title">HTML5</div>
+                </div>
+                <li class="skills-row-item"></li>
+                <div class="skills">
+                  <svg class="skills__circle"></svg>
+                  <div class="skill__title">CSS3</div>
+                </div>
+                <li class="skills-row-item"></li>
+                <div class="skills">
+                  <svg class="skills__circle"></svg>
+                  <div class="skill__title">JavaScript &amp; jQuery</div>
+                </div>
+              </div>
+              <li class="skills-list__item"></li>
+              <div class="skills-row">
+                <div class="skills-row__title">Backend</div>
+                <ul class="skills-row-list"></ul>
+                <li class="skills-row-item"></li>
+                <div class="skills">
+                  <svg class="skills__circle"></svg>
+                  <div class="skill__title">PHP      </div>
+                </div>
+                <li class="skills-row-item"></li>
+                <div class="skills">
+                  <svg class="skills__circle"></svg>
+                  <div class="skill__title">mySQL      </div>
+                </div>
+                <li class="skills-row-item"></li>
+                <div class="skills">
+                  <svg class="skills__circle"></svg>
+                  <div class="skill__title">Node.js &amp; npm      </div>
+                </div>
+                <li class="skills-row-item"></li>
+                <div class="skills">
+                  <svg class="skills__circle"></svg>
+                  <div class="skill__title">Mongo.db      </div>
+                </div>
+              </div>
+              <li class="skills-list__item"></li>
+              <div class="skills-row">
+                <div class="skills-row__title">WorkFlow</div>
+                <ul class="skills-row-list"></ul>
+                <li class="skills-row-item"></li>
+                <div class="skills">
+                  <svg class="skills__circle"></svg>
+                  <div class="skill__title">Git                  </div>
+                </div>
+                <li class="skills-row-item"></li>
+                <div class="skills">
+                  <svg class="skills__circle"></svg>
+                  <div class="skill__title">Gulp                  </div>
+                </div>
+                <li class="skills-row-item"></li>
+                <div class="skills">
+                  <svg class="skills__circle"></svg>
+                  <div class="skill__title">Bower                  </div>
+                </div>
+              </div>
+            </ul>
+          </div>
+        </div>
+      </section>
+      <section class="section map"> 
+        <div class="google-map"></div>
+        <div class="map__contacts"></div>
+        <div class="contacts">
+          <div class="contacts__title"></div>
+          <div class="block-subtitle">Контакты</div>
+          <ul class="contacts__list"></ul>
+          <li class="contacts__item"></li>
+          <div class="contacts-row">
+            <div class="contacts-row__icon">skype</div>
+            <div class="contacts-row__content">degray84</div>
+          </div>
+          <li class="contacts__item"></li>
+          <div class="contacts-row">
+            <div class="contacts-row__icon">mail</div>
+            <div class="contacts-row__content">gray84@tut.by</div>
+          </div>
+          <li class="contacts__item"></li>
+          <div class="contacts-row">
+            <div class="contacts-row__icon">phone</div>
+            <div class="contacts-row__content">+37529 953 74 36</div>
+          </div>
+          <li class="contacts__item"></li>
+          <div class="contacts-row">
+            <div class="contacts-row__icon">mark</div>
+            <div class="contacts-row__content">Жодино</div>
+          </div>
+        </div>
+        <footer class="map__footer footer">
+          <div class="footer__row">
+            <div class="container"></div>
+            <div class="footer__col footer__col-left">
+              <nav class="menu"></nav>
+            </div>
+            <div class="footer__col footer__col-right">
+              <ul class="hero__socials socials_rounded"></ul>
+              <li class="socials__item"></li><a class="socials__item socials__item_vk" href="#">vk</a>
+              <li class="socials__item"></li><a class="socials__item socials__item_fb" href="#">fb</a>
+              <li class="socials__item"></li><a class="socials__item socials__item_in" href="#">in</a>
+            </div>
+          </div>
+          <div class="footer__row">
+            <div class="container"></div>
+            <div class="footer__col footer__col-left">
+              <div class="footer__text footer__text_left"></div>
+              <p></p>
+            </div>
+            <div class="footer__col footer__col-right">
+              <div class="footer__text footer__text_right"></div>
+              <p></p>
+            </div>
+          </div>
+        </footer>
+      </section>
+    </div>
+  </body>
+</html>