added contacts to home screen

src/assets/components/Nav/index.tsx

@@ -61,9 +61,6 @@ export default function Nav() {
           <li>
             <a href="/showcase">Showcase</a>
           </li>
-          <li>
-            <a href="/contact">Contact</a>
-          </li>
           <li>
             <ThemeChange />
           </li>

src/index.css

@@ -114,6 +114,13 @@ h6 {
   margin: 0;
 }
 
+a,
+a:visited,
+a:hover,
+a:active {
+  color: inherit;
+}
+
 div,
 section,
 main {

src/index.tsx

@@ -72,10 +72,6 @@ render(
         path="/wiki"
         component={WikiHome}
       />
-      <Route
-        path="/contact"
-        component={Contact}
-      />
       <Route
         path="/showcase"
         component={Showcase}

src/pages/Home/Home.module.css

@@ -4,6 +4,48 @@
   background: hsl(var(--info-hue) var(--secondary-sl) / 0.3);
   backdrop-filter: blur(6px) saturate(180%);
 }
+.home_wrap h1 {
+  padding-top: 0.318em;
+}
+
+.home_contacts {
+  display: flex;
+  justify-content: center;
+  gap: 1em;
+}
+
+.home_contact a {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
+  padding: 0.3em;
+  background-color: hsl(var(--dark-hue) 30 10);
+  & svg {
+    margin: 0;
+    padding: 0;
+  }
+}
+.home_contact:nth-child(1) {
+  & svg {
+    stroke: hsl(218 100 50);
+  }
+}
+.home_contact:nth-child(2) {
+  & svg {
+    stroke: currentColor;
+  }
+}
+.home_contact:nth-child(3) {
+  & svg {
+    stroke: hsl(var(--danger-hue) var(--secondary-sl));
+  }
+}
+.home_contact:nth-child(4) {
+  & svg {
+    stroke: hsl(var(--light-hue) var(--primary-sl));
+  }
+}
 
 .home_snippets {
   display: grid;
@@ -14,6 +56,9 @@
 }
 
 :global(.light) {
+  & .home_contact a {
+    background-color: hsl(var(--light-neutral));
+  }
   & .home_wrap {
     background: hsl(var(--light-hue) var(--secondary-sl) / 0.3);
   }

src/pages/Home/index.tsx

@@ -1,12 +1,58 @@
 import Experience from '../../assets/components/Experience';
 import Toolkit from '../../mdx/Blog/Toolkit.mdx';
-
+import { useSVG as DynamicSVG } from '../../assets/svg/SVGLoader';
 import styles from './Home.module.css';
 
 function Home() {
   return (
     <main class={styles.home_wrap}>
       <h1>Oleksandr Marnov</h1>
+      <div class={styles.home_contacts}>
+        <span class={styles.home_contact}>
+          <a
+            target="_blank"
+            href="https://linkedin.com/in/nautylus"
+          >
+            <DynamicSVG
+              iconName="linkedin"
+              brand
+            />
+          </a>
+        </span>
+        <span class={styles.home_contact}>
+          <a
+            target="_blank"
+            href="https://github.com/Xanazf"
+          >
+            <DynamicSVG
+              iconName="github"
+              brand
+            />
+          </a>
+        </span>
+        <span class={styles.home_contact}>
+          <a
+            target="_blank"
+            href="mailto:hotdamnsucka@gmail.com"
+          >
+            <DynamicSVG
+              iconName="gmail"
+              brand
+            />
+          </a>
+        </span>
+        <span class={styles.home_contact}>
+          <a
+            target="_blank"
+            href="https://xanazf.github.io/react-portfolio"
+          >
+            <DynamicSVG
+              iconName="react"
+              brand
+            />
+          </a>
+        </span>
+      </div>
       <div class={styles.home_experience_wrap}>
         <Experience />
       </div>