Portfolio de Govinda

✨ Govinda - Portfolio & Blog Pessoal ✨

Site profissional e blog pessoal, mostrando projetos, habilidades e experiências.
Visite o site »

Reportar bug · Sugerir recurso

_{^{HTML5 • CSS3 • JavaScript (ES6+) • TailwindCSS • Alpine.js • Anime.js • Three.js}}

📋 Índice

📝 Sobre o Projeto
💻 Tecnologias Utilizadas
🎨 Características do Projeto
🗂 Estrutura do Site
🚀 Como Usar
🔮 Roadmap
🤝 Contribuindo
📜 Licença
📞 Contato

📝 Sobre o Projeto

Este é meu site pessoal e profissional, projetado para servir como portfolio, blog técnico e vitrine de projetos. O site é construído com um design moderno e minimalista, focado em destacar meu trabalho e habilidades como desenvolvedor.

🎯 Objetivo

O principal objetivo deste site é:

💼 Apresentar meu perfil profissional para potenciais empregadores e clientes
📚 Compartilhar conhecimento através de artigos técnicos no blog
🖥️ Exibir projetos e trabalhos desenvolvidos
📬 Fornecer um meio de contato profissional

🎭 Público-alvo

Grupo	Descrição	Foco
👔 Recrutadores	Empregadores potenciais	Portfolio e CV
👨‍💻 Desenvolvedores	Colegas de profissão	Código e artigos técnicos
🤝 Clientes	Para projetos freelance	Projetos e habilidades
🧠 Entusiastas	Interessados em tecnologia	Conteúdo do blog

💻 Tecnologias Utilizadas

graph TD
    A[Site Portfolio] --> B[Base]
    B --> C[HTML5]
    B --> D[CSS3]
    B --> E[JavaScript ES6+]
    A --> F[Framework CSS]
    F --> G[TailwindCSS]
    A --> H[Interatividade]
    H --> I[Alpine.js]
    A --> J[Animações]
    J --> K[Anime.js]
    A --> L[Efeitos 3D]
    L --> M[Three.js]
    A --> N[Hospedagem]
    N --> O[GitHub Pages]

Tecnologia	Propósito	Implementação	Destaque
HTML5	Estrutura semântica	Via CDN	Acessibilidade e SEO
CSS3	Estilização base	Nativo	Variáveis CSS
JavaScript	Lógica e interações	ES6+	Manipulação DOM e APIs modernas
TailwindCSS	Framework CSS utilitário	Via CDN	Design responsivo sem CSS customizado
Alpine.js	Interatividade declarativa	Via CDN	Componentes reativos leves
Anime.js	Animações avançadas	Via CDN	Animações suaves e timeline
Three.js	Gráficos 3D	Via CDN	Experiências 3D interativas
GitHub Pages	Hospedagem	Nativo	Deploy automático

Implementação via CDN (Sem Build)

Esta stack foi escolhida para permitir desenvolvimento rápido sem necessidade de build ou tooling complexo, utilizando apenas CDNs para importar as bibliotecas:

<!-- TailwindCSS -->
<script src="https://cdn.tailwindcss.com"></script>

<!-- Alpine.js -->
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

<!-- Anime.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>

<!-- Three.js -->
<script src="https://cdn.jsdelivr.net/npm/three@0.150.0/build/three.min.js"></script>

🎨 Características do Projeto

🌙 Design e Interface

🎨 Tema Dark	📱 Design Responsivo	✨ Animações	🔤 Tipografia Dual
Cores escuras com acentos turquesa	TailwindCSS para todos dispositivos	Anime.js para animações suaves	Inter + Fira Code para código

⚙️ Paleta de Cores

🧩 Funcionalidades

📄 SPA Navigation: Navegação suave com Alpine.js para transições
🖼️ Portfolio Interativo: Cards de projetos com animações Anime.js
🔮 Experiências 3D: Elementos interativos com Three.js
🎭 Interações Reativas: Componentes dinâmicos com Alpine.js
📝 Formulário de Contato: Interface reativa para comunicação
📄 Currículo: Download do CV em formato PDF

🗂 Estrutura do Site

flowchart LR
    Home["🏠 Home"] --> About["👤 Sobre"]
    Home --> Projects["💼 Projetos"]
    Home --> Blog["📚 Blog"]
    Home --> Contact["📞 Contato"]
    Projects --> P1["Projeto 1"]
    Projects --> P2["Projeto 2"]
    Projects --> P3["Projeto 3"]
    Projects --> P4["Projeto 4"]
    Blog --> B1["Artigo 1"]
    Blog --> B2["Artigo 2"]
    Blog --> B3["Artigo 3"]

🏠 Home - Introdução pessoal com experiência 3D

<section class="h-screen relative" id="home">
  <div id="three-bg" class="absolute inset-0 -z-10"></div>
  <div class="container mx-auto px-4 h-full flex items-center">
    <div x-data="{ show: false }" x-init="setTimeout(() => show = true, 100)" 
         :class="show ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'"
         class="transition-all duration-1000 ease-out">
      <p class="font-mono text-accent">Olá, meu nome é</p>
      <h1 class="text-5xl font-bold mt-2">Govinda.</h1>
      <h2 class="text-4xl text-light mt-2">Transformo ideias em soluções inovadoras.</h2>
    </div>
  </div>
</section>

