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 - ・ + + ); 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*/} - {/* - - */} );