Skip to content

Commit

Permalink
Update demo-myprofile.html
Browse files Browse the repository at this point in the history
  • Loading branch information
@ledangtrung
ledangtrung committed Dec 12, 2024
1 parent 60f26cb commit 33dce54
Showing 1 changed file with 43 additions and 252 deletions.
295 changes: 43 additions & 252 deletions html/demo-myprofile.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,298 +3,89 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Business Card for Trung Le - Lead Advisor at Real-Time Analytics">
<meta name="description" content="Business Card for Trung Le - Founder & CEO, RealTime">
<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&display=swap" rel="stylesheet">
<title>Business Card - Trung Le</title>
<style>
:root {
--primary-color: #00796b;
--secondary-color: #004d40;
--text-color: #333333;
--background-color: #e0f7fa;
--card-shadow: rgba(0, 0, 0, 0.1);
--transition-speed: 0.3s;
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Roboto', sans-serif;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(135deg, var(--background-color) 0%, #ffffff 100%);
padding: 20px;
}

.business-card {
width: 100%;
max-width: 800px;
background: #ffffff;
border-radius: 16px;
box-shadow: 0 8px 32px var(--card-shadow);
padding: 32px;
transition: transform var(--transition-speed) ease-in-out,
box-shadow var(--transition-speed) ease-in-out;
}

.business-card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 48px rgba(0, 0, 0, 0.2);
}

.card-content {
display: grid;
grid-template-columns: auto 1fr;
gap: 32px;
}

.left-column {
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
}

.profile-picture {
width: 150px;
height: 150px;
border-radius: 50%;
overflow: hidden;
border: 3px solid var(--primary-color);
transition: transform var(--transition-speed);
}

.profile-picture:hover {
transform: scale(1.05);
}

.profile-picture img {
width: 100%;
height: 100%;
object-fit: cover;
}

.qr-code {
width: 120px;
height: 120px;
background: #f5f5f5;
border-radius: 8px;
overflow: hidden;
border: 1px solid #eee;
}

.qr-code img {
width: 100%;
height: 100%;
object-fit: contain;
}

.details {
display: flex;
flex-direction: column;
gap: 16px;
}

.name {
font-size: 2em;
font-weight: 700;
color: var(--primary-color);
letter-spacing: 0.5px;
}

.title {
font-size: 1.2em;
color: var(--secondary-color);
font-weight: 500;
}

.note {
font-size: 1em;
line-height: 1.6;
color: var(--text-color);
background: var(--background-color);
padding: 16px;
border-radius: 8px;
border-left: 4px solid var(--primary-color);
margin: 16px 0;
}

.location {
font-size: 1em;
color: var(--text-color);
display: flex;
align-items: center;
gap: 8px;
}

.contact {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 12px;
margin-top: 16px;
}

.contact a {
color: var(--primary-color);
text-decoration: none;
font-size: 1em;
transition: color var(--transition-speed);
display: inline-flex;
align-items: center;
gap: 8px;
}

.contact a:hover {
color: var(--secondary-color);
text-decoration: underline;
}

.contact-item {
display: flex;
align-items: center;
gap: 8px;
padding: 8px;
background: #f5f5f5;
border-radius: 6px;
}

.contact-icon {
width: 20px;
height: 20px;
fill: var(--primary-color);
}

@media (max-width: 768px) {
.business-card {
padding: 24px;
}

.card-content {
grid-template-columns: 1fr;
}

.left-column {
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
}

.profile-picture {
width: 120px;
height: 120px;
}

.qr-code {
width: 100px;
height: 100px;
}

.name {
font-size: 1.6em;
}

.contact {
grid-template-columns: 1fr;
}
}

@media (max-width: 480px) {
.business-card {
padding: 16px;
}

.profile-picture {
width: 100px;
height: 100px;
}

.qr-code {
width: 80px;
height: 80px;
}

.name {
font-size: 1.4em;
}

.title {
font-size: 1.1em;
}

.note {
font-size: 0.9em;
padding: 12px;
}
}
</style>
<link rel="stylesheet" href="https://therealtimex.github.io/rtlibrary/css/rt-vcard.css">
</head>
<body>
<!-- SVG Sprite Sheet -->
<svg style="display: none;" xmlns="http://www.w3.org/2000/svg">
<symbol id="icon-phone" viewBox="0 0 24 24">
<path d="M6.62 10.79c1.44 2.83 3.76 5.15 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/>
</symbol>
<symbol id="icon-whatsapp" viewBox="0 0 24 24">
<path d="M16.75 13.96c.25.13.41.2.46.3.06.11.04.61-.21 1.18-.2.56-1.24 1.1-1.7 1.12-.46.02-.47.36-2.96-.73-2.49-1.09-3.99-3.75-4.11-3.92-.12-.17-.96-1.38-.92-2.61.05-1.22.69-1.8.95-2.04.24-.26.51-.29.68-.26h.47c.15 0 .36-.06.55.45l.69 1.87c.06.13.1.28.01.44l-.27.41-.39.42c-.12.12-.26.25-.12.5.12.26.62 1.09 1.32 1.78.91.88 1.71 1.17 1.95 1.3.24.14.39.12.54-.04l.81-.94c.19-.25.35-.19.58-.11l1.67.88"/>
</symbol>
<symbol id="icon-email" viewBox="0 0 24 24">
<path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
</symbol>
<symbol id="icon-linkedin" viewBox="0 0 24 24">
<path d="M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14m-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.32 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1 1.4 1.4v4.93h2.79M6.88 8.56a1.68 1.68 0 0 0 1.68-1.68c0-.93-.75-1.69-1.68-1.69a1.69 1.69 0 0 0-1.69 1.69c0 .93.76 1.68 1.69 1.68m1.39 9.94v-8.37H5.5v8.37h2.77z"/>
</symbol>
<symbol id="icon-website" viewBox="0 0 24 24">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/>
</symbol>
<symbol id="icon-location" viewBox="0 0 24 24">
<path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
</symbol>
</svg>

