added whole content

components/bio/BioHeading.vue

@@ -0,0 +1,44 @@
+<template>
+  <section :class="$style.grid">
+    <div>
+      <img src="~/assets/svg/howdy.svg" />
+    </div>
+
+    <div :class="$style.text">
+      <h1>Howdy!</h1>
+
+      <p>
+        My name is <b>Fedor Katurov</b>, I'm a fullstack developer from Siberia.
+      </p>
+
+      <p>
+        I develop frontend applications with <b>React</b>, <b>Vue</b> and
+        numerous other frameworks for the most of my time, but I'm also capable
+        of doing <b>Typescript</b> and <b>Golang</b> backend.
+      </p>
+
+      <p>
+        I've started coding more than 15 years ago as a hobby and still love
+        doing that on my work and free time.
+      </p>
+    </div>
+  </section>
+</template>
+
+<script lang="ts" setup></script>
+
+<style lang="scss" module>
+.grid {
+  display: grid;
+  grid-template-columns: 1fr 2fr;
+  grid-column-gap: 40px;
+}
+
+.text {
+  color: var(--color-text-secondary);
+
+  b {
+    color: var(--color-text);
+  }
+}
+</style>

components/bio/BioProjects.vue

@@ -0,0 +1,20 @@
+<template>
+  <section :class="$style.projects">
+    <h2>My Projects</h2>
+
+    <p>
+      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat natus
+      perspiciatis ad voluptatum nisi saepe, molestiae autem dolores est modi
+      quod inventore similique omnis asperiores. Qui beatae magnam ab
+      consequatur.
+    </p>
+  </section>
+</template>
+
+<script lang="ts" setup></script>
+
+<style lang="scss" module>
+.projects {
+  text-align: center;
+}
+</style>

components/bio/BioSkills.vue

@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <h1>Skills</h1>
+
+    <div :class="$style.list">
+      <SkillsCard
+        :title="skill.title"
+        :level="skill.level"
+        :description="skill.description ?? ''"
+        :key="skill.title"
+        v-for="skill in skills"
+      >
+        <img :src="skill.icon" width="48" height="48" />
+      </SkillsCard>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { skills } from "~~/constants/skills";
+</script>
+
+<style lang="scss" module>
+.list {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  row-gap: 20px;
+  column-gap: 20px;
+}
+</style>