mirror of
https://github.com/MedzikUser/portfolio
synced 2024-08-15 03:26:01 +00:00
add icons, font and description
This commit is contained in:
parent
5c4ff6eae4
commit
4facbcfba9
18 changed files with 705 additions and 87 deletions
7
README.md
Normal file
7
README.md
Normal 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
13
components/avatar.tsx
Normal 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
13
components/container.tsx
Normal 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;
|
||||
`
|
7
components/description.tsx
Normal file
7
components/description.tsx
Normal 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
3
components/footer.tsx
Normal file
|
@ -0,0 +1,3 @@
|
|||
import styled from "styled-components"
|
||||
|
||||
export default styled.footer``
|
6
components/icons/discord.tsx
Normal file
6
components/icons/discord.tsx
Normal 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',
|
||||
)
|
6
components/icons/gitlab.tsx
Normal file
6
components/icons/gitlab.tsx
Normal 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',
|
||||
)
|
6
components/round-image.tsx
Normal file
6
components/round-image.tsx
Normal 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
5
components/title.tsx
Normal file
|
@ -0,0 +1,5 @@
|
|||
import styled from "styled-components"
|
||||
|
||||
export default styled.h1`
|
||||
margin-bottom: 0px;
|
||||
`
|
13
config.ts
Normal file
13
config.ts
Normal 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 }
|
|
@ -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",
|
||||
|
|
|
@ -4,6 +4,7 @@ const GlobalStyle = createGlobalStyle`
|
|||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: 'Open Sans'
|
||||
}
|
||||
`
|
||||
|
||||
|
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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'm Oskar</Title>
|
||||
|
||||
<Description>
|
||||
I'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>
|
||||
)
|
||||
}
|
||||
|
|
605
pnpm-lock.yaml
605
pnpm-lock.yaml
File diff suppressed because it is too large
Load diff
|
@ -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
1
public/favicon.svg
Symbolic link
|
@ -0,0 +1 @@
|
|||
avatar.svg
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"target": "esnext",
|
||||
"lib": ["dom", "dom.iterable", "esnext"],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
|
|
Loading…
Reference in a new issue