<main class="business-card">
<div class="card-content">
<div class="left-column">
<div class="profile-picture">
<img src="https://scholar.googleusercontent.com/citations?view_op=medium_photo&user=qWxaJXUAAAAJ&citpid=2"
alt="Trung Le's Profile Picture"
loading="lazy">
<img src="https://scholar.googleusercontent.com/citations?view_op=medium_photo&user=qWxaJXUAAAAJ&citpid=2" alt="Trung Le's Profile Picture" loading="lazy">
</div>
<div class="qr-code">
<img src="https://www.codeqrcode.com/blog/wp-content/uploads/2018/03/QR-code-on-BusinessCard-good-300x300.png"
alt="QR Code for contact information"
loading="lazy">
<img src="https://www.codeqrcode.com/blog/wp-content/uploads/2018/03/QR-code-on-BusinessCard-good-300x300.png" alt="QR Code for contact information" loading="lazy">
</div>
</div>
<div class="details">
<h1 class="name">Trung Le</h1>
<h2 class="title">Founder & CEO, RealTime</h2>
<p class="note">Building a Future Workplace focused on 80% AI Agent and 20% Human collaboration, specializing in transforming customer engagement through AI-human workplace platforms</p>
<div class="location">
<svg class="contact-icon" viewBox="0 0 24 24">
<path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
</svg>
Sunnyvale, California, United States
</div>

<div class="contact">
<div class="contact-item">
<svg class="contact-icon" viewBox="0 0 24 24">
<path d="M6.62 10.79c1.44 2.83 3.76 5.15 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/>
<svg class="contact-icon icon-location">
<use href="#icon-location"/>
</svg>
<span>Sunnyvale, California, United States</span>
</div>
<div class="contact-item">
<svg class="contact-icon icon-phone">
<use href="#icon-phone"/>
</svg>
<a href="tel:+15108506325">+1 (510) 850-6325</a>
</div>
<div class="contact-item">
<svg class="contact-icon" viewBox="0 0 24 24">
<path d="M16.75 13.96c.25.13.41.2.46.3.06.11.04.61-.21 1.18-.2.56-1.24 1.1-1.7 1.12-.46.02-.47.36-2.96-.73-2.49-1.09-3.99-3.75-4.11-3.92-.12-.17-.96-1.38-.92-2.61.05-1.22.69-1.8.95-2.04.24-.26.51-.29.68-.26h.47c.15 0 .36-.06.55.45l.69 1.87c.06.13.1.28.01.44l-.27.41-.39.42c-.12.12-.26.25-.12.5.12.26.62 1.09 1.32 1.78.91.88 1.71 1.17 1.95 1.3.24.14.39.12.54-.04l.81-.94c.19-.25.35-.19.58-.11l1.67.88M12 2a10 10 0 0 1 10 10 10 10 0 0 1-10 10c-1.97 0-3.8-.57-5.35-1.55L2 22l1.55-4.65A9.969 9.969 0 0 1 2 12 10 10 0 0 1 12 2m0 2a8 8 0 0 0-8 8c0 1.72.54 3.31 1.46 4.61L4.5 19.5l2.89-.96A7.95 7.95 0 0 0 12 20a8 8 0 0 0 8-8 8 8 0 0 0-8-8z"/>
<svg class="contact-icon icon-whatsapp">
<use href="#icon-whatsapp"/>
</svg>
<a href="https://wa.me/15108506325" target="_blank" rel="noopener noreferrer">WhatsApp</a>
</div>
<div class="contact-item">
<svg class="contact-icon" viewBox="0 0 24 24">
<path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
<svg class="contact-icon icon-email">
<use href="#icon-email"/>
</svg>
<a href="mailto:[email protected]">[email protected]</a>
</div>
<div class="contact-item">
<svg class="contact-icon" viewBox="0 0 24 24">
<path d="M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14m-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.32 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1 1.4 1.4v4.93h2.79M6.88 8.56a1.68 1.68 0 0 0 1.68-1.68c0-.93-.75-1.69-1.68-1.69a1.69 1.69 0 0 0-1.69 1.69c0 .93.76 1.68 1.69 1.68m1.39 9.94v-8.37H5.5v8.37h2.77z"/>
<svg class="contact-icon icon-linkedin">
<use href="#icon-linkedin"/>
</svg>
<a href="https://linkedin.com/in/trung-le-1bb5b41171" target="_blank" rel="noopener noreferrer">LinkedIn Profile</a>
</div>
<div class="contact-item">
<svg class="contact-icon" viewBox="0 0 24 24">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/>
<svg class="contact-icon icon-website">
<use href="#icon-website"/>
</svg>
<a href="https://aichat.realtimex.co" target="_blank" rel="noopener noreferrer">aichat.realtimex.co</a>
</div>
</div>
</div>

</div>
</main>
</body>
Expand Down

0 comments on commit 33dce54

Please sign in to comment.