Documentation Index
Fetch the complete documentation index at: https://mintlify.com/apursley2012/guest-portfolio.dev/llms.txt
Use this file to discover all available pages before exploring further.
Overview
BootSequence.js simulates a vintage PC BIOS POST (Power-On Self-Test) screen on first page load. Lines of system output appear one by one, followed by a login prompt that types out the username with a TypewriterText animation. Once the animation finishes, the component unmounts itself and the interactive Terminal takes over.
BIOS Messages
The component iterates over a fixed array of 19 lines (including intentional blank lines for spacing):
const biosMessages = [
"BIOS Date 10/24/98 14:22:10 Ver 08.00.15",
"CPU: GenuineIntel(R) Processor - 400MHz",
"Speed: 400MHz",
"Memory Test: 65536K OK",
"",
"Initializing USB Controllers .. Done.",
"Auto-Detecting Pri Master .. IDE Hard Disk",
"Auto-Detecting Pri Slave .. Not Detected",
"Auto-Detecting Sec Master .. ATAPI CD-ROM",
"",
"Booting from Hard Disk...",
"Loading OS kernel...",
"[ OK ] Started System Logging Service.",
"[ OK ] Started Network Manager.",
"[ OK ] Reached target Network.",
"[ OK ] Started SSH Daemon.",
"",
"Welcome to DEV-OS v2.4.1 (tty1)",
"",
];
Line-by-Line Rendering
The component tracks how many lines have been revealed using a lineIndex state, starting at 0. A useEffect fires whenever lineIndex changes:
- If there are still lines left to show, a
setTimeout schedules the next increment at a random delay of Math.random() * 200 + 50 milliseconds (between 50 ms and 250 ms), giving an authentic, uneven boot cadence.
- Once all lines are displayed (
lineIndex === biosMessages.length), a 500 ms pause fires before setting showLogin to true.
useEffect(() => {
if (lineIndex < biosMessages.length) {
const t = setTimeout(() => {
setLineIndex((prev) => prev + 1);
}, Math.random() * 200 + 50);
return () => clearTimeout(t);
} else {
const t = setTimeout(() => {
setShowLogin(true);
}, 500);
return () => clearTimeout(t);
}
}, [lineIndex]);
Login Animation
Once showLogin is true, the component renders the login line:
<div className="mt-4 flex">
<span>guest@portfolio.dev login: </span>
<TypewriterText
text="guest"
delay={100}
onComplete={() => {
setTimeout(() => {
setIsBooting(false);
}, 800);
}}
/>
<span className="typewriter-cursor ml-1" />
</div>
TypewriterText types out "guest" at 100 ms per character.- When typing finishes the
onComplete callback fires, waits a further 800 ms, then calls setIsBooting(false) from TerminalContext — unmounting BootSequence and mounting the live Terminal.
Sequence Timeline
Page loads
│
▼
Line 0 rendered ──(random 50–250 ms)──▶ Line 1 rendered ──▶ …
│
▼ (all 19 lines visible)
500 ms pause
│
▼
"guest@portfolio.dev login: " appears
TypewriterText types "g", "u", "e", "s", "t" (100 ms/char)
│
▼
onComplete fires → 800 ms pause → setIsBooting(false)
│
▼
Terminal mounts
TerminalContext Integration
BootSequence consumes a single value from TerminalContext:
const { setIsBooting } = useTerminal();
setIsBooting(false) is the only state mutation the component performs — the parent (App or root layout) conditionally renders either <BootSequence /> or <Terminal /> based on isBooting.
Full Component Structure
const BootSequence = () => {
const { setIsBooting } = useTerminal();
const [lineIndex, setLineIndex] = useState(0);
const [showLogin, setShowLogin] = useState(false);
// line-by-line reveal effect (see above)
return (
<div className="font-mono text-terminal-white h-full overflow-hidden flex flex-col">
{biosMessages.slice(0, lineIndex).map((line, i) => (
<div key={i}>{line}</div>
))}
{showLogin && (
<div className="mt-4 flex">
<span>guest@portfolio.dev login: </span>
<TypewriterText
text="guest"
delay={100}
onComplete={() => {
setTimeout(() => setIsBooting(false), 800);
}}
/>
<span className="typewriter-cursor ml-1" />
</div>
)}
</div>
);
};
To customise the boot messages, edit the biosMessages array at the top of
BootSequence.js. You can add extra "[ OK ]" lines, change the OS version
string (DEV-OS v2.4.1), or replace the CPU/BIOS header lines with your own
flavour text. Each blank string "" in the array renders as an empty line,
useful for visual grouping. Adjust the random delay range
(Math.random() * 200 + 50) to make the boot feel faster or slower.