Skip to main content

Documentation Index

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

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

The Writing page (/writing) archives the developer’s published technical articles in a scroll-friendly vertical layout. Each article is presented as a “scroll” — a parchment-like card containing a date stamp, title, an excerpt with a styled drop-cap first letter, and a read-more call to action. Articles are separated by a decorative < * > divider that echoes the site’s code-syntax aesthetic. The page closes with an archive footer noting that more articles are forthcoming.

Route & Navigation

PropertyValue
Route/writing
Nav LabelSCROLLS
Page HeadingSCROLLS & SCRIPTS
Subheading// ARCHIVED INCANTATIONS AND THEORIES

Visual Structure

Article Cards

Articles are rendered in a single-column list. Each card contains:
  • Date stamp — formatted as YYYY.MM.DD in a muted monospace style
  • Title — uppercase, large, with letter-spacing
  • Excerpt — two to three sentences of article preview; the first letter is enlarged and styled as a typographic drop-cap
  • Read more CTA — a text link or button labeled in the site’s arcane voice

Article Index

DateTitleTopic
2023.10.14THE ALCHEMY OF STATE MANAGEMENTState management patterns; prop-drilling vs. React Context vs. external stores
2023.07.22SUMMONING DEMONS: A GUIDE TO BACKGROUND WORKERSBackground job processing, queues, and worker architecture
2023.03.05WARDING AGAINST INJECTION ATTACKSInput sanitization, SQL injection, and XSS defense

Drop-Cap Styling

The first letter of each article excerpt is styled as a drop-cap using CSS:
/* Drop-cap first letter pattern */
.article-excerpt::first-letter {
  font-size: 3rem;
  font-weight: 700;
  float: left;
  line-height: 1;
  margin-right: 0.15em;
  color: var(--accent-color);
}
This effect is applied via a Tailwind class or a scoped CSS rule on the excerpt container.

Article Separator

Between each article, a decorative divider is rendered:
< * >
This is a plain text or SVG element centered between cards, styled in the muted accent palette. After the final article, a footer line closes the archive:
END OF ARCHIVE // MORE SCROLLS CURRENTLY BEING TRANSCRIBED
This is a static string — update it if more articles are published.

Animations

Article cards entrance-animate with a staggered fade-up on page load. Each card has a slightly longer delay than the previous, creating a cascading reveal.
// Staggered article entrance pattern
articles.map((article, index) => (
  <motion.article
    key={article.slug}
    initial={{ opacity: 0, y: 24 }}
    animate={{ opacity: 1, y: 0 }}
    transition={{ duration: 0.5, delay: index * 0.15 }}
  >
    {/* Article card content */}
  </motion.article>
))
The “read more” links currently point to href="#" placeholders. The Writing page is designed to hold excerpt previews — full article content would live at dedicated routes (e.g., /writing/alchemy-of-state-management) which are not yet implemented in the router.

Customization

Adding a new article: Append an entry to the articles data array. Articles are rendered in array order — add new entries at the top of the array to show the most recent article first.
// Article entry shape
{
  date: "2024.02.10",
  title: "THE TITLE OF YOUR ARTICLE",
  excerpt: "Opening paragraph text that will display on the writing page. The first letter will be styled as a drop-cap automatically.",
  slug: "the-title-of-your-article",
  readMoreUrl: "/writing/the-title-of-your-article"
}
Changing the date format: The YYYY.MM.DD format is hardcoded as a string in each article entry. There is no date-formatting library in use — if you want to change the separator character (e.g., - instead of .), update the string values directly in the data array. Removing the drop-cap: Delete or override the ::first-letter CSS rule on the excerpt container. The rest of the card layout is unaffected. Updating the archive footer: Find the static footer string at the bottom of the Writing component’s JSX and edit the text directly.
The < * > separator between articles is a great place to add a small animated element — a slowly pulsing glow or a rotating asterisk — without disrupting the reading flow. Keep any motion subtle to avoid distracting from the article text.
If you add more than five or six articles without implementing pagination or a “load more” mechanism, the Writing page will grow very long. Consider adding a client-side limit that shows the three most recent articles by default, with an expansion toggle.

Build docs developers (and LLMs) love