Reconfigure add structure and add Gulp

source/_assets/about-me.scss

@@ -0,0 +1,29 @@
+.about-me {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+
+
+    &__note {
+        text-align: center;
+        font-size: 120%;
+        max-width: 400px;
+        min-height: 3em;
+    }
+
+    &__links {
+        padding: 0;
+        margin-top: 4em;
+        list-style: none;
+        text-align: center;
+    }
+
+    &__link {
+        display: inline-block;
+    }
+
+    &__link + &__link {
+        margin-left: 1em;
+    }
+}

source/_layouts/default.html.twig

@@ -4,8 +4,7 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link href="https://fonts.googleapis.com/css?family=PT+Serif&subset=cyrillic" rel="stylesheet">
-  <link rel="stylesheet" type="text/css" href="/styles/app.css?v={{ date().timestamp }}">
-  <link rel="stylesheet" type="text/css" href="/styles/about-me.css?v={{ date().timestamp }}">
+  <link rel="stylesheet" type="text/css" href="/app.css?v={{ date().timestamp }}">
   <title>
     {% if page.title is defined %}
       {{ page.title }} - {{ site.title }}
@@ -19,5 +18,6 @@
     {% block content %}{% endblock %}
   </main>
   {% include 'counters.twig' %}
+  <script src="/static/app.js?v={{ date().timestamp }}"></script>
 </body>
 </html>

source/styles/about-me.css

@@ -1,28 +0,0 @@
-.about-me {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 100vh;
-}
-
-.about-me__note {
-    text-align: center;
-    font-size: 120%;
-    max-width: 400px;
-    min-height: 3em;
-}
-
-.about-me__links {
-    padding: 0;
-    margin-top: 4em;
-    list-style: none;
-    text-align: center;
-}
-
-.about-me__link {
-    display: inline-block;
-}
-
-.about-me__link + .about-me__link {
-    margin-left: 1em;
-}