🚀#Day_Progress_Update_Frontend_Journey Today’s learning was all about making the UI more interactive and dynamic using HTML, CSS, and JavaScript. 🎯 I built a small project where bubbles appear on the screen exactly at the position where the user clicks. 🫧✨ 🔍 What I worked on: • Capturing user click events using JavaScript • Getting exact mouse coordinates (X & Y position) • Dynamically creating elements using DOM manipulation • Styling bubbles with CSS (shape, color, animation) • Positioning elements precisely on the screen 💡 What I learned: This project helped me understand how real-time user interaction works in web applications. I also got more comfortable with event handling and how JavaScript connects with HTML & CSS to create engaging UI effects. ⚡ It may look like a small feature, but it’s a big step toward building interactive web apps and improving my frontend skills. Consistency is key — learning something new every day! 💻🔥 #WebDevelopment #JavaScript #Frontend #CodingJourney #LearningInPublic #100DaysOfCode

Today, I continued refreshing my React fundamentals by building a reusable Accordion component from scratch. 🔍 What I Built A dynamic accordion where: 💠 Only one section opens at a time 💠Clicking again closes it 💠Smooth expand/collapse animation 💠Clean and reusable component structure Concepts & Features Used 🔹 useState – Managed active item with toggle logic 🔹 Conditional Rendering – Show/hide content based on state 🔹 Dynamic Rendering – Used .map() for scalable UI 🔹 Event Handling – Handled user clicks efficiently 🔹 Animations – Smooth transitions + rotating icon 🔹 Accessibility – Used ARIA attributes for better UX Live Demo: https://lnkd.in/gRUzTSnJ Even a simple component like an accordion can teach a lot about: State management UI behavior Clean logic design Accessibility best practices Refreshing React by building small components like this is helping me think more in components and less in just code. 🙏 If you spot any improvements, better approaches, or mistakes in my implementation, feel free to share. Let’s learn and grow together 🚀 #ReactJS #FrontendDevelopment #Accordion #JavaScript #UIComponents #LearningJourney #DeveloperGrowth #100DaysOfCode #KeepLearning

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

I spent 7 years working around a wall React Native built into itself. Every time I tried to animate a layout prop with useNativeDriver: true - width, height, flex, position - the framework threw it back at me. React Native 0.85 just tore that wall down. And it's bigger than just one fix. Swipe to see what changed → Here's the full breakdown of what dropped: 🔥 New Shared Animation Backend - Animated and Reanimated now share a single unified engine inside RN core. Layout props like width, height, flex, and position can finally be animated with the native driver. No workarounds. No compromises. 🔌 Multi-tool CDP connections - React Native DevTools, VS Code, and AI agents can now all connect simultaneously. No more sessions killing each other mid-debug. 📦 Jest Preset extracted - Moved to its own package for a leaner core and cleaner test setup. 🔍 Network panel restored on Android - Request body previews are back after a regression had silently disabled them. 604 commits. 58 contributors. The Bridge is gone. The New Architecture is now the foundation - not a migration path. If you're still on 0.82.x, note that it just hit end of support with this release. The era of compromising on animations because of framework limitations? That chapter is officially closed. 👇 What version are you on right now - and what's your upgrade path to 0.85? #ReactNative #MobileDevelopment #ReactNative085 #FrontendEngineering #JavaScript #OpenSource #NewArchitecture #SoftwareDevelopment

Just deployed my new personal portfolio, and I’m incredibly happy with the technical stack behind the scenes! 💻🔥 I set out to build a seamless, cinematic "scrollytelling" experience without compromising on performance. Here’s a look under the hood: ⚡ Next.js for fast, server-side rendered React magic 🎞️ HTML5 Canvas for rendering high-fidelity, scroll-bound image sequences 🟢 GSAP (ScrollTrigger) to orchestrate complex parallaxing, pinning, and timeline animations ☁️ Cloudinary for heavily optimized, edge-delivered visual assets 💎 Modern CSS (Glassmorphism, custom layouts, and responsive design) Getting canvas rendering and scroll animations to perform smoothly at 60fps on mobile was a fantastic challenge. I’d love to hear feedback from my fellow devs and designers! Check out the live build below: 🔗 https://lnkd.in/gvjvvfKg #SoftwareEngineering #FrontendDevelopment #NextJS #GSAP #CreativeDevelopment #WebPerformance #ReactJS #Portfolio

As a frontend developer, your job isn’t just to make things work it’s to make them feel right. Users don’t notice clean code. They notice how fast a page loads. How smooth an animation feels. How easy it is to find what they need. That’s the difference between building a website… and crafting an experience. Good frontend isn’t just about HTML, CSS, or JavaScript. It’s about empathy understanding how someone interacts, thinks, and feels while using your product. Because at the end of the day, people don’t remember code… They remember how your product made them feel. #FrontendDevelopment #WebDevelopment #UserExperience #UXDesign #UIUX #JavaScript #ReactJS #DeveloperMindset #CodingLife #BuildInPublic

🚀 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

