Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/log-portfolio/llms.txt

Use this file to discover all available pages before exploring further.

BootSequence is the very first thing a visitor sees when they load the portfolio. It gates the entire application behind a full-screen startup simulation — first scrolling through classic BIOS POST output line by line, then fading into a Windows 98-style splash screen complete with a smooth Framer Motion loading bar. Only after the sequence completes does it hand control back to the application via its onComplete callback.

​
Props

​
onComplete
() => void
required
Callback fired when the boot animation finishes. In the default App setup this flips a booted state flag so the Desktop is rendered in place of the boot screen.

​
How It Works

The component drives itself through three internal phases tracked with a useState counter:
1

Phase 0 — BIOS POST Text

A setInterval fires every 150 ms, appending one line from the BIOS text array to the visible list. A blinking cursor (_) animates below the last line via animate-pulse. When all lines have been shown the interval is cleared and a setTimeout waits 1 000 ms before advancing to phase 1.
2

Phase 1 — Windows Splash Screen

The BIOS text is replaced by a centred motion.div that fades and scales in (initial={{ scale: 0.8, opacity: 0 }}). It displays the Windows 1992 logo alongside a “Portfolio OS” heading styled with a blue-to-purple gradient. Below the heading a Framer Motion motion.div progress bar animates its width from 0% to 100% over 2.5 s with ease: "linear". After 3 000 ms the phase counter advances to 2.
3

Phase 2 — Exit & Callback

Advancing to phase 2 removes the overlay from the tree. AnimatePresence triggers the exit animation (opacity: 0, transition: { duration: 1 }). Simultaneously a final setTimeout fires onComplete after 1 000 ms, matching the exit animation duration so the desktop appears just as the overlay finishes fading out.

​
Timing Breakdown

StageDuration
Each BIOS text line150 ms
Pause after last BIOS line1 000 ms
Windows splash screen visible3 000 ms
Exit fade animation / onComplete delay1 000 ms
Total boot time~6.5 s (varies with line count)

​
BIOS Text Lines

The following array is defined inside BootSequence.js and supplies the text scrolled during phase 0: 
const biosLines = [
  "Award Modular BIOS v4.51PG, An Energy Star Ally",
  "Copyright (C) 1984-2001, Award Software, Inc.",
  "",
  "PENTIUM-S CPU at 166MHz",
  "Memory Test :  32768K OK",
  "",
  "Award Plug and Play BIOS Extension v1.0A",
  "Initialize Plug and Play Cards...",
  "PNP Init Completed",
  "",
  "Detecting HDD Primary Master   ... WDC AC31600H",
  "Detecting HDD Primary Slave    ... None",
  "Detecting HDD Secondary Master ... CD-ROM 52X",
  "Detecting HDD Secondary Slave  ... None",
  "",
  "Starting MS-DOS...",
  "Loading Windows...",
];
Personalise the boot screen by editing these strings. You can reference your own hardware specs, change the copyright year, or add fictional driver output lines. Empty strings ("") render as blank lines and give the text room to breathe.

​
Customizing Timings

Timings are controlled by three values inside the useEffect hooks: 
// Phase 0 — interval between each BIOS line
const interval = setInterval(() => { ... }, 150);   // ← change 150

// Pause before advancing to the splash screen
setTimeout(() => setPhase(1), 1000);                // ← change 1000

// Duration the splash screen is shown before exit
const splashTimer = setTimeout(() => {
  setPhase(2);
  setTimeout(onComplete, 1000);                     // ← change 1000 (exit delay)
}, 3000);                                           // ← change 3000 (splash duration)
The Framer Motion progress bar duration is separate and lives on the motion.div: 
<motion.div
  initial={{ width: "0%" }}
  animate={{ width: "100%" }}
  transition={{ duration: 2.5, ease: "linear" }}   // ← change 2.5
/>

​
Usage Example

import { B as BootSequence } from './components/BootSequence.js';

function App() {
  const [booted, setBooted] = useState(false);
  if (!booted) return <BootSequence onComplete={() => setBooted(true)} />;
  return <Desktop />;
}

​
CSS Classes

The overlay element carries three CSS classes that contribute to the retro aesthetic:
ClassEffect
crt-flickerApplies a subtle screen-flicker keyframe animation mimicking a CRT monitor
scanlinesRenders horizontal scan-line stripes across the overlay at opacity-20
font-pixelSwitches the font to the pixel/bitmap typeface used throughout the portfolio

​
Framer Motion Integration

BootSequence relies on two Framer Motion primitives:
  • AnimatePresence — wraps the entire overlay so that React’s unmount is delayed until the exit animation completes. Without this the overlay would disappear instantly when phase 2 is reached.
  • motion.div (overlay exit) — the outermost overlay carries exit={{ opacity: 0 }} with transition={{ duration: 1 }}, producing a one-second fade to black before the desktop is revealed.
  • motion.div (splash entrance) — the splash content uses initial={{ scale: 0.8, opacity: 0 }} and animate={{ scale: 1, opacity: 1 }} for a subtle scale-in entrance when switching from the BIOS phase.
Because AnimatePresence must observe the component leaving the tree, the phase check is written as phase < 2 && <motion.div …> rather than a conditional render outside AnimatePresence. Do not move the phase gate outside the AnimatePresence wrapper or the exit animation will be skipped.

Build docs developers (and LLMs) love

Get started for freeTalk to us