Irdin

The main objective of this project is to solve a technological accessibility problem: the digitalization, standardized documentation, and distribution of a script considered primordial (the Irdin language, discovered by Dakila Pesquisas) into modern digital and typographic formats.

The platform does not run a complex backend or process concurrent transactions; its core business logic lies in the static injection of multilingual content and the optimized distribution of design files (typographic vectors in OTF, TTF, and WOFF2) through an ultra-fast web architecture.

---

1. General Operation and Workflows

The project functions as a central node for distribution and documentation. Its primary utility lies in providing researchers, academics, and designers friction-free access to typographic resources, avoiding reliance on unstandardized manuscripts or tracings.

The operational workflow is divided into two main phases, from asset conception to consumption by the end user:

1. Vectorization Phase (Design to Code):
   • The starting point for the data are isolated images representing each symbol of the language.
   • Using Figma and a specialized plugin (Font Generator), I prepared a flow where each image is vectorized and transformed into a glyph node.
   • These vectors are processed by the plugin —supported by code hosted in GitHub Gists— to generate the downloadable binaries (OTF, TTF, WOFF2, plus CSS and HTML files for testing).
2. Distribution Phase (Usage):
   • The user accesses the web platform through a static router (ClientRouter).
   • Upon entering, an interconnected navigation component (Topbar.astro) allows immediate switching between local versions of the language (pt-br, en, es, ja).
   • The static architecture injects the technical “metadata” (author, version, publication dates) into the DOM and provides the user with the option to request the font via a contact link.

---

2. Software Architecture and Modeling

For the development of the web portal, I opted for an architecture based on Static Site Generation (SSG) and an isolated components model (Island Architecture) using Astro. The choice of this pattern is justified by the nature of the domain: the information (data about the font, authorship, and historical origins) has very low mutability. A traditional SPA (Single Page Application) system like React or Angular would have introduced unnecessary JavaScript overhead on the client, penalizing SEO and performance (Time to Interactive).

Structural Pattern: Component-Based SSG

The code is structured with a clear separation of concerns:

• src/layouts: Defines the master skeleton (Layout.astro), injecting global stylesheets, Vercel analytics scripts, and dynamic SEO metadata (Astro.props).
• src/pages: Handles routing. A physical pages approach is used for internationalization (i18n), with specific directories for each language (en/, es/, ja/, pt-br/).
• src/components: Contains reusable entities without mutational state (e.g., SVG flags, background noise effects, navigation components).

Data Model (State Injection)

The core domain state resides immutably within the top-level view component itself (e.g., index.astro).

classDiagram
    class IndexPageData {
        <<Struct>>
        +Font font
        +CallToAction cta
        +Author author
        +Links links
        +Release release
    }
    class Font {
        +String name
        +String version
    }
    class CallToAction {
        +String label
        +String url
        +String message (URI Encoded)
    }
    class Author {
        +String fullName
        +String email
        +String websiteUrl
    }

    IndexPageData *-- Font
    IndexPageData *-- CallToAction
    IndexPageData *-- Author

Instead of requiring calls to an external API or database, the data is compiled AOT (Ahead of Time). This eliminates network latency and ensures maximum availability of the download resource.

Flowchart: Typographic Ingestion to Web

The following diagram details the production chain of the project’s core, starting from the visual symbols to end-user interaction.

flowchart TD
    subgraph Typographic Creation [Figma Environment]
        A[Irdin Base Images] -->|Manual Process| B(Individual Vectorization)
        B --> C[Font Generator Plugin]
        C -->|GitHub Gists Scripts| D{Font Compilation}
    end

    subgraph Binary Assets
        D --> E[Irdin-1.0.otf]
        D --> F[Irdin-1.0.ttf]
        D --> G[Irdin-1.0.woff2]
    end

    subgraph Astro SSG Platform [Web Distribution]
        H[src/pages/index.astro] -->|Injects Data| I[Base Layout.astro]
        H -->|Renders| J[Documentation UI]
        I --> K[ClientRouter]
    end

    E -.->|Referenced in| J
    F -.->|Referenced in| J
    G -.->|Referenced in| J

    User((User)) -->|Accesses| K
    User -->|Requests Download| L[Parameterized WhatsApp URL]

---

3. Technology Stack

The selection of the development environment ensures maintainability, scalability at the level of static distribution, and strict code controls.

Layer	Technology	Justification / Architectural Role
Main Framework	Astro (v5)	Selected for its islands architecture and “Zero JS” delivery. Handles static routing (ClientRouter) and compilation of international views.
Language / Typing	TypeScript	Natively integrated into Astro to provide type safety in the definition of metadata (e.g., interface Props in Layouts) and compile-time validation.
Styling	Tailwind CSS (v4)	Provider of design utilities at an atomic level, coupling responsive design directly to component markup, ensuring purged and lightweight CSS in production.
Testing (Unit)	Vitest	Vitest is used to test isolated logic, preventing regressions before each build.
Linting and Formatting	Biome	Strict rules configured to force consistent coding conventions in project-level .astro, .ts, and stylesheet files.
Network Analytics	Vercel Analytics	Client-injected monitoring to quantify page-level user traffic and flow without drastically impacting the loading of third-party resources.

---

4. Technical Conclusion

The Irdin typography website is structured under a pragmatic approach that prioritizes stability and content delivery speed. By leveraging a pure Static Site Generation architecture on Astro and shifting the complexity of computational processing to the initial design environment (Figma), the overhead of an operational backend has been completely eliminated. The result is a digital product of extremely high availability, secured against regressions through a solid TypeScript foundation and automated end-to-end testing, fully meeting the structural requirement of globally documenting an anthropological-linguistic resource with virtually zero server infrastructure cost.