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 is a pure static React application built with Vite. There is no backend to configure, no database to provision, and no environment variables required out of the box — clone the repo, install dependencies, and the Windows 98 desktop is running locally in under five minutes. This guide walks through every step from cloning to deploying your customized portfolio.

​
Prerequisites

Before you start, make sure you have the following installed:
  • Node.js 18 or later — Vite’s minimum supported runtime. Check with node --version.
  • npm, yarn, or pnpm — any of the three work; examples for all are provided below.
  • Git — to clone the repository.

​
Setup

1
Clone the repository
2
git clone https://github.com/apursley2012/log-portfolio.git && cd log-portfolio
3
This clones the project into a log-portfolio/ directory and immediately changes into it. You should see the following top-level structure:
4
log-portfolio/
├── index.html
├── components/
├── contexts/
├── pages/
└── assets/
5
Install dependencies
6
Install the project’s dependencies using your preferred package manager:
7
npm
npm install
yarn
yarn install
pnpm
pnpm install
8
This pulls in React 18, Vite, Framer Motion, Lucide React, and Tailwind CSS, among other dependencies declared in package.json.
9
Start the development server
10
npm run dev
11
Vite starts a local dev server at http://localhost:5173. Open that URL in your browser and the boot sequence plays immediately — the BIOS POST text scrolls through seventeen lines at 150 ms each (about three seconds), followed by the Windows splash loader, and then the Portfolio OS desktop appears with all six app icons ready to double-click.
12
The dev server supports Hot Module Replacement (HMR). Any change you make to a component file updates in the browser instantly without a full page reload or replaying the boot sequence.
13
Build for production
14
npm run build
15
Vite compiles and bundles the entire application into the dist/ directory. The output is a fully self-contained static site — all JavaScript is split into pre-bundled module files under dist/assets/, and dist/index.html is the single entry point.
16
Preview the production build
17
npm run preview
18
Serves the dist/ folder locally so you can verify the production build before deploying. The preview server runs on http://localhost:4173 by default.

​
Project Structure

Understanding where things live makes customization straightforward: 
log-portfolio/
│
├── index.html                  # App entry point — loads main.js and main.css
│
├── components/
│   ├── BootSequence.js         # BIOS POST text animation + Windows splash loader
│   ├── Desktop.js              # App registry array + all six windowed app components
│   ├── Window.js               # Draggable, resizable window chrome
│   ├── Taskbar.js              # Bottom bar with Start menu, window buttons, clock
│   ├── Clippy.js               # Easter egg — appears after 5 seconds idle
│   └── Screensaver.js          # Bouncing logo — activates after 60 seconds idle
│
├── contexts/
│   └── WindowContext.js        # Global window state: open, close, minimize,
│                               # maximize, focus, z-index management
│
├── pages/
│   ├── AboutPage.html          # Static HTML for the About route
│   ├── BlogPage.html           # Static HTML for the Blog route
│   ├── ContactPage.html        # Static HTML for the Contact route
│   ├── ProjectsPage.html       # Static HTML for the Projects route
│   ├── SkillsPage.html         # Static HTML for the Skills route
│   └── TestimonialsPage.html   # Static HTML for the Testimonials route
│
└── assets/
    ├── main.js                 # Compiled entry bundle (Vite output)
    ├── main.css                # Compiled Tailwind stylesheet
    └── *.js                    # Code-split chunks (jsx-runtime, index, proxy, etc.)
All component and context files under components/ and contexts/ are compiled ES module bundles — the source of truth for what runs in the browser. The Desktop.js file is the most important to edit when personalising content: it contains the app registry array (ee) that defines every desktop icon, window title, default size, and rendered component.

​
Deployment

Because npm run build produces a fully static dist/ folder with no server-side logic, you can host Log Portfolio anywhere that serves static files.

​
GitHub Pages

The simplest zero-cost option is GitHub Pages. After building, push the contents of dist/ to the gh-pages branch: 
# Install the gh-pages helper (one-time)
npm install --save-dev gh-pages

# Add a deploy script to package.json:
# "deploy": "gh-pages -d dist"

# Build and deploy
npm run build && npm run deploy
Your portfolio will be live at https://<your-username>.github.io/log-portfolio/.
If you deploy to a sub-path (e.g. /log-portfolio/ instead of /), set the base option in vite.config.js to match: base: '/log-portfolio/'. This ensures all asset URLs resolve correctly.

​
Vercel and Netlify

Both platforms auto-detect Vite projects. Connect your GitHub repository and configure:
SettingValue
Build commandnpm run build
Output directorydist
Node.js version18 or later
No additional configuration is needed — push to main and your portfolio deploys automatically.

​
Any Static CDN

Copy the entire dist/ directory to any object storage bucket (AWS S3, Cloudflare R2, Google Cloud Storage) configured for static website hosting. Set index.html as the default document.
The contact form in the Outlook Express app does not send real emails. When a visitor submits the form, it shows a two-second animated “Sending Message…” progress dialog and then a confirmation dialog reading “Message successfully sent to Outbox.” No email is dispatched. To add real email delivery, wire up the form’s onSubmit handler in Desktop.js to a service like Resend, EmailJS, or a serverless function endpoint.

​
Next Steps

Now that the dev server is running, you’re ready to make the portfolio your own. Head to the customization guide to replace the placeholder bio, project files, skills, blog content, and contact details with real information.

Customize Your Content

Step-by-step instructions for updating every piece of user-facing text, project data, and skill percentages in Log Portfolio.

Build docs developers (and LLMs) love

Get started for freeTalk to us