Forem: Lakshmanan Arumugam

5 Reasons why I Started My YouTube Channel and Blog

Lakshmanan Arumugam — Tue, 24 Sep 2024 03:30:00 +0000

About Me

I have over 9 years of experience in frontend development, specializing in HTML, CSS, SASS, JavaScript, React.js, and Node.js. Throughout my career, I’ve worked with various startups and multinational companies, each offering unique skills and challenges.

I believe that learning is most effective when shared. While self-study teaches valuable lessons, collaborating with others in a work environment provides different insights. That’s why I’m committed to sharing all the knowledge and skills I’ve gained with everyone.

Why I Decided to Start a Technical Blog and YouTube Channel?

Writing a technical blog offers numerous benefits beyond just helping others. Here are five compelling reasons to consider starting one:

Deepen Your Knowledge: Teaching others solidifies your understanding of the subject.

Provide Value: Sharing solutions enhances your reputation at work and shows initiative.

Enhance Critical Thinking: Researching and organizing information sharpens your problem-solving skills.

Showcase Communication Skills: Blogging demonstrates your ability to convey complex ideas clearly.

Personal Growth: Starting this journey pushed me out of my comfort zone, teaching me to embrace vulnerability and take risks, which has greatly enhanced my resilience and adaptability.

Conclusion

Creating my YouTube channel and blog has been transformative. Sharing my passions, learning through teaching, and building a community has been incredibly rewarding. If you’re considering starting your own platform, take the leap—you never know what opportunities await!

How to build a unique full stack app for your portfolio

Lakshmanan Arumugam — Wed, 18 Sep 2024 14:30:21 +0000

Hello everyone👋,

In this tutorial, we’re diving into the world of full-stack web development with a comprehensive guide that covers everything you need to build an impressive project portfolio. Whether you're a beginner looking for your first full-stack project, a student working on final year assignments, or a professional aiming to enhance your resume, this video has got you covered.

Tech Stack

React, Tailwind CSS, Shadcn UI and Supabase.

Here's what we’ll explore:

Creating a Full-Stack Portfolio Website: Learn how to design and develop a dynamic portfolio site using HTML, CSS, and JavaScript. Showcase your best projects and skills effectively.

Full-Stack Project Ideas: We’ll provide you with innovative project ideas to help you build a robust portfolio, including a variety of concepts from microservices to dynamic websites.

ReactJS Projects: Get hands-on experience with ReactJS by building a project that integrates both front-end and back-end technologies, perfect for your portfolio.

Full-Stack Tutorial: Follow along as we break down the steps for creating a full-stack website from scratch. This tutorial covers both the front-end and back-end development, offering a practical approach to full-stack web development.

Source Code & Project Examples: We’ll share source code for various full-stack projects, so you can learn by doing. This includes beginner-friendly projects as well as more advanced examples to challenge yourself.

Course & Placement Preparation: For those looking to boost their skills through a full-stack web development course or prepare for placement interviews, this video offers tips and project suggestions that can make your resume stand out.

By the end of this tutorial, you’ll have a solid understanding of how to create, manage, and showcase full-stack projects, equipping you with the skills needed for both personal growth and professional success. Don’t forget to like, subscribe, and hit the notification bell to stay updated with our latest content!

Let's get started on your full-stack development journey!

Timelines:
0:13 Project demo
9:49 Explain Project Functional requirement
12:33 Project base setup
18:58 Supabase configuration
27:09 Admin portal route setup
43:19 Admin portal main layout design
49:46 Admin portal page UI design base setup
1:01:43 Admin page event page
1:30:52 Event page CRUD
2:00:51 Sharable URL and delete operation
2:49:34 Audience live questions page setup
3:32:00 Audience live question CRUD
3:59:34 Audience live question reaction
4:07:11 Audience event and questions authendication
4:52:23 Audience live question tab category
4:58:22 Audience APP version 1 project completed

Thanks for you support !

SSR 🆚 SSG: A Game-Changer for Your Web App ☄️

Lakshmanan Arumugam — Wed, 28 Aug 2024 03:30:00 +0000

Why?

Building a web app using Static Site Generation (SSG) over Server-Side Rendering (SSR) can be a great choice for performance and scalability, especially if your content doesn't change frequently. Let's go into deep.

When SSG Good for App/Website?

