744 lines
24 KiB
HTML
744 lines
24 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Windy Pham - MLOps Portfolio</title>
|
|
|
|
<!--
|
|
- favicon
|
|
-->
|
|
<link rel="shortcut icon" href="./assets/images/logo.ico" type="image/x-icon">
|
|
|
|
<!--
|
|
- custom css link
|
|
-->
|
|
<link rel="stylesheet" href="./assets/css/style.css">
|
|
|
|
<!--
|
|
- google font link
|
|
-->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<!--
|
|
- #MAIN
|
|
-->
|
|
|
|
<main>
|
|
|
|
<!--
|
|
- #SIDEBAR
|
|
-->
|
|
|
|
<aside class="sidebar" data-sidebar>
|
|
|
|
<!-- Theme Toggle Button -->
|
|
<button class="theme-toggle" id="themeToggle" aria-label="Toggle theme">
|
|
<ion-icon name="sunny" class="sun-icon"></ion-icon>
|
|
<ion-icon name="moon" class="moon-icon"></ion-icon>
|
|
</button>
|
|
|
|
<div class="sidebar-info">
|
|
|
|
<figure class="avatar-box">
|
|
<img src="./assets/images/my-avatar.png" alt="Windy Pham" width="80">
|
|
</figure>
|
|
|
|
<div class="info-content">
|
|
<h1 class="name" title="Windy Pham">Windy Pham</h1>
|
|
|
|
<p class="title" style="font-size: 14px; font-weight: 600; padding: 5px 15px;">MLOps in Google</p>
|
|
</div>
|
|
|
|
<button class="info_more-btn" data-sidebar-btn>
|
|
<span>Show Contacts</span>
|
|
|
|
<ion-icon name="chevron-down"></ion-icon>
|
|
</button>
|
|
|
|
</div>
|
|
|
|
<div class="sidebar-info_more">
|
|
|
|
<div class="separator"></div>
|
|
|
|
<ul class="contacts-list">
|
|
|
|
<li class="contact-item">
|
|
|
|
<div class="icon-box">
|
|
<ion-icon name="mail-outline"></ion-icon>
|
|
</div>
|
|
|
|
<div class="contact-info">
|
|
<p class="contact-title">Email</p>
|
|
|
|
<a href="mailto:phongpt.working@gmail.com" class="contact-link">phongpt.working@gmail.com</a>
|
|
</div>
|
|
|
|
</li>
|
|
|
|
<li class="contact-item">
|
|
|
|
<div class="icon-box">
|
|
<ion-icon name="phone-portrait-outline"></ion-icon>
|
|
</div>
|
|
|
|
<div class="contact-info">
|
|
<p class="contact-title">Phone</p>
|
|
|
|
<a href="tel:+84867524445" class="contact-link">+84 867524445</a>
|
|
</div>
|
|
|
|
</li>
|
|
|
|
<li class="contact-item">
|
|
|
|
<div class="icon-box">
|
|
<ion-icon name="calendar-outline"></ion-icon>
|
|
</div>
|
|
|
|
<div class="contact-info">
|
|
<p class="contact-title">Birthday</p>
|
|
|
|
<time datetime="2003-10-12">October 12, 2003</time>
|
|
</div>
|
|
|
|
</li>
|
|
|
|
<li class="contact-item">
|
|
|
|
<div class="icon-box">
|
|
<ion-icon name="location-outline"></ion-icon>
|
|
</div>
|
|
|
|
<div class="contact-info">
|
|
<p class="contact-title">Location</p>
|
|
|
|
<address>Ho Chi Minh City, Viet Nam</address>
|
|
</div>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
<div class="separator"></div>
|
|
|
|
<ul class="social-list">
|
|
|
|
<li class="social-item">
|
|
<a href="#" class="social-link">
|
|
<ion-icon name="logo-facebook"></ion-icon>
|
|
</a>
|
|
</li>
|
|
|
|
<li class="social-item">
|
|
<a href="#" class="social-link">
|
|
<ion-icon name="logo-twitter"></ion-icon>
|
|
</a>
|
|
</li>
|
|
|
|
<li class="social-item">
|
|
<a href="#" class="social-link">
|
|
<ion-icon name="logo-instagram"></ion-icon>
|
|
</a>
|
|
</li>
|
|
|
|
<li class="social-item">
|
|
<a href="#" class="social-link">
|
|
<ion-icon name="paper-plane-outline"></ion-icon>
|
|
</a>
|
|
</li>
|
|
|
|
<li class="social-item">
|
|
<a href="#" class="social-link">
|
|
<ion-icon name="logo-whatsapp"></ion-icon>
|
|
</a>
|
|
</li>
|
|
|
|
<li class="social-item">
|
|
<a href="#" class="social-link">
|
|
<ion-icon name="logo-github"></ion-icon>
|
|
</a>
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
</aside>
|
|
|
|
|
|
|
|
|
|
|
|
<!--
|
|
- #main-content
|
|
-->
|
|
|
|
<div class="main-content">
|
|
|
|
<!--
|
|
- #NAVBAR
|
|
-->
|
|
|
|
<nav class="navbar">
|
|
|
|
<ul class="navbar-list">
|
|
|
|
<li class="navbar-item">
|
|
<button class="navbar-link active" data-nav-link>About</button>
|
|
</li>
|
|
|
|
<li class="navbar-item">
|
|
<button class="navbar-link" data-nav-link>Resume</button>
|
|
</li>
|
|
|
|
<li class="navbar-item">
|
|
<button class="navbar-link" data-nav-link>Contact</button>
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</nav>
|
|
|
|
|
|
|
|
|
|
|
|
<!--
|
|
- #ABOUT
|
|
-->
|
|
|
|
<article class="about active" data-page="about">
|
|
|
|
<header>
|
|
<h2 class="h2 article-title">About me</h2>
|
|
</header>
|
|
|
|
<section class="about-text">
|
|
<p>
|
|
I'm an MLOps Engineer at Google, joining the team in 2025. I specialize in bridging the gap between machine learning development and production deployment, ensuring ML models are scalable, reliable, and performant in real-world applications.
|
|
</p>
|
|
|
|
<p>
|
|
My work focuses on building and maintaining robust ML infrastructure, implementing CI/CD pipelines for machine learning workflows, and optimizing model deployment strategies. I'm passionate about automation, monitoring ML systems, and ensuring models deliver consistent value in production environments. At Google, I collaborate with data scientists and engineers to streamline the ML lifecycle from experimentation to production.
|
|
</p>
|
|
</section>
|
|
|
|
|
|
<!--
|
|
- service
|
|
-->
|
|
|
|
<section class="service">
|
|
|
|
<h3 class="h3 service-title">What i'm doing</h3>
|
|
|
|
<ul class="service-list">
|
|
|
|
<li class="service-item">
|
|
|
|
<div class="service-icon-box">
|
|
<ion-icon name="git-network-outline"></ion-icon>
|
|
</div>
|
|
|
|
<div class="service-content-box">
|
|
<h4 class="h4 service-item-title">ML Pipeline Development</h4>
|
|
|
|
<p class="service-item-text">
|
|
Building automated and scalable machine learning pipelines for model training, validation, and deployment.
|
|
</p>
|
|
</div>
|
|
|
|
</li>
|
|
|
|
<li class="service-item">
|
|
|
|
<div class="service-icon-box">
|
|
<ion-icon name="server-outline"></ion-icon>
|
|
</div>
|
|
|
|
<div class="service-content-box">
|
|
<h4 class="h4 service-item-title">ML Infrastructure</h4>
|
|
|
|
<p class="service-item-text">
|
|
Designing and maintaining robust infrastructure for ML workloads using cloud technologies and Kubernetes.
|
|
</p>
|
|
</div>
|
|
|
|
</li>
|
|
|
|
<li class="service-item">
|
|
|
|
<div class="service-icon-box">
|
|
<ion-icon name="analytics-outline"></ion-icon>
|
|
</div>
|
|
|
|
<div class="service-content-box">
|
|
<h4 class="h4 service-item-title">Model Monitoring</h4>
|
|
|
|
<p class="service-item-text">
|
|
Implementing monitoring systems to track model performance, data drift, and system health in production.
|
|
</p>
|
|
</div>
|
|
|
|
</li>
|
|
|
|
<li class="service-item">
|
|
|
|
<div class="service-icon-box">
|
|
<ion-icon name="sync-outline"></ion-icon>
|
|
</div>
|
|
|
|
<div class="service-content-box">
|
|
<h4 class="h4 service-item-title">CI/CD for ML</h4>
|
|
|
|
<p class="service-item-text">
|
|
Creating continuous integration and deployment workflows for seamless ML model updates and versioning.
|
|
</p>
|
|
</div>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</section>
|
|
|
|
|
|
<!--
|
|
- testimonials
|
|
-->
|
|
|
|
<section class="testimonials">
|
|
|
|
<h3 class="h3 testimonials-title">Certifications & Badges</h3>
|
|
|
|
<ul class="testimonials-list has-scrollbar">
|
|
|
|
<li class="testimonials-item">
|
|
<div class="content-card" data-testimonials-item>
|
|
|
|
<figure class="testimonials-avatar-box">
|
|
<img src="https://developers.google.com/static/profile/badges/community/gdg/member/badge.svg" alt="GDG Member" width="60" data-testimonials-avatar>
|
|
</figure>
|
|
|
|
<h4 class="h4 testimonials-item-title" data-testimonials-title>GDG Member</h4>
|
|
|
|
<div class="testimonials-text" data-testimonials-text>
|
|
<p>
|
|
Active member of Google Developer Groups (GDG), contributing to the local developer community through knowledge sharing, organizing events, and fostering collaboration among developers passionate about Google technologies.
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
</li>
|
|
|
|
<li class="testimonials-item">
|
|
<div class="content-card" data-testimonials-item>
|
|
|
|
<figure class="testimonials-avatar-box">
|
|
<img src="https://developers.google.com/static/profile/badges/events/io/2025/registered/badge.svg" alt="Google I/O 2025" width="60" data-testimonials-avatar>
|
|
</figure>
|
|
|
|
<h4 class="h4 testimonials-item-title" data-testimonials-title>Google I/O 2025</h4>
|
|
|
|
<div class="testimonials-text" data-testimonials-text>
|
|
<p>
|
|
Registered attendee of Google I/O 2025, staying up-to-date with the latest innovations in AI, machine learning, cloud technologies, and developer tools announced at Google's flagship developer conference.
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
</li>
|
|
|
|
<li class="testimonials-item">
|
|
<div class="content-card" data-testimonials-item>
|
|
|
|
<figure class="testimonials-avatar-box">
|
|
<img src="https://developers.google.com/static/profile/badges/community/gde/2023/badge.svg" alt="GDE 2023" width="60" data-testimonials-avatar>
|
|
</figure>
|
|
|
|
<h4 class="h4 testimonials-item-title" data-testimonials-title>Google Developer Expert 2023</h4>
|
|
|
|
<div class="testimonials-text" data-testimonials-text>
|
|
<p>
|
|
Recognized as a Google Developer Expert (GDE) in 2023 for exceptional technical expertise and contributions to the developer community. GDEs are experienced, recognized developers who actively support developers and startups.
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
</li>
|
|
|
|
<li class="testimonials-item">
|
|
<div class="content-card" data-testimonials-item>
|
|
|
|
<figure class="testimonials-avatar-box">
|
|
<img src="https://developers.google.com/static/profile/badges/community/gde/2024/badge.svg" alt="GDE 2024" width="60" data-testimonials-avatar>
|
|
</figure>
|
|
|
|
<h4 class="h4 testimonials-item-title" data-testimonials-title>Google Developer Expert 2024</h4>
|
|
|
|
<div class="testimonials-text" data-testimonials-text>
|
|
<p>
|
|
Continued recognition as a Google Developer Expert (GDE) in 2024, maintaining high standards of technical expertise and community contributions. Actively engaged in mentoring, speaking, and sharing knowledge with the global developer community.
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</section>
|
|
|
|
|
|
<!--
|
|
- testimonials modal
|
|
-->
|
|
|
|
<div class="modal-container" data-modal-container>
|
|
|
|
<div class="overlay" data-overlay></div>
|
|
|
|
<section class="testimonials-modal">
|
|
|
|
<button class="modal-close-btn" data-modal-close-btn>
|
|
<ion-icon name="close-outline"></ion-icon>
|
|
</button>
|
|
|
|
<div class="modal-img-wrapper">
|
|
<figure class="modal-avatar-box">
|
|
<img src="https://developers.google.com/static/profile/badges/community/gdg/member/badge.svg" alt="GDG Member" width="80" data-modal-img>
|
|
</figure>
|
|
|
|
<img src="./assets/images/icon-quote.svg" alt="badge icon">
|
|
</div>
|
|
|
|
<div class="modal-content">
|
|
|
|
<h4 class="h3 modal-title" data-modal-title>GDG Member</h4>
|
|
|
|
<time datetime="2025-10-29">2025</time>
|
|
|
|
<div data-modal-text>
|
|
<p>
|
|
Active member of Google Developer Groups (GDG), contributing to the local developer community through knowledge sharing, organizing events, and fostering collaboration among developers passionate about Google technologies.
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
</div>
|
|
|
|
|
|
<!--
|
|
- clients
|
|
-->
|
|
|
|
<section class="clients">
|
|
|
|
<h3 class="h3 clients-title">Companies I've Worked With</h3>
|
|
|
|
<ul class="clients-list has-scrollbar">
|
|
|
|
<li class="clients-item">
|
|
<a href="https://www.google.com" target="_blank">
|
|
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="Google logo" style="max-width: 180px;">
|
|
</a>
|
|
</li>
|
|
|
|
<li class="clients-item">
|
|
<a href="https://www.microsoft.com" target="_blank">
|
|
<img src="https://img-prod-cms-rt-microsoft-com.akamaized.net/cms/api/am/imageFileData/RE1Mu3b?ver=5c31" alt="Microsoft logo" style="max-width: 180px;">
|
|
</a>
|
|
</li>
|
|
|
|
<li class="clients-item">
|
|
<a href="https://www.vng.com.vn" target="_blank">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 43 17" style="width: 100px; height: auto;">
|
|
<path fill="#e65a26" d="M12.6 0v7.35a9.44 9.44 0 0 1-9.45 9.45H0V0h3.15v13.69a6.33 6.33 0 0 0 6.33-6.34V0Zm14.7 4.73V16.8h-3.15V4.72a1.57 1.57 0 0 0-1.58-1.57h-4.72V16.8H14.7V0h7.87a4.64 4.64 0 0 1 1.58.27A4.75 4.75 0 0 1 27 3.15a4.81 4.81 0 0 1 .3 1.58ZM34.64 10h4.2v2.1a1.58 1.58 0 0 1-1.58 1.58h-3.13a1.58 1.58 0 0 1-1.58-1.54v-7.4a1.57 1.57 0 0 1 1.57-1.57h5.78V0h-5.78a4.54 4.54 0 0 0-1.57.27 4.77 4.77 0 0 0-2.89 2.88 4.8 4.8 0 0 0-.26 1.58v7.33a4.85 4.85 0 0 0 .26 1.58 4.74 4.74 0 0 0 2.89 2.88 4.54 4.54 0 0 0 1.57.27h3.15a4.54 4.54 0 0 0 1.57-.27 4.72 4.72 0 0 0 2.89-2.88 4.84 4.84 0 0 0 .27-1.55V6.84h-7.36Z" data-name="Layer 1"></path>
|
|
</svg>
|
|
</a>
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</section>
|
|
|
|
</article>
|
|
|
|
|
|
|
|
|
|
|
|
<!--
|
|
- #RESUME
|
|
-->
|
|
|
|
<article class="resume" data-page="resume">
|
|
|
|
<header>
|
|
<h2 class="h2 article-title">Resume</h2>
|
|
</header>
|
|
|
|
<section class="timeline">
|
|
|
|
<div class="title-wrapper">
|
|
<div class="icon-box">
|
|
<ion-icon name="briefcase-outline"></ion-icon>
|
|
</div>
|
|
|
|
<h3 class="h3">Experience</h3>
|
|
</div>
|
|
|
|
<ol class="timeline-list">
|
|
|
|
<li class="timeline-item">
|
|
|
|
<h4 class="h4 timeline-item-title">MLOps Engineer - Google Cloud</h4>
|
|
|
|
<span>2025 — Present</span>
|
|
|
|
<p class="timeline-text">
|
|
Leading ML infrastructure development and deployment automation at Google Cloud. Building scalable ML pipelines using Kubernetes, Vertex AI, and TensorFlow Extended. Implementing CI/CD workflows for model training, validation, and deployment. Managing model monitoring systems and ensuring production reliability with 99.9% uptime.
|
|
</p>
|
|
|
|
</li>
|
|
|
|
<li class="timeline-item">
|
|
|
|
<h4 class="h4 timeline-item-title">Data Analyst - Microsoft Vietnam</h4>
|
|
|
|
<span>2023 — 2024</span>
|
|
|
|
<p class="timeline-text">
|
|
Analyzed large-scale datasets using SQL, Python, and Power BI to drive business insights for Azure services. Developed automated reporting dashboards that reduced manual reporting time by 60%. Collaborated with cross-functional teams to optimize data pipelines and improve data quality metrics. Implemented A/B testing frameworks for product features.
|
|
</p>
|
|
|
|
</li>
|
|
|
|
<li class="timeline-item">
|
|
|
|
<h4 class="h4 timeline-item-title">Application Testing Engineer - Zalo (VNG Corporation)</h4>
|
|
|
|
<span>2022 — 2023</span>
|
|
|
|
<p class="timeline-text">
|
|
Conducted comprehensive testing for Zalo messaging platform with 70M+ active users. Designed and executed test cases for mobile applications (iOS/Android) and backend services. Automated regression testing using Selenium and Appium, reducing testing cycle time by 40%. Identified and documented critical bugs, working closely with development teams to ensure quality releases.
|
|
</p>
|
|
|
|
</li>
|
|
|
|
</ol>
|
|
|
|
</section>
|
|
|
|
<section class="timeline">
|
|
|
|
<div class="title-wrapper">
|
|
<div class="icon-box">
|
|
<ion-icon name="book-outline"></ion-icon>
|
|
</div>
|
|
|
|
<h3 class="h3">Education</h3>
|
|
</div>
|
|
|
|
<ol class="timeline-list">
|
|
|
|
<li class="timeline-item">
|
|
|
|
<h4 class="h4 timeline-item-title">University of Science, VNU-HCM</h4>
|
|
|
|
<span>2022 — 2026</span>
|
|
|
|
<p class="timeline-text">
|
|
Bachelor of Science in Computer Physics. Specialized coursework in Machine Learning, Deep Learning, Statistical Physics, Computational Methods, and Data Science. Completed projects in neural network optimization, quantum computing simulations, and big data analytics. GPA: 3.8/4.0. Active member of AI research lab focusing on physics-informed neural networks.
|
|
</p>
|
|
|
|
</li>
|
|
|
|
<li class="timeline-item">
|
|
|
|
<h4 class="h4 timeline-item-title">Hanoi University of Science and Technology</h4>
|
|
|
|
<span>2021 — 2022</span>
|
|
|
|
<p class="timeline-text">
|
|
Artificial Intelligence Program (1 year). Foundational studies in AI algorithms, machine learning fundamentals, computer vision, and natural language processing. Developed strong programming skills in Python, Java, and C++. Completed projects on image classification and predictive modeling. Transferred to pursue Computer Physics specialization.
|
|
</p>
|
|
|
|
</li>
|
|
|
|
</ol>
|
|
|
|
</section>
|
|
|
|
<section class="skill">
|
|
|
|
<h3 class="h3 skills-title">My Skills</h3>
|
|
|
|
<div class="skills-categories">
|
|
|
|
<div class="skill-category">
|
|
<h4 class="h4 category-title">MLOps & Cloud</h4>
|
|
<ul class="skill-tags">
|
|
<li class="skill-tag">Kubernetes</li>
|
|
<li class="skill-tag">Docker</li>
|
|
<li class="skill-tag">Google Cloud Platform</li>
|
|
<li class="skill-tag">Vertex AI</li>
|
|
<li class="skill-tag">TensorFlow Extended</li>
|
|
<li class="skill-tag">MLflow</li>
|
|
<li class="skill-tag">CI/CD</li>
|
|
<li class="skill-tag">Terraform</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="skill-category">
|
|
<h4 class="h4 category-title">Machine Learning & AI</h4>
|
|
<ul class="skill-tags">
|
|
<li class="skill-tag">TensorFlow</li>
|
|
<li class="skill-tag">PyTorch</li>
|
|
<li class="skill-tag">Scikit-learn</li>
|
|
<li class="skill-tag">Deep Learning</li>
|
|
<li class="skill-tag">Computer Vision</li>
|
|
<li class="skill-tag">NLP</li>
|
|
<li class="skill-tag">Model Optimization</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="skill-category">
|
|
<h4 class="h4 category-title">Programming Languages</h4>
|
|
<ul class="skill-tags">
|
|
<li class="skill-tag">Python</li>
|
|
<li class="skill-tag">Java</li>
|
|
<li class="skill-tag">C++</li>
|
|
<li class="skill-tag">JavaScript</li>
|
|
<li class="skill-tag">SQL</li>
|
|
<li class="skill-tag">Bash</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="skill-category">
|
|
<h4 class="h4 category-title">Data & Analytics</h4>
|
|
<ul class="skill-tags">
|
|
<li class="skill-tag">Pandas</li>
|
|
<li class="skill-tag">NumPy</li>
|
|
<li class="skill-tag">Power BI</li>
|
|
<li class="skill-tag">Tableau</li>
|
|
<li class="skill-tag">SQL Server</li>
|
|
<li class="skill-tag">BigQuery</li>
|
|
<li class="skill-tag">Apache Spark</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="skill-category">
|
|
<h4 class="h4 category-title">Testing & Development</h4>
|
|
<ul class="skill-tags">
|
|
<li class="skill-tag">Selenium</li>
|
|
<li class="skill-tag">Appium</li>
|
|
<li class="skill-tag">Jest</li>
|
|
<li class="skill-tag">Pytest</li>
|
|
<li class="skill-tag">Git</li>
|
|
<li class="skill-tag">GitHub Actions</li>
|
|
<li class="skill-tag">Agile/Scrum</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="skill-category">
|
|
<h4 class="h4 category-title">Web Development</h4>
|
|
<ul class="skill-tags">
|
|
<li class="skill-tag">React</li>
|
|
<li class="skill-tag">Node.js</li>
|
|
<li class="skill-tag">FastAPI</li>
|
|
<li class="skill-tag">Flask</li>
|
|
<li class="skill-tag">REST API</li>
|
|
<li class="skill-tag">HTML/CSS</li>
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
</article>
|
|
|
|
|
|
|
|
|
|
|
|
<!--
|
|
- #CONTACT
|
|
-->
|
|
|
|
<article class="contact" data-page="contact">
|
|
|
|
<header>
|
|
<h2 class="h2 article-title">Contact</h2>
|
|
</header>
|
|
|
|
<section class="mapbox" data-mapbox>
|
|
<figure>
|
|
<iframe
|
|
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d501725.3423783088!2d106.36555965781248!3d10.854477011432444!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x317529292e8d3dd1%3A0xf15f5aad773c112b!2zSOG7kyBDaMOtIE1pbmgsIFZp4buHdCBOYW0!5e0!3m2!1svi!2s!4v1730188800000!5m2!1svi!2s"
|
|
width="400" height="300" loading="lazy"></iframe>
|
|
</figure>
|
|
</section>
|
|
|
|
<section class="contact-form">
|
|
|
|
<h3 class="h3 form-title">Contact Form</h3>
|
|
|
|
<form action="#" class="form" data-form>
|
|
|
|
<div class="input-wrapper">
|
|
<input type="text" name="fullname" class="form-input" placeholder="Full name" required data-form-input>
|
|
|
|
<input type="email" name="email" class="form-input" placeholder="Email address" required data-form-input>
|
|
</div>
|
|
|
|
<textarea name="message" class="form-input" placeholder="Your Message" required data-form-input></textarea>
|
|
|
|
<button class="form-btn" type="submit" disabled data-form-btn>
|
|
<ion-icon name="paper-plane"></ion-icon>
|
|
<span>Send Message</span>
|
|
</button>
|
|
|
|
</form>
|
|
|
|
</section>
|
|
|
|
</article>
|
|
|
|
</div>
|
|
|
|
</main>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!--
|
|
- custom js link
|
|
-->
|
|
<script src="./assets/js/script.js"></script>
|
|
|
|
<!--
|
|
- ionicon link
|
|
-->
|
|
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
|
|
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
|
|
|
|
</body>
|
|
|
|
</html> |