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
Dockerfile
+1
View File
@@ -1,4 +1,5 @@
FROM nginx:alpine FROM nginx:alpine
COPY nginx.conf /etc/nginx/conf.d/default.conf
COPY index.html /usr/share/nginx/html/index.html COPY index.html /usr/share/nginx/html/index.html
COPY Omair_Saleh_Resume.pdf /usr/share/nginx/html/Omair_Saleh_Resume.pdf COPY Omair_Saleh_Resume.pdf /usr/share/nginx/html/Omair_Saleh_Resume.pdf
EXPOSE 80 EXPOSE 80
index.html
+61 -7
View File
@@ -2,8 +2,17 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <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> <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.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <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"> <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); font-size: var(--fs);
line-height: 1.6; line-height: 1.6;
overflow: hidden; 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 { #terminal {
display: flex; display: flex;
flex-direction: column; 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; max-width: 900px;
margin: 0 auto; margin: 0 auto;
padding: 0 12px 12px; padding: 0 12px 12px;
} }
@supports (height: 100dvh) {
#terminal { height: 100dvh; }
}
/* ── Top bar ── */ /* ── Top bar ── */
#topbar { #topbar {
display: flex; display: flex;
@@ -149,7 +166,9 @@
#dino-canvas { #dino-canvas {
display: block; display: block;
width: 100%; width: 100%;
height: 120px; max-width: 800px;
height: auto;
aspect-ratio: 800 / 120;
image-rendering: pixelated; image-rendering: pixelated;
} }
#dino-score-bar { #dino-score-bar {
@@ -181,11 +200,28 @@
/* Scrollbar for Firefox */ /* Scrollbar for Firefox */
#output { scrollbar-width: thin; scrollbar-color: #222 transparent; } #output { scrollbar-width: thin; scrollbar-color: #222 transparent; }
/* Mobile touch — larger tap target for input */ /* Mobile + in-app browser fixes */
@media (max-width: 600px) { @media (max-width: 600px) {
:root { --fs: 13px; }
#topbar-title { display: none; } #topbar-title { display: none; }
#terminal { padding: 0 8px 8px; } #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> </style>
</head> </head>
<body> <body>
@@ -865,15 +901,33 @@ inp.addEventListener('keydown', e => {
} }
}); });
// Keep focus on input // Keep focus on input — works in all in-app browsers (LinkedIn, WhatsApp, IG, Twitter WebViews)
document.addEventListener('click', () => { function focusInput() {
if (!dinoActive) inp.focus(); 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 => { document.addEventListener('keydown', e => {
if (!dinoActive && document.activeElement !== inp && e.key.length === 1) { if (!dinoActive && document.activeElement !== inp && e.key.length === 1) {
inp.focus(); 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 ─────────────────── */ /* ─────────────────────────── Boot sequence ─────────────────── */
function sleep(ms) { return new Promise(r => setTimeout(r, ms)); } function sleep(ms) { return new Promise(r => setTimeout(r, ms)); }
nginx.conf
+14
View File
@@ -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;
}
}