🌟 Portfólio Profissional

⚒️ Link da Aplicação

https://portfolio-projeto-1-lab-desenvolvim-sable.vercel.app/

📖 Descrição do Projeto

Este projeto consiste no desenvolvimento de um website de portfólio profissional, criado para apresentar de forma moderna, responsiva e acessível a trajetória, habilidades, projetos e formas de contato de seus desenvolvedores.

O site inclui as seguintes seções:

• Sobre Mim – Apresentação em português e inglês, destacando formação acadêmica, área de atuação, interesses e objetivos profissionais.

• Projetos – Linha do tempo interativa de projetos, com nome, descrição, tecnologias utilizadas, links para repositórios e imagens/GIFs demonstrativos.

• Experiências – Registro de experiências profissionais, estágios, trabalhos e participação em eventos ou projetos relevantes.

• Contato – Ícones clicáveis para redes sociais e formulário funcional para envio de mensagens por e-mail.

👥 Desenvolvedores

Fernanda Soares

Gabriel Reis

Olavo Vales

🛠️ Tecnologias Utilizadas

Back-end: Asp.NET

Front-end: Angular

Design e prototipagem: Figma

Controle de versão: GitHub e Git

📂 Estrutura Inicial do Site

Organização de pastas, componentes e módulos do Angular, integração com back-end.

🎨 Protótipos e Telas

Protótipos desenvolvidos no Figma, mostrando layout, responsividade e fluxo de navegação do usuário.

https://www.figma.com/design/ssPbqhfPPkHvpcmmEfnnLj/Portfolio-Projeto-1-Lab-Desenvolvimento-de-Software?node-id=0-1&t=IpJKXVAlB2iwBQSe-1

Como Executar o Front-end da aplicação

Este passo a passo explica como clonar, instalar e rodar o projeto Angular no Windows usando o VS Code e o Angular CLI. Inclui também uma seção de solução de problemas com os erros mais comuns.

---

✅ Pré‑requisitos

• Node.js (recomendado: versão LTS) → https://nodejs.org/
• npm (vem junto com o Node.js)
• Angular CLI (instalação global)
• Git (para clonar o repositório) → https://git-scm.com/
• VS Code (opcional, mas recomendado) → https://code.visualstudio.com/

Dica: após instalar, confirme as versões no terminal (PowerShell):

node -v
npm -v
ng version

---

🚀 Passo a passo (TL;DR)

1. [Windows/PowerShell] Habilitar execução de scripts (uma vez só):

   • Abra o PowerShell como Administrador e rode:

   Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned

   • Confirme com S (Sim) quando solicitado.

2. Clonar o repositório:

git clone https://github.com/<SEU_USUARIO>/<SEU_REPOSITORIO>.git
cd <SEU_REPOSITORIO>

3. Instalar dependências:

npm install

4. Rodar o servidor de desenvolvimento:

ng serve --open

O projeto abrirá em http://localhost:4200/.

5. Abrir no VS Code (opcional):

code .

---

📦 Scripts úteis

Os comandos abaixo usam o Angular CLI. Execute dentro da pasta do projeto.

• Servir em modo dev:

ng serve
# ou especifique outra porta
ng serve --port 4300

• Build de produção:

ng build --configuration production

• Rodar testes (se configurados):

ng test

---

🧭 Estrutura esperada do projeto (resumo)

<SEU_REPOSITORIO>/
├─ angular.json        # configurações do workspace Angular
├─ package.json        # dependências e scripts npm
├─ src/                # código-fonte da aplicação
└─ ...

---

🛠️ Solução de problemas (FAQ)

1) PowerShell bloqueando o comando ng

Erro:

ng : O arquivo ... ng.ps1 não pode ser carregado porque a execução de scripts foi desabilitada neste sistema.

Causa: política de execução do PowerShell. Como resolver:

# Execute UMA VEZ no PowerShell como Administrador
Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned

Feche e reabra o terminal.

---

2) “This command is not available when running the Angular CLI outside a workspace.”

Causa: você está fora da pasta do projeto (onde existe angular.json). Como resolver:

cd CAMINHO/DA/PASTA/DO/PROJETO
# confirme que existem angular.json e package.json
ng serve

---

3) “Node packages may not be installed… Could not find '@angular/build:dev-server'”

Causa: dependências não instaladas. Como resolver:

npm install
ng serve

Se persistir, tente limpar e reinstalar:

rmdir /s /q node_modules
Del package-lock.json
npm cache clean --force
npm install
ng serve

---

4) npm v vs npm -v

Para ver a versão do npm, use npm -v (com hífen). npm v tenta buscar um pacote chamado v e pode gerar erro.

---

5) Porta 4200 ocupada

ng serve --port 4300

---

6) Pergunta do CLI: “Do you want to create a 'zoneless' application without zone.js (Developer Preview)? (y/N)”

Se você busca estabilidade (recomendado), responda N (ou apenas Enter) para manter zone.js (modo padrão).

---

7) Compatibilidade de versões (Node/Angular)

• Prefira Node LTS.
• Se houver discrepâncias, instale a versão mais recente do CLI localmente no projeto e use via npx:

npm i -D @angular/cli@latest
npx ng version
npx ng serve

---

Como Executar o Back-end da aplicação

1. Instale o Visual Studio

2. Instale as dependências de "ASP.NET e desenvolvimento Web"

3. Com o git clone do projeto já feito anteriormente, abra a estrutura das pastas do projeto da seguinte forma: Portfolio-Projeto-1-Lab-Desenvolvimento-de-Software -> back -> PortfolioAPI -> Portfolio.sln

4. No canto superior, clique em https, para executar o projeto

5. Abrirá o swagger da API, abra o POST, clique em try it out, edite o corpo da requisição, de forma que o campo email obrigatoriamente tenha um @ na string, após isso mande a requisição