From 9020d7bbef0086e1009637b55872ad8d357b63b6 Mon Sep 17 00:00:00 2001
From: Anatoly Kopyl <hi@kopyl.dev>
Date: Fri, 27 Sep 2024 23:52:38 +0300
Subject: [PATCH] About me

---
 src/lib/en.json           | 10 ++++++++++
 src/lib/ru.json           | 10 ++++++++++
 src/routes/+layout.svelte |  4 ++++
 src/routes/+page.svelte   |  2 ++
 src/routes/About.svelte   | 37 +++++++++++++++++++++++++++++++++++++
 src/routes/Footer.svelte  |  4 ++--
 6 files changed, 65 insertions(+), 2 deletions(-)
 create mode 100644 src/routes/About.svelte

diff --git a/src/lib/en.json b/src/lib/en.json
index 2a919fe..8e8ab53 100644
--- a/src/lib/en.json
+++ b/src/lib/en.json
@@ -3,6 +3,16 @@
   "hero": {
     "subtitle": "Attention to&nbsp;detail in&nbsp;development of&nbsp;non-standard solutions of&nbsp;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": {
diff --git a/src/lib/ru.json b/src/lib/ru.json
index 22b11ce..dc91a23 100644
--- a/src/lib/ru.json
+++ b/src/lib/ru.json
@@ -3,6 +3,16 @@
   "hero": {
     "subtitle": "Разработка нестандартных решений любой сложности, внимание к&nbsp;деталям"
   },
+  "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": {
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 39ccd75..fb9c0bd 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -20,4 +20,8 @@
       text-decoration-color: inherit;
     }
   }
+
+  :global(p:not(:last-of-type)) {
+    @apply mb-2;
+  }
 </style>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 40bbdf4..ab40598 100644
--- a/src/routes/+page.svelte
+++ b/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>
diff --git a/src/routes/About.svelte b/src/routes/About.svelte
new file mode 100644
index 0000000..4ae0e76
--- /dev/null
+++ b/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>
diff --git a/src/routes/Footer.svelte b/src/routes/Footer.svelte
index 562b0ab..aae2dec 100644
--- a/src/routes/Footer.svelte
+++ b/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>