feat: responsive fixes for in-app browsers, /download shortlink, clickable resume links, OG meta tags
This commit is contained in:
@@ -1,4 +1,5 @@
|
||||
FROM nginx:alpine
|
||||
COPY nginx.conf /etc/nginx/conf.d/default.conf
|
||||
COPY index.html /usr/share/nginx/html/index.html
|
||||
COPY Omair_Saleh_Resume.pdf /usr/share/nginx/html/Omair_Saleh_Resume.pdf
|
||||
EXPOSE 80
|
||||
|
||||
+61
-7
@@ -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)); }
|
||||
|
||||
+14
@@ -0,0 +1,14 @@
|
||||
server {
|
||||
listen 80;
|
||||
server_name resume.quikcue.com;
|
||||
root /usr/share/nginx/html;
|
||||
index index.html;
|
||||
|
||||
location = /download {
|
||||
return 301 https://resume.quikcue.com/Omair_Saleh_Resume.pdf;
|
||||
}
|
||||
|
||||
location / {
|
||||
try_files $uri $uri/ =404;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user