diff --git a/components/footer.tsx b/components/footer.tsx
index 0c66eb6..e453909 100644
--- a/components/footer.tsx
+++ b/components/footer.tsx
@@ -1,6 +1,8 @@
import { Box, Button, ButtonGroup, Typography } from "@mui/material";
import * as React from "react";
import GitHubIcon from "@mui/icons-material/GitHub";
+import SendIcon from "@mui/icons-material/Send";
+import InfoIcon from "@mui/icons-material/Info";
export default function Footer() {
return (
@@ -13,7 +15,14 @@ export default function Footer() {
>
Source
- ・
+ }
+ >
+ Hire Me
+
+
);
diff --git a/src/app/page.tsx b/src/app/page.tsx
index c4299e7..e3e3417 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -4,10 +4,49 @@ import TwitterIcon from "@mui/icons-material/Twitter";
import InstagramIcon from "@mui/icons-material/Instagram";
import GitHubIcon from "@mui/icons-material/GitHub";
import LinkedInIcon from "@mui/icons-material/LinkedIn";
-import { Typography, Box, Stack, Avatar } from "@mui/material";
+import { Typography, Box, Stack, Avatar, Button } from "@mui/material";
import Footer from "../../components/footer";
export default function App() {
+ const links = [
+ {
+ name: "Instagram",
+ Icon: InstagramIcon,
+ href: "https://www.instagram.com/itsukikigoshi",
+ },
+ {
+ name: "X(formally Twitter)",
+ Icon: TwitterIcon,
+ href: "https://www.twitter.com/itsukikigoshi",
+ },
+ {
+ name: "GitHub",
+ Icon: GitHubIcon,
+ href: "https://www.github.com/itsukikigoshi",
+ },
+ {
+ name: "LinkedIn",
+ Icon: LinkedInIcon,
+ href: "https://www.linkedin.com/in/itsukikigoshi",
+ },
+ ];
+
+ const linkButtons = links.map(
+ (
+ link // This is a map function. It is used to create a list of elements.
+ ) => (
+
+
+
+ )
+ );
+
return (
Itsuki KIGOSHI
{`ICU '27 (2004)`}
- {/* Those icons are repeatedly used in a similar form. Consider using a component insted.*/}
-
-
-
-
-
-
-
-
-
-
-
-
+ {linkButtons}
-
- {/*Button for job offer*/}
- {/*
-
- */}
);