About me

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>