index.html

<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--==================== Favicon ========================-->
    <link rel="icon" href="assets/img/favicon.png" type="image/png">
    <link rel="manifest" href="manifest.json" />

    <title>Rakshit Mehra | Call:+91 85670-98852 </title>

    <!--=================== Google Fonts ====================-->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700&display=swap" rel="stylesheet">

    <!--=================== Remixicons ====================-->
    <link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">

    <!--=================== SwiperJS CSS ====================-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" />

    <!--=================== Main CSS ====================-->
    <link rel="stylesheet" href="assets/css/main.css">
</head>

<body>
    <!--===================== Header =====================-->
    <header id="header" class="header">
        <nav class="nav container">
            <a href="index.html" class="nav__brand">Rakshit Mehra</a>
            <div class="nav__menu" id="nav-menu">
                <ul class="nav__list">
                    <li class="nav__item">
                        <a href="#home" class="nav__link">
                            <i class="ri-home-line nav__icon"></i>
                            Home
                        </a>
                    </li>
                    <li class="nav__item">
                        <a href="#about" class="nav__link">
                            <i class="ri-user-line nav__icon"></i>
                            About
                        </a>
                    </li>
                    <!-- <li class="nav__item">
                        <a href="#skills" class="nav__link">
                            <i class="ri-medal-line nav__icon"></i>
                            Skills</a>
                    </li>
                    <li class="nav__item">
                        <a href="#service" class="nav__link">
                            <i class="ri-briefcase-line nav__icon"></i>
                            Services</a> -->
                    <!-- </li> -->
                    <li class="nav__item">
                        <a href="#portfolio" class="nav__link">
                            <i class="ri-folders-line nav__icon"></i>
                            Projects</a>
                    </li>
                    <!-- <li class="nav__item">
                        <a href="#blog" class="nav__link">
                            <i class="ri-message-line nav__icon"></i>
                            Blog</a>
                    </li> -->
                    <li class="nav__item">
                        <a href="#contact" class="nav__link">
                            <i class="ri-phone-line nav__icon"></i>
                            Contact</a>
                    </li>
                </ul>
            </div>
            <div class="nav__buttons">
                <span class="theme__toggle">
                    <i id="theme-toggle" class="ri-moon-line"></i>
                </span>
                <span class="nav__toggle">
                    <i id="nav-toggle" class="ri-menu-4-line"></i>
                </span>
            </div>
        </nav>
    </header>

    <!--===================== Main =====================-->
    <main class="main">
        <!--===================== Home =====================-->
        <section id="home" class="home">
            <div class="d-grid home__wrapper container">
                <div class="home__content">
                    <h1 class="home__title">
                        Hii, I Am <span class="home__name">Rakshit...</span>
                        CSE Student
                    </h1>
                    <p class="home__description">
                        A quick learner and ability to solve problems.
                    </p>
                    <a href="#contact" class="btn btn--primary">
                        <i class="ri-mail-line"></i>
                        Contact
                    </a>
                    <div class="social">
                        <span class="social__title">Follow Me</span>
                        <ul class="social__list">
                            <li class="social__item">
                                <a href="httpe://www.facebook.com/rakshit2003" class="social__link">
                                    <i class="ri-facebook-fill"></i>
                                </a>
                            </li>
                            <li class="social__item">
                                <a href="https://www.instagram.com/_rakshitmehra_" class="social__link">
                                    <i class="ri-instagram-line"></i>
                                </a>
                            </li>
                            <li class="social__item">
                                <a href="https://www.github.com/rakshitmehra" class="social__link">
                                    <i class="ri-github-line"></i>
                                </a>
                            </li>
                            <li class="social__item">
                                <a href="https://www.linkedin.com/in/rakshitmehra" class="social__link">
                                    <i class="ri-linkedin-line"></i>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <img src="assets/img/rakshit.jpeg" alt="Rakshit Mehra" class="home__img" width="75%">
            </div>
        </section>

        <!--===================== About =====================-->
        <section id="about" class="about section">
            <div class="d-grid about__wrapper container">
                <div class="about__content">
                    <span class="section__subtitle">About Me</span>
                    <h2 class="section__title">Undergraduate CSE Student</h2>
                    </h2>
                    <p class="about__description">Strong in design and integration with intuitive problem-solving skills. Proficient in Graphic Design, HTML, CSS, JAVASCRIPT, C Language, C++, Python and more. Passionate about implementing new projects. Ability to translate business requirements into technical solutions. Looking to start my carrier as an entry-level Web Developer with a reputed firm driven by technology.
                    </p>
                    <ol class="about__ol">
                        <li><u>Batch:</u> <b>2021-2025</b> (From Guru Nanak Dev University, Amritsar).</li><br>
                        <li><u>CGPA:</u> <b>7.01</b></li>
                    </ol>
                    <a href="https://drive.google.com/file/d/1_ZEcr0hP2s4Wz4vw5IXZWmicq2OGK_Kk/view?usp=sharing" target="_blank" class="btn btn--primary"><i class="ri-article-line"></i>Download Resume</a>
                </div>
                <img src="assets/img/about1.png" alt="Natasha Smith" class="about__img" width="75%">
            </div>
        </section>

        <!--===================== Skills =====================-->
        <section id="skills" class="skills section section-bg">
            <div class="section__header container">
                <span class="section__subtitle">Skills</span>
                <h2 class="section__title">My Working Programming Languages and Tools
                </h2>
            </div>
            <div class="d-grid skills__wrapper container">
                <div class="skills__content">
                    <!-- <h3 class="skills__title">UI/UX Design</h3> -->
                    <div class="skills__content-wrapper">
                        <div class="skills__card">
                            <div class="skills__img-wrapper">
                                <img src="assets/img/html-logo.svg" alt="HTML Logo" class="skills__img">
                            </div>
                            <h3 class="skills__name">HTML</h3>
                        </div>
                        <div class="skills__card">
                            <div class="skills__img-wrapper">
                                <img src="assets/img/css-logo.svg" alt="CSS Logo" class="skills__img">
                            </div>
                            <h3 class="skills__name">CSS</h3>
                        </div>
                        <div class="skills__card">
                            <div class="skills__img-wrapper">
                                <img src="assets/img/javascript-logo.svg" alt="JavaScript Logo" class="skills__img">
                            </div>
                            <h3 class="skills__name">JavaScript</h3>
                        </div>
                        <div class="skills__card">
                            <div class="skills__img-wrapper">
                                <img src="assets/img/python.svg" alt="Vue.js Logo" class="skills__img">
                            </div>
                            <h3 class="skills__name">Python</h3>
                        </div>
                        <div class="skills__card">
                            <div class="skills__img-wrapper">
                                <img src="assets/img/java.svg" alt="Vue.js Logo" class="skills__img">
                            </div>
                            <h3 class="skills__name">Java</h3>
                        </div>
                        <div class="skills__card">
                            <div class="skills__img-wrapper">
                                <img src="assets/img/C++.svg" alt="Vue.js Logo" class="skills__img">
                            </div>
                            <h3 class="skills__name">C++</h3>
                        </div>
                        <div class="skills__card">
                            <div class="skills__img-wrapper">
                                <img src="assets/img/nodejs-logo.svg" alt="Node.Js Logo" class="skills__img">
                            </div>
                            <h3 class="skills__name">Node.Js</h3>
                        </div>
                        <div class="skills__card">
                            <div class="skills__img-wrapper">
                                <img src="assets/img/react.svg" alt="Node.Js Logo" class="skills__img">
                            </div>
                            <h3 class="skills__name">React Js</h3>
                        </div>
                    </div>
                </div>
                <div class="skills__content">
                    <!-- <h3 class="skills__title">Web Development</h3> -->
                    <div class="skills__content-wrapper">
                        <div class="skills__card">
                            <div class="skills__img-wrapper">
                                <img src="assets/img/github.svg" alt="Illustrator Logo"
                                    class="skills__img">
                            </div>
                            <h3 class="skills__name">Github</h3>
                        </div>
                        <div class="skills__card">
                            <div class="skills__img-wrapper">
                                <img src="assets/img/vercel.svg" alt="Illustrator Logo"
                                    class="skills__img">
                            </div>
                            <h3 class="skills__name">Vercel</h3>
                        </div>
                        <div class="skills__card">
                            <div class="skills__img-wrapper">
                                <img src="assets/img/firebase.svg" alt="Illustrator Logo"
                                    class="skills__img">
                            </div>
                            <h3 class="skills__name">Firebase</h3>
                        </div>
                        <div class="skills__card">
                            <div class="skills__img-wrapper">
                                <img src="assets/img/aws.svg" alt="Illustrator Logo"
                                    class="skills__img">
                            </div>
                            <h3 class="skills__name">AWS Cloud</h3>
                        </div>
                        <div class="skills__card">
                            <div class="skills__img-wrapper">
                                <img src="assets/img/figma-logo.svg" alt="Figma Logo" class="skills__img">
                            </div>
                            <h3 class="skills__name">Figma</h3>
                        </div>
                        <div class="skills__card">
                            <div class="skills__img-wrapper">
                                <img src="assets/img/adobexd-logo.svg" alt="Adobe XD Logo" class="skills__img">
                            </div>
                            <h3 class="skills__name">Adobe XD</h3>
                        </div>
                        <div class="skills__card">
                            <div class="skills__img-wrapper">
                                <img src="assets/img/ml.svg" alt="Photoshop Logo" class="skills__img">
                            </div>
                            <h3 class="skills__name">Machine Learning</h3>
                        </div>
                        <div class="skills__card">
                            <div class="skills__img-wrapper">
                                <img src="assets/img/canva.svg" alt="Sketch Logo" class="skills__img">
                            </div>
                            <h3 class="skills__name">Canva</h3>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!--===================== Counter =====================-->
        <!-- <section class="counter section">
            <div class="d-grid counter__wrapper container">
                <div class="counter__item">
                    <span class="counter__icon">
                        <i class="ri-user-line"></i>
                    </span>
                    <p class="counter__number" data-target="8">0</p>
                    <h2 class="counter__title">Years Experience</h2>
                </div>
                <div class="counter__item">
                    <span class="counter__icon">
                        <i class="ri-briefcase-line"></i>
                    </span>
                    <p class="counter__number" data-target="100">0</p>
                    <h2 class="counter__title">Projects Completed</h2>
                </div>
                <div class="counter__item">
                    <span class="counter__icon">
                        <i class="ri-cup-line"></i>
                    </span>
                    <p class="counter__number" data-target="350">0</p>
                    <h2 class="counter__title">Cups Of Coffee</h2>
                </div>
                <div class="counter__item">
                    <span class="counter__icon">
                        <i class="ri-user-smile-line"></i>
                    </span>
                    <p class="counter__number" data-target="225">0</p>
                    <h2 class="counter__title">Happy Clients</h2>
                </div>
            </div>
        </section> -->

        <!--===================== Services =====================-->
        <!-- <section id="service" class="service section section-bg">
            <div class="d-grid service__wrapper container">
                <div class="service__content">
                    <span class="section__subtitle">My Services</span>
                    <h2 class="section__title">What I Provide To My Clients</h2>

                    <p class="service__description">
                        Sit elementum fringilla ipsum accumsan sagittis ullamcorper dolor. Nunc tempor ut amet enim dui.
                        Congue viverra tortor
                        integer fames amet odio cursus.
                    </p>

                    <p class="service__description">
                        Rhoncus lacinia turpis sagittis sed ipsum hendrerit nunc non. Leo massa a est ullamcorper at
                        vulputate. Sit elementum
                        fringilla ipsum accumsan sagittis ullamcorper dolor. Nunc tempor ut amet enim dui. Congue
                        viverra tortor integer fames
                        amet odio cursus.
                    </p>

                    <a href="https://callto:+918567098852/" class="btn btn--primary">
                        <i class="ri-chat-3-line"></i>
                        Let's Talk
                    </a>
                </div>
                <div class="service__info">
                    <div class="service__card">
                        <div class="service__icon">
                            <i class="ri-code-line"></i>
                        </div>
                        <div class="service__info-wrapper">
                            <h3 class="service__info-title">Frontend Development</h3>
                            <p class="service__description">
                                Nunc nunc facilisis eu non enim adipiscing. Erat nunc dignissim condimentum quis.
                            </p>
                        </div>
                    </div>
                    <div class="service__card">
                        <div class="service__icon">
                            <i class="ri-layout-masonry-fill"></i>
                        </div>
                        <div class="service__info-wrapper">
                            <h3 class="service__info-title">UI/UX Design</h3>
                            <p class="service__description">
                                Nunc nunc facilisis eu non enim adipiscing. Erat nunc dignissim condimentum quis.
                            </p>
                        </div>
                    </div>
                    <div class="service__card">
                        <div class="service__icon">
                            <i class="ri-pen-nib-fill"></i>
                        </div>
                        <div class="service__info-wrapper">
                            <h3 class="service__info-title">Graphic Design</h3>
                            <p class="service__description">
                                Nunc nunc facilisis eu non enim adipiscing. Erat nunc dignissim condimentum quis.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </section> -->

        <!--===================== Portfolio =====================-->
        <section id="portfolio" class="portfolio section">
            <div class="section__header container">
                <span class="section__subtitle">Portfolio</span>
                <h2 class="section__title">Previous Projects</h2>
            </div>
            <div class="d-grid portfolio__wrapper container">
                <div class="portfolio__project">
                    <div class="portfolio__overlay"></div>
                    <img src="assets/img/10.png" alt="" class="portfolio__img">
                    <div class="portfolio__info">
                        <div class="portfolio__info-wrapper">
                            <h3 class="portfolio__title">Crop-Predictor</h3>
                            <p class="portfolio__description">
                            It is basically a Machine Learning project for predicting crop about to some factors.
                            </p>
                        </div>
                    </div>
                    <a href="https://crop-recommendation-01.streamlit.app/" target="_blank" class="portfolio__link">
                        <i class="ri-external-link-line"></i>
                    </a>
                </div>

                <div class="portfolio__project">
                    <div class="portfolio__overlay"></div>
                    <img src="assets/img/6.png" alt="" class="portfolio__img">
                    <div class="portfolio__info">
                        <div class="portfolio__info-wrapper">
                            <h3 class="portfolio__title">Event Listing Application</h3>
                            <p class="portfolio__description">
                                It is basically event listing application for student communities where they can list there upcoming events, So that all other students came to know about events.
                            </p>
                        </div>
                    </div>
                    <a href="https://event-listing-opal.vercel.app/" target="_blank" class="portfolio__link">
                        <i class="ri-external-link-line"></i>
                    </a>
                </div>

                <div class="portfolio__project">
                    <div class="portfolio__overlay"></div>
                    <img src="assets/img/11.png" alt="" class="portfolio__img">
                    <div class="portfolio__info">
                        <div class="portfolio__info-wrapper">
                            <h3 class="portfolio__title">Client Website</h3>
                            <p class="portfolio__description">
                                It is basically a website for Client related to Taxi-Service in Germany.
                            </p>
                        </div>
                    </div>
                    <a href="https://taxi-service-dusky.vercel.app/" target="_blank" class="portfolio__link">
                        <i class="ri-external-link-line"></i>
                    </a>
                </div>

                <div class="portfolio__project">
                    <div class="portfolio__overlay"></div>
                    <img src="assets/img/12.png" alt="" class="portfolio__img">
                    <div class="portfolio__info">
                        <div class="portfolio__info-wrapper">
                            <h3 class="portfolio__title">Happening</h3>
                            <p class="portfolio__description">
                                It is basically a website for Client related to Taxi-Service in Germany.Happening is an event ticketing and data management software for generating custom forms, creating tickets, and tracking user engagement.
                            </p>
                        </div>
                    </div>
                    <a href="https://ishappening.live/" target="_blank" class="portfolio__link">
                        <i class="ri-external-link-line"></i>
                    </a>
                </div>

                <div class="portfolio__project">
                    <div class="portfolio__overlay"></div>
                    <img src="assets/img/13.png" alt="" class="portfolio__img">
                    <div class="portfolio__info">
                        <div class="portfolio__info-wrapper">
                            <h3 class="portfolio__title">Multiple Disease Prediction System</h3>
                            <p class="portfolio__description">
                                It is basically a Machine Learning project for predicting multiple diseases based some factors.
                            </p>
                        </div>
                    </div>
                    <a href="https://multiplediseaseprediction1.streamlit.app/" target="_blank" class="portfolio__link">
                        <i class="ri-external-link-line"></i>
                    </a>
                </div>

                <div class="portfolio__project">
                    <div class="portfolio__overlay"></div>
                    <img src="assets/img/2.png" alt="" class="portfolio__img">
                    <div class="portfolio__info">
                        <div class="portfolio__info-wrapper">
                            <h3 class="portfolio__title">Client Website</h3>
                            <p class="portfolio__description">
                                It is basically a website for Client related to the company "The Way Big".
                            </p>
                        </div>
                    </div>
                    <a href="https://www.officialdigisign.com/" target="_blank" class="portfolio__link">
                        <i class="ri-external-link-line"></i>
                    </a>
                </div>

                <div class="portfolio__project">
                    <div class="portfolio__overlay"></div>
                    <img src="assets/img/3.png" alt="" class="portfolio__img">
                    <div class="portfolio__info">
                        <div class="portfolio__info-wrapper">
                            <h3 class="portfolio__title">NGO Website</h3>
                            <p class="portfolio__description">
                                This website is belong to NGO Named "People for Animals".
                            </p>
                        </div>
                    </div>
                    <a href="https://ngo-sxdc.vercel.app/" target="_blank" class="portfolio__link">
                        <i class="ri-external-link-line"></i>
                    </a>
                </div>

                <div class="portfolio__project">
                    <div class="portfolio__overlay"></div>
                    <img src="assets/img/8.png" alt="" class="portfolio__img">
                    <div class="portfolio__info">
                        <div class="portfolio__info-wrapper">
                            <h3 class="portfolio__title">Complaint Management System</h3>
                            <p class="portfolio__description">
                                This application is basically used to register complaints keeps track record of complaints whether it is resolved or not in realtime.
                            </p>
                        </div>
                    </div>
                    <a href="https://complaint-portal-ten.vercel.app/" target="_blank" class="portfolio__link">
                        <i class="ri-external-link-line"></i>
                    </a>
                </div>

                <div class="portfolio__project">
                    <div class="portfolio__overlay"></div>
                    <img src="assets/img/14.png" alt="" class="portfolio__img">
                    <div class="portfolio__info">
                        <div class="portfolio__info-wrapper">
                            <h3 class="portfolio__title">Client Website</h3>
                            <p class="portfolio__description">
                                It is basically a website for Client related to the online college".
                            </p>
                        </div>
                    </div>
                    <a href="https://21-aimt.vercel.app/" target="_blank" class="portfolio__link">
                        <i class="ri-external-link-line"></i>
                    </a>
                </div>

                <div class="portfolio__project">
                    <div class="portfolio__overlay"></div>
                    <img src="assets/img/9.png" alt="" class="portfolio__img">
                    <div class="portfolio__info">
                        <div class="portfolio__info-wrapper">
                            <h3 class="portfolio__title">Blog App</h3>
                            <p class="portfolio__description">
                                It is basically a blog applications where users can create blog and publish on this site.
                            </p>
                        </div>
                    </div>
                    <a href="https://bl-app-client.vercel.app/login" target="_blank" class="portfolio__link">
                        <i class="ri-external-link-line"></i>
                    </a>
                </div>

                <div class="portfolio__project">
                    <div class="portfolio__overlay"></div>
                    <img src="assets/img/7.png" alt="" class="portfolio__img">
                    <div class="portfolio__info">
                        <div class="portfolio__info-wrapper">
                            <h3 class="portfolio__title">Pubic Chat App</h3>
                            <p class="portfolio__description">
                                It is a basically a Public Chat App where multiple users and join and can chat with others.
                            </p>
                        </div>
                    </div>
                    <a href="https://chat-application-fawn-seven.vercel.app/" target="_blank" class="portfolio__link">
                        <i class="ri-external-link-line"></i>
                    </a>
                </div>

                <div class="portfolio__project">
                    <div class="portfolio__overlay"></div>
                    <img src="assets/img/4.png" alt="" class="portfolio__img">
                    <div class="portfolio__info">
                        <div class="portfolio__info-wrapper">
                            <h3 class="portfolio__title">Tic-Tac-Toe</h3>
                            <p class="portfolio__description">
                            It is basically a simple game i.e Tic-Tac-Toe made with help of HTML, CSS and javascript.
                            </p>
                        </div>
                    </div>
                    <a href="https://rakshitmehra.github.io/tic-tac-toe/" target="_blank" class="portfolio__link">
                        <i class="ri-external-link-line"></i>
                    </a>
                </div>

                <div class="portfolio__project">
                    <div class="portfolio__overlay"></div>
                    <img src="assets/img/1.png" alt="" class="portfolio__img">
                    <div class="portfolio__info">
                        <div class="portfolio__info-wrapper">
                            <h3 class="portfolio__title">E-Commerce Website</h3>
                            <p class="portfolio__description">
                                It is UI for E-Commerce website. Soon Will work Dynamically.
                            </p>
                        </div>
                    </div>
                    <a href="https://rakshitmehra.github.io/E-commerce/" target="_blank" class="portfolio__link">
                        <i class="ri-external-link-line"></i>
                    </a>
                </div>

                <div class="portfolio__project">
                    <div class="portfolio__overlay"></div>
                    <img src="assets/img/15.png" alt="" class="portfolio__img">
                    <div class="portfolio__info">
                        <div class="portfolio__info-wrapper">
                            <h3 class="portfolio__title">Student Community Website</h3>
                            <p class="portfolio__description">
                                It is a GNDU community website.
                            </p>
                        </div>
                    </div>
                    <a href="https://rakshitmehra.live/Websites/DGSS/" target="_blank" class="portfolio__link">
                        <i class="ri-external-link-line"></i>
                    </a>
                </div>

                <!-- <div class="portfolio__project">
                    <div class="portfolio__overlay"></div>
                    <img src="assets/img/5.png" alt="" class="portfolio__img">
                    <div class="portfolio__info">
                        <div class="portfolio__info-wrapper">
                            <h3 class="portfolio__title">Student Organization Website</h3>
                            <p class="portfolio__description">
                                It is student organization website that i had made with the help of bootstrap template. 
                            </p>
                        </div>
                    </div>
                    <a href="https://rakshitmehra.github.io/Websites/DGSS/" target="_blank" class="portfolio__link">
                        <i class="ri-external-link-line"></i>
                    </a>
                </div> -->
            </div>
        </section>

        <!--===================== Testimonial =====================-->
        <!-- <section class="testimonial section section-bg">
            <div class="section__header container">
                <span class="section__subtitle">Testimonials</span>
                <h2 class="section__title">What Clients Are Saying About Me</h2>
            </div>
            <div class="testimonial__wrapper container swiper">
                <div class="swiper-wrapper">
                    <div class="testimonial__card swiper-slide">
                        <div class="testimonial__card-icon">
                            <i class="ri-double-quotes-r"></i>
                        </div>
                        <div class="testimonial__card-wrapper">
                            <div class="testimonial__img-wrapper">
                                <img src="assets/img/testimonial1.jpg" alt="Shawn Wallace" class="testimonial__img">
                            </div>
                            <div class="testimonial__data">
                                <h3 class="testimonial__name">Shawn Wallace</h3>
                                <p class="testimonial__occupation">Photographer</p>
                            </div>
                        </div>
                        <p class="testimonial__quote">
                            In ultricies at purus egestas at donec amet gravida nunc. Mauris pellentesque ipsum proin
                            placerat aliquam libero arcu.
                        </p>
                    </div>

                    <div class="testimonial__card swiper-slide">
                        <div class="testimonial__card-icon">
                            <i class="ri-double-quotes-r"></i>
                        </div>
                        <div class="testimonial__card-wrapper">
                            <div class="testimonial__img-wrapper">
                                <img src="assets/img/testimonial2.jpg" alt="Shawn Wallace" class="testimonial__img">
                            </div>
                            <div class="testimonial__data">
                                <h3 class="testimonial__name">Ashley Robie</h3>
                                <p class="testimonial__occupation">Product Manager</p>
                            </div>
                        </div>
                        <p class="testimonial__quote">
                            In ultricies at purus egestas at donec amet gravida nunc. Mauris pellentesque ipsum proin
                            placerat aliquam libero arcu.
                        </p>
                    </div>

                    <div class="testimonial__card swiper-slide">
                        <div class="testimonial__card-icon">
                            <i class="ri-double-quotes-r"></i>
                        </div>
                        <div class="testimonial__card-wrapper">
                            <div class="testimonial__img-wrapper">
                                <img src="assets/img/testimonial3.jpg" alt="Shawn Wallace" class="testimonial__img">
                            </div>
                            <div class="testimonial__data">
                                <h3 class="testimonial__name">Lee Elliot</h3>
                                <p class="testimonial__occupation">Software Engineer</p>
                            </div>
                        </div>
                        <p class="testimonial__quote">
                            In ultricies at purus egestas at donec amet gravida nunc. Mauris pellentesque ipsum proin
                            placerat aliquam libero arcu.
                        </p>
                    </div>
                </div>
                <div class="swiper-pagination"></div>
            </div>
        </section> -->

        <!--===================== blog =====================-->
        <!-- <section id="blog" class="blog section">
            <div class="section__header container">
                <span class="section__subtitle">My Blog</span>
                <h2 class="section__title">Latest Posts & News</h2>
            </div>
            <div class="d-grid blog__wrapper container">
                <div class="blog__post">
                    <div class="blog__img-wrapper">
                        <img src="assets/img/blog1.jpg" alt="" class="blog__img">
                        <span class="blog__category">UI/UX Design</span>
                    </div>
                    <div class="blog__content">
                        <h3 class="blog__title">10 UI/UX Design trends that made for 2023</h3>
                        <p class="blog__description">
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum
                            nihil quam velit ipsam possimus.
                        </p>
                        <a href="javascript:void(0)" class="blog__link">
                            Read More
                            <i class="ri-arrow-right-s-line"></i>
                        </a>
                    </div>
                </div>

                <div class="blog__post">
                    <div class="blog__img-wrapper">
                        <img src="assets/img/blog2.jpg" alt="" class="blog__img">
                        <span class="blog__category">UI/UX Design</span>
                    </div>
                    <div class="blog__content">
                        <h3 class="blog__title">The 5 most used prototyping tools for UI/UX Designers in 2023</h3>
                        <p class="blog__description">
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum
                            nihil quam velit ipsam possimus.
                        </p>
                        <a href="javascript:void(0)" class="blog__link">
                            Read More
                            <i class="ri-arrow-right-s-line"></i>
                        </a>
                    </div>
                </div>

                <div class="blog__post">
                    <div class="blog__img-wrapper">
                        <img src="assets/img/blog3.jpg" alt="" class="blog__img">
                        <span class="blog__category">Web Development</span>
                    </div>
                    <div class="blog__content">
                        <h3 class="blog__title">React vs Vue: Which is Better and Why?</h3>
                        <p class="blog__description">
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum
                            nihil quam velit ipsam possimus.
                        </p>
                        <a href="javascript:void(0)" class="blog__link">
                            Read More
                            <i class="ri-arrow-right-s-line"></i>
                        </a>
                    </div>
                </div>
            </div>
        </section> -->

        <!--===================== Contact =====================-->
        <section id="contact" class="contact section section-bg">
            <div class="section__header container">
                <span class="section__subtitle">Let's Talk</span>
                <h2 class="section__title">Have a Project Idea? Feel Free to Contact</h2>
            </div>
            <div class="d-grid contact__wrapper container">
                <form action="" class="contact__form">
                    <div class="form__group">
                        <label for="" class="form__label">Name</label>
                        <input type="text" class="form__input" placeholder="Enter your name" required>
                    </div>
                    <div class="form__group">
                        <label for="" class="form__label">Email</label>
                        <input type="email" class="form__input" placeholder="Enter your email" required>
                    </div>
                    <div class="form__group">
                        <label for="" class="form__label">Message</label>
                        <textarea class="form__input form__textarea"
                            placeholder="Tell me about your project"></textarea>
                    </div>
                    <button type="submit" class="btn btn--primary">
                        <i class="ri-send-plane-line"></i>Send Message
                    </button>
                </form>
                <div class="d-grid contact__content">
                    <div class="contact__info">
                        <div class="contact__icon">
                            <i class="ri-phone-line"></i>
                        </div>
                        <div class="contact__info-wrapper">
                            <h3 class="contact__title">Call:</h3>
                            <p class="contact__description">+91 85670-98852</p>
                        </div>
                    </div>

                    <div class="contact__info">
                        <div class="contact__icon">
                            <i class="ri-mail-line"></i>
                        </div>
                        <div class="contact__info-wrapper">
                            <h3 class="contact__title">Email:</h3>
                            <p class="contact__description">rakshitmehra88@gmail.com</p>
                        </div>
                    </div>

                    <div class="contact__info">
                        <div class="contact__icon">
                            <i class="ri-map-pin-line"></i>
                        </div>
                        <div class="contact__info-wrapper">
                            <h3 class="contact__title">Location:</h3>
                            <p class="contact__description">Amritsar, Punjab</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!--===================== Footer =====================-->
    <footer class="footer">
        <div class="d-grid footer__wrapper container">
            <div class="footer__content">
                <h4 class="footer__name">Rakshit Mehra</h4>
                <ul class="footer__list">
                    <li class="footer__item">
                        <a href="#home" class="footer__link">Home</a>
                    </li>
                    <li class="footer__item">
                        <a href="#about" class="footer__link">About</a>
                    </li>
                    <!-- <li class="footer__item">
                        <a href="#skills" class="footer__link">Skills</a>
                    </li>
                    <li class="footer__item">
                        <a href="#service" class="footer__link">Services</a>
                    </li> -->
                    <li class="footer__item">
                        <a href="#portfolio" class="footer__link">Projects</a>
                    </li>
                    <!-- <li class="footer__item">
                        <a href="#blog" class="footer__link">Blog</a>
                    </li> -->
                    <li class="footer__item">
                        <a href="#contact" class="footer__link">Contact</a>
                    </li>
                </ul>
                <ul class="social__list">
                    <li class="social__item">
                        <a href="httpe://www.facebook.com/rakshit2003" class="social__link">
                            <i class="ri-facebook-fill"></i>
                        </a>
                    </li>
                    <li class="social__item">
                        <a href="https://www.instagram.com/_rakshitmehra_" class="social__link">
                            <i class="ri-instagram-line"></i>
                        </a>
                    </li>
                    <li class="social__item">
                        <a href="https://www.github.com/rakshitmehra" class="social__link">
                            <i class="ri-github-line"></i>
                        </a>
                    </li>
                    <li class="social__item">
                        <a href="https://www.linkedin.com/in/rakshitmehra" class="social__link">
                            <i class="ri-linkedin-line"></i>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <!-- <div class="footer__copyright container">
            <p>&copy; Copyright 2023, Made By ❤️.</p>
        </div> -->
    </footer>
    <a href="#" id="scrolltop" class="scrolltop">
        <i class="ri-arrow-up-line"></i>
    </a>

    <!--=================== SwiperJS  ====================-->
    <script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>

    <!--=================== ScrollReveal ==================-->
    <script src="https://unpkg.com/scrollreveal"></script>

    <!--=======================Vercel Analytics================-->
    <script>
        window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
    </script>
    <script defer src="/_vercel/insights/script.js"></script>

    <!--=================== Main JS ====================-->
    <script src="assets/js/main.js"></script>
</body>

</html>