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.

Every piece of user-facing content in Log Portfolio — the bio, the project list, the skill meters, the blog post, the testimonials, and the contact address — lives in components/Desktop.js. There is no backend, no CMS, and no environment variables to configure. Personalizing the entire portfolio is a single-file edit.
Because all content is co-located in components/Desktop.js, you can fork the project and update your personal details in one sitting without touching any other file. The sections below describe what to look for and where to find it in the file.

​
About Me (AboutMe.txt)

The About Me window is a replica of Windows Notepad. The bio text is a template literal string passed directly as the children of a whitespace-pre-wrap div. Line breaks in the source code become line breaks in the rendered output, so formatting is significant. Find the Notepad component near the top of components/Desktop.js — it’s the component whose root element has bg-white font-pixel text-sm and a menu bar with File, Edit, Format, View, and Help entries. Replace the content inside the template literal: 
<div className="flex-1 p-2 overflow-auto outline-none whitespace-pre-wrap">
  {`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)

> PROPERTIES:
Size: 1 lifetime
Created: 1990s
Modified: Today

"Best viewed in Internet Explorer 6 at 800x600."
`}
</div>
Edit the greeting, the SKILLS list, and the PROPERTIES section. Keep the backtick template literal syntax intact — it preserves newlines and indentation without needing <br /> tags.

​
Projects (My Computer)

The Projects window is an Explorer-style file browser. Its file list is defined as an array near the top of components/Desktop.js, just above the Projects component definition. Each entry in the array appears as a file in the large icons, list, and details views. 
const projectFiles = [
  { id: 1, name: 'E-Commerce.exe',     type: 'Application',   size: '1.2 MB', date: '10/24/2001' },
  { id: 2, name: 'Portfolio_v1.html',  type: 'HTML Document', size: '45 KB',  date: '08/15/2001' },
  { id: 3, name: 'Secret_Project',     type: 'File Folder',   size: '',       date: '11/02/2001' },
  { id: 4, name: 'meme.bmp',           type: 'Bitmap Image',  size: '2.4 MB', date: '01/01/2001' },
];
Replace each entry with your own projects. The type field controls which icon is rendered:
type valueIcon shown
'Application'Blue document / file icon
'HTML Document'Blue document / file icon
'File Folder'Yellow folder icon
'Bitmap Image'Purple image icon
Use MM/DD/YYYY date format for the retro aesthetic, and leave size as an empty string '' for folders.

​
Skills (Control Panel)

The Skills window shows animated progress bars, one per skill. The skill definitions are stored in an array just above the Control Panel component in components/Desktop.js. Each entry drives a progress bar that counts up from zero to the specified level on mount. 
const skillsList = [
  { name: 'React.js',     icon: <Globe className="text-blue-500" />,    level: 90 },
  { name: 'TypeScript',   icon: <Cpu className="text-blue-700" />,      level: 85 },
  { name: 'Node.js',      icon: <Database className="text-green-600" />, level: 80 },
  { name: 'CSS/Tailwind', icon: <Monitor className="text-cyan-500" />,  level: 95 },
];
Replace the skill names, icons, and levels with your own. The level value is a number from 0 to 100 — a level of 95 animates the bar all the way to 95% width. Bars animate sequentially with a 500ms stagger between each one.
Use icons that visually map to the technology — <Globe> for web, <Database> for databases, <Cpu> for systems work. All icons are available from lucide-react.

​
Blog (Internet Explorer)

The Blog window is styled to look like an early-2000s Geocities page. Unlike the other sections, it is not driven by a data array — the blog post content is written directly as JSX inside the Internet Explorer component in components/Desktop.js. Look for the component whose root has bg-black font-comic and a <marquee> element. Update these three elements inside that component:

​
Post title and body

<h2 className="text-2xl text-cyan-400">My Web Development Journey</h2>
<p className="mb-4 text-gray-300 leading-relaxed">
  {`Today I discovered something amazing called "React". It's like DHTML but way more complicated!`}
</p>

​
Marquee ticker

<marquee className="bg-blue-900 text-lime-400 py-1 ...">
  LATEST UPDATE: Learned how to use CSS Grid! No more tables!
</marquee>

​
Visitor counter

The counter is a hardcoded string rendered in a retro LED-style block. Change "00042" to any 5-digit string: 
<div className="inline-block bg-black border-2 border-gray-600 p-1 font-pixel text-red-500 text-xl tracking-[0.2em]">
  00042
</div>

​
Testimonials (MSN Messenger)

The Testimonials window mimics MSN Messenger. It reads from a messages array defined just above the MSN Messenger component in components/Desktop.js. The component auto-plays the messages one by one with a 2-second delay between each, simulating a live chat conversation. 
const testimonialMessages = [
  { sender: 'Client_99',    text: 'Hey! The new website looks amazing.',        time: '10:02 AM' },
  { sender: 'Me',           text: 'Thanks! I added extra marquee tags for you.', time: '10:03 AM' },
  { sender: 'Client_99',    text: 'lol perfect. Ship it.',                       time: '10:04 AM' },
  { sender: 'Manager_Bob',  text: 'Did you finish the CSS updates?',             time: '10:15 AM' },
];
Replace these with real (or fictional) testimonials. The sender field controls the visual styling:
  • sender === 'Me' — renders the name in gray (text-gray-600) to represent your outgoing messages
  • Any other sender value — renders the name in blue (text-blue-700) and uses font-comic for the message text
Add as many entries as you like — the component will reveal them in order every 2 seconds after the window opens.

​
Contact Email (Outlook Express)

The Outlook Express window renders a fake email compose form. The To: field is a read-only input showing the destination email address. Find the Outlook Express component in components/Desktop.js — it’s the component that renders a form with To, From, and Subject fields. 
<input
  type="text"
  value="developer@portfolio.com"
  readOnly={true}
  className="flex-1 win-border-inset px-1 py-0.5 bg-gray-100"
/>
Change "developer@portfolio.com" to your real email address. Note that the form does not actually send email — clicking the Send button shows a “Message successfully sent to Outbox” dialog, but no email is dispatched. To enable real email delivery, integrate a service like Resend, Formspree, or EmailJS by adding a fetch call in the form’s submit handler inside the Outlook Express component.
After making content edits, run npm run build and inspect the dist/ folder to confirm Vite has bundled all changes correctly before deploying. The build output in dist/ is what gets served to visitors.

Build docs developers (and LLMs) love

Get started for freeTalk to us