added layouts components: Title; Descr

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",

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 = () => {
     <div className='ui-wrapper'>
       <Header onClick={handlePrintClick} />
       <div className='ui-content-wrapper'>
-        <section className='ui-section'>
+        <Wrapper>
           <div className='ui-container'>
-            <Avatar onClick={handleAvatarClick} />
-            <h1 className='ui-title-1'>Hello world!</h1>
+            <Row itemsCenter>
+              <Avatar onClick={handleAvatarClick} />
+              <div>
+                <Title>Nick Gerner</Title>
+                <Descr>
+                  Experienced Software & Machine Learning Engineer with a
+                  demonstrated history.
+                </Descr>
+              </div>
+            </Row>
+
+            <Row>
+              <Sidebar>
+                <Title size='3' isUppercase>
+                  About me:
+                </Title>
+                <Descr>Software Engineer</Descr>
+                <Descr isSecondary>Washington, DC | tocode.ru</Descr>
+
+                <Descr isPrimary style={{ marginTop: '2rem' }}>
+                  [email protected]
+                </Descr>
+                <Descr isPrimary>+1 588-6500</Descr>
+              </Sidebar>
+
+              <Content>
+                <Title size='3' isUppercase>
+                  Education:
+                </Title>
+                <Descr>Stanford University - BS Electrical Engineering</Descr>
+
+                <Title size='3' isUppercase style={{ marginTop: '3.6rem' }}>
+                  Work experience:
+                </Title>
+                <Descr>Solutions Architect, Stripe.</Descr>
+
+                <Title size='3' isUppercase style={{ marginTop: '3rem' }}>
+                  Skills:
+                </Title>
+              </Content>
+            </Row>
           </div>
-        </section>
+        </Wrapper>
       </div>
       <Footer />
     </div>

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';
 }

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;
+}

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 (
+    <p
+      className={classes}
+      contentEditable
+      suppressContentEditableWarning
+      spellCheck={false}
+      {...attrs}
+    >
+      {children}
+    </p>
+  )
+}
+
+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

src/components/UI/Descr/index.js

@@ -0,0 +1,3 @@
+import Descr from './Descr'
+
+export default Descr

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 (
+    <p
+      className={classes}
+      contentEditable
+      suppressContentEditableWarning
+      spellCheck={false}
+      {...attrs}
+    >
+      {children}
+    </p>
+  )
+}
+
+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

src/components/UI/Title/index.js

@@ -0,0 +1,3 @@
+import Title from './Title'
+
+export default Title

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'

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"