feat: Add styles to footer part

Author: tetsutohara

src/assets/linkedin.svg

@@ -1,16 +1,28 @@
 import React from "react";
+import LinkedInIcon from "../assets/linkedin.svg?react";
 
 const Footer: React.FC = () => {
+	const ICON_SIZE = 30;
   return (
     <footer>
-      <nav>
-        <ul>
-          <li><a href="#about">About</a></li>
-          <li><a href="#skills">Skills</a></li>
-          <li><a href="#projects">Projects</a></li>
-          <li><a href="#contact">Contact</a></li>
-        </ul>
-      </nav>
+
+      <div className="left-components">
+				<a href="https://www.linkedin.com/in/tetsuto-hara-7822b5257/" target="_blank" id="header-title">
+					<LinkedInIcon width={ICON_SIZE} height={ICON_SIZE}/>
+				</a>
+      </div>
+
+      <div className="right-conponents">
+        <nav>
+          <ul>
+            <li><a href="#about">About</a></li>
+            <li><a href="#skills">Skills</a></li>
+            <li><a href="#projects">Projects</a></li>
+            <li><a href="#contact">Contact</a></li>
+          </ul>
+        </nav>
+      </div>
+
     </footer>
   )
 }

src/components/Footer.tsx

@@ -27,7 +27,6 @@ header {
 header nav ul {
   /* positioning */
   display: flex;
-  justify-content: center;
   gap: 50px;
   list-style: none;
   margin-right: 150px;
@@ -212,4 +211,25 @@ form {
   height: 40px;
   align-self: center;
   margin-top: 10px;
+}
+
+/* Footer part */
+footer {
+  display: flex;
+  justify-content: space-between;
+}
+
+footer .left-components {
+  display: flex;
+  margin-left: 50px;
+}
+
+footer nav ul {
+  /* positioning */
+  display: flex;
+  gap: 50px;
+  list-style: none;
+  margin-right: 150px;
+  /* fontsize */
+  font-size: large;
 }