The latest articles on DEV Community by IkraP (@ikrap). https://dev.to/ikrap https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F364938%2F06e50b5e-69de-4746-ac3b-bce8b897a6a5.png https://dev.to/ikrap en IkraP Sun, 10 Jan 2021 21:45:48 +0000 https://dev.to/ikrap/digital-ocean-hackathon-app-console-clear-47ig https://dev.to/ikrap/digital-ocean-hackathon-app-console-clear-47ig <h2> What I built </h2> <p>Console.Clear is a simple application that encourages you to take a 10-minute break. In the current chaos of the world, we often neglect how a simple break can help us refocus our energy and encourages us to invest in our own wellbeing. </p> <p>With console.clear, you can take a timed 10-minute break and let go of your thoughts, focus on your breathing, and allow your mind to wonder. </p> <h3> Category Submission: </h3> <p>Program for the People</p> <h3> App Link </h3> <p><a href="https://consoleclear-w4wer.ondigitalocean.app/">https://consoleclear-w4wer.ondigitalocean.app/</a></p> <h3> Screenshots </h3> <p>Desktop Version:<br> <a href="https://res.cloudinary.com/practicaldev/image/fetch/s--pj5Xih9P--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/0vi43mi5nma2csnipcb7.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--pj5Xih9P--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/0vi43mi5nma2csnipcb7.png" alt="Screenshot of consoleclear home page"></a><br> <a href="https://res.cloudinary.com/practicaldev/image/fetch/s--8l5_1oRq--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/rxjoc8tl9qhfsm0d6i1k.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--8l5_1oRq--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/rxjoc8tl9qhfsm0d6i1k.png" alt="Screenshot of consoleclear timer page"></a><br> Mobile Version:<br> <a href="https://res.cloudinary.com/practicaldev/image/fetch/s--Hj4pP8hX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/p6ag8lr9mvwncht07vmi.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Hj4pP8hX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/p6ag8lr9mvwncht07vmi.png" alt="Screenshot for consoleclear for mobile"></a></p> <h3> Description </h3> <p>The idea for console.clear came from browsing MDN one day and coming across this syntax! I hastily purchased the domain name and started gathering ideas, becoming very excited about starting a new project. The eventual goal for this side project is for it to become a source of information on mental wellbeing, allow users to relax through a guided meditation on the app, and take a break. As you can see from the current state of the app, I only managed to get as far as encouraging people to take a break! </p> <p>The project was started a week ago, with the illustrations taking up half of the week and leaving roughly 3 days to code the entire app! Exactly like a hackathon! </p> <h3> Link to Source Code </h3> <p><a href="https://github.com/IkraP/consoleclear">Link to source code on Github</a></p> <h3> Permissive License </h3> <p>Commons Clause</p> <h2> Background </h2> <p>Mental health is becoming increasingly important in the current chaos of the world. I really wanted to create this app to help encourage people to focus on their internal well being.</p> <h3> How I built it </h3> <p>The app is built using <a href="https://www.gatsbyjs.com/">GatsbyJs</a> as have recently built my own portfolio with it - <a href="http://www.chemtocode.co.uk">www.chemtocode.co.uk</a><br> I used styled-components for the styling and GSAP for the animations. I love making illustrations so for console.clear, I used Affinity Designer and Figma for the design of the website. <br> Fun Fact: I taught myself GSAP and Styled components for this project!<br> All hosted on <a href="https://www.digitalocean.com/products/app-platform/">Digital Oceans App Platform</a>!</p> <h3> Additional Resources/Info </h3> <ul> <li>The idea for the design was something that I found on Instagram from the incredible team at (<a href="https://www.instagram.com/beio.ru/">https://www.instagram.com/beio.ru/</a>). I loved the idea of having a break timer so I asked permission before designing console.clear!</li> </ul> dohackathon hackathon gatsby digitalocean