Updated telegram and formatting

src/App.tsx

@@ -8,10 +8,10 @@ import ContactForm from './components/ContactForm'
 const App: Component = () => {
   return (
     <div class='App'>
-      <Controls/>
-      <Hero/>
-      <Projects/>
-      <ContactForm/>
+      <Controls />
+      <Hero />
+      <Projects />
+      <ContactForm />
     </div>
   );
 };

src/components/ContactForm.module.css

@@ -11,7 +11,7 @@
   align-items: center;
 }
 
-.form > * {
+.form>* {
   width: 100%;
   max-width: 600px;
   box-sizing: border-box;
@@ -28,4 +28,4 @@
     width: 100%;
     box-sizing: border-box;
   }
-}
+}

src/components/ContactForm.tsx

@@ -9,7 +9,7 @@ import styles from './ContactForm.module.css';
 export default () => {
   const [t] = useI18n();
   const [state, setters] = useStore() as Store;
-  const [observer] = createViewportObserver({threshold: 0.9});
+  const [observer] = createViewportObserver({ threshold: 0.9 });
   const chapterName = 'mail';
 
   return (
@@ -21,7 +21,7 @@ export default () => {
           } else if (state.visibleChapter() === chapterName) {
             setters.setScrolling(false)
           }
-        // Сраный костыль
+          // Сраный костыль
         } else if (state.visibleChapter() === chapterName) {
           setters.setVisibleChapter('projects');
         }
@@ -35,14 +35,14 @@ export default () => {
         method="post"
         autocomplete='off'
       >
-        <input 
+        <input
           type="text"
           name="name"
           placeholder={t('name')}
         ></input>
 
-        <textarea 
-          name="message" 
+        <textarea
+          name="message"
           placeholder={t('message')}
           rows='4'
         ></textarea>
@@ -55,7 +55,7 @@ export default () => {
 
         <input
           class={styles.submit}
-          type="submit" 
+          type="submit"
           value={t('submit')}
         ></input>
       </form>

src/components/Controls.module.css

@@ -1,3 +1,7 @@
+:root {
+  --blob-distance: 70px;
+}
+
 .Controls {
   position: fixed;
   background: var(--clr-bg-secondary);
@@ -12,12 +16,13 @@
 
 .chapters {
   position: relative;
-  height: calc(70px * 3);
+  height: calc(var(--blob-distance) * 3);
   width: 100%;
   margin-bottom: var(--gap-md);
 }
 
-.controlsWrapper, .gooWrapper {
+.controlsWrapper,
+.gooWrapper {
   position: absolute;
   top: 0;
   left: 0;
@@ -29,7 +34,8 @@
   filter: url('#goo');
 }
 
-.control, .blob {
+.control,
+.blob {
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
@@ -46,7 +52,7 @@
   box-sizing: border-box;
 }
 
-.control > img {
+.control>img {
   width: 100%;
 }
 
@@ -62,15 +68,16 @@
 .selected {
   width: 64px;
   height: 64px;
-  transform: translateX(-50%);
 }
 
-.control:nth-child(2), .blob:nth-child(2) {
-  top: 70px;
+.control:nth-child(2),
+.blob:nth-child(2) {
+  top: var(--blob-distance);
 }
 
-.control:nth-child(3), .blob:nth-child(3) {
-  top: calc(70px * 2);
+.control:nth-child(3),
+.blob:nth-child(3) {
+  top: calc(var(--blob-distance) * 2);
 }
 
 @media screen and (max-width: 1080px) {
@@ -85,29 +92,33 @@
   }
 
   .chapters {
-    width: calc(70px * 3);
+    width: calc(var(--blob-distance) * 3);
     height: 64px;
     margin: auto;
   }
 
-  .control, .blob {
+  .control,
+  .blob {
     top: 0;
     left: 0;
     transform: translateX(0);
   }
 
-  .control, .control > img {
+  .control,
+  .control>img {
     width: auto;
     height: 100%;
   }
 
-  .control:nth-child(2), .blob:nth-child(2) {
+  .control:nth-child(2),
+  .blob:nth-child(2) {
     top: unset;
-    left: 70px;
+    left: var(--blob-distance);
   }
-  
-  .control:nth-child(3), .blob:nth-child(3) {
+
+  .control:nth-child(3),
+  .blob:nth-child(3) {
     top: unset;
-    left: calc(70px * 2);
+    left: calc(var(--blob-distance) * 2);
   }
 }

src/components/Controls.tsx

@@ -9,7 +9,7 @@ import gridIcon from '../assets/icons/grid.svg'
 import mailIcon from '../assets/icons/mail.svg'
 
 export default () => {
-  const [state, {setVisibleChapter, setScrolling}] = useStore() as Store;
+  const [state, { setVisibleChapter, setScrolling }] = useStore() as Store;
   const [selected, setSelected] = createSignal('home');
   const [blobby, setBlobby] = createSignal(['home']);
   const chapters = [
@@ -42,7 +42,7 @@ export default () => {
         <div class={styles.chapters}>
           <div class={styles.gooWrapper}>
             <For each={chapters}>{(chapter) =>
-              <div 
+              <div
                 class={styles.blob}
                 classList={{
                   [styles.selected]: blobby().includes(chapter.name)
@@ -52,14 +52,14 @@ export default () => {
           </div>
           <div class={styles.controlsWrapper}>
             <For each={chapters}>{(chapter) =>
-              <div 
+              <div
                 onClick={() => {
                   setScrolling(true);
                   selectChapter(chapter.name)
                 }}
                 class={styles.control}
               >
-                <img 
+                <img
                   src={chapter.icon}
                 />
               </div>
@@ -71,13 +71,13 @@ export default () => {
       </div>
 
       <svg style="display: none;" xmlns="http://www.w3.org/2000/svg" version="1.1">
-      <defs>
-      <filter id="goo">
-        <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
-        <feColorMatrix in="blur" type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
-        <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
-      </filter>
-      </defs>
+        <defs>
+          <filter id="goo">
+            <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
+            <feColorMatrix in="blur" type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
+            <feComposite in="SourceGraphic" in2="goo" operator="atop" />
+          </filter>
+        </defs>
       </svg>
     </>
   )

src/components/Hero.module.css

@@ -14,13 +14,13 @@
 .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;
-  background-size: 200% auto;
+	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;
+	background-size: 200% auto;
 	word-break: break-word;
 }
 
@@ -41,9 +41,11 @@
 	0% {
 		background-position: 0% 50%;
 	}
+
 	50% {
 		background-position: 100% 50%;
 	}
+
 	100% {
 		background-position: 0% 50%;
 	}
@@ -53,4 +55,4 @@
 	.gradientText {
 		font-size: 72px;
 	}
-}
+}

src/components/Hero.tsx

@@ -9,13 +9,13 @@ import styles from './Hero.module.css';
 
 export default () => {
   const [t] = useI18n();
-  const [observer] = createViewportObserver({threshold: 0.8});
+  const [observer] = createViewportObserver({ threshold: 0.8 });
   const [state, setters] = useStore() as Store;
   const chapterName = 'home'
 
   return (
-    <header 
-      use:observer={(event) => { 
+    <header
+      use:observer={(event) => {
         if (event.isIntersecting) {
           if (!state.scrolling()) {
             setters.setVisibleChapter(chapterName);
@@ -36,7 +36,7 @@ export default () => {
 
       <Links />
 
-      <div 
+      <div
         class={styles.blur}
         ref={(element) => {
           setTimeout(() => element.style.opacity = '0')

src/components/LanguageSelector.module.css

@@ -8,7 +8,7 @@
   margin: auto;
 }
 
-.LanguageSelector > img {
+.LanguageSelector>img {
   margin-right: 6px;
 }
 
@@ -19,4 +19,4 @@
     top: 50%;
     transform: translateY(-50%);
   }
-}
+}

src/components/LanguageSelector.tsx

@@ -35,7 +35,7 @@ export default () => {
       }}
       class={styles.LanguageSelector}
     >
-      <img src={globeIcon}/>
+      <img src={globeIcon} />
       {t('lang')}
     </div>
   )

src/components/Links.module.css

@@ -3,7 +3,7 @@
   bottom: var(--gap-lg);
 }
 
-.Links > a {
+.Links>a {
   margin: 0 var(--gap-sm);
 }
 
@@ -11,4 +11,4 @@
   .Links {
     bottom: calc(64px + var(--gap-lg));
   }
-}
+}

src/components/Links.tsx

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

src/components/Projects/Project.module.css

@@ -36,5 +36,5 @@
 @media screen and (max-width: 1464px) {
   .Project {
     width: calc(50% - var(--gap-lg));
-  }  
+  }
 }

src/components/Projects/Project.tsx

@@ -3,7 +3,7 @@ import { useI18n } from "@solid-primitives/i18n";
 import styles from './Project.module.css';
 import type { Project } from './projectList';
 
-export default (props: {project: Project}) => {
+export default (props: { project: Project }) => {
   const [t] = useI18n();
 
   return (

src/components/Projects/Projects.module.css

@@ -16,4 +16,4 @@
     box-sizing: border-box;
     flex-direction: column;
   }
-}
+}

src/components/Projects/Projects.tsx

@@ -11,7 +11,7 @@ import type { Project as ProjectType } from './projectList';
 
 export default () => {
   const [state, setters] = useStore() as Store;
-  const [observer] = createViewportObserver({threshold: 0.1});
+  const [observer] = createViewportObserver({ threshold: 0.1 });
   const chapterName = 'projects'
 
   return (
@@ -33,7 +33,7 @@ export default () => {
           project={project}
         />
       }</For>
-      
+
     </div>
   )
 };

src/index.css

@@ -15,8 +15,8 @@
   --radius-md: 12px;
 
   --ff-default: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-  'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-  sans-serif;
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
   --font-sm: normal normal 300 16px var(--ff-default);
   --font-md: normal normal 400 18px var(--ff-default);
 }
@@ -34,7 +34,12 @@ body {
   background: var(--clr-bg);
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   margin: 0;
 }
 
@@ -49,7 +54,8 @@ code {
     monospace;
 }
 
-input, textarea {
+input,
+textarea {
   background: var(--clr-bg-secondary);
   border: none;
   padding: var(--gap-sm);
@@ -62,10 +68,12 @@ textarea {
   resize: none;
 }
 
-textarea:focus, input:focus{
+textarea:focus,
+input:focus {
   outline: none;
 }
 
-input::placeholder, textarea::placeholder {
+input::placeholder,
+textarea::placeholder {
   color: var(--clr-text-secondary);
-}
+}

src/index.tsx

@@ -11,10 +11,10 @@ import localization from './localization';
 render(
   () => (
     <StoreProvider>
-    <I18nContext.Provider value={localization}>
-      <App />
-    </I18nContext.Provider>
+      <I18nContext.Provider value={localization}>
+        <App />
+      </I18nContext.Provider>
     </StoreProvider>
-  ), 
+  ),
   document.getElementById('root') as HTMLElement
 );