Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/webmaster/llms.txt

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

The Work page (/work) renders employment history in the style of a classic HTML forum post table. Three jobs are listed inside individual bevel-container wrappers, each housing a two-cell <table> row: a blue-tinted left cell with the company name, date range, and email link, and a white right cell with the role title, italic humorous commentary, and a randomly-generated “Logged from IP: 192.168.1.X” footer. The section title is rotated slightly and styled as a yellow sticky note.

​
Route

PathComponent function
/workce() in assets/main.js

​
Work History Data Array

All three entries are defined in the R constant above ce(): 
const R = [
  {
    date:    "Oct 2021 - Present",
    name:    "TechCorp Inc.",
    role:    "Senior Webmaster",
    comment: "They pay me to center divs and argue about tabs vs spaces. 10/10 would recommend.",
    email:   "coolguy@techcorp.com",
  },
  {
    date:    "Jan 2019 - Sep 2021",
    name:    "Startup.io",
    role:    "Full Stack Ninja",
    comment: "Drank a lot of La Croix. Wrote a lot of React. Survived 3 pivots.",
    email:   "ninja@startup.io",
  },
  {
    date:    "Jun 2017 - Dec 2018",
    name:    "Agency Digital",
    role:    "Frontend Developer",
    comment: "Made things 'pop' for clients. Learned how to say 'that's out of scope' politely.",
    email:   "dev@agency.net",
  },
];

​
Section Title

The h2 heading uses a yellow background, dashed black border, and a -rotate-2 transform to suggest a sticky note pinned to the page: 
<h2 className="text-5xl text-center text-black mb-8 font-comic font-bold bg-yellow-300 inline-block px-4 py-2 border-4 border-dashed border-black transform -rotate-2">
  Where I've Worked (Real Jobs lol)
</h2>
The inline-block on the h2 means the yellow background only covers the text width, not the full viewport. The text-center on the parent div keeps it centred.

​
Table Structure

Each work entry is rendered as a standalone <table> inside a bevel-container bg-silver p-2. The table has no header row — just a single <tr> with two <td> cells: 
<div className="bevel-container bg-silver p-2">
  <table className="w-full bg-white border-collapse border border-gray-400">
    <tbody>
      <tr>
        <td className="w-1/3 bg-blue-100 p-3 border border-gray-400 align-top">
          {/* Left cell: company info */}
        </td>
        <td className="w-2/3 p-4 border border-gray-400 align-top relative">
          {/* Right cell: role + commentary */}
        </td>
      </tr>
    </tbody>
  </table>
</div>

​
Left Cell Contents

The blue-tinted left cell (bg-blue-100) holds three elements:

Company Name

Rendered as font-bold text-blue-900 font-comic.

Date Range

Rendered as text-sm text-gray-600 font-pixel mt-1.

Email Link

An href="mailto:..." link styled text-blue-600 hover:text-hotpink underline text-sm font-pixel, labelled [Email Me].
<td className="w-1/3 bg-blue-100 p-3 border border-gray-400 align-top">
  <div className="font-bold text-blue-900 font-comic">{s.name}</div>
  <div className="text-sm text-gray-600 font-pixel mt-1">{s.date}</div>
  <div className="mt-4">
    <a
      href={`mailto:${s.email}`}
      className="text-blue-600 hover:text-hotpink underline text-sm font-pixel"
    >
      [Email Me]
    </a>
  </div>
</td>

​
Right Cell Contents

The right cell is relative to allow the entry-number badge to be positioned absolutely in the top-right corner: 
<td className="w-2/3 p-4 border border-gray-400 align-top relative">
  {/* Entry counter in top-right corner */}
  <div className="absolute top-2 right-2 text-gray-400 font-pixel text-xs">
    Entry #{R.length - r}
  </div>

  {/* Role title */}
  <h3 className="text-xl font-bold text-turquoise mb-2">{s.role}</h3>

  {/* Humorous italic comment */}
  <p className="font-comic text-gray-800 italic">"{s.comment}"</p>

  {/* Fake IP footer */}
  <div className="mt-4 pt-4 border-t border-dotted border-gray-400 text-xs font-pixel text-gray-500">
    Logged from IP: 192.168.1.{Math.floor(Math.random() * 255)}
  </div>
</td>
The Math.floor(Math.random() * 255) IP suffix is computed fresh on every render. It is not stored in state, so it re-randomises on every React re-render. This is intentional for the comedic effect — it is not a bug.

​
Entry Numbering

The entry counter counts backwards (R.length - r) so that the most recent job shows Entry #3 and the oldest shows Entry #1, mimicking a guestbook that started counting from 1 at the beginning.

​
Customisation Guide

// assets/main.js — R array before ce()
{
  date:    "Mar 2024 - Present",
  name:    "Freelance",
  role:    "Independent Webmaster",
  comment: "Finally, no one can tell me tabs are wrong.",
  email:   "me@mysite.com",
},

Build docs developers (and LLMs) love

Get started for freeTalk to us