Content-Driven Websites:
Blogs: Articles and posts that are created once and rarely change are perfect for SSG. The content can be generated at build time and served as static files.
Documentation: Technical documentation sites benefit from SSG because they involve static content that doesn’t need frequent updates, ensuring fast load times.
Portfolio Sites: Personal portfolios, artist showcases, and resumes that don’t need dynamic content are ideal for SSG.
Marketing Websites: Landing pages and company websites where the content remains relatively constant are well-suited for SSG.
E-Commerce with Limited Product Variations:
Static Product Pages: If your e-commerce store has products that don’t frequently change in description or availability, SSG can serve these pages quickly.
Category Pages: Product categories that don't require real-time updates can be pre-built and served as static pages.
Landing Pages:
SEO-Focused Pages: Landing pages created for marketing campaigns can be generated with SSG, providing fast load times and good SEO performance.
Event Pages: Static pages for events or promotions that don’t require user interaction can benefit from SSG.
Documentation and Guides:
Technical Documentation: SSG is great for creating fast, easily navigable documentation sites, especially when paired with search and filtering functionalities.
Tutorials and How-Tos: Educational content that doesn’t need frequent updates can be served efficiently using SSG.
Static Portfolio or Showcase Sites:
Creative Portfolios: Artists, photographers, designers, and other creatives can showcase their work with static sites that load quickly and look great.
Case Studies: Companies can present their case studies in a static format for fast and reliable access.
News and Magazine Sites:
Static Articles: News sites where the content is written once and then served as static pages can benefit from SSG for faster delivery.
Open Source Project Sites:
Project Overviews: Websites for open source projects that include documentation, community pages, and release notes are great candidates for SSG.
Personal Websites:
Blogs and Journals: Personal blogs or journals that don't require dynamic content or user interaction can leverage SSG for fast and efficient delivery.
Static Resumes: Online resumes or CVs that are static in nature are ideal for SSG.
Multi-Language Sites:
Localized Content: Websites offering content in multiple languages can use SSG to pre-generate pages for each language, ensuring consistent performance across all versions.
High-Traffic Websites with Unchanging Content:
Corporate Websites: Company homepages and informational pages that don’t change frequently can scale effectively with SSG.
Archives: Static archives of content, such as old news articles, research papers, or historical documents, can be served using SSG.

Note: If you website/App not applicable in the above criteria think other options

How it works?

Do you want to know How to build and deploy it. refer the below example

If you find this helpful please like and add comment.

Thanks for reading 🙏

From Zero to Hero: Build Full stack Food Delivery App using Next.js and PostgreSQL

Lakshmanan Arumugam — Sat, 13 Jul 2024 05:33:35 +0000

In today's fast-paced world, the demand for efficient food delivery services is higher than ever. To meet this demand, creating a robust and user-friendly food delivery app is crucial. This blog post will guide you through building a food delivery app using Next.js, incorporating essential features for users, restaurants, and administrators. Moreover, this guide will help you upskill your knowledge in modern web development practices. Let's dive in!

Core Features

👨‍👩‍👧 User

User Registration and Login
Social Media Login Options: Allow users to register and log in using their Google account or mobile number for a seamless experience.
Email and Password Login: Traditional email and password authentication for those who prefer it.
Browse Restaurants
Search and Filter: Users can search and filter restaurants by cuisine, location, rating, and more.
Restaurant Details: Provide comprehensive details including menus, photos, and operating hours.
Menu Display
Detailed Menus: Each restaurant's menu will feature item descriptions, prices, and high-quality images to entice users.
Order Placement
Add to Cart: Users can easily add items to their cart.
Customization: Options to customize orders, such as extra toppings or removing ingredients.
Order Summary and Confirmation: A clear summary of the order before final confirmation.
Payment Gateway Integration
Multiple Payment Options: Support for credit/debit cards and mobile wallets.
Secure Payment Processing: Ensure secure transactions through Stripe integration.
Order Tracking
Real-Time Updates: Keep users informed with real-time status updates and estimated delivery times.
User Profile
Personal Details: Users can view and edit their personal information.
Order History: Access to past orders for reordering or reference.
Notifications
Push Notifications: Send updates about order status, promotions, and more using Socket.io and web sockets.

👨‍🍳 Restaurant

Restaurant Registration and Login
Easy Onboarding: Simplified registration process for restaurants.
Dashboard Access: A dedicated dashboard for managing their presence on the platform.
Menu Management
Manage Menu Items: Add, edit, and delete menu items with ease.
Availability: Control the availability of items in real-time.
Order Management
Incoming Orders: View and manage incoming orders efficiently.
Update Order Status: Update the status of orders (preparing, out for delivery, delivered).
Profile Management
Edit Details: Update restaurant details such as address, hours, and contact information.
Analytics
Sales Reports: Basic reports to track sales performance.
Order Statistics: Insights into order trends and customer preferences.

Admin Side

Admin Dashboard
User and Restaurant Management: Oversee and manage all users and restaurants on the platform.
App Statistics: View comprehensive statistics to monitor app performance.
Content Management
Promotional Content: Manage and schedule promotional content.
Issue Handling: Address issues reported by users and restaurants.

Technology Stack

Frontend

Framework: Next.js 14 for a powerful, server-rendered application.

Design: Tailwind CSS 3 and shadcn UI for a sleek, responsive design.

State Management: Context API for efficient state management.
Backend

