Skip to main content

Documentation Index

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

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

The Contact page (/contact) reimagines a contact form as an arcade high-score entry screen. The page headline — INSERT MESSAGE TO CONTINUE — is rendered in GlitchText. Below it, a two-column layout places the form on the left and the leaderboard plus social links on the right. The form is labelled ENTER INITIALS and mirrors the three-character name entry UI of classic arcade machines. On successful submission a full-overlay animation replaces the form with SCORE SUBMITTED! for five seconds before automatically resetting.

​
Form Panel

The form holds three fields and one submit button. When submitted === true, a motion.div overlay scales in from scale: 0 and displays the success message, then the component resets after 5000 ms.

​
Form Fields

PLAYER NAME

Label: PLAYER NAME Input type: text maxLength: 3 Placeholder: AAA Required: Yes Text is forced to uppercase and only three characters are accepted, replicating the classic three-initial arcade name-entry UI.

COMM LINK (EMAIL)

Label: COMM LINK (EMAIL) Input type: email Required: Yes Standard email validation via the browser’s built-in type="email" constraint.

TRANSMISSION

Label: TRANSMISSION Element: <textarea rows={4} /> Required: Yes Multi-line message body; resize is disabled to preserve the card layout.
// Form field pattern
<div>
  <label className="block font-hud text-xl text-neon-cyan mb-2">
    PLAYER NAME
  </label>
  <input
    type="text"
    required
    maxLength={3}
    placeholder="AAA"
    className="w-full bg-arcade-black border-2 border-gray-600
               focus:border-neon-cyan text-white font-pixel text-2xl
               p-4 uppercase outline-none transition-colors"
    value={form.name}
    onChange={(e) => setForm({ ...form, name: e.target.value })}
  />
</div>
All inputs use an idle border colour that transitions to neon-cyan on focus. The outline-none removes the browser default focus ring in favour of the border colour transition.

​
Submit Button

<PixelButton type="submit" className="w-full flex justify-center items-center gap-3 text-xl py-4">
  <SendIcon size={24} /> SUBMIT SCORE
</PixelButton>
PixelButton defaults to the primary variant with a neon-magenta background that transitions to neon-cyan on hover. Framer Motion whileHover and whileTap scale props are built into the component.

​
Success Overlay Animation

{submitted && (
  <motion.div
    initial={{ scale: 0 }}
    animate={{ scale: 1 }}
    className="absolute inset-0 flex flex-col items-center justify-center bg-arcade-navy z-10"
  >
    <h3 className="font-pixel text-3xl text-neon-green mb-4 animate-pulse">
      SCORE SUBMITTED!
    </h3>
    <p className="font-hud text-xl text-white">
      TRANSMISSION SUCCESSFUL.
    </p>
  </motion.div>
)}
The overlay pops into place over the form via Framer Motion’s default spring. After 5 000 ms, setTimeout calls setSubmitted(false), collapsing the overlay and restoring the blank form.

​
High Scores Panel

The leaderboard displays four rows from the high-scores array:
RankNameScoreMessage
1STREC999,999HIRED ON THE SPOT
2NDDEV850,000NICE CSS TRICKS
3RDMOM700,000VERY PROUD OF U
4THBOT000,001BEEP BOOP SPAM
const highScores = [
  { rank: "1ST", name: "REC", score: "999,999", msg: "HIRED ON THE SPOT" },
  { rank: "2ND", name: "DEV", score: "850,000", msg: "NICE CSS TRICKS"  },
  { rank: "3RD", name: "MOM", score: "700,000", msg: "VERY PROUD OF U"  },
  { rank: "4TH", name: "BOT", score: "000,001", msg: "BEEP BOOP SPAM"   },
];
Each row is a flex row with rank and name on the left, score in neon-cyan in the centre, and the message on the right (hidden on small screens). The first-place rank renders in neon-magenta; all others in a subdued colour.

​
Social Links (EXTRA CREDITS)

Below the leaderboard, three circular social link icons are labelled EXTRA CREDITS: 
const SocialLink = ({ icon, label, href, color }) => (
  <a href={href} className="group flex flex-col items-center gap-3 hover:-translate-y-2 transition-transform">
    <div className={`w-16 h-16 rounded-full bg-arcade-navy border-4 border-gray-600
                     group-hover:border-neon-yellow flex items-center justify-center
                     transition-all ${color}`}>
      {icon}
    </div>
    <span className="font-hud text-lg text-gray-400 group-hover:text-neon-yellow transition-colors">
      {label}
    </span>
  </a>
);
The three social links defined in the source:
IconLabelhref
GitHubGITHUB#
LinkedInLINKEDIN#
MailEMAIL#
Each link lifts upward on hover and glows with a neon-yellow border and shadow. Replace each href="#" with the real profile URL before deploying.

​
Customisation

1

Wire up the form submission

The current handleSubmit function calls event.preventDefault() and sets the success state. Replace this with a fetch call to a form API (e.g. Formspree, EmailJS, or a custom endpoint) before setting the success state.
2

Update high-score entries

Edit the high-scores array to add humour relevant to your audience. Each entry needs rank, name (3 chars), score, and msg fields.
3

Replace social link URLs

Set the href props on the three social link components from "#" to your actual GitHub, LinkedIn, and email (mailto:) URLs.
4

Add a fourth social link

Append a new social link component with an icon, label, href, and colour class inside the social links container. Any Lucide React icon can be used.
5

Change the success message

Update SCORE SUBMITTED! and TRANSMISSION SUCCESSFUL. in the success overlay to a personalised message.
The maxLength={3} constraint on PLAYER NAME is intentional and echoes the three-character name limit of classic arcade score screens. If you prefer to collect full names, remove the maxLength attribute and adjust the input styling accordingly. The uppercase transform is controlled by the uppercase Tailwind class, not the input element itself.

Build docs developers (and LLMs) love

Get started for freeTalk to us