index.html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PM </title>
    <link rel="shortcut icon" href="images/main.ico" type="image/x-icon">
    <link rel="stylesheet" href="style.css ">
    <!-- Locomotive JS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="responsive.css">
</head>

<body>
    <div class="loco" data-scroll-container>
        <header>
            <nav>
                <div class="logo ">
                    <img src="./images/temp.png" alt="pm logo">
                </div>
                <div class="navbar">
                    <div><a href="#">Home</a></div>
                    <div><a href="#projects">Projects</a></div>
                    <div><a href="#">Experience </a></div>
                    <div><a href="#contact">Contact </a></div>
                </div>
            </nav>
        </header>
        <section class="container about" data-scroll>
            <div data-scroll data-scroll-speed="2" class="avatar">
                <img src="images/avatar.png" alt="pm avatar ">
            </div>
            <div class="about-text">
                <h1>I <span>code</span><br>and listen to <span>music</span>!</h1>
                <p>I am a seasoned full-stack software engineer with over 2 years of
                    professional experience, specializing in frontend development. My
                    expertise lies in crafting robust and scalable web-apps.</p>
                <div class="about-btn">
                    <button data-scroll data-scroll-speed="0.5" data-scroll-direction="horizontal"
                        class="btn-primary ">Get in Touch</button>
                    <a href="#projects"><button data-scroll data-scroll-speed="-0.5" data-scroll-direction="horizontal"
                            class="btn-secondary ">Projects</button></a>
                </div>
            </div>
        </section>
        <section class="container experience-with" data-scroll>
            <h2>Experience With </h2>
            <div class="experience-with-lang">
                <div data-scroll data-scroll-speed="5" data-scroll-direction="horizontal"><img src="images/html5.png"
                        alt="html logo" /></div>
                <div data-scroll data-scroll-speed="5" data-scroll-direction="horizontal"><img src="images/css3.png"
                        alt="html logo" /></div>
                <div><img src="images/nodejs.png" alt="html logo" /></div>
                <div data-scroll data-scroll-speed="-5" data-scroll-direction="horizontal"><img src="images/reactjs.png"
                        alt="html logo" /></div>
                <div data-scroll data-scroll-speed="-5" data-scroll-direction="horizontal"><img
                        src="images/javascript.png" alt="html logo" /></div>
            </div>
        </section>
        <!-- PROJECTS -->
        <section class="container" id="projects" data-scroll>
            <h2 class="primary-heading heading-projects ">Projects</h2>
            <div class="projects">
                <div data-scroll data-scroll-speed="0.5" data-scroll-direction="vertical" class=" project-item ">
                    <a href="https://26-pm.github.io/play/">
                        <div class="img"><img src="images/play.png" alt="play"></div>
                    </a>
                    <div class="projects-title">
                        <p>Click img to visit.</p>
                        <h3>Play with Text</h3>
                    </div>
                </div>
                <div data-scroll data-scroll-speed="0.5" data-scroll-direction="vertical" class=" project-item ">
                    <a href="https://26-pm.github.io/currencyConverter/">
                        <div class="img"><img src="images/currency.jpg" alt="currency converter"></div>
                    </a>
                    <div class="projects-title">
                        <p>Click img to visit.</p>
                        <h3>Currency Converter</h3>
                    </div>
                </div>
                <div data-scroll data-scroll-speed="0.5" data-scroll-direction="vertical" class=" project-item ">
                    <a href="https://26-pm.github.io/Netflix/">
                        <div class="img"><img src="https://clipground.com/images/logo-de-netflix-clipart-2.png"
                                alt="netflix"></div>
                    </a>
                    <div class="projects-title">
                        <p>Click img to visit.</p>
                        <h3>Netflix</h3>
                    </div>
                </div>
                <div data-scroll data-scroll-speed="0.5" data-scroll-direction="vertical" class=" project-item ">
                    <a href="https://26-pm.github.io/spotify/">
                        <div class="img"><img
                                src="./images/Spotify.png"
                                alt="spotify"></div>
                    </a>
                    <div class="projects-title">
                        <p>Click img to visit.</p>
                        <h3>Spotify</h3>
                    </div>
                </div>
                <div data-scroll data-scroll-speed="0.5" data-scroll-direction="vertical" class=" project-item ">
                    <a href="https://26-pm.github.io/todo/">
                        <div class="img"><img
                                src="./images/todo.jpg"
                                alt="todo"></div>
                    </a>
                    <div class="projects-title">
                        <p>Click img to visit.</p>
                        <h3>Todo</h3>
                    </div>
                </div>
                <div data-scroll data-scroll-speed="0.5" data-scroll-direction="vertical" class=" project-item ">
                    <a href="https://ezform-wd7s.onrender.com/">
                        <div class="img"><img
                                src="./images/1.png"
                                alt="form"></div>
                    </a>
                    <div class="projects-title">
                        <p>Click img to visit.</p>
                        <h3>eZForm</h3>
                    </div>
                </div>
                <div data-scroll data-scroll-speed="0.5" data-scroll-direction="vertical" class=" project-item ">
                    <a href="https://crud-app-x5sd.onrender.com">
                        <div class="img"><img
                                src="./images/CRSH.png"
                                alt="form"></div>
                    </a>
                    <div class="projects-title">
                        <p>Click img to visit.</p>
                        <h3>CRSH</h3>
                    </div>
                </div>
                <div data-scroll data-scroll-speed="0.5" data-scroll-direction="vertical" class=" project-item ">
                    <a href="https://26-pm.github.io/Pinterestt/">
                        <div class="img"><img
                                src="./images/Pinterestt.png"
                                alt="form"></div>
                    </a>
                    <div class="projects-title">
                        <p>Click img to visit.</p>
                        <h3>Pinterestt</h3>
                    </div>
                </div>
                <div data-scroll data-scroll-speed="0.5" data-scroll-direction="vertical" class=" project-item ">
                    <a href="https://ez-saver.onrender.com/">
                        <div class="img"><img
                                src="./images/eZ Saver.png"
                                alt="Task Manager"></div>
                    </a>
                    <div class="projects-title">
                        <p>Click img to visit.</p>
                        <h3>eZ Saver</h3>
                    </div>
                </div>
                <div data-scroll data-scroll-speed="0.5" data-scroll-direction="vertical" class=" project-item ">
                    <a href="https://26-pm.github.io/donate.connect/">
                        <div class="img"><img
                                src="./images/2.png"
                                alt="donate connect"></div>
                    </a>
                    <div class="projects-title">
                        <p>Click img to visit.</p>
                        <h3>Donate Connect</h3>
                    </div>
                </div>
            </div>
        </section>
        <!-- <section class="container">
        <h2 class="primary-heading heading-experience">EXPERIENCE</h2>
        <div class="experiences">
            <div class="experience-item">
                <div class="experience-title-container">
                    <div><img src="cdn/images/goog-logo.svg" alt="google" /></div>
                    <div class="experience-title">Lead Software Engineer at Google</div>
                    <div class="date">Nov 2019 - Present</div>
                </div>
                <p>
                    As a Senior Software Engineer at Google, I played a pivotal role in
                    developing innovative solutions for Google's core search algorithms.
                    Collaborating with a dynamic team of engineers, I contributed to the
                    enhancement of search accuracy and efficiency, optimizing user
                    experiences for millions of users worldwide.
                </p>
            </div>
            <div class="experience-item">
                <div class="experience-title-container">
                    <div><img src="cdn/images/apple-logo.svg" alt="google" /></div>
                    <div class="experience-title">
                        Junior Software Engineer at Apple
                    </div>
                    <div class="date">Jan 200.56 - Dec 200.57</div>
                </div>
                <p>
                    During my tenure at Apple, I held the role of Software Architect,
                    wimg I played a key role in shaping the architecture of
                    mission-critical software projects. Responsible for designing
                    scalable and efficient systems, I provided technical leadership to a
                    cross-functional team.
                </p>
            </div>
            <div class="experience-item">
                <div class="experience-title-container">
                    <div><img src="cdn/images/meta-logo.svg" alt="google" /></div>
                    <div class="experience-title">Software Engineer at Meta</div>
                    <div class="date">Jan 200.57 - Oct 200.59</div>
                </div>
                <p>
                    At Meta, I served as a Software Engineer, focusing on the design and
                    implementation of backend systems for the social media giant's
                    dynamic platform. Working on projects that involved large-scale data
                    processing and user engagement features, I leveraged my expertise to
                    ensure seamless functionality and scalability.
                </p>
            </div>
        </div>
    </section> -->
        <footer id="contact" data-scroll>
            <div class="container">
                <h2>Contact</h2>
                <p>
                    Seasoned Full Stack Software Engineer with over 2 years of hands-on
                    experience in designing and implementing robust, scalable, and
                    innovative web solutions. Adept at leveraging a comprehensive skill
                    set encompassing front-end and back-end technologies.
                </p>
                <div class="email-container">
                    <div><img src="images/email-icon.svg" alt="email" /></div>
                    <div>pm26new@gmail.com</div>
                </div>
                <div class="social-links">
                    <div><img src="images/x.png" alt="twitter" /></div>
                    <div><img src="images/instagram.svg" alt="twitter" /></div>
                    <div><img src="images/youtube.png" alt="twitter" /></div>
                </div>
            </div>
        </footer>
        <!-- locomotive -->
        <script src="https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.js"></script>
        <script>
            const scroll = new LocomotiveScroll({
                el: document.querySelector('[data-scroll-container]'),
                smooth: true
            });
        </script>
    </div>
</body>

</html>