Built a fully interactive JavaScript Calculator with custom animations & DOM control Just wrapped up a frontend project where I pushed beyond basic functionality and focused on interaction, performance, and visual feedback. This wasn’t just about “does it calculate?” — it was about how it feels to use. 🧠 What I used under the hood: ⚡ querySelectorAll() to efficiently target and control multiple button elements at once 🎯 Clean DOM manipulation for handling inputs, operators, and live display updates 🎬 CSS @keyframes + animation timing to give button clicks smooth visual feedback ✨ Transition + animation layering to make interactions feel responsive and modern ⚙️ Event-driven logic using addEventListener to handle user input cleanly 🧩 Conditional logic for operator handling and edge cases ⚠️ I also experimented with dynamic expression evaluation using eval() for quick parsing — not production-safe, but useful for understanding how expression engines work under the hood before moving to safer parsing methods. 💡 Key takeaway: A calculator is simple on the surface, but once you start adding animation, state handling, and DOM optimization, it becomes a great exercise in how real frontend systems behave. Next step: replacing eval with a proper expression parser and improving state management. 🔗 Live project: https://lnkd.in/dyxdpW9K⁠� #JavaScript #FrontendDevelopment #WebDevelopment #CSSAnimations #DOMManipulation #HTMLCSSJS #CodingProjects #WebAnimation #LearnToCode

✨ Rotating Glow Border Effect — Advanced CSS Only (No JavaScript) Built a hover-based glowing rotating border effect that creates a subtle 3D illusion using purely advanced CSS. No JavaScript. No DOM manipulation. Just deep control over CSS animations, pseudo-elements, and layering. On hover: • The border animates into a rotating glowing line • A 3D-like depth illusion enhances the card • Smooth transitions create a premium UI feel • Text and border glow dynamically without breaking layout This project was all about mastering: • CSS keyframe animations • Transform & rotation techniques • Gradient borders & masking tricks • Pseudo-elements (::before / ::after) for layered effects • Precise timing & performance-friendly animation It’s fascinating how powerful CSS alone can be when used creatively. Frontend isn’t always about logic — sometimes it’s about pushing design boundaries with pure styling. Mentor: Sheryians Coding School | Sarthak Sharma | Harsh Vandana Sharma | Ankur Prajapati 🧠 Tech Stack: HTML | Advanced CSS | SCSS #FrontendDevelopment #CSS #AdvancedCSS #CSSAnimation #WebDesign #UIEffects #NoJavaScript #BuildInPublic #DeveloperJourney #CreativeCoding

Maximum effort? More like maximum timepass. I kept seeing this viral Deadpool website concept floating around Pinterest and finally decided to turn the static design into real code. I built this purely for fun over a casual coding session to stretch my UI and animation muscles. Translating the bold typography, the character layering, and the dark theme into the browser was a great mini-challenge. The tech stack: - React - Framer Motion (for the smooth, dynamic animations) Sometimes, as developers, we need to take a step back from serious architecture and just build things because they look cool. Check out the live deployment here (preffered dekstop view for better visual experience) : https://lnkd.in/dWdwYfRU #ReactJS #FramerMotion #FrontendDev #WebDesign #UIUX #JavaScript #WebAnimations #CreativeCoding #FrontendDeveloper #WebDevelopment

🚀 Exploring Anime.js Tried working with Anime.js, a lightweight JavaScript library for creating smooth and interactive web animations — and honestly, it felt really interesting to use. 🔹 Highlights: ✔ Smooth and flexible animations ✔ Easy to integrate with JavaScript ✔ Makes UI more interactive and engaging It’s always exciting to explore tools that make web development more creative and fun. 💡 Building and sharing as I go! #JavaScript #AnimeJS #WebDevelopment #Frontend #CodingJourney #Learning

Built a fully interactive Connect 4 Game 🎮 using HTML, CSS & JavaScript with advanced UI, animations, sound effects, and scoreboard. A great hands-on project to strengthen frontend development skills 🚀 InternPe #WebDevelopment #JavaScript #Frontend #Projects #Learning

