Plataforma educacional sobre fundamentos da computação — HTML e CSS puros com tipografia fluida, cards minimalistas e design responsivo para desmistificar a tecnologia.
⚠️ Projeto Arquivado Este projeto não recebe mais atualizações ou correções. O código permanece disponível como referência e pode ser utilizado livremente sob a licença MIT. Fique à vontade para fazer fork caso deseje continuar o desenvolvimento.
- Sobre o Projeto
- Funcionalidades
- Tecnologias
- Arquitetura
- Estrutura do Projeto
- Começando
- Scripts Disponíveis
- Qualidade e Governança
- Deploy
- FAQ
- Licença
- Contato
Este projeto é uma plataforma educacional de página única (SPA) sobre fundamentos da ciência da computação, desenvolvida com HTML5 e CSS3 puros. Utiliza uma abordagem narrativa e visual para desmistificar conceitos como CPU, RAM e armazenamento, combinando precisão técnica com design pedagogicamente engajador.
O repositório prioriza:
- Design minimalista e moderno — Tipografia fluida com
clamp(), hierarquia visual consistente e layout limpo - Conteúdo pedagógico visual — Cards com ícones representativos e analogias para reforçar conceitos abstratos
- Zero dependências — HTML e CSS puros, sem frameworks, para máxima performance e simplicidade
- Responsividade — Design mobile-first com media queries e estrutura semântica para acessibilidade e SEO
- Automação de qualidade — Lint, testes de smoke e CI/CD via GitHub Actions
Para conteúdo educacional estático, frameworks adicionariam complexidade desnecessária e impactariam o tempo de carregamento sem benefícios significativos. A abordagem purista demonstra que tecnologias web nativas são suficientes para criar interfaces educacionais modernas, acessíveis e performáticas.
- Hero section imersiva — Introdução com título dinâmico e subtítulo que estabelece o tom da plataforma
- Cards minimalistas — Conteúdo segmentado em seções com bordas suaves e contraste sutil para leitura focada
- Ícones educacionais — Conceitos como CPU, RAM e armazenamento acompanhados por imagens representativas
- Tipografia fluida — Tamanhos de fonte responsivos via
clamp()para leitura confortável em qualquer dispositivo - Design responsivo — Adaptação fluida para smartphones, tablets e desktops
- Estrutura semântica — Tags
<section>,<header>,<footer>para acessibilidade e SEO
Requisitos mínimos:
- Navegador moderno (Chrome, Firefox, Safari, Edge)
- Node.js 18+ (apenas para lint/test, opcional)
A aplicação é um site estático puramente client-side, sem dependência de backend:
Usuário
→ Vercel Edge Network (roteamento e CDN)
→ index.html (estrutura semântica e conteúdo educacional)
→ Style.css (tipografia fluida, cards, responsividade)
→ Assets/Image/ (imagens educacionais: CPU, RAM, Storage)
→ Assets/favicon/ (favicons multiplataforma)
→ Assets/media/ (logo e ícones sociais)
Todos os componentes residem e são executados no navegador do usuário. A Vercel distribui os ativos estáticos via CDN global para acesso rápido.
Alfa-Tech/
├── index.html # Página principal com conteúdo educacional
├── Style.css # Folha de estilo principal
├── Assets/
│ ├── Image/ # Imagens educacionais (CPU, RAM, Storage)
│ ├── favicon/ # Favicons multiplataforma
│ └── media/ # Logo e ícones sociais
├── tests/ # Testes de smoke
├── docs/ # Documentação complementar
├── .github/
│ └── workflows/
│ ├── ci.yml # Pipeline de CI
│ └── codeql.yml # Análise de segurança
├── package.json # Scripts de lint/format e testes
├── CONTRIBUTING.md # Guia de contribuição
├── SECURITY.md # Política de segurança
├── CODE_OF_CONDUCT.md # Código de conduta
├── CHANGELOG.md # Histórico de mudanças
└── LICENSE # Licença MIT
A aplicação é um site estático e roda diretamente no navegador. Para lint e testes:
node --version # v18 ou superior (opcional, para lint/test)
npm --version # v9 ou superior (opcional, para lint/test)- Clone o repositório
git clone https://github.com/ESousa97/Alfa-Tech.git
cd Alfa-Tech- Instale as dependências de desenvolvimento (opcional)
npm installAbrir diretamente no navegador:
# Windows
start index.html
# macOS
open index.html
# Linux
xdg-open index.htmlCom servidor local:
python -m http.server 8000
# ou
npx serve .Acesse: http://localhost:8000/
Produção: alfa-tech-three.vercel.app
# Executar lint
npm run lint
# Formatação
npm run format
# Testes de smoke
npm testO projeto adota práticas de governança para manter a qualidade do código:
- CI — Pipeline com lint, format e testes via GitHub Actions
- Security — Análise CodeQL semanal e em cada push/PR
- Cobertura — Relatórios integrados ao Codecov
- Templates — Modelos padronizados para Issues e Pull Requests
Para diretrizes de contribuição, consulte
CONTRIBUTING.md. Para política de segurança, consulteSECURITY.md.
Deploy contínuo automatizado via integração GitHub. Cada push na branch main aciona novo deploy. A Vercel detecta automaticamente o projeto como site estático e distribui via CDN global.
O projeto também é compatível com Netlify, GitHub Pages ou qualquer plataforma de hospedagem estática.
Por que não usar React ou Vue?
Para conteúdo educacional estático, frameworks adicionariam complexidade desnecessária e impactariam o tempo de carregamento sem oferecer benefícios significativos.
Posso reutilizar o design e conteúdo?
Sim. A licença MIT permite reutilização livre do código e conteúdo, inclusive para fins educacionais e comerciais, mantendo apenas o aviso de licença original.
Para que faixa etária o conteúdo é adequado?
O conteúdo foi desenvolvido para iniciantes de qualquer idade, com linguagem acessível mas tecnicamente precisa sobre fundamentos da computação.
Como contribuir com novos conceitos?
Abra uma Issue no GitHub com sua sugestão ou envie um Pull Request seguindo a estrutura de cards existente. Consulte CONTRIBUTING.md para detalhes.
Este projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.
MIT License - você pode usar, copiar, modificar e distribuir este código.
José Enoque Costa de Sousa
