The latest articles on DEV Community by Deepak Singh (@deepak_singh_fa1c5e26bd82). https://dev.to/deepak_singh_fa1c5e26bd82 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%2F3533184%2Fd9b1de2a-85fb-43b4-af28-852da5674266.jpeg https://dev.to/deepak_singh_fa1c5e26bd82 en Deepak Singh Sat, 25 Oct 2025 06:52:53 +0000 https://dev.to/deepak_singh_fa1c5e26bd82/haunted-halloween-frontend-challenge-4e92 https://dev.to/deepak_singh_fa1c5e26bd82/haunted-halloween-frontend-challenge-4e92 <p><em>This is a submission for <a href="https://dev.to/challenges/frontend-2025-10-15">Frontend Challenge - Halloween Edition, Perfect Landing</a></em></p> <h2> What I Built </h2> <p>I built “Haunted Halloween Landing” — a Halloween-themed landing page hosted at <a href="https://deepakeon.github.io/haunted-halloween-landing/" rel="noopener noreferrer">https://deepakeon.github.io/haunted-halloween-landing/</a></p> <p>The page is designed to immerse the visitors in spooky-festive vibes while maintaining a clean, fast, and responsive experience. Key features include:</p> <ul> <li><p>Dark, atmospheric visuals and Halloween motifs (ghosts, pumpkins, eerie sky)</p></li> <li><p>Smooth animations/transitions for entering the page and interacting with elements</p></li> <li><p>Fully responsive layout (mobile, tablet, desktop)</p></li> <li><p>Built with modern web stack (Next.js + static export for GitHub Pages)</p></li> <li><p>SEO + OG/tweet meta tags for shareability and visibility</p></li> <li><p>Google Analytics for fun and monitoring</p></li> </ul> <h2> Demo </h2> <p>Live demo: <a href="https://deepakeon.github.io/haunted-halloween-landing/" rel="noopener noreferrer">Haunted Halloween Landing</a></p> <p>Source code: <a href="https://github.com/Deepakeon/haunted-halloween-landing" rel="noopener noreferrer">GitHub Repository</a></p> <h2> Journey </h2> <p>This project started with a simple idea — I’ve built a lot of corporate landing pages before, but I wanted to make something different. Something that didn’t look like a “components website” with cards, grids, and the usual clean layouts. Halloween felt like the perfect excuse to have fun and experiment a bit.</p> <p>At first, I didn’t actually know much about Halloween beyond pumpkins and costumes. So, I went down a small rabbit hole reading about its origins and traditions. That curiosity shaped the tone of the page — more mysterious and ancient rather than just “spooky and orange.”</p> <p>The build itself was surprisingly smooth. I started by asking ChatGPT to help me come up with a project statement, then used <a href="https://bolt.new/" rel="noopener noreferrer">Bolt</a> to spin up a Next.js landing page from it. Once the basic structure was there, I jumped over to Claude to play with animations and refine the visuals — mostly because <a href="https://bolt.new/" rel="noopener noreferrer">Bolt</a> has daily credit limits.</p> <p>I even tried a few background gradient combinations that would shift as you scroll, but ended up keeping things simple. Still, that exploration helped set the overall atmosphere of the page.</p> <p>There wasn’t any frustrating bug-hunting or complicated logic — just a fun, creative flow of trying ideas, tweaking visuals, and watching the page slowly come to life.</p> devchallenge frontendchallenge webdev javascript