diff --git a/package.json b/package.json index 61d2644..a03dc61 100644 --- a/package.json +++ b/package.json @@ -32,6 +32,7 @@ "styled-components": "^5.3.3" }, "dependencies": { + "classnames": "^2.3.1", "prop-types": "^15.8.1", "react": "^17.0.2", "react-dom": "^17.0.2", diff --git a/src/App.js b/src/App.js index 8362110..227e183 100644 --- a/src/App.js +++ b/src/App.js @@ -1,6 +1,35 @@ import React from 'react' +import styled from 'styled-components' -import { Header, Footer, Avatar } from './components' +// components: +import { Header, Footer, Avatar, Title, Descr } from './components' + +const Wrapper = styled.div` + max-width: 1200px; + margin: 2rem auto; + padding: 3rem 2rem; + background-color: white; + border: 1px solid #ececec; + box-shadow: 5px 7px 10px 4px #ececec; + border-radius: 14px; +` + +const Row = styled.section` + display: flex; + flex-wrap: wrap; + align-items: ${(props) => (props.itemsCenter ? 'center' : 'start')}; + margin: 2rem 0; +` + +const Sidebar = styled.div` + flex: 1; + margin-right: 1rem; +` + +const Content = styled.div` + flex: 3; + margin-left: 1rem; +` const App = () => { const handleAvatarClick = () => console.log('avatar clicked') @@ -10,12 +39,51 @@ const App = () => {
-
+
- -

Hello world!

+ + +
+ Nick Gerner + + Experienced Software & Machine Learning Engineer with a + demonstrated history. + +
+ + + + + + About me: + + Software Engineer + Washington, DC | tocode.ru + + + nick@gmail.com + + +1 588-6500 + + + + + Education: + + Stanford University - BS Electrical Engineering + + + Work experience: + + Solutions Architect, Stripe. + + + Skills: + + +
-
+
diff --git a/src/assets/scss/main.scss b/src/assets/scss/main.scss index c4130b1..74fb7bb 100644 --- a/src/assets/scss/main.scss +++ b/src/assets/scss/main.scss @@ -1,6 +1,9 @@ +// helpers: +@import './text-helper'; + .ui-body, .ui-html { - font-family: "Inconsolata", -apple-system, BlinkMacSystemFont, "Segoe UI", - Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", - "Segoe UI Symbol"; + font-family: 'Inconsolata', -apple-system, BlinkMacSystemFont, 'Segoe UI', + Helvetica, 'Apple Color Emoji', Arial, sans-serif, 'Segoe UI Emoji', + 'Segoe UI Symbol'; } diff --git a/src/assets/scss/text-helper.scss b/src/assets/scss/text-helper.scss new file mode 100644 index 0000000..7ef1f4b --- /dev/null +++ b/src/assets/scss/text-helper.scss @@ -0,0 +1,16 @@ +.ui-title-1, +.ui-title-2, +.ui-title-3, +.ui-title-4, +.ui-title-5, +.ui-text { + padding: 0 0.4rem; + transition: 0.4s all ease; + &:focus { + background-color: #f3f3f3; + } +} + +.isUppercase { + text-transform: uppercase; +} diff --git a/src/components/UI/Descr/Descr.jsx b/src/components/UI/Descr/Descr.jsx new file mode 100644 index 0000000..46a9593 --- /dev/null +++ b/src/components/UI/Descr/Descr.jsx @@ -0,0 +1,37 @@ +import React from 'react' +import propTypes from 'prop-types' +import classNames from 'classnames' + +const Descr = ({ isPrimary, isSecondary, className, children, ...attrs }) => { + const classes = classNames('ui-text', className, { + isPrimary, + isSecondary, + }) + + return ( +

+ {children} +

+ ) +} + +Descr.propTypes = { + isPrimary: propTypes.bool, + isSecondary: propTypes.bool, + className: propTypes.string, + children: propTypes.node.isRequired, +} + +Descr.defaultProps = { + isPrimary: false, + isSecondary: false, + className: '', +} + +export default Descr diff --git a/src/components/UI/Descr/index.js b/src/components/UI/Descr/index.js new file mode 100644 index 0000000..62a0d31 --- /dev/null +++ b/src/components/UI/Descr/index.js @@ -0,0 +1,3 @@ +import Descr from './Descr' + +export default Descr diff --git a/src/components/UI/Title/Title.jsx b/src/components/UI/Title/Title.jsx new file mode 100644 index 0000000..33f9ce8 --- /dev/null +++ b/src/components/UI/Title/Title.jsx @@ -0,0 +1,34 @@ +import React from 'react' +import classNames from 'classnames' +import propTypes from 'prop-types' + +const Title = ({ size, isUppercase, className, children, ...attrs }) => { + const classes = classNames(`ui-title-${size}`, className, { isUppercase }) + + return ( +

+ {children} +

+ ) +} + +Title.propTypes = { + size: propTypes.oneOf(['1', '2', '3']), + isUppercase: propTypes.bool, + className: propTypes.string, + children: propTypes.node.isRequired, +} + +Title.defaultProps = { + size: '1', + isUppercase: false, + className: '', +} + +export default Title diff --git a/src/components/UI/Title/index.js b/src/components/UI/Title/index.js new file mode 100644 index 0000000..41712f2 --- /dev/null +++ b/src/components/UI/Title/index.js @@ -0,0 +1,3 @@ +import Title from './Title' + +export default Title diff --git a/src/components/index.js b/src/components/index.js index 07e166a..91c1b56 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -4,3 +4,7 @@ export { default as Footer } from './Footer' // UI components: export { default as Avatar } from './UI/Avatar' + +// layouts: +export { default as Title } from './UI/Title' +export { default as Descr } from './UI/Descr' diff --git a/yarn.lock b/yarn.lock index 866bc66..85751d0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2942,6 +2942,11 @@ cjs-module-lexer@^1.0.0: resolved "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz" integrity sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA== +classnames@^2.3.1: + version "2.3.1" + resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e" + integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA== + clean-css@^5.2.2: version "5.2.4" resolved "https://registry.npmjs.org/clean-css/-/clean-css-5.2.4.tgz"