Database: PostgreSQL for reliable and scalable data storage.
Authentication: JWT (JSON Web Tokens) for secure user authentication.

Third-Party Services
Payment Gateway: Stripe for secure and flexible payment processing.

Notification Service: Socket.io and web socket for real-time notifications.

Upskill Your Knowledge

Building a food delivery app is not just about creating a functional product; it's also an opportunity to enhance your web development skills. Here are some ways you can upskill your knowledge through this project:

Master Next.js:

Server-Side Rendering (SSR): Understand the benefits of SSR for SEO and performance.
Static Site Generation (SSG): Learn how to pre-render pages at build time.
API Routes: Use Next.js API routes to handle backend logic directly within your Next.js app.
Design with Tailwind CSS and shadcn UI:
Responsive Design: Create a responsive and visually appealing interface.
Utility-First CSS: Use Tailwind CSS to quickly style your components with utility classes.
UI Components: Utilize shadcn UI for consistent and reusable components.
State Management with Context API:
Global State Management: Manage global state efficiently using Context API.
Performance Optimization: Optimize state management to prevent unnecessary re-renders.

Secure Authentication with JWT:

Token-Based Authentication: Implement secure authentication using JWT.
Authorization: Protect routes and resources based on user roles.
Integrate Third-Party Services:
Stripe Integration: Learn to integrate and manage payments with Stripe.
Real-Time Communication: Use Socket.io for real-time notifications and updates.

Database Management with PostgreSQL:

Data Modeling: Design efficient database schemas.
SQL Queries: Write complex queries to retrieve and manipulate data.
Deployment and Scaling:
Vercel Deployment: Deploy your Next.js app on Vercel for seamless scaling.
Performance Monitoring: Monitor app performance and optimize for better user experience.

Conclusion

Building a food delivery app with Next.js can provide users with a seamless and enjoyable experience while offering restaurants the tools they need to manage their operations efficiently.

By integrating essential features like secure payment processing, real-time order tracking, and comprehensive user profiles, you can create a robust platform that meets the needs of both users and restaurants. Additionally, this project offers a valuable opportunity to enhance your web development skills, making you a more proficient and versatile developer.

Start your journey today and revolutionize the food delivery industry! 🧑‍💻

Ultimate guide to👨‍💻 Build & 🚀 Deploy Full Stack App Next.js

Lakshmanan Arumugam — Fri, 19 Jan 2024 03:45:00 +0000

🌐 Introduction:

Welcome to Simple Dev Code! In this comprehensive tutorial, we'll guide you through the process of creating your own full stack portfolio website from scratch. Whether you're a beginner or an experienced developer, this step-by-step guide will help you showcase your skills and projects in style.

🔧 What You'll Learn:

⚙️ Setting up the development environment Next.js/React.js
🗄️ Setting up supabase project with Next.js
📲 Shadcn UI installation and usage
🔐 Authentication
🏁 Next.js 14 API App router creation and usage
🛡 Private router creation and authentication
📊 Dynamic Routes creation and usage in Next.js 14
📝 Notion theme editor integration
🔌 CRUD API creation using Next.js 14 (API routing)
🗃️ Creating/Alter supabase PostgreSQL table
🌆 Storing and retrieve images via supabase storage
🧩 Image Upload API Implementation ultimate guide
🗒️ Pagination and search operation API creation and implementation
🔎 Debounce API call method tutorial in Next.js 14
🚀 Deploying portfolio website and CMS online for the world to see

⚙️ Tools and Technologies Used:

✔️ Next.js 14
✔️ React.js
✔️ Tailwind CSS
✔️ TypeScript
✔️ Shadcn ui
✔️ Supabase/PostgreSQL

👨‍💻 Who Should Watch:

Aspiring Full Stack Developers
Web/Frontend Developers looking to enhance their skills
Students and Beginners in programming

Here are the some details:

Git Link: Source code
Demo URL: Demo URL

👍 Connect with Simple Dev Code:
Subscribe for more tutorials: Subscribe
Follow on Instagram: Instagram
Follow on LinkedIn: Linkedin

🙏 Thanks for reading my blog! Don't forget to share, link and follow me. feel free to ask questions in comment section.

👨‍💻 Happy coding!

Showcasing Excellence: A Step-by-Step Guide to Your Kickass Portfolio

Lakshmanan Arumugam — Wed, 29 Nov 2023 04:02:00 +0000

Introduction:

In the competitive world we live in, a standout portfolio is your golden ticket to success. Whether you're a designer, writer, photographer, or any other creative professional, a kickass portfolio can make all the difference. In this step-by-step guide, we'll walk you through the process of creating an exceptional portfolio that not only showcases your skills but leaves a lasting impression on potential clients or employers.

Simple/Elegant portfolio template

Step 1: Define Your Purpose

