From 4522d0a1509d27cbcf341abee98cba6185ee5b46 Mon Sep 17 00:00:00 2001 From: Francisco Pessano Date: Fri, 1 Oct 2021 19:18:27 -0300 Subject: [PATCH] Added about this page --- public/css_styles/styles.css | 28 +++++++++++++--------- public/css_styles/styles.css.map | 2 +- public/sass_styles/_aboutThis.scss | 14 +++++++---- src/App.js | 10 +++++++- src/components/AboutThis.jsx | 37 +++++++++++++++++++++++++++--- src/components/Credits.jsx | 25 ++++++++++++++++++++ src/components/GoDownArrow.jsx | 4 ++-- src/components/Header.jsx | 2 +- 8 files changed, 99 insertions(+), 23 deletions(-) create mode 100644 src/components/Credits.jsx diff --git a/public/css_styles/styles.css b/public/css_styles/styles.css index 353f2c1..88adf74 100644 --- a/public/css_styles/styles.css +++ b/public/css_styles/styles.css @@ -225,15 +225,15 @@ fill: #aaaaaa; } -#about-this { - height: 95vh; +#about-this, #credits { + height: 83vh; padding: 0px 3vw; padding-top: 5vh; } -#about-this .titles { +#about-this .titles, #credits .titles { display: flex; } -#about-this .titles h3 { +#about-this .titles h3, #credits .titles h3 { width: 50%; font-family: "Raleway", sans-serif; font-weight: 700; @@ -242,25 +242,27 @@ user-select: none; font-size: 22pt; } -#about-this .titles h3 .line-through { +#about-this .titles h3 .line-through, #credits .titles h3 .line-through { text-decoration: line-through; - text-decoration-thickness: 5px; - text-decoration-color: #73b7ff; + text-decoration-thickness: 3px; } -#about-this .information { +#about-this .information, #credits .information { display: flex; } -#about-this .information ul { +#about-this .information ul, #credits .information ul { width: 50%; } -#about-this .information ul li h4 { +#about-this .information ul li, #credits .information ul li { + margin-top: 3vh; +} +#about-this .information ul li h4, #credits .information ul li h4 { margin: 0; padding: 0; user-select: none; font-family: "Rambla", sans-serif; font-size: 18pt; } -#about-this .information ul li p { +#about-this .information ul li p, #credits .information ul li p { margin: 0; padding: 0; font-family: "Rambla", sans-serif; @@ -269,6 +271,10 @@ margin-top: 1vh; } +#credits { + height: 95vh; +} + .history-button { background: none; border: none; diff --git a/public/css_styles/styles.css.map b/public/css_styles/styles.css.map index b4f1d82..4bb7b18 100644 --- a/public/css_styles/styles.css.map +++ b/public/css_styles/styles.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../sass_styles/_header.scss","../sass_styles/styles.scss","../sass_styles/_banner-login.scss","../sass_styles/_mainPomodoro.scss","../sass_styles/_styleSelector.scss","../sass_styles/_goDownArrow.scss","../sass_styles/_aboutThis.scss","../sass_styles/_historyButton.scss","../sass_styles/_pomodoro-counter.scss","../sass_styles/_identify.scss","../sass_styles/_dark-mode_toogle-switch.scss","../sass_styles/_account.scss","../sass_styles/_goToAccount.scss","../sass_styles/_clockify-tasks-display.scss"],"names":[],"mappings":"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","file":"styles.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../sass_styles/_header.scss","../sass_styles/styles.scss","../sass_styles/_banner-login.scss","../sass_styles/_mainPomodoro.scss","../sass_styles/_styleSelector.scss","../sass_styles/_goDownArrow.scss","../sass_styles/_aboutThis.scss","../sass_styles/_historyButton.scss","../sass_styles/_pomodoro-counter.scss","../sass_styles/_identify.scss","../sass_styles/_dark-mode_toogle-switch.scss","../sass_styles/_account.scss","../sass_styles/_goToAccount.scss","../sass_styles/_clockify-tasks-display.scss"],"names":[],"mappings":"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","file":"styles.css"} \ No newline at end of file diff --git a/public/sass_styles/_aboutThis.scss b/public/sass_styles/_aboutThis.scss index 0420766..8bb31e4 100644 --- a/public/sass_styles/_aboutThis.scss +++ b/public/sass_styles/_aboutThis.scss @@ -1,5 +1,5 @@ -#about-this { - height: 95vh; +#about-this, #credits { + height: 83vh; padding: 0px 3vw; padding-top: 5vh; @@ -18,8 +18,7 @@ .line-through { text-decoration: line-through; - text-decoration-thickness: 5px; - text-decoration-color: #73b7ff; + text-decoration-thickness: 3px; } } } @@ -32,6 +31,9 @@ width: 50%; li { + + margin-top: 3vh; + h4 { @include normalizeTitle; @include bodyFont; @@ -48,4 +50,8 @@ } } } +} + +#credits { + height: 95vh; } \ No newline at end of file diff --git a/src/App.js b/src/App.js index 8173e8b..33036aa 100644 --- a/src/App.js +++ b/src/App.js @@ -19,6 +19,7 @@ import { import Identify from "./components/Identify"; import Account from "./components/Account"; import ClockifyTasksDisplay from './components/ClockifyTasksDisplay'; +import Credits from './components/Credits'; function App() { @@ -99,8 +100,15 @@ function App() { projectID={projectID} setProjectID={setProjectID} /> - + + + + diff --git a/src/components/AboutThis.jsx b/src/components/AboutThis.jsx index 79ef3e5..55da910 100644 --- a/src/components/AboutThis.jsx +++ b/src/components/AboutThis.jsx @@ -8,7 +8,6 @@ const AboutThis = () => {

