Skip to main content

Documentation Index

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

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

BorderedPanel is the primary layout building block of the Y2K Webring portfolio. It wraps any content in a dark, semi-transparent container framed by a thick neon border and an offset colored box-shadow — the signature “chunky” look of the project. Use it whenever you need to visually group content on the page: skill sections, project cards, the about bio, or any widget that should feel like a glowing terminal pane.

​
Props

​
children
ReactNode
required
The content to render inside the panel. Any valid JSX is accepted.
​
color
string
default:"magenta"
Controls the border color and title label color. Must be one of the three Y2K palette values: "magenta", "lime", or "cyan". Resolves to the border-chunky-{color} utility class (see Color Variants).
​
className
string
default:"\"\""
Additional Tailwind or custom class names merged onto the root element. Useful for overriding width, margin, or grid placement from a parent layout.
​
title
string
Optional. When provided, renders a floating [TITLE] label absolutely positioned above the top-left corner of the panel. The label uses the font-display (VT323) typeface, is uppercased with wide letter-spacing, and is tinted to match the chosen color.
​
animated
boolean
default:"false"
When true, the panel root element is swapped from a plain <div> to a Framer Motion motion.div that animates in from opacity: 0, y: 10 to opacity: 1, y: 0 over 300ms. Set this on panels that mount on page transitions or conditional renders.

​
Usage Examples

import { BorderedPanel } from '../components/y2k/BorderedPanel';

export function MySection() {
  return (
    <BorderedPanel>
      <p>This content sits inside a magenta-bordered panel.</p>
    </BorderedPanel>
  );
}

​
Color Variants

Three neon color values are supported, matching the Y2K palette defined in tailwind.config:
color valueBorder colorBox-shadow tintHex
"magenta" (default)#ff00aargba(255, 0, 170, 0.5)#ff00aa
"lime"#aeff00rgba(174, 255, 0, 0.5)#aeff00
"cyan"#00e5ffrgba(0, 229, 255, 0.5)#00e5ff
When a title is provided the label text adopts the same color via text-y2k-{color}.

​
CSS Classes

The visual frame is applied through the border-chunky-{color} utility classes defined in assets/main.css. Each variant sets:
  • border-width: 2px; border-style: solid — the outer frame.
  • box-shadow: 4px 4px 0px 0px rgba({color-rgb}, 0.5) — the hard, offset neon shadow that gives the panel its three-dimensional Y2K depth.
The base panel classes are always applied: 
bg-y2k-black/80   /* near-opaque black background at 80% opacity */
backdrop-blur-sm  /* 4px blur of content behind the panel */
p-6               /* 1.5rem inner padding on all sides */
relative          /* establishes a containing block for the title label */
The title label positions itself with: 
absolute -top-4 left-4   /* floats 1rem above the panel top edge */
bg-y2k-black px-2        /* solid black chip to cut through the border line */
font-display text-xl     /* VT323 monospace at 1.25rem */
tracking-widest uppercase /* 0.1em letter-spacing, all caps */

Build docs developers (and LLMs) love

Get started for freeTalk to us