quikcue/resume
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: responsive fixes for in-app browsers, /download shortlink, clickable resume links, OG meta tags

Browse Source
This commit is contained in:
Omair Saleh
2026-04-17 02:25:18 +08:00
parent a05e75baae
commit 5397ceef15
3 changed files with 76 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+61 -7
View File
@@ -2,8 +2,17 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
<title>omair@quikcue:~$</title>
<meta name="description" content="Omair Saleh — Senior Full-Stack Engineer. 12 years, 4,700+ commits, 29+ production apps. Interactive terminal portfolio.">
<meta property="og:title" content="Omair Saleh — Terminal Portfolio">
<meta property="og:description" content="Senior Full-Stack Engineer. 12 years building payment platforms, logistics systems, and AI workflows. Type 'help' to explore.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://resume.quikcue.com">
<meta name="twitter:card" content="summary">
<meta name="theme-color" content="#0a0a0a">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<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=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
@@ -31,17 +40,25 @@
font-size: var(--fs);
line-height: 1.6;
overflow: hidden;
/* Fix iOS safe area */
padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
#terminal {
display: flex;
flex-direction: column;
height: 100vh;
/* dvh fixes in-app browser address bar issues (iOS Safari, Chrome, WebView) */
height: 100dvh;
height: 100vh; /* fallback for older browsers */
max-width: 900px;
margin: 0 auto;
padding: 0 12px 12px;
}
@supports (height: 100dvh) {
#terminal { height: 100dvh; }
}
/* ── Top bar ── */
#topbar {
display: flex;
@@ -149,7 +166,9 @@
#dino-canvas {
display: block;
width: 100%;
height: 120px;
max-width: 800px;
height: auto;
aspect-ratio: 800 / 120;
image-rendering: pixelated;
}
#dino-score-bar {
@@ -181,11 +200,28 @@
/* Scrollbar for Firefox */
#output { scrollbar-width: thin; scrollbar-color: #222 transparent; }
/* Mobile touch — larger tap target for input */
/* Mobile + in-app browser fixes */
@media (max-width: 600px) {
:root { --fs: 13px; }
#topbar-title { display: none; }
#terminal { padding: 0 8px 8px; }
#input-row { padding-bottom: 6px; }
/* Shorten prompt on tiny screens */
#prompt-label span.at { font-size: 0; }
#prompt-label span.at::after { content: 'omr'; font-size: var(--fs); }
/* Ensure lines never overflow */
.line { font-size: 12px; overflow-x: auto; }
/* Dino container responsive */
#dino-container { padding: 8px; }
}
@media (max-width: 380px) {
:root { --fs: 11.5px; }
.line { font-size: 11px; }
}
/* Tap anywhere to focus input (in-app browsers don't auto-focus well) */
body { cursor: text; -webkit-tap-highlight-color: transparent; }
</style>
</head>
<body>
@@ -865,15 +901,33 @@ inp.addEventListener('keydown', e => {
}
});
// Keep focus on input
document.addEventListener('click', () => {
if (!dinoActive) inp.focus();
// Keep focus on input — works in all in-app browsers (LinkedIn, WhatsApp, IG, Twitter WebViews)
function focusInput() {
if (!dinoActive && !inp.disabled) {
inp.focus({ preventScroll: true });
}
}
document.addEventListener('click', focusInput);
document.addEventListener('touchend', e => {
// In-app browsers need touchend, not click, for keyboard to appear
if (e.target.tagName !== 'A') focusInput();
});
document.addEventListener('keydown', e => {
if (!dinoActive && document.activeElement !== inp && e.key.length === 1) {
inp.focus();
}
});
// Re-focus when returning to tab or when in-app browser regains focus
document.addEventListener('visibilitychange', () => {
if (!document.hidden) setTimeout(focusInput, 100);
});
window.addEventListener('focus', () => setTimeout(focusInput, 100));
// Fix iOS virtual keyboard pushing viewport — scroll output to bottom after resize
let resizeTimer;
window.addEventListener('resize', () => {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(() => scrollBottom(), 150);
});
/* ─────────────────────────── Boot sequence ─────────────────── */
function sleep(ms) { return new Promise(r => setTimeout(r, ms)); }