Skip to content

DouglasIde/OptimusTech_Project

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

22 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

OptimusTech_Project

Optimus Tech

if you want to read in english. Please just scroll down to read the EN version

IMPORTANTE: Esta empresa é fictícia para fins acadêmicos para o meu treinamento de HTML e CSS

Este projeto, desenvolvido como parte de um desafio proposto pela Alura, teve a duração de 7 dias e exigiu a criação de um site utilizando apenas HTML e CSS, sem a utilização de bibliotecas. Porém eu utilizei o framework Animate.css.

O desafio visava explorar e aplicar todo o conhecimento adquirido no curso de HTML e CSS fornecido pela Alura.

O objetivo principal era reproduzir fielmente o layout fornecido no seguinte link: Figma - 7daysOfCode.

Além de replicar o design proposto, foram realizadas algumas implementações adicionais para aprimorar a experiência do usuário, como a integração de animações utilizando o Animate.css. Também foram adicionados efeitos de hover para proporcionar uma interação mais suave e agradável ao usuário.

Destaca-se que o projeto foi concluído em um período de apenas 4 dias, demonstrando eficiência e habilidade no desenvolvimento de soluções web.

Apresentação do Projeto por Partes

O escopo deste projeto consistiu no desenvolvimento da página principal do site, comumente conhecida como "Home". Abaixo, segue uma lista detalhada dos elementos implementados:

  • Header - Localizado no topo da página, abriga a barra de navegação (Navbar) do site. Facilita o acesso do usuário ao cadastro ou login no site, além de fornecer atalhos para diversas páginas internas. Nesta parte eu implementei várias animações como "hover" para melhor interação do Usuário
  • Cabeçalho - Apresenta uma breve demonstração da empresa, destacando suas principais características. Foi replicado fielmente conforme o layout fornecido no Figma.
  • Métricas - Esta seção representou um desafio, uma vez que envolvia o uso do flex-box. Apesar das dificuldades iniciais, consegui resolver eficientemente, buscando manter a fidelidade ao design do Figma. Acrescentei um sutil efeito de "hover" nos números, proporcionando uma variação de tonalidade ao passar o cursor sobre eles, visando uma experiência diferenciada.
  • Vagas - Na área destinada às vagas, apliquei os conhecimentos adquiridos sobre flex-box de forma mais avançada. Busquei seguir rigorosamente o layout, com uma diferenciação na aplicação do efeito "hover" nos títulos das funções das vagas em aberto, visando uma interação mais acessível ao usuário.
  • Depoimentos - Esta seção foi relativamente simples de ser implementada, não exigindo grandes preocupações com o display. O tempo de conclusão foi otimizado.
  • Formulário - A construção do formulário foi facilitada pelo posicionamento pré-estabelecido, proporcionando uma implementação descomplicada. As dificuldades foram minimizadas, resultando em uma conclusão eficiente.

O projeto foi desenvolvido com atenção aos detalhes, buscando não apenas replicar o design, mas também aprimorar a experiência do usuário através de elementos como efeitos "hover" e disposição intuitiva de informações.

Tenho a intenção de prosseguir com o projeto, tornando-o responsivo e incorporando páginas, com o objetivo de finalizá-lo como um website de portfólio completo.

Reflexão sobre o Desenvolvimento do Projeto: Conquista de Autonomia na Programação e Busca por Excelência

Conquistei, de maneira assertiva, autonomia no âmbito da programação, demonstrando habilidade para enfrentar desafios e buscar soluções durante o desenvolvimento do website. Este desafio permitiu-me explorar meu potencial ao pesquisar e resolver problemas existentes de maneira ágil.

O projeto foi conduzido de maneira independente, sem a solicitação de assistência da equipe da Alura, apesar da oferta de suporte por parte desta. Embora meu código possa não estar isento de possíveis aprimoramentos, gostaria de convidar o leitor a compartilhar sua opinião sobre como poderia ter aprimorado o projeto ou torná-lo mais claro, seguindo as diretrizes do Clean Code.

Sinta-se à vontade para oferecer sua análise crítica e opiniões construtivas sobre o projeto. Estou aberto a sugestões que possam contribuir para o refinamento do código e aprimoramento geral do projeto.

ENGLISH VERSION

IMPORTANT: This company is fictitious for academic purposes as part of my HTML and CSS training.

This project, developed as part of a challenge proposed by Alura, lasted for 7 days and required the creation of a website using only HTML and CSS, without the use of libraries. However, I utilized the Animate.css framework.

The challenge aimed to explore and apply all the knowledge acquired in the HTML and CSS course provided by Alura.

The main goal was to faithfully reproduce the layout provided at the following link: Figma - 7daysOfCode.

In addition to replicating the proposed design, some additional implementations were made to enhance the user experience, such as integrating animations using Animate.css.

Hover effects were also added to provide a smoother and more enjoyable interaction for the user.

It is worth noting that the project was completed in just 4 days, demonstrating efficiency and skill in web development.

Project Presentation by Sections

The scope of this project involved the development of the main page of the site, commonly known as "Home." Below is a detailed list of implemented elements:

  • Header - Located at the top of the page, it houses the site's navigation bar (Navbar), facilitating user access to site registration or login, and providing shortcuts to various internal pages. In this part, I implemented several animations like "hover" to enhance user interaction.
  • Header - Presents a brief demonstration of the company, highlighting its main features. It was faithfully replicated according to the layout provided in Figma.
  • Metrics - This section posed a challenge as it involved the use of flexbox. Despite initial difficulties, I efficiently resolved them, seeking to maintain fidelity to the Figma design. I added a subtle "hover" effect on the numbers, providing a tonal variation when the cursor is placed over them for a differentiated experience.
  • Job Openings - In the job openings area, I applied more advanced knowledge of flexbox. I strictly followed the layout, with a differentiation in applying the "hover" effect on the titles of open positions, aiming for a more accessible user interaction.
  • Testimonials - This section was relatively simple to implement, requiring minimal display concerns. The completion time was optimized.
  • Form - The construction of the form was facilitated by the pre-established positioning, providing an uncomplicated implementation. Difficulties were minimized, resulting in an efficient conclusion.

The project was developed with attention to detail, aiming not only to replicate the design but also to enhance the user experience through elements such as "hover" effects and an intuitive arrangement of information.

I intend to continue the project, making it responsive and incorporating additional pages to complete it as a comprehensive portfolio website.

Reflection on Project Development: Achieving Autonomy in Programming and Pursuing Excellence

I successfully achieved autonomy in programming, demonstrating the ability to tackle challenges and seek solutions during the website development. This challenge allowed me to explore my potential by researching and promptly resolving existing problems.

The project was conducted independently, without seeking assistance from the Alura team, despite their offer of support. While my code may not be flawless, I invite the reader to share their opinion on how I could have improved the project or made it clearer, following Clean Code guidelines.

Feel free to provide your critical analysis and constructive opinions on the project. I am open to suggestions that can contribute to refining the code and overall improvement of the project.

About

A 7-day challenge by Alura to challenge my knowledge of HTML and CSS

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published