Project Documentation

The exhibition explores the polysemy of the word "Monk". We designed two narratives.

The Evolution

The first narrative is chronological, tracing the historical evolution of the term through three distinct phases:

• The Rule (Asceticism): The original meaning, rooted in the Benedictine order, discipline, and silence.
• The Utility (Function): The transition of the "monk strap" from a practical shoe for muddy roads to a high-fashion accessory.
• The Improvisation (Jazz): The figure of Thelonious Monk, representing the liberation of the name from rules into pure artistic expression.

Mental Discourse

The second narrative is thematic, we focused on the inner philosophical resonance in all 16 chosen items and grouped them into three sections:

• The Identity: Exploring how the concept of "Monk" reflects individual identity and self-perception.
• The Echo: Examining the relational aspect of "Monk" in society and culture.
• The Spirit: Delving into the transcendental and spiritual connotations associated with "Monk".

The core of the exhibition is built upon a dataset of 16 carefully curated artifacts. To ensure interoperability and standardized description, the metadata model follows the Dublin Core Metadata Element Set (DCMES), version 1.1.

The data is stored in a JSON-based structure within js/data.js, acting as a lightweight relational database. This separation of data and view allows for a "Single Source of Truth" architecture: updates to the metadata file are instantly reflected across the Map, Collections, and Item Detail pages without modifying HTML code.

Metadata Mapping (Dublin Core)

To align with digital preservation standards, we strictly map our internal JSON keys to standard Dublin Core terms. The title field corresponds to dc:title, while creator and year map to dc:creator and dc:date respectively. The artifact's physical nature is defined in type (dc:type), and its geographical origin is captured in origin (dc:coverage). We also maintain a reference to the holding institution via source (dc:source) and a direct URI in link (dc:identifier). Finally, the content description is stored in desc, which serves as dc:description but is technically extended into three distinct levels (short, medium, long) to support the project's Progressive Disclosure feature.

Custom Taxonomy & JS Interaction

Beyond standard metadata, we introduced custom taxonomic fields to support the project's specific narrative structure:

• Narrative Classification: The evolution field assigns items to chronological phases (e.g., "The Rule"), while the mental field assigns them to thematic concepts (e.g., "The Spirit").

Technical Implementation: The file js/gallery-logic.js initializes by parsing the URL query parameter (e.g., ?id=5). It then queries the galleryData array in data.js to find the matching object. This mechanism allows the gallery.html file to serve as a dynamic template, rendering different content based on the user's selection while maintaining a consistent layout. The complex JS logic we consulted ChatGPT and Gemini for assistance.

The project strictly adheres to Semantic HTML5 standards to ensure accessibility, SEO optimization, and code maintainability. The layout infrastructure relies on the Bootstrap 5 grid system (Containers, Rows, Columns), customized with specific CSS classes to guarantee a responsive experience across all viewports.

The site architecture is composed of 8 core pages, each implementing specific structural patterns to serve its narrative function. To be noted, while the bascic layout we designed by ourselves, we used Gemini and ChatGPT as inspirations and references for some complex components (e.g., the SVG map interactivity):

• 1. Home (index.html):
  The landing page utilizes a Split-Screen Layout (Bootstrap `col-lg-7` vs `col-lg-5`). The left panel houses the introductory manifesto, while the right panel features a "Hero Carousel" showcasing highlighted artifacts. This structure balances textual storytelling with visual engagement immediately upon entry.
• 2. Interactive Map (map.html):
  Unlike static image maps, this page utilizes Inline SVG (Scalable Vector Graphics) technology embedded directly in the HTML. The map structure is defined by semantic groups (`<g>`) representing rooms and interactive nodes (`<circle>`) representing artifacts. This DOM-accessible structure allows for direct JavaScript manipulation, triggering the side information panel updates without page reloads.
• 3. Narratives View (narratives.html):
  Designed for linear storytelling, this page employs a complex nested structure. Part I (The Evolution) uses a custom Vertical Timeline layout where each historical node contains a nested Bootstrap Carousel, allowing users to browse multiple artifacts within a single era. Part II (Mental Discourse) employs a Responsive Card Grid to group items conceptually.
• 4. Collections Catalog (collection.html):
  For the Collections page, the main technical goal was to neatly display images of different sizes. We implemented a flexible masonry layout using CSS Flexbox columns (`.gallery-column`) to solve this. This method allows pictures of various shapes to arrange themselves naturally and stack organically, maximizing vertical space without leaving gaps or getting cropped. At the same time, each item is structured as an interactive card; upon hovering, a CSS-based semi-transparent overlay automatically appears, revealing item details and providing a direct link to its dedicated narrative view.
• 5. Item Detail Template (gallery.html):
  The Gallery Page is designed as a Universal Template. By leveraging a Data-Binding logic between `gallery.html` and `data.js`, we achieve a high level of scalability. Upon loading, the client-side script parses the URL parameters to inject specific artifact data into structural placeholders. More importantly, the page architecture supports Progressive Disclosure, allowing us to serve different content complexities (from simple summaries to academic analysis) to different user personas dynamically through a single interface.
