<!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">
    <link href="https://fonts.cdnfonts.com/css/matrix" rel="stylesheet">
    <script src="background.js" defer></script>
    <script src="matrix.js" defer></script>
    <script src="contact.js" defer></script>
</head>
<body>
    <canvas id="matrixCanvas"></canvas>
    <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">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>
        </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>Edited some videos on YouTube using Adobe Premiere Pro.</li>
                    </ul>
                </div>
            </div>
        </section>

        <h2>Portfolio</h2>

        <section id="portfolio">
            <div class="project">
                <h3>The Knower Bot</h3>
                <p>Management Bot For FiveM Support.</p>
                <a>
                    <img src="https://i.ibb.co/N9Cgccy/The-Knower.png" alt="Management Bot">
                </a>
            </div>
            <div class="project">
                <h3>Starter Files (JavaScript)</h3>
                <p>Starter Bot Files Use (JS).</p>
                <a href="https://github.com/1AhmedS/discord.js-starter-files">
                    <img src="https://i.ibb.co/h9z2BSh/discord-starter-files.png" alt="Starter Files">
                </a>
            </div>
            <div class="project">
                <h3>Starter Files (TypeScript)</h3>
                <p>Starter Bot Files Use (TS).</p>
                <a href="https://github.com/1AhmedS/Discord.js-ts-starter-files">
                    <img src="https://i.ibb.co/kMJ2h89/d-js-ts-starter.png" alt="Starter Files">
                </a>
            </div>
            <div class="project">
                <h3>QBCore Files</h3>
                <p>FiveM Server Files Used (QBCore) Full Server.</p>
                <a>
                    <img src="https://i.ibb.co/fFKkmND/qbcore-files.png" alt="QBCore Files">
                </a>
            </div>
            <div class="project">
                <h3>Framework Files</h3>
                <p>FiveM Server Files Used (Framework) Full Server.</p>
                <a>
                    <img src="https://i.ibb.co/CMYr4ZL/Framework-Files.png" alt="Framework Files">
                </a>
            </div>
            <div class="project">
                <h3>GitHub</h3>
                <p>GitHub Status</p>
                <a href="https://github.com/1AhmedS">
                    <img src="https://github-readme-stats.vercel.app/api?username=1AhmedS&theme=dark&show_icons=true&hide_border=true&count_private=true" alt="Framework Files">
                </a>
            </div>
        </section>

        <section id="skills">
            <h2>Skills</h2>
            <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="GitHub 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>
            </div>
        </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-social">
            <a href="https://www.instagram.com/nsl2j">
                <img class="footer-social-link" src="https://skillicons.dev/icons?i=instagram" alt="Instagram">
            </a>
            <a href="https://github.com/1AhmedS">
                <img class="footer-social-link" src="https://skillicons.dev/icons?i=github" alt="GitHub">
            </a>
        </div>
    </footer>

    <!-- Smooth scrolling script -->
    <script>
window.addEventListener('scroll', function() {
    const headerCard = document.querySelector('.header-card');
    if (window.scrollY > 100) {
        headerCard.classList.add('scrolled');
    } else {
        headerCard.classList.remove('scrolled');
    }
});

        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>
</body>
</html>