📌 Requisitos:

A lista de tecnologias deve ser um array onde no HTML você irá fazer um map para listar
Ao clicar no botão de linguagem o texto de apresentação "Olá meu nome...." muda para a linguagem selecionada
O botão de linguagem deve ser um componente onde você passará 3 propriedades: Título, ícone e o click dele
Esse projeto foi feito em Angular e para sua estilização utilizei o Saas.

A sigla significa “Syntactically Awesome Style Sheets” – ou seja, Folhas de Estilo com Sintaxe Espetacular.

A ideia é manter a mesma lógica do CSS (seletores, regras etc), mas de uma maneira mais organizada, intuitiva e com trechos de código facilmente reutilizáveis.

Com o SASS, é muito mais fácil desenvolver um projeto grande e não se perder no meio de tanto código.

Passo a Passo do Projeto:

Instalando no terminal power shell clicando no botão direito como administrador para o projeto em angular

1º Executar o comando CLI usando o npm gerenciador de pacotes e clica com botão direito em administrador, ao abrir digita: npm install -g @angular/cli

2º Para criar, construir e servir um novo projeto Angular básico em um servidor de desenvolvimento, vá para o diretório (pasta) que criou no seu espaço de trabalho e use o seguinte comando

ng new nome do projeto (no meu caso Portifolio_Angular)

Quando perguntar digita: - y

Escolhe a estilização Sass e dá Enter Aguarda a instalação dos pacotes no projeto, E altera copiando e colando para a pasta do projeto que foi criado antes de abrir no VSCode com o comando. cd nome pasta projeto

3º Agora sim vai Abrir o Projeto no Terminal para a ferramenta VSCode, digitando 👊 code .

Dentro do editor de código VSCode: Executar o projeto no servidor digitando: ng serve

Vai compilar na porta http://localhost:4200/. Criando component: ng g c

Exemplo: Pasta home teve os seguintes arquivos gerados :

component.html,

component.scss,

component.spec.ts,

component.ts.

O componente é composto por 3 arquivos, para template (HTML), estilo (SASS) e classe (TS) e toda essa configuração é feita dentro do decorador @Component onde é passado como metadados o template, o estilo e um seletor para que este componente possa ser usado em outro template.

Criando module:

ng g m

Após criado os components, os modules e os routings, eu configurei meu arquivo global dentro do styles.scss e importei dentro dele a font contida no import forncecida pelo google fonts.Após isso apaguei quase toda a escrita contida dentro do component.html do meu app. Como eu disse apaguei quase tudo, ou seja, deixei só o

Além dos componentes e modules gerados, temos outros arquivos criados:

Esses três arquivos são responsáveis pela configuração automática do JavaScript no projeto.

Agora vamos falar desse outro que é usado para realizar testes unitários

Todo componente gerado no Angular, gera o arquivo

que é o nosso arquivo de teste.

serve para reconhecer os arquivos que criamos

Funcionalidades

Para esse projeto foram criados 3 componentes a qual dei o nome de botao,header e home.

botao => responsável pela acão de mudança de idioma conforme o botão escolhido através da função criada para esse objetivo

1º Criei uma Variável com o nome de tradução  e atribui a mensagem principal e atual do texto,

public traducao = 'Olá, meu nome é Charlyes Souza Rodrigues e eu sou desenvolvedor Front-end, Tecnologias que tenho experiências:'

2º Criei 3 funções uma para cada idioma a qual será modificada atráves do this. que mudará o estado atual da linguagem
para a linguagem escolhida.

english() {

this.traducao = 'Hello, my name is Charlyes Souza Rodrigues and I am a Front-end developer, Technologies that I have experiences:'
}
portugues() {

this.traducao = 'Olá, meu nome é Charlyes Souza Rodrigues e eu sou desenvolvedor Front-end, Tecnologias que tenho experiências:'
}
espanhol() {

this.traducao = 'Hola, mi nombre es Charlyes Souza Rodrigues y soy desarrollador Front-end, Tecnologías que tengo experiencias:'

}

1º No botao.component.html,criei 3 div e dei o nome class de cada uma segundo o idioma(função) criado no botao.compontent.ts

Esses nomes class serão utilizados para estilização no botao.component.scss. Existem outras tags criadas dentro de cada

div que se refere a cada botão de idioma. Essas outras tags não precisaram de um nome class, pois atrávés da div principal que contem

o nome class elas serão estilizadas de forma encadeada.

Nesse componente se encontra a estilização feita de forma encadeada conforme o identificador de cada idioma que foi atribuída a uma div.

const routes: Routes = [{ path: '', component: BotaoComponent }];

Quando nós trabalhamos com rotas, nós temos duas propriedades:

path: string que desejamos para a nossa rota, no nosso exemplo estamos utilizando botao. component: passamos o nome do component que desejamos adicionar para a nossa rota.

Podemos observar que na linha 3 estamos passando as nossas rotas para o RouterModule através do método forRoot e exportando elas no linha 2.

header=> reponsável pelo cabeçalho do projeto
home => ficou responsável pela lista de teconologias (array)

Foram criadas 3 listas contendo as tecologias contidas no protótipo do projeto

Para conseguir percorrer a lista de array, utilizei o Ngfor que é uma diretiva Angular que permite percorrer um array, ou qualquer objeto iterável, e exibir cada item do array como elemento na tela.

Estilizando o projeto conforme o identificador dado a tag no html

Fiz no app.component.html a integração de quase todos os component criado no projeto.Foi necessário utilizar o seletor de cada componente.

O componente da Home foi integrado através do app-routing.module.ts

CharlyesRodrigues/Portifolio_Angular

Passo a Passo do Projeto:

Funcionalidades