✨ Custom animations — smooth scrolling & micro-interactions 🖤 Design: clean black & white with bold orange accents 5 sections, fully built: Hero · About · Awards · Portfolio · Footer Where I actually struggled (the good stuff): → Animations that don't kill performance → Mobile responsiveness that doesn't just "kinda work" → Reusable components that don't become a mess → Getting Tailwind to do EXACTLY what the design says Every struggle taught me something a tutorial never would. If you're learning React + Tailwind — clone a design you love. Build it. Break it. Fix it. That's the real curriculum. 📚 Drop 🔥 for the GitHub link. Drop ❓ if you want a breakdown of any part! #ReactJS #TailwindCSS #Vite #FrontendDevelopment #JavaScript #WebDesign #Portfolio #100DaysOfCode #OpenToWork

🚀 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

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

🚀 Excited to share my new React project — Guess The Number 🎲 I built a Random Number Generator with a rolling dice animation where users can generate a number and try to guess it within a selected range. ✨ Features: 🎲 Dice rolling animation 🔢 Random number generation 🎯 Guess the number game ⚡ Min & Max range selection 🧮 Attempts counter 🎨 Font Awesome icons & background image 📱 Responsive design 🛠️ Built with: React.js | JavaScript | CSS | Font Awesome | Vite This project helped me improve my understanding of: React state management Event handling Conditional rendering CSS animations UI design Learning and growing consistently with Error Makes Clever 🚀 🌐 Live Website: https://lnkd.in/gWYE6CcE 🔗 GitHub Repository: https://lnkd.in/gPsJ8AZH I would love to hear your feedback and suggestions! 😊 #reactjs #javascript #webdevelopment #frontenddeveloper #vite #css #github #learning #projects

🚀 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

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

Building Interactive Parallax Engines with React & Framer Motion 🚀 Just finished integrating a custom Parallax Floating Component that takes user interaction to the next level. The challenge: Create a multi-layered depth effect that remains performant even with high-res imagery. The Stack: 🛠️ React & TypeScript for the component architecture. ⚡ Vite for ultra-fast HMR and building. 🎬 Framer Motion for state-of-the-art animation orchestration. 🎨 Tailwind CSS for the refined luxury styling. The logic uses a custom hook to track mouse position relative to the container’s center, applying individual 'depth' factors to each element. This creates a "magnetic" floating effect that makes the UI feel alive. Always looking for ways to push the boundaries of React animations! 👨💻 #ReactJS #TypeScript #FramerMotion #WebDev #UIEngineering #JavaScript

📌 Understanding @keyframes in CSS Today I explored how @keyframes works — the core concept behind defining animation steps in CSS. Instead of directly applying animations, @keyframes allows us to control how styles change over time using stages like: 🔹 from → to 🔹 0% → 100% 🔹 Intermediate steps (20%, 40%, etc.) 💡 Key takeaway: @keyframes is not the animation itself — it defines the timeline of style changes. This helps in creating structured and controlled UI transitions. Currently diving deeper into frontend development with practical examples. 👉 How do you usually structure your @keyframes? #CSS #WebDevelopment #Frontend #Coding #Learning #Developers #UIUX #100DaysOfCode

Stop using JavaScript for staggered animations.  New CSS functions handle the logic for you. 1. Two new CSS functions CSS now includes two tools to manage lists of elements: - sibling-index: it tells an element its exact position in a list. - sibling-count: it tells an element the total number of items in that list. 2. Automatic calculations In the past, we used JavaScript to give a number to every element. This process was slow and difficult to maintain.  Now, the browser calculates these values automatically. You do not need to update your code if you add or remove items. 3. A practical example I made a demo with 200 dots in a spiral. Each dot uses its index to calculate its position and its delay. The project uses native math functions like sine and square root. 4. Main benefits - The code is much shorter. - There is no JavaScript for the animation logic. - The style is clean and easy to update. Want the demo? Let's have a look to https://lnkd.in/eWqKDxZQ

Many developers still rely on custom CSS variables or even JavaScript to define scroll-driven animations, creating unnecessary complexity and brittle codebases. This often leads to animations that are hard to debug, poorly performant, and challenging to synchronize across different scroll containers. Historically, achieving robust scroll-driven effects meant juggling Intersection Observer APIs or custom scroll event listeners, then manipulating CSS properties with JavaScript. Even with early CSS `animation-timeline` drafts, developers had to declare a custom timeline name using `--scroll-timeline` (as seen in the old method example), which added an extra, often redundant, step. Ignoring the native `view()` timeline means your animations remain less declarative and potentially less optimized by the browser. You lose out on the built-in efficiency and simplicity of the platform's dedicated solution, leading to more code, more bugs, and a slower development experience. Are you still defining custom timelines for scroll-driven animations? #css #webdev #frontend #animation #scrollanimation