patternhtmlTip
Terminal-style interactive portfolio in a single HTML file
Viewed 0 times
terminal portfolioCLI websitetyping animationboot sequenceinteractive resumemonospace design
Problem
Building a terminal/CLI-themed interactive portfolio website that feels authentic, with boot sequence, typing animations, command processing, and responsive design — all in a single standalone HTML file with no build tools or JS frameworks.
Solution
Structure the HTML file with: (1) A terminal window container with title bar (dots + title text), scrollable output div, input area with prompt label and text input, and clickable command chips. (2) CSS using monospace font (JetBrains Mono from Google Fonts), dark background, colored accents for syntax highlighting, and a blinking cursor animation. (3) JavaScript IIFE with: typeText() function that parses HTML tags and entities to print them instantly while animating individual characters at ~20ms; a COMMANDS object mapping command names to async functions; a boot() sequence that shows ASCII art, loading bars with animated progress fills, then reveals the input area; event listeners on Enter key and chip clicks. Key techniques: use insertAdjacentHTML for raw output, element.innerHTML += for character-by-character typing, CSS progress bars with animated width transitions for the boot sequence, and scrollTop = scrollHeight after each update to keep output scrolled to bottom. For the projects table, instant-print rather than character-animate for readability. For skills, use block characters (█░) as text-based progress bars.
Revisions (0)
No revisions yet.