portfolio: terminal Debian plein ecran, sans components — prompt/input dans le flux de sortie

public/css/portfolio.css

@@ -1,187 +1,112 @@
-/* Terminal portfolio — zektyc */
+/* Terminal portfolio — zektyc — console Debian plein ecran */
-:root {
+html,
-  --term-bg: #0b0e12;
+body {
-  --term-bg-bar: #151a20;
+  margin: 0;
-  --term-text: #c9d1d9;
+  padding: 0;
-  --term-dim: #8b949e;
+  height: 100%;
-  --term-green: #56d364;
+  background: #000;
-  --term-blue: #58a6ff;
-  --term-red: #ff6b6b;
-  --term-border: rgba(88, 166, 255, 0.18);
 }
 
-.portfolio-main {
+body {
-  max-width: 900px;
+  font-family: ui-monospace, "Cascadia Code", Menlo, Consolas, "DejaVu Sans Mono", monospace;
-  margin: 2rem auto;
+  color: #d8d8d8;
-  padding: 0 1.25rem;
-  flex: 1 0 auto;
-  width: 100%;
-}
-
-.portfolio-head {
-  margin-bottom: 1rem;
-}
-
-.portfolio-head h1 {
-  font-family: var(--font-head);
-  font-size: clamp(1.6rem, 4vw, 2.2rem);
-  margin-bottom: 0.25rem;
-}
-
-.portfolio-head p {
-  color: var(--text-muted);
 }
 
 .terminal {
-  --radius: 12px;
+  height: 100vh;
-  background: var(--term-bg);
+  height: 100dvh;
-  border: 1px solid var(--term-border);
-  border-radius: var(--radius);
   overflow: hidden;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
-  font-family: var(--font-mono);
-  font-size: 0.9rem;
-  line-height: 1.55;
-  width: 100%;
-}
-
-[data-theme="dark"] .terminal {
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7);
-}
-
-.terminal-bar {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  background: var(--term-bg-bar);
-  padding: 0.55rem 0.85rem;
-  border-bottom: 1px solid var(--term-border);
-  color: var(--term-dim);
-  font-size: 0.75rem;
-  user-select: none;
-}
-
-.terminal-dots {
-  display: flex;
-  gap: 0.35rem;
-}
-
-.terminal-dots i {
-  width: 0.7rem;
-  height: 0.7rem;
-  border-radius: 50%;
-  display: inline-block;
-}
-
-.terminal-dots i:nth-child(1) { background: #ff5f57; }
-.terminal-dots i:nth-child(2) { background: #febc2e; }
-.terminal-dots i:nth-child(3) { background: #28c840; }
-
-.terminal-title {
-  flex: 1;
-  text-align: center;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
 }
 
 .terminal-body {
-  padding: 0.9rem 1rem 1.2rem;
+  box-sizing: border-box;
-  height: min(62vh, 620px);
+  height: 100%;
   overflow-y: auto;
   overflow-x: hidden;
+  padding: 10px 14px 18px;
+  font-size: 15px;
+  line-height: 1.45;
+  scrollbar-width: thin;
+  scrollbar-color: #2a2a2a #000;
+}
+
+.terminal-body::-webkit-scrollbar {
+  width: 10px;
+}
+
+.terminal-body::-webkit-scrollbar-track {
+  background: #000;
+}
+
+.terminal-body::-webkit-scrollbar-thumb {
+  background: #2a2a2a;
+  border-radius: 5px;
 }
 
 .terminal-line {
   white-space: pre-wrap;
   word-break: break-word;
   overflow-wrap: anywhere;
-  min-height: 1.2em;
+  min-height: 1.25em;
 }
 
-.terminal-line .t-dim { color: var(--term-dim); }
+.term-line-input {
-.terminal-line .t-green { color: var(--term-green); }
+  display: flex;
-.terminal-line .t-blue { color: var(--term-blue); }
+  align-items: baseline;
-.terminal-line .t-red { color: var(--term-red); }
-
-.terminal-line a {
-  color: var(--term-blue);
-  text-decoration: underline;
-  text-underline-offset: 2px;
 }
 
 .term-ascii {
-  color: var(--term-green);
   white-space: pre;
-  line-height: 1.2;
+  line-height: 1.25;
-}
+  color: #4af626;
-
-.term-prompts {
-  margin-top: 0.6rem;
-}
-
-.term-input-row {
-  display: flex;
-  align-items: baseline;
-  gap: 0.45rem;
 }
 
 .term-prompt {
-  color: var(--term-green);
   white-space: nowrap;
 }
 
 .term-prompt .t-user {
-  color: var(--term-green);
+  color: #4af626;
 }
 
 .term-prompt .t-path {
-  color: var(--term-blue);
+  color: #5387ff;
 }
 
 .term-input {
   flex: 1;
   min-width: 0;
-  background: transparent;
+  margin: 0;
-  border: none;
-  outline: none;
-  color: var(--term-text);
-  font-family: inherit;
-  font-size: inherit;
-  line-height: inherit;
   padding: 0;
-  caret-color: var(--term-green);
+  border: 0;
+  outline: none;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  caret-color: #4af626;
 }
 
 .term-input::selection {
-  background: rgba(88, 166, 255, 0.35);
+  background: rgba(84, 135, 255, 0.4);
 }
 
-.term-cursor-blink {
+.terminal-line a {
-  animation: term-blink 1.1s steps(1) infinite;
+  color: #5387ff;
+  text-decoration: underline;
+  text-underline-offset: 2px;
 }
 
-@keyframes term-blink {
+.terminal-line .t-dim {
-  50% { opacity: 0; }
+  color: #9a9a9a;
+}
+
+.terminal-line .t-red {
+  color: #ff5252;
 }
 
 @media (max-width: 760px) {
-  .portfolio-main {
-    margin-top: 1.25rem;
-    padding: 0 0.6rem;
-  }
-
   .terminal-body {
-    height: min(70vh, 520px);
+    font-size: 16px;
-    font-size: 0.78rem;
+    padding: 8px 10px 14px;
-    padding: 0.7rem 0.75rem 1rem;
-  }
-
-  .terminal-bar {
-    padding: 0.45rem 0.6rem;
-  }
-
-  .term-ascii {
-    font-size: 0.72rem;
   }
 }

public/js/portfolio.js

@@ -4,14 +4,12 @@
   var FR = /^\/en(\/|$)/.test(location.pathname) ? false : true;
 
   var T = {
-    title: FR ? "dotriric@zektyc: ~ — bash" : "dotriric@zektyc: ~ — bash",
     boot: FR
       ? ["Debian GNU/Linux 12 (bookworm) tty1", "zektyc login: dotriric", "Password: ********", "Last login: a l'instant depuis votre navigateur", "Bienvenue sur le terminal de presentation de Riric.", "Tapez 'help' pour la liste des commandes."]
       : ["Debian GNU/Linux 12 (bookworm) tty1", "zektyc login: dotriric", "Password: ********", "Last login: right now from your browser", "Welcome to Riric's presentation terminal.", "Type 'help' for the list of commands."],
     promptUser: "dotriric",
     promptHost: "zektyc",
     unknown: function (c) { return FR ? ("bash: " + c + " : commande introuvable") : ("bash: " + c + ": command not found"); },
-    pwEmpty: FR ? "bash: passage en racine impossible : ne peut pas se connecter en tant que root" : "bash: cannot become root: cannot login as root",
     helpLines: FR
       ? [
           "Commandes disponibles :",
@@ -115,13 +113,10 @@
     contact: FR
       ? ["Email: riric65@protonmail.com", "Mastodon: @zektyc@piaille.fr", "Repond generalement en francais ou en anglais."]
       : ["Email: riric65@protonmail.com", "Mastodon: @zektyc@piaille.fr", "Usually replies in French or English."],
-    files: ["about.txt", "projects.txt", "contact.txt", ".bashrc", ".profile"],
-    contactFile: FR ? ["ouvrez contact.txt, ou tapez 'contact'"] : ["open contact.txt, or type 'contact'"],
     bashrc: FR ? ["# Config bash de dotriric", 'export PS1="dotriric@zektyc:~$ "', "alias ll='ls -alF'", "# Je n'aime pas le sucre."] : ["# dotriric's bash config", 'export PS1="dotriric@zektyc:~$ "', "alias ll='ls -alF'", "# I don't like sugar."],
     profile: FR ? ["# .profile — charge le bashrc", "source ~/.bashrc", "# Bienvenue."] : ["# .profile — loads bashrc", "source ~/.bashrc", "# Welcome."],
     sudo: FR ? ["dotriric n'est pas dans le fichier sudoers. Cet incident sera signale."] : ["dotriric is not in the sudoers file. This incident will be reported."],
     apt: FR ? ["Lecture des listes de paquets... Termine.", "Construction de l'arbre des dependances... Termine.", "0 paquet(s) mis a niveau."] : ["Reading package lists... Done.", "Building dependency tree... Done.", "0 packages can be upgraded."],
-    contactCmd: FR ? "Me contacter : taper 'contact'" : "To contact me: type 'contact'",
     shutdown: FR ? ["connexion fermee.", "terminal de presentation quitte — la page reste, evidemment. :)"] : ["connection closed.", "presentation terminal exited — the page stays, of course. :)"],
   };
 
@@ -130,21 +125,9 @@
   if (!root) return;
 
   var body = root.querySelector(".terminal-body");
-  var input = root.querySelector(".term-input");
   var history = [];
   var histIdx = -1;
-
+  var locked = false;
-  function makeLine(text, cls) {
-    var div = document.createElement("div");
-    div.className = "terminal-line";
-    if (cls) div.classList.add(cls);
-    if (typeof text === "string") {
-      div.textContent = text;
-    } else {
-      div.appendChild(text);
-    }
-    return div;
-  }
 
   function makeLink(text, href) {
     var a = document.createElement("a");
@@ -191,30 +174,90 @@
     body.scrollTop = body.scrollHeight;
   }
 
-  function promptLine() {
+  function promptEl() {
-    var p = document.createElement("div");
+    var p = document.createElement("span");
     p.className = "term-prompt";
     var sp = document.createElement("span");
     sp.className = "t-user";
     sp.textContent = T.promptUser + "@" + T.promptHost;
     var ct = document.createElement("span");
     ct.className = "t-path";
-    ct.textContent = ":" + "\u007e" + "$ ";
+    ct.textContent = ":~$ ";
     p.appendChild(sp);
     p.appendChild(ct);
     return p;
   }
 
-  function runCommand(raw) {
+  function currentPrompt() {
-    var cmd = raw.trim();
+    return body.querySelector(".prompt-line");
+  }
+
+  function newPrompt() {
     var line = document.createElement("div");
-    line.className = "terminal-line";
+    line.className = "terminal-line prompt-line term-line-input";
-    line.appendChild(promptLine());
+    line.appendChild(promptEl());
-    line.appendChild(document.createTextNode(raw));
+    var inp = document.createElement("input");
+    inp.type = "text";
+    inp.className = "term-input";
+    inp.setAttribute("autocomplete", "off");
+    inp.setAttribute("autocapitalize", "off");
+    inp.setAttribute("spellcheck", "false");
+    inp.setAttribute("aria-label", FR ? "Commande" : "Command");
+    line.appendChild(inp);
     body.appendChild(line);
+    bindInput(inp);
+    scrollDown();
+    return inp;
+  }
 
-    if (!cmd) { scrollDown(); return; }
+  function bindInput(inp) {
+    inp.addEventListener("keydown", function (e) {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        submit(inp);
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        if (history.length) {
+          histIdx = Math.max(0, histIdx - 1);
+          inp.value = history[histIdx] || "";
+        }
+      } else if (e.key === "ArrowDown") {
+        e.preventDefault();
+        if (history.length) {
+          histIdx = Math.min(history.length, histIdx + 1);
+          inp.value = histIdx >= history.length ? "" : history[histIdx];
+        }
+      }
+    });
+    inp.addEventListener("input", scrollDown);
+  }
 
+  function submit(inp) {
+    var raw = inp.value;
+    var line = inp.closest(".prompt-line");
+    var txt = document.createElement("span");
+    txt.textContent = raw;
+    inp.replaceWith(txt);
+
+    if (raw.trim()) history.push(raw);
+    histIdx = history.length;
+
+    var cmd = raw.trim();
+    if (cmd === "clear" || cmd === "cls") {
+      body.innerHTML = "";
+      newPrompt().focus();
+      return;
+    }
+
+    if (cmd) runCommand(cmd);
+
+    if (locked) return;
+
+    newPrompt().focus();
+    scrollDown();
+  }
+
+  function runCommand(cmd) {
     var parts = cmd.split(/[ \t]+/);
     var c = parts[0].toLowerCase();
     var arg = parts.slice(1).join(" ");
@@ -223,9 +266,6 @@
       case c === "help" || c === "h" || c === "?":
         print(T.helpLines);
         break;
-      case c === "clear" || c === "cls":
-        body.innerHTML = "";
-        break;
       case c === "whoami":
         print("dotriric");
         break;
@@ -298,8 +338,7 @@
         break;
       case c === "exit" || c === "logout" || c === "quit":
         print(T.shutdown);
-        input.disabled = true;
+        locked = true;
-        input.setAttribute("placeholder", "");
         break;
       case c === "echo":
         print(arg || "");
@@ -310,45 +349,21 @@
       default:
         print(T.unknown(c));
     }
-    scrollDown();
   }
 
-  function submit() {
-    var v = input.value;
-    if (v.trim()) history.push(v);
-    histIdx = history.length;
-    runCommand(v);
-    input.value = "";
-  }
-
-  input.addEventListener("keydown", function (e) {
-    if (e.key === "Enter") {
-      e.preventDefault();
-      submit();
-    } else if (e.key === "ArrowUp") {
-      e.preventDefault();
-      if (history.length) {
-        histIdx = Math.max(0, histIdx - 1);
-        input.value = history[histIdx] || "";
-      }
-    } else if (e.key === "ArrowDown") {
-      e.preventDefault();
-      if (history.length) {
-        histIdx = Math.min(history.length, histIdx + 1);
-        input.value = histIdx >= history.length ? "" : history[histIdx];
-      }
-    }
-  });
-
   root.addEventListener("click", function () {
-    if (!input.disabled) input.focus();
+    var ln = currentPrompt();
+    if (ln) {
+      var inp = ln.querySelector(".term-input");
+      if (inp && !inp.disabled) inp.focus();
+    }
   });
 
   (function boot() {
     printAscii(["", T.boot.join("\n"), ""]);
+    var inp = newPrompt();
+    setTimeout(function () {
+      inp.focus();
+    }, 50);
   })();
-
-  setTimeout(function () {
-    input.focus();
-  }, 50);
 })();

public/portfolio/en/index.html

@@ -5,16 +5,16 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="description" content="Riric (DotRiric)'s portfolio, founder of Zektyc — an interactive Linux terminal to discover his background, projects and skills." />
     <meta name="robots" content="index, follow" />
-    <title>Portfolio · Zektyc</title>
+    <title>Riric · portfolio — Debian terminal</title>
     <link rel="canonical" href="https://riricdev.tail5ea5cd.ts.net/en/portfolio" />
     <link rel="alternate" hreflang="fr" href="https://riricdev.tail5ea5cd.ts.net/fr/portfolio" />
     <link rel="alternate" hreflang="en" href="https://riricdev.tail5ea5cd.ts.net/en/portfolio" />
     <link rel="alternate" hreflang="x-default" href="https://riricdev.tail5ea5cd.ts.net/fr/portfolio" />
-    <meta name="theme-color" content="#070a0f" />
+    <meta name="theme-color" content="#05070a" />
     <meta property="og:type" content="website" />
     <meta property="og:site_name" content="Zektyc" />
-    <meta property="og:title" content="Portfolio · Zektyc" />
+    <meta property="og:title" content="Riric · portfolio — Debian terminal" />
-    <meta property="og:description" content="Riric (DotRiric), founder of Zektyc — discover him in an interactive Linux terminal." />
+    <meta property="og:description" content="Riric (DotRiric), founder of Zektyc — discover him in a real Debian terminal." />
     <meta property="og:url" content="https://riricdev.tail5ea5cd.ts.net/en/portfolio" />
     <meta property="og:image" content="https://riricdev.tail5ea5cd.ts.net/og-image.png" />
     <meta property="og:locale" content="en_US" />
@@ -22,35 +22,12 @@
     <meta name="twitter:card" content="summary_large_image" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <link rel="shortcut icon" href="/favicon.ico" />
-    <link rel="stylesheet" href="/css/style.css?v=8" />
+    <link rel="stylesheet" href="/css/portfolio.css?v=3" />
-    <link rel="stylesheet" href="/css/portfolio.css?v=2" />
   </head>
   <body>
-    <header id="h"></header>
+    <div class="terminal" id="terminal" role="log" aria-live="polite" aria-label="Interactive terminal: type help">
-
+      <div class="terminal-body"></div>
-    <main class="portfolio-main" id="main">
+    </div>
-      <div class="portfolio-head">
+    <script src="/js/portfolio.js?v=3" defer></script>
-        <h1>Portfolio — Riric&nbsp;(DotRiric)</h1>
-        <p>CEO · Founder · Architect — discover my world in a Debian terminal.</p>
-      </div>
-
-      <div class="terminal" id="terminal" role="log" aria-live="polite" aria-label="Interactive terminal: type help">
-        <div class="terminal-bar">
-          <span class="terminal-dots"><i></i><i></i><i></i></span>
-          <span class="terminal-title">dotriric@zektyc: ~</span>
-        </div>
-        <div class="terminal-body"></div>
-        <div class="terminal-input-row">
-          <span class="term-prompt"><span class="t-user">dotriric@zektyc</span><span class="t-path">:~$</span></span>
-          <input class="term-input" type="text" autocomplete="off" autocapitalize="off" spellcheck="false" aria-label="Command" />
-        </div>
-      </div>
-    </main>
-
-    <footer id="f"></footer>
-    <script src="/js/theme.js" defer></script>
-    <script src="/js/global.js?v=1" defer></script>
-    <script src="/js/components.js?v=8" defer></script>
-    <script src="/js/portfolio.js?v=2" defer></script>
   </body>
 </html>

public/portfolio/index.html

@@ -5,16 +5,16 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="description" content="Portfolio de Riric (DotRiric), fondateur de Zektyc — un terminal Linux interactif pour découvrir son parcours, ses projets et ses compétences." />
     <meta name="robots" content="index, follow" />
-    <title>Portfolio · Zektyc</title>
+    <title>Riric · portfolio — terminal Debian</title>
     <link rel="canonical" href="https://riricdev.tail5ea5cd.ts.net/fr/portfolio" />
     <link rel="alternate" hreflang="fr" href="https://riricdev.tail5ea5cd.ts.net/fr/portfolio" />
     <link rel="alternate" hreflang="en" href="https://riricdev.tail5ea5cd.ts.net/en/portfolio" />
     <link rel="alternate" hreflang="x-default" href="https://riricdev.tail5ea5cd.ts.net/fr/portfolio" />
-    <meta name="theme-color" content="#070a0f" />
+    <meta name="theme-color" content="#05070a" />
     <meta property="og:type" content="website" />
     <meta property="og:site_name" content="Zektyc" />
-    <meta property="og:title" content="Portfolio · Zektyc" />
+    <meta property="og:title" content="Riric · portfolio — terminal Debian" />
-    <meta property="og:description" content="Riric (DotRiric), fondateur de Zektyc — découvrez-le dans un terminal Linux interactif." />
+    <meta property="og:description" content="Riric (DotRiric), fondateur de Zektyc — découvrez-le dans un vrai terminal Debian." />
     <meta property="og:url" content="https://riricdev.tail5ea5cd.ts.net/fr/portfolio" />
     <meta property="og:image" content="https://riricdev.tail5ea5cd.ts.net/og-image.png" />
     <meta property="og:locale" content="fr_FR" />
@@ -22,35 +22,12 @@
     <meta name="twitter:card" content="summary_large_image" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <link rel="shortcut icon" href="/favicon.ico" />
-    <link rel="stylesheet" href="/css/style.css?v=8" />
+    <link rel="stylesheet" href="/css/portfolio.css?v=3" />
-    <link rel="stylesheet" href="/css/portfolio.css?v=2" />
   </head>
   <body>
-    <header id="h"></header>
+    <div class="terminal" id="terminal" role="log" aria-live="polite" aria-label="Terminal interactif : tapez help">
-
+      <div class="terminal-body"></div>
-    <main class="portfolio-main" id="main">
+    </div>
-      <div class="portfolio-head">
+    <script src="/js/portfolio.js?v=3" defer></script>
-        <h1>Portfolio — Riric&nbsp;(DotRiric)</h1>
-        <p>CEO · Fondateur · Architecte — découvrez mon monde dans un terminal Debian.</p>
-      </div>
-
-      <div class="terminal" id="terminal" role="log" aria-live="polite" aria-label="Terminal interactif : tapez help">
-        <div class="terminal-bar">
-          <span class="terminal-dots"><i></i><i></i><i></i></span>
-          <span class="terminal-title">dotriric@zektyc: ~</span>
-        </div>
-        <div class="terminal-body"></div>
-        <div class="terminal-input-row">
-          <span class="term-prompt"><span class="t-user">dotriric@zektyc</span><span class="t-path">:~$</span></span>
-          <input class="term-input" type="text" autocomplete="off" autocapitalize="off" spellcheck="false" aria-label="Commande" />
-        </div>
-      </div>
-    </main>
-
-    <footer id="f"></footer>
-    <script src="/js/theme.js" defer></script>
-    <script src="/js/global.js?v=1" defer></script>
-    <script src="/js/components.js?v=8" defer></script>
-    <script src="/js/portfolio.js?v=2" defer></script>
   </body>
 </html>