Launched: **Shimul.js** – A Modern JavaScript Animation Library I’m excited to share my latest project 👉 https://lnkd.in/gz2e2bpe **Shimul.js** is a lightweight, high-performance animation library built for modern web development. It helps developers create stunning UI interactions with minimal effort. ✨ **Key Features:** • Scroll-based animations (ScrollTrigger) • Beautiful text effects (letter & word animations) • 3D hover & image effects • Zero dependencies (~27KB) • React & Next.js ready • GPU-accelerated smooth performance Whether you're building a portfolio, landing page, or full web app — Shimul.js makes animations simple, fast, and powerful. ([Socket][1]) 💡 Built with a focus on performance, simplicity, and developer experience. 👉 Try it now: https://lnkd.in/gz2e2bpe I’d love your feedback, suggestions, and support 🙌 #JavaScript #WebDevelopment #Frontend #React #Animation #OpenSource #Developer [1]: https://lnkd.in/gi3q-7RB "shimul.js - npm Package Security Analysis - Socket"

🚀 CSS Animations and Transitions for Dynamic Effects CSS animations and transitions allow you to create dynamic effects without relying on JavaScript. Transitions provide a smooth change between two states of an element, triggered by pseudo-classes like `:hover`. Animations, on the other hand, allow you to define a sequence of keyframes to create more complex and controlled effects. Using these techniques can enhance the user experience by providing visual feedback and making your website more engaging. They improve usability and accessibility when used correctly. Learn more on our app: https://lnkd.in/gefySfsc #HTML #CSS #WebDesign #Frontend #professional #career #development

I spent time turning a scroll interaction into a cinematic experience — and this is the result. Optimus Prime | Scroll-Driven Transformer Sequence What I built: — 69 high-res frames rendered on HTML5 Canvas, synced to scroll velocity via Framer Motion — A real-time HUD diagnostic overlay that evolves across 3 phases of transformation — Awwwards-quality UI with Cybertronian design language — Orbitron typography, carbon palettes, and glowing micro-animations — Optimized for 4K/Retina with high-DPI canvas rendering Stack: Next.js 14 · TypeScript · Tailwind CSS v4 · Framer Motion · HTML5 Canvas The goal was simple — make the browser feel like a film set. Scroll-driven animation is one of the most underused storytelling tools in frontend development. This project pushed the boundary of what's possible without WebGL. Link : https://lnkd.in/dtVXbYuh If you're a frontend dev, a creative developer, or just someone who loves ambitious UI — drop a comment. Let's talk craft. #Frontend #WebDevelopment #NextJS #CreativeDev #FramerMotion #OpenSource #UIDesign #TypeScript #ScrollAnimation #WebAnimation

Have you ever looked at a website and thought, “How is this even built?” That was me when I saw the Anime.js website. What started as curiosity turned into one of the toughest builds I’ve ever taken on. I didn’t just explore it I rebuilt the entire experience from scratch. Every scroll, every transition, every 3D like motion detail… none of it came easy. It took hours of breaking things down, researching how animations actually behave, and retrying until it felt right. There were points where it felt almost impossible to match the smoothness and precision but that is exactly what made this project worth it. What changed for me after this: • I do not just “use” animations anymore I understand how they work • I gained real control over 3D style motion on the web • Scrollytelling finally clicked for me • My approach to frontend has completely leveled up This was not just a project it was a shift in how I think about building on the web. Curious what is the hardest thing you have ever tried to recreate? #FrontendDevelopment #JavaScript #AnimeJS #WebAnimation #Scrollytelling #3DWeb #CreativeCoding

Built a rotating carousel using pure CSS transforms to showcase dynamic blog content. No heavy libraries, just clean and efficient code. Key features: 8 blog cards rotating in a 3D circle Dynamic data fetching for real-time updates Smooth 32-second continuous rotation animation Hover-to-pause interaction for easy reading Blueprint grid background for a technical aesthetic Tech stack: HTML5, CSS3, JavaScript Shout out to @Lun Dev Code for the design inspiration. Looking to collaborate on similar projects? Let's connect! 👇 #WebDesign #FrontendDev #CSSAnimation #TechDesign #WebDevelopment