<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Anvik Gupta</title>
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300&family=DM+Mono:wght@300;400&display=swap" rel="stylesheet" />
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
```
:root {
--cream: #f5f2ed;
--ink: #1a1916;
--muted: #8a8680;
--accent: #c8a96e;
--line: #e0dbd3;
}
body {
background: var(--cream);
color: var(--ink);
font-family: 'DM Mono', monospace;
font-weight: 300;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 40px 24px;
}
.card {
max-width: 480px;
width: 100%;
text-align: center;
}
/* ── PHOTO ── */
.photo-wrap {
width: 120px;
height: 120px;
margin: 0 auto 32px;
border-radius: 50%;
overflow: hidden;
border: 1px solid var(--line);
background: var(--line);
opacity: 0;
animation: fadeUp 0.8s ease 0.1s forwards;
}
.photo-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Placeholder shown when no image is loaded */
.photo-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Cormorant Garamond', serif;
font-size: 40px;
color: var(--muted);
}
/* ── NAME ── */
h1 {
font-family: 'Cormorant Garamond', serif;
font-size: 42px;
font-weight: 300;
letter-spacing: 0.02em;
line-height: 1;
margin-bottom: 8px;
opacity: 0;
animation: fadeUp 0.8s ease 0.25s forwards;
}
/* ── TAGLINE ── */
.tagline {
font-size: 12px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 28px;
opacity: 0;
animation: fadeUp 0.8s ease 0.4s forwards;
}
/* ── DIVIDER ── */
.rule {
border: none;
border-top: 1px solid var(--line);
margin: 0 auto 28px;
width: 40px;
opacity: 0;
animation: fadeUp 0.8s ease 0.5s forwards;
}
/* ── BIO ── */
.bio {
font-size: 13px;
line-height: 1.9;
color: var(--muted);
margin-bottom: 40px;
opacity: 0;
animation: fadeUp 0.8s ease 0.6s forwards;
}
/* ── AUDIO PLAYER ── */
.audio-section {
opacity: 0;
animation: fadeUp 0.8s ease 0.75s forwards;
}
.audio-label {
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 14px;
}
.player {
display: flex;
align-items: center;
gap: 14px;
background: white;
border: 1px solid var(--line);
border-radius: 40px;
padding: 12px 20px;
}
.play-btn {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--ink);
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background 0.2s, transform 0.15s;
}
.play-btn:hover { background: var(--accent); transform: scale(1.08); }
.play-btn svg { width: 12px; height: 12px; fill: white; margin-left: 2px; }
.play-btn.playing svg { margin-left: 0; }
.progress-wrap {
flex: 1;
height: 2px;
background: var(--line);
border-radius: 2px;
cursor: pointer;
position: relative;
}
.progress-bar {
height: 100%;
background: var(--accent);
border-radius: 2px;
width: 0%;
transition: width 0.1s linear;
pointer-events: none;
}
.time {
font-size: 10px;
letter-spacing: 0.08em;
color: var(--muted);
white-space: nowrap;
min-width: 36px;
text-align: right;
}
/* ── ICONS ROW ── */
.icons-row {
display: flex;
justify-content: center;
gap: 32px;
margin-bottom: 40px;
opacity: 0;
animation: fadeUp 0.8s ease 0.9s forwards;
}
.icon-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.icon-circle {
width: 44px;
height: 44px;
border-radius: 50%;
border: 1px solid var(--line);
background: white;
display: flex;
align-items: center;
justify-content: center;
transition: border-color 0.2s, transform 0.2s;
}
.icon-circle:hover {
border-color: var(--accent);
transform: translateY(-2px);
}
.icon-circle svg {
width: 18px;
height: 18px;
stroke: var(--muted);
fill: none;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
transition: stroke 0.2s;
}
.icon-circle:hover svg { stroke: var(--accent); }
.icon-subtext {
font-size: 10px;
letter-spacing: 0.06em;
color: var(--muted);
white-space: nowrap;
}
/* ── ANIMATIONS ── */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
```
</style>
</head>
<body>
<div class="card">
```
<!-- PHOTO -->
<div class="photo-wrap" id="photoWrap">
<!-- Replace the placeholder below with:
<img src="images/photo.jpg" alt="Anvik Gupta" />
once you have your photo ready -->
<div class="photo-placeholder">A</div>
</div>
<!-- NAME -->
<h1>Anvik Gupta</h1>
<p class="tagline">Says Hello</p>
<hr class="rule" />
<!-- BIO -->
<p class="bio">Anvik says hello.</p>
<!-- ICONS ROW -->
<div class="icons-row">
<!-- Calendar -->
<div class="icon-item">
<div class="icon-circle">
<svg viewBox="0 0 24 24">
<rect x="3" y="4" width="18" height="18" rx="2"/>
<line x1="3" y1="9" x2="21" y2="9"/>
<line x1="8" y1="2" x2="8" y2="6"/>
<line x1="16" y1="2" x2="16" y2="6"/>
</svg>
</div>
<span class="icon-subtext">February 12, 2026</span>
</div>
<!-- Clock -->
<div class="icon-item">
<div class="icon-circle">
<svg viewBox="0 0 24 24">
<circle cx="12" cy="12" r="9"/>
<polyline points="12,7 12,12 15,15"/>
</svg>
</div>
<span class="icon-subtext">8:01 AM</span>
</div>
<!-- Location Pin -->
<div class="icon-item">
<div class="icon-circle">
<svg 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-7z"/>
<circle cx="12" cy="9" r="2.5"/>
</svg>
</div>
<span class="icon-subtext">Scottsdale, Arizona</span>
</div>
</div>
<!-- AUDIO PLAYER -->
<div class="audio-section">
<p class="audio-label">▸ Voice intro</p>
<div class="player">
<button class="play-btn" id="playBtn" onclick="togglePlay()" aria-label="Play">
<svg id="playIcon" viewBox="0 0 10 12"><polygon points="0,0 10,6 0,12"/></svg>
</button>
<div class="progress-wrap" id="progressWrap" onclick="seek(event)">
<div class="progress-bar" id="progressBar"></div>
</div>
<span class="time" id="timeDisplay">0:00</span>
</div>
<!-- ⬇️ Replace "audio/hello.mp3" with your actual audio file path -->
<audio id="audioEl" src="audio/hello.mp3" preload="metadata"></audio>
</div>
```
</div>
<script>
const audio = document.getElementById('audioEl');
const playBtn = document.getElementById('playBtn');
const playIcon = document.getElementById('playIcon');
const progressBar = document.getElementById('progressBar');
const progressWrap= document.getElementById('progressWrap');
const timeDisplay = document.getElementById('timeDisplay');
const playShape = '<polygon points="0,0 10,6 0,12"/>';
const pauseShape = '<rect x="0" y="0" width="3.5" height="12"/><rect x="6.5" y="0" width="3.5" height="12"/>';
function togglePlay() {
if (audio.paused) {
audio.play();
playIcon.innerHTML = pauseShape;
playBtn.classList.add('playing');
} else {
audio.pause();
playIcon.innerHTML = playShape;
playBtn.classList.remove('playing');
}
}
audio.addEventListener('timeupdate', () => {
if (!audio.duration) return;
const pct = (audio.currentTime / audio.duration) * 100;
progressBar.style.width = pct + '%';
timeDisplay.textContent = fmt(audio.currentTime);
});
audio.addEventListener('ended', () => {
playIcon.innerHTML = playShape;
playBtn.classList.remove('playing');
progressBar.style.width = '0%';
timeDisplay.textContent = '0:00';
});
audio.addEventListener('loadedmetadata', () => {
timeDisplay.textContent = fmt(audio.duration);
});
function seek(e) {
const rect = progressWrap.getBoundingClientRect();
const ratio = (e.clientX - rect.left) / rect.width;
audio.currentTime = ratio * audio.duration;
}
function fmt(s) {
const m = Math.floor(s / 60);
const sec = Math.floor(s % 60).toString().padStart(2, '0');
return `${m}:${sec}`;
}
</script>
</body>
</html>