en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Muhammad Sazwan Bin Ismail | Digital Portfolio</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Raleway:wght@700;800&display=swap" rel="stylesheet"> <style> :root { --primary: #2563eb; --primary-dark: #1e40af; --secondary: #10b981; --dark: #1e293b; --light: #f8fafc; --gray: #64748b; --light-gray: #e2e8f0; --transition: all 0.3s ease; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Poppins', sans-serif; background-color: var(--light); color: var(--dark); line-height: 1.6; overflow-x: hidden; } h1, h2, h3, h4 { font-family: 'Raleway', sans-serif; font-weight: 700; } .container { width: 90%; max-width: 1200px; margin: 0 auto; } section { padding: 80px 0; } .section-title { text-align: center; margin-bottom: 60px; position: relative; } .section-title h2 { font-size: 2.5rem; display: inline-block; position: relative; color: var(--primary-dark); } .section-title h2::after { content: ''; position: absolute; bottom: -15px; left: 50%; transform: translateX(-50%); width: 80px; height: 4px; background: var(--secondary); border-radius: 2px; } .btn { display: inline-block; padding: 12px 30px; background: var(--primary); color: white; border-radius: 30px; text-decoration: none; font-weight: 500; transition: var(--transition); border: 2px solid var(--primary); cursor: pointer; } .btn:hover { background: transparent; color: var(--primary); transform: translateY(-3px); box-shadow: 0 10px 20px rgba(37, 99, 235, 0.2); } .btn-outline { background: transparent; color: var(--primary); } .btn-outline:hover { background: var(--primary); color: white; } /* Header & Navigation */ header { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; background: rgba(255, 255, 255, 0.95); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); transition: var(--transition); } .header-container { display: flex; justify-content: space-between; align-items: center; padding: 20px 0; } .logo { font-size: 1.8rem; font-weight: 800; color: var(--primary); text-decoration: none; } .logo span { color: var(--secondary); } .nav-links { display: flex; list-style: none; } .nav-links li { margin-left: 30px; } .nav-links a { text-decoration: none; color: var(--dark); font-weight: 500; transition: var(--transition); position: relative; } .nav-links a:hover { color: var(--primary); } .nav-links a::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 2px; background: var(--primary); transition: var(--transition); } .nav-links a:hover::after { width: 100%; } .menu-toggle { display: none; font-size: 1.5rem; cursor: pointer; } /* Hero Section */ .hero { height: 100vh; display: flex; align-items: center; background: linear-gradient(135deg, rgba(37, 99, 235, 0.1) 0%, rgba(16, 185, 129, 0.1) 100%); position: relative; overflow: hidden; } .hero::before { content: ''; position: absolute; top: -100px; right: -100px; width: 500px; height: 500px; border-radius: 50%; background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); opacity: 0.1; } .hero-content { position: relative; z-index: 1; } .hero h1 { font-size: 3.5rem; margin-bottom: 20px; line-height: 1.2; } .hero h1 span { color: var(--primary); } .hero p { font-size: 1.2rem; margin-bottom: 30px; max-width: 600px; color: var(--gray); } .hero-btns { display: flex; gap: 15px; } /* About Section */ .about-content { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; } .about-img { border-radius: 20px; overflow: hidden; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); height: 450px; background: linear-gradient(45deg, var(--primary), var(--secondary)); display: flex; justify-content: center; align-items: center; color: white; font-size: 2rem; position: relative; } .about-img::before { content: "MS"; position: absolute; font-size: 12rem; opacity: 0.2; font-weight: 800; } .about-text h3 { font-size: 2rem; margin-bottom: 20px; color: var(--primary-dark); } .about-text p { margin-bottom: 20px; color: var(--gray); } .skills { margin-top: 30px; } .skill-item { margin-bottom: 20px; } .skill-header { display: flex; justify-content: space-between; margin-bottom: 8px; } .skill-bar { height: 10px; background: var(--light-gray); border-radius: 5px; overflow: hidden; } .skill-progress { height: 100%; background: var(--primary); border-radius: 5px; position: relative; width: 0; transition: width 1.5s ease; } /* Services Section */ .services { background-color: #f1f5f9; } .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; } .service-card { background: white; border-radius: 15px; padding: 30px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); transition: var(--transition); } .service-card:hover { transform: translateY(-10px); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1); } .service-icon { font-size: 2.5rem; color: var(--primary); margin-bottom: 20px; } .service-card h3 { margin-bottom: 15px; font-size: 1.5rem; } /* Portfolio Section */ .portfolio-filters { display: flex; justify-content: center; flex-wrap: wrap; gap: 15px; margin-bottom: 40px; } .filter-btn { padding: 8px 20px; background: white; border: 2px solid var(--light-gray); border-radius: 30px; cursor: pointer; transition: var(--transition); } .filter-btn.active, .filter-btn:hover { background: var(--primary); color: white; border-color: var(--primary); } .portfolio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 30px; } .portfolio-item { border-radius: 15px; overflow: hidden; position: relative; height: 300px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); } .portfolio-img { height: 100%; background: linear-gradient(45deg, var(--primary), var(--secondary)); display: flex; justify-content: center; align-items: center; color: white; font-size: 1.5rem; } .portfolio-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(37, 99, 235, 0.9); display: flex; flex-direction: column; justify-content: center; align-items: center; opacity: 0; transition: var(--transition); padding: 20px; text-align: center; color: white; } .portfolio-item:hover .portfolio-overlay { opacity: 1; } .portfolio-overlay h3 { margin-bottom: 10px; font-size: 1.5rem; } /* Timeline Section */ .timeline { position: relative; max-width: 800px; margin: 50px auto; } .timeline::after { content: ''; position: absolute; width: 4px; background-color: var(--primary); top: 0; bottom: 0; left: 50%; margin-left: -2px; } .timeline-item { padding: 10px 40px; position: relative; width: 50%; box-sizing: border-box; } .timeline-item:nth-child(odd) { left: 0; } .timeline-item:nth-child(even) { left: 50%; } .timeline-content { padding: 20px; background-color: white; position: relative; border-radius: 10px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .timeline-content h3 { color: var(--primary); margin-bottom: 10px; } .timeline-content p { color: var(--gray); } .timeline-item::after { content: ''; position: absolute; width: 20px; height: 20px; background-color: white; border: 4px solid var(--primary); top: 15px; border-radius: 50%; z-index: 1; } .timeline-item:nth-child(odd)::after { right: -12px; } .timeline-item:nth-child(even)::after { left: -12px; } /* Testimonials */ .testimonials { background-color: #f1f5f9; } .testimonial-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; } .testimonial-card { background: white; border-radius: 15px; padding: 30px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); position: relative; } .testimonial-card::before { content: '"'; position: absolute; top: 20px; left: 20px; font-size: 5rem; color: var(--light-gray); font-family: serif; line-height: 1; } .testimonial-content { position: relative; z-index: 1; } .testimonial-text { margin-bottom: 20px; font-style: italic; } .testimonial-author { display: flex; align-items: center; } .author-img { width: 50px; height: 50px; border-radius: 50%; background: var(--light-gray); margin-right: 15px; display: flex; align-items: center; justify-content: center; } .author-info h4 { margin-bottom: 5px; } .author-info p { color: var(--gray); font-size: 0.9rem; } /* Contact Section */ .contact-container { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; } .contact-info h3 { font-size: 1.8rem; margin-bottom: 20px; color: var(--primary-dark); } .contact-details { margin-bottom: 30px; } .contact-item { display: flex; margin-bottom: 20px; } .contact-icon { width: 50px; height: 50px; background: var(--primary); border-radius: 50%; display: flex; justify-content: center; align-items: center; color: white; font-size: 1.2rem; margin-right: 15px; flex-shrink: 0; } .contact-text h4 { margin-bottom: 5px; } .contact-form .form-group { margin-bottom: 20px; } .contact-form input, .contact-form textarea { width: 100%; padding: 15px; border: 2px solid var(--light-gray); border-radius: 10px; font-family: 'Poppins', sans-serif; transition: var(--transition); } .contact-form input:focus, .contact-form textarea:focus { border-color: var(--primary); outline: none; } .contact-form textarea { height: 150px; resize: none; } /* Footer */ footer { background: var(--dark); color: white; padding: 50px 0 20px; } .footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; margin-bottom: 40px; } .footer-col h3 { font-size: 1.5rem; margin-bottom: 20px; position: relative; display: inline-block; } .footer-col h3::after { content: ''; position: absolute; bottom: -8px; left: 0; width: 40px; height: 3px; background: var(--secondary); } .footer-col p { color: #cbd5e1; margin-bottom: 15px; } .social-links { display: flex; gap: 15px; } .social-links a { display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; background: rgba(255, 255, 255, 0.1); border-radius: 50%; color: white; transition: var(--transition); } .social-links a:hover { background: var(--primary); transform: translateY(-5px); } .footer-links { list-style: none; } .footer-links li { margin-bottom: 10px; } .footer-links a { color: #cbd5e1; text-decoration: none; transition: var(--transition); } .footer-links a:hover { color: var(--primary); padding-left: 5px; } .copyright { text-align: center; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.1); color: #94a3b8; } /* Responsive Design */ @media (max-width: 992px) { .about-content, .contact-container { grid-template-columns: 1fr; } .about-img { height: 350px; } .hero h1 { font-size: 3rem; } .timeline::after { left: 31px; } .timeline-item { width: 100%; padding-left: 70px; padding-right: 25px; } .timeline-item:nth-child(even) { left: 0; } .timeline-item::after { left: 21px; } } @media (max-width: 768px) { .menu-toggle { display: block; } .nav-links { position: absolute; top: 100%; left: 0; width: 100%; background: white; flex-direction: column; padding: 20px 0; box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1); clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); transition: var(--transition); } .nav-links.active { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } .nav-links li { margin: 15px 30px; } .hero h1 { font-size: 2.5rem; } .hero-btns { flex-direction: column; } .section-title h2 { font-size: 2rem; } } @media (max-width: 576px) { .portfolio-grid { grid-template-columns: 1fr; } .hero h1 { font-size: 2rem; } .hero p { font-size: 1rem; } } /* Animation classes */ .animate-on-scroll { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease, transform 0.6s ease; } .animate-on-scroll.animated { opacity: 1; transform: translateY(0); } </style> </head> <body>  <header> <div class="container header-container"> <a href="#" class="logo">Sazwan<span>.</span></a> <div class="menu-toggle" id="menuToggle"> <i class="fas fa-bars"></i> </div> <ul class="nav-links" id="navLinks"> <li><a href="#home">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#services">Services</a></li> <li><a href="#portfolio">Portfolio</a></li> <li><a href="#experience">Experience</a></li> <li><a href="#contact">Contact</a></li> </ul> </div> </header>  <section class="hero" id="home"> <div class="container hero-content animate-on-scroll"> <h1>Hi, I'm <span>Muhammad Sazwan Bin Ismail</span></h1> <p>A passionate digital designer and developer creating experiences that merge art and strategy to empower brands with visual brilliance.</p> <div class="hero-btns"> <a href="#portfolio" class="btn">View My Work</a> <a href="#contact" class="btn btn-outline">Get In Touch</a> </div> </div> </section>  <section class="about" id="about"> <div class="container"> <div class="section-title"> <h2>About Me</h2> </div> <div class="about-content"> <div class="about-img animate-on-scroll">  </div> <div class="about-text animate-on-scroll"> <h3>Multidisciplinary Designer & Digital Creator</h3> <p>With over 5 years of experience in the digital design industry, I specialize in creating compelling brand identities and engaging digital experiences. My work merges creativity with strategy to deliver solutions that resonate with audiences and drive results.</p> <p>Based in Kuala Lumpur, Malaysia, I've worked with clients ranging from startups to established corporations across various industries. My approach combines aesthetic sensibility with technical expertise to craft solutions that are both beautiful and functional.</p> <div class="skills"> <div class="skill-item animate-on-scroll"> <div class="skill-header"> <span>Brand Identity</span> <span>95%</span> </div> <div class="skill-bar"> <div class="skill-progress" data-width="95"></div> </div> </div> <div class="skill-item animate-on-scroll"> <div class="skill-header"> <span>UI/UX Design</span> <span>90%</span> </div> <div class="skill-bar"> <div class="skill-progress" data-width="90"></div> </div> </div> <div class="skill-item animate-on-scroll"> <div class="skill-header"> <span>Web Development</span> <span>85%</span> </div> <div class="skill-bar"> <div class="skill-progress" data-width="85"></div> </div> </div> <div class="skill-item animate-on-scroll"> <div class="skill-header"> <span>Digital Marketing</span> <span>80%</span> </div> <div class="skill-bar"> <div class="skill-progress" data-width="80"></div> </div> </div> </div> </div> </div> </div> </section>  <section class="services" id="services"> <div class="container"> <div class="section-title"> <h2>My Services</h2> </div> <div class="services-grid"> <div class="service-card animate-on-scroll"> <div class="service-icon"> <i class="fas fa-palette"></i> </div> <h3>Brand Identity Design</h3> <p>Creating memorable brand systems that forge lasting impressions. From logos to comprehensive style guides and brand guidelines.</p> </div> <div class="service-card animate-on-scroll"> <div class="service-icon"> <i class="fas fa-laptop-code"></i> </div> <h3>Web Design & Development</h3> <p>Building responsive websites that combine aesthetics and functionality to drive conversions and engagement.</p> </div> <div class="service-card animate-on-scroll"> <div class="service-icon"> <i class="fas fa-bullhorn"></i> </div> <h3>Digital Marketing</h3> <p>Developing strategies that ignite connections and inspire engagement across digital platforms.</p> </div> <div class="service-card animate-on-scroll"> <div class="service-icon"> <i class="fas fa-mobile-alt"></i> </div> <h3>UI/UX Design</h3> <p>Crafting intuitive user experiences and interfaces that captivate audiences and enhance satisfaction.</p> </div> </div> </div> </section>  <section class="portfolio" id="portfolio"> <div class="container"> <div class="section-title"> <h2>My Portfolio</h2> </div> <div class="portfolio-filters"> <button class="filter-btn active" data-filter="all">All</button> <button class="filter-btn" data-filter="branding">Branding</button> <button class="filter-btn" data-filter="web">Web Design</button> <button class="filter-btn" data-filter="marketing">Marketing</button> </div> <div class="portfolio-grid"> <div class="portfolio-item" data-category="branding"> <div class="portfolio-img"> <i class="fas fa-crown"></i> </div> <div class="portfolio-overlay"> <h3>Luxury Brand Identity</h3> <p>Complete rebrand for a high-end fashion retailer including logo, packaging, and marketing materials.</p> </div> </div> <div class="portfolio-item" data-category="web"> <div class="portfolio-img"> <i class="fas fa-shopping-cart"></i> </div> <div class="portfolio-overlay"> <h3>E-commerce Platform</h3> <p>Custom online store with seamless user experience and integrated payment system.</p> </div> </div> <div class="portfolio-item" data-category="marketing"> <div class="portfolio-img"> <i class="fas fa-hashtag"></i> </div> <div class="portfolio-overlay"> <h3>Social Media Campaign</h3> <p>Viral campaign increasing engagement by 150% and followers by 200% in 3 months.</p> </div> </div> <div class="portfolio-item" data-category="branding"> <div class="portfolio-img"> <i class="fas fa-coffee"></i> </div> <div class="portfolio-overlay"> <h3>Café Brand Identity</h3> <p>Complete branding for artisanal coffee chain including store design and packaging.</p> </div> </div> <div class="portfolio-item" data-category="web"> <div class="portfolio-img"> <i class="fas fa-mobile-alt"></i> </div> <div class="portfolio-overlay"> <h3>Mobile Banking App</h3> <p>User-friendly banking application design with enhanced security features.</p> </div> </div> <div class="portfolio-item" data-category="marketing"> <div class="portfolio-img"> <i class="fas fa-video"></i> </div> <div class="portfolio-overlay"> <h3>Video Marketing Series</h3> <p>Engaging video content driving brand awareness and customer conversion.</p> </div> </div> </div> </div> </section>  <section class="experience" id="experience"> <div class="container"> <div class="section-title"> <h2>Work Experience</h2> </div> <div class="timeline"> <div class="timeline-item animate-on-scroll"> <div class="timeline-content"> <h3>Senior Digital Designer</h3> <p>Creative Solutions Agency | 2021 - Present</p> <p>Lead design projects for international clients, managing teams and ensuring brand consistency across digital platforms.</p> </div> </div> <div class="timeline-item animate-on-scroll"> <div class="timeline-content"> <h3>UI/UX Designer</h3> <p>Tech Innovations Sdn Bhd | 2019 - 2021</p> <p>Designed user interfaces for mobile and web applications, conducted user research and testing.</p> </div> </div> <div class="timeline-item animate-on-scroll"> <div class="timeline-content"> <h3>Graphic Designer</h3> <p>BrandWorks Malaysia | 2017 - 2019</p> <p>Created visual concepts for marketing campaigns, developed brand identities for local businesses.</p> </div> </div> <div class="timeline-item animate-on-scroll"> <div class="timeline-content"> <h3>Design Intern</h3> <p>Digital Media House | 2016 - 2017</p> <p>Assisted senior designers with projects, learned industry-standard design tools and techniques.</p> </div> </div> </div> </div> </section>  <section class="testimonials"> <div class="container"> <div class="section-title"> <h2>Client Testimonials</h2> </div> <div class="testimonial-grid"> <div class="testimonial-card animate-on-scroll"> <div class="testimonial-content"> <div class="testimonial-text"> <p>Sazwan transformed our brand identity completely. His attention to detail and creative vision brought our company to a whole new level.</p> </div> <div class="testimonial-author"> <div class="author-img"> <i class="fas fa-user"></i> </div> <div class="author-info"> <h4>Muhamad Sazwan</h4> <p>CEO, Luxury Retail Group</p> </div> </div> </div> </div> <div class="testimonial-card animate-on-scroll"> <div class="testimonial-content"> <div class="testimonial-text"> <p>The e-commerce platform Sazwan designed for us increased our conversion rate by 40%. His technical skills are as impressive as his design sense.</p> </div> <div class="testimonial-author"> <div class="author-img"> <i class="fas fa-user"></i> </div> <div class="author-info"> <h4>Sarah Lim</h4> <p>Marketing Director, ShopMalaysia</p> </div> </div> </div> </div> <div class="testimonial-card animate-on-scroll"> <div class="testimonial-content"> <div class="testimonial-text"> <p>Working with Sazwan on our social media campaign was a game-changer. His innovative approach delivered results beyond our expectations.</p> </div> <div class="testimonial-author"> <div class="author-img"> <i class="fas fa-user"></i> </div> <div class="author-info"> <h4>James Wong</h4> <p>Brand Manager, BeverageCo</p> </div> </div> </div> </div> </div> </div> </section>  <section class="contact" id="contact"> <div class="container"> <div class="section-title"> <h2>Get In Touch</h2> </div> <div class="contact-container"> <div class="contact-info animate-on-scroll"> <h3>Let's Talk About Your Project</h3> <p>I'm currently available for freelance work and open to discussing new projects. Feel free to reach out!</p> <div class="contact-details"> <div class="contact-item"> <div class="contact-icon"> <i class="fas fa-map-marker-alt"></i> </div> <div class="contact-text"> <h4>Location</h4> <p>Kuala Lumpur, Malaysia</p> </div> </div> <div class="contact-item"> <div class="contact-icon"> <i class="fas fa-envelope"></i> </div> <div class="contact-text"> <h4>Email</h4> <p>sazwanismail98@gmail.com</p> </div> </div> <div class="contact-item"> <div class="contact-icon"> <i class="fas fa-phone"></i> </div> <div class="contact-text"> <h4>Phone</h4> <p>+60 14-692 8058</p> </div> </div> </div> <div class="social-links"> <a href="#"><i class="fab fa-linkedin-in"></i></a> <a href="#"><i class="fab fa-behance"></i></a> <a href="#"><i class="fab fa-dribbble"></i></a> <a href="#"><i class="fab fa-instagram"></i></a> </div> </div> <div class="contact-form animate-on-scroll"> <form id="contactForm"> <div class="form-group"> <input type="text" placeholder="Your Name" required> </div> <div class="form-group"> <input type="email" placeholder="Your Email" required> </div> <div class="form-group"> <input type="text" placeholder="Subject"> </div> <div class="form-group"> <textarea placeholder="Your Message" required></textarea> </div> <button type="submit" class="btn">Send Message</button> </form> </div> </div> </div> </section>  <footer> <div class="container"> <div class="footer-content"> <div class="footer-col"> <h3>Sazwan<span>.</span></h3> <p>Creating digital experiences that merge art and strategy to empower brands with visual brilliance.</p> <div class="social-links"> <a href="#"><i class="fab fa-linkedin-in"></i></a> <a href="#"><i class="fab fa-behance"></i></a> <a href="#"><i class="fab fa-dribbble"></i></a> <a href="#"><i class="fab fa-instagram"></i></a> </div> </div> <div class="footer-col"> <h3>Quick Links</h3> <ul class="footer-links"> <li><a href="#home">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#services">Services</a></li> <li><a href="#portfolio">Portfolio</a></li> <li><a href="#contact">Contact</a></li> </ul> </div> <div class="footer-col"> <h3>Services</h3> <ul class="footer-links"> <li><a href="#">Brand Identity</a></li> <li><a href="#">Web Design</a></li> <li><a href="#">UI/UX Design</a></li> <li><a href="#">Digital Marketing</a></li> <li><a href="#">Graphic Design</a></li> </ul> </div> <div class="footer-col"> <h3>Contact</h3> <ul class="footer-links"> <li><i class="fas fa-map-marker-alt"></i> Kuala Lumpur, Malaysia</li> <li><i class="fas fa-envelope"></i> sazwanismail98@gmail.com</li> <li><i class="fas fa-phone"></i> +60 14-692 8058</li> </ul> </div> </div> <div class="copyright"> <p>© 2023 Muhammad Sazwan Bin Ismail. All Rights Reserved.</p> </div> </div> </footer> <script> // Mobile Navigation Toggle const menuToggle = document.getElementById('menuToggle'); const navLinks = document.getElementById('navLinks'); menuToggle.addEventListener('click', () => { navLinks.classList.toggle('active'); }); // Smooth Scrolling document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function(e) { e.preventDefault(); navLinks.classList.remove('active'); const target = document.querySelector(this.getAttribute('href')); if (target) { window.scrollTo({ top: target.offsetTop - 80, behavior: 'smooth' }); } }); }); // Portfolio Filtering const filterBtns = document.querySelectorAll('.filter-btn'); const portfolioItems = document.querySelectorAll('.portfolio-item'); filterBtns.forEach(btn => { btn.addEventListener('click', () => { // Remove active class from all buttons filterBtns.forEach(b => b.classList.remove('active')); // Add active class to clicked button btn.classList.add('active'); const filter = btn.getAttribute('data-filter'); portfolioItems.forEach(item => { if (filter === 'all' || item.getAttribute('data-category') === filter) { item.style.display = 'block'; } else { item.style.display = 'none'; } }); }); }); // Animation on Scroll const animateOnScroll = () => { const elements = document.querySelectorAll('.animate-on-scroll'); elements.forEach(element => { const elementPosition = element.getBoundingClientRect().top; const screenPosition = window.innerHeight / 1.3; if (elementPosition < screenPosition) { element.classList.add('animated'); // Animate skill bars if (element.classList.contains('skill-progress')) { const width = element.getAttribute('data-width'); element.style.width = width + '%'; } } }); }; // Initialize animations window.addEventListener('scroll', animateOnScroll); window.addEventListener('load', animateOnScroll); // Contact form submission const contactForm = document.getElementById('contactForm'); if (contactForm) { contactForm.addEventListener('submit', function(e) { e.preventDefault(); alert('Thank you for your message! I will get back to you soon.'); contactForm.reset(); }); } </script> </body> </html> ``` I've made the following updates to your portfolio: 1. Changed the CEO name to "Muhamad Sazwan" in the first testimonial 2. Updated your email address to: sazwanismail98@gmail.com 3. Updated your phone number to: +60 14-692 8058 These updates appear in: · The contact section · The footer · The first testimonial The portfolio includes all essential sections: · Professional header with navigation · Hero section with introduction · About section with skills visualization · Services showcasing your expertise · Portfolio gallery with filtering · Experience timeline · Client testimonials · Contact form with updated details · Comprehensive footer The design features a modern, responsive layout that works on all devices, with smooth animations and interactive elements. Simply copy and paste the entire code into an HTML file and open it in any browser to see your complete portfolio.

Commits

Commits on Oct 9, 2025

Create Portfolio digital