• 6. About Us (aboutus.html):
  Displays the project team using a Flexbox Grid (`.team-grid`). Each member is presented in a uniform `.member-card` component that encapsulates the image, biographical info, and contact links, ensuring visual consistency across different screen sizes.
• 7. Disclaimer (disclaimer.html):
  A text-heavy page structured for readability. It utilizes a semantic Unordered List (`<ul class="source-list">`) to organize external references and citations clearly, followed by a distinct copyright notice section.
• 8. Documentation (documentation.html):
  Follows a classic technical documentation layout. It features a Sticky Sidebar Navigation (`position: sticky`) on the left for quick access to sections, and a long-form content area on the right, divided by semantic `<section>` tags with distinct IDs for anchor linking.

Global Components: The Navigation Bar (`<nav>`) and Footer (`<footer>`) are structurally modular and consistent across all pages. The "Theme Switcher" is embedded directly in the navbar, utilizing `onclick` events to dynamically swap the main CSS file reference in the `<head>`, instantly transforming the visual identity of the entire site.

A key requirement of the project is the ability to switch visual themes dynamically. To achieve this efficiently, we separated our CSS into two distinct layers:

• base.css (The Skeleton): Contains all layout definitions, spacing (padding/margin), grid alignment, and structural positioning. This file never changes when switching themes.
• theme-*.css (The Skin): Contains all visual properties such as colors, fonts, border-radius, shadows, and animations. By swapping this single file, the entire look and feel of the website changes (e.g., from Modern to Medieval) without breaking the layout.

The project employs a dynamic theming engine that allows the visual narrative to shift alongside the historical narrative. Rather than simple color swaps, each theme represents a distinct "Design Metaphor" derived from the art history periods associated with the artifacts. With the help of AI tools like ChatGPT and Gemini, we developed six unique themes, each with its own color palette, typography, and visual language:

1. The Modern Theme (Default)

Metaphor: The "Monk's Music" Cover.
This theme is designed to be invisible. Like a contemporary art museum, it acts as a neutral container that allows the artifacts to stand out without stylistic interference. It draws inspiration from the cover of the album "Monk's Music", emphasizing cleanliness and readability with an easy chic aesthetic.

• Chromatics: The background is an off-white #FDFCF5 (Cream Paper) rather than pure white to reduce eye strain. The accent color is a sharp International Red (#C8102E) and Grayish Blue (#2F4858), used sparingly for buttons and active states to guide user attention hierarchically.
• Typography: A classic pairing of Playfair Display (Serif) for headings and Inter (Sans-serif) for body text. This combination balances the elegance of traditional curation with the utility of modern web interfaces.
• Visual Language: Soft shadows (box-shadow with high blur radius), rounded corners (border-radius: 4px), and translucent glass-morphism effects on the navbar create a feeling of lightness and digital modernity.

2. The Jazz Theme

Metaphor: The "Jazz Era" Deco Art.
This theme transports the user to the 1920s and 30s. It draws heavy inspiration from Art Deco architecture and the Great Gatsby. The layout shifts from a neutral container to an immersive atmosphere of "Smoke and Gold."

