Use webpack for bundling

source/_assets/about_me/index.js

@@ -0,0 +1,40 @@
+import './style.scss'
+
+const notes = [
+    'Любимый фильм "Три идиота".',
+    'Люблю кататься на велосипеде.',
+    'Люблю читать фантастические книги.',
+    'Люблю шоколад.',
+    'На день рождения ко мне можно прийти без подарка.',
+    'Не люблю пьяных людей.',
+    'Предпочитаю ходить в кино на 2D-сеансы.',
+    'Проехал на велосипеде 200 километров за день.',
+    'Работаю программистом.',
+    'Хотел бы побывать в горах.',
+];
+
+function selectRandomNote() {
+    return notes[Math.floor(Math.random() * notes.length)];
+}
+
+function updateNode() {
+    const el = document.getElementById('about-me-note');
+    if (el) {
+        el.innerHTML = selectRandomNote();
+    }
+}
+
+function onKnowBetter(event) {
+    event.preventDefault();
+    if (window.yaCounter41913764) {
+        window.yaCounter41913764.hit(location.href);
+    }
+    updateNode();
+}
+
+window.addEventListener('DOMContentLoaded', updateNode);
+
+const el = document.getElementById('know-better');
+if (el) {
+    el.addEventListener('click', onKnowBetter);
+}

source/_assets/about_me/style.scss

@@ -0,0 +1,28 @@
+.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;
+    }
+}