mirror of https://github.com/MedzikUser/portfolio
initial commit
This commit is contained in:
parent
1248acda50
commit
8a0e8aa393
|
|
@ -0,0 +1,18 @@
|
|||
{
|
||||
"extends": [
|
||||
"eslint:recommended",
|
||||
"next/core-web-vitals"
|
||||
],
|
||||
"rules": {
|
||||
"semi": [
|
||||
"warn",
|
||||
"never"
|
||||
],
|
||||
"no-unused-vars": [
|
||||
"warn"
|
||||
],
|
||||
"no-unused-expressions": [
|
||||
"warn"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
MIT License
|
||||
|
||||
Copyright (c) 2022 Medzik
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
31
README.md
31
README.md
|
|
@ -1,31 +0,0 @@
|
|||
# Example app with styled-components using babel
|
||||
|
||||
This example features how you use a different styling solution than [styled-jsx](https://github.com/vercel/styled-jsx) that also supports universal styles. That means we can serve the required styles for the first render within the HTML and then load the rest in the client. In this case we are using [styled-components](https://github.com/styled-components/styled-components).
|
||||
|
||||
For this purpose we are extending the `<Document />` and injecting the server side rendered styles into the `<head>`, and also adding the `babel-plugin-styled-components` (which is required for server side rendering). Additionally we set up a global [theme](https://www.styled-components.com/docs/advanced#theming) for styled-components using NextJS custom [`<App>`](https://nextjs.org/docs/advanced-features/custom-app) component.
|
||||
|
||||
## Preview
|
||||
|
||||
Preview the example live on [StackBlitz](http://stackblitz.com/):
|
||||
|
||||
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-styled-components-babel)
|
||||
|
||||
## Deploy your own
|
||||
|
||||
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
|
||||
|
||||
[](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-styled-components-babel&project-name=with-styled-components-babel&repository-name=with-styled-components-babel)
|
||||
|
||||
## How to use
|
||||
|
||||
Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to bootstrap the example:
|
||||
|
||||
```bash
|
||||
npx create-next-app --example with-styled-components-babel with-styled-components-babel-app
|
||||
# or
|
||||
yarn create next-app --example with-styled-components-babel with-styled-components-babel-app
|
||||
# or
|
||||
pnpm create next-app --example with-styled-components-babel with-styled-components-babel-app
|
||||
```
|
||||
|
||||
Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
|
||||
19
package.json
19
package.json
|
|
@ -1,22 +1,23 @@
|
|||
{
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next",
|
||||
"build": "next build",
|
||||
"start": "next start"
|
||||
"start": "next start",
|
||||
"lint": "next lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"next": "latest",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2",
|
||||
"react-is": "^17.0.2",
|
||||
"styled-components": "^5.2.3"
|
||||
"next": "12.1.6",
|
||||
"react": "17.0.2",
|
||||
"react-dom": "17.0.2",
|
||||
"react-is": "17.0.2",
|
||||
"styled-components": "5.3.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "17.0.24",
|
||||
"@types/react": "^17.0.2",
|
||||
"@types/react": "17.0.45",
|
||||
"@types/styled-components": "5.1.25",
|
||||
"babel-plugin-styled-components": "^1.12.0",
|
||||
"eslint": "8.17.0",
|
||||
"eslint-config-next": "12.1.6",
|
||||
"typescript": "4.6.3"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,19 +4,13 @@ const GlobalStyle = createGlobalStyle`
|
|||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
`
|
||||
|
||||
interface ThemeInterface {
|
||||
const theme = {
|
||||
colors: {
|
||||
primary: string
|
||||
}
|
||||
}
|
||||
|
||||
const theme: ThemeInterface = {
|
||||
colors: {
|
||||
primary: '#0070f3',
|
||||
primary: '#f2f0ed',
|
||||
background: '#080a0b'
|
||||
},
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,52 @@
|
|||
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;
|
||||
color: ${({ theme }) => theme.colors.primary};
|
||||
`
|
||||
|
||||
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%;
|
||||
`
|
||||
|
||||
export default function Home() {
|
||||
return <Title>My page</Title>
|
||||
return (
|
||||
<Container>
|
||||
<Head>
|
||||
<title>MedzikUser</title>
|
||||
</Head>
|
||||
|
||||
<Avatar>
|
||||
<RoundImage src={AvatarSvg} alt="my profile picture" />
|
||||
</Avatar>
|
||||
|
||||
<Title>Hello, I'm Oskar</Title>
|
||||
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
1614
pnpm-lock.yaml
1614
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,19 @@
|
|||
{
|
||||
"extends": [
|
||||
"config:base"
|
||||
],
|
||||
"prHourlyLimit": 0,
|
||||
"automergeType": "pr",
|
||||
"prCreation": "immediate",
|
||||
"packageRules": [
|
||||
{
|
||||
"matchUpdateTypes": [
|
||||
"minor",
|
||||
"patch",
|
||||
"pin",
|
||||
"digest"
|
||||
],
|
||||
"automerge": true
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,155 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
width="144.49777mm"
|
||||
height="144.49777mm"
|
||||
viewBox="0 0 511.99998 511.99998"
|
||||
id="svg2"
|
||||
version="1.1"
|
||||
inkscape:version="0.91 r13725"
|
||||
sodipodi:docname="Abstract Tux Avatar.svg">
|
||||
<defs
|
||||
id="defs4" />
|
||||
<sodipodi:namedview
|
||||
id="base"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:zoom="0.35355339"
|
||||
inkscape:cx="-734.14635"
|
||||
inkscape:cy="525.37704"
|
||||
inkscape:document-units="px"
|
||||
inkscape:current-layer="layer1"
|
||||
showgrid="false"
|
||||
inkscape:snap-bbox="true"
|
||||
inkscape:object-nodes="false"
|
||||
inkscape:snap-smooth-nodes="false"
|
||||
inkscape:snap-midpoints="false"
|
||||
inkscape:snap-intersection-paths="false"
|
||||
inkscape:snap-center="false"
|
||||
fit-margin-top="0"
|
||||
fit-margin-left="0"
|
||||
fit-margin-right="0"
|
||||
fit-margin-bottom="0"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1181"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="19"
|
||||
inkscape:window-maximized="0">
|
||||
<inkscape:grid
|
||||
type="xygrid"
|
||||
id="grid4152"
|
||||
originx="-132.38983"
|
||||
originy="-429.15077" />
|
||||
</sodipodi:namedview>
|
||||
<metadata
|
||||
id="metadata7">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title></dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
transform="translate(-132.38983,-111.21144)">
|
||||
<rect
|
||||
style="opacity:1;fill:#ff3e03;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
|
||||
id="rect4405"
|
||||
width="512"
|
||||
height="512"
|
||||
x="132.38983"
|
||||
y="111.21142" />
|
||||
<path
|
||||
style="opacity:1;fill:#212121;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:20;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
|
||||
d="M 146.53197,522.09515 389.7767,118.33718 634.43565,611.89771 Z"
|
||||
id="path4222"
|
||||
inkscape:connector-curvature="0"
|
||||
sodipodi:nodetypes="cccc" />
|
||||
<path
|
||||
style="opacity:1;fill:#212121;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:20;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
|
||||
d="M 304.97266 103.12305 L 347.17383 188.25781 A 57.154327 57.154327 0 0 0 354.8457 159.75391 A 57.154327 57.154327 0 0 0 304.97266 103.12305 z "
|
||||
transform="translate(132.38983,111.21144)"
|
||||
id="path4580" />
|
||||
<circle
|
||||
r="56.154327"
|
||||
cy="285.96564"
|
||||
cx="291.86502"
|
||||
id="circle4582"
|
||||
style="opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:20;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
|
||||
<path
|
||||
style="opacity:1;fill:#e3e3e3;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:20;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
|
||||
d="M 186.15625 125.35938 L 128.28516 221.41797 A 56.154327 56.154327 0 0 0 159.47461 230.9082 A 56.154327 56.154327 0 0 0 215.62891 174.75391 A 56.154327 56.154327 0 0 0 186.15625 125.35938 z "
|
||||
transform="translate(132.38983,111.21144)"
|
||||
id="path4229" />
|
||||
<path
|
||||
style="opacity:1;fill:#212121;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:20;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
|
||||
d="M 160.19336 153.99609 A 20.813709 20.813709 0 0 0 139.37891 174.81055 A 20.813709 20.813709 0 0 0 146.77734 190.72461 L 167.98242 155.52539 A 20.813709 20.813709 0 0 0 160.19336 153.99609 z "
|
||||
transform="translate(132.38983,111.21144)"
|
||||
id="path4592" />
|
||||
<path
|
||||
style="opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:20;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
|
||||
d="M 105.58594 320.02148 L 87.222656 424.33398 L 394.07617 480.8125 L 412.85938 374.11328 L 105.58594 320.02148 z "
|
||||
transform="translate(132.38983,111.21144)"
|
||||
id="rect4224" />
|
||||
<path
|
||||
style="opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:20;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
|
||||
d="M 167.98242 155.52539 L 146.77734 190.72461 A 20.813709 20.813709 0 0 0 160.19336 195.625 A 20.813709 20.813709 0 0 0 181.00586 174.81055 A 20.813709 20.813709 0 0 0 167.98242 155.52539 z "
|
||||
transform="translate(132.38983,111.21144)"
|
||||
id="path4241" />
|
||||
<path
|
||||
style="opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:20;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
|
||||
d="M 297.69141 102.59961 A 57.154327 57.154327 0 0 0 240.53711 159.75391 A 57.154327 57.154327 0 0 0 297.69141 216.9082 A 57.154327 57.154327 0 0 0 347.17383 188.25781 L 304.97266 103.12305 A 57.154327 57.154327 0 0 0 297.69141 102.59961 z "
|
||||
id="path4254"
|
||||
transform="translate(132.38983,111.21144)" />
|
||||
<path
|
||||
style="opacity:1;fill:#212121;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:20;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
|
||||
d="M 301.93555 122.38477 L 267.28711 177.89258 L 281.85156 177.89258 L 301.93555 145.71875 L 320.78906 177.89258 L 334.46094 177.89258 L 301.93555 122.38477 z "
|
||||
transform="translate(132.38983,111.21144)"
|
||||
id="path4249" />
|
||||
<path
|
||||
style="opacity:1;fill:#ffc020;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:20;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
|
||||
d="M 223.44531 235.52148 L 223.44531 340.76953 L 267.28711 348.48633 L 267.28711 235.52148 L 223.44531 235.52148 z "
|
||||
transform="translate(132.38983,111.21144)"
|
||||
id="rect4264" />
|
||||
<path
|
||||
style="opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:20;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
|
||||
d="M 370.60352 235.52148 L 392.33398 279.36133 L 418.25391 279.36133 L 418.25391 235.52148 L 370.60352 235.52148 z "
|
||||
transform="translate(132.38983,111.21144)"
|
||||
id="rect4266" />
|
||||
<rect
|
||||
transform="matrix(0,1,-1,0,0,0)"
|
||||
style="opacity:1;fill:#ff3e03;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:20;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
|
||||
id="rect4268"
|
||||
width="43.13353"
|
||||
height="47.376015"
|
||||
x="400.82635"
|
||||
y="-457.30527" />
|
||||
<path
|
||||
style="opacity:1;fill:#212121;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:20;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
|
||||
d="M 223.44531 340.76953 L 223.44531 376.23633 L 267.28711 376.23633 L 267.28711 348.48633 L 223.44531 340.76953 z "
|
||||
transform="translate(132.38983,111.21144)"
|
||||
id="path4277" />
|
||||
<path
|
||||
style="opacity:1;fill:#ffc020;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:20;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
|
||||
d="M 277.53906 235.52148 L 277.53906 279.36133 L 392.33398 279.36133 L 370.60352 235.52148 L 277.53906 235.52148 z "
|
||||
transform="translate(132.38983,111.21144)"
|
||||
id="rect4285" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 8.5 KiB |
Loading…
Reference in New Issue