franpcode/Pomodoro-Timer-with-Clockify-integration
1
0
Fork 0
mirror of https://github.com/FranP-code/Pomodoro-Timer-with-Clockify-integration.git synced 2025-10-12 23:52:30 +00:00
Code Issues 1 Packages Projects Releases Wiki Activity

Added about this page

Browse Source
This commit is contained in:
Francisco Pessano
2021-10-01 19:18:27 -03:00
parent c89e3e4021
commit 4522d0a150
8 changed files with 99 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/App.js
View File

@@ -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}
/>
<GoDownArrow />
<GoDownArrow
direction={'about-this'}
/>
<AboutThis />
<GoDownArrow
direction={'credits'}
/>
<Credits />
</Route>
</Switch>
</>

37
src/components/AboutThis.jsx
View File

@@ -8,7 +8,6 @@ const AboutThis = () => {
<div id="about-this">
<div className="titles">
<h3>About<span className="line-through"> us </span>this</h3>
<h3>Credits</h3>
</div>
<div className="information">
<ul>
@@ -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.
</p>
</li>
<li>
<h4>
This is free?
</h4>
<p>
Yes of course!, it is free in every sense of the word. Here is the <a href="https://github.com/FranP-code/Pomodoro-Timer-with-Clockify-integration">source code</a>.
</p>
</li>
<li>
<h4>
How can I contact you?
</h4>
<p>
You can contact me by my email: franpessano1@gmail.com
</p>
</li>
</ul>
<ul>
<li>
<h4>
Credit 1
What languages / frameworks you used?
</h4>
<p>
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.
</p>
</li>
<li>
<h4>
What do you use to store the credentials?
</h4>
<p>
I use Google's Firebase service.
</p>
</li>
<li>
<h4>
You have more projects?
</h4>
<p>
Yes!, all there are in my <a href="http://franp.xyz">personal website</a>.
</p>
</li>
</ul>

25
src/components/Credits.jsx Normal file
View File

@@ -0,0 +1,25 @@
import React from 'react'
const Credits = () => {
return (
<div id="credits">
<div className="titles">
<h3>Credits</h3>
</div>
<div className="information">
<ul>
<li>
<h4>
Credit 1
</h4>
<p>
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!
</p>
</li>
</ul>
</div>
</div>
)
}
export default Credits

4
src/components/GoDownArrow.jsx
View File

@@ -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 (
<div className="go-down">
<Link to="about-this" smooth={true}><svg height="533pt" viewBox="-16 -45 533.33331 533" width="533pt" xmlns="http://www.w3.org/2000/svg"><path d="m487.5-1.75h-475c-6.90625 0-12.5 5.59375-12.5 12.5 0 6.902344 5.59375 12.5 12.5 12.5h475c6.90625 0 12.5-5.597656 12.5-12.5 0-6.90625-5.59375-12.5-12.5-12.5zm0 0"/><path d="m345.097656 328.746094-82.597656 71.710937v-287.300781c0-6.902344-5.59375-12.5-12.5-12.5s-12.5 5.597656-12.5 12.5v287.300781l-82.597656-71.710937c-3.320313-3.027344-8.007813-4.035156-12.28125-2.648438-4.277344 1.386719-7.472656 4.960938-8.382813 9.359375-.910156 4.402344.613281 8.949219 3.988281 11.917969.097657.082031.191407.167969.289063.25l103.289063 89.671875c.039062.035156.085937.0625.125.097656.140624.128907.292968.234375.4375.347657.152343.117187.328124.253906.503906.375.144531.109374.300781.207031.457031.304687.179687.105469.351563.21875.535156.320313.15625.089843.320313.171874.480469.257812.167969.085938.375.183594.558594.265625s.339844.144531.519531.214844c.167969.066406.367187.144531.5625.210937.203125.0625.359375.125.539063.167969.179687.050781.40625.109375.605468.15625.175782.039063.351563.085937.527344.117187.234375.046876.472656.078126.707031.109376.152344.019531.304688.046874.457031.058593.390626.039063.789063.0625 1.183594.0625.390625 0 .792969-.023437 1.183594-.0625.148438-.011719.300781-.039062.453125-.058593.234375-.03125.472656-.0625.707031-.109376.175782-.03125.351563-.078124.527344-.117187.203125-.046875.40625-.097656.605469-.15625s.355469-.109375.539062-.167969c.175781-.058594.378907-.132812.570313-.210937.183594-.074219.339844-.136719.511718-.214844.171876-.074219.375-.171875.558594-.265625.175782-.089844.324219-.167969.480469-.257812.183594-.101563.359375-.214844.535156-.320313.15625-.097656.3125-.195313.464844-.304687.144531-.101563.328125-.242188.496094-.375.167969-.132813.296875-.226563.441406-.347657.039063-.035156.082031-.0625.121094-.097656l103.285156-89.671875c5.28125-4.449219 5.957031-12.335938 1.515625-17.613281-4.449219-5.28125-12.335938-5.957031-17.617188-1.511719-.101562.082031-.191406.164062-.285156.246094zm0 0"/></svg></Link>
<Link to={props.direction} smooth={true}><svg height="533pt" viewBox="-16 -45 533.33331 533" width="533pt" xmlns="http://www.w3.org/2000/svg"><path d="m487.5-1.75h-475c-6.90625 0-12.5 5.59375-12.5 12.5 0 6.902344 5.59375 12.5 12.5 12.5h475c6.90625 0 12.5-5.597656 12.5-12.5 0-6.90625-5.59375-12.5-12.5-12.5zm0 0"/><path d="m345.097656 328.746094-82.597656 71.710937v-287.300781c0-6.902344-5.59375-12.5-12.5-12.5s-12.5 5.597656-12.5 12.5v287.300781l-82.597656-71.710937c-3.320313-3.027344-8.007813-4.035156-12.28125-2.648438-4.277344 1.386719-7.472656 4.960938-8.382813 9.359375-.910156 4.402344.613281 8.949219 3.988281 11.917969.097657.082031.191407.167969.289063.25l103.289063 89.671875c.039062.035156.085937.0625.125.097656.140624.128907.292968.234375.4375.347657.152343.117187.328124.253906.503906.375.144531.109374.300781.207031.457031.304687.179687.105469.351563.21875.535156.320313.15625.089843.320313.171874.480469.257812.167969.085938.375.183594.558594.265625s.339844.144531.519531.214844c.167969.066406.367187.144531.5625.210937.203125.0625.359375.125.539063.167969.179687.050781.40625.109375.605468.15625.175782.039063.351563.085937.527344.117187.234375.046876.472656.078126.707031.109376.152344.019531.304688.046874.457031.058593.390626.039063.789063.0625 1.183594.0625.390625 0 .792969-.023437 1.183594-.0625.148438-.011719.300781-.039062.453125-.058593.234375-.03125.472656-.0625.707031-.109376.175782-.03125.351563-.078124.527344-.117187.203125-.046875.40625-.097656.605469-.15625s.355469-.109375.539062-.167969c.175781-.058594.378907-.132812.570313-.210937.183594-.074219.339844-.136719.511718-.214844.171876-.074219.375-.171875.558594-.265625.175782-.089844.324219-.167969.480469-.257812.183594-.101563.359375-.214844.535156-.320313.15625-.097656.3125-.195313.464844-.304687.144531-.101563.328125-.242188.496094-.375.167969-.132813.296875-.226563.441406-.347657.039063-.035156.082031-.0625.121094-.097656l103.285156-89.671875c5.28125-4.449219 5.957031-12.335938 1.515625-17.613281-4.449219-5.28125-12.335938-5.957031-17.617188-1.511719-.101562.082031-.191406.164062-.285156.246094zm0 0"/></svg></Link>
</div>
)
}

2
src/components/Header.jsx
View File

@@ -9,7 +9,7 @@ const Header = (props) => {
return (
<header className="header-main-page">
<a href="/"><h1>Pomodoro Timer</h1></a>
<h3>Made By <span className="selectable"><a target="_blank" href="https://www.behance.net/franpessano" rel="noreferrer">Francisco Pessano</a></span></h3>
<h3>Made By <span className="selectable"><a target="_blank" href="http://www.franp.xyz" rel="noreferrer">Francisco Pessano</a></span></h3>
<DarkMode />
<GoToAccount signIn={props.signIn}/>
</header>