Voltar aos projetos
Logotipo de Irdin

Irdin

Criação de uma tipografia digital completa (EOT, TTF, WOFF2) baseada na linguagem Irdin, convertendo designs do Figma em componentes web reutilizáveis.

+100 usuáriosFonte tipográfica

O objetivo principal deste projeto é resolver um problema de acessibilidade tecnológica: a digitalização, a documentação padronizada e a distribuição de uma escrita considerada primordial (o idioma Irdin, descoberto pela Dakila Pesquisas) em formatos digitais e tipográficos modernos.

A plataforma não executa um backend complexo nem processa transações concorrentes; sua lógica de negócio central está na injeção estática de conteúdo multilíngue e na distribuição otimizada de arquivos de design (vetores tipográficos em OTF, TTF e WOFF2) por meio de uma arquitetura web rápida.


1. Funcionamento Geral e Fluxos de Trabalho

O projeto funciona como um nó central de distribuição e documentação. Sua utilidade principal está em oferecer a pesquisadores, acadêmicos e designers acesso sem atritos aos recursos tipográficos, evitando a dependência de manuscritos ou decalques não padronizados.

O fluxo operacional se divide em duas fases principais, desde a concepção dos ativos até o consumo pelo usuário final:

  1. Fase de Vetorização (Do Design ao Código):
    • O ponto de partida dos dados são imagens isoladas que representam cada símbolo do idioma.
    • Usando o Figma e um plugin especializado (Font Generator), preparei um fluxo no qual cada imagem é vetorizada e transformada em um nó de glifo.
    • Esses vetores são processados pelo plugin —apoiado por código hospedado em GitHub Gists— para gerar os binários para download (OTF, TTF, WOFF2, além de arquivos CSS e HTML para testes).
  2. Fase de Distribuição (Uso):
    • O usuário acessa a plataforma web por meio de um roteador estático (ClientRouter).
    • Ao entrar, um componente de navegação interconectado (Topbar.astro) permite alternar imediatamente entre as versões locais do idioma (pt-br, en, es, ja).
    • A arquitetura estática injeta os “metadados” técnicos (autor, versão, datas de publicação) no DOM e oferece ao usuário a opção de solicitar a fonte por meio de um link de contato.

2. Arquitetura de Software e Modelagem

Para o desenvolvimento do portal web, optei por uma arquitetura baseada em Static Site Generation (SSG) e em um modelo de componentes isolados (Island Architecture) usando Astro. A escolha desse padrão se justifica pela natureza do domínio: as informações (dados sobre a fonte, autoria e origens históricas) têm mutabilidade muito baixa. Um sistema SPA (Single Page Application) tradicional, como React ou Angular, teria introduzido uma sobrecarga desnecessária de JavaScript no cliente, penalizando o SEO e o desempenho (Time to Interactive).

Padrão Estrutural: SSG Baseado em Componentes

O código está estruturado com uma clara separação de responsabilidades:

  • src/layouts: Define o esqueleto mestre (Layout.astro), injetando folhas de estilo globais, scripts de analytics da Vercel e metadados de SEO dinâmicos (Astro.props).
  • src/pages: Gerencia o roteamento. Utiliza-se uma abordagem de páginas físicas para a internacionalização (i18n), com diretórios específicos para cada idioma (en/, es/, ja/, pt-br/).
  • src/components: Contém entidades reutilizáveis sem estado mutável (por exemplo, bandeiras em SVG, efeitos de ruído de fundo, componentes de navegação).

Modelo de Dados (Injeção de Estado)

O estado central do domínio reside de forma imutável no próprio componente de visualização de nível superior (por exemplo, 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

Em vez de exigir chamadas a uma API externa ou a um banco de dados, os dados são compilados AOT (Ahead of Time). Isso elimina a latência de rede e garante a máxima disponibilidade do recurso de download.

Fluxograma: Da Ingestão Tipográfica à Web

O diagrama a seguir detalha a cadeia de produção do núcleo do projeto, desde os símbolos visuais até a interação do usuário final.

flowchart TD
    subgraph Criação Tipográfica [Ambiente Figma]
        A[Imagens Base Irdin] -->|Processo Manual| B(Vetorização Individual)
        B --> C[Plugin Font Generator]
        C -->|Scripts GitHub Gists| D{Compilação da Fonte}
    end

    subgraph Ativos Binários
        D --> E[Irdin-1.0.otf]
        D --> F[Irdin-1.0.ttf]
        D --> G[Irdin-1.0.woff2]
    end

    subgraph Plataforma Astro SSG [Distribuição Web]
        H[src/pages/index.astro] -->|Injeta Dados| I[Layout.astro Base]
        H -->|Renderiza| J[UI de Documentação]
        I --> K[ClientRouter]
    end

    E -.->|Referenciado em| J
    F -.->|Referenciado em| J
    G -.->|Referenciado em| J

    User((Usuário)) -->|Acessa| K
    User -->|Solicita Download| L[URL Parametrizada do WhatsApp]

3. Stack Tecnológico

A seleção do ambiente de desenvolvimento garante manutenibilidade, escalabilidade no nível da distribuição estática e controles de código rigorosos.

CamadaTecnologiaJustificativa / Papel Arquitetural
Framework PrincipalAstro (v5)Selecionado por sua arquitetura de ilhas e entrega “Zero JS”. Gerencia o roteamento estático (ClientRouter) e a compilação das visualizações internacionais.
Linguagem / TipagemTypeScriptIntegrado nativamente ao Astro para oferecer segurança de tipos na definição de metadados (por exemplo, interface Props nos Layouts) e validação em tempo de compilação.
EstilosTailwind CSS (v4)Fornecedor de utilitários de design em nível atômico, acoplando o design responsivo diretamente à marcação dos componentes e garantindo um CSS depurado e leve em produção.
Testes (Unitários)VitestO Vitest é utilizado para testar a lógica isolada, prevenindo regressões antes de cada build.
Linting e FormataçãoBiomeRegras estritas configuradas para impor convenções de código consistentes nos arquivos .astro, .ts e de estilos do projeto.
Analytics de RedeVercel AnalyticsMonitoramento injetado no cliente para quantificar o tráfego e o fluxo de usuários por página, sem impactar significativamente o carregamento de recursos de terceiros.

4. Conclusão Técnica

O site da tipografia Irdin está estruturado sob uma abordagem pragmática que prioriza a estabilidade e a velocidade de entrega do conteúdo. Ao utilizar uma arquitetura de Static Site Generation pura sobre o Astro e transferir a complexidade do processamento computacional para o ambiente de design inicial (Figma), a sobrecarga de um backend operacional foi completamente eliminada. O resultado é um produto digital de alta disponibilidade, protegido contra regressões por uma base sólida em TypeScript e testes automatizados, que cumpre plenamente o requisito estrutural de documentar globalmente um recurso antropológico-linguístico com um custo mínimo de infraestrutura de servidor.

Arraste para mover o diagrama. Use + e − para dar zoom, as setas para movê-lo e 0 para redefinir a visualização.

Vamos trabalhar juntos

Engenheiro de Software e desenvolvedor Senior Full-Stack, trabalho remotamente a partir de Santa Cruz, Bolívia. Aberto a novas oportunidades.