Developer Portfolio Website

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>InternPedia Portfolio Template</title>
    <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.8/css/line.css">
    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
</head>
<body>
    <div class="nav-toggle" id="nav-toggle">
        <i class="uil uil-bars"></i>
    </div>

    <aside class="sidebar" id="sidebar">
        <nav class="nav">
            <div class="nav-logo">
                <a href="#" class="nav-logo-text">TS</a>
            </div>

            <div class="nav-menu">
                <div class="menu">
                    <ul class="nav-list">
                        <li class="nav-item">
                            <a href="#home" class="nav-link active-link">Home</a>
                        </li>

                        <li class="nav-item">
                            <a href="#about" class="nav-link">About</a>
                        </li>

                        <li class="nav-item">
                            <a href="#skills" class="nav-link">Skills</a>
                        </li>

                        <li class="nav-item">
                            <a href="#work" class="nav-link">Work</a>
                        </li>

                        <li class="nav-item">
                            <a href="#services" class="nav-link">Services</a>
                        </li>

                        <li class="nav-item">
                            <a href="#contact" class="nav-link">Contact</a>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="btn-share">
                <i class="uil uil-share-alt social-share"></i>
            </div>

            <div class="nav-close" id="nav-close">
                <i class="uil uil-times"></i>
            </div>
        </nav>
    </aside>

    <main class="main">
        <section class="home" id="home">
            <div class="home-container container grid">
                <div class="home-social">
                    <span class="home-social-follow">Follow Me</span>
                    <div class="home-social-links">
                        <a href="https://www.facebook.com" target="_blank" class="home-social-link">
                            <i class="uil uil-facebook-f"></i>
                        </a>

                        <a href="https://www.instagram.com/internpedia.in/" target="_blank" class="home-social-link">
                            <i class="uil uil-instagram"></i>
                        </a>

                        <a href="https://www.x.com" target="_blank" class="home-social-link">
                            <i class="uil uil-twitter"></i>
                        </a>
                    </div>
                </div>

                <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVn2UxGbu7K2wqNdXeLpMhlYDwHwVeggKzMuBz3SHkEZGl_kHY9lp5TNZro7dgF6RzrJlD9Io88LvRfRzOnAudS4bsdKj0wkf8V24yTYrgiod2jf7Y7PUGlkkLbHk1KktuOkmo-PWjbrnDwhehoElsimJIFTrVAR4X6R0I2XCGv21YS98_hS-LUMSPUX7E/s1600/portfolioMobile.png" alt="portfolioHome" class="home-img">

            <div class="home-data">
                <h1 class="home-title">Hi, I'm Tony Stark</h1>
                <h3 class="home-subtitle">Full Stack Developer</h3>
                <p class="home-description">Creative Full Stack Developer crafting responsive, secure, and scalable web solutions. Proficient in front-end, back-end, and cloud integration.</p>
                <a href="#about" class="button">
                    <i class="uil uil-user button-icon"></i>
                    More About me!
                </a>
            </div>

            <div class="my-info">
                <div class="info-item">
                    <i class="uil uil-facebook-messenger info-icon"></i>

                    <div>
                        <h3 class="info-title">Messenger</h3>
                        <span class="info-subtitle">client.fb0303</span>
                    </div>
                </div>

                <div class="info-item">
                    <i class="uil uil-whatsapp info-icon"></i>

                    <div>
                        <h3 class="info-title">Whatsapp</h3>
                        <span class="info-subtitle">999 999 9999</span>
                    </div>
                </div>

                <div class="info-item">
                    <i class="uil uil-envelope-edit info-icon"></i>

                    <div>
                        <h3 class="info-title">Email</h3>
                        <span class="info-subtitle">example@gmail.com</span>
                    </div>
                </div>
            </div>
        </div>

            
        </section>

        <section class="about section" id="about">
            <h2 class="section-title" data-heading="My Intro">About me</h2>

            <div class="about-container container grid">
                <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglJGrE5QK3bM3Bt8prdohSzd35pyLcPUzTnG0B53l86QNbgMsvWwjnY6aj1r_3sOSBy8-YCClt6VucS0IdZmnE93p2v-56IId8hvHjCmNanMHlPVEdyJHC1rHbh3z6aOIUAOxBW_44rZlTd6_GtcZw2eOnDbNrbzOWYaTZleWRbZF5hmJn0KrSsjlgoUfc/s462/PortfolioImage2.png" alt="portfolioImage" class="about-img">

                <div class="about-data">
                    <h3 class="about-heading">Hi, I'm Tony Stark</h3>
                    <p class="about-description">Passionate Full Stack Developer skilled in building dynamic web applications with modern technologies. Experienced in front-end design, back-end development, and database management to deliver scalable, user-friendly solutions.</p>

                    <div class="about-info">
                        <div class="about-box">
                            <i class="uil uil-award about-icon"></i>
                            <h3 class="about-title">Experience</h3>
                            <span class="about-subtitle">05 + Years</span>
                        </div>

                        <div class="about-box">
                            <i class="uil uil-suitcase-alt about-icon"></i>
                            <h3 class="about-title">Completed</h3>
                            <span class="about-subtitle">53+ Projects</span>
                        </div>

                        <div class="about-box">
                            <i class="uil uil-headphones-alt about-icon"></i>
                            <h3 class="about-title">Support</h3>
                            <span class="about-subtitle">Online 24/7</span>
                        </div>
                    </div>

                    <a href="#contact" class="button"><i class="uil uil-navigator button-icon"></i>Contact me</a>
                </div>
            </div>
        </section>

        <section class="qualification section">
            <h2 class="section-title" data-heading="My Journey">Qualifications</h2>

            <div class="qualification-container container grid">
                <div class="education">
                    <h3 class="qualification-title"><i class="uil uil-graduation-cap"></i>Education</h3>

                    <div class="timeline">
                        <div class="timeline-item">
                            <div class="circle-dot"></div>
                            <h3 class="timeline-title">IJK University (NYC, USA)</h3>
                            <p class="timeline-text">Graphic Design</p>
                            <span class="timeline-date"><i class="uil uil-calendar-alt"></i>2017 - 2018</span>
                        </div>

                        <div class="timeline-item">
                            <div class="circle-dot"></div>
                            <h3 class="timeline-title">XYZ University (NYC. USA)</h3>
                            <p class="timeline-text">Web Design</p>
                            <span class="timeline-date"><i class="uil uil-calendar-alt"></i>2018 - 2019</span>
                        </div>

                        <div class="timeline-item">
                            <div class="circle-dot"></div>
                            <h3 class="timeline-title">ABC University (NYC, USA)</h3>
                            <p class="timeline-text">Full Stack Web Development</p>
                            <span class="timeline-date"><i class="uil uil-calendar-alt"></i>2019 - 2020</span>
                        </div>
                    </div>
                </div>

                <div class="experience">
                    <h3 class="qualification-title"><i class="uil uil-suitcase"></i>Experience</h3>

                    <div class="timeline">
                        <div class="timeline-item">
                            <div class="circle-dot"></div>
                            <h3 class="timeline-title">IJK Inc. (NYC, USA)</h3>
                            <p class="timeline-text">Senior UX Designer</p>
                            <span class="timeline-date"><i class="uil uil-calendar-alt"></i>2020 - 2025</span>
                        </div>

                        <div class="timeline-item">
                            <div class="circle-dot"></div>
                            <h3 class="timeline-title">ABC Inc. (NYC, USA)</h3>
                            <p class="timeline-text">Website / UI Designer</p>
                            <span class="timeline-date"><i class="uil uil-calendar-alt"></i>2016 - 2017</span>
                        </div>

                        <div class="timeline-item">
                            <div class="circle-dot"></div>
                            <h3 class="timeline-title">XYZ Inc. (NYC, USA)</h3>
                            <p class="timeline-text">senior UI Designer</p>
                            <span class="timeline-date"><i class="uil uil-calendar-alt"></i>2018 - 2019</span>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="skills section" id="skills">
            <h2 class="section-title" data-heading="My Abilities">My Experience</h2>

            <div class="skills-container container grid">
                <div class="skills-tabs">
                    <div class="skills-header skills-active" data-target="#frontend">
                        <i class="uil uil-brackets-curly skills-icon"></i>

                        <div>
                            <h1 class="skills-title">Frontend Developer</h1>
                            <span class="skills-subtitle">5+ years</span>
                            
                        </div>

                        <i class="uil uil-angle-down skills-arrow"></i>
                    </div>

                    <div class="skills-header" data-target="#design">
                        <i class="uil uil-swatchbook skills-icon"></i>

                        <div>
                            <h1 class="skills-title">UI / UX Design</h1>
                            <span class="skills-subtitle">7+ years</span>
                            
                        </div>

                        <i class="uil uil-angle-down skills-arrow"></i>
                    </div>

                    <div class="skills-header" data-target="#backend">
                        <i class="uil uil-server-network skills-icon"></i>

                        <div>
                            <h1 class="skills-title">Backend Developer</h1>
                            <span class="skills-subtitle">2+ years</span>

                        </div>

                        <i class="uil uil-angle-down skills-arrow"></i>
                    </div>
                </div>

                <div class="skills-content">
                    <div class="skills-group skills-active" data-content id="frontend">
                        <div class="skills-list grid">
                            <div class="skills-data">
                                <div class="skills-titles">
                                    <h3 class="skills-name">HTML</h3>
                                    <span class="skills-number">95%</span>
                                </div>

                                <div class="skills-bar">
                                    <span class="skills-percentage" style="width: 95%;"></span>
                                </div>
                            </div>

                            <div class="skills-data">
                                <div class="skills-titles">
                                    <h3 class="skills-name">CSS</h3>
                                    <span class="skills-number">90%</span>
                                </div>

                                <div class="skills-bar">
                                    <span class="skills-percentage" style="width: 90%;"></span>
                                </div>
                            </div>

                            <div class="skills-data">
                                <div class="skills-titles">
                                    <h3 class="skills-name">Javascript</h3>
                                    <span class="skills-number">85%</span>
                                </div>

                                <div class="skills-bar">
                                    <span class="skills-percentage" style="width: 85%;"></span>
                                </div>
                            </div>

                            <div class="skills-data">
                                <div class="skills-titles">
                                    <h3 class="skills-name">React</h3>
                                    <span class="skills-number">89%</span>
                                </div>

                                <div class="skills-bar">
                                    <span class="skills-percentage" style="width: 89%;"></span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="skills-group" data-content id="design">
                        <div class="skills-list grid">
                            <div class="skills-data">
                                <div class="skills-titles">
                                    <h3 class="skills-name">Figma</h3>
                                    <span class="skills-number">91%</span>
                                </div>

                                <div class="skills-bar">
                                    <span class="skills-percentage" style="width: 91%;"></span>
                                </div>
                            </div>

                            <div class="skills-data">
                                <div class="skills-titles">
                                    <h3 class="skills-name">Sketch</h3>
                                    <span class="skills-number">85%</span>
                                </div>

                                <div class="skills-bar">
                                    <span class="skills-percentage" style="width: 85%;"></span>
                                </div>
                            </div>

                            <div class="skills-data">
                                <div class="skills-titles">
                                    <h3 class="skills-name">PhotoShop</h3>
                                    <span class="skills-number">75%</span>
                                </div>

                                <div class="skills-bar">
                                    <span class="skills-percentage" style="width: 75%;"></span>
                                </div>
                            </div>

                        </div>
                    </div>

                    <div class="skills-group" data-content id="backend">
                        <div class="skills-list grid">
                            <div class="skills-data">
                                <div class="skills-titles">
                                    <h3 class="skills-name">PHP</h3>
                                    <span class="skills-number">85%</span>
                                </div>

                                <div class="skills-bar">
                                    <span class="skills-percentage" style="width: 85%;"></span>
                                </div>
                            </div>

                            <div class="skills-data">
                                <div class="skills-titles">
                                    <h3 class="skills-name">Python</h3>
                                    <span class="skills-number">90%</span>
                                </div>

                                <div class="skills-bar">
                                    <span class="skills-percentage" style="width: 90%;"></span>
                                </div>
                            </div>

                            <div class="skills-data">
                                <div class="skills-titles">
                                    <h3 class="skills-name">MySQL</h3>
                                    <span class="skills-number">80%</span>
                                </div>

                                <div class="skills-bar">
                                    <span class="skills-percentage" style="width: 80%;"></span>
                                </div>
                            </div>

                            <div class="skills-data">
                                <div class="skills-titles">
                                    <h3 class="skills-name">Firebase</h3>
                                    <span class="skills-number">75%</span>
                                </div>

                                <div class="skills-bar">
                                    <span class="skills-percentage" style="width: 75%;"></span>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="work section" id="work">
            <h2 class="section-title" data-heading="My Portfolio">Recent Works</h2>

            <div class="work-filters">
                <span class="work-item active-work" data-filter="all">All</span>
                <span class="work-item" data-filter=".web">Web</span>
                <span class="work-item" data-filter=".app">App</span>
                <span class="work-item" data-filter=".design">Design</span>
            </div>

            <div class="work-container container grid">
                <div class="work-card mix web">
                    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCNY6t3Ynz47Pb6aLi3CuepqjBrARuX2VBt7dIf0wKT9FsC_20wFYlMLUnRjPb0scsGZ9ruPkhjS6FS1cbKxY6dSpDNb7c81ynruhbceIaYnoHt1ucJZdrcEVxq_tPEHrfyO6q9nYXtVJPNvX9hGm2v4GWsH5_SN55UZzBeoNNS22-6WEP9nxdpkcZZUcD/s290/Web%20Design1.png" alt="web design project" class="work-img">
                    <h3 class="work-title">Web Design</h3>
                    <span class="work-button">Demo<i class="uil uil-arrow-right work-button-icon"></i></span>
                </div>

                <div class="work-card mix app">
                    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWNqqAkarR4wAVg2v9sx6nufJexzTEKAbhkwV8j1fUqJwbza8gVVhUEvOQouBoj_G4LxzsZOhPPH44SDD2EEltU7uHIrG_0iilyTtNG6xuL_0dkCwbmdZ28_5L4E7EiFXQdSiQe7-soSbTgYNwWx7-ZJ4BRvO7TioQ4WsX1Bg74Q9eB5qb_5vtxZVF6jS-/s290/Mobile%20Design3.png" alt="App Design" class="work-img">
                    <h3 class="work-title">App Design</h3>
                    <span class="work-button">Demo<i class="uil uil-arrow-right work-button-icon"></i></span>
                </div>

                <div class="work-card mix design">
                    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDMK8JiM6BdltVswy1CJ3k-ceynkka4Y3uxS8UjmPffCc3LF_xVqBP5Vw42Yllgd6bzLxl2E03dN0zJx14ykosxsT6FpvCbr9PO2E3_tF7XynSraKCcNMG3sOX7UuGSLP_5RbISClR-HGQGFUuntCPqdkv4CMOGuZOw4zpVX6ykboXpkQVSjPZ2DoemiSB/s290/Web%20Design2.png" alt="brand design" class="work-img">
                    <h3 class="work-title">Brand Design</h3>
                    <span class="work-button">Demo<i class="uil uil-arrow-right work-button-icon"></i></span>
                </div>

                <div class="work-card mix app">
                    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFW9_ZltUgqSuts9D2vAbeQ5-3Z-PA0pGEIdnXSf12ccySww-bf09TJpLe7vkgWW2GgTCtyaPt5PNe_m3wP0mYkUFxz8xDKh4YwyiG_hgQoCzm49y0Z_9t_ry2vdXQ8ZnvsQhzxcdbLhNvDoQG3p8xNB5QwWP1g4jVuyGWZJgzXB_Kbnu0FbxZ0re-jCf_/s290/Mobile%20Design2.png" alt="Mobile App" class="work-img">
                    <h3 class="work-title">App Design</h3>
                    <span class="work-button">Demo<i class="uil uil-arrow-right work-button-icon"></i></span>
                </div>

                <div class="work-card mix web">
                    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIcIEBDx_b-YU6XxVOmnXbs9gOzILWMNYwOUR0u3f-wspa0THLHOLHro6dZJU6xAvH_OYVADhX8YIMXR9zofLZh0v5qy7xWY5K1Y2UqTdepNKG2wcVysdKSC2qNVO7rc8KglQp8LSxfiVg3aqJ_MOoK7qrNOOzYb901j0CZxTquspU2vWJ08u4WDu6XbZg/s290/Web%20Design3.png" alt="webApp" class="work-img">
                    <h3 class="work-title">Website Design</h3>
                    <span class="work-button">Demo<i class="uil uil-arrow-right work-button-icon"></i></span>
                </div>

                <div class="work-card mix design">
                    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBrSjMzxN4a7YoHt2vYPhA0e-DVSl2NSYS4QrQsYvzh06q9SCmVjZvMoS8vSqyH0euyfN6zjps8TRBhJTrV8zMq3n67y78NyCaWqloK6XWiqBGkKlEjJrai987uQLudLhV95wn2vAfhs3dVoHS7D2CTrXckgIxl20_eH7jUqCft82YeazX9pO0W7jectoq/s290/Mobile%20Design1.png" alt="mobile app design" class="work-img">
                    <h3 class="work-title">App Design</h3>
                    <span class="work-button">Demo<i class="uil uil-arrow-right work-button-icon"></i></span>
                </div>
            </div>
        </section>

        <section class="services section" id="services">
            <h2 class="section-title" data-heading="Services">What I Offer</h2>

            <div class="services-container container grid">
                <div class="services-content">
                    <div>
                        <i class="uil uil-web-grid services-icon"></i>
                        <h3 class="services-title">Web <br> Designer</h3>
                    </div>

                    <span class="services-button">
                        View More <i class="uil uil-arrow-right services-button-icon"></i>
                    </span>
                </div>

                <div class="services-content">
                    <div>
                        <i class="uil uil-arrow services-icon"></i>
                        <h3 class="services-title">UI/UX <br> Designer</h3>
                    </div>

                    <span class="services-button">
                        View More <i class="uil uil-arrow-right services-button-icon"></i>
                    </span>
                </div>

                <div class="services-content">
                    <div>
                        <i class="uil uil-edit services-icon"></i>
                        <h3 class="services-title">Branding <br> Designer</h3>
                    </div>

                    <span class="services-button">
                        View More <i class="uil uil-arrow-right services-button-icon"></i>
                    </span>
                </div>
            </div>
        </section>

        <section class="testimonials section">
            <h2 class="section-title" data-heading="My clients say">Testimonials</h2>

            <div class="testimonials-container container swiper">
                <div class="swiper-wrapper">
                    <div class="testimonial-card swiper-slide">
                        <div class="testimonial-quote">
                            <i class='bx bxs-quote-alt-left'></i>
                        </div>
                        <p class="testimonial-description">The team delivered an outstanding app design for our business. The interface is smooth, modern, and exactly what we needed. Their professionalism and attention to detail truly stood out. Highly recommended!</p>
                        <h3 class="testimonial-date">May 30, 2025</h3>
                        <div class="testimonial-profile">
                            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOb1g4-oqswiM8_v1R7tnGy8pk9FDAzqonBxaf5UhtdeXsgtpfE2O3DaqfqifNWPmLv2BfgxzOtXmT16yFcwocFui_a7exrfsVMKgpBziPmBWPBdyeOwJN0Zi99gYe8yByjLdVEOhYCPzzvX_fcy5Rv1neTRaka9z4QLJtCCXGUh1nzZMlB3TGAjAjs1IZ/s1600/profile.png?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=80" alt="" class="testimonial-profile-img">

                            <div class="testimonial-profile-data">
                                <span class="testimonial-profile-name">— Emma Watson</span>
                                <span class="testimonail-profile-detail">Founder of XYZ Solutions</span>
                            </div>
                        </div>
                    </div>

                    <div class="testimonial-card swiper-slide">
                        <div class="testimonial-quote">
                            <i class='bx bxs-quote-alt-left'></i>
                        </div>
                        <p class="testimonial-description">Miriam truly understood our business needs through her modern and sleek design, making a site incredibly user-friendly. With her help, we had a significant increase in engagement and customer sales</p>
                        <h3 class="testimonial-date">January 18, 2025</h3>
                        <div class="testimonial-profile">
                            <img src="https://i.postimg.cc/wvV7f8rB/client2.jpg" alt="" class="testimonial-profile-img">

                            <div class="testimonial-profile-data">
                                <span class="testimonial-profile-name">Joshua Middletown</span>
                                <span class="testimonail-profile-detail">Sales Director</span>
                            </div>
                        </div>
                    </div>

                    <div class="testimonial-card swiper-slide">
                        <div class="testimonial-quote">
                            <i class='bx bxs-quote-alt-left'></i>
                        </div>
                        <p class="testimonial-description">I was blown away by the website Miriam created for my business! Miriam crafted a incredibly user-friendly, that allows our customers to access information on any device. Since the launch, I've seen a significant increase in inquiries and bookings</p>
                        <h3 class="testimonial-date">November 29, 2024</h3>
                        <div class="testimonial-profile">
                            <img src="https://i.postimg.cc/pdP9DL0S/client3.jpg" alt="" class="testimonial-profile-img">

                            <div class="testimonial-profile-data">
                                <span class="testimonial-profile-name">Melanie Stone</span>
                                <span class="testimonail-profile-detail">Business Owner</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="swiper-pagination"></div>
            </div>
            
        </section>

        <section class="contact section" id="contact">
            <h2 class="section-title" data-heading="Get in Touch">Contact me</h2>

            <div class="contact-container container grid">
                <div class="contact-content">
                    <div class="contact-info">
                        <div class="contact-card">
                            <i class="uil uil-envelope-edit contact-card-icon"></i>
                            <h3 class="contact-card-title">Email</h3>
                            <span class="contact-card-data">user@gmail.com</span>
                            <span class="contact-button">Write me <i class="uil uil-arrow-right contact-button-icon"></i></span>
                        </div>

                        <div class="contact-card">
                            <i class="uil uil-whatsapp contact-card-icon"></i>
                            <h3 class="contact-card-title">Whatsapp</h3>
                            <span class="contact-card-data">999-888-777</span>
                            <span class="contact-button">Write me <i class="uil uil-arrow-right contact-button-icon"></i></span>
                        </div>

                        <div class="contact-card">
                            <i class="uil uil-facebook-messenger contact-card-icon"></i>
                            <h3 class="contact-card-title">Messenger</h3>
                            <span class="contact-card-data">user.fb123</span>
                            <span class="contact-button">Write me <i class="uil uil-arrow-right contact-button-icon"></i></span>
                        </div>
                    </div>
                </div>

                <div class="contact-content">
                    <form action="" class="contact-form">
                        <div class="input-container">
                            <input type="text" class="input" placeholder="Username">
                        </div>
    
                        <div class="input-container">
                            <input type="email" class="input" placeholder="Email">
                        </div>
    
                        <div class="input-container">
                            <input type="tel" class="input" placeholder="Phone">
                        </div>
    
                        <div class="input-container textarea">
                            <textarea name="" id="" class="input" placeholder="Message"></textarea>
                        </div>
    
                        <button type="submit" class="button"><i class="uil uil-navigator button-icon"></i>Send Message</button>
                    </form>
                </div>
            </div>

        </section>

        <footer class="footer">
            <div class="footer-bg">
                <div class="footer-container container grid">
                    <div>
                        <h1 class="footer-title">Tony Stark</h1>
                        <span class="footer-subtitle">Full Stack Developer</span>
                    </div>

                    <ul class="footer-links">
                        <li>
                            <a href="#services" class="footer-links">Services</a>
                        </li>
                        <li>
                            <a href="#work" class="footer-links">Work</a>
                        </li>
                        <li>
                            <a href="#contact" class="footer-links">Contact</a>
                        </li>
                    </ul>

                    <div class="footer-socials">
                        <a href="https://www.facebook.com" target="_blank" class="footer-social">
                            <i class="uil uil-facebook-f"></i>
                        </a>

                        <a href="https://www.instagram.com" target="_blank" class="footer-social">
                            <i class="uil uil-instagram"></i>
                        </a>

                        <a href="https://www.x.com" target="_blank" class="footer-social">
                            <i class="uil uil-twitter"></i>
                        </a>
                    </div>
                </div>

                <p class="footer-copy">&#169; <a href="https://www.internpedia.in/">InternPedia.in</a> | All rights reserved</p>
            </div>
        </footer>
    </main>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/mixitup/3.3.1/mixitup.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Turret+Road:wght@200;300;400;500;700;800&display=swap');

