image

Acesso vitalício ao Atalho Secreto + bootcamps ilimitados

86
%OFF
Article image
Otávio Guedes
Otávio Guedes19/01/2026 20:11
Compartilhe

🌟 Compartilhando Meu Portfólio de Desenvolvedor

  • #Programação para Internet
  • #HTML
  • #CSS
  • #JavaScript

Olá, pessoal!

Eu gostaria de compartilhar com vocês o meu site de portfólio. Foi um projeto muito divertido de desenvolver e estou bem satisfeito com o resultado final!

Acesse aqui: https://otavio2007-backend.edgeone.app/

🎯 A Ideia

Queria criar algo diferente dos portfólios tradicionais. Em vez de apenas listar projetos e habilidades de forma estática, busquei criar uma experiência visual e interativa que realmente mostrasse minha identidade como desenvolvedor.

O resultado é um site moderno, totalmente responsivo e com várias funcionalidades legais que vou mostrar abaixo!

✨ Principais Funcionalidades

1. Sistema Solar Interativo

A estrela do projeto (literalmente!) é o sistema solar animado na seção inicial. Minha foto de perfil fica no centro com um efeito de brilho pulsante, e ao redor dela orbitam 6 tecnologias que eu uso no dia a dia: Java, Spring, PostgreSQL, Maven, AWS e Git.

Os ícones giram continuamente, mas quando você passa o mouse sobre a foto ou sobre qualquer ícone, tudo pausa. É uma forma visual de mostrar as tecnologias que fazem parte do meu universo de desenvolvimento.

2. Site Bilíngue (Português/Inglês)

O portfólio é totalmente traduzido para dois idiomas. Tem um botão no menu superior que alterna entre PT e EN, e o site lembra sua preferência para a próxima visita.

Tudo é traduzido: títulos, textos, descrições dos projetos, formulário de contato e até o arquivo de CV que é baixado (versão em português ou em inglês, dependendo do idioma selecionado).

3. Design Moderno com Tema Dourado

Escolhi uma paleta de cores escura com acentos em dourado, que dá um visual premium e elegante. O fundo tem estrelinhas animadas e efeitos de brilho que criam uma atmosfera espacial.

Os cards de projetos têm efeito de vidro fosco (glassmorphism) e quando você passa o mouse, eles levitam e brilham!

4. Totalmente Responsivo

O site funciona perfeitamente em qualquer dispositivo:

  • Desktop: Layout completo em duas colunas com todas as animações
  • Tablet: Ajusta automaticamente para uma coluna, mantendo a experiência
  • Celular: Menu hamburger animado, botões full-width, órbitas ajustadas

Testei desde telas 4K até smartphones pequenos de 360px, e tudo se adapta fluidamente.

5. Animações Suaves em Scroll

Conforme você rola a página, os elementos aparecem com animações elegantes:

  • Textos deslizam da esquerda
  • Imagens entram pela direita
  • Cards sobem suavemente

Tudo sincronizado para criar uma experiência de navegação fluida e profissional.

6. Formulário de Contato Funcional

Tem um formulário real que funciona! Quando alguém preenche e envia, eu recebo o email diretamente na minha caixa de entrada. Não é só decorativo, é 100% funcional.

O formulário tem validação e mostra mensagens de sucesso/erro no idioma correto (PT ou EN).

📂 Seções do Site

Início (Hero)

A primeira impressão! Apresentação pessoal, sistema solar interativo, botões para baixar CV e ver projetos, além de links diretos para GitHub, LinkedIn e WhatsApp.

Sobre

Quem eu sou, minha especialização e objetivos de carreira. Tem uma grade com minhas 10 principais habilidades técnicas e um snippet de código Java estilizado que resume meu perfil.

Projetos

Showcase de 6 projetos do meu GitHub:

  • API Amigo Secreto 2.0 - Sistema completo de sorteio (Projeto de Natal)
  • Roguelike Java - Jogo de terminal com geração procedural
  • AcademiaGYM API - Gerenciamento de academias
  • E-commerce Database - Modelagem completa de banco
  • Gerenciador de Times - Sistema de gestão esportiva
  • Otavio's Bank - Sistema bancário POO

Cada projeto tem imagem, descrição detalhada, tags de tecnologias e link direto para o repositório.

Contato

Minhas informações de contato (GitHub, LinkedIn, WhatsApp) e o formulário funcional para mensagens diretas.

🎨 Diferenciais

Sem frameworks pesados - Tudo feito com HTML, CSS e JavaScript vanilla puro

Performance otimizada - Carregamento rápido mesmo com todas as animações

Acessível - Navegação por teclado, screen readers, ARIA labels

SEO otimizado - Meta tags completas, Open Graph, Twitter Cards

Menu inteligente - Mostra qual seção você está visualizando

Scroll suave - Navegação fluida entre seções

💭 Por Que Compartilhar?

Além de ser uma forma de mostrar meu trabalho para recrutadores e empresas, esse portfólio também é:

Um projeto de aprendizado - Aprendi muito sobre web design moderno, animações e UX

Uma expressão criativa - Consegui colocar minha personalidade no design

Open source - O código está no GitHub para quem quiser usar como base para o seu próprio portfólio

🚀 Acesse e Me Diga o Que Achou!

Adoraria receber feedback de vocês:

  • O que acharam do design?
  • A navegação está intuitiva?
  • As animações estão agradáveis ou exageradas?
  • Alguma sugestão de melhoria?

Links:

Espero que gostem! Qualquer feedback é super bem-vindo.

Se você também tem um portfólio, compartilhe aqui nos comentários!! Adoro ver o trabalho de outros devs!

Compartilhe
Recomendados para você
Ri Happy - Front-end do Zero #2
Ri Happy - Front-end do Zero
Microsoft Certification Challenge #5 - AZ-204
Comentários (0)