Links

src/components/Hero.module.css

@@ -1,20 +1,26 @@
 .Hero {
 	height: 100vh;
 	display: flex;
+	flex-direction: column;
 	align-items: center;
 	justify-content: center;
 	background: var(--clr-bg);
+	max-width: 100%;
+	padding: var(--gap-sm);
+	box-sizing: border-box;
 }
 
 .gradientText {
+	max-width: 100%;
+	display: inline-block;
   font-size: 86px;
   background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   animation: gradient 5s ease infinite;
   width: max-content;
-  margin: auto;
   background-size: 200% auto;
+	word-break: break-word;
 }
 
 @keyframes gradient {
@@ -28,3 +34,9 @@
 		background-position: 0% 50%;
 	}
 }
+
+@media screen and (max-width: 1080px) {
+	.gradientText {
+		font-size: 72px;
+	}
+}

src/components/Hero.tsx

@@ -3,6 +3,7 @@ import { createViewportObserver } from '@solid-primitives/intersection-observer'
 
 import { useStore } from '../store/index';
 import type { Store } from '../store/index';
+import Links from './Links';
 import { scrollHereWhenSelected } from "../utlis/scroll";
 import styles from './Hero.module.css';
 
@@ -21,14 +22,14 @@ export default () => {
       ref={(element) => scrollHereWhenSelected(element, store, 'home')}
       class={styles.Hero}
     >
+      <h1 class={styles.gradientText}>
+        {t('my_name')}
+      </h1>
       <div>
-        <h1 class={styles.gradientText}>
-          {t('my_name')}
-        </h1>
-        <div>
-          {t('tagline')}
-        </div>
+        {t('tagline')}
       </div>
+
+      <Links />
     </header>
   )
 };

src/components/LanguageSelector.module.css

@@ -15,7 +15,7 @@
 @media screen and (max-width: 1080px) {
   .LanguageSelector {
     position: absolute;
-    right: var(--gap-lg);
+    right: var(--gap-md);
     top: 50%;
     transform: translateY(-50%);
   }

src/components/Links.module.css

@@ -0,0 +1,14 @@
+.Links {
+  position: absolute;
+  bottom: var(--gap-lg);
+}
+
+.Links > a {
+  margin: 0 var(--gap-sm);
+}
+
+@media screen and (max-width: 1080px) {
+  .Links {
+    bottom: calc(64px + var(--gap-lg));
+  }
+}

src/components/Links.tsx

@@ -0,0 +1,26 @@
+import styles from './Links.module.css';
+
+export default () => {
+  return (
+    <div class={styles.Links}>
+      <a 
+        href='https://github.com/anatolykopyl'
+        target='_blank'
+      >
+        github
+      </a>
+      <a 
+        href='https://www.linkedin.com/in/akopyl/'
+        target='_blank'
+      >
+        linkedin
+      </a>
+      <a 
+        href='https://t.me/avkopyl'
+        target='_blank'
+      >
+        telegram
+      </a>
+    </div>
+  )
+}

src/components/Projects/projectList.ts

@@ -3,6 +3,7 @@ import gamesPreview from '../../assets/projects/gamesPreview.png';
 import warframePreview from '../../assets/projects/warframePreview.png';
 import worktimePreview from '../../assets/projects/worktimePreview.png';
 import studybuddyPreview from '../../assets/projects/studybuddyPreview.png';
+import vkmutePreview from '../../assets/projects/vkmutePreview.png';
 
 export class Project {
   name: string;
@@ -49,4 +50,10 @@ export default [
     link: 'https://studybuddy.top',
     descriptionSlug: 'studybuddy_desc'
   }),
+  new Project({
+    name: 'VK Mute',
+    preview: vkmutePreview,
+    link: 'https://chrome.google.com/webstore/detail/vk-mute/mcnkfnjggkbenehgfelnnkklpkpjeibl',
+    descriptionSlug: 'vkmute_desc'
+  }),
 ]

src/index.css

@@ -1,9 +1,9 @@
 @import 'normalize.css';
 
 :root {
-  --clr-bg: rgb(7, 6, 9);
+  --clr-bg: hsl(260, 20%, 3%);
   --clr-bg-secondary: hsl(260, 20%, 16%);
-  --clr-bg-trietary: hsl(260, 20%, 10%);
+  --clr-bg-trietary: hsl(260, 20%, 11%);
   --clr-text: white;
 
   --gap-sm: 18px;

src/localization/en.json

@@ -1,10 +1,11 @@
 {
   "lang": "en",
   "my_name": "Anatoly Kopyl",
-  "tagline": "Professional fullstack developer with standards",
+  "tagline": "Fullstack developer with standards",
   "flexpatrol_desc": "A landing page for a gaming squad with info on their servers and their status.",
   "games_desc": "A page with thumbnails and links to my games.",
   "warframe_desc": "A service that monitors prices of items on warframe.market and calculates profitable gaps between them.",
   "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."
+  "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."
 }

src/localization/ru.json

@@ -1,6 +1,6 @@
 {
   "lang": "ru",
   "my_name": "Анатолий Копыл",
-  "tagline": "Профессиональный fullstack разработчик со стандартами",
+  "tagline": "Fullstack разработчик со стандартами",
   "flexpatrol_desc": "Лендинг для сквада геймеров, с информацией об их серверах и их статусе."
 }