add icons, font and description

This commit is contained in:
MedzikUser 2022-06-15 14:07:13 +02:00
parent 5c4ff6eae4
commit 4facbcfba9
No known key found for this signature in database
GPG Key ID: A5FAC1E185C112DB
18 changed files with 705 additions and 87 deletions

7
README.md Normal file
View File

@ -0,0 +1,7 @@
# Medzik's Website
[Medzik's website](https://medzik.xyz)
![desktop](https://cdn.medzik.xyz/xiearrd.png)
![mobile](https://cdn.medzik.xyz/a9dWHCK.jpg)

13
components/avatar.tsx Normal file
View File

@ -0,0 +1,13 @@
import styled from "styled-components"
export default styled.div`
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
width: 3.5cm;
margin-left: auto;
margin-right: auto;
padding-bottom: 15px;
`

13
components/container.tsx Normal file
View File

@ -0,0 +1,13 @@
import styled from "styled-components"
export default styled.div`
background-color: ${({ theme }) => theme.colors.background};
color: ${({ theme }) => theme.colors.primary};
height: 100%;
min-height: 100vh;
display: flex;
flex-direction: column;
box-sizing: border-box;
justify-content: center;
align-items: center;
`

View File

@ -0,0 +1,7 @@
import styled from "styled-components"
export default styled.p`
margin-left: 10px;
margin-right: 10px;
text-align: center;
`

3
components/footer.tsx Normal file
View File

@ -0,0 +1,3 @@
import styled from "styled-components"
export default styled.footer``

View File

@ -0,0 +1,6 @@
import { createSvgIcon } from "@mui/material"
export default createSvgIcon(
<path d="M19.229,6.012c-0.903-0.73-2.015-1.246-2.872-1.572c-0.307-0.117-0.653-0.076-0.923,0.111C15.162,4.737,15,5.045,15,5.374 C15,5.72,14.72,6,14.374,6c-1.573,0-3.176,0-4.749,0C9.28,6,9,5.72,9,5.375c0-0.329-0.162-0.638-0.433-0.824 C8.296,4.364,7.95,4.323,7.643,4.441c-0.86,0.329-1.978,0.85-2.894,1.59C3.831,6.882,2,11.861,2,16.165 c0,0.076,0.019,0.15,0.057,0.216c1.265,2.233,4.714,2.817,5.499,2.842c0.005,0.001,0.009,0.001,0.014,0.001 c0.139,0,0.286-0.056,0.351-0.18l0.783-1.485c-0.646-0.164-1.313-0.359-2.04-0.617c-0.521-0.185-0.792-0.757-0.607-1.277 s0.758-0.791,1.277-0.607c3.526,1.254,5.624,1.253,9.345-0.005c0.525-0.175,1.092,0.104,1.268,0.627 c0.177,0.523-0.104,1.091-0.627,1.268c-0.728,0.246-1.392,0.434-2.035,0.594l0.793,1.503c0.065,0.124,0.213,0.18,0.351,0.18 c0.005,0,0.009,0,0.014-0.001c0.786-0.025,4.235-0.61,5.499-2.843C21.981,16.315,22,16.241,22,16.164 C22,11.861,20.169,6.882,19.229,6.012z M9.04,13.988c-0.829,0-1.5-0.893-1.5-1.996c0-1.102,0.671-1.996,1.5-1.996 c0.832-0.11,1.482,0.893,1.5,1.996C10.54,13.095,9.869,13.988,9.04,13.988z M14.996,14.012c-0.829,0-1.5-0.895-1.5-2s0.671-2,1.5-2 s1.5,0.895,1.5,2S15.825,14.012,14.996,14.012z" />,
'Discord',
)

View File

@ -0,0 +1,6 @@
import { createSvgIcon } from "@mui/material"
export default createSvgIcon(
<svg viewBox="0 0 50 50"><path d="M 38.011719 4 C 37.574219 3.996094 37.183594 4.273438 37.046875 4.691406 L 32.074219 20 L 17.925781 20 L 12.953125 4.691406 C 12.820313 4.289063 12.449219 4.011719 12.023438 4 C 11.597656 3.992188 11.214844 4.25 11.0625 4.648438 L 5.070313 20.640625 C 5.066406 20.640625 5.066406 20.644531 5.0625 20.648438 L 2.0625 28.648438 C 1.90625 29.070313 2.046875 29.542969 2.414063 29.808594 L 24.40625 45.800781 L 24.410156 45.808594 C 24.414063 45.808594 24.414063 45.808594 24.414063 45.8125 C 24.425781 45.820313 24.441406 45.828125 24.453125 45.835938 C 24.46875 45.84375 24.480469 45.855469 24.496094 45.863281 C 24.5 45.863281 24.5 45.867188 24.503906 45.867188 C 24.503906 45.867188 24.507813 45.871094 24.511719 45.871094 C 24.515625 45.875 24.519531 45.878906 24.527344 45.878906 C 24.53125 45.882813 24.539063 45.886719 24.542969 45.890625 C 24.5625 45.898438 24.585938 45.910156 24.609375 45.917969 C 24.609375 45.917969 24.609375 45.917969 24.609375 45.921875 C 24.632813 45.929688 24.65625 45.9375 24.675781 45.945313 C 24.679688 45.945313 24.679688 45.945313 24.683594 45.949219 C 24.699219 45.953125 24.714844 45.957031 24.734375 45.964844 C 24.742188 45.964844 24.75 45.96875 24.761719 45.96875 C 24.761719 45.972656 24.761719 45.972656 24.761719 45.96875 C 24.78125 45.976563 24.800781 45.980469 24.820313 45.984375 C 24.847656 45.988281 24.871094 45.992188 24.898438 45.996094 C 24.9375 45.996094 24.980469 46 25.019531 46 C 25.058594 45.996094 25.09375 45.996094 25.128906 45.988281 C 25.144531 45.988281 25.15625 45.988281 25.171875 45.984375 C 25.171875 45.984375 25.175781 45.984375 25.179688 45.984375 C 25.1875 45.980469 25.191406 45.980469 25.199219 45.980469 C 25.203125 45.980469 25.207031 45.976563 25.214844 45.976563 C 25.222656 45.972656 25.234375 45.972656 25.242188 45.96875 C 25.257813 45.964844 25.269531 45.960938 25.28125 45.957031 C 25.289063 45.957031 25.292969 45.957031 25.296875 45.953125 C 25.300781 45.953125 25.304688 45.953125 25.308594 45.953125 C 25.324219 45.945313 25.34375 45.9375 25.359375 45.933594 C 25.378906 45.925781 25.394531 45.917969 25.410156 45.910156 C 25.414063 45.910156 25.414063 45.910156 25.417969 45.90625 C 25.421875 45.90625 25.425781 45.90625 25.429688 45.902344 C 25.4375 45.898438 25.445313 45.894531 25.453125 45.890625 C 25.476563 45.878906 25.496094 45.867188 25.515625 45.855469 C 25.523438 45.851563 25.527344 45.847656 25.53125 45.84375 C 25.535156 45.84375 25.539063 45.839844 25.542969 45.839844 C 25.558594 45.828125 25.574219 45.820313 25.589844 45.808594 L 25.597656 45.796875 L 47.589844 29.808594 C 47.953125 29.542969 48.09375 29.070313 47.9375 28.648438 L 44.945313 20.675781 C 44.941406 20.667969 44.9375 20.65625 44.9375 20.648438 L 38.9375 4.648438 C 38.789063 4.261719 38.425781 4.003906 38.011719 4 Z M 11.933594 8.027344 L 15.824219 20 L 7.445313 20 Z M 38.066406 8.027344 L 42.558594 20 L 34.175781 20 Z M 8.066406 22 L 16.472656 22 L 22.328125 40.015625 Z M 18.578125 22 L 31.421875 22 L 25 41.765625 Z M 33.527344 22 L 41.933594 22 L 27.671875 40.015625 Z M 6.3125 23.007813 L 19.6875 39.902344 L 4.203125 28.640625 Z M 43.6875 23.007813 L 45.796875 28.640625 L 30.3125 39.902344 Z" /></svg>,
'GitLab',
)

View File

@ -0,0 +1,6 @@
import Image from "next/image"
import styled from "styled-components"
export default styled(Image)`
border-radius: 50%;
`

5
components/title.tsx Normal file
View File

@ -0,0 +1,5 @@
import styled from "styled-components"
export default styled.h1`
margin-bottom: 0px;
`

13
config.ts Normal file
View File

@ -0,0 +1,13 @@
const links = {
github: "https://github.com/MedzikUser",
gitlab: "https://gitlab.com/Medzik",
discord: "https://dsc.bio/medzik",
reddit: "https://www.reddit.com/user/MedzikUser"
}
const config = {
links,
}
export default config
export { links }

View File

@ -6,6 +6,11 @@
"lint": "next lint"
},
"dependencies": {
"@babel/core": "7.18.5",
"@emotion/react": "11.9.3",
"@emotion/styled": "11.9.3",
"@mui/icons-material": "5.8.4",
"@mui/material": "5.8.4",
"next": "12.1.6",
"react": "18.2.0",
"react-dom": "18.2.0",

View File

@ -4,6 +4,7 @@ const GlobalStyle = createGlobalStyle`
body {
margin: 0;
padding: 0;
font-family: 'Open Sans'
}
`

View File

@ -1,4 +1,4 @@
import Document, { DocumentContext, DocumentInitialProps } from 'next/document'
import Document, { DocumentContext, DocumentInitialProps, Head, Html, Main, NextScript } from 'next/document'
import { ServerStyleSheet } from 'styled-components'
export default class MyDocument extends Document {
@ -29,4 +29,26 @@ export default class MyDocument extends Document {
sheet.seal()
}
}
render() {
return (
<Html>
<Head>
{/* Add the favicon */}
<link rel="shortcut icon" href="/favicon.svg" />
{/* Add `Open Sans` font */}
<link
href="https://fonts.googleapis.com/css2?family=Open+Sans&display=optional"
rel="stylesheet"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}

View File

@ -1,38 +1,16 @@
import { GitHub, Reddit } from '@mui/icons-material'
import { IconButton } from '@mui/material'
import Head from 'next/head'
import Image from 'next/image'
import styled from 'styled-components'
import AvatarSvg from '../static/avatar.svg'
const Container = styled.div`
background-color: ${({ theme }) => theme.colors.background};
color: ${({ theme }) => theme.colors.primary};
height: 100%;
min-height: 100vh;
display: flex;
flex-direction: column;
box-sizing: border-box;
justify-content: center;
align-items: center;
`
const Title = styled.h1`
font-size: 50px;
`
const Avatar = styled.div`
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
width: 3.5cm;
margin-left: auto;
margin-right: auto;
`
const RoundImage = styled(Image)`
border-radius: 50%;
`
import { 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 (
@ -47,6 +25,32 @@ export default function Home() {
<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>
{/* Discord */}
<IconButton color="inherit" href={links.discord} target="_blank">
<Discord />
</IconButton>
{/* Reddit */}
<IconButton color="inherit" href={links.reddit} target="_blank">
<Reddit />
</IconButton>
</Footer>
</Container>
)
}

File diff suppressed because it is too large Load Diff

View File

@ -14,8 +14,7 @@
viewBox="0 0 511.99998 511.99998"
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="Abstract Tux Avatar.svg">
inkscape:version="0.91 r13725">
<defs
id="defs4" />
<sodipodi:namedview

Before

Width:  |  Height:  |  Size: 8.5 KiB

After

Width:  |  Height:  |  Size: 8.5 KiB

1
public/favicon.svg Symbolic link
View File

@ -0,0 +1 @@
avatar.svg

View File

@ -1,6 +1,6 @@
{
"compilerOptions": {
"target": "es5",
"target": "esnext",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,