Skip to main content

Documentation Index

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

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

FakeBrowserChrome wraps the entire application in a simulated browser window that mimics the look of Netscape Navigator 4. It is the outermost visual container in the component tree — everything the user sees, including FrameNav and all page content, is rendered inside its scrollable viewport area.

​
Props

​
children
ReactNode
required
The application subtree to render inside the browser’s “viewport” area. In the portfolio, this receives the layout shell that contains FrameNav and the React Router <Outlet />.

​
Usage

In assets/main.js, the App component mounts FakeBrowserChrome as the root visual wrapper, with CustomCursor rendered alongside it as a sibling: 
function App() {
  return (
    <FakeBrowserChrome>
      <div className="flex flex-col md:flex-row h-full w-full absolute inset-0">
        <FrameNav />
        <main className="flex-1 overflow-y-auto relative z-0 p-4 md:p-8">
          <Outlet />
        </main>
      </div>
    </FakeBrowserChrome>
  );
}
CustomCursor is rendered outside FakeBrowserChrome so its fixed-positioned overlay covers the entire viewport, including the browser chrome itself.

​
Structure

FakeBrowserChrome renders three distinct layers stacked vertically inside a bevel-window flex column, itself wrapped in a min-h-screen bg-black p-2 md:p-4 flex flex-col outer div.

​
1. Title bar

A bg-gradient-to-r from-[#000080] to-[#1084d0] div (classic Win98 navy-to-blue gradient) containing:
  • A Lucide Globe icon (size={14}) in text-y2k-cyan
  • The window title: "Netscape Navigator - [ Portfolio.exe ]" in font-sans text-sm font-semibold
  • Three decorative w-4 h-4 bevel-button squares on the right (minimize/maximize/close — no handlers)

​
2. Navigation toolbar

A bg-y2k-panel border-b-2 border-y2k-panelDark p-2 strip that uses flex flex-col md:flex-row gap-2 items-center to stack vertically on mobile and lay out as a row on desktop. It contains two children: Button group — four icon buttons with bevel-button p-1 styling:
IconLucide componentPurpose
Back arrowArrowLeft (size 16)Decorative back navigation
Forward arrowArrowRight (size 16)Decorative forward navigation
RefreshRefreshCw (size 16)Decorative reload
HomeHouse (size 16)Decorative home
Address bar — a flex-1 div that grows to fill the remaining toolbar width, displaying: 
Location:  https://neocities.dev/portfolio/index.html
The address bar uses a bg-white text-black background with an inset box-shadow (shadow-[inset_2px_2px_0_rgba(0,0,0,0.5)]) to simulate a pressed input field. The URL is static — it does not update as the user navigates.

​
3. Viewport / content area

The children prop is rendered here inside: 
flex-1 relative overflow-hidden bg-y2k-bg bg-grid-pattern animate-bg-drift
The bg-grid-pattern class applies a subtle dot-grid background, and animate-bg-drift slowly drifts the background position to create a living, ambient effect behind the page content.

​
Full structural overview

<div className="min-h-screen bg-black p-2 md:p-4 flex flex-col">
  <div className="bevel-window flex-1 flex flex-col overflow-hidden">

    {/* Title bar */}
    <div className="bg-gradient-to-r from-[#000080] to-[#1084d0] text-white px-2 py-1 flex justify-between items-center border-b-2 border-y2k-panelDark">
      <div className="flex items-center gap-2">
        <Globe size={14} className="text-y2k-cyan" />
        <span className="font-sans text-sm font-semibold">Netscape Navigator - [ Portfolio.exe ]</span>
      </div>
      <div className="flex gap-1">
        {/* 3× decorative w-4 h-4 bevel-button squares */}
      </div>
    </div>

    {/* Toolbar */}
    <div className="bg-y2k-panel border-b-2 border-y2k-panelDark p-2 flex flex-col md:flex-row gap-2 items-center">
      <div className="flex gap-2">
        <button className="bevel-button p-1"><ArrowLeft size={16} /></button>
        <button className="bevel-button p-1"><ArrowRight size={16} /></button>
        <button className="bevel-button p-1"><RefreshCw size={16} /></button>
        <button className="bevel-button p-1"><House size={16} /></button>
      </div>
      <div className="flex-1 w-full flex items-center gap-2 bg-white text-black px-2 py-1 border-2 border-y2k-panelDark shadow-[inset_2px_2px_0_rgba(0,0,0,0.5)]">
        <span className="font-sans text-sm text-gray-500">Location:</span>
        <span className="font-mono text-sm truncate">https://neocities.dev/portfolio/index.html</span>
      </div>
    </div>

    {/* Viewport */}
    <div className="flex-1 relative overflow-hidden bg-y2k-bg bg-grid-pattern animate-bg-drift">
      {children}
    </div>

  </div>
</div>
All navigation buttons in the toolbar are decorative only — they have no onClick handlers. Actual page navigation is handled by React Router NavLink elements inside FrameNav.
The outer min-h-screen bg-black p-2 md:p-4 div creates a thin black border around the browser window on larger screens, making the whole interface look like it’s floating on a dark desktop background.

Build docs developers (and LLMs) love

Get started for freeTalk to us