Create Portfolio digital #10

Sazwanismail · 2025-10-09T15:45:32Z

User description

Digital Portfolio for Muhammad Sazwan Bin Ismail

I've created a complete, professional digital portfolio with all your requested updates:

<!DOCTYPE html>
<html lang="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 -->
    <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>

    <!-- Hero Section -->
    <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>

    <!-- About 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">
                    <!-- Profile image placeholder -->
                </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>

    <!-- Services 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>

    <!-- Portfolio 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>

    <!-- Experience 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>

    <!-- Testimonials -->
    <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>

    <!-- Contact 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>[email protected]</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 -->
    <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> [email protected]</li>
                        <li><i class="fas fa-phone"></i> +60 14-692 8058</li>
                    </ul>
                </div>
            </div>
            
            <div class="copyright">
                <p>&copy; 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:

Changed the CEO name to "Muhamad Sazwan" in the first testimonial
Updated your email address to: [email protected]
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.

CodeAnt-AI Description

Add ready-to-use responsive portfolio for Muhammad Sazwan with filters and contact form

What Changed

Adds a complete, copy-paste HTML portfolio page for "Muhammad Sazwan Bin Ismail" with a modern, responsive layout and visual design.
Provides visible sections: hero, about (with animated skill bars), services, portfolio gallery, contact form, social links, and footer.
Portfolio gallery supports client-side filtering by category without reloading the page.
Navigation is mobile-friendly with a menu toggle and smooth scrolling to page sections.
Scroll-triggered reveal animations and interactive buttons deliver immediate visual feedback; the contact form shows a thank-you alert and resets on submit.
Default contact details (Kuala Lumpur location and Malaysian phone number) and social links are pre-populated for quick publishing.

Impact

✅ Ready-to-use portfolio page
✅ Fewer mobile navigation problems
✅ Clearer contact confirmation for visitors

💡 Usage Guide

Checking Your Pull Request

Every time you make a pull request, our system automatically looks through it. We check for security issues, mistakes in how you're setting up your infrastructure, and common code problems. We do this to make sure your changes are solid and won't cause any trouble later.

Talking to CodeAnt AI

Got a question or need a hand with something in your pull request? You can easily get in touch with CodeAnt AI right here. Just type the following in a comment on your pull request, and replace "Your question here" with whatever you want to ask:

@codeant-ai ask: Your question here

This lets you have a chat with CodeAnt AI about your pull request, making it easier to understand and improve your code.

Retrigger review

Ask CodeAnt AI to review the PR again, by typing:

@codeant-ai: review

Check Your Repository Health

To analyze the health of your code repository, visit our dashboard at https://app.codeant.ai. This tool helps you identify potential issues and areas for improvement in your codebase, ensuring your repository maintains high standards of code health.

Digital Portfolio for Muhammad Sazwan Bin Ismail I've created a complete, professional digital portfolio with all your requested updates: ```html <!DOCTYPE html> <html lang="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>[email protected]</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> [email protected]</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: [email protected] 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.

codeant-ai · 2025-10-09T15:45:37Z

CodeAnt AI is reviewing your PR.

public/Portfolio digital

codeant-ai · 2025-10-09T15:49:39Z

Pull Request Feedback 🔍

🔒 No security issues identified
⚡ Recommended areas for review Skill bars not animating The animateOnScroll routine iterates elements with `.animate-on-scroll` and then checks element.classList.contains('skill-progress') to animate bars. In markup `.skill-progress` elements do not have `.animate-on-scroll` — they are children of `.skill-item`. As written, the skill bars will not receive their width update. Update logic to target `.skill-progress` elements inside the animated element (or query all `.skill-progress` globally and animate those once visible).

public/Portfolio digital

codeant-ai · 2025-10-09T15:49:45Z

CodeAnt AI finished reviewing your PR.

Sazwanismail added this to the https://github.com/Sazwanismail/codespaces-react/issues/5 milestone Oct 9, 2025

Sazwanismail self-assigned this Oct 9, 2025

Sazwanismail added this to @Sazwanismail's untitled project support Oct 9, 2025

Sazwanismail added documentation Improvements or additions to documentation enhancement New feature or request question Further information is requested Windows hunter Projects personal Win Kemenangan Black setting Laman sendiri Strategic Kecekapan semulajadi labels Oct 9, 2025

Sazwanismail merged commit cb5a56f into main Oct 9, 2025
1 check passed

github-project-automation bot moved this to Done in @Sazwanismail's untitled project support Oct 9, 2025

codeant-ai bot added the size:XXL This PR changes 1000+ lines, ignoring generated files label Oct 9, 2025

codeant-ai bot reviewed Oct 9, 2025

View reviewed changes

public/Portfolio digital Show resolved Hide resolved

public/Portfolio digital Show resolved Hide resolved

codeant-ai bot reviewed Oct 9, 2025

View reviewed changes

public/Portfolio digital Show resolved Hide resolved

Sazwanismail modified the milestones: https://github.com/Sazwanismail/codespaces-react/issues/5, https://sazwan96https://github.com/Sazwan96/bitcoin Oct 9, 2025

Sazwanismail linked an issue Oct 9, 2025 that may be closed by this pull request

Copilot setting codespace #9

Open

Sazwanismail modified the milestones: https://github.com/Sazwanismail/codespaces-react/issues/5, https://github.com/enterprises/SazwanGithub, https://sazwan96https://github.com/Sazwan96/bitcoin Oct 16, 2025

Sazwanismail linked an issue Oct 17, 2025 that may be closed by this pull request

Codespaces edit #8

Open

Sazwanismail linked an issue Nov 2, 2025 that may be closed by this pull request

Ms Bot #2

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Create Portfolio digital #10

Create Portfolio digital #10

Uh oh!

Sazwanismail commented Oct 9, 2025 •

edited by codeant-ai bot

Loading

Uh oh!

codeant-ai bot commented Oct 9, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

codeant-ai bot commented Oct 9, 2025 •

edited by Sazwanismail

Loading

Uh oh!

Uh oh!

codeant-ai bot commented Oct 9, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Create Portfolio digital #10

Create Portfolio digital #10

Uh oh!

Conversation

Sazwanismail commented Oct 9, 2025 • edited by codeant-ai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

User description

CodeAnt-AI Description

What Changed

Impact

Checking Your Pull Request

Talking to CodeAnt AI

Retrigger review

Check Your Repository Health

Uh oh!

codeant-ai bot commented Oct 9, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

codeant-ai bot commented Oct 9, 2025 • edited by Sazwanismail Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Pull Request Feedback 🔍

Uh oh!

Uh oh!

codeant-ai bot commented Oct 9, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Sazwanismail commented Oct 9, 2025 •

edited by codeant-ai bot

Loading

codeant-ai bot commented Oct 9, 2025 •

edited by Sazwanismail

Loading