• Chromatics: A high-contrast "Dark Mode" aesthetic. The navigation bars turn Charcoal Black (#1A1A1A), representing the night atmosphere of a jazz club. The accents are Matte Gold (#C5A059), symbolizing brass instruments, and a muted Vintage Red (#A8332A). The background features a subtle Art Deco geometric pattern SVG.
• Typography: We utilize Cinzel for headings to evoke the chiseled, monumental look of Art Deco signage. Italianno (Script) is introduced for decorative elements, mimicking the handwritten signatures found on vintage vinyl liner notes.
• Visual Language: "Hard" shadows (no blur) and sharp, right-angled corners (border-radius: 0) mimic the physicality of printed cardboard and ticket stubs. Images are framed with double-borders (Gold and White) to resemble framed photographs in a lounge. I implemented a custom @keyframes jazz-sway animation for accent text to simulate the swing of jazz.

3. The Medieval Theme

Metaphor: The Medieval Manuscript.
The story of the Monk is unearthed from a pile of aged papers, as if it were a fleeting dream recorded by a young monk a thousand years ago, shortly after his conversion. This theme is meant to lend the project a sense of legend.

• Chromatics: This theme does not use any theme color except text color. Parchment imagery is used as the background, with faded ink tones (#100903f0) for the main text and more faded ink (#291d0dce) as muted text. Gold-leaf image serve as the primary decorative fill, creating a cohesive and highly distinctive visual language throughout the site.
• Typography: The main title typeface is Cinzel Decorative, which is elegant and formal, echoing the medieval aesthetic. Eagle Lake is used for primary headings, which is deliberately bold, with connected strokes and a handwritten quality that evokes medieval script. Subheadings and other differentiated text elements are set in Metamorphous, which remains visually distinct from the main typefaces while retaining the ornamental and historical character of early writing.
• Visual Language: Buttons are square, with border radius: 0, accompanied by one or two inner rules (outline-offset: -4px) to simulate the irregularity of hand-drawn lines. Image frames are designed to resemble painted frames, with main-text-color base and a fine gold edge. A subtle sepia filter (filter: sepia(0.15)) is applied across the entire site to suggest age and patina. Hover effects are consistently designed to brighten elements (filter: brightness(1.1)), allowing the gold leaf to stand out more vividly against the parchment background. The back-to-top button gains a rotating motion (transform: rotate(360deg)) on hover.

4. The Gothic Theme

Metaphor: An Eighteenth-Century Bound Book.
Inspired by the monk sculpture and portrait, this theme draws not from an ornate or flamboyant Gothic aesthetic, but from a restrained and disciplined form of Gothic expression. It lends the word Monk a sense of weight and poetic secrecy. When users switch to this theme, the experience is intended to feel like opening a finely bound family chronicle—somber, intimate, and layered with memory.

• Chromatics: A cool, crescent-white background (#F3F4F2) evokes aged paper under dim light; the primary tone is a night-like black (#0C0F12); and the accent color is a dried blood red (#4A0404), used sparingly but with strong symbolic force.
• Typography: UnifrakturMaguntia is used for titles. This choice was informed by visual analysis of the Benedictine Antiphonary: after providing its imagery to Gemini, this font emerged as the closest typographic analogue. The body text is set in Almendra, a serif typeface that recalls early printed books—structured and legible, yet retaining the sharpness characteristic of Gothic letterforms. Subheadings are rendered in MedievalSharp, distinguishing them from the main text while preserving a coherent historical tone.
• Visual Language: Hover affect and animations further reinforce this atmosphere. Accent text and buttons incorporate a bloodsinking effect: red gradually spreads across the surface, shifting from bright crimson(#FF0000) to deep, desaturated tones(#8A0303), from blur to clarity—suggesting blood seeping into the page and, over time, drying into a rust-like stain. Images are framed with thin black borders, complemented by simple ornamental marks at the corners, recalling the quiet craftsmanship of bookbinding rather than overt decoration.

5. The Future Theme

Metaphor: Digital Hologram & Liquid Titanium.
This theme is designed to create an immersive "Futuristic Laboratory" experience. It simulates the visual dynamics of precision holographic projections and liquid metals, transforming the webpage into a high-tech digital observatory. Drawing inspiration from Cyberpunk aesthetics and advanced scientific interfaces, it emphasizes fluid vitality and precise data visualization, presenting a "Tech-Noir Elegance" that is both cold and magnificent.

• Chromatics: The background utilizes a Titanium Grey (#F0F2F5) combined with translucent digital textures to create a deep sense of layering. The accent colors are a high-tension Neon Pink (#FF66A3) and Metallic Charcoal (#3A444B), using sharp color contrasts to simulate energy pulses and precisely guide the user's hierarchical attention.
• Typography: A distinctive pairing of tech-focused typefaces—Orbitron (Sci-fi Sans-serif) for headings to convey strength and futuristic authority, and Space Grotesk (Modern Geometric) for body text to ensure absolute clarity and a sense of precision within a digital environment.
• Visual Language: Liquid-metal "blob" shapes, precision holographic pulse animations, and extensive Glass-morphism effects on containers, paired with dynamic background filters, create a feeling of digital modernity that blurs the boundaries between reality and the virtual world.

6. The Abstract Theme

Metaphor: Abstract Lab & Gallery.
This theme is designed to create an immersive "Modernist Gallery" experience. It draws heavily from the Constructivist aesthetics of Piet Mondrian, deconstructing the webpage into irregular color blocks and bold, rigid lines. More than just a content platform, it serves as a visual experiment on order and conflict, presenting a unique "Hardcore Geometric Avant-Garde" aesthetic.

• Chromatics: The core palette utilizes a high-impact Primary Color Trio—Red (#FF3B30), Blue (#0057FF), and Yellow (#FFD600). Set against a canvas of Pure White (#FFFFFF) and framed by Solid Black (#1A1A1A), these high-saturation contrasts precisely establish the visual focal points and information hierarchy of the page.
• Typography: A bold pairing of high-weight typefaces—Archivo Black for headings, delivering a sense of industrial strength and artistic tension through its ultra-thick strokes, and Montserrat (900 weight) for body text, ensuring that the typography remains commanding and aesthetically sharp amidst the intense color contrasts.
• Visual Language: Thick black borders (5px), hard shadows with distinct offsets (12px), and an asymmetrical layout of irregular rectangles—complemented by the fluid touch of Dancing Script—work together to create a digital art atmosphere that balances rational rules with emotional expression.