The latest articles on DEV Community by Tharusha Rashmika Sandakelum (@tharusha200219). https://dev.to/tharusha200219 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%2F2626219%2F053c9016-613a-4b10-a46b-105a82f4ef84.jpg https://dev.to/tharusha200219 en Tharusha Rashmika Sandakelum Sat, 28 Dec 2024 21:17:02 +0000 https://dev.to/tharusha200219/frontend-challenge-december-edition-by-tharusha-rashmika-4l4j https://dev.to/tharusha200219/frontend-challenge-december-edition-by-tharusha-rashmika-4l4j <p><strong>Live site -</strong><br> </p> <div class="crayons-card c-embed text-styles text-styles--secondary"> <div class="c-embed__content"> <div class="c-embed__body flex items-center justify-between"> <a href="https://frontend-challenge-december-edition.vercel.app" rel="noopener noreferrer" class="c-link fw-bold flex items-center"> <span class="mr-2">frontend-challenge-december-edition.vercel.app</span> </a> </div> </div> </div> <p>This is a submission <a href="https://dev.to/devteam/join-us-for-the-next-frontend-challenge-december-edition-187c?bb=137093">for Frontend Challenge - December Edition, Glam Up My Markup: Winter Solstice</a></p> <p>My GITHUB profile where I have uploaded the code-<br> </p> <div class="ltag-github-readme-tag"> <div class="readme-overview"> <h2> <img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fassets.dev.to%2Fassets%2Fgithub-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"> <a href="https://github.com/Tharusha200219" rel="noopener noreferrer"> Tharusha200219 </a> / <a href="https://github.com/Tharusha200219/Frontend-Challenge-December-Edition" rel="noopener noreferrer"> Frontend-Challenge-December-Edition </a> </h2> <h3> </h3> </div> <div class="ltag-github-body"> <div id="readme" class="md"> <div class="markdown-heading"> <h1 class="heading-element">Frontend-Challenge-December-Edition</h1> </div> </div> </div> <br> <div class="gh-btn-container"><a class="gh-btn" href="https://github.com/Tharusha200219/Frontend-Challenge-December-Edition" rel="noopener noreferrer">View on GitHub</a></div> <br> </div> <br> <p><strong>Demo</strong></p> <p><a href="https://media2.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%2Fu33qh04o6i7t2cmun2zg.png" class="article-body-image-wrapper"><img src="https://media2.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%2Fu33qh04o6i7t2cmun2zg.png" alt=" " width="800" height="488"></a></p> <p><a href="https://media2.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%2Fl5bcg99oj4v36gzvex2p.png" class="article-body-image-wrapper"><img src="https://media2.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%2Fl5bcg99oj4v36gzvex2p.png" alt=" " width="800" height="488"></a></p> <p><strong>Inspiration</strong></p> <p>This December, I embarked on a creative adventure by participating in the Frontend-Challenge-December. It was a whirlwind of code, design, and problem-solving, but looking back, it’s been one of the most rewarding experiences of my frontend journey. Here’s how it went:</p> <p><strong>What I Learned-</strong></p> <p>about GSAP animation <br> Creativity</p> <p><strong>Journey</strong><br> On December 28th, I discovered the Frontend-Challenge-December. I had just one day to create something special, and while it was a race against time, it turned out to be an incredible learning experience.</p> <p>*<em>What I Built *</em></p> <p>Using GSAP.js for animations and CSS to add a touch of elegance, I managed to put together a site I’m proud of. Every detail, from smooth transitions to responsive design, was carefully crafted in those 24 hours.</p> <p>The Challenges I Faced 💪</p> <p>The hardest part? Animations with GSAP.</p> <ul> <li>Understanding scroll triggers.</li> <li>Getting the timing and smoothness just right.</li> </ul> devchallenge frontendchallenge css javascript