social links

Author: simicoder

.prettierrc

@@ -1,5 +1,5 @@
-{
-  "singleQuote": true,
-  "trailingComma": "all",
-  "printWidth": 100
+{
+  "singleQuote": true,
+  "trailingComma": "all",
+  "printWidth": 100
 }

components/Layout/Layout.tsx

@@ -2,6 +2,8 @@ import { memo } from 'react';
 import styles from '../../styles/Home.module.css';
 import { Navbar } from '../Navbar/Navbar';
 import { Header } from '../Header/Header';
+import Image from 'next/image';
+import Link from 'next/link';
 
 type LayoutProps = {
   readonly children: React.ReactNode;
@@ -19,6 +21,26 @@ export const Layout = memo<LayoutProps>(({ children }) => {
       <footer className={styles.footer}>
         <p>[email protected]</p>
         <p>SimiCoder</p>
+
+        <div className={styles.flex}>
+          <div className={styles.link}>
+            <Link passHref href="https://www.linkedin.com/in/szymon-popielarz-992848199/">
+              <Image src={`/images/linkedinIcon.svg`} alt="linkedin logo" width="30" height="30" />
+            </Link>
+          </div>
+
+          <div className={styles.link}>
+            <Link passHref href="https://github.com/simicoder">
+              <Image src={`/images/github.svg`} alt="github logo" width="30" height="30" />
+            </Link>
+          </div>
+
+          <div className={styles.link}>
+            <Link passHref href="https://twitter.com/simicoder">
+              <Image src={`/images/twitterIcon.svg`} alt="twitter logo" width="30" height="30" />
+            </Link>
+          </div>
+        </div>
       </footer>
     </div>
   );

components/Projects/Project/Project.tsx

@@ -38,7 +38,7 @@ export const Project = ({ name, href, ghHref }: ProjectProps) => {
 
           <div className={styles.ghImageContainer}>
             <Link passHref href={ghHref}>
-              <Image src={`/images/github.png`} alt={name + ' logo'} width="40" height="40" />
+              <Image src={`/images/github.svg`} alt={name + ' logo'} width="40" height="40" />
             </Link>
 
             <Link passHref href={href}>

public/images/github.png

@@ -6,6 +6,12 @@
   align-items: center;
 }
 
+.flex {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 .main {
   display: flex;
   flex-direction: column;
@@ -15,12 +21,13 @@
 
 .footer {
   width: 100%;
-  height: 100px;
+  height: 150px;
   border-top: 1px solid #4b4b4b;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  padding-bottom: 20px;
 }
 
 .footer p {
@@ -36,3 +43,7 @@
     flex-direction: column;
   }
 }
+
+.link {
+  margin: 5px;
+}