Before you dive into the creation of your portfolio, it's crucial to understand its purpose. Ask yourself: What do you want to achieve with your portfolio? Are you looking to attract clients, land a dream job, or simply showcase your work for personal satisfaction? Clearly defining your purpose will guide every decision you make during the portfolio creation process.

Step 2: Select Your Best Work

Quality over quantity is the golden rule here. Choose a selection of your absolute best work that aligns with your goals. Your portfolio is a representation of your skills and style, so make sure each piece reflects the high standards you aim to uphold.

Step 3: Craft a Compelling Narrative

Your portfolio is not just a collection of images or text—it's a story. Craft a compelling narrative that ties your work together. Explain the thought process behind each project, the challenges you faced, and how you overcame them. This narrative adds depth to your portfolio and provides insight into your creative process.

Step 4: Choose the Right Platform

Selecting the right platform to showcase your portfolio is crucial. Whether it's a personal website, Behance, Dribbble, or another platform, make sure it aligns with your target audience. A clean, user-friendly design that puts your work front and center is essential. Consider the platform's features, customization options, and ease of navigation.

Step 5: Optimize for Mobile Viewing

In an era where people use various devices to browse the internet, it's imperative that your portfolio looks great on both desktop and mobile devices. Ensure that your chosen platform offers responsive design, or customize it to provide a seamless experience across all screen sizes.

Step 6: Keep it Updated

Your portfolio is a dynamic representation of your skills and growth. Regularly update it with your latest and best work. Remove outdated pieces that no longer align with your current style or skill level. This not only keeps your portfolio relevant but also demonstrates your commitment to continuous improvement.

Conclusion:

Creating a kickass portfolio is not just about displaying your work; it's about telling a compelling story that resonates with your audience. By following these steps, you'll be well on your way to showcasing excellence and making a lasting impression on those who view your portfolio. Remember, your portfolio is an evolving entity—nurture it, update it, and let it reflect the true essence of your creative journey.

Thanks for reaching the bottom of our blog post! If you've enjoyed our content, take the next step: subscribe to our YouTube channel for exclusive perks.

🪄 CSS Animation: Card hover animation 💫

Lakshmanan Arumugam — Mon, 27 Nov 2023 03:00:00 +0000

Live video example

youtube.com

Introduction

Creating a Nike-style hover animation using Tailwind CSS involves combining the utility classes provided by Tailwind with custom styles for the hover effect. Here's a basic example to get you started:

Source code:

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
            transitionProperty: {
                'background': 'background'
            }
        }
      }
    }
  </script>
</head>
<body class="bg-[url('./images/background.png')] bg-auto">
  <main class="flex items-center justify-center h-screen">
    <div class="gap-20 w-6/12 m-auto">
        <div class="flex h-2 mb-20">
            <h1 class="text-white text-3xl font-semibold">Best selling</h1>
        </div>
        <div class="flex items-center justify-between">
            <div class="box bg-gray-100 p-4 rounded-md shadow-md hover:shadow-xl shadow-md group hover:bg-gradient-to-r from-indigo-400 to-indigo-300 transition-all delay-100">
                <img src="./images/1.png" width="180px" class="drop-shadow-2xl -rotate-45 group-hover:rotate-0 -translate-y-4 -translate-x-2 group-hover:-translate-y-2 group-hover:translate-x-1 delay-100 transition-all"/>
                <h2 class="text-gray-500 font-semiBold group-hover:text-white">Nike E-Series AD</h2>
                <p class="text-gray-400 group-hover:text-gray-50">₹ 6,395</p>
            </div>
            <div class="box bg-gray-100 p-4 rounded-md shadow-md hover:shadow-xl shadow-md group hover:bg-gradient-to-r from-zinc-400 to-zinc-300 transition-all delay-100">
                <img src="./images/2.png" width="180px" class="drop-shadow-2xl -rotate-45 group-hover:rotate-0 -translate-y-4 -translate-x-2 group-hover:-translate-y-2 group-hover:translate-x-1 delay-100 transition-all"/>
                <h2 class="text-gray-500 font-semiBold group-hover:text-white">Nike E-Series AD</h2>
                <p class="text-gray-400 group-hover:text-gray-50">₹ 6,495</p>
            </div>
            <div class="box bg-gray-100 p-4 rounded-md shadow-md hover:shadow-xl shadow-md group hover:bg-gradient-to-r from-green-400 to-green-300 transition-all delay-100">
                <img src="./images/3.png" width="180px" class="drop-shadow-2xl -rotate-45 group-hover:rotate-0 -translate-y-4 -translate-x-2 group-hover:-translate-y-2 group-hover:translate-x-1 delay-100 transition-all"/>
                <h2 class="text-gray-500 font-semiBold group-hover:text-white">Nike E-Series AD</h2>
                <p class="text-gray-400 group-hover:text-gray-50">₹ 6,695</p>
            </div>

        </div>
    </div>
  </main>
