Skip to main content

Documentation Index

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

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

Every piece of shareware from the late nineties shipped with a README listing the same minimum hardware: a Pentium II, 64 MB of RAM, and a 56k modem. SystemRequirements turns that convention into a portfolio joke — a black terminal panel wrapped in a teal BeveledPanel chrome border where genuine developer skill tiers share equal billing with period-authentic machine specs. The panel is divided into two VT323-font sections: MINIMUM SPECIFICATIONS (OS, Processor, Memory, Graphics, Network) in lime-green headings, and DEVELOPER SKILLS (Required, Recommended, Optimal, Unsupported) in pink headings. “Internet Explorer 6” lands in the Unsupported row, right where it belongs.

​
Props

This component accepts no props. All content is fully static and hardcoded to serve as a decorative, self-contained panel. Drop it anywhere in your layout with no configuration required.
SystemRequirements is wrapped in BeveledPanel with variant="teal" and title="SYSTEM REQUIREMENTS". The panel’s max-width is constrained to max-w-md and centered with mx-auto, making it best suited for sidebar or centered-column placements rather than full-width sections.

​
Usage

import { SystemRequirements } from './components/SystemRequirements';

export default function SkillsPage() {
  return (
    <section className="py-12">
      <h2 className="font-pixel text-center text-retro-teal text-2xl mb-8">
        About This Developer
      </h2>

      {/* No props needed — just render it */}
      <SystemRequirements />
    </section>
  );
}
The rendered panel displays the following static content: MINIMUM SPECIFICATIONS
FieldValue
OSWindows 98 / Mac OS 9
ProcessorPentium II 233 MHz
Memory64 MB RAM
Graphics800x600 resolution, 256 colors
Network56k Dial-up Modem
DEVELOPER SKILLS
LevelTechnologies
RequiredHTML, CSS, JavaScript
RecommendedReact, Tailwind, Git
OptimalTypeScript, Node.js, Caffeine
UnsupportedInternet Explorer 6

​
Customization tips

Editing the skill tiers — Because the content is hardcoded, updating your actual skills means editing the component source directly. The two-column flex layout (label in a w-24 text-gray-400 span, value as a trailing text node) makes it easy to add or remove rows without breaking the alignment.
Swapping the BeveledPanel variant — SystemRequirements passes variant="teal" to BeveledPanel. If you’ve added other color variants to that component (e.g. "pink" or "lime"), you can fork SystemRequirements and pass a different variant prop to match an alternate section’s color story.
Placing it alongside other panels — The max-w-md mx-auto constraint means the panel floats comfortably in a two-column grid alongside components like WebringNav or a GuestbookForm. Use a grid grid-cols-2 gap-8 wrapper on a wider breakpoint to create a classic GeoCities sidebar layout.

Build docs developers (and LLMs) love

Get started for freeTalk to us