https://github.com/tassio-med/tech-works
Página web responsiva construida apenas com HTML5, CSS3 e Javascript.
https://github.com/tassio-med/tech-works
api-fetch css3 flexbox-css flexbox-grid html5 javascript
Last synced: about 1 month ago
JSON representation
Página web responsiva construida apenas com HTML5, CSS3 e Javascript.
- Host: GitHub
- URL: https://github.com/tassio-med/tech-works
- Owner: Tassio-Med
- Created: 2023-04-09T15:01:47.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-04-11T20:04:05.000Z (about 3 years ago)
- Last Synced: 2025-05-15T02:11:21.677Z (about 1 year ago)
- Topics: api-fetch, css3, flexbox-css, flexbox-grid, html5, javascript
- Language: HTML
- Homepage: https://tech-works.vercel.app
- Size: 10.9 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Bem-vindo ao Tech Works!
O desafio desse projeto foi construir uma página web responsiva apenas com HTML5, CSS3 e Javascript.
As principais habilidades colocadas prática nesse projeto foram:
* **Javascript**.
* **HTML5**
* **CSS3**;
* **Responsividade**;
* **Deploy com Vercel**;
* **ESLint**;
   
## Instalação
Para testar o projeto na sua máquina pessoal siga os seguintes passos:
1. Clone o repositório:
```sh
git@github.com:Tassio-Med/tech-works.git
```
⚠️ **Importante** ⚠️:
- O projeto possui como dependência a biblioteca `toastify-js`, porém ela ainda não está em uso neste projeto, é apenas para continuação do desenvolvimento deste projeto em um futuro próximo. Se você quiser instalar siga a orientação abaixo:
2. Instale os pacotes npm:
```bash
npm install
```
## Desenvolvimento
O projeto [Tech Works](https://tech-works.vercel.app/) consiste na construção de um site fictício de uma empresa de tecnologia.
Na página inicial há um header responsivo que se tornar um menu hamburguer quando a tela é diminuída. Logo abaixo há seção Hero, onde seria uma espécie de introdução para o usuáriio sobre a empresa e o que ela faz. Abaixo há uma seção que representa os serviços que empresa presta e seus projetos realizados, poderia ser UX/UI, Desenvolvimento específico para Lojas online, mercado financeiro e etc.
Logo depois há uma seção que representa o trabalho da empresa em conjunto com uma frase ao lado que poderia ser a missão, por isso o texto está em itálico.
Por último há um footer com um formulário para contato e link das redes sociais da empresa.
O footer foi configurado com o [FormSubmit](https://formsubmit.co/) uma plataforma que facilita o envio de mensangens a partir de um formulário para e-mail de destinatários.
Abaixo as imagens são das duas telas em que que é possível ser redirecionado:
## API
Outro ponto que acredito ser relevante é que adicionei uma página de Blog, onde seriam alguns artigos produzidos pela empresa. Toda as notícias foram puxadas da api [JSON Placeholder](https://jsonplaceholder.typicode.com/), uma API simples com texto em Lorem Ipsum.
No código adicionei um limite de 6 elementos:
```sh
fetch('https://jsonplaceholder.typicode.com/posts?_limit=6')
.then(response => response.json())
.then(json => console.log(json))
```
Segue abaixo uma imagem de como ficou a página de blog:
## Design
Para a construção visual do projeto foi CSS3 e a paleta de cores do projeto foi construída na plataforma [Coolors](https://coolors.co/). A minha meta pessoal era desenvolver um botão para o tema dark, mas por conta do tempo decidi manter o projeto com cores mais escuras.
As cores representadas abaixas estão em HEX na imagem.
## Autor
- [@tassio medeiros](https://github.com/Tassio-Med)
[](https://linkedin.com/in/tassiomed98)
[](https://instagram.com/tassio.med?igshid=ZDdkNTZiNTM=)
## EsLint
Neste projeto foi utilizada extensão do [ESLint](https://eslint.org/) para fazer a análise estática do código. Ajudando a garantir a qualidade do código de forma a tê-lo mais legível, de mais fácil manutenção e seguindo as boas práticas de desenvolvimento.
[🔼 Voltar topo](#bem-vindo-ao-tech-works)