About Me/title> <link href="style.css" type="text/css" rel="stylesheet"> </head> <body>  <div class="scroll-indicator" id="scrollIndicator"></div>  <header class="header"> <div class="nav-container"> <div class="logo">Giovanni Muniz</div> <nav> <ul class="nav-menu"> <li class="nav-item"><a href='/'>Home</a></li> <li class="nav-item"><a href='/about'>About</a></li> <li class="nav-item"><a href="https://github.com/giowassheree">GitHub</a></li> <li class="nav-item"><a href="https://www.linkedin.com/in/giovanni-muniz-28774021a/">LinkedIn</a></li> </ul> </nav> </div> </header>  <section id="about" class="section about"> <div class="section-content"> <div class="about-grid"> <div class="about-text"> <h2>About Me</h2> <p>I'm a passionate Computer Science student with a vision to create technology that makes a positive impact on the world. I recently graduated from Temple University with a B.S in Computer Science and hoping to take my skills and experience from the classroom into the workforce.</p> <p>I specialize in web development, software engineering, and video game development.</p> </div> <div class="skills"> <div class="skill-item"> <h3>Frontend Development</h3> <p>HTML, CSS, JavaScript, React</p> </div> <div class="skill-item"> <h3>Video Game Development</h3> <p>Unreal Engine, C++, Unity</p> </div> <div class="skill-item"> <h3>Other Skills</h3> <p>Java, Python, Git, Data Structures</p> </div> </div> </div> </div> </section>  <section id="contact" class="section contact"> <div class="section-content"> <div class="contact-container"> <h2>Get In Touch</h2> <form class="contact-form" action="https://formsubmit.co/your-email@example.com" method="POST"> <div class="form-group"> <input type="text" name="name" placeholder="Your Name" required> </div> <div class="form-group"> <input type="email" name="email" placeholder="Your Email" required> </div> <div class="form-group"> <input type="text" name="subject" placeholder="Subject" required> </div> <div class="form-group"> <textarea rows="5" name="message" placeholder="Your Message" required></textarea> </div> <div class="form-group"> <button type="submit" class="submit-btn">Send Message</button> </div> </form> </div> </div> </section> <script> // Intersection Observer for scroll-triggered animations const observerOptions = { threshold: 0.1, rootMargin: '0px 0px -50px 0px' }; const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add('reveal'); // Special handling for staggered animations const children = entry.target.querySelectorAll('.skill-item, .project-card, .form-group'); children.forEach(child => { child.classList.add('reveal'); }); } }); }, observerOptions); // Observe all section content document.querySelectorAll('.section-content').forEach(section => { observer.observe(section); }); // Scroll progress indicator window.addEventListener('scroll', () => { const scrolled = (window.scrollY / (document.documentElement.scrollHeight - window.innerHeight)) * 100; document.getElementById('scrollIndicator').style.transform = `scaleX(${scrolled / 100})`; }); // Smooth scrolling for navigation links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); const target = document.querySelector(this.getAttribute('href')); if (target) { target.scrollIntoView({ behavior: 'smooth', block: 'start' }); } }); }); // Add parallax effect to hero section window.addEventListener('scroll', () => { const scrolled = window.scrollY; const hero = document.querySelector('.hero .section-content'); if (hero) { hero.style.transform = `translateY(${scrolled * 0.5}px)`; } }); </script> </body> </html>