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.

Log Portfolio transforms your developer portfolio into a fully interactive Windows 98 desktop experience running in the browser. Instead of a traditional scrolling page, visitors land on a simulated operating system — “Portfolio OS” — complete with a BIOS POST boot screen, a Windows splash loader, draggable and resizable windows, a functional Start menu, and six distinct apps to explore your work. Everything runs as a pure static site: no backend, no server, just React compiled to a dist/ folder you can drop onto any CDN.

​
The Concept

The portfolio is built around a fictional developer persona: a full-stack engineer who is, in their own words, “stuck in the year 2001.” They build modern web applications with React and TypeScript, but they miss the days of <blink> tags, table layouts, and Netscape Navigator. The AboutMe.txt Notepad file captures this personality perfectly: 
Hello World!

I'm a Full Stack Developer stuck in the year 2001.
I build modern web applications but I miss the days of table layouts and marquee tags.

> SKILLS:
- React / TypeScript (Modern stuff)
- Node.js / Express
- HTML <blink> tags
- CSS (I know how to center a div now)

"Best viewed in Internet Explorer 6 at 800x600."
This retro framing is the thread that ties every app together — the blog is a Geocities-style page with a visitor counter, the contact form is Outlook Express, and testimonials arrive as an MSN Messenger chat.

​
Boot Sequence

Every visit to Portfolio OS starts with a two-phase boot sequence managed by the BootSequence component. First, a black BIOS POST screen scrolls through authentic-looking hardware detection messages line by line at 150 ms intervals: 
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...
After the POST completes, the screen transitions to a Windows splash with the 1992 Windows logo, the “Portfolio OS” wordmark in a blue-to-purple gradient, and an animated progress bar that fills over 2.5 seconds. The entire boot sequence takes roughly seven to eight seconds before the desktop appears.

​
Desktop Apps

The desktop renders six icons, each of which opens a dedicated windowed application on double-click. All windows are managed by a global WindowContext that tracks open/closed state, z-index stacking, minimize, maximize, and focus — so multiple apps can be open simultaneously, just like a real desktop.
IconApp TitleContent
📄 FileTextAboutMe.txtNotepad with the developer bio, skills list, and properties
📁 FolderMy ComputerWindows Explorer–style project browser with Large Icons, List, and Details views
⚙️ SettingsControl PanelAnimated progress-bar skill meters for React.js, TypeScript, Node.js, and CSS/Tailwind
🌐 GlobeInternet ExplorerGeocities-style blog with <marquee> tag, visitor counter “00042”, and retro web badges
💬 MessageSquareMSN MessengerLive-replay testimonials chat — pre-written messages appear every 2 seconds
✉️ MailOutlook ExpressContact form with To/From/Subject fields and an animated “Sending…” progress dialog

​
Taskbar

A persistent taskbar sits at the bottom of the screen. It contains:
  • A Start button (with the authentic 1992 Windows logo) that opens a slide-up menu with Programs, Documents, and Shut Down entries
  • Window buttons for every open app — clicking a minimized button restores it, clicking the active window’s button brings it to focus
  • A system tray with a live clock updated every second and a green “Connected” indicator dot

​
Easter Eggs

​
Clippy

After the desktop has been visible for 5 seconds, the Clippy component animates in from the bottom-right corner with a bouncing 📎 emoji and a tooltip balloon:
“It looks like you’re trying to view a portfolio. Would you like some help with that?”
Two action buttons are offered: “Get help with navigation” and “Just browse by myself.” Clicking either dismisses the balloon. Clippy can be fully closed via its × button.

​
Screensaver

If the user goes 60 seconds without any mouse movement, keyboard input, or click, the Screensaver component activates: a black full-screen overlay with the Windows logo and “Portfolio OS” text that bounces around the screen at 3 px/frame — a faithful recreation of the classic DVD-logo screensaver. Any interaction immediately dismisses it.

​
Tech Stack

Log Portfolio is built entirely with modern tooling despite its retro aesthetic:
TechnologyRole
React 18Component model, hooks (useState, useEffect, useCallback, useRef), and context
ViteDev server (port 5173) and production bundler — outputs to dist/
Framer MotionBoot sequence fade/scale transitions and Clippy slide-in animation
Lucide React v0.522All iconography (FileText, Folder, Globe, Settings, Mail, MessageSquare, Monitor, CPU, Database, and more)
Tailwind CSSAll styling, including custom win-border, win-border-inset, win-button, win-bg, font-pixel, and font-comic utility classes
The app has no backend whatsoever. The contact form shows a success dialog without sending any real email. All state is ephemeral — a page refresh starts the boot sequence again from scratch.

​
Explore the Docs

Getting Started

Clone the repo, install dependencies, and run the dev server in under five minutes.

Architecture Overview

How WindowContext, the Desktop registry, and the boot flow fit together.

Boot Sequence

Deep-dive into the BIOS POST animation and Windows splash loader.

Customization

Replace the placeholder bio, projects, skills, blog posts, and contact details with your own.

Build docs developers (and LLMs) love

Get started for freeTalk to us