Entrelinhas

©️ Autoria

• Design (UI/UX): Ester Pinheiro (Clique para acessar o portfólio)

• Desenvolvimento (Frontend & Backend): Helena Antoni (Clique para acessar o portfólio)

📝 Descrição

Entrelinhas é um espaço digital feito para quem acredita no poder das palavras. Um gerador de citações que vai além do aleatório - ele convida à pausa, à inspiração e ao encontro com pequenos pedaços de poesia cotidiana. Entre uma linha e outra, um respiro criativo.

A aplicação utiliza a Inteligência Artificial do Google Gemini para geração dinâmica de citações inspiradoras, de humor e de sabedoria, garantindo segurança, performance e escalabilidade serverless.

O projeto é uma colaboração: a interface e o design foram criados pela designer Ester Pinheiro, e o código e o backend (API Route) foram desenvolvidos por Helena Antoni.

🔶 Funcionalidades Principais:

• Geração de citações por temas (Aleatório, Humor, Livros e Motivacional).
• Saída forçada em formato JSON, garantindo consistência.
• Implementação de regras éticas e de originalidade via systemInstruction da IA.

♿ Acessibilidade (A11y)

Este projeto não apenas entrega palavras, mas garante que elas sejam acessíveis. Implementamos:

• Design de Contraste: Cores validadas para garantir legibilidade em diferentes contextos visuais e modos de tela (Light/Dark).
• Navegação Semântica: Uso de tags HTML5 estruturais (<nav>, <main>, <figure>, <blockquote>, <cite>) para facilitar a leitura por tecnologias assistivas.
• Leitores de Tela: Implementação de aria-labels, aria-hidden, dinâmicos e estados de aria-pressed nos botões de tema e interação.
• Experiência Limpa: Ícones decorativos ocultados com aria-hidden="true" para evitar poluição sonora em leitores de tela.
• Gerenciamento de Foco: Garantia de que elementos interativos sejam navegáveis via teclado.

🚀 Tecnologias Utilizadas

• HTML5 Semântico & ARIA: Estrutura de dados pensada para acessibilidade e SEO.

• Next.js (React): Framework para construção da interface e criação das API Routes Serverless.

• TypeScript (TS): Garante tipagem estática, aumentando a robustez e prevenindo erros de tipagem no deploy.

• Google Gemini 2.5 Flash SDK: Motor de Inteligência Artificial para geração de conteúdo e formatação de JSON.

• Tailwind CSS: Framework CSS utility-first para um design rápido e responsivo.

• Git & GitHub: Controle de versão e hospedagem do repositório.

• Vercel: Plataforma de deploy contínuo, responsável por hospedar a aplicação e injetar as variáveis de ambiente com segurança.

⚙️ Configuração Local e Execução

Pré-requisitos e Setup

Para clonar e rodar este projeto na sua máquina (ambiente de desenvolvimento), siga os passos abaixo:

• Pré-requisitos: Você precisará ter o Node.js (versão 18+) instalado.
• Chave de API: Uma chave de API do Google Gemini é obrigatória para o backend funcionar.

Clonar e Instalar Dependências

git clone https://github.com/helena-antoni/entrelinhas.git
cd entrelinhas
npm install

Configurar Variáveis de Ambiente

Crie um arquivo chamado .env.local na raiz do projeto para carregar sua chave de API de forma segura: .env.local (Este arquivo DEVE ser ignorado pelo Git)

GEMINI_API_KEY="SUA_CHAVE_GEMINI..."

Rodar o Servidor de Desenvolvimento

npm run dev

O projeto estará acessível em http://localhost:3000.

🎨 Design do Figma

O design inicial foi construído seguindo os padrões modernos de UI/UX, focando em simplicidade e na citação como elemento principal.

Clique Aqui ou na imagem para acessar o Figma.

 

🌟 Visualize o Projeto

Acesse a aplicação em produção e gere suas próprias citações!

Clique Aqui ou na imagem para acessar o site.

 

🤝 Contato e Conexão

Quer falar sobre o código, design ou simplesmente conectar? Estamos abertas a novas conexões, colaborações e desafios!

Conecte-se com as Autoras:

Colaboradora	GitHub	LinkedIn	Email
Ester Pinheiro (Design)			ester.copinheiro@gmail.com
Helena Antoni (Dev)			helena.antoni.dev@gmail.com