Bem-vindo ao meu portfólio pessoal! Este projeto foi desenvolvido para apresentar minha jornada como Full Stack Developer, destacando minhas habilidades, projetos e a stack tecnológica que tenho aprimorado durante minha formação na Alpha Edtech.
"Criando experiências digitais com precisão e qualidade."
Este portfólio é uma Landing Page Responsiva construída do zero, sem o uso de frameworks pesados, focada em performance, semântica e uma experiência de usuário fluida. O objetivo foi criar uma interface moderna, com uma estética premium.
- Tema Dark/Light: Alternância de temas com persistência de preferência do usuário (usando
localStorage). - Design Moderno: Utilização de Glassmorphism, gradientes sutis e sombras suaves.
- Tipografia:
- Space Grotesk: Para o corpo do texto, trazendo modernidade e legibilidade.
- JetBrains Mono: Para detalhes técnicos e badges, remetendo ao ambiente de código.
- Acessibilidade (WCAG):
- Navegação completa via Teclado (Skip Link, Focus Ring).
- Suporte a Movimento Reduzido (
prefers-reduced-motion). - Semântica e ARIA attributes otimizados para leitores de tela.
- Responsividade & UI:
- Suporte 4K/Ultrawide: Layout fluido que se adapta a telas grandes (até 2500px+).
- Menu Mobile com efeito Glassmorphism.
- Layout adaptável para mobile, tablet e desktop.
- Scrollbar e Focus Ring personalizados no tema do site.
- Segurança & Performance:
- CSP (Content Security Policy): Proteção contra XSS e injeção de dados.
- Links Seguros:
rel="noopener noreferrer"em saídas externas. - Renderização Dinâmica: Projetos carregados via JavaScript para HTML mais limpo.
- Tech Stack Carousel: Carrossel infinito animado com ícones reais (FontAwesome) e duplicação inteligente via JS.
O projeto foi construído utilizando as bases fundamentais da web, garantindo leveza e total controle sobre o código:
- HTML5 Semântico: Estrutura acessível e organizada.
- CSS3 Moderno:
- Variáveis CSS (
:root) para fácil manutenção de temas. FlexboxeGrid Layoutpara posicionamento.- Animações e Transições (
transition,hover). - Filtros de
backdrop-filterpara efeitos de vidro.
- Variáveis CSS (
- JavaScript (Vanilla):
- Manipulação do DOM.
- Lógica de alternância de temas.
- Sem dependências externas.
- SVG Icons: Ícones vetorizados para máxima nitidez em qualquer resolução.
A escolha das cores foi intencional para transmitir uma sensação de tecnologia, modernidade e crescimento.
| Cor | Hex | Significado |
|---|---|---|
| Green Accent | #10b981 |
Representa crescimento, energia e sucesso. É a cor primária que guia o olhar do usuário para ações importantes (botões, links). |
| Background Dark | #02040a |
Um tom quase preto, profundo, que oferece alto contraste e conforto visual para longas sessões de leitura. |
| Glass Effect | rgba |
Camadas translúcidas que adicionam profundidade e sofisticação à interface. |
Por que Dark Mode por padrão? Preferência pessoal para interfaces escuras para reduzir a fadiga ocular. O tema claro está disponível como uma opção secundária para ambientes muito iluminados.
Aqui estão os links oficiais para o design e a visualização do projeto:
- 📱 Deploy (GitHub Pages): Acesse o Portfólio Online
- 🎨 Design no Figma: Visualizar Protótipo
Se você quiser rodar este projeto na sua máquina:
- Clone o repositório:
git clone https://github.com/KellvinCorreia/fullstack.git
- Entre na pasta:
cd fullstack - Abra o arquivo
index.htmlno seu navegador de preferência ou use uma extensão como o Live Server do VS Code.
Feito com 💚 por Kellvin Correia Alves.