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.

VialCard is the primary project display component in Dev Nexus. Each card is styled to resemble a glass laboratory vial — rounded at the top, flat at the bottom — containing a glowing liquid whose fill level rises on hover. In its collapsed state the card shows a beaker icon, the project title, and a decorative label. Clicking the card toggles an expanded state (animated via Framer Motion’s AnimatePresence) that reveals a project description, a row of tech-stack badges, and three action buttons. Four color themes let each vial carry a distinct neon hue.

​
Props

​
title
string
required
The project name displayed in the card header and used as the vial label.
​
description
string
required
A short project description shown only in the expanded state. Keep it to 1–3 sentences for best layout.
​
tech
string[]
required
An array of technology names rendered as pill badges in the expanded state. For example: ['React', 'TypeScript', 'Tailwind CSS'].
​
color
'violet' | 'lime' | 'mint' | 'magenta'
required
The theme color applied to the card’s border, text accents, fill gradient, and glow effects.

​
Usage

import VialCard from './components/VialCard';

export default function SpellsPage() {
  return (
    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 p-8">
      <VialCard
        title="Void Crawler"
        description="A headless scraper that navigates JavaScript-rendered pages and exports structured JSON grimoires."
        tech={['Node.js', 'Puppeteer', 'MongoDB']}
        color="violet"
      />
      <VialCard
        title="Rune Ledger"
        description="A double-entry accounting system with a terminal-inspired UI for tracking arcane transactions."
        tech={['React', 'TypeScript', 'PostgreSQL']}
        color="lime"
      />
      <VialCard
        title="Spectral API"
        description="A REST + GraphQL gateway that proxies and caches upstream microservices behind a unified sigil schema."
        tech={['Go', 'GraphQL', 'Redis']}
        color="mint"
      />
    </div>
  );
}

​
Color Themes

Each color value maps to a consistent set of Tailwind utility classes applied to the card’s border, text accents, fill gradient, and box-shadow glow:
color valueBorderText accentGlow class
violetborder-electric-violettext-electric-violetglow-violet
limeborder-neon-limetext-neon-limeglow-lime
mintborder-ghost-minttext-ghost-mintglow-mint
magentaborder-hot-magentatext-hot-magentaglow-magenta

​
Visual Behavior

​
Collapsed state

  • Rounded top (rounded-t-3xl) + flat-ish bottom (rounded-b-lg) create the vial silhouette.
  • A beaker icon and the project title are displayed.
  • A decorative label reads [ POTION CONTAINS SAMPLE INGREDIENTS ].
  • Three floating bubble particles sit at the bottom-left, bottom-center, and bottom-right of the card interior, subtly animated.
  • A colored gradient fill occupies approximately the bottom one-third of the card height, simulating liquid inside the vial.

​
Hover state

  • The fill gradient grows from ~1/3 to ~1/2 of the card height via a Framer Motion whileHover animation, giving the impression of liquid rising.

​
Expanded state (click to toggle)

Clicking anywhere on the card toggles isExpanded via useState. The extra content mounts/unmounts through Framer Motion’s AnimatePresence:
  • Description — the description prop text.
  • Tech badges — each item in the tech array rendered as a rounded pill with the card’s accent color.
  • Action buttons — three labeled icon buttons:
Button labelIconPurpose
INVOCATION (DEMO)Play iconLink to live demo
SOURCE INCANTATIONCode iconLink to source repository
GRIMOIRE ENTRYFile-text iconLink to case study or write-up
Button href values are not passed as props in the current build — they are placeholders inside the component. Update components/VialCard.js to accept demoUrl, sourceUrl, and caseStudyUrl props if you need dynamic links.

​
Customization Tips

Pass dynamic action URLs as props: Extend the component signature to accept link props and thread them into the button anchors: 
// in VialCard.js
export default function VialCard({ title, description, tech, color, demoUrl, sourceUrl, caseStudyUrl }) {
  ...
  <a href={demoUrl}>INVOCATION (DEMO)</a>
  <a href={sourceUrl}>SOURCE INCANTATION</a>
  <a href={caseStudyUrl}>GRIMOIRE ENTRY</a>
}
Add a fifth color theme: Add a new key to the color-class map inside the component, then add the corresponding custom color and glow-* utility to tailwind.config.js. Adjust fill animation speed: The hover fill transition uses a Framer Motion transition object on the fill div. Lower the duration value for a snappier pour, or increase it for a slower, more viscous feel. Limit tech badge count: Truncate tech.slice(0, 5) before mapping to badges to prevent overflow on narrow grid columns.
For best visual results, use each color theme at most once per grid row. A row of all-violet vials loses the visual distinctiveness the color system is designed to provide.

Build docs developers (and LLMs) love

Get started for freeTalk to us