Skip to content

Create Portfolio digital - #10

Merged
Sazwanismail merged 1 commit into
mainfrom
Sazwanismail-patch-port
Oct 9, 2025
Merged

Create Portfolio digital#10
Sazwanismail merged 1 commit into
mainfrom
Sazwanismail-patch-port

Conversation

@Sazwanismail

@SazwanismailSazwanismail commented Oct 9, 2025•
edited by codeant-ai Bot
Loading

Copy link
Copy Markdown
Owner

User description

Digital Portfolio for Muhammad Sazwan Bin Ismail

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

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport" content="width=device-width, initial-scale=1.0"><title>Muhammad Sazwan Bin Ismail | Digital Portfolio</title><linkrel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"><linkhref="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:80px0;
}
.section-title {
text-align: center;
margin-bottom:60px;
position: relative;
}
.section-titleh2 {
font-size:2.5rem;
display: inline-block;
position: relative;
color:var(--primary-dark);
}
.section-titleh2::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:12px30px;
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:010px20pxrgba(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:02px10pxrgba(0,0,0,0.1);
transition:var(--transition);
}
.header-container {
display: flex;
justify-content: space-between;
align-items: center;
padding:20px0;
}
.logo {
font-size:1.8rem;
font-weight:800;
color:var(--primary);
text-decoration: none;
}
.logospan {
color:var(--secondary);
}
.nav-links {
display: flex;
list-style: none;
}
.nav-linksli {
margin-left:30px;
}
.nav-linksa {
text-decoration: none;
color:var(--dark);
font-weight:500;
transition:var(--transition);
position: relative;
}
.nav-linksa:hover {
color:var(--primary);
}
.nav-linksa::after {
content:'';
position: absolute;
bottom:-5px;
left:0;
width:0;
height:2px;
background:var(--primary);
transition:var(--transition);
}
.nav-linksa: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;
}
.heroh1 {
font-size:3.5rem;
margin-bottom:20px;
line-height:1.2;
}
.heroh1span {
color:var(--primary);
}
.herop {
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:1fr1fr;
gap:50px;
align-items: center;
}
.about-img {
border-radius:20px;
overflow: hidden;
box-shadow:020px40pxrgba(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-texth3 {
font-size:2rem;
margin-bottom:20px;
color:var(--primary-dark);
}
.about-textp {
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:010px30pxrgba(0,0,0,0.05);
transition:var(--transition);
}
.service-card:hover {
transform:translateY(-10px);
box-shadow:015px40pxrgba(0,0,0,0.1);
}
.service-icon {
font-size:2.5rem;
color:var(--primary);
margin-bottom:20px;
}
.service-cardh3 {
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:8px20px;
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:010px30pxrgba(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-overlayh3 {
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:10px40px;
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:05px15pxrgba(0,0,0,0.1);
}
.timeline-contenth3 {
color:var(--primary);
margin-bottom:10px;
}
.timeline-contentp {
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:010px30pxrgba(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-infoh4 {
margin-bottom:5px;
}
.author-infop {
color:var(--gray);
font-size:0.9rem;
}
/* Contact Section */
.contact-container {
display: grid;
grid-template-columns:1fr1fr;
gap:50px;
}
.contact-infoh3 {
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-texth4 {
margin-bottom:5px;
}
.contact-form .form-group {
margin-bottom:20px;
}
.contact-forminput,
.contact-formtextarea {
width:100%;
padding:15px;
border:2px solid var(--light-gray);
border-radius:10px;
font-family:'Poppins', sans-serif;
transition:var(--transition);
}
.contact-forminput:focus,
.contact-formtextarea:focus {
border-color:var(--primary);
outline: none;
}
.contact-formtextarea {
height:150px;
resize: none;
}
/* Footer */footer {
background:var(--dark);
color: white;
padding:50px020px;
}
.footer-content {
display: grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:30px;
margin-bottom:40px;
}
.footer-colh3 {
font-size:1.5rem;
margin-bottom:20px;
position: relative;
display: inline-block;
}
.footer-colh3::after {
content:'';
position: absolute;
bottom:-8px;
left:0;
width:40px;
height:3px;
background:var(--secondary);
}
.footer-colp {
color:#cbd5e1;
margin-bottom:15px;
}
.social-links {
display: flex;
gap:15px;
}
.social-linksa {
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-linksa:hover {
background:var(--primary);
transform:translateY(-5px);
}
.footer-links {
list-style: none;
}
.footer-linksli {
margin-bottom:10px;
}
.footer-linksa {
color:#cbd5e1;
text-decoration: none;
transition:var(--transition);
}
.footer-linksa: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;
}
.heroh1 {
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:20px0;
box-shadow:010px10pxrgba(0,0,0,0.1);
clip-path:polygon(00,100%0,100%0,00);
transition:var(--transition);
}
.nav-links.active {
clip-path:polygon(00,100%0,100%100%,0100%);
}
.nav-linksli {
margin:15px30px;
}
.heroh1 {
font-size:2.5rem;
}
.hero-btns {
flex-direction: column;
}
.section-titleh2 {
font-size:2rem;
}
}
@media (max-width:576px) {
.portfolio-grid {
grid-template-columns:1fr;
}
.heroh1 {
font-size:2rem;
}
.herop {
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><divclass="container header-container"><ahref="#" class="logo">Sazwan<span>.</span></a><divclass="menu-toggle" id="menuToggle"><iclass="fas fa-bars"></i></div><ulclass="nav-links" id="navLinks"><li><ahref="#home">Home</a></li><li><ahref="#about">About</a></li><li><ahref="#services">Services</a></li><li><ahref="#portfolio">Portfolio</a></li><li><ahref="#experience">Experience</a></li><li><ahref="#contact">Contact</a></li></ul></div></header><!-- Hero Section --><sectionclass="hero" id="home"><divclass="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><divclass="hero-btns"><ahref="#portfolio" class="btn">View My Work</a><ahref="#contact" class="btn btn-outline">Get In Touch</a></div></div></section><!-- About Section --><sectionclass="about" id="about"><divclass="container"><divclass="section-title"><h2>About Me</h2></div><divclass="about-content"><divclass="about-img animate-on-scroll"><!-- Profile image placeholder --></div><divclass="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><divclass="skills"><divclass="skill-item animate-on-scroll"><divclass="skill-header"><span>Brand Identity</span><span>95%</span></div><divclass="skill-bar"><divclass="skill-progress" data-width="95"></div></div></div><divclass="skill-item animate-on-scroll"><divclass="skill-header"><span>UI/UX Design</span><span>90%</span></div><divclass="skill-bar"><divclass="skill-progress" data-width="90"></div></div></div><divclass="skill-item animate-on-scroll"><divclass="skill-header"><span>Web Development</span><span>85%</span></div><divclass="skill-bar"><divclass="skill-progress" data-width="85"></div></div></div><divclass="skill-item animate-on-scroll"><divclass="skill-header"><span>Digital Marketing</span><span>80%</span></div><divclass="skill-bar"><divclass="skill-progress" data-width="80"></div></div></div></div></div></div></div></section><!-- Services Section --><sectionclass="services" id="services"><divclass="container"><divclass="section-title"><h2>My Services</h2></div><divclass="services-grid"><divclass="service-card animate-on-scroll"><divclass="service-icon"><iclass="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><divclass="service-card animate-on-scroll"><divclass="service-icon"><iclass="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><divclass="service-card animate-on-scroll"><divclass="service-icon"><iclass="fas fa-bullhorn"></i></div><h3>Digital Marketing</h3><p>Developing strategies that ignite connections and inspire engagement across digital platforms.</p></div><divclass="service-card animate-on-scroll"><divclass="service-icon"><iclass="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 --><sectionclass="portfolio" id="portfolio"><divclass="container"><divclass="section-title"><h2>My Portfolio</h2></div><divclass="portfolio-filters"><buttonclass="filter-btn active" data-filter="all">All</button><buttonclass="filter-btn" data-filter="branding">Branding</button><buttonclass="filter-btn" data-filter="web">Web Design</button><buttonclass="filter-btn" data-filter="marketing">Marketing</button></div><divclass="portfolio-grid"><divclass="portfolio-item" data-category="branding"><divclass="portfolio-img"><iclass="fas fa-crown"></i></div><divclass="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><divclass="portfolio-item" data-category="web"><divclass="portfolio-img"><iclass="fas fa-shopping-cart"></i></div><divclass="portfolio-overlay"><h3>E-commerce Platform</h3><p>Custom online store with seamless user experience and integrated payment system.</p></div></div><divclass="portfolio-item" data-category="marketing"><divclass="portfolio-img"><iclass="fas fa-hashtag"></i></div><divclass="portfolio-overlay"><h3>Social Media Campaign</h3><p>Viral campaign increasing engagement by 150% and followers by 200% in 3 months.</p></div></div><divclass="portfolio-item" data-category="branding"><divclass="portfolio-img"><iclass="fas fa-coffee"></i></div><divclass="portfolio-overlay"><h3>Café Brand Identity</h3><p>Complete branding for artisanal coffee chain including store design and packaging.</p></div></div><divclass="portfolio-item" data-category="web"><divclass="portfolio-img"><iclass="fas fa-mobile-alt"></i></div><divclass="portfolio-overlay"><h3>Mobile Banking App</h3><p>User-friendly banking application design with enhanced security features.</p></div></div><divclass="portfolio-item" data-category="marketing"><divclass="portfolio-img"><iclass="fas fa-video"></i></div><divclass="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 --><sectionclass="experience" id="experience"><divclass="container"><divclass="section-title"><h2>Work Experience</h2></div><divclass="timeline"><divclass="timeline-item animate-on-scroll"><divclass="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><divclass="timeline-item animate-on-scroll"><divclass="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><divclass="timeline-item animate-on-scroll"><divclass="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><divclass="timeline-item animate-on-scroll"><divclass="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 --><sectionclass="testimonials"><divclass="container"><divclass="section-title"><h2>Client Testimonials</h2></div><divclass="testimonial-grid"><divclass="testimonial-card animate-on-scroll"><divclass="testimonial-content"><divclass="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><divclass="testimonial-author"><divclass="author-img"><iclass="fas fa-user"></i></div><divclass="author-info"><h4>Muhamad Sazwan</h4><p>CEO, Luxury Retail Group</p></div></div></div></div><divclass="testimonial-card animate-on-scroll"><divclass="testimonial-content"><divclass="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><divclass="testimonial-author"><divclass="author-img"><iclass="fas fa-user"></i></div><divclass="author-info"><h4>Sarah Lim</h4><p>Marketing Director, ShopMalaysia</p></div></div></div></div><divclass="testimonial-card animate-on-scroll"><divclass="testimonial-content"><divclass="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><divclass="testimonial-author"><divclass="author-img"><iclass="fas fa-user"></i></div><divclass="author-info"><h4>James Wong</h4><p>Brand Manager, BeverageCo</p></div></div></div></div></div></div></section><!-- Contact Section --><sectionclass="contact" id="contact"><divclass="container"><divclass="section-title"><h2>Get In Touch</h2></div><divclass="contact-container"><divclass="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><divclass="contact-details"><divclass="contact-item"><divclass="contact-icon"><iclass="fas fa-map-marker-alt"></i></div><divclass="contact-text"><h4>Location</h4><p>Kuala Lumpur, Malaysia</p></div></div><divclass="contact-item"><divclass="contact-icon"><iclass="fas fa-envelope"></i></div><divclass="contact-text"><h4>Email</h4><p>sazwanismail98@gmail.com</p></div></div><divclass="contact-item"><divclass="contact-icon"><iclass="fas fa-phone"></i></div><divclass="contact-text"><h4>Phone</h4><p>+60 14-692 8058</p></div></div></div><divclass="social-links"><ahref="#"><iclass="fab fa-linkedin-in"></i></a><ahref="#"><iclass="fab fa-behance"></i></a><ahref="#"><iclass="fab fa-dribbble"></i></a><ahref="#"><iclass="fab fa-instagram"></i></a></div></div><divclass="contact-form animate-on-scroll"><formid="contactForm"><divclass="form-group"><inputtype="text" placeholder="Your Name" required></div><divclass="form-group"><inputtype="email" placeholder="Your Email" required></div><divclass="form-group"><inputtype="text" placeholder="Subject"></div><divclass="form-group"><textareaplaceholder="Your Message" required></textarea></div><buttontype="submit" class="btn">Send Message</button></form></div></div></div></section><!-- Footer --><footer><divclass="container"><divclass="footer-content"><divclass="footer-col"><h3>Sazwan<span>.</span></h3><p>Creating digital experiences that merge art and strategy to empower brands with visual brilliance.</p><divclass="social-links"><ahref="#"><iclass="fab fa-linkedin-in"></i></a><ahref="#"><iclass="fab fa-behance"></i></a><ahref="#"><iclass="fab fa-dribbble"></i></a><ahref="#"><iclass="fab fa-instagram"></i></a></div></div><divclass="footer-col"><h3>Quick Links</h3><ulclass="footer-links"><li><ahref="#home">Home</a></li><li><ahref="#about">About</a></li><li><ahref="#services">Services</a></li><li><ahref="#portfolio">Portfolio</a></li><li><ahref="#contact">Contact</a></li></ul></div><divclass="footer-col"><h3>Services</h3><ulclass="footer-links"><li><ahref="#">Brand Identity</a></li><li><ahref="#">Web Design</a></li><li><ahref="#">UI/UX Design</a></li><li><ahref="#">Digital Marketing</a></li><li><ahref="#">Graphic Design</a></li></ul></div><divclass="footer-col"><h3>Contact</h3><ulclass="footer-links"><li><iclass="fas fa-map-marker-alt"></i> Kuala Lumpur, Malaysia</li><li><iclass="fas fa-envelope"></i> sazwanismail98@gmail.com</li><li><iclass="fas fa-phone"></i> +60 14-692 8058</li></ul></div></div><divclass="copyright"><p>&copy; 2023 Muhammad Sazwan Bin Ismail. All Rights Reserved.</p></div></div></footer><script>// Mobile Navigation ToggleconstmenuToggle=document.getElementById('menuToggle');constnavLinks=document.getElementById('navLinks');menuToggle.addEventListener('click',()=>{navLinks.classList.toggle('active');});// Smooth Scrollingdocument.querySelectorAll('a[href^="#"]').forEach(anchor=>{anchor.addEventListener('click',function(e){e.preventDefault();navLinks.classList.remove('active');consttarget=document.querySelector(this.getAttribute('href'));if(target){window.scrollTo({top: target.offsetTop-80,behavior: 'smooth'});}});});// Portfolio FilteringconstfilterBtns=document.querySelectorAll('.filter-btn');constportfolioItems=document.querySelectorAll('.portfolio-item');filterBtns.forEach(btn=>{btn.addEventListener('click',()=>{// Remove active class from all buttonsfilterBtns.forEach(b=>b.classList.remove('active'));// Add active class to clicked buttonbtn.classList.add('active');constfilter=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 ScrollconstanimateOnScroll=()=>{constelements=document.querySelectorAll('.animate-on-scroll');elements.forEach(element=>{constelementPosition=element.getBoundingClientRect().top;constscreenPosition=window.innerHeight/1.3;if(elementPosition<screenPosition){element.classList.add('animated');// Animate skill barsif(element.classList.contains('skill-progress')){constwidth=element.getAttribute('data-width');element.style.width=width+'%';}}});};// Initialize animationswindow.addEventListener('scroll',animateOnScroll);window.addEventListener('load',animateOnScroll);// Contact form submissionconstcontactForm=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.

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.

@Sazwanismail
Create Portfolio digital
7b98b10
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 -->
<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>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 -->
<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>&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:
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.
@SazwanismailSazwanismail self-assigned this Oct 9, 2025
@SazwanismailSazwanismail 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
@codeant-ai

codeant-aiBot commented Oct 9, 2025

Copy link
Copy Markdown

CodeAnt AI is reviewing your PR.

@Sazwanismail
Sazwanismail merged commit cb5a56f into mainOct 9, 2025
1 check passed
@codeant-aicodeant-aiBot added the size:XXL This PR changes 1000+ lines, ignoring generated files label Oct 9, 2025
codeant-ai[bot]
codeant-aiBot reviewed Oct 9, 2025
View reviewed changes
Comment threadpublic/Portfolio digital
Comment threadpublic/Portfolio digital
@codeant-ai

codeant-aiBot commented Oct 9, 2025•
edited by Sazwanismail
Loading

Copy link
Copy Markdown

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).

codeant-ai[bot]
codeant-aiBot reviewed Oct 9, 2025
View reviewed changes
Comment threadpublic/Portfolio digital
@codeant-ai

codeant-aiBot commented Oct 9, 2025

Copy link
Copy Markdown

CodeAnt AI finished reviewing your PR.

@SazwanismailSazwanismail linked an issue Oct 9, 2025 that may be closed by this pull request
Copilot setting codespace #9
Closed
@SazwanismailSazwanismail linked an issue Oct 17, 2025 that may be closed by this pull request
Codespaces edit #8
Closed
@SazwanismailSazwanismail linked an issue Nov 2, 2025 that may be closed by this pull request
Ms Bot #2
Closed
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@codeant-aicodeant-ai[bot]codeant-ai[bot] left review comments

Assignees

@SazwanismailSazwanismail

Labels

Black settingLaman sendiridocumentationImprovements or additions to documentationenhancementNew feature or requestquestionFurther information is requestedsize:XXLThis PR changes 1000+ lines, ignoring generated filesStrategicKecekapan semulajadiWinKemenanganWindows hunterProjects personal

Projects

@Sazwanismail's untitled project support
Status: Done

Milestone

https://sazwan96https://github.com/Sa...

Development

Successfully merging this pull request may close these issues.

Copilot setting codespace Codespaces edit Ms Bot

1 participant

@Sazwanismail