tirthhhh
Version:
Tirth Dhandhukia's terminal portfolio, viewable via npx.
271 lines (245 loc) • 8.47 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Tirth — CLI Portfolio</title>
<meta name="description" content="Terminal-style portfolio and npx command preview." />
<style>
:root{
--bg:#0f1724;
--card:#0b1220;
--muted:#94a3b8;
--accent:#e879f9;
--glass: rgba(255,255,255,0.03);
--mono: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", "Courier New", monospace;
}
html,body{height:100%}
body{
margin:0;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
background:
radial-gradient(1200px 800px at 10% 10%, rgba(232,121,249,0.08), transparent 10%),
radial-gradient(900px 600px at 90% 90%, rgba(59,130,246,0.03), transparent 10%),
var(--bg);
color:#e6eef8;
-webkit-font-smoothing:antialiased;
display:flex;
align-items:center;
justify-content:center;
padding:32px;
box-sizing:border-box;
}
.wrap{
max-width:980px;
width:100%;
display:grid;
grid-template-columns: 1fr 1fr;
gap:20px;
align-items:start;
}
/* card */
.card{
background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
border:1px solid rgba(255,255,255,0.04);
box-shadow: 0 6px 24px rgba(2,6,23,0.6);
border-radius:12px;
padding:20px;
overflow:hidden;
}
/* ASCII header (monospace) */
pre.ascii{
margin:0;
font-family: var(--mono);
font-size:13px;
line-height:13px;
color:var(--accent);
white-space:pre;
}
h1{
margin:8px 0 0 0;
font-size:20px;
letter-spacing: -0.02em;
}
.meta{ color:var(--muted); margin-top:6px; font-size:13px; }
.links{ margin-top:14px; display:flex; flex-wrap:wrap; gap:8px; }
.links a{
text-decoration:none;
background:var(--glass);
padding:8px 10px;
border-radius:8px;
color:#dbeafe;
font-size:13px;
border:1px solid rgba(255,255,255,0.03);
}
.npx{
margin-top:14px;
display:flex;
gap:8px;
align-items:center;
}
.npx .cmd{
background:#071029;
padding:10px 12px;
border-radius:8px;
font-family:var(--mono);
font-size:13px;
color:#bfe3ff;
border:1px solid rgba(255,255,255,0.03);
user-select:all;
}
.btn{
background:linear-gradient(90deg,#7c3aed,#06b6d4);
color:white;
border:none;
padding:9px 12px;
border-radius:8px;
cursor:pointer;
font-weight:600;
font-size:13px;
}
.btn.ghost{
background:transparent;
border:1px solid rgba(255,255,255,0.06);
color:var(--muted);
font-weight:600;
}
/* Terminal preview */
.terminal{
background:#060814;
border-radius:10px;
padding:14px;
font-family:var(--mono);
font-size:13px;
color:#ddeaf6;
border:1px solid rgba(255,255,255,0.03);
min-height:180px;
box-sizing:border-box;
line-height:1.4;
white-space:pre-wrap;
}
.muted{ color:var(--muted); }
footer.small{ margin-top:8px; color:var(--muted); font-size:12px; }
/* responsive */
@media (max-width:880px){
.wrap{ grid-template-columns:1fr; }
}
/* tiny toast */
.toast{
position:fixed;
right:20px;
bottom:20px;
background:#0b1220;
padding:10px 14px;
border-radius:8px;
color:#cfe9ff;
font-family:var(--mono);
box-shadow:0 6px 18px rgba(2,6,23,0.6);
border:1px solid rgba(255,255,255,0.03);
display:none;
z-index:999;
}
</style>
</head>
<body>
<div class="wrap">
<!-- left card: ASCII header + short info -->
<div class="card" aria-labelledby="profile">
<!-- ASCII header: plain string for HELLO -->
<pre class="ascii" aria-hidden="true">
_ _ _____ _ _ ___ ___
| | | || ____| | / \ | _ \ / _ \
| | | || _| | | / _ \ | _/| | | |
| |_| || |___ | |__ / ___ \ | | | |_| |
\___/ |_____||____/_/ \_\ |_| \___/
</pre>
<h1 id="profile">Tirth Dhandhukia</h1>
<div class="meta">Software Engineer — Web & AI — Data | Open to internships & freelance</div>
<div class="links" role="navigation" aria-label="social links">
<a href="https://github.com/yourusername" target="_blank" rel="noopener">GitHub</a>
<a href="https://yourwebsite.com" target="_blank" rel="noopener">Website</a>
<a href="mailto:you@example.com">Email</a>
<a href="https://linkedin.com/in/yourprofile" target="_blank" rel="noopener">LinkedIn</a>
</div>
<div class="npx" style="justify-content:space-between;">
<!-- Replace YOUR_NPM_CMD with your published npx command, e.g. "npx tirth-portfolio" -->
<div style="display:flex;gap:8px;align-items:center;">
<div class="cmd" id="npxCmd">npx YOUR_NPM_CMD</div>
<button class="btn" id="copyBtn" title="Copy npx command">Copy</button>
</div>
<div>
<button class="btn ghost" id="previewBtn" title="Toggle terminal preview">Toggle preview</button>
</div>
</div>
<footer class="small">Tip: publish the package to npm as <code>YOUR_NPM_CMD</code> to let people run it with <code>npx</code>.</footer>
</div>
<!-- right card: terminal preview -->
<div class="card">
<div id="terminal" class="terminal" aria-live="polite">
/---------------------------------------------\
| Tirth Dhandhukia • Software Engineer |
|---------------------------------------------|
| I build data-powered web apps and AI tools. |
| GitHub: https://github.com/yourusername |
| Website: https://yourwebsite.com |
| Email: you@example.com |
|---------------------------------------------|
| Skills: Node.js, Python, React, ML, SQL |
\---------------------------------------------/
Type "npx YOUR_NPM_CMD --help" for options.
</div>
<div style="display:flex;gap:8px;margin-top:12px;">
<button class="btn" id="openGit">Open repo</button>
<button class="btn ghost" id="viewRaw">View raw</button>
</div>
</div>
</div>
<div class="toast" id="toast">Copied!</div>
<script>
// Config: change these values (or replace in HTML) to match your project
const NPX_CMD = 'npx YOUR_NPM_CMD'; // <-- replace with e.g. 'npx tirth-portfolio'
const REPO_URL = 'https://github.com/yourusername/your-repo'; // <-- repo URL
const RAW_URL = REPO_URL + '/blob/main/index.js'; // example
// Wire up UI
const copyBtn = document.getElementById('copyBtn');
const npxCmdEl = document.getElementById('npxCmd');
const toast = document.getElementById('toast');
const previewBtn = document.getElementById('previewBtn');
const terminal = document.getElementById('terminal');
const openGit = document.getElementById('openGit');
const viewRaw = document.getElementById('viewRaw');
// Initialize
npxCmdEl.textContent = NPX_CMD;
terminal.dataset.visible = 'true';
copyBtn.addEventListener('click', async () => {
try {
await navigator.clipboard.writeText(NPX_CMD);
showToast('Copied: ' + NPX_CMD);
} catch (err) {
// fallback
const range = document.createRange();
range.selectNodeContents(npxCmdEl);
const sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
try { document.execCommand('copy'); showToast('Copied to clipboard'); } catch(e){ showToast('Press Ctrl+C to copy'); }
sel.removeAllRanges();
}
});
previewBtn.addEventListener('click', () => {
if (terminal.style.display === 'none') {
terminal.style.display = 'block';
} else {
terminal.style.display = 'none';
}
});
openGit.addEventListener('click', () => { window.open(REPO_URL, '_blank', 'noopener'); });
viewRaw.addEventListener('click', () => { window.open(RAW_URL, '_blank', 'noopener'); });
function showToast(text){
toast.textContent = text;
toast.style.display = 'block';
setTimeout(()=>{ toast.style.display='none'; }, 1700);
}
</script>
</body>
</html>