O VsCode Portfolio é uma aplicação web interativa que simula o ambiente de desenvolvimento do Visual Studio Code. Ele foi criado como um portfólio para demonstrar as habilidades do desenvolvedor e inclui links de contato direto com ele.
- Interface Realista: Recriação fiel da UI do VS Code, incluindo barra lateral, abas e status bar.
- Terminal Interativo: Um terminal funcional onde usuários podem executar comandos como
help,openecontact. - Sistema de Arquivos Virtual: Navegação intuitiva através de "arquivos" que representam as páginas do portfólio (Sobre, Projetos, Experiência).
- Temas Dinâmicos: Suporte completo a Modo Claro e Modo Escuro, persistente e alternável.
- Internacionalização (i18n): Suporte nativo para Português e Inglês.
| Versão | URL | Descrição |
|---|---|---|
| Produção | gabrielfeijo.com.br | Versão estável e otimizada |
Experimente digitar estes comandos no terminal integrado do portfólio:
ajuda # Exibir todos os comandos disponíveis
avaliar # Avaliar o projeto (feedback interativo)
avaliacoes # Ver comentários de outros visitantes
rota <nome> # Navegar para uma página (ex: rota sobre)
mudartema # Alternar entre Light/Dark mode
mudaridioma # Alternar entre PT/EN
limpar # Limpar o terminalCertifique-se de ter instalado:
-
Clone o repositório
git clone https://github.com/GabrielFeijo/VsCode-Portfolio.git cd VsCode-Portfolio -
Instale as dependências
npm install
-
Inicie o servidor de desenvolvimento
npm start
-
Acesse a aplicação
- Abra http://localhost:3000 no navegador
src/
├── components/ # Componentes React reutilizáveis
│ ├── Layout/ # Estrutura principal (Sidebar, Header)
│ ├── Terminal/ # Lógica e UI do terminal interativo
│ └── Editor/ # Área de conteúdo principal
├── pages/ # "Arquivos" do portfólio
│ ├── About/ # Sobre mim
│ ├── Projects/ # Lista de projetos
│ └── Experience/ # Experiência profissional
├── hooks/ # Custom Hooks (Theme, Language)
├── context/ # Context API (Global State)
├── utils/ # Funções utilitárias
└── assets/ # Imagens e ícones
| Tecnologia | Versão | Uso |
|---|---|---|
| React | 18.1 | Biblioteca de UI principal |
| TypeScript | 4.7 | Tipagem estática e segurança |
| Material UI | 5.8 | Componentes de interface e sistema de design |
| Framer Motion | 12.6 | Animações fluidas e transições |
| i18next | 23.6 | Internacionalização e tradução |
| React Router | 6.3 | Roteamento SPA |
| Axios | 1.3 | Requisições HTTP |