File size: 4,042 Bytes
3319e90 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description"
content="Contact Nguyen Tin Tin Do — Connect for AI, Machine Learning, Computer Vision, and Data Science collaborations." />
<meta name="keywords" content="AI, Machine Learning, Computer Vision, Data Science, Contact, Nguyen Tin Tin Do" />
<meta name="author" content="Nguyen Tin Tin Do" />
<title>Contact - Nguyen Tin Tin Do</title>
<link rel="stylesheet" href="style.css" />
<style>
.feedback-tab {
max-width: 500px;
margin: 20px auto;
padding: 30px;
border-radius: 12px;
text-align: center;
color: #fff;
font-family: 'Poppins', sans-serif;
animation: fadeIn 0.5s ease forwards;
display: none;
}
.success {
background: #00bcd4;
}
.error {
background: #e74c3c;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
</style>
</head>
<body>
<header>
<div class="container header-container">
<h1 class="logo">Contact</h1>
<nav class="navbar">
<a href="index.html" class="btn">Home</a>
<a href="about.html" class="btn">About</a>
<a href="work.html" class="btn">Experience</a>
<a href="education.html" class="btn">Education</a>
<a href="projects.html" class="btn">Projects</a>
<a href="contact.html" class="btn active">Contact</a>
</nav>
<button id="theme-toggle" class="theme-btn">🌙</button>
</div>
</header>
<main>
<section class="content fade-in">
<h2 class="section-title">📬 Get in Touch</h2>
<p class="section-subtitle">
Open to opportunities, collaborations, and conversations related to
<b>AI, Machine Learning, Computer Vision, and Data Science</b>.
</p>
<div class="contact-grid">
<div class="contact-info card">
<h3>Contact Information</h3>
<ul class="contact-list">
<li>📧 <span>Email:</span> <a href="mailto:ndo1@drew.edu">ndo1@drew.edu</a></li>
<li>💼 <span>LinkedIn:</span>
<a href="https://linkedin.com/in/nguyen-tin-tin-do" target="_blank">
linkedin.com/in/nguyen-tin-tin-do
</a>
</li>
<li>🐙 <span>GitHub:</span>
<a href="https://github.com/NguyenTin" target="_blank">github.com/NguyenTin</a>
</li>
<li>🎓 <span>Handshake:</span>
<a href="https://drew.joinhandshake.com/profiles/tintin" target="_blank">
drew.joinhandshake.com/profiles/tintin
</a>
</li>
<li>📱 <span>Phone:</span> (+1) 281-486-4220</li>
</ul>
</div>
<form id="contactForm" class="contact-form card" method="POST" action="contact.php">
<h3>Send a Message</h3>
<label for="name">Full Name</label>
<input type="text" id="name" name="name" required />
<label for="email">Email Address</label>
<input type="email" id="email" name="email" required />
<label for="message">Message</label>
<textarea id="message" name="message" rows="6" required></textarea>
<!-- CSRF Token -->
<input type="hidden" name="csrf_token" id="csrf_token">
<button type="submit" class="btn">Send Message</button>
</form>
<div id="feedback-tab" class="feedback-tab"></div>
</div>
</section>
</main>
<footer>
<p>© 2025 Nguyen Tin Tin Do — Portfolio · Artificial Intelligence & Deep Learning</p>
</footer>
<!-- LOAD SCRIPT AFTER HTML -->
<script src="script.js"></script>
</body>
</html> |