Este é um portfólio pessoal moderno desenvolvido com Angular 17+, utilizando componentes standalone, lazy loading visual, e boas práticas de arquitetura.
Aplicação Single Page Application (SPA) feita com Angular, cujo objetivo é apresentar de forma elegante e performática as informações pessoais, conhecimentos, experiências e projetos desenvolvidos.
- O componente raiz (
AppComponent) usa<router-outlet>para renderizar as rotas. - A rota principal carrega o
HomeComponent, que apresenta as seções:- Cabeçalho (
<app-header />) - Conhecimentos (
<app-knowledge />) - Experiências (
<app-experiences />) - Projetos (
<app-projects />) que são carregados de forma adiada (@defer) apenas quando visíveis na tela.
- Cabeçalho (
- Uso de diretivas Angular
@defer,@placeholdere@errorpara otimização da experiência do usuário. - A estilização é feita com SCSS, organizando estilos base, componentes, layout e tema.
src/ └── app/ └── modules/ └── portfolio/ ├── components/ │ ├── dialog/ │ ├── experiences/ │ ├── header/ │ ├── knowledge/ │ └── projects/ ├── enum/ ├── interface/ └── pages/ └── home/ └── assets/ ├── icons/ ├── img/ └── pdf/ └── scss/ ├── base/ ├── components/ ├── layout/ ├── theme/ └── index.scss
- Componentes standalone importando apenas os módulos necessários.
- Modularização para facilitar manutenção e escalabilidade.
- Interfaces e enums para maior segurança e clareza no código.
| Tecnologia | Descrição |
|---|---|
| Angular 17+ | Framework principal |
| Angular Router | Roteamento |
| Angular Standalone Components | Modularização simplificada |
Angular Directives (@defer) |
Lazy loading visual |
| SCSS (SASS) | Pré-processador CSS |
| TypeScript | Tipagem estática |
| Angular Animations | Animações para a interface |
| CSS Custom Properties | Temas e cores reutilizáveis |