</body>
</html>

Thanks for reaching the bottom of our blog post! If you've enjoyed our content, take the next step: subscribe to our YouTube channel for exclusive perks.

🚀 Fastest way to build transparent login page HTML/CSS

Lakshmanan Arumugam — Sun, 26 Nov 2023 06:00:00 +0000

Live video example

Introduction

Creating a transparent login page involves combining HTML, CSS to achieve the desired effect. Below is a simple example using HTML and CSS to create a transparent login page. Keep in mind that this example assumes a basic understanding of web development.
HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Transparent login page</title>
    <style type="text/css">
        @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&family=Open+Sans:wght@300;500;600&display=swap');
        *, *::after, *::before{
            box-sizing: border-box;
        }
        body {
            margin: 0;
            background: linear-gradient(90deg, #0D0D0D 0%, #8A8887 100%);
            font-family: 'Montserrat', sans-serif;
            font-family: 'Open Sans', sans-serif;
        }
        main {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            gap: 2rem;
            max-width: 1200px;
            margin: auto;
        }
        main::before {
            content: "";
            background: url("./assets/bg-transparent.png");
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            background-size: contain;
            width: 100%;
            height: 100%;
            background-repeat: no-repeat;
            z-index: -1;
        }
        form {
            background: rgba(99, 95, 95, 0.16);
            backdrop-filter: blur(15px);
            padding: 5rem 4rem;
            border-radius: 1rem;
            min-width: 380px;
            filter: drop-shadow(0px 4px 70px rgba(0, 0, 0, 0.10));
        }
        label {
            font-size: 0.9rem;
            color: #d4d2d2;
            margin-bottom: 5px;
            display: block;
            font-weight: 300;
        }
        h1 {
            color: white;
        }
        input {
            width: 100%;
            padding: 0.9rem;
            border-radius: 0.4rem;
            border: none;
            outline: none;
            font-weight: 300;
            font-size: 0.9rem;
            color: #333;
            background-color: white;
        }
        .form-group {
            margin-bottom: 1.4rem;
        }
        button {
            width: 100%;
            padding: 1rem;
            border-radius: 0.4rem;
            background-color: rgba(233, 101, 47, 0.7);
            border: none;
            display: block;
            font-size: 1rem;
            font-weight: 600;
            margin: 0;
            color: white;
            cursor: pointer;
            transition: ease 0.2s;
        }

        button:hover {
            background-color: rgba(233, 101, 47, 1);
        }

        .info-content {
            text-align: center;
            color: #dddddd;
            font-size: 0.8rem;
            font-weight: 300;
        }
        .banner {
            width: 100%;
            height: auto;
        }
        .link {
            font-size: 0.9rem;
            font-weight: 400;
            margin-left: 5px;
            cursor: pointer;
        }
        .link:hover {
            color: white;
        }
        .social-icons {
            display: flex;
            align-items: center;
            justify-content: space-evenly;
            margin: 1.5rem 0;
            gap: 2rem;
        }

        .social-icons a {
            height: auto;
            padding: 0.5rem 2rem;
            background-color: white;
            border-radius: 3rem;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }
        .social-icons a:hover {
            background-color: #DDD;
        }
        .social-icons > a > img {
            width: 24px;
            height: auto;
        }

        .forgot-link {
            font-size: 0.7rem;
            font-weight: 300;
            margin-top: 0.3rem;
            color: #DDD;
            cursor: pointer;
        }
        .forgot-link:hover {
            color: white;
        }

        .flex-50 {
            flex: 50%;
        }

        ::placeholder {
            color: #d1cfcf;
            font-weight: 300;
            font-size: 0.9rem;
        }

    </style>
</head>
<body>
    <main>
        <div class="flex-50">
            <form>
                <h1>Sign In</h1>
                <div class="form-group">
                    <label>Email address</label>
                    <div>
                        <input type="text" placeholder="Email address"/>
                    </div>
                </div>
                <div class="form-group">
                    <label>Password</label>
                    <div>
                        <input type="text" placeholder="Password"/>
                    </div>
                    <a class="forgot-link">Forgot Password?</a>
                </div>
                <div>
                    <button type="submit">Sign In</button>
                </div>
                <div>
                    <p class="info-content">or continue with</p>
                </div>
                <div class="social-icons">
                    <a><img src="./assets/google.svg"/></a>
                    <a><img src="./assets/github.svg"/></a>
                    <a><img src="./assets/facebook.svg"/></a>
                </div>
                <div>
                    <p class="info-content">Don’t have an account yet?<a class="link">Register account</a></p>
                </div>
            </form>
        </div>
        <div>
            <img src="./assets/bg-img.png" class="banner" width="400px"/>
        </div>
    </main>
</body>
</html>

Thanks for reaching the bottom of our blog post! If you've enjoyed our content, take the next step: subscribe to our YouTube channel for exclusive perks.

100 days of CSS animation code challenges - Reveal

Lakshmanan Arumugam — Sun, 19 Nov 2023 06:00:00 +0000

1. Rotation text animation - HTML/CSS

youtube.com

2. Glowing text animation - HTML/CSS

youtube.com

3. Gradiant text animation - HTML/CSS

4. Shiny text animation - HTML/CSS

youtube.com

5. Card outer flow animation - HTML/CSS

youtube.com

6. Blurry card hover animation - HTML/CSS

youtube.com

7. Content pop-up card hover animation - HTML/CSS

youtube.com

8. Photo gallery hover animation - HTML/CSS

youtube.com

9. 3D box model hover animation - HTML/CSS

youtube.com

10. Scroll driven text animation - HTML/CSS

Thanks for reaching the bottom of our blog post! If you've enjoyed our content, take the next step: subscribe to our YouTube channel for exclusive perks.

Interactive typography rotation effects CSS | no javascript

Lakshmanan Arumugam — Tue, 31 Oct 2023 20:33:25 +0000

In this comprehensive CSS smooth text rotation animation tutorial, you'll learn how to create eye-catching text rotation effects for your website. We'll walk you through the entire process step by step, so whether you're a beginner or an experienced web developer, you'll find value in this tutorial.

Key Topics Covered:

✅ CSS3 keyframe animations
✅ Creating a seamless text rotation effect
✅ Transition timing and easing functions
✅ Tips for optimizing web typography

HTML and CSS Code:

<html>
    <head>
        <title>Text animation - part 2</title>
        <style type="text/css">
            body {
                background-color: black;
                color: white;
                font-family: Verdana, Geneva, Tahoma, sans-serif;
            }
            .header {
                display: flex;
                align-items: center;
                padding: 40px 28px;
            }
            .brand {
                flex: 1 1 auto;
                font-size: 30px;
                font-weight: bolder;
            }
            .navigation {
                list-style: none;
                margin: 0;
                padding: 0;
                display: flex;
                flex-basis: 80%;
                text-align: right;
                gap: 20px;
            }

            .navigation > li {
                align-items: center;
            }

            .navigation > li > a {
                color: #999;
                cursor: pointer;
            }

            .navigation > li > a:hover {
                color: white;
            }

            .main-section {
                display: flex;
                align-items: center;

                justify-content: center;
                height: calc(100% - 120px);
            }

            .context-content {
                display: flex;
            }

            .running-text {
                list-style: none;
                margin: 0;
                padding: 0;
                margin-left: 10px;
                height: 40px;
                overflow: hidden;
            }

            .running-text > li {
                display: block;
                animation: change 10s infinite;
                transform: translate3d(0,0,0);
            }

            .running-text > li > p {
                margin: 0;
                padding: 0;
                background: -webkit-linear-gradient(#eee, #6d37c5);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }

            @keyframes change {
                0%, 13%, 100% {transform:translate3d(0,0,0);}
                18%, 28% {transform:translate3d(0,-97%,0);}
                35%,46% {transform:translate3d(0,-200%,0);}
                50%,65% {transform:translate3d(0,-97%,0);}
                72%, 100% {transform:translate3d(0,0,0);}
            }
        </style>
    </head>
    <body>
        <header class="header">
            <div class="brand">
                Logo
            </div>
            <div>
                <ul class="navigation">
                    <li>
                        <a>Home</a>
                    </li>
                    <li>
                        <a>About me</a>
                    </li>
                    <li>
                        <a>Projects</a>
                    </li>
                    <li>
                        <a>Contact us</a>
                    </li>
                </ul>
            </div>
        </header>
        <main class="main-section">
            <h1 class="context-content">
                Welcome to the
                <ul class="running-text">
                    <li>
                        <p>World!</p>
                    </li>
                    <li>
                        <p>Developers!</p>
                    </li>
                    <li>
                        <p>Everyone!</p>
                    </li>
                </ul>
            </h1>
        </main>
    </body>
</html>

If you found this tutorial helpful, please give it a thumbs up 👍 and follow 🔔 to our page for more web development tutorials.

Feel free to ask any questions or share your thoughts in the comments section below. We appreciate your feedback and suggestions for future tutorials.

That's all and Thanks for reading my article.

Stay Updated with Our Latest Content!

If you found this article informative and valuable, consider subscribing to our YouTube channel for more insightful content, tutorials, and updates. By subscribing, you'll stay up-to-date with the latest developments in web development, technology, and much more.

👉 Subscribe to Our Channel

Don't miss out on the opportunity to expand your knowledge and skills. Join our growing community of learners and enthusiasts today!

Advanced Next.js URL handling with URLSearchParams

Lakshmanan Arumugam — Thu, 26 Oct 2023 03:30:00 +0000

Video Tutorial

youtube.com

Introduction

In Next.js, you can work with URL query parameters using the next/router module, which provides a way to access and manipulate the query string parameters of the current URL. Query parameters are typically used to pass data from one page to another or to filter content on a page. Here's how you can work with URL query parameters in Next.js:

Step 1:
Setup next.js project. if you want more about it read the article

Step 2:
Import URL search params in your file page.tsx|jsx.

import { useSearchParams } from 'next/navigation'

Step 3:
Use the useSearchParams hook into the file like below:

export default function Example() {
  const searchParams = useSearchParams()!;
}

Step 4:
Accessing query params value into your component:

export default function Example() {
  let term;

  const searchParams = useSearchParams()!;
  // Set updated value to the term
  if(searchParams?.has('term')) {
    term = searchParams.get('term');
  }

  return (
    <h1>Search term: {term}</h1>
  )
}

Step 5:
Now, in the browser url next to add the value like this localhost:3000?term=tutorials

It's will automatically show's in the page. refer the screenshot

Complete source code

'use client';

import { useState, useCallback } from 'react'
import { Dialog } from '@headlessui/react'
import { XMarkIcon, MagnifyingGlassIcon } from '@heroicons/react/24/outline'
import { useSearchParams, useRouter, usePathname } from 'next/navigation'

const navigation = [
  { name: 'Product', href: '#' },
  { name: 'Features', href: '#' },
  { name: 'Marketplace', href: '#' },
  { name: 'Company', href: '#' },
]

export default function Example() {
  let term;

  const router = useRouter()
  const pathname = usePathname()
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)

  const searchParams = useSearchParams()!;
  // Set updated value to the term
  if(searchParams?.has('term')) {
    term = searchParams.get('term');
  }

  const [searchTerm, setSearchTerm] = useState(term);  

  // Update Search params to url
  const createQueryString = useCallback(
    (name: string, value: string) => {
      const params = new URLSearchParams(searchParams)
      params.set(name, value)

      return params.toString()
    },
    [searchParams]
  )

  return (
    <main>
      <div className="bg-white dark:bg-slate-800">
        <header className="absolute inset-x-0 top-0 z-50">
          <nav className="flex items-center justify-between p-6 lg:px-8" aria-label="Global">
            <div className="flex lg:flex-1">
              <a href="#" className="-m-1.5 p-1.5">
                <span className="sr-only">Your Company</span>
                <img
                  className="h-8 w-auto"
                  src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600"
                  alt=""
                />
              </a>
            </div>
            <div className="flex lg:hidden">
                <div className="relative mt-2 rounded-md shadow-sm">
                  <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-2 text-black">
                    <MagnifyingGlassIcon width={16} height={15}/>
                  </div>
                  <input
                    type="text"
                    name="price"
                    value={searchTerm}
                    onBlur={(e) => {
                      router.push(pathname + '?' + createQueryString('term', e.target.value))
                    }}
                    onChange={(e) => {
                      setSearchTerm(e.target.value)
                    }}
                    id="price"
                    className="block w-full rounded-md border-0 py-1.5 pl-7 pr-20 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
                    placeholder="Enter name"
                  />
                </div>
            </div>
            <div className="hidden lg:flex lg:gap-x-12">
              {navigation.map((item) => (
                <a key={item.name} href={item.href} className="text-sm font-semibold leading-6 text-gray-900 dark:text-white">
                  {item.name}
                </a>
              ))}
            </div>
            <div className="hidden lg:flex lg:flex-1 lg:justify-end">
              <div className="relative mt-2 rounded-md shadow-sm">
                <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-2 text-black">
                  <MagnifyingGlassIcon width={16} height={15}/>
                </div>
                <input
                  type="text"
                  name="price"
                  value={searchTerm}
                  onBlur={(e) => {
                    router.push(pathname + '?' + createQueryString('term', e.target.value))
                  }}
                  onChange={(e) => {
                    setSearchTerm(e.target.value)
                  }}
                  id="price"
                  className="block w-full rounded-md border-0 py-1.5 pl-7 pr-20 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
                  placeholder="Enter name"
                />
              </div>
            </div>
          </nav>
          <Dialog as="div" className="lg:hidden" open={mobileMenuOpen} onClose={setMobileMenuOpen}>
            <div className="fixed inset-0 z-50" />
            <Dialog.Panel className="fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-white px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10">
              <div className="flex items-center justify-between">
                <a href="#" className="-m-1.5 p-1.5">
                  <span className="sr-only">Your Company</span>
                  <img
                    className="h-8 w-auto"
                    src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600"
                    alt=""
                  />
                </a>
                <button
                  type="button"
                  className="-m-2.5 rounded-md p-2.5 text-gray-700"
                  onClick={() => setMobileMenuOpen(false)}
                >
                  <span className="sr-only">Close menu</span>
                  <XMarkIcon className="h-6 w-6" aria-hidden="true" />
                </button>
              </div>
              <div className="mt-6 flow-root">
                <div className="-my-6 divide-y divide-gray-500/10">
                  <div className="space-y-2 py-6">
                    {navigation.map((item) => (
                      <a
                        key={item.name}
                        href={item.href}
                        className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
                      >
                        {item.name}
                      </a>
                    ))}
                  </div>
                  <div className="py-6">
                    <a
                      href="#"
                      className="-mx-3 block rounded-lg px-3 py-2.5 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
                    >
                      Log in
                    </a>
                  </div>
                </div>
              </div>
            </Dialog.Panel>
          </Dialog>
        </header>

        <div className="relative isolate px-6 pt-14 lg:px-8">
          <div
            className="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
            aria-hidden="true"
          >
            <div
              className="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]"
              style={{
                clipPath:
                  'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
              }}
            />
          </div>
          <div className="mx-auto max-w-2xl py-32 sm:py-48 lg:py-56">
            <div className="hidden sm:mb-8 sm:flex sm:justify-center">
              <div className="relative rounded-full px-3 py-1 text-sm leading-6 text-gray-600 ring-1 ring-gray-900/10 hover:ring-gray-900/20">
                Announcing our next round of funding.{' '}
                <a href="#" className="font-semibold text-indigo-600">
                  <span className="absolute inset-0" aria-hidden="true" />
                  Read more <span aria-hidden="true">&rarr;</span>
                </a>
              </div>
            </div>
            <div className="text-center">
              <h1 className="text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl dark:text-white">
                Data to enrich your {term}
              </h1>
              <p className="mt-6 text-lg leading-8 text-gray-600">
                Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet
                fugiat veniam occaecat fugiat aliqua.
              </p>
              <div className="mt-10 flex items-center justify-center gap-x-6">
                <a
                  href="#"
                  className="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
                >
                  Get started
                </a>
                <a href="#" className="text-sm font-semibold leading-6 text-gray-900">
                  Learn more <span aria-hidden="true">→</span>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  )
}

That's all and Thanks for reading my article.

Stay Updated with Our Latest Content!

👉 Subscribe to Our Channel

Don't miss out on the opportunity to expand your knowledge and skills. Join our growing community of learners and enthusiasts today!

Forem: Lakshmanan Arumugam

5 Reasons why I Started My YouTube Channel and Blog

About Me

Why I Decided to Start a Technical Blog and YouTube Channel?

Conclusion

How to build a unique full stack app for your portfolio

Hello everyone👋,

Tech Stack

Here's what we’ll explore:

SSR 🆚 SSG: A Game-Changer for Your Web App ☄️

Why?

When SSG Good for App/Website?

How it works?

Do you want to know How to build and deploy it. refer the below example

Top 40 Frontend Developer Interview Questions & Answers 2024 🪄 ❤️‍🔥

Introduction

🚀 What You'll Learn:

🧭 Explanation video

🙋 Questions

From Zero to Hero: Build Full stack Food Delivery App using Next.js and PostgreSQL

Core Features

👨‍🍳 Restaurant

Admin Side

Technology Stack

Upskill Your Knowledge

Master Next.js:

Secure Authentication with JWT:

Database Management with PostgreSQL:

Conclusion

Ultimate guide to👨‍💻 Build & 🚀 Deploy Full Stack App Next.js

🌐 Introduction:

🔧 What You'll Learn:

⚙️ Tools and Technologies Used:

👨‍💻 Who Should Watch:

Here are the some details:

Showcasing Excellence: A Step-by-Step Guide to Your Kickass Portfolio

Introduction:

Step 1: Define Your Purpose

Step 2: Select Your Best Work

Step 3: Craft a Compelling Narrative

Step 4: Choose the Right Platform

Step 5: Optimize for Mobile Viewing

Step 6: Keep it Updated

Conclusion:

🪄 CSS Animation: Card hover animation 💫

Live video example

Introduction

🚀 Fastest way to build transparent login page HTML/CSS

Live video example

Introduction

100 days of CSS animation code challenges - Reveal

1. Rotation text animation - HTML/CSS

2. Glowing text animation - HTML/CSS

3. Gradiant text animation - HTML/CSS

4. Shiny text animation - HTML/CSS

5. Card outer flow animation - HTML/CSS

6. Blurry card hover animation - HTML/CSS

7. Content pop-up card hover animation - HTML/CSS

8. Photo gallery hover animation - HTML/CSS

9. 3D box model hover animation - HTML/CSS

10. Scroll driven text animation - HTML/CSS

Interactive typography rotation effects CSS | no javascript

Key Topics Covered:

Stay Updated with Our Latest Content!

Advanced Next.js URL handling with URLSearchParams

Video Tutorial

Introduction

Complete source code

Stay Updated with Our Latest Content!