I finally built my portfolio website, and I have a confession to make. I "VIBE CODED" the entire thing into existence in just a few hours. React, TypeScript, Vite, some Framer Motion animations, a couple of prompts, and it was up and running. The iterating, redesigning, tweaking that one pixel that nobody else would ever notice, going back and forth on whether the hero text sounds "right," and debating color palettes at 2 AM? That took significantly longer than I'd like to admit. I think that's the part nobody tells you about vibe coding. Getting the code to work is the easy part. You describe what you want, you refine, you build components, and it works. But then you look at it and go "hmm, that section feels off," and suddenly three hours have disappeared while you adjust spacing and swap fonts for the twelfth time. The stack I ended up with was React 19 with TypeScript and Vite for the build tooling, which made the development itself incredibly fast. I added Framer Motion for scroll animations and interactive hover effects, deployed it on Vercel, and the whole thing was live in no time. The vibe coding got me there quickly, which is both a blessing and a curse, because it gives you all the extra time in the world to obsess over the design. If I'm being honest, I probably spent 80% of the total time on design decisions and 20% on the actual coding. And I wouldn't change a thing, because the details are what make it feel like yours. So, if you're thinking about building your own portfolio, my advice is simple. Just start. The tools today make it easier than ever to vibe code something real into existence. But also, budget twice as much time as you think you'll need, because you will redesign that header at least four times. And if you want to know more about the process or need help with your own portfolio project, feel free to reach out. Check it out and let me know what you think! adithyaramakrishnan.tech #VibeCoding #WebDevelopment #React #TypeScript #Portfolio #FrontendDevelopment #BuildInPublic

Building a custom header that feels "native" in React Native is notoriously difficult. You either stick with the rigid defaults provided by navigation libraries, or you build a custom component and spend days fighting to get the scroll sync and screen transitions to look fluid. It’s a classic trade-off between stability and customisation that often leads to janky animations. 𝗿𝗲𝗮𝗰𝘁-𝗻𝗮𝘁𝗶𝘃𝗲-𝗵𝗲𝗮𝗱𝗲𝗿-𝗺𝗼𝘁𝗶𝗼𝗻 just hit 𝘃𝟭.𝟬.𝟬, and it’s a complete shift in how we handle these complex UI patterns. Instead of fighting against the navigation stack, it introduces a way to bridge the gap between your content and the header area with precision. 𝗪𝗵𝗮𝘁’𝘀 𝗻𝗲𝘄 𝗶𝗻 𝘁𝗵𝗶𝘀 𝗿𝗲𝗹𝗲𝗮𝘀𝗲? ➡️ 𝗖𝗼𝗻𝘁𝗲𝘅𝘁-𝗙𝗶𝗿𝘀𝘁 𝗛𝗲𝗮𝗱𝗲𝗿 𝗔𝗣𝗜 — A redesigned architecture that uses React context to manage header state. This makes it much easier to update header elements based on what’s happening deep inside your screen's component tree without messy prop drilling. ➡️ 𝗘𝘅𝗽𝗹𝗶𝗰𝗶𝘁 𝗡𝗮𝘃𝗶𝗴𝗮𝘁𝗶𝗼𝗻 𝗕𝗿𝗶𝗱𝗴𝗶𝗻𝗴 — The library now explicitly bridges with the navigation state, ensuring that as you swipe between screens, the header transitions are perfectly synchronised with the native navigation animation. ➡️ 𝗕𝗲𝘁𝘁𝗲𝗿 𝗣𝗲𝗿𝗳𝗼𝗿𝗺𝗮𝗻𝗰𝗲 — Significant internal refactors have reduced the overhead of tracking scroll positions and state changes, delivering much smoother motion even in complex layouts. 𝗪𝗵𝘆 𝗶𝘁 𝗺𝗮𝘁𝘁𝗲𝗿𝘀? For a long time, achieving that polished "Apple-style" large header that morphs and moves was reserved for apps with massive engineering teams. With the 𝘃𝟭.𝟬 milestone, 𝗿𝗲𝗮𝗰𝘁-𝗻𝗮𝘁𝗶𝘃𝗲-𝗵𝗲𝗮𝗱𝗲𝗿-𝗺𝗼𝘁𝗶𝗼𝗻 makes these high-end interactions accessible to everyone, providing a stable, performant foundation for design systems that need to stand out. #ReactNative #MobileDev #UIUX #OpenSource #JavaScript #TypeScript #Animations #Navigation #HeaderMotion #SoftwareEngineering #DevTools #MobileAppDev

🚀 Built a Memory Card Game using React + Tailwind CSS! Excited to share my latest project where I implemented a fun and interactive memory card game. 🔹 Features: • Smooth UI with Tailwind CSS • State management using React Hooks • Game logic with card matching functionality • Responsive design 💡 This project helped me improve: • Component structuring • State handling • UI design skills 🔗 Live Demo: https://lnkd.in/gZ3Ajude 🔗 GitHub Repo: https://lnkd.in/gEgueXny I’m currently focusing on building real-world projects and improving my frontend skills. Would love your feedback! 🙌 #ReactJS #TailwindCSS #WebDevelopment #FrontendDeveloper #Projects #LearningInPublic