diff --git a/.env b/.env new file mode 100644 index 0000000..a7c8b37 --- /dev/null +++ b/.env @@ -0,0 +1,2 @@ +NEXT_PUBLIC_FIRST_NAME=Ivan +NEXT_PUBLIC_LAST_NAME=Li diff --git a/components/layouts/global-layout.module.css b/components/layouts/global-layout.module.css new file mode 100644 index 0000000..3cdd499 --- /dev/null +++ b/components/layouts/global-layout.module.css @@ -0,0 +1,31 @@ +.sidebar { + @apply bg-green-400 text-white; + @apply overflow-hidden flex flex-col; + @apply text-center; + height: 100vh; + padding-top: 10vh; +} + +.avatar { + @apply md:w-36 md:h-36 rounded-full; + @apply w-16 h-16; + @apply mx-auto md:my-8 flex-none; +} + +.name { + @apply md:text-3xl md:tracking-wide font-mono; + @apply md:my-8 my-4 flex-none select-all; +} +.nav { + @apply my-auto; +} +.navItem { + @apply leading-8 md:text-lg cursor-pointer my-1; + &:hover { + text-shadow: 0 0px 5px #abbf00; + } +} +.bio { + @apply text-sm text-opacity-70 text-white; + @apply my-4; +} diff --git a/components/layouts/global-sidebar.tsx b/components/layouts/global-sidebar.tsx new file mode 100644 index 0000000..6d2f475 --- /dev/null +++ b/components/layouts/global-sidebar.tsx @@ -0,0 +1,41 @@ +import React, { FC } from "react"; +import styles from "./global-layout.module.css"; +import Image from "next/image"; +import Link from "next/link"; +import classnames from 'classnames'; + +const fullName = `${process.env.NEXT_PUBLIC_FIRST_NAME} ${process.env.NEXT_PUBLIC_LAST_NAME}`; + +interface Props { + className: string; +} + +export const GlobalSidebar: FC = ({className}) => { + + return ( + + ); +}; diff --git a/package-lock.json b/package-lock.json index f215e62..1df6491 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,8 +8,11 @@ "version": "0.1.0", "dependencies": { "@apollo/client": "^3.3.16", + "classnames": "^2.2.6", "graphql": "^15.5.0", "next": "10.2.0", + "postcss-import": "^14.0.1", + "postcss-nested": "^5.0.5", "react": "17.0.2", "react-dom": "17.0.2" }, @@ -20,7 +23,10 @@ "@graphql-codegen/typescript-operations": "1.17.16", "@graphql-codegen/typescript-react-apollo": "2.2.4", "@types/autoprefixer": "^10.2.0", + "@types/classnames": "^2.3.1", "@types/graphql": "^14.5.0", + "@types/postcss-import": "^12.0.0", + "@types/postcss-nested": "^4.2.3", "@types/react": "^17.0.4", "@types/tailwindcss": "^2.0.2", "autoprefixer": "^10.2.5", @@ -2339,6 +2345,16 @@ "autoprefixer": "*" } }, + "node_modules/@types/classnames": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/@types/classnames/-/classnames-2.3.1.tgz", + "integrity": "sha512-zeOWb0JGBoVmlQoznvqXbE0tEC/HONsnoUNH19Hc96NFsTAwTXbTqb8FMYkru1F/iqp7a18Ws3nWJvtA1sHD1A==", + "deprecated": "This is a stub types definition. classnames provides its own type definitions, so you do not need this installed.", + "dev": true, + "dependencies": { + "classnames": "*" + } + }, "node_modules/@types/graphql": { "version": "14.5.0", "resolved": "https://registry.npmjs.org/@types/graphql/-/graphql-14.5.0.tgz", @@ -2390,6 +2406,64 @@ "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==", "dev": true }, + "node_modules/@types/postcss-import": { + "version": "12.0.0", + "resolved": "https://registry.npmjs.org/@types/postcss-import/-/postcss-import-12.0.0.tgz", + "integrity": "sha512-AFgOR4zOOp/izuY7n5aEr/0SJ5e8fNYVxMkx49IA3Jf/Bs6Hhd6staMoSkdiTr9fi0z3Q1Ts5SqpFI5vv4k7BQ==", + "dev": true, + "dependencies": { + "postcss": "^7.0.27" + } + }, + "node_modules/@types/postcss-import/node_modules/postcss": { + "version": "7.0.35", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz", + "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==", + "dev": true, + "dependencies": { + "chalk": "^2.4.2", + "source-map": "^0.6.1", + "supports-color": "^6.1.0" + }, + "engines": { + "node": ">=6.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + } + }, + "node_modules/@types/postcss-import/node_modules/source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/@types/postcss-import/node_modules/supports-color": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz", + "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==", + "dev": true, + "dependencies": { + "has-flag": "^3.0.0" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@types/postcss-nested": { + "version": "4.2.3", + "resolved": "https://registry.npmjs.org/@types/postcss-nested/-/postcss-nested-4.2.3.tgz", + "integrity": "sha512-ZhABeFlQIL0Z3rXjWkQ9CIFiQH8383J97N7FB5B4GrfCSdniZ58fri3lxgTlU4kp6PDH3a/LWRDWHk9Mvord6A==", + "deprecated": "This is a stub types definition. postcss-nested provides its own type definitions, so you do not need this installed.", + "dev": true, + "dependencies": { + "postcss-nested": "*" + } + }, "node_modules/@types/prop-types": { "version": "15.7.3", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz", @@ -3640,7 +3714,6 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz", "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==", - "dev": true, "bin": { "cssesc": "bin/cssesc" }, @@ -5228,7 +5301,6 @@ "version": "2.3.0", "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.3.0.tgz", "integrity": "sha512-xSphU2KG9867tsYdLD4RWQ1VqdFl4HTO9Thf3I/3dLEfr0dbPTWKsuCKrgqMljg4nPE+Gq0VCnzT3gr0CyBmsw==", - "dev": true, "dependencies": { "has": "^1.0.3" }, @@ -7230,8 +7302,7 @@ "node_modules/path-parse": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz", - "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==", - "dev": true + "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==" }, "node_modules/path-root": { "version": "0.1.1", @@ -7289,6 +7360,14 @@ "url": "https://github.com/sponsors/jonschlinkert" } }, + "node_modules/pify": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", + "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/pkg-dir": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz", @@ -7374,6 +7453,22 @@ "node": ">=0.10.0" } }, + "node_modules/postcss-import": { + "version": "14.0.1", + "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-14.0.1.tgz", + "integrity": "sha512-Xn2+z++vWObbEPhiiKO1a78JiyhqipyrXHBb3AHpv0ks7Cdg+GxQQJ24ODNMTanldf7197gSP3axppO9yaG0lA==", + "dependencies": { + "postcss-value-parser": "^4.0.0", + "read-cache": "^1.0.0", + "resolve": "^1.1.7" + }, + "engines": { + "node": ">=10.0.0" + }, + "peerDependencies": { + "postcss": "^8.0.0" + } + }, "node_modules/postcss-js": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-3.0.3.tgz", @@ -7395,7 +7490,6 @@ "version": "5.0.5", "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-5.0.5.tgz", "integrity": "sha512-GSRXYz5bccobpTzLQZXOnSOfKl6TwVr5CyAQJUPub4nuRJSOECK5AqurxVgmtxP48p0Kc/ndY/YyS1yqldX0Ew==", - "dev": true, "dependencies": { "postcss-selector-parser": "^6.0.4" }, @@ -7414,7 +7508,6 @@ "version": "6.0.5", "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.5.tgz", "integrity": "sha512-aFYPoYmXbZ1V6HZaSvat08M97A8HqO6Pjz+PiNpw/DhuRrC72XWAdp3hL6wusDCN31sSmcZyMGa2hZEuX+Xfhg==", - "dev": true, "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" @@ -7426,8 +7519,7 @@ "node_modules/postcss-value-parser": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz", - "integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==", - "dev": true + "integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==" }, "node_modules/postcss/node_modules/source-map": { "version": "0.6.1", @@ -7684,6 +7776,14 @@ "node": ">=0.10.0" } }, + "node_modules/read-cache": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", + "integrity": "sha1-5mTvMRYRZsl1HNvo28+GtftY93Q=", + "dependencies": { + "pify": "^2.3.0" + } + }, "node_modules/readable-stream": { "version": "3.6.0", "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz", @@ -7984,7 +8084,6 @@ "version": "1.20.0", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz", "integrity": "sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==", - "dev": true, "dependencies": { "is-core-module": "^2.2.0", "path-parse": "^1.0.6" @@ -11307,6 +11406,15 @@ "autoprefixer": "*" } }, + "@types/classnames": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/@types/classnames/-/classnames-2.3.1.tgz", + "integrity": "sha512-zeOWb0JGBoVmlQoznvqXbE0tEC/HONsnoUNH19Hc96NFsTAwTXbTqb8FMYkru1F/iqp7a18Ws3nWJvtA1sHD1A==", + "dev": true, + "requires": { + "classnames": "*" + } + }, "@types/graphql": { "version": "14.5.0", "resolved": "https://registry.npmjs.org/@types/graphql/-/graphql-14.5.0.tgz", @@ -11357,6 +11465,52 @@ "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==", "dev": true }, + "@types/postcss-import": { + "version": "12.0.0", + "resolved": "https://registry.npmjs.org/@types/postcss-import/-/postcss-import-12.0.0.tgz", + "integrity": "sha512-AFgOR4zOOp/izuY7n5aEr/0SJ5e8fNYVxMkx49IA3Jf/Bs6Hhd6staMoSkdiTr9fi0z3Q1Ts5SqpFI5vv4k7BQ==", + "dev": true, + "requires": { + "postcss": "^7.0.27" + }, + "dependencies": { + "postcss": { + "version": "7.0.35", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz", + "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==", + "dev": true, + "requires": { + "chalk": "^2.4.2", + "source-map": "^0.6.1", + "supports-color": "^6.1.0" + } + }, + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true + }, + "supports-color": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz", + "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==", + "dev": true, + "requires": { + "has-flag": "^3.0.0" + } + } + } + }, + "@types/postcss-nested": { + "version": "4.2.3", + "resolved": "https://registry.npmjs.org/@types/postcss-nested/-/postcss-nested-4.2.3.tgz", + "integrity": "sha512-ZhABeFlQIL0Z3rXjWkQ9CIFiQH8383J97N7FB5B4GrfCSdniZ58fri3lxgTlU4kp6PDH3a/LWRDWHk9Mvord6A==", + "dev": true, + "requires": { + "postcss-nested": "*" + } + }, "@types/prop-types": { "version": "15.7.3", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz", @@ -12420,8 +12574,7 @@ "cssesc": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz", - "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==", - "dev": true + "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==" }, "cssnano-preset-simple": { "version": "2.0.0", @@ -13663,7 +13816,6 @@ "version": "2.3.0", "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.3.0.tgz", "integrity": "sha512-xSphU2KG9867tsYdLD4RWQ1VqdFl4HTO9Thf3I/3dLEfr0dbPTWKsuCKrgqMljg4nPE+Gq0VCnzT3gr0CyBmsw==", - "dev": true, "requires": { "has": "^1.0.3" } @@ -15254,8 +15406,7 @@ "path-parse": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz", - "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==", - "dev": true + "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==" }, "path-root": { "version": "0.1.1", @@ -15295,6 +15446,11 @@ "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.3.tgz", "integrity": "sha512-KpELjfwcCDUb9PeigTs2mBJzXUPzAuP2oPcA989He8Rte0+YUAjw1JVedDhuTKPkHjSYzMN3npC9luThGYEKdg==" }, + "pify": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", + "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=" + }, "pkg-dir": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz", @@ -15370,6 +15526,16 @@ } } }, + "postcss-import": { + "version": "14.0.1", + "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-14.0.1.tgz", + "integrity": "sha512-Xn2+z++vWObbEPhiiKO1a78JiyhqipyrXHBb3AHpv0ks7Cdg+GxQQJ24ODNMTanldf7197gSP3axppO9yaG0lA==", + "requires": { + "postcss-value-parser": "^4.0.0", + "read-cache": "^1.0.0", + "resolve": "^1.1.7" + } + }, "postcss-js": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-3.0.3.tgz", @@ -15384,7 +15550,6 @@ "version": "5.0.5", "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-5.0.5.tgz", "integrity": "sha512-GSRXYz5bccobpTzLQZXOnSOfKl6TwVr5CyAQJUPub4nuRJSOECK5AqurxVgmtxP48p0Kc/ndY/YyS1yqldX0Ew==", - "dev": true, "requires": { "postcss-selector-parser": "^6.0.4" } @@ -15393,7 +15558,6 @@ "version": "6.0.5", "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.5.tgz", "integrity": "sha512-aFYPoYmXbZ1V6HZaSvat08M97A8HqO6Pjz+PiNpw/DhuRrC72XWAdp3hL6wusDCN31sSmcZyMGa2hZEuX+Xfhg==", - "dev": true, "requires": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" @@ -15402,8 +15566,7 @@ "postcss-value-parser": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz", - "integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==", - "dev": true + "integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==" }, "prepend-http": { "version": "2.0.0", @@ -15600,6 +15763,14 @@ "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz", "integrity": "sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg==" }, + "read-cache": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", + "integrity": "sha1-5mTvMRYRZsl1HNvo28+GtftY93Q=", + "requires": { + "pify": "^2.3.0" + } + }, "readable-stream": { "version": "3.6.0", "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz", @@ -15847,7 +16018,6 @@ "version": "1.20.0", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz", "integrity": "sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==", - "dev": true, "requires": { "is-core-module": "^2.2.0", "path-parse": "^1.0.6" diff --git a/package.json b/package.json index 04f0e75..c9ce114 100644 --- a/package.json +++ b/package.json @@ -11,8 +11,11 @@ }, "dependencies": { "@apollo/client": "^3.3.16", + "classnames": "^2.2.6", "graphql": "^15.5.0", "next": "10.2.0", + "postcss-import": "^14.0.1", + "postcss-nested": "^5.0.5", "react": "17.0.2", "react-dom": "17.0.2" }, @@ -23,7 +26,10 @@ "@graphql-codegen/typescript-operations": "1.17.16", "@graphql-codegen/typescript-react-apollo": "2.2.4", "@types/autoprefixer": "^10.2.0", + "@types/classnames": "^2.3.1", "@types/graphql": "^14.5.0", + "@types/postcss-import": "^12.0.0", + "@types/postcss-nested": "^4.2.3", "@types/react": "^17.0.4", "@types/tailwindcss": "^2.0.2", "autoprefixer": "^10.2.5", diff --git a/pages/_app.module.css b/pages/_app.module.css new file mode 100644 index 0000000..923095b --- /dev/null +++ b/pages/_app.module.css @@ -0,0 +1,6 @@ +.page { + @apply flex; +} +.sidebar { + @apply md:w-64 w-32; +} \ No newline at end of file diff --git a/pages/_app.tsx b/pages/_app.tsx index f5138b3..f2be730 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,8 +1,16 @@ import '../styles/globals.css' import "tailwindcss/tailwind.css"; +import React from 'react'; +import { GlobalSidebar } from '../components/layouts/global-sidebar'; +import styles from './_app.module.css'; function MyApp({ Component, pageProps }) { - return + return ( +
+ + +
+ ); } export default MyApp diff --git a/postcss.config.js b/postcss.config.js index 33ad091..94ff338 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -1,6 +1,8 @@ module.exports = { plugins: { + 'postcss-import': {}, tailwindcss: {}, + 'postcss-nested': {}, autoprefixer: {}, }, } diff --git a/public/images/avatar.png b/public/images/avatar.png new file mode 100644 index 0000000..89308bd Binary files /dev/null and b/public/images/avatar.png differ