https://github.com/vhtc/sitevhtc
site portfólio vhtc
https://github.com/vhtc/sitevhtc
css html jss netlify
Last synced: 3 months ago
JSON representation
site portfólio vhtc
- Host: GitHub
- URL: https://github.com/vhtc/sitevhtc
- Owner: vhtc
- Created: 2022-03-14T21:16:29.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2025-09-29T12:05:13.000Z (10 months ago)
- Last Synced: 2025-10-19T14:48:47.346Z (9 months ago)
- Topics: css, html, jss, netlify
- Language: JavaScript
- Homepage: https://vhtc.netlify.app/
- Size: 11.2 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README-novo.md
Awesome Lists containing this project
README
# VHTC Portfolio - Versão Modernizada 🚀
## Victor Tuy - Portfolio Profissional
Este é o portfolio pessoal modernizado de Victor Tuy (V.H.T.C), desenvolvido com as mais recentes tecnologias web para proporcionar uma experiência única e profissional.
### 🌟 Novidades e Melhorias
#### ✨ Design Moderno
- **Interface completamente redesenhada** com foco em UX/UI moderno
- **Esquema de cores aprimorado** com verde neon (#00ff41) como cor principal
- **Tipografia moderna** usando Inter e JetBrains Mono
- **Glassmorphism effects** para elementos de interface
- **Animações fluidas** e transições suaves
#### 📱 Totalmente Responsivo
- **Mobile-first approach** garantindo excelente experiência em todos os dispositivos
- **Navegação hamburger** otimizada para mobile
- **Grid layouts** adaptativos e flexíveis
- **Imagens otimizadas** para diferentes resoluções
#### ⚡ Performance Otimizada
- **Lazy loading** para imagens
- **Debouncing** para eventos de scroll
- **Código otimizado** e minificado
- **Loading screen** interativo com animações
#### 🎨 Recursos Visuais Avançados
- **Partículas interativas** em background
- **Efeito de digitação** modernizado
- **Scroll spy** para navegação ativa
- **Animações GSAP** para elementos
- **Hover effects** sofisticados
#### 🔧 Funcionalidades Aprimoradas
- **Filtro de portfolio** por categoria
- **Formulário de contato** funcional
- **Linha do tempo** interativa
- **Sistema de notificações**
- **Navegação suave** entre seções
### 📂 Estrutura de Arquivos
```
SiteVHTC/
├── index-novo.html # Página principal modernizada
├── styles-novo.css # Estilos modernos e responsivos
├── JS/
│ └── main-novo.js # JavaScript principal com todas funcionalidades
├── Particles/
│ └── js/
│ └── particles.js # Configuração atualizada das partículas
├── portfolio/ # Imagens do portfolio
├── softwares/ # Ícones de tecnologias
├── redes_sociais/ # Imagens e ícones sociais
└── README-novo.md # Este arquivo
```
### 🚀 Como Usar
1. **Abra o arquivo principal:**
```
index-novo.html
```
2. **Ou mantenha compatibilidade** renomeando os arquivos:
```
index-novo.html → index.html
styles-novo.css → styles.css
main-novo.js → main.js
```
### 🎯 Seções do Portfolio
1. **Home/Hero** - Apresentação principal com efeito de digitação
2. **Sobre** - Informações pessoais e estatísticas
3. **Habilidades** - Tecnologias organizadas por categorias
4. **Portfolio** - Projetos com filtros interativos
5. **Trajetória** - Timeline de concursos e experiências
6. **Contato** - Formulário e informações de contato
### 🛠 Tecnologias Utilizadas
#### Frontend
- **HTML5** semântico e acessível
- **CSS3** com variáveis CSS e Flexbox/Grid
- **JavaScript ES6+** moderno e otimizado
- **GSAP** para animações profissionais
- **Particles.js** para efeitos visuais
#### Design
- **Mobile-first** responsive design
- **Glassmorphism** effects
- **Gradient backgrounds**
- **Custom animations**
- **Interactive elements**
### 🎨 Paleta de Cores
```css
--primary-color: #00ff41 /* Verde neon principal */
--primary-dark: #00cc33 /* Verde escuro */
--secondary-color: #4445a3 /* Azul/roxo */
--accent-color: #ff6b6b /* Vermelho de destaque */
--background-dark: #000000 /* Fundo escuro */
--text-light: #ffffff /* Texto claro */
--text-gray: #a0a0a0 /* Texto secundário */
```
### 📱 Breakpoints Responsivos
```css
/* Mobile */
@media (max-width: 480px)
/* Tablet */
@media (max-width: 768px)
/* Desktop */
@media (min-width: 1200px)
```
### ⚡ Recursos de Performance
- **Lazy Loading** para imagens
- **Debounced Scroll Events**
- **Optimized Animations**
- **Compressed Assets**
- **Efficient CSS Grid/Flexbox**
### 🔧 Personalização
#### Alterar Cores
Edite as variáveis CSS no início do arquivo `styles-novo.css`:
```css
:root {
--primary-color: #sua-cor-aqui;
--secondary-color: #sua-cor-aqui;
/* ... */
}
```
#### Modificar Textos de Digitação
No arquivo `main-novo.js`, altere o array `textArray`:
```javascript
const textArray = [
"Seu novo texto aqui",
"Outro texto",
// ...
];
```
#### Atualizar Portfolio
Adicione novos itens no HTML e imagens na pasta `portfolio/`.
### 🌐 Deploy
#### Netlify (Recomendado)
1. Faça upload dos arquivos
2. Configure domínio personalizado
3. Ative HTTPS automático
#### GitHub Pages
1. Commit os arquivos no repositório
2. Ative GitHub Pages nas configurações
3. Acesse via username.github.io/repo-name
### 📈 SEO Otimizado
- **Meta tags** completas
- **Structured data** implementado
- **Open Graph** tags
- **Sitemap** friendly
- **Fast loading** times
### 🔒 Acessibilidade
- **ARIA labels** implementados
- **Keyboard navigation** suportada
- **Screen reader** friendly
- **High contrast** mode support
- **Focus indicators** visíveis
### 🐛 Solução de Problemas
#### Partículas não aparecem
```javascript
// Verifique se particles.js está carregado
if (typeof particlesJS !== 'undefined') {
particlesJSvhtc();
}
```
#### Animações não funcionam
```javascript
// Verifique se GSAP está carregado
if (typeof gsap !== 'undefined') {
// Suas animações aqui
}
```
### 📞 Suporte
Para dúvidas ou sugestões:
- **Email:** contato@vhtc.com
- **GitHub:** @vhtc
- **LinkedIn:** Victor Tuy
### 📄 Licença
Este projeto está sob a licença MIT. Veja o arquivo `LICENSE` para mais detalhes.
### 🤝 Contribuições
Contribuições são bem-vindas! Sinta-se à vontade para:
1. Fork o projeto
2. Criar uma branch para sua feature
3. Commit suas mudanças
4. Push para a branch
5. Abrir um Pull Request
---
**Desenvolvido com ❤️ por Victor Tuy - V.H.T.C**
*"Transformando código em experiências digitais incríveis"*