About me

src/lib/en.json

@@ -3,6 +3,16 @@
   "hero": {
     "subtitle": "Attention to detail in development of non-standard solutions of any complexity"
   },
+  "about": {
+    "h": "About me",
+    "text": "<p>Fullstack developer from St. Petersburg.</p> <p>I&nbsp;like to&nbsp;explore new technologies, find unusual approaches to&nbsp;solving problems and work at&nbsp;the intersection of&nbsp;fields.</p>",
+    "career": "Career:",
+    "career_value": "Selectel",
+    "bachelors": "BSIT:",
+    "bachelors_value": "SPBSUT",
+    "masters": "MS:",
+    "masters_value": "ITMO (in progress)"
+  },
   "projects": {
     "h": "Projects",
     "link_types": {

src/lib/ru.json

@@ -3,6 +3,16 @@
   "hero": {
     "subtitle": "Разработка нестандартных решений любой сложности, внимание к деталям"
   },
+  "about": {
+    "h": "Обо мне",
+    "text": "<p>Fullstack разработчик из&nbsp;Санкт-Петербурга.</p> <p>Люблю разбираться в&nbsp;новых технологиях, находить необычные подходы к&nbsp;решению проблем и&nbsp;работать на&nbsp;пересечении областей.</p>",
+    "career": "Работа:",
+    "career_value": "Selectel",
+    "bachelors": "Бакалавриат:",
+    "bachelors_value": "СПбГУТ",
+    "masters": "Магистратура:",
+    "masters_value": "ИТМО (в процессе)"
+  },
   "projects": {
     "h": "Проекты",
     "link_types": {

src/routes/+layout.svelte

@@ -20,4 +20,8 @@
       text-decoration-color: inherit;
     }
   }
+
+  :global(p:not(:last-of-type)) {
+    @apply mb-2;
+  }
 </style>

src/routes/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import Navbar from "./Navbar.svelte";
   import Hero from "./Hero.svelte";
+  import About from "./About.svelte";
   import Projects from "./Projects/Projects.svelte";
   import Footer from "./Footer.svelte";
 </script>
@@ -8,6 +9,7 @@
 <main>
   <Navbar></Navbar>
   <Hero></Hero>
+  <About></About>
   <Projects></Projects>
   <Footer></Footer>
 </main>

src/routes/About.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+  import {t} from "$lib/translations";
+  import MaterialSymbolsWork from '~icons/material-symbols/work';
+  import MaterialSymbolsSchool from '~icons/material-symbols/school';
+</script>
+
+<section class="px-2 md:px-8 mb-16 max-w-[1280px] mx-auto">
+  <h2 class="text-3xl mb-4 md:text-4xl">
+    {$t('about.h')}
+  </h2>
+
+  <div class="grid md:grid-cols-[1fr_auto] gap-6">
+    <div>
+      {@html $t('about.text')}
+    </div>
+
+    <div class="grid gap-x-2 grid-cols-[auto_1fr] items-center text-slate-400">
+      <div class="flex gap-2 items-center">
+        <MaterialSymbolsWork></MaterialSymbolsWork>
+        {$t('about.career')}
+      </div>
+      {$t('about.career_value')}
+
+      <div class="flex gap-2 items-center">
+        <MaterialSymbolsSchool></MaterialSymbolsSchool>
+        {$t('about.bachelors')}
+      </div>
+      {$t('about.bachelors_value')}
+
+      <div class="flex gap-2 items-center">
+        <MaterialSymbolsSchool></MaterialSymbolsSchool>
+        {$t('about.masters')}
+      </div>
+      {$t('about.masters_value')}
+    </div>
+  </div>
+</section>

src/routes/Footer.svelte

@@ -4,7 +4,7 @@
 
 <footer class="border-t border-t-slate-800 p-4 md:px-8 flex gap-4 items-center justify-between">
   <div class="text-sm text-slate-400">
-    {$t('footer.made_with')}
+    {@html $t('footer.made_with')}
   </div>
 
   <a
@@ -12,6 +12,6 @@
     href="https://v1.kopyl.dev"
     target="_blank"
   >
-    {$t('footer.go_back')}
+    {@html $t('footer.go_back')}
   </a>
 </footer>