:root {
    --hue-color: 242;

    --skin-color: #1bb817;
    --mirage-color: hsl(214, 7%, 19%);
    --title-color: hsl(var(--hue-color), 8%, 95%);
    --text-color: hsl(var(--hue-color), 8%, 85%);
    --body-color: hsl(var(--hue-color), 19%, 5%);
    --box-color: hsl(var(--hue-color), 14%, 10%);
    --scroll-box-color: hsl(var(--hue-color), 12%, 38%);
    --scroll-thumb-color: hsl(var(--hue-color), 12%, 26%);

    --body-font: 'Poppins', sans-serif;
    --signature-font: 'Turret Road', sans-serif;

    --biggest-font-size: 3rem;
    --h1-font-size: 2.25rem;
    --h2-font-size: 1.5rem;
    --h3-font-size: 1.25rem;
    --normal-font-size: 1rem;
    --small-font-size: .875rem;
    --smaller-font-size: .813rem;

    --font-medium: 500;
    --font-bold: 600;

    --mb025: .25rem;
    --mb05: .5rem;
    --mb075: .75rem;
    --mb1: 1rem;
    --mb15: 1.5rem;
    --mb2: 2rem;
    --mb25: 2.5rem;
    --mb3: 3rem;

    --z-fixed: 10;
    --z-modal: 100;

}

