The latest articles on DEV Community by Krishna (@krishna_dc34d409e79a5926c). https://dev.to/krishna_dc34d409e79a5926c 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%2F2601734%2F06f560fb-d31e-4672-bee9-01fd93bc157e.jpg https://dev.to/krishna_dc34d409e79a5926c en Krishna Tue, 24 Dec 2024 13:27:26 +0000 https://dev.to/krishna_dc34d409e79a5926c/glam-up-my-markup-winter-solstice-3omf https://dev.to/krishna_dc34d409e79a5926c/glam-up-my-markup-winter-solstice-3omf <p><em>This is a submission for <a href="https://dev.to/challenges/frontend-2024-12-04">Frontend Challenge - December Edition, Glam Up My Markup: Winter Solstice</a></em></p> <h2> What I Built </h2> <p>This project is an interactive representation of winter solstice celebrations around the world. It brings together diverse traditions, highlighting their shared themes of renewal and hope. The site is designed to be user-friendly, with visually engaging timelines and multimedia content. The goal was to make the information both informative and immersive, encouraging deeper exploration of these cultural practices</p> <h2> Demo </h2> <div class="crayons-card c-embed text-styles text-styles--secondary"> <div class="c-embed__cover"> <a href="https://solstice-weld.vercel.app/" class="c-link s:max-w-50 align-middle" rel="noopener noreferrer"> <img alt="" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fsolstice-weld.vercel.app%2Fimg%2Fphoto-intro.webp" height="1093" class="m-0" width="800"> </a> </div> <div class="c-embed__body"> <h2 class="fs-xl lh-tight"> <a href="https://solstice-weld.vercel.app/" rel="noopener noreferrer" class="c-link"> Winter Solstice Celebrations Around the World </a> </h2> <p class="truncate-at-3"> Krishna Negi is a skilled DevOps Developer with extensive experience in web development. </p> <div class="color-secondary fs-s flex items-center"> <img alt="favicon" class="c-embed__favicon m-0 mr-2 radius-0" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fsolstice-weld.vercel.app%2Fimg%2Ficon%2Ffavicon%2Ffavicon-32x32.png" width="32" height="32"> solstice-weld.vercel.app </div> </div> </div> <p>Visit the link : <a href="https://solstice-weld.vercel.app/" rel="noopener noreferrer">https://solstice-weld.vercel.app/</a></p> <h2> Journey </h2> <p>This project allowed me to experiment with a variety of web technologies and tools. One of the key challenges I faced was optimizing the site for different screen sizes, ensuring it was fully responsive. The most rewarding part was seeing the interactive timeline come together, making the solstice traditions more accessible and engaging for users. I’m excited to continue expanding this project by incorporating more features, such as user contributions and additional cultural insights.</p> <p>I tried implementing three.js to show a real winter solstice effect <br> but I was able to affect the rotation of the earth and couldn't continue further.</p> devchallenge frontendchallenge css javascript