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.

The Outlook Express window (Y) is a contact form disguised as a Windows 98 email client. Visitors fill in their email address, a subject, and a message body, then click Send. The app plays a brief sending-animation modal before confirming that the message was delivered to the Outbox — all purely cosmetic, with no real email sent.

​
Visual Design

The window is composed of three layers stacked vertically: Toolbar — a row of icon buttons in the classic Outlook Express style. Send shows a Send arrow icon (text-blue-600) above its label; Attach shows a Paperclip icon (text-gray-600). Both buttons use win-button styling with hover:win-border and active:win-border-inset states. A thin bg-gray-400 vertical divider separates the two buttons. Email form — four labeled rows inside a <form>:
FieldTypeValue / PlaceholderConstraint
Totext (readonly)developer@portfolio.comNot editable, bg-gray-100
Fromemailvisitor@internet.comrequired
SubjecttextJob Opportunityrequired
Body<textarea>Type your message here...required, fills remaining height
All input fields use win-border-inset styling. Labels are right-aligned in a fixed w-16 column. Sending overlay — when isSending is true, an absolute-positioned bg-black/20 overlay covers the window and shows a win-border win-bg dialog containing:
  • A Mail icon with animate-bounce text-blue-600
  • A bold Sending Message... label
  • An indeterminate-style progress bar: bg-blue-800 w-1/2 animate-[slide_1s_infinite]

​
Send Flow

1

Visitor fills the form

The From, Subject, and Body fields are all required. The browser’s native validation prevents submission if any are empty.
2

onSubmit fires

The <form onSubmit={handleSubmit}> handler sets isSending to true. The Send toolbar button is also wired to the same handler and is disabled (disabled={isSending}) while the animation plays.
3

Sending modal plays for 2 seconds

A setTimeout of 2000 ms runs. During this window the overlay is visible, showing the bouncing mail icon and sliding progress bar.
4

Success state appears

After 2 seconds, isSending becomes false and isSent becomes true. The entire form is replaced with a centered success card:
<div className="win-bg win-border p-4 max-w-sm text-center flex flex-col items-center gap-4">
  <Mail size={48} className="text-blue-600" />
  <p>Message successfully sent to Outbox.</p>
  <button className="win-button px-6 py-1 mt-2" onClick={() => setIsSent(false)}>
    OK
  </button>
</div>
5

OK resets the form

Clicking OK calls setIsSent(false), which returns the component to its default state and shows the blank compose form again.

​
State Reference

State variableTypeInitial valuePurpose
isSendingbooleanfalseShows/hides the sending overlay
isSentbooleanfalseShows/hides the success screen

​
Customizing

1

Change the To address

Find the Y component in components/Desktop.js and locate the readonly To input. Edit the value prop:
<input
  type="text"
  value="your@email.com"  // ← change this
  readOnly
  className="flex-1 win-border-inset px-1 py-0.5 bg-gray-100"
/>
2

Wire up a real submission (optional)

The handleSubmit function currently only toggles local state. To send a real email, call a serverless function, Formspree endpoint, or EmailJS method inside the onSubmit handler before (or instead of) setting isSending. Keep the 2-second delay as loading feedback while the API call resolves.
3

Change the sending duration

Edit the 2000 millisecond value in the setTimeout inside handleSubmit to make the sending animation shorter or longer.
No email is sent by this form out of the box. The entire flow — isSending overlay, isSent success screen, and OK reset — is purely cosmetic. You must integrate a backend or third-party email service to actually deliver messages.
The From field uses type="email", which means browsers will validate the format before the form is submitted. If you want to accept any string (e.g. a Twitter handle), change it to type="text".

Build docs developers (and LLMs) love

Get started for freeTalk to us