add work section

app/components/work.tsx

@@ -0,0 +1,58 @@
+import { useTranslations } from 'next-intl';
+
+type CompanyProps = {
+  readonly description: string;
+  readonly href: string;
+  readonly period: string;
+  readonly title: string;
+};
+
+export function Work() {
+  const t = useTranslations('Work');
+
+  const companies: CompanyProps[] = [
+    {
+      description: t('evolution.description'),
+      href: 'https://evoleasing.ru/',
+      period: t('evolution.period'),
+      title: t('evolution.title'),
+    },
+    {
+      description: t('carcade.description'),
+      href: 'https://carcade.com/',
+      period: t('carcade.period'),
+      title: t('carcade.title'),
+    },
+  ];
+
+  return (
+    <section id="work">
+      <div className="flex min-h-0 flex-col gap-y-3">
+        <h2 className="text-xl font-bold">{t('experience')}</h2>
+        {companies.map((company) => (
+          <Company key={company.title} {...company} />
+        ))}
+      </div>
+    </section>
+  );
+}
+
+function Company({ description, href, period, title }: CompanyProps) {
+  return (
+    <div>
+      <a href={href}>
+        <div className="flex">
+          <div className="grow flex-col items-center">
+            <div className="flex items-center justify-between gap-x-2 text-base">
+              <h3 className="text-sm font-medium leading-none">{title}</h3>
+              <div className="text-right text-xs tabular-nums text-muted-foreground sm:text-sm">
+                {period}
+              </div>
+            </div>
+            <p className="text-sm text-muted-foreground">{description}</p>
+          </div>
+        </div>
+      </a>
+    </div>
+  );
+}

app/page.tsx

@@ -1,11 +1,13 @@
 import { About } from './components/about';
 import { Person } from './components/person';
+import { Work } from './components/work';
 
 export default function HomePage() {
   return (
     <main className="flex min-h-dvh flex-col space-y-10">
       <Person />
       <About />
+      <Work />
     </main>
   );
 }

messages/ru.json

@@ -1,9 +1,22 @@
 {
   "Person": {
     "hello": "Привет! Я Влад 👋",
-    "description": "Веб-разработчик с широким опытом работы в различных проектах. Люблю технологии и создавать новое"
+    "description": "Веб-разработчик с широким опытом работы в различных проектах. Люблю технологии и создавать приятный софт"
   },
   "About": {
     "summary": "Участвовал в создании лизинговой компании в составе первых 20 человек. Был ответственен за несколько ключевых проектов, включая разработку главного приложения компании за 3 месяца, что позволило оперативно запустить старт продаж в компании."
+  },
+  "Work": {
+    "experience": "Опыт работы",
+    "evolution": {
+      "title": "Лизинговая компания \"Эволюция\"",
+      "description": "Старший разрабочик",
+      "period": "Август 2020 — Настоящее время"
+    },
+    "carcade": {
+      "title": "Лизинговая компания \"Carcade\"",
+      "description": "Разработчик",
+      "period": "Июль 2018 — Август 2020"
+    }
   }
 }