diff --git a/README.md b/README.md index 87b6d36..3f8efd1 100644 --- a/README.md +++ b/README.md @@ -3,7 +3,8 @@ ![Deploy](https://github.com/rjNemo/devbook_ts/workflows/Deploy/badge.svg?branch=master) Social App for connecting with developers & tech enthusiasts. -🕸 [Check it out](https://devbook.onrender.com/) + +🕸 [Check it out!](https://devbook.onrender.com/) ## Tests @@ -19,6 +20,14 @@ yarn cypress and edit your E2E test cases in `cypress/integration/` folder. +### Unit + +Open test runner with: + +```sh +yarn test +``` + ## Deployment We use Github Actions to check push and pull requests. diff --git a/cypress/integration/landing.spec.js b/cypress/integration/landing.spec.js new file mode 100644 index 0000000..884a2b4 --- /dev/null +++ b/cypress/integration/landing.spec.js @@ -0,0 +1,6 @@ +describe('Landing page', () => { + it('contains app name', () => { + cy.visit('/'); + cy.get('h1').contains('DevBook'); + }); +}); diff --git a/cypress/integration/smoke.spec.js b/cypress/integration/smoke.spec.js deleted file mode 100644 index ebf3e7d..0000000 --- a/cypress/integration/smoke.spec.js +++ /dev/null @@ -1,6 +0,0 @@ -describe('smoke', () => { - it('sees learn', () => { - cy.visit('/'); - cy.get('a').contains('Learn'); - }); -}); diff --git a/package.json b/package.json index 52c8b59..7ece26f 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,12 @@ "version": "0.1.0", "private": true, "dependencies": { + "@fortawesome/fontawesome-free": "^5.13.0", + "@fortawesome/fontawesome-svg-core": "^1.2.28", + "@fortawesome/free-brands-svg-icons": "^5.13.0", + "@fortawesome/free-regular-svg-icons": "^5.13.0", + "@fortawesome/free-solid-svg-icons": "^5.13.0", + "@fortawesome/react-fontawesome": "^0.1.9", "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.3.2", "@testing-library/user-event": "^7.1.2", @@ -38,4 +44,4 @@ "last 1 safari version" ] } -} \ No newline at end of file +} diff --git a/public/index.html b/public/index.html index aa069f2..112696b 100644 --- a/public/index.html +++ b/public/index.html @@ -4,40 +4,18 @@ - + - - - React App + DevBook
- diff --git a/public/manifest.json b/public/manifest.json index 080d6c7..82dcda3 100644 --- a/public/manifest.json +++ b/public/manifest.json @@ -1,6 +1,6 @@ { - "short_name": "React App", - "name": "Create React App Sample", + "short_name": "DevBook", + "name": "DevBook | Social App for devs", "icons": [ { "src": "favicon.ico", @@ -20,6 +20,6 @@ ], "start_url": ".", "display": "standalone", - "theme_color": "#000000", - "background_color": "#ffffff" -} + "theme_color": "#17a2b8", + "background_color": "#000000" +} \ No newline at end of file diff --git a/src/App.css b/src/App.css deleted file mode 100644 index 74b5e05..0000000 --- a/src/App.css +++ /dev/null @@ -1,38 +0,0 @@ -.App { - text-align: center; -} - -.App-logo { - height: 40vmin; - pointer-events: none; -} - -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } -} - -.App-header { - background-color: #282c34; - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; -} - -.App-link { - color: #61dafb; -} - -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} diff --git a/src/App.test.tsx b/src/App.test.tsx index 4db7ebc..754e657 100644 --- a/src/App.test.tsx +++ b/src/App.test.tsx @@ -1,9 +1,9 @@ import React from 'react'; -import { render } from '@testing-library/react'; +import {render} from '@testing-library/react'; import App from './App'; test('renders learn react link', () => { - const { getByText } = render(); - const linkElement = getByText(/learn react/i); - expect(linkElement).toBeInTheDocument(); + const {getAllByText} = render(); + const title = getAllByText('DevBook'); + expect(title.length).toEqual(2); }); diff --git a/src/App.tsx b/src/App.tsx index a53698a..701cf9e 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,26 +1,48 @@ import React from 'react'; -import logo from './logo.svg'; -import './App.css'; - -function App() { +import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'; +import {faCode} from '@fortawesome/free-solid-svg-icons'; +const App = () => { return ( -
-
- logo -

- Edit src/App.tsx and save to reload. -

- - Learn React - -
-
+ <> + +
+
+
+

DevBook

+

+ Create developer profiles, portfolio, share and get help from + other devs +

+ +
+
+
+ ); -} +}; export default App; diff --git a/src/index.css b/src/index.css deleted file mode 100644 index ec2585e..0000000 --- a/src/index.css +++ /dev/null @@ -1,13 +0,0 @@ -body { - margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', - monospace; -} diff --git a/src/index.tsx b/src/index.tsx index f5185c1..2907924 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,6 +1,6 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import './index.css'; +import './static/css/style.min.css'; import App from './App'; import * as serviceWorker from './serviceWorker'; @@ -8,10 +8,7 @@ ReactDOM.render( , - document.getElementById('root') + document.getElementById('root'), ); -// If you want your app to work offline and load faster, you can change -// unregister() to register() below. Note this comes with some pitfalls. -// Learn more about service workers: https://bit.ly/CRA-PWA serviceWorker.unregister(); diff --git a/src/logo.svg b/src/logo.svg deleted file mode 100644 index 6b60c10..0000000 --- a/src/logo.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/src/static/css/style.min.css b/src/static/css/style.min.css new file mode 100644 index 0000000..306ad5b --- /dev/null +++ b/src/static/css/style.min.css @@ -0,0 +1,542 @@ +.m-1 { + margin: 1rem; +} +.my-1 { + margin: 1rem 0; +} +.p-1 { + padding: 1rem; +} +.py-1 { + padding: 1rem 0; +} +.m-2 { + margin: 2rem; +} +.my-2 { + margin: 2rem 0; +} +.p-2 { + padding: 2rem; +} +.py-2 { + padding: 2rem 0; +} +.m-3 { + margin: 3rem; +} +.my-3 { + margin: 3rem 0; +} +.p-3 { + padding: 3rem; +} +.py-3 { + padding: 3rem 0; +} +.m-4 { + margin: 4rem; +} +.my-4 { + margin: 4rem 0; +} +.p-4 { + padding: 4rem; +} +.py-4 { + padding: 4rem 0; +} +.m-5 { + margin: 5rem; +} +.my-5 { + margin: 5rem 0; +} +.p-5 { + padding: 5rem; +} +.py-5 { + padding: 5rem 0; +} +.m-1 { + margin: 1rem; +} +.my-1 { + margin: 1rem 0; +} +.p-1 { + padding: 1rem; +} +.py-1 { + padding: 1rem 0; +} +.m-2 { + margin: 2rem; +} +.my-2 { + margin: 2rem 0; +} +.p-2 { + padding: 2rem; +} +.py-2 { + padding: 2rem 0; +} +.m-3 { + margin: 3rem; +} +.my-3 { + margin: 3rem 0; +} +.p-3 { + padding: 3rem; +} +.py-3 { + padding: 3rem 0; +} +.m-4 { + margin: 4rem; +} +.my-4 { + margin: 4rem 0; +} +.p-4 { + padding: 4rem; +} +.py-4 { + padding: 4rem 0; +} +.m-5 { + margin: 5rem; +} +.my-5 { + margin: 5rem 0; +} +.p-5 { + padding: 5rem; +} +.py-5 { + padding: 5rem 0; +} +.bg-primary { + background-color: #17a2b8; + color: #fff; +} +.bg-light { + background-color: #f4f4f4; + color: #333; + border: #ccc 1px solid; +} +.bg-dark { + background-color: #343a40; + color: #fff; +} +.bg-danger { + background-color: #dc3545; + color: #fff; +} +.bg-success { + background-color: #28a745; + color: #fff; +} +.bg-white { + background-color: #fff; + color: #333; + border: #ccc 1px solid; +} +.dark-overlay { + height: 100%; + width: 100%; + position: absolute; + top: 0; + left: 0; + background-color: rgba(0, 0, 0, 0.7); +} +.x-large { + font-size: 4rem; + line-height: 1.2; + margin-bottom: 1rem; +} +.large { + font-size: 3rem; + line-height: 1.2; + margin-bottom: 1rem; +} +.lead { + font-size: 1.5rem; + margin-bottom: 1rem; +} +.text-primary { + color: #17a2b8; +} +.btn { + display: inline-block; + background-color: #f4f4f4; + color: #333; + padding: 0.4rem 1.3rem; + border: none; + cursor: pointer; + font-size: 1rem; + margin-right: 0.5rem; + outline: none; + transition: all 0.3s ease-in; +} +.btn.btn-primary { + background-color: #17a2b8; + color: #fff; +} +.btn.btn-primary:hover { + background: #1ab6cf; +} +.btn.btn-dark { + background-color: #343a40; + color: #fff; +} +.btn.btn-dark:hover { + background: #3f474e; +} +.btn.btn-light { + background-color: #f4f4f4; + color: #333; +} +.btn.btn-light:hover { + background: #626d78; + color: white; +} +.btn.btn-danger { + background-color: #dc3545; + color: #fff; +} +.btn.btn-danger:hover { + background: #e04b59; +} +.btn.btn-success { + background-color: #28a745; + color: #fff; +} +.btn.btn-success:hover { + background: #2dbc4e; +} +.container { + max-width: 1100px; + margin: auto; + overflow: hidden; + padding: 0 2rem; + margin-top: 5rem; + margin-bottom: 3rem; +} +.alert { + padding: 0.8rem; + margin: 1rem; + opacity: 0.9; + background-color: #f4f4f4; + color: #333; +} +.alert.alert-primary { + background-color: #17a2b8; + color: #fff; +} +.alert.alert-dark { + background-color: #343a40; + color: #fff; +} +.alert.alert-success { + background-color: #28a745; + color: #fff; +} +.alert.alert-danger { + background-color: #dc3545; + color: #fff; +} +.round-img { + border-radius: 50%; +} +.line { + height: 1px; + background: #ccc; + margin: 1.5rem 0; +} +.badge { + font-size: 0.8rem; + padding: 0.1rem; + text-align: center; + margin: 0.3rem; + background: #f4f4f4; + color: #333; + border-radius: 1rem; +} +.badge.badge-primary { + background-color: #17a2b8; + color: #fff; +} +.badge.badge-dark { + background-color: #343a40; + color: #fff; +} +.badge.badge-success { + background-color: #28a745; + color: #fff; +} +.badge.badge-danger { + background-color: #dc3545; + color: #fff; +} +.table th, +.table td { + padding: 1rem; + text-align: left; +} +.table th { + background: #f4f4f4; +} +.form-group { + margin: 1.2rem 0; +} +.form-text { + display: block; + margin-top: 0.3rem; + color: #888; +} +.form input[type='text'], +.form input[type='email'], +.form input[type='password'], +.form input[type='date'], +.form select, +.form textarea { + display: block; + width: 100%; + padding: 0.4rem; + font-size: 1.2rem; + border: 1px solid #ccc; + border-radius: 0.3rem; +} +.form input[type='submit'] { + font: inherit; +} +.form .social-input { + display: flex; +} +.form .social-input i { + padding: 0.5rem; + width: 4rem; +} +.form .social-input i.fa-twitter { + color: #38a1f3; +} +.form .social-input i.fa-facebook { + color: #3b5998; +} +.form .social-input i.fa-instagram { + color: #3f729b; +} +.form .social-input i.fa-youtube { + color: #c4302b; +} +.form .social-input i.fa-linkedin { + color: #0077b5; +} +@media (max-width: 700px) { + .hide-sm { + display: none; + } + .container { + margin-top: 8rem; + } + .x-large { + font-size: 3rem; + } + .large { + font-size: 2rem; + } + .lead { + font-size: 1rem; + } + .navbar { + flex-direction: column; + text-align: center; + } + .navbar ul { + text-align: center; + justify-content: center; + } + .navbar h1 { + margin-bottom: 1rem; + } + .dash-buttons a { + display: block; + width: 100%; + margin-bottom: 0.2rem; + } + .profile { + grid-template-columns: 1fr; + text-align: center; + } + .profile ul { + display: none; + } + .profile-grid { + grid-template-areas: 'top' 'about' 'exp' 'edu' 'github'; + } + .profile-about .skills { + flex-direction: column; + } + .post { + grid-template-columns: 1fr; + } + .post a, + .post button { + padding: 0.3rem 0.4rem; + } +} +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} +body { + font-family: 'Raleway', sans-serif; + font-size: 1rem; + line-height: 1.6; + background-color: white; + color: #333; +} +a { + text-decoration: none; + color: #17a2b8; +} +ul { + list-style: none; +} +img { + width: 100%; +} +.navbar { + display: flex; + align-items: center; + justify-content: space-between; + padding: 0.7rem 2rem; + position: fixed; + z-index: 1; + width: 100%; + top: 0; + border-bottom: solid 1px #17a2b8; + opacity: 0.9; +} +.navbar ul { + display: flex; +} +.navbar a { + color: white; + padding: 0.45rem; + margin: 0 0.25rem; +} +.navbar a:hover { + color: #17a2b8; +} +.landing { + position: relative; + background: url('../img/showcase.jpg') no-repeat center center/cover; + height: 100vh; +} +.landing-inner { + color: white; + height: 100%; + display: flex; + flex-direction: column; + width: 80%; + margin: auto; + align-items: center; + justify-content: center; + text-align: center; +} +.profile { + display: grid; + grid-template-columns: 2fr 4fr 2fr; + grid-gap: 2rem; + padding: 1rem; + line-height: 1.8; + margin-bottom: 1rem; + align-items: center; +} +.profile-grid { + display: grid; + grid-template-areas: 'top top' 'about about' 'exp edu' 'github github'; + grid-gap: 1rem; +} +.profile-grid .profile-top { + grid-area: top; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; +} +.profile-grid .profile-top img { + width: 250px; +} +.profile-grid .profile-top .icons a { + color: white; + margin: 0 0.3rem; +} +.profile-grid .profile-top .icons a:hover { + color: #343a40; +} +.profile-grid .profile-about { + grid-area: about; + text-align: center; +} +.profile-grid .profile-about .skills { + display: flex; + justify-content: center; + align-items: center; + text-align: center; +} +.profile-grid .profile-exp { + grid-area: exp; +} +.profile-grid .profile-edu { + grid-area: edu; +} +.profile-grid .profile-exp > div, +.profile-grid .profile-edu > div { + margin-bottom: 1rem; + padding-bottom: 1rem; + border-bottom: #ccc 1px dotted; +} +.profile-grid .profile-exp > div:last-child, +.profile-grid .profile-edu > div:last-child { + border: none; +} +.profile-grid .profile-exp > div p, +.profile-grid .profile-edu > div p { + margin: 0.5rem 0; +} +.profile-grid .profile-github { + grid-area: github; +} +.profile-grid .profile-github .repo { + display: flex; +} +.profile-grid .profile-github .repo > div:first-child { + flex: 7; + flex-basis: 70%; +} +.profile-grid .profile-github .repo > div:last-child { + flex: 3; + flex-basis: 30%; +} +.post-form-header { + padding: 0.5rem; +} +.post { + display: grid; + grid-template-columns: 1fr 4fr; + grid-gap: 2rem; + align-items: center; +} +.post > div:first-child { + text-align: center; +} +.post img { + width: 150px; +} diff --git a/src/static/img/showcase.jpg b/src/static/img/showcase.jpg new file mode 100644 index 0000000..7317d9b Binary files /dev/null and b/src/static/img/showcase.jpg differ diff --git a/src/static/scss/_config.scss b/src/static/scss/_config.scss new file mode 100644 index 0000000..9625dc4 --- /dev/null +++ b/src/static/scss/_config.scss @@ -0,0 +1,39 @@ +$primary-color: #17a2b8; +$dark-color: #343a40; +$light-color: #f4f4f4; +$danger-color: #dc3545; +$success-color: #28a745; +$dark: #333; +$max-width: 1100px; + +// set text color based on background +@function set-text-color($color) { + @if (lightness($color) >60) { + @return $dark; + } @else { + @return white; + } +} +// set background and text color +@mixin set-background($color) { + background-color: $color; + color: set-text-color($color); +} + +// margin and padding +$spaceamounts: (1, 2, 3, 4, 5); + +@each $space in $spaceamounts { + .m-#{$space} { + margin: #{$space}rem; + } + .my-#{$space} { + margin: #{$space}rem 0; + } + .p-#{$space} { + padding: #{$space}rem; + } + .py-#{$space} { + padding: #{$space}rem 0; + } +} diff --git a/src/static/scss/_form.scss b/src/static/scss/_form.scss new file mode 100644 index 0000000..2989979 --- /dev/null +++ b/src/static/scss/_form.scss @@ -0,0 +1,52 @@ +.form { + &-group { + margin: 1.2rem 0; + } + &-text { + display: block; + margin-top: 0.3rem; + color: #888; + } + input[type="text"], + input[type="email"], + input[type="password"], + input[type="date"], + select, + textarea { + display: block; + width: 100%; + padding: 0.4rem; + font-size: 1.2rem; + border: 1px solid #ccc; + border-radius: 0.3rem; + } + + input[type="submit"] { + font: inherit; + } + + .social-input { + display: flex; + + i { + padding: 0.5rem; + width: 4rem; + + &.fa-twitter { + color: #38a1f3; + } + &.fa-facebook { + color: #3b5998; + } + &.fa-instagram { + color: #3f729b; + } + &.fa-youtube { + color: #c4302b; + } + &.fa-linkedin { + color: #0077b5; + } + } + } +} diff --git a/src/static/scss/_mobile.scss b/src/static/scss/_mobile.scss new file mode 100644 index 0000000..df99cb7 --- /dev/null +++ b/src/static/scss/_mobile.scss @@ -0,0 +1,76 @@ +@media (max-width: 700px) { + .hide-sm { + display: none; + } + + .container { + margin-top: 8rem; + } + + // Text Styles + .x-large { + font-size: 3rem; + } + + .large { + font-size: 2rem; + } + + .lead { + font-size: 1rem; + } + + // Navbar + .navbar { + flex-direction: column; + text-align: center; + + ul { + text-align: center; + justify-content: center; + } + + h1 { + margin-bottom: 1rem; + } + } + + .dash-buttons a { + display: block; + width: 100%; + margin-bottom: 0.2rem; + } + + // Profiles + .profile { + grid-template-columns: 1fr; + text-align: center; + + ul { + display: none; + } + } + + .profile-grid { + grid-template-areas: + "top" + "about" + "exp" + "edu" + "github"; + } + + .profile-about { + .skills { + flex-direction: column; + } + } + + .post { + grid-template-columns: 1fr; + a, + button { + padding: 0.3rem 0.4rem; + } + } +} diff --git a/src/static/scss/_utils.scss b/src/static/scss/_utils.scss new file mode 100644 index 0000000..f8efe6d --- /dev/null +++ b/src/static/scss/_utils.scss @@ -0,0 +1,183 @@ +@import "_config"; + +// Backgrounds + +.bg { + &-primary { + @include set-background($primary-color); + } + &-light { + @include set-background($light-color); + border: #ccc 1px solid; + } + &-dark { + @include set-background($dark-color); + } + &-danger { + @include set-background($danger-color); + } + &-success { + @include set-background($success-color); + } + &-white { + @include set-background(white); + border: #ccc 1px solid; + } +} + +// dark overlay +.dark-overlay { + height: 100%; + width: 100%; + position: absolute; + top: 0; + left: 0; + background-color: rgba(0, 0, 0, 0.7); +} + +// Text-styles +.x-large { + font-size: 4rem; + line-height: 1.2; + margin-bottom: 1rem; +} + +.large { + font-size: 3rem; + line-height: 1.2; + margin-bottom: 1rem; +} + +.lead { + font-size: 1.5rem; + margin-bottom: 1rem; +} + +.text-primary { + color: $primary-color; +} + +// Buttons +.btn { + display: inline-block; + background-color: $light-color; + color: $dark; + padding: 0.4rem 1.3rem; + border: none; + cursor: pointer; + font-size: 1rem; + margin-right: 0.5rem; + outline: none; + transition: all 0.3s ease-in; + + &.btn-primary { + @include set-background($primary-color); + &:hover { + background: lighten($primary-color, 5%); + } + } + &.btn-dark { + @include set-background($dark-color); + &:hover { + background: lighten($dark-color, 5%); + } + } + &.btn-light { + @include set-background($light-color); + &:hover { + background: lighten($dark-color, 20%); + color: white; + } + } + &.btn-danger { + @include set-background($danger-color); + &:hover { + background: lighten($danger-color, 5%); + } + } + &.btn-success { + @include set-background($success-color); + &:hover { + background: lighten($success-color, 5%); + } + } +} + +// Container +.container { + max-width: $max-width; + margin: auto; + overflow: hidden; + padding: 0 2rem; + margin-top: 5rem; + margin-bottom: 3rem; +} + +// Alerts +.alert { + padding: 0.8rem; + margin: 1rem; + opacity: 0.9; + background-color: $light-color; + color: $dark; + + &.alert-primary { + @include set-background($primary-color); + } + &.alert-dark { + @include set-background($dark-color); + } + &.alert-success { + @include set-background($success-color); + } + &.alert-danger { + @include set-background($danger-color); + } +} + +.round-img { + border-radius: 50%; +} + +.line { + height: 1px; + background: #ccc; + margin: 1.5rem 0; +} + +// badge +.badge { + font-size: 0.8rem; + padding: 0.1rem; + text-align: center; + margin: 0.3rem; + background: $light-color; + color: $dark; + border-radius: 1rem; + + &.badge-primary { + @include set-background($primary-color); + } + &.badge-dark { + @include set-background($dark-color); + } + &.badge-success { + @include set-background($success-color); + } + &.badge-danger { + @include set-background($danger-color); + } +} + +// Table +.table { + th, + td { + padding: 1rem; + text-align: left; + } + + th { + background: $light-color; + } +} diff --git a/src/static/scss/style.scss b/src/static/scss/style.scss new file mode 100644 index 0000000..ccaa0c7 --- /dev/null +++ b/src/static/scss/style.scss @@ -0,0 +1,192 @@ +@import "_config"; +@import "_utils"; +@import "_form"; +@import "_mobile"; + +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body { + font-family: "Raleway", sans-serif; + font-size: 1rem; + line-height: 1.6; + background-color: white; + color: $dark; +} + +a { + text-decoration: none; + color: $primary-color; +} + +ul { + list-style: none; +} + +img { + width: 100%; +} + +// Navbar + +.navbar { + display: flex; + align-items: center; + justify-content: space-between; + padding: 0.7rem 2rem; + position: fixed; + z-index: 1; + width: 100%; + top: 0; + border-bottom: solid 1px $primary-color; + opacity: 0.9; + + ul { + display: flex; + } + + a { + color: white; + padding: 0.45rem; + margin: 0 0.25rem; + + &:hover { + color: $primary-color; + } + } +} + +// landing +.landing { + position: relative; + background: url("../img/showcase.jpg") no-repeat center center/cover; + height: 100vh; + + &-inner { + color: white; + height: 100%; + display: flex; + flex-direction: column; + width: 80%; + margin: auto; + align-items: center; + justify-content: center; + text-align: center; + } +} + +// profiles +.profile { + display: grid; + grid-template-columns: 2fr 4fr 2fr; + grid-gap: 2rem; + padding: 1rem; + line-height: 1.8; + margin-bottom: 1rem; + align-items: center; +} + +// Profile Page + +.profile-grid { + display: grid; + grid-template-areas: "top top" "about about" "exp edu" "github github"; + grid-gap: 1rem; + + .profile-top { + grid-area: top; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; + + img { + width: 250px; + } + + .icons a { + color: white; + margin: 0 0.3rem; + + &:hover { + color: $dark-color; + } + } + } + + .profile-about { + grid-area: about; + text-align: center; + + .skills { + display: flex; + justify-content: center; + align-items: center; + text-align: center; + } + } + .profile-exp { + grid-area: exp; + } + .profile-edu { + grid-area: edu; + } + + .profile-exp, + .profile-edu { + & > div { + margin-bottom: 1rem; + padding-bottom: 1rem; + border-bottom: #ccc 1px dotted; + + &:last-child { + border: none; + } + + p { + margin: 0.5rem 0; + } + } + } + + .profile-github { + grid-area: github; + + .repo { + display: flex; + + & > div:first-child { + flex: 7; + flex-basis: 70%; + } + & > div:last-child { + flex: 3; + flex-basis: 30%; + } + } + } +} + +// Posts +.post-form-header { + padding: 0.5rem; +} + +.post { + display: grid; + grid-template-columns: 1fr 4fr; + grid-gap: 2rem; + align-items: center; + + & > div:first-child { + text-align: center; + } + + img { + width: 150px; + } +} diff --git a/yarn.lock b/yarn.lock index 39da000..7ded3c0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1082,6 +1082,51 @@ debug "^3.1.0" lodash.once "^4.1.1" +"@fortawesome/fontawesome-common-types@^0.2.28": + version "0.2.28" + resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.28.tgz#1091bdfe63b3f139441e9cba27aa022bff97d8b2" + integrity sha512-gtis2/5yLdfI6n0ia0jH7NJs5i/Z/8M/ZbQL6jXQhCthEOe5Cr5NcQPhgTvFxNOtURE03/ZqUcEskdn2M+QaBg== + +"@fortawesome/fontawesome-free@^5.13.0": + version "5.13.0" + resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-5.13.0.tgz#fcb113d1aca4b471b709e8c9c168674fbd6e06d9" + integrity sha512-xKOeQEl5O47GPZYIMToj6uuA2syyFlq9EMSl2ui0uytjY9xbe8XS0pexNWmxrdcCyNGyDmLyYw5FtKsalBUeOg== + +"@fortawesome/fontawesome-svg-core@^1.2.28": + version "1.2.28" + resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.28.tgz#e5b8c8814ef375f01f5d7c132d3c3a2f83a3abf9" + integrity sha512-4LeaNHWvrneoU0i8b5RTOJHKx7E+y7jYejplR7uSVB34+mp3Veg7cbKk7NBCLiI4TyoWS1wh9ZdoyLJR8wSAdg== + dependencies: + "@fortawesome/fontawesome-common-types" "^0.2.28" + +"@fortawesome/free-brands-svg-icons@^5.13.0": + version "5.13.0" + resolved "https://registry.yarnpkg.com/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.13.0.tgz#e79de73ba6555055204828dca9c0691e7ce5242b" + integrity sha512-/6xXiJFCMEQxqxXbL0FPJpwq5Cv6MRrjsbJEmH/t5vOvB4dILDpnY0f7zZSlA8+TG7jwlt12miF/yZpZkykucA== + dependencies: + "@fortawesome/fontawesome-common-types" "^0.2.28" + +"@fortawesome/free-regular-svg-icons@^5.13.0": + version "5.13.0" + resolved "https://registry.yarnpkg.com/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-5.13.0.tgz#925a13d8bdda0678f71551828cac80ab47b8150c" + integrity sha512-70FAyiS5j+ANYD4dh9NGowTorNDnyvQHHpCM7FpnF7GxtDjBUCKdrFqCPzesEIpNDFNd+La3vex+jDk4nnUfpA== + dependencies: + "@fortawesome/fontawesome-common-types" "^0.2.28" + +"@fortawesome/free-solid-svg-icons@^5.13.0": + version "5.13.0" + resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.13.0.tgz#44d9118668ad96b4fd5c9434a43efc5903525739" + integrity sha512-IHUgDJdomv6YtG4p3zl1B5wWf9ffinHIvebqQOmV3U+3SLw4fC+LUCCgwfETkbTtjy5/Qws2VoVf6z/ETQpFpg== + dependencies: + "@fortawesome/fontawesome-common-types" "^0.2.28" + +"@fortawesome/react-fontawesome@^0.1.9": + version "0.1.9" + resolved "https://registry.yarnpkg.com/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.9.tgz#c865b9286c707407effcec99958043711367cd02" + integrity sha512-49V3WNysLZU5fZ3sqSuys4nGRytsrxJktbv3vuaXkEoxv22C6T7TEG0TW6+nqVjMnkfCQd5xOnmJoZHMF78tOw== + dependencies: + prop-types "^15.7.2" + "@hapi/address@2.x.x": version "2.1.4" resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.1.4.tgz#5d67ed43f3fd41a69d4b9ff7b56e7c0d1d0a81e5"