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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="./Assets/img/coding.png" type="image/x-icon.png">
    <!-- fontawesome  -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
        integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <!-- bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <!-- main css -->
    <link rel="stylesheet" href="./Assets/CSS/style.css">
    <title>Developer</title>
</head>

<body>
    <header class="d-flex align-items-center justify-content-lg-around justify-content-between mt-4">
        <h1 class="fs-1 ms-4 ms-lg-0">Aditya</h1>
        <div class="hamburger d-block d-lg-none me-4">
            <div class="line1 line"></div>
            <div class="line2 line"></div>
            <div class="line3 line"></div>
        </div>
        <nav class="header-menu d-lg-block">
            <ul class="list-unstyled d-lg-flex align-items-center ">
                <li class="ms-5 list_item"><a class="text-decoration-none fs-4" href="#aboutMe">About</a></li>
                <li class="ms-5 list_item"><a class="text-decoration-none fs-4" href="#experienceme">Experience</a></li>
                <li class="ms-5 list_item"><a class="text-decoration-none fs-4" href="#projectme">Projects</a>
                </li>
                <li class="ms-5 list_item"><a class="text-decoration-none fs-4" href="#contactme">Contact</a>
                </li>
            </ul>
        </nav>
    </header>

    <main>
        <!-- intro1 -->
        <div class="intro  d-flex align-items-center justify-content-center flex-wrap ">
            <div class="introbox d-flex flex-wrap align-items-center justify-content-center">
                <div class="introimgbox me-lg-4 text-center mb-5">
                    <img src="./Assets/img/header.png" alt="" class="mt-5 me-md-5 me-sm-3">
                </div>
                <div class="introtextbox ms-lg-4 text-center">
                    <span class="text-secondary fw-bold">Hello I'm</span>
                    <!-- update your name here -->
                    <h1 class="h1">Chaudhary Aditya</h1>
                    <span class="fs-5 text-secondary text-capitalize fw-bold">Frontend developer</span>
                    <div class="mt-2"> 
                        <a href="#" class="btn btn-outline-dark">Download CV</a>
                        <!-- add your instagram/twitter/linkedin / external profile link -->
                         <a href="#" class="btn btn-dark">Contact info</a>
                    </div>
                    <div class="mt-2">
                        <!-- add your linkedin profile link here -->
                        <a href="#" class="text-dark fs-2"><i class="fa-brands fa-linkedin"></i></a>
                        <!-- add your github profile link here -->
                        <a href="#" class="text-dark fs-2"> <i class="fa-brands fa-github"></i></a>
                    </div>
                </div>
            </div>
        </div>
        <!-- about me -->
        <div class="aboutme container" id="aboutMe">
            <div class="row">
                <div class="col pt-5">
                    <span class="text-secondary fs-5 text-capitalize text-center fw-bold d-block">get to know
                        more</span>
                    <h2 class="h1 text-center text-capitalize fw-bold">About me</h2>
                    <div class="downArow fs-1 justify-content-end d-flex mb-5"><i
                            class="fa-solid fa-backward fa-rotate-270"></i></div>
                </div>
            </div>
            <div class="row">
                <div class=" col-lg-4 d-flex align-items-center justify-content-center mb-5">
                    <img src="./Assets/img/about.jpeg" alt="" class="aboutmeImg">
                </div>
                <div class="col-lg-8">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="card text-center p-5 mb-3 mb-md-0">
                                <i class="fa-solid fa-school" style="font-size: 1.5rem;"></i>
                                <span class="fw-bold fs-5">Education</span>
                                <!-- add your experience and you profession -->
                                <span class="text-secondary d-block">2+ Years <br>Frontend Development</span>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="card text-center p-5">
                                <i class="fa-brands fa-creative-commons-nd" style="font-size: 1.5rem;"></i>
                                <!-- add your experience and you profession -->
                                <span class="fw-bold fs-5">Experience</span>
                                <span class="text-secondary d-block">2+ Years <br>Frontend Development</span>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <!-- write about yourself in this section -->
                        <div class="col text-secondary m-3">
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde atque mollitia maiores id
                            autem esse repellat dolor porro sapiente totam. Rerum accusamus, modi eligendi a maxime
                            ipsum vitae enim aliquid repellendus nostrum ullam suscipit quos commodi sequi, repudiandae
                            tenetur, porro facilis quaerat. Dolorum consequuntur ipsam in provident ad similique, est
                            magnam quaerat ipsum minus pariatur consectetur illum temporibus repellat beatae! Enim sit
                            qui deleniti, illo quasi ullam, quaerat ipsam id nulla inventore eaque. Tenetur voluptates
                            rem facere, perspiciatis repellat eligendi. Eligendi obcaecati vero praesentium pariatur
                            atque voluptate rem, voluptas distinctio in at cumque consequuntur, explicabo a quos
                            reprehenderit nam quibusdam.
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- experience : update your details  -->
        <div class="experience container" id="experienceme">
            <div class="row">
                <div class="col pt-5">
                    <span class="text-secondary fs-5 text-capitalize text-center fw-bold d-block">explore my</span>
                    <h2 class="h1 text-center text-capitalize fw-bold">Experience</h2>
                </div>
            </div>
            <div class="row">
                <!-- card1 -->
                <div class="col-lg-6 p-lg-5 p-2">
                    <div class="card ms-lg-5 p-4">
                        <div class="row">
                            <h2 class="text-center text-capitalize h4 fw-bold text-secondary">Frontend Development
                            </h2>
                            <div class="col">


                                <div class="row w-100 m-auto p-lg-3">
                                    <div class="col-sm-6 col-8">
                                        <span class="d-block fs-6 fw-bold"><i class="fa-brands fa-codepen"></i>
                                            HTML</span>
                                        <span class="text-secondary text-capitalize">Experienced</span>
                                    </div>
                                    <div class="col-sm-6 col-8">
                                        <span class="d-block fs-6 fw-bold"><i class="fa-brands fa-codepen"></i>
                                            CSS</span>
                                        <span class="text-secondary text-capitalize">Experienced</span>
                                    </div>
                                </div>

                                <div class="row w-100 m-auto p-lg-3">
                                    <div class="col-sm-6 col-8">
                                        <span class="d-block fs-6 fw-bold"><i class="fa-brands fa-codepen"></i>
                                            SASS</span>
                                        <span class="text-secondary text-capitalize">Intermediate</span>
                                    </div>
                                    <div class="col-sm-6 col-8">
                                        <span class="d-block fs-6 fw-bold"><i class="fa-brands fa-codepen"></i>
                                            JavaScript</span>
                                        <span class="text-secondary text-capitalize">Basic</span>
                                    </div>
                                </div>
                                <div class="row w-100 m-auto p-lg-3">
                                    <div class="col-sm-6 col-8">
                                        <span class="d-block fs-6 fw-bold"><i class="fa-brands fa-codepen"></i>
                                            TypeScript</span>
                                        <span class="text-secondary text-capitalize">Basic</span>
                                    </div>
                                    <div class="col-sm-6 col-8">
                                        <span class="d-block fs-6 fw-bold"><i class="fa-brands fa-codepen"></i> Material
                                            UI</span>
                                        <span class="text-secondary text-capitalize">Intermediate</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- card2  -->
                <div class="col-lg-6 p-lg-5 p-2">
                    <div class="card me-lg-5 p-4 h-100">

                        <div class="row">
                            <h2 class="text-center text-capitalize h4 fw-bold text-secondary">Backend Development
                            </h2>
                            <div class="col">


                                <div class="row w-100 m-auto p-lg-3">
                                    <div class="col-sm-6 col-8">
                                        <span class="d-block fs-6 fw-bold"><i class="fa-brands fa-codepen"></i>
                                            Postgre SQL</span>
                                        <span class="text-secondary text-capitalize">Intermediate</span>
                                    </div>
                                    <div class="col-sm-6 col-8">
                                        <span class="d-block fs-6 fw-bold"><i class="fa-brands fa-codepen"></i>
                                            Node JS</span>
                                        <span class="text-secondary text-capitalize">Basic</span>
                                    </div>

                                </div>

                                <div class="row w-100 m-auto p-lg-3">
                                    <div class="col-sm-6 col-8">
                                        <span class="d-block fs-6 fw-bold"><i class="fa-brands fa-codepen"></i>
                                            Express JS</span>
                                        <span class="text-secondary text-capitalize">Intermediate</span>
                                    </div>
                                    <div class="col-sm-6 col-8">
                                        <span class="d-block fs-6 fw-bold"><i class="fa-brands fa-codepen"></i>
                                            Git</span>
                                        <span class="text-secondary text-capitalize">Intermediate</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <!-- projects -->
        <div class="project container" id="projectme">
            <div class="row">
                <div class="col pt-5">
                    <span class="text-secondary fs-5 text-capitalize text-center fw-bold d-block">Browse my
                        Recent</span>
                    <h2 class="h1 text-center text-capitalize fw-bold">Projects</h2>
                </div>
            </div>
            <!-- project 1 -->
            <div class="row h-auto mt-5">
                <div class="col-10 col-sm-9 col-md-7 col-lg-3 card outer p-3 m-auto mb-4">
                    <!-- project 1 image link here -->
                    <img src="./Assets/img/project-1.png" alt="">
                    <!-- project 1 Name -->
                    <h2 class="fw-bold text-center mt-3">Project One</h2>
                    <p class="text-center mt-3">
                        <!-- project 1 github link -->
                        <a href="#" class="btn btn-outline-dark fs-6 ps-2 pe-2 fw-bold me-3 ">GitHub</a>
                        <!-- project 1 live website link -->
                        <a href="#" class=" btn btn-outline-dark fs-6 ps-2 pe-2 fw-bold ">Live Demo</a>
                    </p>
                </div>
                <!-- project 2 -->
                <div class="col-10 col-sm-9 col-md-7 col-lg-3 card outer p-3 m-auto mb-4">
                    <!-- project 2 image link here -->
                    <img src="./Assets/img/project-2.png" alt="">
                    <!-- project 2 Name -->
                    <h2 class="fw-bold text-center mt-3">Project Two</h2>
                    <p class="text-center mt-3">
                        <!-- project 2 github link -->
                        <a href="#" class="btn btn-outline-dark fs-6 ps-2 pe-2 fw-bold me-3 ">GitHub</a>
                        <!-- project 2 live website link -->
                        <a href="#" class=" btn btn-outline-dark fs-6 ps-2 pe-2 fw-bold ">Live Demo</a>
                    </p>
                </div>
                <!-- project 3 -->
                <div class="col-10 col-sm-9 col-md-7 col-lg-3 card outer p-3 m-auto mb-4">
                    <!-- project 3 image link here -->
                    <img src="./Assets/img/project-3.png" alt="">
                    <!-- project 3 Name -->
                    <h2 class="fw-bold text-center mt-3">Project Three</h2>
                    <p class="text-center mt-3">
                        <!-- project 3 github link -->
                        <a href="#" class="btn btn-outline-dark fs-6 ps-2 pe-2 fw-bold me-3 ">GitHub</a>
                        <!-- project 3 live website link -->
                        <a href="#" class=" btn btn-outline-dark fs-6 ps-2 pe-2 fw-bold ">Live Demo</a>
                    </p>
                </div>
            </div>
        </div>
    </main>
    <!-- footer -->
    <footer id="contactme">
        <div class="row">
            <div class="col pt-5">
                <span class="text-secondary fs-5 text-capitalize text-center fw-bold d-block">get in touch</span>
                <h2 class="h1 text-center text-capitalize fw-bold">Contact Me</h2>
            </div>
        </div>
        <div class="d-flex align-items-center justify-content-center">
            <span class="card d-inline pt-3 pb-3 ps-5 pe-5 mt-4 mb-4">
                <!-- change you mail id -->
                <a href="mailto:aditya.xxx@gmail.com" class="text-dark fs-4 me-3"><i class="fa-solid fa-envelope"></i>
                    Gmail</a>
                <!-- add your linkedin profile link here -->
                <a href="#" class="text-dark fs-4"><i class="fa-brands fa-linkedin"></i> Linked in</a>
            </span>
        </div>
        <p class="m-5 text-center">© Copyright Chaudhary Aditya. All Rights Reserved</p>
    </footer>
    <script src="./Assets/JS/index.js"></script>

</body>

</html>