index.html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>Portfolio Practice Website </title>
    <link rel="stylesheet" href="/Myweb.css">
    <link rel="stylesheet" href="/fontawesome-free-6.2.1-web/css/all.css">
</head>

<body>
    <div class="scroll-button">
        <a href="#home"><i class="fas fa-arrow-up"></i></a>
    </div>
    <nav>
        <div class="navbar">
            <div class="logo"><a href="#">Hi There...</a></div>
            <ul class="menu">
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#skills">Skills</a></li>
                <!-- <li><a href="#services">  </a></li> -->
                <li><a href="#hobbies">Work Experience</a></li>
                <li><a href="#contact">Contact</a></li>
                <div class="cancel-btn">
                    <i class="fas fa-times"></i>
                </div>
            </ul>
            <div class="socialMedia-icons">
                <a href="https://twitter.com/Maheshwarugale"><i class="fab fa-twitter"></i></a>
                <a href="www.linkedin.com/in/maheshwar-ugale-frontenddev"><i class="fab fa-linkedin-in"></i></a>
            </div>
        </div>
        <div class="menu-btn">
            <a href="#"><i class="fas fa-bars"></i></a>primery
        </div>
    </nav>
        <!-- Home Section  -->
        <section class="home" id="home">
            <div class="home-container">
                <div class="text">
                    <div class="text-one">Hello,</div>
                    <div class="text-two">I'm Maheshwar Ugale</div>
                    <div class="text-three">UI Developer/ Frontend Developer</div>
                    <div class="text-four">From Pune, India</div>
                </div>
                <div class="button">
                    <button class="btn btn-primary" onclick="location.href='mailto:maheshwarugale401@gmail.com';">Hire Me</button>
                </div>
            </div>
        </section>

        <!-- About Section  -->
        <section class="about" id="about">
            <div class="content">
                <div class="title"><span> About Me</span></div>
                <div class="about-details">
                    <div class="left-box">
                        <img class="img-responsive" src="/assets/A.jpg" alt="">
                    </div>
                    <div class="right-box">
                        <div class="header">Crafting Digital Experiences: Meet Maheshwar, the Frontend Alchemist</div>
                        <p class="f-20">  A passionate and detail-oriented Frontend Developer with over 2 years of hands-on experience in crafting visually stunning and responsive websites. My expertise lies in the realms of <strong>JavaScript</strong>, <strong>Vue.js</strong>, HTML, CSS, and navigating RESTful APIs with ease. A dedicated <strong>problem-solver</strong>, I take pride in my ability to code with precision, delivering pixel-perfect designs that not only meet but exceed expectations. With a keen eye for design and a knack for creating seamless user experiences, I bring creativity and functionality together in every project I undertake. Let's build something extraordinary together! 😊</p>
                        
                        <div class="button">
                            <button> <a href="/Assets/Maheshwar_Ugale_RN_resume.pdf" target="_blank">Download CV</a></button>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Skills Section  -->
        <section class="skills" id="skills">
            <div class="content">
                <div class="title"><span>My Skills</span></div>
                <div class="skills-details">
                    <div class="text">
                         <div class="header">Frontend Alchemy: Blending Skill and Innovation</div>
                        <p class="f-20">As a seasoned frontend developer with over <strong>2 years</strong> of expertise, I thrive in crafting pixel-perfect and responsive websites. My proficiency spans a spectrum of skills, including HTML, CSS, <strong>JavaScript</strong>, <strong>Vue.js</strong>, Bootstrap, Sass, and the seamless integration of <strong>RESTful APIs</strong>. Beyond conventional development, I enjoy building automated tools using Vue.js, showcasing my penchant for innovative solutions. What sets me apart is not just my coding prowess, but also my ability to <strong>manage resources</strong> effectively. I bring enthusiasm, problem-solving skills, and a commitment to delivering top-notch, user-centric web experiences.</p>
                        <div class="experience">
                            <div class="num">2</div>
                            <div class="exp">years of <br /> experience</div>
                        </div>
                    </div>
                    <div class="boxes">
                        <div class="box">
                            <img class="img-responsive" src="/assets/html-5.svg" alt=""  width="80px">
                            <!-- <div class="header">HTML</div>
                            <div class="percentage">80%</div> -->
                        </div>
                        <div class="box">
                            <img class="img-responsive" src="/assets/css3-wordmark.svg" alt=""  width="115px">
                            <!-- <div class="header">Css</div>
                            <div class="percentage">70%</div> -->
                        </div>
                        <div class="box">
                            <img class="img-responsive" src="/assets/javascript (1).svg" alt=""  width="80px">
                            <!-- <div class="header">JavaScript</div>
                            <div class="percentage">60%</div> -->
                        </div>
                        <div class="box">
                            <img class="img-responsive" src="/assets/vuejs.svg" alt=""  width="100px">
                            <!-- <div class="header">Vue JS</div>
                            <div class="percentage">40%</div> -->
                        </div>
                        <div class="box">
                            <img class="img-responsive" src="/assets/bootstrap-wordmark.svg" alt=""  width="100px">
                            <!-- <div class="header">Bootstrap</div>
                            <div class="percentage">90%</div> -->
                        </div>
                        <div class="box">
                            <img class="img-responsive" src="/assets/sass.svg" alt=""  width="80px">
                            <!-- <div class="header">SQL</div>
                            <div class="percentage">80%</div> -->
                        </div>
                      
                    </div>
                </div>
        </section>

        <!-- Services Section -->
        <!-- <section class="services" id="services">
            <div class="content">
                <div class="title"><span> My Services</span></div>
                <div class="mainCallout">
                    <div class="callout">
                        <div class="icon">
                            <i class="fa fab fa-deskpro"></i>
                        </div>
                        <p class="subHeader">Web Development</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum finibus nulla et augue
                            eleifend, vel ornare mauris semper.</p>
                    </div>
                    <div class="callout">
                        <div class="icon">
                            <i class="fa fas fa-chart-line"></i>
                        </div>
                        <div class="subHeader">Backend Development</div>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum finibus nulla et augue
                            eleifend, vel ornare mauris semper.</p>
                    </div>
                    <div class="callout">
                        <div class="icon">
                            <i class="fa fab fa-android"></i>
                        </div>
                        <div class="subHeader">Design</div>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum finibus nulla et augue
                            eleifend, vel ornare mauris semper.</p>
                    </div>
                    <div class="callout">
                        <div class="icon">
                            <i class="fa fa-info-circle"></i>
                        </div>
                        <div class="subHeader">AWS Cloud</div>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum finibus nulla et augue
                            eleifend, vel ornare mauris semper.</p>
                    </div>
                    <div class="callout">
                        <div class="icon">
                            <i class="fa fas fa-table"></i>
                        </div>
                        <div class="subHeader">Content Creation</div>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum finibus nulla et augue
                            eleifend, vel ornare mauris semper.</p>
                    </div>
                    <div class="callout">
                        <div class="icon">
                            <i class="fa fas fa-tablet"></i>
                        </div>
                        <div class="subHeader">RPA</div>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum finibus nulla et augue
                            eleifend, vel ornare mauris semper.</p>
                    </div>
                </div>
            </div>
        </section> -->
        <!-- Contact Me Section -->
        <section class="hobbies" id="hobbies">
            <div class="content">
                <div class="title"><span>Work Experience</span></div>
                <div class="mainCallout">
                    <div class="callout">
                        <div class="upperCallout">
                            <div class="imgTitle">Red Nucleus</div>
                            <div class="subImgTitile">UI Developer</div>
                            <div class="date"><em>June 2022 - Present</em></div>
                        </div>
                        <hr />
                        <div class="lowerCallout f-20" >
                            <p>Experienced in gamification and E-learning Games Development with expertise in creating diverse web pages such as Home, Game Selection, Question Management, Live Scoreboards, and Hosting Pages.</p>
                            <br>
                            <ul>
                                <li>Proficient collaboration with design and backend teams to transform UI mockups into interactive web pages using HTML, CSS, JavaScript, and vue.js.</li>
                                <li>Developing and maintaining reusable and scalable frontend components with a mobile-first approach, ensuring optimal user experiences across all devices using Vue.js.</li>
                                <li>Utilizing REST API and axios library for seamless interaction with backend data, enhancing the overall functionality of web applications.</li>
                                <li>Implementing frontend frameworks like Bootstrap and Tailwind CSS to achieve consistent, visually appealing designs with cross-browser compatibility.</li>
                                <li>Adhering to Agile methodologies throughout the Software Development Life Cycle (SDLC), actively participating in PI planning and sprint activities for efficient project delivery.</li>
                            </ul>
                        </div>
                    </div>
                    <div class="callout">
                        <div class="upperCallout">
                            <div class="imgTitle">Cognizant</div>
                            <div class="subImgTitile">UI Developer</div>
                            <div class="date"><em>December 2021 - June 2022</em></div>
                        </div>
                        <hr />
                        <div class="lowerCallout f-20" >
                            <p>Project Experience: Sales Data Portal</p>
                            <br>
                            <p>As a key contributor to a sales data portal development project, I played a pivotal role in crafting an intuitive and responsive interface for efficient data management. Leveraging a tech stack that included HTML, CSS, and JavaScript and Vue.js</p>
                            <br>
                            <ul>
                                <li>Developed a responsive sales data portal using HTML, CSS, and JavaScript, with a focus on intuitive user interfaces.</li>
                                <li>Utilized Vue.js and Bootstrap to enhance frontend functionalities, creating a seamless experience for users.</li>
                                <li>Integrated REST API and employed the axios library for efficient communication with the backend.</li>
                               
                            </ul>
                            <div><em>Additionally, underwent a 6-month internship at Cognizant, gaining valuable training and experience.</em></div>
                        </div>
                    </div>
                    
                    <!-- <div class="callout">
                        <div class="upperCallout">
                            <img class="img-responsive" src="/assets/Books.jpg" alt="">
                            <div class="imgTitle">Reading</div>
                        </div>
                        <hr />
                        <div class="info">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum finibus
                            nulla
                            et augue eleifend, vel ornare mauris semper.</div>
                        <div class="knowMore"><a href="#">Learn More</a> </div>
                    </div>
                    <div class="callout">
                        <div class="upperCallout">
                            <img class="img-responsive" src="/assets/Moves.jfif" alt="">
                            <div class="imgTitle">Movies</div>
                        </div>
                        <hr />
                        <div class="info">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum finibus
                            nulla
                            et augue eleifend, vel ornare mauris semper.</div>
                        <div class="knowMore"><a href="#">Learn More</a> </div>
                    </div>
                    <div class="callout">
                        <div class="upperCallout">
                            <img class="img-responsive" src="/assets/songs.jfif" alt="">
                            <div class="imgTitle">Songs</div>
                        </div>
                        <hr />
                        <div class="info">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum finibus
                            nulla
                            et augue eleifend, vel ornare mauris semper.</div>
                        <div class="knowMore"><a href="#">Learn More</a> </div>
                    </div> -->
                </div>
            </div>
        </section>
        <!-- Contact Me Section -->
        <section class="contact" id="contact">
            <div class="content">
                <div class="title"><span> About Me</span></div>
                <div class="text">
                    <div class="header">Looking for a UI/Frontend Developer?</div>
                    <p class="f-20">I'm currently searching for new opportunities as UI Developer/ FrontEnd Developer roles. I'm inclined towards digging deeper into functional Javascript, Vue.js and hence learn upcoming frameworks/libraries. I'm also looking to improve my designing kills while working latest CSS frameworks such as Tailwind CSS or Bootstrap. If you find me a good fit for your team, please reach out to me via the following:</p>
                    <div class="button">
                        <button onclick="showContactInfo()">Let's Connect</button>
                    </div>
                    
                    <div id="contactPopup" class="f-20">
                        <!-- Your contact information goes here -->
                        <p>Email: maheshwarugale401@gmail.com</p>
                        <p>Mobile: 9921433641/7020984424</p>
                    </div>
                </div>
            </div>
        </section>
    <!-- Footer Section -->
    <footer class="footer">
        <div class="text"><span>Created By <a href="#">Maheshwar Ugale</a>| &#169; 2023 All Rights
                Reserved.</span> </div>
    </footer>
    <script type="text/javascript" src="https://github.com/MaheshUgale/Maheshwar-ugale/blob/main/Myweb.js"></script>
</body>

</html>