👤 Sobre - Biografia profissional e habilidades técnicas

Apresentação pessoal, trajetória profissional, áreas de expertise e principais tecnologias dominadas, com animações de entrada utilizando Anime.js.

💼 Projetos - Portfolio interativo com Alpine.js e Anime.js

Apresentação dos projetos mais relevantes com descrições, tecnologias utilizadas e links para demos/repositórios. Cards interativos com efeitos de hover.

📚 Blog - Artigos técnicos com transições suaves

Artigos sobre desenvolvimento, tutoriais, análises de tecnologias e compartilhamento de experiências. Layout responsivo com TailwindCSS.

📞 Contato - Formulário reativo com Alpine.js

Formulário de contato reativo com validação em tempo real usando Alpine.js e efeitos de feedback com Anime.js.

🚀 Como Usar

💻 Visualização Local

Este site utiliza Jekyll, um gerador de sites estáticos, para facilitar a manutenção e permitir a divisão do conteúdo em arquivos menores.

Pré-requisitos

Antes de começar, você precisará ter instalado:

Ruby (versão 2.5.0 ou superior)
- macOS: Já vem instalado ou use brew install ruby
- Windows: RubyInstaller
- Linux: sudo apt-get install ruby-full
Bundler e Jekyll
```
gem install bundler jekyll
```

Instalação

Clone o repositório:

git clone https://github.com/govinda777/govinda777.github.io.git
cd govinda777.github.io

Instale as dependências:
```
npm run install
# OU
bundle install
```

Execução

Existem várias formas de executar o site localmente:

Usando NPM (recomendado)

# Iniciar o servidor Jekyll
npm start

# Iniciar com live reload (atualização automática ao salvar arquivos)
npm run dev

# Construir o site para produção
npm run build

# Limpar arquivos gerados
npm run clean

# Atualizar dependências
npm run update

Usando Bundler diretamente

# Iniciar o servidor Jekyll
bundle exec jekyll serve

# Iniciar com live reload
bundle exec jekyll serve --livereload

# Construir o site para produção
bundle exec jekyll build

Acesse o site em http://localhost:4000

Estrutura do Projeto

- _includes/        # Componentes e seções individuais
- _layouts/         # Templates de layout 
- assets/           # CSS, JavaScript e imagens
  - css/
  - js/
  - img/
- index.html        # Home page com front matter
- _config.yml       # Configuração do Jekyll
- Gemfile           # Dependências Ruby/Jekyll

Adicionando Novas Seções

Crie um novo arquivo em _includes/ com o nome da seção (ex: projects-section.html)
Adicione o HTML da seção neste arquivo
Inclua a seção em index.html com:

Deploy

O site é hospedado no GitHub Pages, que suporta Jekyll nativamente. Para fazer deploy:

git add .
git commit -m "Sua mensagem de commit"
git push origin main

O GitHub Pages irá automaticamente construir e publicar o site.

Recursos Adicionais

Para mais informações sobre como personalizar seu site Jekyll, consulte:

🔮 Roadmap

Cenas 3D Avançadas	Tema Claro/Escuro
Analytics	Internacionalização
SEO Avançado	Integração APIs

🤝 Contribuindo

Contribuições são bem-vindas! Se você tem sugestões para melhorar este site, sinta-se à vontade para:

🔀 Fork o projeto
🔨 Criar uma branch para sua feature (git checkout -b feature/AmazingFeature)
💾 Commit suas mudanças (git commit -m 'Add some AmazingFeature')
📤 Push para a branch (git push origin feature/AmazingFeature)
🔍 Abrir um Pull Request

📜 Licença

Distribuído sob a licença MIT. Veja LICENSE para mais informações.

📞 Contato

Govinda - seu-email@exemplo.com

_{Desenvolvido com ❤️ por Govinda}

Name		Name	Last commit message	Last commit date
Latest commit History 36 Commits
.bundle		.bundle
.github		.github
_includes		_includes
_layouts		_layouts
_sass		_sass
assets		assets
js		js
.gitignore		.gitignore
Gemfile		Gemfile
LICENSE		LICENSE
README-JEKYLL.md		README-JEKYLL.md
README.md		README.md
_config.yml		_config.yml
index.html		index.html
package.json		package.json

Uh oh!

License

govinda777/govinda777.github.io

Folders and files

Latest commit

History

Repository files navigation

Portfolio de Govinda

✨ Govinda - Portfolio & Blog Pessoal ✨

📋 Índice

📝 Sobre o Projeto

🎯 Objetivo

🎭 Público-alvo

💻 Tecnologias Utilizadas

Implementação via CDN (Sem Build)

🎨 Características do Projeto

🌙 Design e Interface

⚙️ Paleta de Cores

🧩 Funcionalidades

🗂 Estrutura do Site

🚀 Como Usar

💻 Visualização Local

Pré-requisitos

Instalação

Execução

Usando NPM (recomendado)

Usando Bundler diretamente

Estrutura do Projeto

Adicionando Novas Seções

Deploy

Recursos Adicionais

🔮 Roadmap

🤝 Contribuindo

📜 Licença

📞 Contato

About

Resources

License

Code of conduct

Contributing

Uh oh!

Stars

Watchers

Forks

Releases

Sponsor this project

Uh oh!

Packages 0

Uh oh!

Contributors 2

Uh oh!

Languages

Packages