refacto: vide-coding to get a terminal look
This commit is contained in:
Gauvain B
33
content/about.md
Normal file
33
content/about.md
Normal file
@@ -0,0 +1,33 @@
|
|||||||
|
# About Me
|
||||||
|
|
||||||
|
Hello — I'm **Gauvain Boiché**, a computer science student and developer based in France.
|
||||||
|
|
||||||
|
I build things at the intersection of systems programming, web technology, and good design. This terminal is itself a small project: a static portfolio that navigates like a Unix filesystem.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Background
|
||||||
|
|
||||||
|
I started programming by taking apart old software and curiosity about how things work at a low level. That thread has run through everything since — from writing bare-metal code to designing distributed systems to crafting interfaces that feel just right.
|
||||||
|
|
||||||
|
## Education
|
||||||
|
|
||||||
|
- **Master's in Computer Science** — in progress
|
||||||
|
- Coursework: algorithms & complexity, operating systems, distributed computing, machine learning fundamentals
|
||||||
|
- Strong academic record with particular interest in systems and compilers
|
||||||
|
|
||||||
|
## What Drives Me
|
||||||
|
|
||||||
|
> The best technology disappears. You stop thinking about the tool and start thinking about the problem.
|
||||||
|
|
||||||
|
I care deeply about **correctness**, **performance**, and **clarity** — in code, in interfaces, and in communication. I prefer to understand things from first principles rather than cargo-cult patterns.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Outside the Terminal
|
||||||
|
|
||||||
|
When I'm not at a keyboard, I'm probably reading about computing history, tinkering with vintage hardware, or trying to convince someone that Vim is not that complicated.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
*Navigate with ↑↓ and ENTER — press Q or ESC to go back.*
|
||||||
40
content/contact.md
Normal file
40
content/contact.md
Normal file
@@ -0,0 +1,40 @@
|
|||||||
|
# Contact
|
||||||
|
|
||||||
|
I'm open to collaborations, internship opportunities, and interesting conversations about technology.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## How to Reach Me
|
||||||
|
|
||||||
|
**Email**
|
||||||
|
`gauvain.boiche [at] gmail [dot] com`
|
||||||
|
|
||||||
|
**GitHub**
|
||||||
|
`github.com/gauvainboiche`
|
||||||
|
|
||||||
|
**LinkedIn**
|
||||||
|
`linkedin.com/in/gauvainboiche`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## What I'm Looking For
|
||||||
|
|
||||||
|
- **Internships / apprenticeships** in systems engineering, backend development, or ML infrastructure
|
||||||
|
- **Open source collaboration** — especially on compilers, tools, or developer infrastructure
|
||||||
|
- **Freelance work** — web applications, APIs, automation scripts
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Response Time
|
||||||
|
|
||||||
|
I typically respond within 48 hours. If you're reaching out about a time-sensitive opportunity, please mention it in the subject line.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## A Note on This Site
|
||||||
|
|
||||||
|
This portfolio is intentionally low-tech: a single HTML file, one CSS file, one JS file, and a folder of Markdown. No framework, no build step, no tracking. The source is on GitHub if you're curious.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
*Press Q or ESC to return.*
|
||||||
42
content/manifest.json
Normal file
42
content/manifest.json
Normal file
@@ -0,0 +1,42 @@
|
|||||||
|
{
|
||||||
|
"name": "~",
|
||||||
|
"type": "dir",
|
||||||
|
"children": [
|
||||||
|
{
|
||||||
|
"name": "about.md",
|
||||||
|
"type": "file",
|
||||||
|
"path": "content/about.md"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "skills.md",
|
||||||
|
"type": "file",
|
||||||
|
"path": "content/skills.md"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "projects",
|
||||||
|
"type": "dir",
|
||||||
|
"children": [
|
||||||
|
{
|
||||||
|
"name": "web_dev.md",
|
||||||
|
"type": "file",
|
||||||
|
"path": "content/projects/web_dev.md"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "systems.md",
|
||||||
|
"type": "file",
|
||||||
|
"path": "content/projects/systems.md"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "ai_ml.md",
|
||||||
|
"type": "file",
|
||||||
|
"path": "content/projects/ai_ml.md"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "contact.md",
|
||||||
|
"type": "file",
|
||||||
|
"path": "content/contact.md"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
71
content/projects/ai_ml.md
Normal file
71
content/projects/ai_ml.md
Normal file
@@ -0,0 +1,71 @@
|
|||||||
|
# AI & Machine Learning Projects
|
||||||
|
|
||||||
|
Experiments at the boundary of classical algorithms and modern deep learning.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Handwritten Digit Classifier
|
||||||
|
|
||||||
|
A convolutional neural network trained on MNIST, built from scratch using **PyTorch** without relying on pretrained weights.
|
||||||
|
|
||||||
|
**Architecture:**
|
||||||
|
|
||||||
|
```
|
||||||
|
Input (1×28×28)
|
||||||
|
→ Conv2d(1, 32, 3) + ReLU + MaxPool
|
||||||
|
→ Conv2d(32, 64, 3) + ReLU + MaxPool
|
||||||
|
→ Dropout(0.25)
|
||||||
|
→ Linear(64×5×5 → 128) + ReLU
|
||||||
|
→ Dropout(0.5)
|
||||||
|
→ Linear(128 → 10)
|
||||||
|
→ LogSoftmax
|
||||||
|
```
|
||||||
|
|
||||||
|
**Results:** 99.2 % test accuracy after 10 epochs on a single CPU.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Sentence Similarity Engine
|
||||||
|
|
||||||
|
A small semantic search tool that encodes sentences into embeddings and retrieves the most similar entries from a knowledge base.
|
||||||
|
|
||||||
|
**Approach:**
|
||||||
|
|
||||||
|
- Sentence embeddings via a fine-tuned BERT variant (`sentence-transformers`)
|
||||||
|
- FAISS index for approximate nearest-neighbour search at scale
|
||||||
|
- CLI interface — `search.py "your query"`
|
||||||
|
|
||||||
|
**Use case:** powering a private personal knowledge base search over Markdown notes.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Reinforcement Learning: Grid World
|
||||||
|
|
||||||
|
A from-scratch implementation of Q-Learning and SARSA applied to a configurable grid-world environment.
|
||||||
|
|
||||||
|
**Implemented:**
|
||||||
|
|
||||||
|
- Tabular Q-learning with ε-greedy exploration
|
||||||
|
- SARSA (on-policy variant)
|
||||||
|
- Policy iteration and value iteration for comparison
|
||||||
|
- Visualiser showing the learned value function as a heatmap
|
||||||
|
|
||||||
|
**Written in pure Python + NumPy** — no RL libraries — for learning purposes.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Anomaly Detection on Time Series
|
||||||
|
|
||||||
|
A pipeline for detecting anomalies in server metric data (CPU, memory, latency).
|
||||||
|
|
||||||
|
**Methods compared:**
|
||||||
|
|
||||||
|
- Z-score baseline
|
||||||
|
- Isolation Forest
|
||||||
|
- LSTM autoencoder (reconstruction error threshold)
|
||||||
|
|
||||||
|
**Outcome:** LSTM autoencoder outperformed statistical methods by ~18 % precision on labelled incidents from a personal homelab dataset.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
*Press Q or ESC to return.*
|
||||||
69
content/projects/systems.md
Normal file
69
content/projects/systems.md
Normal file
@@ -0,0 +1,69 @@
|
|||||||
|
# Systems Programming Projects
|
||||||
|
|
||||||
|
Low-level work: operating systems, compilers, networking, and performance engineering.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Tiny HTTP/1.1 Server (C)
|
||||||
|
|
||||||
|
A from-scratch HTTP server written in C that handles concurrent connections using `epoll` on Linux.
|
||||||
|
|
||||||
|
**What it does:**
|
||||||
|
|
||||||
|
- Serves static files with correct MIME types
|
||||||
|
- Handles `keep-alive` connections
|
||||||
|
- Parses request headers manually (no third-party parser)
|
||||||
|
- ~1,200 lines of C — intentionally minimal
|
||||||
|
|
||||||
|
**Interesting problems solved:**
|
||||||
|
|
||||||
|
- Non-blocking I/O with an event loop
|
||||||
|
- Incremental parsing of chunked request bodies
|
||||||
|
- Safe path traversal (no `../` escapes from the document root)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Shell Implementation (C)
|
||||||
|
|
||||||
|
A POSIX-compatible shell (`mysh`) supporting pipelines, redirections, background jobs, and a small built-in set.
|
||||||
|
|
||||||
|
**Supported features:**
|
||||||
|
|
||||||
|
- Pipelines: `cmd1 | cmd2 | cmd3`
|
||||||
|
- I/O redirections: `>`, `>>`, `<`, `2>`
|
||||||
|
- Background jobs: `cmd &`
|
||||||
|
- Job control: `fg`, `bg`, `jobs`
|
||||||
|
- Signal handling (SIGINT, SIGTSTP, SIGHUP)
|
||||||
|
|
||||||
|
**Focus areas:** `fork/exec` model, `waitpid`, file descriptor management, signal masking.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Memory Allocator
|
||||||
|
|
||||||
|
A drop-in `malloc` replacement using `mmap`-backed free lists with coalescing.
|
||||||
|
|
||||||
|
**Algorithms implemented:**
|
||||||
|
|
||||||
|
- First-fit and best-fit strategies (switchable at compile time)
|
||||||
|
- Boundary-tag coalescing to reduce fragmentation
|
||||||
|
- Thread-local caches for small allocations (reduces lock contention)
|
||||||
|
|
||||||
|
**Benchmarked** against `glibc malloc` on synthetic workloads — within 2× for mixed-size allocations.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Bytecode Interpreter (Python → C)
|
||||||
|
|
||||||
|
A small virtual machine that executes a simple bytecode format, written in C. The front-end compiler is written in Python and produces `.bco` files.
|
||||||
|
|
||||||
|
**VM features:**
|
||||||
|
|
||||||
|
- Stack-based architecture (inspired by CPython)
|
||||||
|
- 30 opcodes: arithmetic, comparisons, jumps, function calls, closures
|
||||||
|
- Mark-and-sweep garbage collector
|
||||||
|
- Disassembler for debugging (`--disasm` flag)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
*Press Q or ESC to return.*
|
||||||
56
content/projects/web_dev.md
Normal file
56
content/projects/web_dev.md
Normal file
@@ -0,0 +1,56 @@
|
|||||||
|
# Web Development Projects
|
||||||
|
|
||||||
|
A selection of web projects — from small tools to more complete applications.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Terminal Portfolio *(this site)*
|
||||||
|
|
||||||
|
> The page you are currently reading was itself a project.
|
||||||
|
|
||||||
|
A fully static portfolio designed to look and behave like a Unix terminal. No framework, no build step — just HTML, CSS, and vanilla JavaScript.
|
||||||
|
|
||||||
|
**Key features:**
|
||||||
|
|
||||||
|
- CRT aesthetics: scanlines, flicker animation, bloom/glow on text
|
||||||
|
- Blinking rectangular cursor that follows mouse clicks
|
||||||
|
- Markdown content tree loaded from a manifest — add `.md` files without touching `index.html`
|
||||||
|
- Keyboard navigation (arrows, Enter, Escape, Q) + mouse
|
||||||
|
- Dynamically sized terminal window (responds to viewport changes)
|
||||||
|
|
||||||
|
**Stack:** HTML · CSS (animations, custom properties) · JavaScript (ES2020) · marked.js
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Personal Finance Tracker
|
||||||
|
|
||||||
|
A small single-page application to track income and expenses with monthly breakdowns.
|
||||||
|
|
||||||
|
**Highlights:**
|
||||||
|
|
||||||
|
- No backend — all data stored in `localStorage` with a clean JSON schema
|
||||||
|
- CSV import/export for moving data to spreadsheets
|
||||||
|
- Chart visualisation using the Canvas API (no libraries)
|
||||||
|
- Fully keyboard-navigable
|
||||||
|
|
||||||
|
**Stack:** JavaScript · CSS Grid · Canvas API
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## REST API Boilerplate
|
||||||
|
|
||||||
|
A reusable Node.js/Express skeleton with authentication, request validation, and structured logging built in — designed to be forked and extended.
|
||||||
|
|
||||||
|
**Features:**
|
||||||
|
|
||||||
|
- JWT-based auth with refresh tokens
|
||||||
|
- Zod schema validation on all endpoints
|
||||||
|
- Structured JSON logs (pino)
|
||||||
|
- Docker Compose stack (app + PostgreSQL)
|
||||||
|
- OpenAPI spec auto-generated from route definitions
|
||||||
|
|
||||||
|
**Stack:** Node.js · Express · PostgreSQL · Docker · Zod
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
*Press Q or ESC to return.*
|
||||||
46
content/skills.md
Normal file
46
content/skills.md
Normal file
@@ -0,0 +1,46 @@
|
|||||||
|
# Skills
|
||||||
|
|
||||||
|
A snapshot of the tools and technologies I work with regularly, and where I place my confidence.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Languages
|
||||||
|
|
||||||
|
| Language | Proficiency | Notes |
|
||||||
|
|------------|-------------|--------------------------------------------|
|
||||||
|
| C | ★★★★★ | Systems, embedded, performance-critical code |
|
||||||
|
| Python | ★★★★★ | Scripting, data pipelines, ML prototyping |
|
||||||
|
| JavaScript | ★★★★☆ | Full-stack, Node.js, browser APIs |
|
||||||
|
| Rust | ★★★☆☆ | Learning — memory safety, async runtimes |
|
||||||
|
| Java | ★★★☆☆ | Coursework, Spring ecosystem |
|
||||||
|
| Bash / Zsh | ★★★★☆ | Automation, CI scripting |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Systems & Infrastructure
|
||||||
|
|
||||||
|
- **Operating Systems** — Linux administration, kernel concepts, process/memory management
|
||||||
|
- **Networking** — TCP/IP, HTTP, DNS, socket programming
|
||||||
|
- **Containerisation** — Docker, Docker Compose
|
||||||
|
- **Version Control** — Git (including rebase, worktrees, bisect)
|
||||||
|
- **CI/CD** — GitHub Actions, basic pipeline design
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Web Development
|
||||||
|
|
||||||
|
- **Frontend** — Vanilla JS/CSS, React (functional, hooks), accessible HTML
|
||||||
|
- **Backend** — Node.js/Express, Python/FastAPI, REST API design
|
||||||
|
- **Databases** — PostgreSQL, SQLite, basic Redis usage
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Other
|
||||||
|
|
||||||
|
- **Algorithms & Data Structures** — competitive-programming level
|
||||||
|
- **Compilers** — lexing, parsing, AST construction (hobby project)
|
||||||
|
- **Machine Learning** — PyTorch, scikit-learn, classical + deep methods
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
*Press Q or ESC to return.*
|
||||||
78
index.html
78
index.html
@@ -1,57 +1,39 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="fr">
|
<html lang="en">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Gauvain Boiché - Portfolio</title>
|
<title>Gauvain Boiché — Portfolio</title>
|
||||||
<link rel="stylesheet" href="./resources/css/index.css">
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&display=swap" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="resources/css/index.css">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<div id="terminal">
|
||||||
<h1>Bienvenue sur mon Portfolio Informatique</h1>
|
<div id="titlebar">
|
||||||
<nav>
|
<span id="titlebar-title">GAUVAIN BOICHÉ — PORTFOLIO TERMINAL</span>
|
||||||
<ul>
|
<span id="current-path">~</span>
|
||||||
<li><a href="#projets">Projets</a></li>
|
</div>
|
||||||
<li><a href="#competences">Compétences</a></li>
|
<div id="terminal-body">
|
||||||
<li><a href="#contact">Contact</a></li>
|
<div id="tree-view" class="view"></div>
|
||||||
</ul>
|
<div id="page-view" class="view hidden">
|
||||||
</nav>
|
<div id="page-header"></div>
|
||||||
</header>
|
<div id="page-scroll-area">
|
||||||
|
<div id="page-content"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="statusbar">
|
||||||
|
<span id="status-left"></span>
|
||||||
|
<span id="status-right"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="cursor-block"></div>
|
||||||
|
|
||||||
<section id="projets">
|
<script src="https://cdn.jsdelivr.net/npm/marked@9.1.6/marked.min.js"></script>
|
||||||
<h2>Mes Projets</h2>
|
<script src="resources/js/terminal.js"></script>
|
||||||
<p>Voici quelques-uns de mes projets récents :</p>
|
|
||||||
<ul>
|
|
||||||
<li>Projet 1: Description du projet 1.</li>
|
|
||||||
<li>Projet 2: Description du projet 2.</li>
|
|
||||||
<li>Projet 3: Description du projet 3.</li>
|
|
||||||
</ul>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section id="competences">
|
|
||||||
<h2>Mes Compétences</h2>
|
|
||||||
<p>Je maîtrise les technologies suivantes :</p>
|
|
||||||
<ul>
|
|
||||||
<li>HTML, CSS, JavaScript</li>
|
|
||||||
<li>Python, Java, C++</li>
|
|
||||||
<li>Frameworks: React, Angular, Django</li>
|
|
||||||
</ul>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section id="contact">
|
|
||||||
<h2>Contactez-moi</h2>
|
|
||||||
<p>Pour toute question ou collaboration, n'hésitez pas à me contacter :</p>
|
|
||||||
<form action="#" method="post">
|
|
||||||
<label for="name">Nom:</label><br>
|
|
||||||
<input type="text" id="name" name="name" required><br><br>
|
|
||||||
<label for="email">Email:</label><br>
|
|
||||||
<input type="email" id="email" name="email" required><br><br>
|
|
||||||
<input type="submit" value="Envoyer">
|
|
||||||
</form>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<footer>
|
|
||||||
<p>© 2023 Mon Portfolio Informatique. Tous droits réservés.</p>
|
|
||||||
</footer>
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
@@ -1,104 +1,449 @@
|
|||||||
/* Global aspect */
|
/* ============================================================
|
||||||
|
TERMINAL PORTFOLIO — CSS
|
||||||
|
Golden CRT aesthetic with flicker, bloom, scanlines
|
||||||
|
============================================================ */
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--gold: #e8c200;
|
||||||
|
--gold-bright: #ffe060;
|
||||||
|
--gold-glow: #ffcf00;
|
||||||
|
--gold-dim: #a88a18;
|
||||||
|
--gold-dark: #5c4800;
|
||||||
|
--bg: #060400;
|
||||||
|
--bg-surface: #0e0900;
|
||||||
|
--font: 'Inconsolata', 'Courier New', monospace;
|
||||||
|
--item-h: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
* {
|
* {
|
||||||
box-sizing: border-box; /* permet de calculer les bordures dans les tailles affichées */
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
}
|
}
|
||||||
/* THEME VERT
|
|
||||||
:root {
|
|
||||||
--primary-color: #34cc26;
|
|
||||||
--secondary-color: #1fe743;
|
|
||||||
--primary-text-color: #FFFFFF;
|
|
||||||
--secondary-text-color: #4bb04b;
|
|
||||||
--background-color: #214e21;
|
|
||||||
--font-family: 'Inconsolata', monospace;
|
|
||||||
}
|
|
||||||
*/
|
|
||||||
|
|
||||||
:root {
|
html,
|
||||||
--primary-color: #ccb626;
|
body {
|
||||||
--secondary-color: #e7b21f;
|
width: 100%;
|
||||||
--primary-text-color: #FFFFFF;
|
height: 100%;
|
||||||
--secondary-text-color: #b0954b;
|
overflow: hidden;
|
||||||
--background-color: #454019;
|
background: #000;
|
||||||
--font-family: 'Inconsolata', monospace;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background: var(--background-color);
|
font-family: var(--font);
|
||||||
background: radial-gradient(circle,var(--background-color) 0%, black 100%);
|
font-size: 16px;
|
||||||
background-size: cover;
|
line-height: 1.6;
|
||||||
color: var(--primary-text-color);
|
color: var(--gold);
|
||||||
text-shadow: 0 0 5px var(--secondary-color);
|
background: radial-gradient(ellipse at 50% 35%, #1a1100 0%, #090600 45%, #000 100%);
|
||||||
font: 1rem Inconsolata, monospace;
|
position: relative;
|
||||||
height: 100vh;
|
|
||||||
width: 800px;
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(2, 400px);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ── Scanlines overlay ─────────────────────────────────────── */
|
||||||
|
body::before {
|
||||||
|
content: '';
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
background: repeating-linear-gradient(to bottom,
|
||||||
|
transparent 0px,
|
||||||
|
transparent 2px,
|
||||||
|
rgba(0, 0, 0, 0.10) 2px,
|
||||||
|
rgba(0, 0, 0, 0.10) 3px);
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 900;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── CRT vignette ──────────────────────────────────────────── */
|
||||||
body::after {
|
body::after {
|
||||||
content: "";
|
content: '';
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
background:
|
||||||
|
radial-gradient(ellipse at center, transparent 48%, rgba(0, 0, 0, 0.65) 100%);
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 901;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* ── Terminal window ───────────────────────────────────────── */
|
||||||
|
#terminal {
|
||||||
|
position: fixed;
|
||||||
|
top: 14px;
|
||||||
|
left: 14px;
|
||||||
|
right: 14px;
|
||||||
|
bottom: 14px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
border: 3px solid var(--gold);
|
||||||
|
background: radial-gradient(ellipse at 50% 28%, var(--bg-surface) 0%, var(--bg) 100%);
|
||||||
|
z-index: 10;
|
||||||
|
box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.7);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Title bar ─────────────────────────────────────────────── */
|
||||||
|
#titlebar {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 6px 18px;
|
||||||
|
border-bottom: 2px solid var(--gold-dim);
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 3px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--gold-glow);
|
||||||
|
|
||||||
|
flex-shrink: 0;
|
||||||
|
background: rgba(255, 183, 0, 0.025);
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#current-path {
|
||||||
|
color: var(--gold-dim);
|
||||||
|
letter-spacing: 1px;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Terminal body ─────────────────────────────────────────── */
|
||||||
|
#terminal-body {
|
||||||
|
flex: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.view {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 8px 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.view.hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Tree view ─────────────────────────────────────────────── */
|
||||||
|
#tree-view {
|
||||||
|
/* populated by JS */
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree-prompt {
|
||||||
|
color: var(--gold-glow);
|
||||||
|
font-weight: 700;
|
||||||
|
flex-shrink: 0;
|
||||||
|
white-space: pre;
|
||||||
|
font-size: 15px;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree-sep {
|
||||||
|
border: none;
|
||||||
|
border-top: 1px solid var(--gold-dim);
|
||||||
|
flex-shrink: 0;
|
||||||
|
margin: 3px 0;
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree-items-wrap {
|
||||||
|
flex: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree-items-inner {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100vw;
|
right: 0;
|
||||||
height: 100vh;
|
/* translateY controlled by JS for scrolling */
|
||||||
background: repeating-linear-gradient(
|
|
||||||
0deg,
|
|
||||||
rgba(0, 0, 0, 0.15),
|
|
||||||
rgba(0, 0, 0, 0.15) 1px,
|
|
||||||
transparent 1px,
|
|
||||||
transparent 2px
|
|
||||||
);
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.tree-item {
|
||||||
|
height: var(--item-h);
|
||||||
|
line-height: var(--item-h);
|
||||||
|
padding: 0 8px;
|
||||||
|
white-space: pre;
|
||||||
|
cursor: pointer;
|
||||||
|
color: var(--gold);
|
||||||
|
font-size: 15px;
|
||||||
|
|
||||||
|
user-select: none;
|
||||||
|
transition: background 0.05s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree-item.item-dir {
|
||||||
|
color: var(--gold-bright);
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree-item.item-parent {
|
||||||
|
color: var(--gold-dim);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree-item:hover:not(.selected) {
|
||||||
|
background: rgba(200, 164, 0, 0.10);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree-item.selected {
|
||||||
|
background: var(--gold);
|
||||||
|
color: #000 !important;
|
||||||
|
text-shadow: none !important;
|
||||||
|
animation: none;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree-item.item-dir.selected {
|
||||||
|
background: var(--gold-bright);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree-scroll-info {
|
||||||
|
flex-shrink: 0;
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--gold-dim);
|
||||||
|
padding: 0 8px;
|
||||||
|
height: var(--item-h);
|
||||||
|
line-height: var(--item-h);
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Page view ─────────────────────────────────────────────── */
|
||||||
|
#page-header {
|
||||||
|
flex-shrink: 0;
|
||||||
|
color: var(--gold-glow);
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 15px;
|
||||||
|
white-space: pre;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#page-scroll-area {
|
||||||
|
flex: 1;
|
||||||
|
overflow-y: auto;
|
||||||
|
scrollbar-width: none;
|
||||||
|
-ms-overflow-style: none;
|
||||||
|
border-top: 1px solid var(--gold-dim);
|
||||||
|
padding-top: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#page-scroll-area::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#page-content {
|
||||||
|
color: var(--gold);
|
||||||
|
font-size: 15px;
|
||||||
|
line-height: 1.75;
|
||||||
|
padding-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Markdown content styling */
|
||||||
|
#page-content h1 {
|
||||||
|
font-size: 1.5em;
|
||||||
|
color: var(--gold-bright);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
border-bottom: 2px double var(--gold-dim);
|
||||||
|
padding-bottom: 6px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
#page-content h2 {
|
||||||
|
font-size: 1.2em;
|
||||||
|
color: var(--gold-glow);
|
||||||
|
letter-spacing: 1px;
|
||||||
|
margin: 20px 0 10px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
#page-content h3 {
|
||||||
|
font-size: 1.05em;
|
||||||
|
color: var(--gold-bright);
|
||||||
|
margin: 14px 0 6px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
#page-content p {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
line-height: 1.65;
|
||||||
|
}
|
||||||
|
|
||||||
|
#page-content ul,
|
||||||
|
#page-content ol {
|
||||||
|
padding-left: 22px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#page-content li {
|
||||||
|
margin-bottom: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#page-content strong {
|
||||||
|
color: var(--gold-bright);
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
#page-content em {
|
||||||
|
color: var(--gold-glow);
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
#page-content hr {
|
||||||
|
border: none;
|
||||||
|
border-top: 1px solid var(--gold-dim);
|
||||||
|
margin: 14px 0;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
#page-content a {
|
||||||
|
color: var(--gold-bright);
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
#page-content code {
|
||||||
|
background: rgba(200, 164, 0, 0.12);
|
||||||
|
border: 1px solid var(--gold-dark);
|
||||||
|
padding: 1px 4px;
|
||||||
|
font-family: var(--font);
|
||||||
|
color: var(--gold-bright);
|
||||||
|
font-size: 0.92em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#page-content pre {
|
||||||
|
background: rgba(0, 0, 0, 0.45);
|
||||||
|
border: 1px solid var(--gold-dim);
|
||||||
|
padding: 10px;
|
||||||
|
overflow-x: auto;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#page-content pre code {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
padding: 0;
|
||||||
|
color: var(--gold-glow);
|
||||||
|
}
|
||||||
|
|
||||||
|
#page-content blockquote {
|
||||||
|
border-left: 3px solid var(--gold-dim);
|
||||||
|
padding-left: 14px;
|
||||||
|
color: var(--gold-glow);
|
||||||
|
margin: 12px 0;
|
||||||
|
font-style: italic;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Text bloom animation ──────────────────────────────────── */
|
||||||
|
@keyframes text-bloom {
|
||||||
|
|
||||||
|
0%,
|
||||||
|
100% {
|
||||||
|
text-shadow: 0 0 7px var(--gold), 0 0 14px rgba(232, 194, 0, 0.45);
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
text-shadow: 0 0 10px var(--gold-bright), 0 0 22px var(--gold-glow), 0 0 38px rgba(255, 220, 60, 0.28);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Status bar ────────────────────────────────────────────── */
|
||||||
|
#statusbar {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 6px 18px;
|
||||||
|
border-top: 2px solid var(--gold-dim);
|
||||||
|
font-size: 13px;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
color: var(--gold);
|
||||||
|
flex-shrink: 0;
|
||||||
|
background: rgba(255, 183, 0, 0.02);
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.key {
|
||||||
|
color: var(--gold-bright);
|
||||||
|
font-weight: 700;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 2px 7px;
|
||||||
|
border: 1px solid var(--gold);
|
||||||
|
letter-spacing: 0;
|
||||||
|
transition: background 0.1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.key:hover {
|
||||||
|
background: rgba(200, 164, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Rectangular cursor block ──────────────────────────────── */
|
||||||
|
#cursor-block {
|
||||||
|
position: fixed;
|
||||||
|
width: 9px;
|
||||||
|
height: 18px;
|
||||||
|
background: var(--gold-bright);
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 2000;
|
||||||
|
opacity: 0;
|
||||||
|
transform: translate(0, -9px);
|
||||||
|
}
|
||||||
|
|
||||||
|
#cursor-block.active {
|
||||||
|
animation: cursor-blink 0.52s step-end infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes cursor-blink {
|
||||||
|
|
||||||
|
0%,
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Boot screen ───────────────────────────────────────────── */
|
||||||
|
#boot-screen {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 30px 40px;
|
||||||
|
z-index: 50;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 2;
|
||||||
|
color: var(--gold);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
#boot-screen.hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.boot-line {
|
||||||
|
white-space: pre;
|
||||||
|
}
|
||||||
|
|
||||||
|
.boot-ok {
|
||||||
|
color: var(--gold-bright);
|
||||||
|
}
|
||||||
|
|
||||||
|
.boot-dim {
|
||||||
|
color: var(--gold-dim);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Selection ─────────────────────────────────────────────── */
|
||||||
::selection {
|
::selection {
|
||||||
background: #0080FF;
|
background: rgba(200, 164, 0, 0.35);
|
||||||
text-shadow: none;
|
text-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Generecis elements */
|
|
||||||
|
|
||||||
header {
|
|
||||||
grid-column: 1 / 3;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1, h2, p, li, form {
|
|
||||||
width: 75%;
|
|
||||||
padding: 10px;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1, h2 {
|
|
||||||
font-size: 2.5rem;
|
|
||||||
text-align: center;
|
|
||||||
color:var(--secondary-text-color);
|
|
||||||
border: thick double var(--secondary-text-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
font-size: 1.2rem;
|
|
||||||
line-height: 1.5;
|
|
||||||
width: 75%;
|
|
||||||
text-align: justify;
|
|
||||||
border: solid 1px var(--secondary-text-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: var(--primary-color);
|
|
||||||
text-decoration: none;
|
|
||||||
transition: color 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:hover {
|
|
||||||
color: var(--secondary-color);
|
|
||||||
text-decoration: none;
|
|
||||||
transition: color 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* CLASS elements */
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* ID elements */
|
/* ID elements */
|
||||||
417
resources/js/terminal.js
Normal file
417
resources/js/terminal.js
Normal file
@@ -0,0 +1,417 @@
|
|||||||
|
/* ============================================================
|
||||||
|
TERMINAL PORTFOLIO — JS
|
||||||
|
Tree navigation + Markdown page viewer
|
||||||
|
============================================================ */
|
||||||
|
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
// ── Constants ──────────────────────────────────────────────
|
||||||
|
const ITEM_H = 28; // px, must match --item-h CSS var
|
||||||
|
const SCROLL_STEP = 80; // px per arrow key in page view
|
||||||
|
const BOOT_LINES = [
|
||||||
|
{ text: 'GAUVAIN BOICHÉ PORTFOLIO TERMINAL v1.0', cls: 'boot-ok' },
|
||||||
|
{ text: '─────────────────────────────────────────', cls: 'boot-dim' },
|
||||||
|
{ text: 'Initializing display subsystem... OK', cls: '' },
|
||||||
|
{ text: 'Loading content tree... OK', cls: '' },
|
||||||
|
{ text: 'Mounting virtual filesystem... OK', cls: '' },
|
||||||
|
{ text: '─────────────────────────────────────────', cls: 'boot-dim' },
|
||||||
|
{ text: 'System ready. Use ↑↓ + ENTER to navigate.', cls: 'boot-ok' },
|
||||||
|
];
|
||||||
|
const BOOT_MS = 60; // delay between boot lines (ms)
|
||||||
|
const BOOT_HOLD = 800; // ms after last line before switching to tree
|
||||||
|
|
||||||
|
// ── State ──────────────────────────────────────────────────
|
||||||
|
const state = {
|
||||||
|
mode: 'boot', // 'boot' | 'tree' | 'page'
|
||||||
|
dirStack: [], // [{node, selectedIdx, scrollOffset}, …]
|
||||||
|
};
|
||||||
|
|
||||||
|
let manifest = null;
|
||||||
|
|
||||||
|
// ── Utility ─────────────────────────────────────────────────
|
||||||
|
function esc(str) {
|
||||||
|
return str
|
||||||
|
.replace(/&/g, '&')
|
||||||
|
.replace(/</g, '<')
|
||||||
|
.replace(/>/g, '>')
|
||||||
|
.replace(/"/g, '"');
|
||||||
|
}
|
||||||
|
|
||||||
|
function el(id) { return document.getElementById(id); }
|
||||||
|
|
||||||
|
// ── Path helpers ────────────────────────────────────────────
|
||||||
|
function buildPath() {
|
||||||
|
const parts = state.dirStack.map(d => d.node.name);
|
||||||
|
return parts.join('/').replace(/^~\//, '~/') || '~';
|
||||||
|
}
|
||||||
|
|
||||||
|
function currentDirState() {
|
||||||
|
return state.dirStack[state.dirStack.length - 1];
|
||||||
|
}
|
||||||
|
|
||||||
|
function getDirItems(dirNode, isRoot) {
|
||||||
|
const items = isRoot ? [] : [{ name: '..', type: 'parent' }];
|
||||||
|
if (dirNode.children) {
|
||||||
|
const sorted = [...dirNode.children].sort((a, b) => {
|
||||||
|
if (a.type === 'dir' && b.type !== 'dir') return -1;
|
||||||
|
if (a.type !== 'dir' && b.type === 'dir') return 1;
|
||||||
|
return a.name.localeCompare(b.name);
|
||||||
|
});
|
||||||
|
items.push(...sorted);
|
||||||
|
}
|
||||||
|
return items;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Render dispatcher ────────────────────────────────────────
|
||||||
|
function render() {
|
||||||
|
if (state.mode === 'tree') renderTree();
|
||||||
|
else if (state.mode === 'page') renderPage();
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Tree view ────────────────────────────────────────────────
|
||||||
|
function renderTree() {
|
||||||
|
const ds = currentDirState();
|
||||||
|
const isRoot = state.dirStack.length === 1;
|
||||||
|
const items = getDirItems(ds.node, isRoot);
|
||||||
|
const path = buildPath();
|
||||||
|
|
||||||
|
el('current-path').textContent = path;
|
||||||
|
|
||||||
|
// How many items fit in the viewport
|
||||||
|
const bodyH = el('terminal-body').clientHeight;
|
||||||
|
// Rough overhead: prompt(22) + sep(10) + sep(10) + scrollinfo(22) + padding(16)
|
||||||
|
const overhead = 80;
|
||||||
|
const visible = Math.max(1, Math.floor((bodyH - overhead) / ITEM_H));
|
||||||
|
|
||||||
|
// Clamp scroll so selected item stays visible
|
||||||
|
let scroll = ds.scrollOffset || 0;
|
||||||
|
if (ds.selectedIdx < scroll) scroll = ds.selectedIdx;
|
||||||
|
if (ds.selectedIdx >= scroll + visible) scroll = ds.selectedIdx - visible + 1;
|
||||||
|
scroll = Math.max(0, Math.min(scroll, Math.max(0, items.length - visible)));
|
||||||
|
ds.scrollOffset = scroll;
|
||||||
|
|
||||||
|
const slice = items.slice(scroll, scroll + visible);
|
||||||
|
const above = scroll;
|
||||||
|
const below = Math.max(0, items.length - scroll - visible);
|
||||||
|
|
||||||
|
// Prompt line
|
||||||
|
const prompt = `gauvain@portfolio:${path}$ ls`;
|
||||||
|
|
||||||
|
// Build HTML
|
||||||
|
let html = `<div class="tree-prompt">${esc(prompt)}</div>`;
|
||||||
|
html += `<hr class="tree-sep">`;
|
||||||
|
html += `<div class="tree-items-wrap"><div class="tree-items-inner" id="tree-items-inner">`;
|
||||||
|
|
||||||
|
slice.forEach((item, vi) => {
|
||||||
|
const realIdx = scroll + vi;
|
||||||
|
const sel = realIdx === ds.selectedIdx;
|
||||||
|
const isDir = item.type === 'dir';
|
||||||
|
const isPar = item.type === 'parent';
|
||||||
|
const icon = isPar ? '../' : (isDir ? `${item.name}/` : item.name);
|
||||||
|
const cls = [
|
||||||
|
'tree-item',
|
||||||
|
sel ? 'selected' : '',
|
||||||
|
isDir ? 'item-dir' : '',
|
||||||
|
isPar ? 'item-parent' : '',
|
||||||
|
].filter(Boolean).join(' ');
|
||||||
|
|
||||||
|
html += `<div class="${cls}" data-idx="${realIdx}">${esc(icon)}</div>`;
|
||||||
|
});
|
||||||
|
|
||||||
|
html += `</div></div>`;
|
||||||
|
html += `<hr class="tree-sep">`;
|
||||||
|
|
||||||
|
const scrollInfo = [
|
||||||
|
above > 0 ? `↑ ${above} above` : '',
|
||||||
|
below > 0 ? `↓ ${below} below` : '',
|
||||||
|
].filter(Boolean).join(' ');
|
||||||
|
html += `<div class="tree-scroll-info">${scrollInfo}</div>`;
|
||||||
|
|
||||||
|
el('tree-view').innerHTML = html;
|
||||||
|
el('tree-view').classList.remove('hidden');
|
||||||
|
el('page-view').classList.add('hidden');
|
||||||
|
|
||||||
|
// Update status bar
|
||||||
|
el('status-left').textContent = `${items.length} item(s)`;
|
||||||
|
el('status-right').innerHTML =
|
||||||
|
`<span class="key">↑↓</span> SELECT ` +
|
||||||
|
`<span class="key">ENTER</span> OPEN ` +
|
||||||
|
`<span class="key">ESC</span> BACK`;
|
||||||
|
|
||||||
|
// Event delegation on items
|
||||||
|
const inner = el('tree-items-inner');
|
||||||
|
if (inner) {
|
||||||
|
inner.addEventListener('click', onTreeItemClick);
|
||||||
|
inner.addEventListener('dblclick', onTreeItemDblClick);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function onTreeItemClick(e) {
|
||||||
|
const itemEl = e.target.closest('.tree-item');
|
||||||
|
if (!itemEl) return;
|
||||||
|
const idx = parseInt(itemEl.dataset.idx, 10);
|
||||||
|
currentDirState().selectedIdx = idx;
|
||||||
|
renderTree();
|
||||||
|
}
|
||||||
|
|
||||||
|
function onTreeItemDblClick(e) {
|
||||||
|
const itemEl = e.target.closest('.tree-item');
|
||||||
|
if (!itemEl) return;
|
||||||
|
const idx = parseInt(itemEl.dataset.idx, 10);
|
||||||
|
currentDirState().selectedIdx = idx;
|
||||||
|
openSelected();
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Open selected item ────────────────────────────────────────
|
||||||
|
function openSelected() {
|
||||||
|
const ds = currentDirState();
|
||||||
|
const isRoot = state.dirStack.length === 1;
|
||||||
|
const items = getDirItems(ds.node, isRoot);
|
||||||
|
const item = items[ds.selectedIdx];
|
||||||
|
if (!item) return;
|
||||||
|
|
||||||
|
if (item.type === 'parent') {
|
||||||
|
navigateBack();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (item.type === 'dir') {
|
||||||
|
state.dirStack.push({ node: item, selectedIdx: 0, scrollOffset: 0 });
|
||||||
|
renderTree();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// It's a file — load it
|
||||||
|
loadPage(item.path, item.name);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Navigate back ─────────────────────────────────────────────
|
||||||
|
function navigateBack() {
|
||||||
|
if (state.mode === 'page') {
|
||||||
|
state.mode = 'tree';
|
||||||
|
render();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (state.dirStack.length > 1) {
|
||||||
|
state.dirStack.pop();
|
||||||
|
renderTree();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Page view ─────────────────────────────────────────────────
|
||||||
|
async function loadPage(path, name) {
|
||||||
|
state.mode = 'page';
|
||||||
|
|
||||||
|
el('tree-view').classList.add('hidden');
|
||||||
|
el('page-view').classList.remove('hidden');
|
||||||
|
el('page-header').textContent = `gauvain@portfolio:${buildPath()}$ cat ${name}`;
|
||||||
|
el('page-content').innerHTML = `<p style="color:var(--gold-dim)">Loading…</p>`;
|
||||||
|
el('current-path').textContent = buildPath() + '/' + name;
|
||||||
|
|
||||||
|
updatePageStatus();
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res = await fetch(path);
|
||||||
|
if (!res.ok) throw new Error(`HTTP ${res.status}`);
|
||||||
|
const md = await res.text();
|
||||||
|
el('page-content').innerHTML = marked.parse(md);
|
||||||
|
el('page-scroll-area').scrollTop = 0;
|
||||||
|
} catch (err) {
|
||||||
|
el('page-content').innerHTML =
|
||||||
|
`<p style="color:#a00">ERROR: Could not load <code>${esc(path)}</code><br>${esc(err.message)}</p>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
updatePageStatus();
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderPage() {
|
||||||
|
el('tree-view').classList.add('hidden');
|
||||||
|
el('page-view').classList.remove('hidden');
|
||||||
|
updatePageStatus();
|
||||||
|
}
|
||||||
|
|
||||||
|
function updatePageStatus() {
|
||||||
|
el('status-left').textContent = state.mode === 'page' ? 'READING' : '';
|
||||||
|
el('status-right').innerHTML =
|
||||||
|
`<span class="key" id="btn-up">↑</span> SCROLL UP ` +
|
||||||
|
`<span class="key" id="btn-dn">↓</span> SCROLL DOWN ` +
|
||||||
|
`<span class="key" id="btn-q">Q</span> QUIT`;
|
||||||
|
|
||||||
|
const sa = el('page-scroll-area');
|
||||||
|
const btnUp = el('btn-up');
|
||||||
|
const btnDn = el('btn-dn');
|
||||||
|
const btnQ = el('btn-q');
|
||||||
|
if (btnUp) btnUp.onclick = () => { sa.scrollBy({ top: -SCROLL_STEP, behavior: 'smooth' }); };
|
||||||
|
if (btnDn) btnDn.onclick = () => { sa.scrollBy({ top: SCROLL_STEP, behavior: 'smooth' }); };
|
||||||
|
if (btnQ) btnQ.onclick = navigateBack;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Keyboard events ───────────────────────────────────────────
|
||||||
|
function setupKeyboard() {
|
||||||
|
document.addEventListener('keydown', (e) => {
|
||||||
|
if (state.mode === 'boot') return;
|
||||||
|
|
||||||
|
if (state.mode === 'tree') {
|
||||||
|
handleTreeKey(e);
|
||||||
|
} else if (state.mode === 'page') {
|
||||||
|
handlePageKey(e);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleTreeKey(e) {
|
||||||
|
const ds = currentDirState();
|
||||||
|
const isRoot = state.dirStack.length === 1;
|
||||||
|
const items = getDirItems(ds.node, isRoot);
|
||||||
|
|
||||||
|
switch (e.key) {
|
||||||
|
case 'ArrowUp':
|
||||||
|
e.preventDefault();
|
||||||
|
ds.selectedIdx = Math.max(0, ds.selectedIdx - 1);
|
||||||
|
renderTree();
|
||||||
|
break;
|
||||||
|
case 'ArrowDown':
|
||||||
|
e.preventDefault();
|
||||||
|
ds.selectedIdx = Math.min(items.length - 1, ds.selectedIdx + 1);
|
||||||
|
renderTree();
|
||||||
|
break;
|
||||||
|
case 'Enter':
|
||||||
|
e.preventDefault();
|
||||||
|
openSelected();
|
||||||
|
break;
|
||||||
|
case 'Escape':
|
||||||
|
case 'ArrowLeft':
|
||||||
|
e.preventDefault();
|
||||||
|
navigateBack();
|
||||||
|
break;
|
||||||
|
case 'ArrowRight':
|
||||||
|
e.preventDefault();
|
||||||
|
openSelected();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function handlePageKey(e) {
|
||||||
|
const sa = el('page-scroll-area');
|
||||||
|
switch (e.key) {
|
||||||
|
case 'ArrowUp':
|
||||||
|
case 'k':
|
||||||
|
e.preventDefault();
|
||||||
|
sa.scrollBy({ top: -SCROLL_STEP, behavior: 'smooth' });
|
||||||
|
break;
|
||||||
|
case 'ArrowDown':
|
||||||
|
case 'j':
|
||||||
|
e.preventDefault();
|
||||||
|
sa.scrollBy({ top: SCROLL_STEP, behavior: 'smooth' });
|
||||||
|
break;
|
||||||
|
case 'Home':
|
||||||
|
e.preventDefault();
|
||||||
|
sa.scrollTo({ top: 0, behavior: 'smooth' });
|
||||||
|
break;
|
||||||
|
case 'End':
|
||||||
|
e.preventDefault();
|
||||||
|
sa.scrollTo({ top: sa.scrollHeight, behavior: 'smooth' });
|
||||||
|
break;
|
||||||
|
case 'PageUp':
|
||||||
|
e.preventDefault();
|
||||||
|
sa.scrollBy({ top: -(sa.clientHeight * 0.85), behavior: 'smooth' });
|
||||||
|
break;
|
||||||
|
case 'PageDown':
|
||||||
|
e.preventDefault();
|
||||||
|
sa.scrollBy({ top: (sa.clientHeight * 0.85), behavior: 'smooth' });
|
||||||
|
break;
|
||||||
|
case 'q':
|
||||||
|
case 'Q':
|
||||||
|
case 'Escape':
|
||||||
|
e.preventDefault();
|
||||||
|
navigateBack();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Cursor block (click simulation) ──────────────────────────
|
||||||
|
function setupCursor() {
|
||||||
|
const cursor = el('cursor-block');
|
||||||
|
let hideTimer = null;
|
||||||
|
|
||||||
|
document.addEventListener('click', (e) => {
|
||||||
|
// Skip clicks on status-bar keys (they have their own handlers)
|
||||||
|
if (e.target.classList.contains('key')) return;
|
||||||
|
|
||||||
|
cursor.style.left = e.clientX + 'px';
|
||||||
|
cursor.style.top = e.clientY + 'px';
|
||||||
|
cursor.classList.add('active');
|
||||||
|
cursor.style.opacity = '1';
|
||||||
|
|
||||||
|
clearTimeout(hideTimer);
|
||||||
|
hideTimer = setTimeout(() => {
|
||||||
|
cursor.classList.remove('active');
|
||||||
|
cursor.style.opacity = '0';
|
||||||
|
}, 2800);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Boot sequence ─────────────────────────────────────────────
|
||||||
|
async function runBoot() {
|
||||||
|
// Inject a temporary boot screen inside the terminal body
|
||||||
|
const bootDiv = document.createElement('div');
|
||||||
|
bootDiv.id = 'boot-screen';
|
||||||
|
|
||||||
|
// Append to tree-view placeholder (it's empty at this point)
|
||||||
|
el('tree-view').appendChild(bootDiv);
|
||||||
|
el('tree-view').classList.remove('hidden');
|
||||||
|
|
||||||
|
for (let i = 0; i < BOOT_LINES.length; i++) {
|
||||||
|
await sleep(BOOT_MS);
|
||||||
|
const { text, cls } = BOOT_LINES[i];
|
||||||
|
const line = document.createElement('div');
|
||||||
|
line.className = 'boot-line ' + (cls || '');
|
||||||
|
line.textContent = text;
|
||||||
|
bootDiv.appendChild(line);
|
||||||
|
}
|
||||||
|
|
||||||
|
await sleep(BOOT_HOLD);
|
||||||
|
bootDiv.remove();
|
||||||
|
}
|
||||||
|
|
||||||
|
function sleep(ms) {
|
||||||
|
return new Promise(resolve => setTimeout(resolve, ms));
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Init ──────────────────────────────────────────────────────
|
||||||
|
document.addEventListener('DOMContentLoaded', async () => {
|
||||||
|
try {
|
||||||
|
// Fetch manifest first (fail fast)
|
||||||
|
const res = await fetch('content/manifest.json');
|
||||||
|
if (!res.ok) throw new Error(`Manifest HTTP ${res.status}`);
|
||||||
|
manifest = await res.json();
|
||||||
|
} catch (err) {
|
||||||
|
showFatal('Failed to load content/manifest.json — ' + err.message);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
state.dirStack = [{ node: manifest, selectedIdx: 0, scrollOffset: 0 }];
|
||||||
|
|
||||||
|
// Boot screen then tree
|
||||||
|
state.mode = 'boot';
|
||||||
|
await runBoot();
|
||||||
|
|
||||||
|
state.mode = 'tree';
|
||||||
|
renderTree();
|
||||||
|
|
||||||
|
setupKeyboard();
|
||||||
|
setupCursor();
|
||||||
|
});
|
||||||
|
|
||||||
|
function showFatal(msg) {
|
||||||
|
const treeView = el('tree-view');
|
||||||
|
treeView.classList.remove('hidden');
|
||||||
|
treeView.innerHTML = `
|
||||||
|
<div style="padding:20px;color:#c00;text-shadow:0 0 8px #a00;">
|
||||||
|
<div style="font-size:1.2em;margin-bottom:10px;">SYSTEM ERROR</div>
|
||||||
|
<div>${esc(msg)}</div>
|
||||||
|
<div style="margin-top:16px;color:var(--gold-dim)">
|
||||||
|
Make sure content/manifest.json exists and the page is served over HTTP.
|
||||||
|
</div>
|
||||||
|
</div>`;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user