The latest articles on DEV Community by Jorge del Campo (@jorgedelcampo). https://dev.to/jorgedelcampo https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1438168%2Ff4c276d9-792b-4f99-88cc-dc594b8d498a.jpeg https://dev.to/jorgedelcampo en Jorge del Campo Sat, 27 Apr 2024 13:54:08 +0000 https://dev.to/jorgedelcampo/lets-glum-up-on-dev-earth-day-2nb5 https://dev.to/jorgedelcampo/lets-glum-up-on-dev-earth-day-2nb5 <p><em>This is a submission for <a href="https://dev.to/devteam/join-us-for-the-next-frontend-challenge-earth-day-edition-52e4">Frontend Challenge v24.04.17</a>, Glam Up My Markup: Earth Day Celebration Landing Page</em></p> <h2> What I Built </h2> <p>I've created a simple SPA landing page, with scrolling effects, combining flat and texture designs.</p> <p>Considering the accesibility, I focused on clean style enphysing information and calls to action.</p> <h2> Demo </h2> <div class="crayons-card c-embed text-styles text-styles--secondary"> <a href="https://jorgedelcampo.github.io/dev_earth_day/js_challenge/" rel="noopener noreferrer"> jorgedelcampo.github.io </a> </div> <h2> Journey </h2> <p>The principal inspiration was classical Wordpress block themes, based on Flexbox, with full height sections layout and links to scroll between them.</p> <p>As the challenge rules indicated, all project and interactivity was created using JS at the bottom of code, including meta and SEO tags, a link with an external CSS stylesheet, and that's all, basically.</p> <p>I hope you'll enjoy the result.</p> <ul> <li>Author: Jorge del Campo Andrade (Chile).</li> <li>Repo URI: <a href="https://github.com/jorgedelcampo/dev_earth_day/tree/main/js_challenge" rel="noopener noreferrer">https://github.com/jorgedelcampo/dev_earth_day/tree/main/js_challenge</a> </li> <li>Project under MIT licence.</li> </ul> devchallenge frontendchallenge css javascript Jorge del Campo Fri, 26 Apr 2024 04:00:19 +0000 https://dev.to/jorgedelcampo/happy-earth-day-3mgn https://dev.to/jorgedelcampo/happy-earth-day-3mgn <p><em>This is a submission for <a href="https://dev.to/devteam/join-us-for-the-next-frontend-challenge-earth-day-edition-52e4">Frontend Challenge v24.04.17</a>, CSS Art: Earth Day.</em></p> <h2> Inspiration </h2> <p>When I saw the challenge, my first idea was create an Earth globe drawning, but what else? And inmediatly my head said (and my hands, too): "<em>This could be an animation...</em>" and the rest was magic, basically.</p> <p>I really love 2D art and animation, so I took my graphic tablet and sketch a basic idea with a natural landscape (mountains, trees, flowing water) and then human industrial activities devastating everything, but delivering a message about hope and with the earth rotating in space at the end.</p> <p>Once the general idea was ready, I decided create an HTML page with no external elements (images or any other resource), just CSS, including SVG images.</p> <h2> Demo </h2> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3bc4m1r48f7dbybcfa00.jpg" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3bc4m1r48f7dbybcfa00.jpg" alt="Screenshot Dev Earth Day challenge CSS animation"></a><br> </p> <div class="crayons-card c-embed text-styles text-styles--secondary"> <div class="c-embed__cover"> <a href="https://jorgedelcampo.github.io/dev_earth_day/css_challenge/" class="c-link s:max-w-50 align-middle" rel="noopener noreferrer"> <img alt="" src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fjorgedelcampo.github.io%2Fdev_earth_day%2Fthumbnail.jpg" height="auto" class="m-0"> </a> </div> <div class="c-embed__body"> <h2 class="fs-xl lh-tight"> <a href="https://jorgedelcampo.github.io/dev_earth_day/css_challenge/" rel="noopener noreferrer" class="c-link"> Dev Earth Day - Jorge del Campo </a> </h2> <div class="color-secondary fs-s flex items-center"> <img alt="favicon" class="c-embed__favicon m-0 mr-2 radius-0" src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fjorgedelcampo.github.io%2Fdev_earth_day%2Ffavicon.png"> jorgedelcampo.github.io </div> </div> </div> <h2> Journey </h2> <p>All in this challenge was a journey for me, but things I really loved creating the project was understand how to set an encode SVG as background image. For this, I created my ilustrations (industries, trucks, animals, etc.) on <a href="https://inkscape.org/" rel="noopener noreferrer">Inkscape</a>, I copied the SVG code and encoded using <a href="https://yoksel.github.io/url-encoder/" rel="noopener noreferrer">oksel.github.io/url-encoder</a>.</p> <p>Another great discovery was to use SVG paths for animations. Unfortunelly, these paths aren't responsive-friendly, but I resolved combining offset-path and translate(x,y) propierties to create a responsive path, and I think it worked!</p> <p>The animations and timmings were a watchmaking work. Choose the right time to start or stop an animation to match with the next action was a great odisea.</p> <p>But probably, what I really enjoyed the most <strong>was share this creative process with my family</strong> (the dog with the family was an idea from my wife and daugther :p)</p> <ul> <li><p>Author: Jorge del Campo Andrade (Chile).</p></li> <li><p>Repo URI: <a href="https://github.com/jorgedelcampo/dev_earth_day/tree/main/css_challenge" rel="noopener noreferrer">https://github.com/jorgedelcampo/dev_earth_day/tree/main/css_challenge</a></p></li> <li><p>Project under MIT licence.</p></li> </ul> frontendchallenge devchallenge css