About us this

-

Credits

    @@ -20,14 +19,46 @@ const AboutThis = () => { Because I wanted a pomodoro function that syncs with Clockify, which is a service that I use a lot to track my work.

    +
  • +

    + This is free? +

    +

    + Yes of course!, it is free in every sense of the word. Here is the source code. +

    +
    • +
  • +

    + How can I contact you? +

    +

    + You can contact me by my email: franpessano1@gmail.com +

    +

  • - Credit 1 + What languages / frameworks you used?

    - Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure suscipit totam magni, maiores facere quisquam est sapiente eligendi saepe repellendus quam blanditiis magnam ipsa doloribus facilis. Expedita eos corrupti dolor! + I just used React.js and Sass together with HTML, CSS and JS. +

    +
    • +
  • +

    + What do you use to store the credentials? +

    +

    + I use Google's Firebase service. +

    +
    • +
  • +

    + You have more projects? +

    +

    + Yes!, all there are in my personal website.

diff --git a/src/components/Credits.jsx b/src/components/Credits.jsx new file mode 100644 index 0000000..1f270d3 --- /dev/null +++ b/src/components/Credits.jsx @@ -0,0 +1,25 @@ +import React from 'react' + +const Credits = () => { + return ( +
+
+

Credits

+
+
+
    +
  • +

    + Credit 1 +

    +

    + Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure suscipit totam magni, maiores facere quisquam est sapiente eligendi saepe repellendus quam blanditiis magnam ipsa doloribus facilis. Expedita eos corrupti dolor! +

    +
    • +
+
+
+ ) +} + +export default Credits diff --git a/src/components/GoDownArrow.jsx b/src/components/GoDownArrow.jsx index c8b3401..87b5431 100644 --- a/src/components/GoDownArrow.jsx +++ b/src/components/GoDownArrow.jsx @@ -1,13 +1,13 @@ import React from 'react' import { Link, animateScroll as scroll } from "react-scroll"; -const GoDownArrow = () => { +const GoDownArrow = (props) => { console.log('GO DOWN ARROW DEPLOYED') return (
- +
) } diff --git a/src/components/Header.jsx b/src/components/Header.jsx index 870335b..04500c9 100644 --- a/src/components/Header.jsx +++ b/src/components/Header.jsx @@ -9,7 +9,7 @@ const Header = (props) => { return (

Pomodoro Timer

 -

Made By Francisco Pessano

+

Made By Francisco Pessano