The latest articles on DEV Community by Eoin McGrath (@eoinmcg). https://dev.to/eoinmcg 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%2F1836780%2F0910e6bc-964a-4ecc-920c-aa25a1824b3e.png https://dev.to/eoinmcg en Eoin McGrath Mon, 23 Jun 2025 19:05:43 +0000 https://dev.to/eoinmcg/frontend-challenge-world-asteroid-day-30th-june-l7c https://dev.to/eoinmcg/frontend-challenge-world-asteroid-day-30th-june-l7c <p><em>This is a submission for <a href="https://dev.to/challenges/frontend-2025-06-04">Frontend Challenge - June Celebrations, Perfect Landing: June Celebrations</a></em></p> <h2> What I Built </h2> <p>A celebration of World Asteroid Day, 30th June</p> <h3> <a href="https://eoinmcgrath.com/asteroid-day/" rel="noopener noreferrer">🌌 View live here</a> </h3> <h2> Journey </h2> <p>I've wanted to learn Tailwind CSS for a while, so this challenge was the perfect opportunity to expand my skills. Space has always fascinated me, so choosing <strong>World Asteroid Day</strong> as my inspiration was a natural fit. My goal was to create an educational and inspiring site for a younger audience, which led to this interactive landing page celebrating the day.</p> <p>It Features:</p> <ul> <li>☄️ Real asteroid field</li> <li>🚀 Space travel</li> <li>ℹ️ Interesting facts</li> <li>❓ Interactive quiz</li> <li>🧑‍🎓 Downloadable personalized certificate.</li> </ul> <h3> Tech used </h3> <ul> <li>React with typescript</li> <li>R3F for animated asteroid field</li> <li>Tailwind CSS for styling</li> <li>Google Gemini (free plan) for image generation</li> </ul> <p>I had a blast creating this landing page, and I hope you enjoy it too!</p> <p>MIT license</p> <p><a href="https://github.com/eoinmcg/asteroid-day" rel="noopener noreferrer">Github repo</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%2Fqy4xyg7r0u1qkqj1l4fn.webp" 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%2Fqy4xyg7r0u1qkqj1l4fn.webp" alt="Ceres - the largest asteroid in the asteroid belt" width="800" height="800"></a></p> devchallenge frontendchallenge css javascript Eoin McGrath Fri, 28 Feb 2025 11:55:22 +0000 https://dev.to/eoinmcg/code-a-mobile-friendly-game-with-littlejs-tutorial-2829 https://dev.to/eoinmcg/code-a-mobile-friendly-game-with-littlejs-tutorial-2829 <p>Hey all! I hacked together a super simple game last weekend, which I thought lent itself to a tutorial.<br> So, I also wrote up a tutorial, which can be found here:<br> <a href="https://eoinmcg.github.io/little-ski/tutorial.html" rel="noopener noreferrer">https://eoinmcg.github.io/little-ski/tutorial.html</a><br> and the game: <br> <a href="https://eoinmcg.github.io/little-ski" rel="noopener noreferrer">https://eoinmcg.github.io/little-ski</a></p> <p>If anyone has the time and inclination to check out the tutorial, I'd really appreciate any feedback!<br> Thanks!</p> <p>p.s. the github repo: <a href="https://github.com/eoinmcg/little-ski/" rel="noopener noreferrer">https://github.com/eoinmcg/little-ski/</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%2Fepr9znxlyu1r0gsqrjow.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%2Fepr9znxlyu1r0gsqrjow.png" alt="Title Screen" width="320" height="480"></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%2F4zi9m3dd9j5ia7fonukt.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%2F4zi9m3dd9j5ia7fonukt.png" alt="Game play" width="320" height="480"></a></p> gamedev javascript tutorial Eoin McGrath Fri, 02 Aug 2024 15:24:07 +0000 https://dev.to/eoinmcg/mountains-jeb https://dev.to/eoinmcg/mountains-jeb <p><em>This is a submission for <a href="https://dev.to/challenges/frontend-2024-07-24">Frontend Challenge v24.07.24</a>, CSS Art: Recreation.</em></p> <h2> Inspiration </h2> <p>As developers we can spend too long in front of our screens.<br> Take a break. Look up!</p> <h2> Demo </h2> <p><a href="https://eoinmcgrath.com/mountains/" rel="noopener noreferrer">See it in action.</a></p> <h2> Journey </h2> <p>I expanded my knowledge of CSS animations, that's for sure.<br> On previous projects, I've only scratched the surface of what can be achieved with CSS animations. This exercise give me a chance to experiment. And most of all, have fun ;)</p> frontendchallenge devchallenge css