Localized & roughly done

src/components/ContactForm.module.css

@@ -1,20 +1,27 @@
 .ContactForm {
   position: relative;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
   padding: var(--gap-md);
   margin-left: var(--gap-xl);
   margin-right: var(--gap-xl);
 }
 
-.ContactForm > * {
+.form {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.form > * {
   width: 100%;
   max-width: 600px;
   box-sizing: border-box;
   margin-bottom: var(--gap-sm);
 }
 
+.submit {
+  cursor: pointer;
+}
+
 @media screen and (max-width: 1080px) {
   .ContactForm {
     margin: 0;

src/components/ContactForm.tsx

@@ -13,7 +13,7 @@ export default () => {
   const chapterName = 'mail';
 
   return (
-    <form
+    <div
       use:observer={(event) => {
         if (event.isIntersecting) {
           if (!state.scrolling()) {
@@ -28,24 +28,31 @@ export default () => {
       }}
       ref={(element) => scrollHereWhenSelected(element, [state, setters], chapterName)}
       class={styles.ContactForm}
-      action="https://send.pageclip.co/ipMETNW8CCV8ka21myU6D22bvnOAV0Ag"
-      method="post"
     >
-      <input 
+      <form
-        type="text" 
+        class={styles.form}
-        name="name" 
+        action="https://send.pageclip.co/ipMETNW8CCV8ka21myU6D22bvnOAV0Ag"
-        placeholder={t('name')}
+        method="post"
-      ></input>
+        autocomplete='off'
+      >
+        <input 
+          type="text"
+          name="name"
+          placeholder={t('name')}
+        ></input>
 
-      <textarea 
+        <textarea 
-        name="message" 
+          name="message" 
-        placeholder="Write something.."
+          placeholder={t('message')}
-      ></textarea>
+          rows='4'
+        ></textarea>
 
-      <input 
+        <input
-        type="submit" 
+          class={styles.submit}
-        value="Submit"
+          type="submit" 
-      ></input>
+          value={t('submit')}
-    </form>
+        ></input>
+      </form>
+    </div>
   )
 }

src/components/Links.tsx

@@ -6,18 +6,21 @@ export default () => {
       <a 
         href='https://github.com/anatolykopyl'
         target='_blank'
+        class='hover-grad'
       >
         github
       </a>
       <a 
         href='https://www.linkedin.com/in/akopyl/'
         target='_blank'
+        class='hover-grad'
       >
         linkedin
       </a>
       <a 
         href='https://t.me/avkopyl'
         target='_blank'
+        class='hover-grad'
       >
         telegram
       </a>

src/components/Projects/Project.tsx

@@ -18,6 +18,7 @@ export default (props: {project: Project}) => {
         <a
           href={props.project.link}
           target="_blank"
+          class='hover-grad'
         >
           <h2>{props.project.name}</h2>
         </a>

src/index.css

@@ -5,6 +5,7 @@
   --clr-bg-secondary: hsl(260, 20%, 16%);
   --clr-bg-trietary: hsl(260, 20%, 11%);
   --clr-text: white;
+  --clr-text-secondary: hsl(0, 0%, 75%);
 
   --gap-sm: 18px;
   --gap-md: 36px;
@@ -38,6 +39,7 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 a {
+  display: inline-block;
   color: inherit;
   text-decoration: none;
 }
@@ -55,3 +57,36 @@ input, textarea {
   display: inline-block;
   color: var(--clr-text);
 }
+
+textarea {
+  resize: none;
+}
+
+textarea:focus, input:focus{
+  outline: none;
+}
+
+input::placeholder, textarea::placeholder {
+  color: var(--clr-text-secondary);
+}
+
+.hover-grad {
+  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab, var(--clr-text), var(--clr-text), var(--clr-text));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-size: 200% auto;
+}
+
+.hover-grad:hover {
+  animation: gradient 1s ease forwards;
+  animation-iteration-count: 1;
+}
+
+@keyframes gradient {
+	0% {
+		background-position: 0% 50%;
+	}
+	100% {
+		background-position: 100% 50%;
+	}
+}

src/localization/en.json

@@ -8,5 +8,7 @@
   "worktime_desc": "A PWA that I use daily to track my time spent working. Full offline support.",
   "studybuddy_desc": "A PWA for splitting into groups or taking topics for an assignment.",
   "vkmute_desc": "A Browser extension that allows you to mute people in group chats on VK.com.",
-  "name": "Your name"
+  "name": "Your name",
+  "message": "Write about anything",
+  "submit": "Submit"
 }

src/localization/ru.json

@@ -2,5 +2,13 @@
   "lang": "ru",
   "my_name": "Анатолий Копыл",
   "tagline": "Fullstack разработчик со стандартами",
-  "flexpatrol_desc": "Лендинг для сквада геймеров, с информацией об их серверах и их статусе."
+  "flexpatrol_desc": "Лендинг для сквада геймеров, с информацией об их серверах и их статусе.",
+  "games_desc": "Страница со ссылками на мои игры.",
+  "warframe_desc": "Сервис, который считает разницу в цене между позициями на warframe.market.",
+  "worktime_desc": "PWA, которую я использую ежедневно для подсчета времени. Полная поддержка оффлайн работы.",
+  "studybuddy_desc": "PWA для деления на бригады или варианты.",
+  "vkmute_desc": "Расширение, позволяющее скрывать сообщения от указанных пользователей в беседах.",
+  "name": "Ваше имя",
+  "message": "Напишите о чем угодно",
+  "submit": "Отправить"
 }