@media screen and (max-width: 1024px) {
    :root {
        --biggest-font-size: 2rem;
        --h1-font-size: 1.5rem;
        --h2-font-size: 1.25rem;
        --h3-font-size: 1.125rem;
        --normal-font-size: .938rem;
        --small-font-size: .813rem;
        --smaller-font-size: .75rem;
    }
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body, button, input { font-family: var(--body-font); font-size: var(--normal-font-size); }
    body { background-color: var(--body-color); color: var(--text-color); }
h1, h2, h3 { color: var(--title-color); font-weight: var(--font-bold); }
ul { list-style: none; }
a { text-decoration: none; }
img { max-width: 100%; height: auto; }
button { cursor: pointer; }
    button, input { border: none; outline: none; }
.container { max-width: 1250px; margin-left: auto; margin-right: auto; }
.grid { display: grid; }
.button { 
    display: inline-flex; 
    align-items: center; 
    column-gap: .5rem; 
    background-color: var(--skin-color); 
    color: var(--title-color); 
    padding: 0.75rem 1.4rem; 
    border-radius: .25rem; 
    font-weight: var(--font-medium);
    position: relative;
    z-index: 1;
    transition: .4s;
}
    .button::after { 
        position: absolute; 
        content: ''; 
        left: 0; 
        top: 0; 
        width: 100%; 
        height: 100%; 
        background-color: var(--mirage-color); 
        z-index: -1;
        transform-origin: center; 
        transform: scale(0); 
        border-radius: .25rem;
        transition: .3s; 
    }
        .button:hover::after { transform: scale(1); }
.section { padding: 6.5rem 0 2rem; }
.section-title { text-align: center; font-size: var(--h1-font-size); margin-bottom: var(--mb3); }
    .section-title::before { content: attr(data-heading); display: block; font-size: var(--normal-font-size); font-weight: var(--font-medium); color: var(--skin-color); }
/* Sidebar */

.sidebar { position: fixed; width: 100px; height: 100vh; background-color: var(--body-color); border-right: 1px solid var(--box-color); }
.nav-logo { position: absolute; left: 0; right: 0; top: 1.8rem; width: 40px; height: 40px; border-radius: 50%; background-color: var(--skin-color); text-align: center; margin: auto; }
.nav-logo-text { font-size: 1.125rem; color: var(--title-color); font-weight: var(--font-bold); line-height: 40px; }
.nav-menu { position: fixed; transform: rotate(-90deg) translateX(-100%); transform-origin: left top; width: 100vh; }
.menu { display: flex; }
.nav-list { display: flex; flex-direction: row-reverse; margin: -2px auto 0 auto; }
.nav-link { float: right; height: 100%; line-height: 100px; padding: 0 1rem; color: var(--title-color); font-weight: var(--font-medium); position: relative; transition: .4s; }
.nav-toggle {
    height: 32px;
    width: 36px;
    cursor: pointer;
    position: fixed;
    right: 1.5rem;
    top: 2rem;
    font-size: 1.2rem;
    border-radius: .25rem;
    background-color: var(--skin-color);
    color: var(--title-color);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 999;
}
.nav-close { font-size: 1.5rem; position: absolute; top: 1rem; right: 1.25rem; cursor: pointer; display: none; }
    .nav-link.active-link, .nav-link:hover { color: var(--skin-color); }
        .nav-link.active-link::after, .nav-link:hover::after {
            position: absolute;
            content: '';
            width: 6px;
            height: 6px;
            background-color: var(--skin-color);
            border-radius: 50%;
            bottom: 1.8rem;
            left: 0;
            right: 0;
            margin: auto;
        }
.btn-share { position: absolute; bottom: 1.8rem; left: 0; right: 0; text-align: center; cursor: pointer; }
.social-share { font-size: 1.5rem; }

/* Main - Home */

.main { margin-left: 100px; }
.home { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiez893CirGHj5yVvd3svFWcSSYilIrRTf2smTmi5tZZ9hiijrdM10Ow8s-DsThlgB5pTFE_gjBo0UPhIZBzqk3m6_1UmOuNb5j-L2EpmY_cmMstADYx4HvyA9mOkeS0SJ2y9bH_t-LtcGT5b95ZNLKmdnuv8aPGaQX6wL7a1KBkYQn7AA9hxDLfoWMXDeD/s1280/portfolio-home-removebg-preview%20(2).png'); background-size: cover; background-position: center center; height: 100vh;}
.home-container { position: relative; height: 100%; align-items: center; }
.home-social { position: absolute; top: 1.8rem; left: 0; display: flex; align-items: center; column-gap: 3.5rem; }
.home-social-follow { font-weight: var(--font-medium); position: relative; }
    .home-social-follow::after { content: ''; position: absolute; width: 1rem; height: 2px; background-color: var(--text-color); right: -45%; top: 50%; }
.home-social-links { display: inline-flex; column-gap: 1rem; }
.home-social-link { font-size: 1.08rem; color: var(--text-color); transition: .4s; }
    .home-social-link:hover { transform: translateY(.25rem); }
.home-img { display: none; }
.home-title { font-size: var(--biggest-font-size); }
.home-subtitle { font-size: var(--h3-font-size); font-weight: var(--font-medium); margin-bottom: var(--mb075); }
.home-description { max-width: 450px; margin-bottom: var(--mb2); }
.my-info { display: flex; column-gap: 1.8rem; position: absolute; left: 0; bottom: 1.8rem; }
.info-item { display: flex; align-items: center; }
.info-title, .info-subtitle { font-size: var(--small-font-size); }
    .info-title { font-weight: var(--font-medium); }
.info-icon { font-size: 1.8rem; color: var(--skin-color); margin-right: var(--mb075); }

/* Main - About */

.about-container { grid-template-columns: repeat(2, 1fr); column-gap: 4rem; align-items: center; }
.about-img { width: 480px; border-radius: .75rem; justify-self: center; box-shadow: 3px -1px 9px 0px #1ab716;}
.about-heading { font-size: var(--h3-font-size); margin-bottom: var(--mb075); }
.about-description { text-align: justify; padding-right: 6rem; margin-bottom: var(--mb2); }
.about-info { display: grid; grid-template-columns: repeat(3, 140px); column-gap: .5rem; margin-bottom: var(--mb3); }
.about-box { text-align: center; border-radius: .25rem; padding: 1rem 1.25rem; background-color: var(--box-color); }
.about-icon { font-size: 1.5rem; color: var(--skin-color); margin-bottom: var(--mb075); }
.about-title { font-size: var(--small-font-size); }
.about-subtitle { font-size: var(--small-font-size); }

/* Main - Qualification */

.qualification-container { grid-template-columns: repeat(2 ,340px); column-gap: 3rem; justify-content: center; }
.qualification-title { font-size: var(--h3-font-size); font-weight: var(--font-medium); margin-bottom: var(--mb2); }
.timeline-item { position: relative; margin-bottom: var(--mb25); padding-left: 3rem; }
    .timeline-item:last-child { margin-bottom: 0; }
    .timeline-item::before { content: ''; width: 1px; position: absolute; left: 0.48rem; top: 0; height: 100%; background-color: var(--skin-color); }
.circle-dot { position: absolute; left: 0; top: 0; height: 1rem; width: 1rem; border: 2px solid var(--skin-color); border-radius: 50%; background-color: var(--skin-color); transition: .4s; }
    .timeline-item:hover .circle-dot { background-color: var(--body-color); }
.timeline-title { font-size: var(--normal-font-size); font-weight: var(--font-medium); margin-bottom: var(--mb025); }
.timeline-text { font-size: var(--smaller-font-size); margin-bottom: var(--mb1); }
.timeline-date { display: flex; align-items: center; column-gap: .4rem; font-size: var(--normal-font-size); color: var(--skin-color); }

/* Main - Skills */ 

.skills-container { grid-template-columns: 360px 320px; column-gap: 3rem; justify-content: center; }
.skills-header { display: flex; align-items: center; cursor: pointer; }
    .skills-header:not(:last-child) { margin-bottom: var(--mb25); }
.skills-icon, .skills-arrow { font-size: 2rem; color: var(--skin-color); }
    .skills-icon { margin-right: var(--mb075); }
    .skills-arrow { margin-left: auto; }
        .skills-active .skills-arrow { transform: rotate(-90deg); transition: .4s; }
.skills-title { font-size: var(--h3-font-size); font-weight: var(--font-medium); }
.skills-subtitle { font-size: var(--small-font-size); }
.skills-list { row-gap: 1.8rem; }
.skills-titles { display: flex; justify-content: space-between; margin-bottom: var(--mb05); }
.skills-name { font-size: var(--normal-font-size); font-weight: var(--font-medium); }
.skills-bar, .skills-percentage { height: 5px; border-radius: .25rem; }
    .skills-bar { background-color: var(--box-color); }
    .skills-percentage { display: block; background-color: var(--skin-color); }
.skills [data-content] { display: none; }
    .skills-active[data-content] { display: block; }

/* Main - Work */ 

.work-container { grid-template-columns: repeat(3, 330px); gap: 1.8rem; justify-content: center; padding-top: 1rem; }
.work-filters { display: flex; justify-content: center; align-items: center; column-gap: .75rem; margin-bottom: 2rem; }
.work-item { cursor: pointer; color: var(--title-color); padding: 0.25rem .75rem; font-weight: var(--font-medium); border-radius: .5rem; }
.work-card { background-color: var(--box-color); padding: 1.25rem; border-radius: .5rem; }
.portfolio-item-details { display: none; }
.work-img { border-radius: .5rem; margin-bottom: var(--mb1); }
.work-title { font-size: var(--normal-font-size); font-weight: var(--font-medium); margin-bottom: var(--mb05); }
.work-button { color: var(--skin-color); font-size: var(--small-font-size); display: flex; align-items: center; column-gap: .25rem; cursor: pointer; }
.work-button-icon { font-size: 1rem; transition: .4s; }
    .work-button:hover .work-button-icon { transform: translateX(.25rem); }
.active-work { background-color: var(--skin-color); color: var(--title-color); }

.portfolio-popup { 
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background-color: rgba(0, 0, 0, .5); 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    padding: 0 1rem;
    opacity: 0;
    visibility: hidden; 
    z-index: var(--z-modal); 
    transition: .4s; 
}
.portfolio-popup.open { opacity: 1; visibility: visible; }
.portfolio-popup-inner { background-color: var(--box-color); width: 900px; border-radius: .5rem; padding: 2.5rem; position: relative; }
.portfolio-popup-content { grid-template-columns: repeat(2, 1fr); align-items: center; column-gap: 3rem; }
.portfolio-popup-close { position: absolute; top: 1.5rem; right: 1.5rem; font-size: 1.5rem; color: var(--skin-color); cursor: pointer; }
.portfolio-popup-img { border-radius: .5rem; }
.portfolio-popup-subtitle { font-size: var(--smaller-font-size); margin-bottom: var(--mb025); }
.details-title { font-size: var(--h3-font-size); font-weight: var(--font-medium); margin-bottom: var(--mb1); }
.details-description { font-size: var(--small-font-size); margin-bottom: var(--mb2); }
.details-info li { margin-bottom: var(--mb075); text-transform: capitalize; font-size: var(--small-font-size); }
    .details-info li:last-child { margin-bottom: 0; }
    .details-info li span { font-weight: normal; }
    .details-info li a { text-transform: lowercase; color: var(--skin-color); }

/* Main - Services */ 

.services-container { grid-template-columns: repeat(3, 250px); justify-content: center; column-gap: 1.8rem; }
.services-content { position: relative; background-color: var(--box-color); padding: 6rem 0 2rem 2.5rem; border-radius: .25rem; }
.services-icon { display: block; font-size: 1.8rem; color: var(--skin-color); margin-bottom: var(--mb1); }
.services-title { font-size: var(--h3-font-size); margin-bottom: var(--mb1); font-weight: var(--font-medium); }
.services-button { color: var(--skin-color); font-size: var(--small-font-size); display: flex; align-items: center; column-gap: .25rem; cursor: pointer; }
.services-button-icon { font-size: 1rem; transition: .4s; }
    .services-button:hover .services-button-icon { transform: translateX(.25rem); }
.services-modal {
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background-color: rgba(0, 0, 0, .5); 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    padding: 0 1rem;
    z-index: var(--z-modal);
    opacity: 0;
    visibility: hidden; 
    transition: .4s;
}
.active-modal { opacity: 1; visibility: visible; }
.services-modal-content { width: 500px; position: relative; background-color: var(--box-color); padding: 4.5rem 2.5rem 2.5rem; border-radius: .5rem; }
.services-modal-close { position: absolute; top: 1.5rem; right: 1.5rem; font-size: 1.5rem; color: var(--skin-color); cursor: pointer; }
.services-modal-title, .services-modal-description { text-align: center; }
    .services-modal-title { font-size: var(--h3-font-size); font-weight: var(--font-medium); margin-bottom: var(--mb1); }
    .services-modal-description { font-size: var(--small-font-size); padding: 0 3.5rem; margin-bottom: var(--mb2); }
.services-modal-services { row-gap: var(--mb075); }
.services-modal-service { display: flex; align-items: center; column-gap: .5rem; }
.services-modal-icon { color: var(--skin-color); font-size: 1.1rem; }
.services-modal-info { font-size: var(--small-font-size); }

/* Main - Testimonials */

@media screen and (min-width: 992px) {
    .testimonials-container { width: 750px; margin-left: auto !important; margin-right: auto !important; }
}

.testimonial-card { background-color: var(--box-color); padding: 1.8rem 2rem; border-radius: .5rem; margin-bottom: 3rem; }
.testimonial-quote { display: inline-flex; font-size: 1.5rem; color: var(--skin-color); margin-bottom: var(--mb1); }
.testimonial-description { margin-bottom: var(--mb1); font-size: var(--small-font-size); text-align: justify; }
.testimonial-date { font-size: var(--normal-font-size); margin-bottom: var(--mb2); }
.testimonial-profile { display: flex; align-items: center; column-gap: 1rem; }
.testimonial-profile-img { width: 60px; height: 60px; border-radius: 3rem; }
.testimonial-profile-name { font-size: var(--h3-font-size); font-weight: var(--font-medium); color: var(--title-color); }
.testimonial-profile-detail { font-size: var(--small-font-size); display: block; }
.testimonial-profile-data { display: flex; flex-direction: column; row-gap: .4rem; }

/* Swiper */

.swiper-pagination-bullet { background-color: var(--box-color); }
.swiper-pagination-bullet-active { background-color: var(--skin-color); }

/* Main - Contact */

.contact-container { grid-template-columns: 300px 340px; column-gap: 3rem; justify-content: center; align-items: center; }
.contact-info { display: grid; row-gap: 1rem; }
.contact-card { background-color: var(--box-color); padding: 1rem; border-radius: .5rem; text-align: center; }
.contact-card-icon { font-size: 1.8rem; color: var(--title-color); margin-bottom: var(--mb025); }
.contact-card-title, .contact-card-data { font-size: var(--small-font-size); }
    .contact-card-title { font-weight: var(--font-medium); }
    .contact-card-data { display: block; margin-bottom: var(--mb075); }
.contact-button { color: var(--skin-color); font-size: var(--small-font-size); display: flex; align-items: center; justify-content: center; column-gap: .25rem; cursor: pointer; }
.contact-button-icon { font-size: 1rem; transition: .4s; }
    .contact-button:hover .contact-button-icon { transform: translateX(.25rem); }
.input-container { position: relative; margin-top: 1rem; margin-bottom: 1.9rem; }
.input { 
    width: 100%; 
    border: 2px solid var(--text-color); 
    background-color: transparent; 
    padding: 0.6rem 1.2rem; 
    color: var(--title-color); 
    font-weight: var(--font-medium); 
    font-size: var(--normal-font-size); 
    letter-spacing: .5px; 
    border-radius: .5rem;
    outline: none; 
    transition: .4s; 
}
textarea.input { padding: 0.8rem 1.2rem; min-height: 140px; border-radius: .5rem; resize: none; font-family: var(--body-font); }
    .input-container label {
        position: absolute;
        top: 50%;
        left: 1rem;
        transform: translateY(-50%);
        padding: 0 .4rem;
        color: var(--text-color);
        font-size: 1rem;
        font-weight: var(--font-medium);
        pointer-events: none;
        z-index: 15;
        transition: .5s;
    }
        
        .input-container.textarea label { top: 1rem; transform: translateY(0); }
    .input-container span { 
        position: absolute; 
        top: 0; 
        left: 25px; 
        transform: translateY(-50%); 
        font-size: var(--small-font-size); 
        padding: 0 .4rem; 
        pointer-events: none; 
        z-index: var(--z-fixed); 
        color: transparent; 
    }
        .input-container span::before, .input-container span::after { 
            content: '';
            position: absolute;
            width: 10%;
            opacity: 0;
            height: 5px;
            background-color: var(--body-color);
            top: 50%;
            transform: translateY(-50%);
            transition: .4s;
        }
            .input-container span::before { left: 50%; }
            .input-container span::after { right: 50%; }
            .input-container.focus label { top: 0; transform: translateY(-50%); left: 25px; font-size: var(--smaller-font-size); }
                .input-container.focus span::before, .input-container.focus span::after  { width: 50%; opacity: 1; }

/* Footer */

.footer { padding-top: 2rem; }
.footer-container { grid-template-columns: repeat(3, 1fr); column-gap: 1.6rem; }
.footer-bg { background-color: #2c2f3e; padding: 3rem 0 3.5rem; }
.footer-title { font-size: var(--h1-font-size); margin-bottom: var(--mb025); }    
.footer-subtitle { font-size: var(--small-font-size); }
.footer-links { display: flex; justify-self: center; column-gap: 2rem; }
    .footer-links:hover { color: var(--skin-color); }
.footer-socials { justify-self: flex-end; }
.footer-social { font-size: 1.25rem; margin-right: var(--mb15); }
    .footer-social:hover { color: var(--skin-color); }
.footer-copy { font-size: var(--smaller-font-size); text-align: center; margin-top: 4.5rem; }
    .footer-copy a { font-family: var(--signature-font); } 
        .footer-copy a:hover { color: var(--skin-color); }
    .footer-title, .footer-subtitle, .footer-links, .footer-social, .footer-copy a { color: var(--title-color); }

/* Media Queries */

@media screen and (max-width: 1408px) {
    .container { margin-left: var(--mb25); margin-right: var(--mb25); }
}

@media screen and (max-width: 1216px) {
    .about-container { column-gap: 2.5rem; }
    .about-description { padding-right: 0; }
    .work-container { grid-template-columns: repeat(2, 330px); gap: 3rem; }
}

@media screen and (max-width: 1024px) {
    .container { margin-left: var(--mb15); margin-right: var(--mb15); }
    .sidebar { width: 100%; z-index: 999; transform: translateX(-100%); }
    .show-sidebar { transform: translateX(0); }
    .nav-logo, .btn-share { display: none; }
    .nav-menu { height: 100%; width: 100%; transform: rotate(0deg) translateX(0); display: flex; justify-content: center; }
    .nav-list { flex-direction: column; height: 100%; justify-content: center; align-items: center; }
    .nav-link { padding: 1rem 0; line-height: 1.5; }
        .nav-link.active-link::after, .nav-link:hover::after { bottom: 0; }
    .nav-close { display: block; }
    .nav-toggle { display: flex; }

    .main { margin-left: 0; }

    .about-container { grid-template-columns: 1fr; row-gap: 2.5rem; }
    .about-img { width: 350px; }
    .about-data { text-align: center; }
    .about-info { justify-content: center; }
    .about-box { padding: 0.75rem .5rem; }
    .about-description { padding: 0 4rem; text-align: center; }

    .qualification-container { grid-template-columns: repeat(2, 290px); }
    .skills-container { grid-template-columns: 340px 300px; }
    .skills-list { row-gap: 1.7rem; }

    .work-card { padding: 1rem; }
    .work-img { margin-bottom: var(--mb075); }
    .work-title { margin-bottom: var(--mb025); }

    .services-container { grid-template-columns: repeat(3, 220px); }

    .testimonial-card { padding: 1.25rem 1.5rem; }

    .portfolio-item-details { margin-bottom: var(--mb15); }
    .details-info li { margin-bottom: var(--mb05); }
    .details-title { margin-bottom: var(--mb075); }
}

@media screen and (max-width: 768px) {
    .about-img { width: 250px; }
    .qualification-container { grid-template-columns: 290px; row-gap: 3rem; }
    .skills-container { grid-template-columns: 300px; row-gap: 3rem; }
    .work-container { grid-template-columns: 330px; }

    .services-container { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
    .services-content { padding: 3.5rem .5rem 1.25rem 1.5rem; }
    .services-icon { font-size: 1.5rem; }

    .contact-container { grid-template-columns: 360px; row-gap: 3rem; }
    .footer-container { grid-template-columns: repeat(2, 1fr); row-gap: 3rem; }
    .footer-socials { justify-self: start; }
    .footer-links { flex-direction: column; row-gap: 1.5rem; }
    .footer-bg { padding: 2rem 0 3rem; }
    .footer-copy { margin-top: var(--mb3); }

    .portfolio-popup-inner { width: 420px; padding: 2.8rem 1.5rem 2.5rem; }
    .portfolio-popup-content { grid-template-columns: 1fr; row-gap: 1.6rem; }
    .details-title { font-size: var(--normal-font-size); }
    .portfolio-popup-close { top: .5rem;  }
}

@media screen and (max-width: 576px) {
    .nav-toggle { right: initial; left: 1.5rem; }
    .home { background-image: none; height: initial; align-items: initial; padding: 7rem 0 2rem; }
    .home-container { row-gap: 2rem; }
    .home-img { display: block; width: 250px; justify-self: center; }
    .my-info { display: none; }
    .home-social { left: initial; right: -1rem; flex-direction: column; row-gap: 3.5rem; }
    .home-social-follow { font-size: var(--smaller-font-size); transform: rotate(90deg); }
    .home-social-links { flex-direction: column; row-gap: .25rem; }
    .home-social-link { font-size: var(--normal-font-size); }

    .about-info { grid-template-columns: repeat(3, 1fr); }
    .about-description { padding: 0; }

    .services-modal-content { padding: 4.5rem 1.5rem 2.5rem; }
    .services-modal-description { padding: 0; }

    .work-container, .contact-container { grid-template-columns: 300px; }

    .footer-container { grid-template-columns: 1fr;  }
    .footer-links { justify-self: flex-start; }

}

@media screen and (max-width: 350px) {
    .container { margin-left: var(--mb1); margin-left: var(--mb1); }
    .home-img { width: 200px; }
    .home-title { font-size: var(--h1-font-size); }
    .home-subtitle { font-size: var(--normal-font-size); }
    
    .about-info { grid-template-columns: repeat(2, 1fr); row-gap: .5rem; }
    .work-container, .skills-container, .qualification-container, .contact-container { grid-template-columns: 1fr; }
    .skills-title { font-size: var(--normal-font-size); }
    .work-item { font-size: var(--normal-font-size); }
    .work-filters { column-gap: .25rem; }
    .services-container { grid-template-columns: max-content; }
    .services-content { padding-right: 3.5rem; }
}

// Toggling Skill Tabs

const tabs = document.querySelectorAll('[data-target]');
const tabContent = document.querySelectorAll('[data-content]');

tabs.forEach(tab => {
    tab.addEventListener('click', () => {
        const target = document.querySelector(tab.dataset.target);

        tabContent.forEach(tabContents => {
            tabContents.classList.remove('skills-active');
        })

        target.classList.add('skills-active');

        tabs.forEach(tab => {
            tab.classList.remove('skills-active');
        })

        tab.classList.add('skills-active');
    })
})

//Mix it up Sorting

let mixerPortfolio = mixitup('.work-container', {
    selectors: {
        target: '.work-card'
    },
    animation: {
        duration: 300
    }
});

// Active link changing

const linkWork = document.querySelectorAll('.work-item');

function activeWork() {
    linkWork.forEach(l => l.classList.remove('active-work'))
    this.classList.add('active-work')
}
linkWork.forEach(l => l.addEventListener('click', activeWork));

function togglePortfolioPopup() {
    document.querySelector('.portfolio-popup').classList.toggle('open');
}

document.querySelector('.portfolio-popup-close').addEventListener('click', togglePortfolioPopup);

function portfolioItemDetails(portfolioItem) {
    document.querySelector('.pp-thumbnail img').src = portfolioItem.querySelector('.work-img').src;
    document.querySelector('.portfolio-popup-subtitle span').innerHTML = portfolioItem.querySelector('.work-title').innerHTML;
    document.querySelector('.portfolio-popup-body').innerHTML = portfolioItem.querySelector('.portfolio-item-details').innerHTML;
}


// Input Animation

const inputs = document.querySelectorAll('.input');

function focusFunc() {
    let parent = this.parentNode;
    parent.classList.add('focus');
}

function blurFunc() {
    let parent = this.parentNode;
    if(this.value == "") {
        parent.classList.remove('focus');
    }
}

inputs.forEach((input) => {
    input.addEventListener('focus', focusFunc);
    input.addEventListener('blur', blurFunc);
})

// Scroll Section Active Link

const sections = document.querySelectorAll('section[id]');

window.addEventListener('scroll', navHighlighter);

function navHighlighter() {
    let scrollY = window.pageYOffset;
    sections.forEach(current => {
        const sectionHeight = current.offsetHeight;
        const sectionTop = current.offsetTop - 50;
        const sectionId = current.getAttribute('id');

        if(scrollY > sectionTop && scrollY <= sectionTop + sectionHeight) {
            document.querySelector('.nav-menu a[href*=' + sectionId + ']').classList.add('active-link');
        }else {
            document.querySelector('.nav-menu a[href*=' + sectionId + ']').classList.remove('active-link');
        }
    })
}

// Activating Sidebar

const navMenu = document.getElementById('sidebar');
const navToggle = document.getElementById('nav-toggle');
const navClose = document.getElementById('nav-close');

if(navToggle) {
    navToggle.addEventListener('click', () => {
        navMenu.classList.add('show-sidebar');
    })
}

if(navClose) {
    navClose.addEventListener('click', () => {
        navMenu.classList.remove('show-sidebar');
    })
}

Live Preview

1. Personal Information

To customize the portfolio with your personal information:

Update name, title, and description throughout the document
Replace "Tony Stark" with your actual name
Update social media links with your actual profiles
Replace contact information with your actual details
Modify the about me section with your actual experience

Note: Ensure consistency across all sections when updating your personal information.

2. Images and Media

To update images and media content:

Replace placeholder images with your actual photos and project screenshots
Optimize images for web (compress without losing quality)
Use descriptive file names (e.g., "john-doe-web-developer.jpg")
Add appropriate alt text for all images for accessibility and SEO

Tip: Use modern image formats like WebP for better performance where supported.

3. Content Customization

To customize the website content:

3.1. Skills Section

Update skills with your actual proficiencies
Adjust skill percentages to reflect your expertise level
Add or remove skill categories as needed

3.2. Projects Section

Replace projects with your actual work
Include project images, titles, and descriptions
Add links to live projects or GitHub repositories

3.3. Services Section

Modify services to reflect what you actually offer
Update service descriptions with your specific offerings

3.4. Testimonials

Update testimonials with real client feedback
Include client names, positions, and companies if available
Add client photos if appropriate

4. Design Customization

To customize the visual design of your portfolio:

4.1. Colors and Theming

Modify the CSS color variables to match your brand
Update the primary, secondary, and accent colors
Ensure sufficient color contrast for accessibility

4.2. Typography

Customize fonts if desired
Adjust font sizes, weights, and spacing
Ensure readability across all devices

4.3. Layout

Adjust spacing and layout as needed
Modify section ordering if necessary
Test responsiveness on different screen sizes

5. SEO Optimization

To improve your portfolio's search engine visibility:

5.1. Meta Tags

Add a compelling meta description with target keywords
Include relevant keywords for your niche
Add Open Graph tags for social media sharing
Include a canonical URL to prevent duplicate content issues

5.2. Content Optimization

Use descriptive, keyword-rich headings
Include alt text for all images
Create unique, valuable content for each section

5.3. Technical SEO

Ensure fast loading times
Implement proper heading structure (H1, H2, H3)
Create an XML sitemap and submit to search engines
Implement a robots.txt file

Tip: Consider adding structured data (JSON-LD) for better search engine understanding of your content.

6. Performance Optimization

To ensure your portfolio loads quickly and efficiently:

6.1. Resource Optimization

Minify CSS and JavaScript for production
Optimize images for web use
Implement lazy loading for images
Use CDNs for libraries and assets

6.2. Caching Strategies

Implement browser caching strategies
Use efficient caching headers
Consider a service worker for offline functionality

Warning: Always test your website after implementing optimization techniques to ensure nothing breaks.

7. Maintenance and Updates

To keep your portfolio current and effective:

7.1. Regular Updates

Keep your projects section updated with recent work
Refresh content periodically to keep it relevant
Update skills as you learn new technologies

7.2. SEO Maintenance

Monitor search console for errors
Update content based on performance analytics
Keep up with SEO best practices

7.3. Technical Maintenance

Regularly test website functionality
Check for broken links
Ensure cross-browser compatibility
Test mobile responsiveness

8. Additional Features

Consider adding these features to enhance your portfolio:

8.1. Blog Section

Add a blog for fresh content and SEO benefits
Share your knowledge and expertise
Improve engagement with visitors

8.2. Analytics Implementation

Add Google Analytics or another analytics platform
Track visitor demographics and behavior
Monitor traffic sources and popular content
Set up conversion tracking for contact forms

8.3. Social Media Integration

Add social sharing buttons to projects
Link to your active social profiles
Display social proof (number of followers, testimonials)

Note: Only add features that provide real value to your visitors and align with your goals.

9. Deployment

When deploying your portfolio website:

9.1. Hosting Options

Choose a reliable hosting provider
Consider GitHub Pages for free static site hosting
Explore Netlify or Vercel for advanced features

9.2. Domain Name

Use a custom domain name (yourname.com)
Ensure it's professional and easy to remember
Set up proper DNS records

9.3. SSL Certificate

Ensure your site uses HTTPS
SSL is important for security and SEO
Many hosting providers offer free SSL certificates

Tip: Test your website thoroughly across different devices and browsers before going live.

Developer Portfolio Website

1. Personal Information

2. Images and Media

3. Content Customization

3.1. Skills Section

3.2. Projects Section

3.3. Services Section

3.4. Testimonials

4. Design Customization

4.1. Colors and Theming

4.2. Typography

4.3. Layout

5. SEO Optimization

5.1. Meta Tags

5.2. Content Optimization

5.3. Technical SEO

6. Performance Optimization

6.1. Resource Optimization

6.2. Caching Strategies

7. Maintenance and Updates

7.1. Regular Updates

7.2. SEO Maintenance

7.3. Technical Maintenance

8. Additional Features

8.1. Blog Section

8.2. Analytics Implementation

8.3. Social Media Integration

9. Deployment

9.1. Hosting Options

9.2. Domain Name

9.3. SSL Certificate

About Us

#buttons=(Accept !) #days=(20)

Contact form

Developer Portfolio Website

1. Personal Information

2. Images and Media

3. Content Customization

3.1. Skills Section

3.2. Projects Section

3.3. Services Section

3.4. Testimonials

4. Design Customization

4.1. Colors and Theming

4.2. Typography

4.3. Layout

5. SEO Optimization

5.1. Meta Tags

5.2. Content Optimization

5.3. Technical SEO

6. Performance Optimization

6.1. Resource Optimization

6.2. Caching Strategies

7. Maintenance and Updates

7.1. Regular Updates

7.2. SEO Maintenance

7.3. Technical Maintenance

8. Additional Features

8.1. Blog Section

8.2. Analytics Implementation

8.3. Social Media Integration

9. Deployment

9.1. Hosting Options

9.2. Domain Name

9.3. SSL Certificate

Related Pages

E-Commerce Landing Page

Hacker Typer Terminal Style Webpage

Creative Hover Board Designing

Signup and Login Form

Login Form HTML CSS

Frequently Asked Questions

Content Placeholder

How to make animated navbar

Background Slider

Animated Navigation Menu Bar

#buttons=(Accept !) #days=(20)

Contact form