portfolio/pages/index.tsx

62 lines
2.0 KiB
TypeScript

import Head from 'next/head'
import { GitHub, Google, Reddit } from '@mui/icons-material'
import { IconButton } from '@mui/material'
import config, { links } from '../config'
import AvatarSvg from '../public/avatar.svg'
import Discord from '../components/icons/discord'
import GitLab from '../components/icons/gitlab'
import RoundImage from '../components/round-image'
import Footer from '../components/footer'
import Avatar from '../components/avatar'
import Description from '../components/description'
import Title from '../components/title'
import Container from '../components/container'
export default function Home() {
return (
<Container>
<Head>
<title>{config.title}</title>
</Head>
<Avatar>
<RoundImage src={AvatarSvg} alt="my profile picture" />
</Avatar>
<Title>Hello, I&apos;m Oskar</Title>
<Description>
I&apos;m a self-taught programmer. I use Arch Linux and I like open source software.
</Description>
<Footer>
{/* GitHub */}
<IconButton color="inherit" href={links.github} target="_blank">
<GitHub />
</IconButton>
{/* GitLab */}
<IconButton color="inherit" href={links.gitlab} target="_blank">
<GitLab />
</IconButton>
{/* Google Developers */}
<IconButton color="inherit" href={links.googleDevelopers} target="_blank">
<Google />
</IconButton>
{/* Discord */}
<IconButton color="inherit" href={links.discord} target="_blank">
<Discord />
</IconButton>
{/* Reddit */}
<IconButton color="inherit" href={links.reddit} target="_blank">
<Reddit />
</IconButton>
</Footer>
</Container>
)
}