Skip to main content

Documentation Index

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

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

The Articles page is one of the most elaborate set-pieces in the portfolio — a pixel-faithful recreation of the iTunes 4 library interface, repurposed as a reading list. The left sidebar carries Library and Playlists navigation sections just like the real application; the right pane is a column-sorted track list where each row is an article. Clicking a row “plays” the article, highlighting it in blue exactly as iTunes highlights the currently playing track. A search bar in the toolbar filters the list in real time.

​
Visual overview

The layout is a two-panel split: a narrow sidebar on the left (approximately 200 px wide) with a frosted light-blue background, and a wider main pane on the right with a white glass surface. The sidebar contains two sections — Library (with an “Articles” item highlighted in blue) and Playlists (with Design and Development category entries). The main pane has a fixed column header row with five columns: #, Name, Category, Date, and Time. Below the header, article rows render in a list. The selected row highlights in a characteristic iTunes blue, replacing the row number with a ▶ icon.

Sidebar — Library

Static “Articles” item, always shown highlighted in blue. The Library section is decorative in the current build — clicking it does not filter the list.

Sidebar — Playlists

Two category items: Design and Development. These are rendered but category filtering via sidebar click is not wired up in the current build.

Search bar

A rounded search input in the toolbar area above the column headers. Typing filters the visible rows to articles whose title or category matches the query.

Track rows

Each article is a row. Hover state shows a lighter blue tint; selected state shows the full iTunes blue highlight. A ▶ icon replaces the row number on the active row.

​
Component structure

// Simplified Articles page structure
import { useState } from 'react';
import { motion } from 'framer-motion';

const articles = [
  { id: 1, title: 'The Return of Skeuomorphism',  category: 'Design',      date: 'Oct 2025', duration: '5 min read'  },
  { id: 2, title: 'CSS Glassmorphism Techniques',  category: 'Development', date: 'Sep 2025', duration: '8 min read'  },
  { id: 3, title: 'Why We Miss Windows Aero',      category: 'Opinion',     date: 'Aug 2025', duration: '4 min read'  },
  { id: 4, title: 'Framer Motion for Beginners',   category: 'Tutorial',    date: 'Jul 2025', duration: '12 min read' },
  { id: 5, title: 'The Psychology of Glossy Buttons', category: 'Design',   date: 'Jun 2025', duration: '6 min read'  },
];

export default function Articles() {
  const [selected, setSelected] = useState(null);

  return (
    <div className="itunes-shell">
      {/* Left sidebar */}
      <aside className="itunes-sidebar">
        <section>
          <h5>LIBRARY</h5>
          <div className="library-item active">Articles</div>
        </section>
        <section>
          <h5>PLAYLISTS</h5>
          <div className="playlist-item">Design</div>
          <div className="playlist-item">Development</div>
        </section>
      </aside>

      {/* Main pane */}
      <main className="itunes-main">
        {/* Search bar */}
        <input type="text" placeholder="Search" className="itunes-search" />

        {/* Column headers */}
        <div className="track-header">
          <span>#</span><span>Name</span><span>Category</span>
          <span>Date</span><span>Time</span>
        </div>

        {/* Article rows */}
        {articles.map((article, i) => (
          <div
            key={article.id}
            className={`track-row ${selected?.id === article.id ? 'selected' : ''}`}
            onClick={() => setSelected(article)}
          >
            <span>{selected?.id === article.id ? '▶' : i + 1}</span>
            <span>{article.title}</span>
            <span>{article.category}</span>
            <span>{article.date}</span>
            <span>{article.duration}</span>
          </div>
        ))}
      </main>
    </div>
  );
}

​
The articles data array

Articles are stored in the articles array in the Articles route component inside assets/main.js. Locate it by searching for "The Return of Skeuomorphism": 
// In assets/main.js — locate the articles array (search for "The Return of Skeuomorphism")
const articles = [
  {
    id:       1,
    title:    'The Return of Skeuomorphism',
    category: 'Design',       // Used in the Category column
    date:     'Oct 2025',     // Displayed in the Date column as-is
    duration: '5 min read',   // Displayed in the Time column
  },
  // Add more articles here — they render as new track rows
];
The five articles in the default build span four categories: Design, Development, Opinion, and Tutorial. Only Design and Development appear as sidebar playlist items in the current build. To add playlist items for Opinion and Tutorial, add the corresponding sidebar entries in the Articles component.

​
Key interactions

InteractionBehaviour
Click a track rowSets selected to the article object; row highlights in iTunes blue; # column shows ▶
Hover on track rowLighter blue background tint on hover
Click another rowMoves the ▶ highlight to the new row
Search barFilters visible rows to those matching the typed query (title and category match)
Sidebar itemsRendered but not wired to filter state in the current build
The column headers (#, Name, Category, Date, Time) are not clickable sort triggers — there is no sort state in the component. They are static labels styled to match the iTunes column header bar appearance.

Build docs developers (and LLMs) love

Get started for freeTalk to us