A Literary Portfolio & Digital Publishing Platform
A literary portfolio and digital publishing platform. Elegant typography, multilingual content, and a component ecosystem built for writers.
A serif-first type system rooted in EB Garamond and Georgia. From chapter headings to verse lines, every size is tuned for extended reading.
The sea was a sheet of dark glass under the grey sky, and the wind carried the scent of salt and distant rain. He stood at the edge of the pier, watching the horizon swallow the last traces of light.
beneath the weight of silver skies
the wandering heart finally lies
a quiet breath, a whispered name
the tide returns, the world remains the same
The typographic scale spans six distinct levels. Chapter headings (h1) at clamp(1.5rem, 3vw, 2.2rem) announce major divisions with gravity and weight. Section headings (h2) follow at a slightly smaller size, preserving hierarchy without competition. Subsection heads (h3) are italicised to signal their subordinate role. Body paragraphs set at 0.95rem with generous line-height sustain comfortable reading across long essays. Verse lines at 0.85rem with italic styling and 2.0 line-height echo the breath of poetry. Captions at 0.72rem in muted tone provide context without intrusion. Every size is clamped between minimum and preferred values to maintain proportion across viewports.
Four weights create the typographic voice: light for epigraphs, regular for body, medium for emphasis and bold for titles and headings.
The night was vast and full of whispers, each star a story waiting to be told beneath the silvered canopy of an indifferent sky.
font-weight: 300The night was vast and full of whispers, each star a story waiting to be told beneath the silvered canopy of an indifferent sky.
font-weight: 400The night was vast and full of whispers, each star a story waiting to be told beneath the silvered canopy of an indifferent sky.
font-weight: 500The night was vast and full of whispers, each star a story waiting to be told beneath the silvered canopy of an indifferent sky.
font-weight: 700Light (300) carries the delicate touch of marginalia and epigraphs, barely pressing into the page. Regular (400) is the workhorse of body text, unseen and unobtrusive, letting the reader forget they are reading type at all. Medium (500) adds a subtle heft for subheadings and emphasised passages, a slight elevation of voice. Bold (700) commands attention for chapter titles, pull-quote attributions, and navigational landmarks, anchoring the reader in the textual architecture.
XscriptorSkillPage.lightPaletteDesc
The light palette is drawn from the project theme tokens defined in globals.css. The page surface (#ffffff) is a clean white for optimal readability. Ink (#171717) is a deep near-black for primary text. Violet (#4328a8) provides accessible accent colours for links and active states. Stone (#6b7280) carries secondary text in a restrained tone. Borders (#e5e7eb) separate sections with a subtle line. The X theme accent colors — pink (#fc618d), mint (#7bd88f), and lilac (#948ae3) — bring the brand identity into the literary space, used sparingly for highlights and supporting elements.
XscriptorSkillPage.darkPaletteDesc
Dark mode transforms the page into a nocturnal reading room using the project dark tokens. The background (#0a0a0a) is a deep near-black. Ivory text (#ededed) carries the soft glow of content against the dark backdrop. Gold (#fbbf24) provides warm accents for links and active states. Zinc (#9ca3af) provides muted text that remains legible. Umber borders (#27272a) create subtle elevation through cool-toned layering. The X theme accent colors — pink (#fc618d), mint (#7bd88f), and gold (#fce566) — bring the brand signature into dark mode with the same vibrancy as in light mode.
The most significant shift between light and dark palettes occurs in the <strong>background</strong> (from #ffffff to #0a0a0a) and <strong>primary</strong> (from #4328a8 to #fbbf24) tokens. The light-mode violet primary (#4328a8) shifts to a warm gold (#fbbf24) in dark mode to maintain WCAG AA contrast ratios against the dark surface. The X theme accent colours remain identical in both palettes, providing a consistent brand signature across themes.
XscriptorSkillPage.lineHeightDesc
beneath the weight of silver skies the wandering heart finally lies a quiet breath, a whispered name the tide returns, the world remains the same
Verse lines, epigraphs, stanza breaksThe sea was a sheet of dark glass under the grey sky, and the wind carried the scent of salt and distant rain. He stood at the edge of the pier, watching the horizon swallow the last traces of light, wondering if she would ever return to this shore.
Body paragraphs, essays, long-form readingA compact line height ideal for card excerpts, metadata descriptions, and brief annotations where vertical economy matters without sacrificing readability at small sizes.
Card excerpts, metadata, descriptionsChapter One: The Departure
Chapter headings, section titles, display textPoetry at 2.0 gives each line room to breathe, honouring the line break as a unit of meaning. Prose at 1.8 supports extended reading sessions with comfortable leading that guides the eye from line to line without fatigue. Compact at 1.4 packs more text into cards and previews while remaining legible. Titles at 1.1 bring headings close enough to read as unified statements, the tight verticality suggesting solidity and authority.
Books are presented as physical objects with cover art, metadata, and language availability. Poetry paginates via the XBookReader component.
An introspective journey through melancholy, bittersweet memories and the deepest materialization of the feeling of loss.
The book card component presents literary works as physical objects, evoking the tactility of printed books through visual design. Each card pairs a stylised cover — with its dark gradient, gold lettering, and 2:3 aspect ratio — with a metadata panel containing the title, subtitle, description, and key attributes: available languages, poem count, and publication year. Language badges appear as coloured indicators in the cover corner, and the card adapts between a stacked column layout on narrow screens and a side-by-side cover-and-info arrangement on wider viewports. The card links to the full XBookReader experience, where poems paginate like printed pages with support for bilingual side-by-side display.
Long-form content with a clean, distraction-free reading experience. Dates, categories, excerpts, and reading time are surfaced without noise.
There is a peculiar freedom in releasing what we once held so tightly. Not the freedom of escape, but the quiet liberation found in acceptance. Like autumn leaves surrendering to the wind, we too must learn when to fall.
Continue readingBlog posts follow a clean, distraction-free pattern. Each card surfaces four elements in careful hierarchy: the publication date and category as a muted header row, the title in a bold serif face that invites reading, a generous excerpt that captures the essay's voice without spoiling its arc, and a subtle "Continue reading" link in the primary accent colour. The simplicity of the card — a single column with generous padding and a delicate border — ensures that content remains the protagonist. No social buttons, no comment counts, no sidebar distractions. Just the writer's voice and the reader's attention, meeting across the page.
XscriptorSkillPage.borderDesc
Standard card outlines, section dividers — a whisper of boundary that barely touches the eye before yielding to content.
1px solid color-mix(in srgb, var(--border) 50%, transparent)Active states, selected items, focused inputs — the primary hue bleeding softly into the edge to signal attention without alarm.
1px solid color-mix(in srgb, var(--primary) 50%, transparent)Editorial notes, marginalia containers, draft indicators — the broken line suggests impermanence and the provisional nature of annotation.
1px dashed color-mix(in srgb, var(--border) 60%, transparent)Pull quotes, epigraphs, chapter openers — a double line that frames borrowed words with the dignity they deserve.
2px double color-mix(in srgb, var(--foreground) 20%, transparent)Borders in the literary design system are not structural — they are rhetorical. The delicate border (standard opacity) is the default comma of the layout, a brief pause between elements. The accent border (primary-tinted) functions as an emphatic semicolon, joining related elements with a hint of thematic colour. The dashed border is the parenthetical aside, indicating content that is present but provisional — annotations, drafts, editorial notes. The double border, reserved for epigraphs and pull quotes, is the colon, announcing that what follows is borrowed speech deserving of special framing. Each border style is tuned through opacity and composition to speak at the appropriate volume within the page's typographic voice.
Every piece of content exists in Spanish, English, and German. A custom I18nProvider handles locale switching without external dependencies.
The night was vast and full of whispers, each star a story waiting to be told.
La noche era vasta y estaba llena de susurros, cada estrella una historia esperando ser contada.
Die Nacht war weit und voller Flstern, jeder Stern eine Geschichte, die darauf wartete, erzhlt zu werden.
The same literary sentence rendered in English, Spanish, and German. Each language brings its own rhythm and texture to the prose: the English version's Anglo-Saxon concision, the Spanish's melodic vowel sequences and rolling r's, the German's compound structures and terminal verb placements. The i18n system, built on a custom provider with zero external dependencies, preserves these linguistic character differences across the entire platform. Every route, every component, every piece of user-facing text flows through the same locale-aware pipeline. Switching languages updates not just the content but the typographic mood — serif weights adjust subtly between locales, and line-height values calibrate to each language's average character width.
XscriptorSkillPage.fontFamilyDesc
The night was vast and full of whispers, each star a story waiting to be told beneath the silvered canopy of an indifferent sky. The moon traced its slow arc across the firmament, bearing witness to every secret shared in the dark.
font-family: 'EB Garamond', Georgia, 'Times New Roman', serif;The night was vast and full of whispers, each star a story waiting to be told beneath the silvered canopy of an indifferent sky. The moon traced its slow arc across the firmament, bearing witness to every secret shared in the dark.
font-family: Georgia, 'Times New Roman', serif;The night was vast and full of whispers, each star a story waiting to be told beneath the silvered canopy of an indifferent sky. The moon traced its slow arc across the firmament, bearing witness to every secret shared in the dark.
font-family: Baskerville, 'Times New Roman', serif;The night was vast and full of whispers, each star a story waiting to be told beneath the silvered canopy of an indifferent sky. The moon traced its slow arc across the firmament, bearing witness to every secret shared in the dark.
font-family: ui-sans-serif, system-ui, sans-serif;The night was vast and full of whispers, each star a story waiting to be told beneath the silvered canopy of an indifferent sky.
font-family: ui-monospace, 'SF Mono', monospace;EB Garamond, Georgia, and Baskerville represent three generations of serif type: Garamond's Renaissance humanism, Georgia's sturdy screen-optimised clarity, and Baskerville's sharp transitional contrast. The serif stack prefers EB Garamond when available (its delicate hairlines and warm character weights are ideal for literary prose), falls back to Georgia for its excellent screen rendering at small sizes, and lands on Times New Roman as the universal serif safety net. Sans-serif handles the interface layer — navigation, buttons, metadata — where clean geometric forms aid quick scanning. Monospace is reserved for the few places where character-by-character alignment matters: code snippets, technical metadata, and the occasional type specimen.
A visual grid for showcasing paintings, photography, and mixed-media works. Supports both masonry and structured layouts.
The gallery uses a CSS masonry-style grid where the first item spans two rows, creating a dynamic anchor for the layout. Each placeholder carries a monogram letter (A through E) at low opacity, suggesting the position of artworks without requiring actual image assets. The grid is responsive, collapsing from four columns on wider screens to two on narrow ones, with the featured item maintaining its prominence through the grid-row: span 2 property. In production, these placeholders are replaced by actual paintings, photography, or mixed-media works, each with a lightbox preview accessible on click. The gallery component supports exhibition metadata — medium, dimensions, year, series — overlaying this information on hover or via a discreet caption bar beneath each work.
XscriptorSkillPage.radiusDesc
Sharp corners (0) are reserved for literary material — verse containers, code excerpts, epigraph blocks — where the absence of rounding suggests the authority of printed matter. Soft corners (4px) are applied to cards, buttons, and input fields, providing a gentle friendliness that invites interaction without compromising formality. Rounded corners (8px) frame media embeds and images, echoing the physical border of framed artwork. Full rounding (999px) is exclusive to avatars, language badges, and tag pills, where the circular form signals a self-contained unit of identity or classification. Each radius value is chosen to match the rhetorical weight of the content it contains.
XscriptorSkillPage.buttonDesc
Button appearance under a fixed light palette (#ffffff background, #171717 text, #4328a8 primary).
Button appearance under a fixed dark palette (#0a0a0a background, #ededed text, #fbbf24 primary).
XscriptorSkillPage.svgDesc
A quill pen with a feathered shaft, the nib dipped in invisible ink. The two lateral strokes suggest the feather's barbs while the central line forms the quill's barrel. Used as a decorative element on author pages and writing-related sections.
An open book in codex form, with facing pages and lines of text suggested by horizontal strokes at varying opacities. The spine forms a clean centre line. Used as a decorative element on book-related sections of the platform.
A decorative typographic divider featuring a centred diamond motif flanked by ruled lines with small dots above and below. Used to separate major sections of the page, recalling the ornamental printers' marks of hand-set type.
A constellation of stars connected by faint lines, evoking the night sky as a metaphor for literature — scattered points of meaning that form patterns when connected by the reader's eye. Used on poetry and philosophy sections.
All SVG graphics inherit their stroke colour from <code>var(--primary)</code> and their fill from <code>color-mix(in srgb, var(--primary) X%, transparent)</code>, ensuring seamless adaptation between light and dark themes without additional media queries. Opacity variations create depth within each illustration, and the geometric simplicity ensures they render crisply at any scale — from decorative inline elements to full-width section dividers.
Each illustration carries an <code>aria-label</code> for accessibility and a textual label in italic serif type beneath the graphic, maintaining the literary character of the platform even in its ornamental details. The SVG viewBox coordinates are standardised to 200-unit widths for consistent scaling across the grid.
XscriptorSkillPage.colorTokenDesc
When the theme toggles between light and dark, every token updates in unison — no manual overrides, no per-component adjustments. The background shifts from paper to night, ink from brown-black to ivory, sienna to amber. The metaphor holds because the mapping is conceptual, not arbitrary: each CSS variable represents a <em>literary material</em>, not a specific colour value. The component layer never knows or cares what specific hex value a token resolves to; it simply uses <code>var(--paper)</code> or <code>var(--ink)</code> and trusts the theme to supply the appropriate colour. This separation of meaning from value is what makes the system both flexible and coherent.
XscriptorSkillPage.spacingDesc
Verse (0.25rem) is the smallest unit — the gap between a badge and its adjacent element, the space between a line number and its verse. Stanza (0.75rem) governs the padding inside cards and the gap between related buttons. Chapter (1.5rem) is the primary section rhythm — the margin between major content blocks, the padding of the hero, the gutters of the grid. Section (3rem) creates the major divisions of the page: the distance between one part and the next, the breathing room before the outro, the white space that tells the reader "this is a new beginning." Together, these four levels form a geometric progression that feels natural to the reading eye — each step approximately doubling the previous one.
XscriptorSkillPage.contentTypeDesc
XBlogPost, XBlogGrid, XBlogSidebarXBookCard, XBookReader, XBookShelfXPoemViewer, XStanzaNav, XPoemIndexXArtGrid, XLightbox, XExhibitionTimelineBlog posts use a single-column reading layout with generous measure (60-70 characters per line), serif body text, and minimal chrome — the writer's voice fills the space. Books are presented as visual objects first (cover art, metadata panels) and reading experiences second (the XBookReader component handles multi-page navigation with page-turn transitions). Poetry receives special typographic treatment: italicised verse faces, 2.0 line-height, stanza-aware pagination that never orphans a stanza across a page break. The art gallery breaks from the typographic focus entirely, letting visual works occupy the full width of the grid with minimal textual interference. Each content type has its own dedicated routes, index pages, and detail templates, but all share the same design token system — ensuring visual coherence across the entire platform regardless of genre.
XscriptorSkillPage.i18nArchDesc
Primary authoring language. All prose, essays, and poetry composed first in English before translation.
Native literary language. Rich tradition of magical realism and lyrical prose permeates the Spanish corpus.
Secondary translation language. Philosophical precision and compound-word poetry explored in the German editions.
The trilingual architecture serves three distinct readerships. English (1200+ messages, 100% coverage) is the primary authoring language — all prose, essays, and poetry are composed first in English. Spanish is the native literary language with a rich tradition of magical realism and lyrical prose that permeates the Spanish corpus. German serves as the secondary translation language, where philosophical precision and compound-word poetry are explored in the German editions. The i18n system detects the user's preferred language via URL path prefix and persists the selection across sessions, allowing readers to switch between languages at any point without losing their place. All three locales maintain 100% translation coverage for every user-facing string in the platform.
Xscriptor demonstrates that a literary platform can feel both timeless and modern when typography, content architecture, and visual restraint work in harmony.
Xscriptor demonstrates that a literary platform can feel both timeless and modern when typography, content architecture, and visual restraint work in harmony. The design system, built entirely on CSS custom properties, enables seamless theme switching without JavaScript. Every component, from the book card to the art gallery, draws from the same set of tokens — ensuring that whether the reader is browsing poetry in Spanish or essays in German, the experience remains coherent and beautiful.