diff --git a/Dockerfile b/Dockerfile
index ec80847..5f955ab 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -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
diff --git a/index.html b/index.html
index 07ca2c9..d31ea73 100644
--- a/index.html
+++ b/index.html
@@ -2,8 +2,17 @@
-
+
omair@quikcue:~$
+
+
+
+
+
+
+
+
+
@@ -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; }
@@ -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)); }
diff --git a/nginx.conf b/nginx.conf
new file mode 100644
index 0000000..ff48f43
--- /dev/null
+++ b/nginx.conf
@@ -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;
+ }
+}