<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ahmed Website</title>
    <link rel="icon" href="https://i.ibb.co/sWwhcjM/logo-1.png"/>
    <link rel="stylesheet" href="styles.css">
    <script src="background.js"></script>
</head>
<body>
    <div id="waves">
    <header class="header-card">
        <nav>
            <ul>
                <li><a href="#about" class="scroll">About</a></li>
                <li><a href="#experience" class="scroll">Experience</a></li>
                <li><a href="#portfolio" class="scroll">Portfolio</a></li>
                <li><a href="#skills" class="scroll">Skills</a></li>
                <li><a href="#testimonials" class="scroll">Testimonials</a></li>
                <li><a href="#contact" class="scroll">Contact</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section class="card">
            <div class="profile-image">
            </div>
            <div class="profile-info">
                <h1>Ahmed Samir</h1>
                <p>Programmer | Designer</p>
                <p>
                    Hello, my name is Ahmed Samir. I am a versatile programmer with a passion 
                    for developing innovative solutions and a dedication to continuous learning 
                    and improvement.
                </p>
                <div class="social-links">
                    <a href="https://www.instagram.com/nsl2j" target="_blank" rel="noopener noreferrer">
                        <img class="icon-link" src="https://skillicons.dev/icons?i=instagram" alt="Instagram">
                    </a>
                    <a href="https://github.com/1AhmedS" target="_blank" rel="noopener noreferrer">
                        <img class="icon-link" src="https://skillicons.dev/icons?i=github" alt="GitHub">
                    </a>
                </div>
            </div>
        </section>

        <section id="about">
            <h2>About Me</h2>
            <p>👨‍💻 Programmer | 🎨 Designer | 🌐 Web Developer | ✨ Pro Developer </p>
            
                <!--experience -->
            </section>
        <section id="experience">
            <h2>Experience</h2>
            <div class="experience-item">
                <div class="experience-icon">
                </div>
                <div class="experience-details">
                    <h3>Web Developer</h3>
                    <p class="experience-date">October 2022 - Present</p>
                    <ul class="responsibilities">
                        <li>Learned the fundamentals of HTML and CSS for web development.</li>
                        <li>Gained a solid understanding of web design principles.</li>
                        <li>Built functional and visually appealing websites.</li>
                    </ul>
                </div>
            </div>
            <div class="experience-item">
                <div class="experience-icon">
                </div>
                <div class="experience-details">
                    <h3>Designer</h3>
                    <p class="experience-date">June 2017 - October 2020</p>
                    <p>Youtube things - Discord - Social Media</p>
                    <ul class="responsibilities">
                        <li>Created thumbnails, logos, and banners for YouTube videos and channels.</li>
                        <li>Designed numerous logos and banners for Discord servers.</li>
                        <li>Developed various designs for social media platforms like Instagram , Twitter and Twitch.</li>
                        <li>Edit Some Videos in Youtube Used (Adobe Premier Pro).</li>
                    </ul>
                </div>
            </div>
        </section>
            
        <section id="portfolio">
            <h2>Portfolio</h2>
            <!--portfolio -->
            <div class="project">
                First Web
                <h3>Introduction Website</h3>
                <p>Introduction Website for B9 Store.</p>
            </div>
            <div class="project">
                Discord Bot
                <h3>Management Bot</h3>
                <p>Management Bot For FiveM Support.</p>
            </div>
            <div class="project">
                Discord Bot
                <h3>Starter Files (JavaScript) </h3>
                <p>Starter Bot Files Use (JS).</p>
            </div>
            <div class="project">
                Discord Bot
                <h3>Starter Files (TypeScript) </h3>
                <p>Starter Bot Files Use (TS).</p>
            </div>
            <div class="project">
                FiveM Server Files
                <h3>QBCore Files </h3>
                <p>Fivem Server Files Used (QBCore) Full Server.</p>
            </div>
            <div class="project">
                FiveM Server Files
                <h3>FrameWork Files </h3>
                <p>Fivem Server Files Used (FrameWork) Full Server.</p>
            </div>
        </section>

        <section id="skills">
            <h2>Skills</h2>
            <!-- Add your skills with custom icons here -->
            <ul class="skills-list">
                <li>
                    <img src="https://skillicons.dev/icons?i=cs" alt="CS Icon">
                </li>
                <li>
                    <img src="https://skillicons.dev/icons?i=cpp" alt="C++ Icon">
                </li>
                <li>
                    <img src="https://skillicons.dev/icons?i=python" alt="Python Icon">
                </li>
                <li>
                    <img src="https://skillicons.dev/icons?i=html" alt="HTML Icon">
                </li>
                <li>
                    <img src="https://skillicons.dev/icons?i=css" alt="CSS Icon">
                </li>
                <li>
                    <img src="https://skillicons.dev/icons?i=ts" alt="TypeScript Icon">
                </li>
                <li>
                    <img src="https://skillicons.dev/icons?i=js" alt="JavaScript Icon">
                </li>
                <li>
                    <img src="https://skillicons.dev/icons?i=ps" alt="PhotoShop Icon">
                </li>
                <li>
                    <img src="https://skillicons.dev/icons?i=pr" alt="PremierPro Icon">
                </li>
                <li>
                    <img src="https://skillicons.dev/icons?i=pycharm" alt="Pycharm Icon">
                </li>
                <li>
                    <img src="https://skillicons.dev/icons?i=vscode" alt="VsCode Icon">
                </li>
                <li>
                    <img src="https://skillicons.dev/icons?i=nodejs" alt="Node.JS Icon">
                </li>
                <li>
                    <img src="https://skillicons.dev/icons?i=react" alt="React.js Icon">
                </li>
                <li>
                    <img src="https://skillicons.dev/icons?i=git" alt="Git Icon">
                </li>
                <li>
                    <img src="https://skillicons.dev/icons?i=github" alt="Shell Icon">
                </li>
            </ul>
        </section>
        <section id="testimonials">
            <h2>Testimonials</h2>
            <div class="testimonial">
                <p>"Ahmed Samir is an exceptional talent in design. His expertise and attention to detail in creating thumbnails, logos, banners, and social media graphics surpassed our expectations, delivering outstanding results."</p>
            </section>

        <section id="contact">
            <h2>Contact</h2>
            <form id="contact-form">
                <label for="name">Name:</label>
                <input type="text" id="name" name="name" required>
                <label for="email">Email:</label>
                <input type="email" id="email" name="email" required>
                <label for="message">Message:</label>
                <textarea id="message" name="message" required></textarea>
                <button type="submit">Send</button>
                <div id="form-messages"></div>
            </form>
        </section>
    </main>

    <footer>
        <div class="footer-separator"></div>
        <p class="footer-copyright">&copy; All CopyRights Reversed To Ahmed Samir 2025-2030</p>
        <!-- <div class="footer-links">
            <a href="#">Privacy Policy</a>
            <a href="#">Terms of Service</a>
        </div> -->
        <div class="footer-social">
            <!-- Add your social media links here -->
            <a href="https://www.instagram.com/nsl2j">
                <img class="footer-social-link" src="https://skillicons.dev/icons?i=instagram">
            </a>
            <a href="https://github.com/1AhmedS">
                <img class="footer-social-link" src="https://skillicons.dev/icons?i=github">
            </a>
        </div>
    </footer>

    <!-- Smooth scrolling script -->
    <script>
        function smoothScroll(target, duration) {
            var targetElement = document.querySelector(target);
            var targetPosition = targetElement.getBoundingClientRect().top;
            var startPosition = window.pageYOffset;
            var startTime = null;

            function animation(currentTime) {
                if (startTime === null) startTime = currentTime;
                var timeElapsed = currentTime - startTime;
                var run = ease(timeElapsed, startPosition, targetPosition, duration);
                window.scrollTo(0, run);
                if (timeElapsed < duration) requestAnimationFrame(animation);
            }

            
            function ease(t, b, c, d) {
                t /= d / 2;
                if (t < 1) return c / 2 * t * t + b;
                t--;
                return -c / 2 * (t * (t - 2) - 1) + b;
            }

            requestAnimationFrame(animation);
        }

        
        var links = document.querySelectorAll('a.scroll');
        links.forEach(function(link) {
            link.addEventListener('click', function(e) {
                e.preventDefault();
                var targetId = this.getAttribute('href');
                smoothScroll(targetId, 1000);
            });
        });
    </script>

    <script src="contact.js"></script>
</div>
</body>
</html>
