implementação de algo

README.md

@@ -1,27 +1,74 @@
-# AngularBlog
+# 📌 Dev's Blog
 
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 14.1.2.
+## 📖 Sobre o projeto
+Este projeto foi desenvolvido com Angular 14.1.3 como parte de um desafio da DIO para o Decola Tech 2025, onde realizei um fork do repositório original do professor, como foi recomendado, e implementei diversas melhorias e novas funcionalidades.
 
-## Development server
+O Blog Dev tem como objetivo ser um espaço onde desenvolvedores podem acompanhar tendências de mercado, oportunidades de trabalho e novidades do mundo da tecnologia!
 
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
+## 🚀 Como testar
 
-## Code scaffolding
+### Pré-requisitos
+- Node.js instalado (versão recomendada: 16.x ou superior)
+- Angular CLI instalado globalmente (`npm install -g @angular/cli`)
 
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+### Passos
+1. Clone o repositório:
+   ```sh
+   git clone https://github.com/AlissonLimaG/angular-blog.git
+   ```
+2. Acesse o diretório do projeto:
+   ```sh
+   cd nome-do-projeto
+   ```
+3. Instale as dependências:
+   ```sh
+   npm install
+   ```
+4. Inicie o servidor de desenvolvimento:
+   ```sh
+   ng serve
+   ```
+5. Acesse o projeto no navegador:
+   ```
+   http://localhost:4200
+   ```
 
-## Build
+## 🔥 Alterações e incrementos
+- **Adicionado um formulário** para cadastro de novos artigos e notícias.
+- **Modo claro e escuro** implementado para melhor experiência do usuário.
+- **Melhorias na responsividade**, garantindo que o blog funcione bem em diferentes dispositivos.
+- **Pequenas animações** para tornar a navegação mais fluida e agradável.
 
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
+## 🖼️ Capturas de tela
+- ### Home Desktop
+<img src='./assets/homeLight.png' width='500px'>
+<img src='./assets/homeDark.png' width='500px'>
 
-## Running unit tests
+- ### Home Mobile
+<img src='./assets/homeMobileLight.png' width='300px'>
+<img src='./assets/homeMobileDark.png' width='300px'>
 
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+- ### Article Desktop
+<img src='./assets/articleLight.png' width='500px'>
+<img src='./assets/articleDark.png' width='500px'>
 
-## Running end-to-end tests
+- ### Article Mobile
+<img src='./assets/articleMobileLight.png' width='300px'>
+<img src='./assets/articleMobileDark.png' width='300px'>
 
-Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
+- ### Form Desktop
+<img src='./assets/addArticle.png' width='500px'>
 
-## Further help
+- ### New Article Desktop
+<img src='./assets/articleAdded.png' width='500px'>
+
+- ### Form Mobile
+<img src='./assets/formMobileLight.png' width='300px'>
+<img src='./assets/formMobileDark.png' width='300px'>
+
+
+## ⏭️ Próximos passos
+- Implementar **validação no formulário** de artigos para garantir dados mais estruturados e consistentes.
+- Melhorar ainda mais a **experiência do usuário** com ajustes visuais e usabilidade.
+- Explorar **novas funcionalidades**, como categorias e filtros de artigos.
 
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

src/app/app.component.html

@@ -1,4 +1,4 @@
 <header>
-  <app-menu-bar></app-menu-bar>
+  <app-menu-bar [ngStyle]="{'width':'100%'}"></app-menu-bar>
 </header>
-<router-outlet></router-outlet>
+<router-outlet></router-outlet>

src/app/app.module.ts

@@ -9,6 +9,9 @@ import { BigCardComponent } from './components/big-card/big-card.component';
 import { SmallCardComponent } from './components/small-card/small-card.component';
 import { HomeComponent } from './pages/home/home.component';
 import { ContentComponent } from './pages/content/content.component';
+import { ThemeButtonComponent } from './components/theme-button/theme-button.component';
+import { ThemeService } from './service/theme.service';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 
 @NgModule({
@@ -19,13 +22,16 @@ import { ContentComponent } from './pages/content/content.component';
     BigCardComponent,
     SmallCardComponent,
     HomeComponent,
-    ContentComponent
+    ContentComponent,
+    ThemeButtonComponent,
   ],
   imports: [
     BrowserModule,
-    AppRoutingModule
+    AppRoutingModule,
+    FormsModule,
+    ReactiveFormsModule
   ],
-  providers: [],
+  providers: [ThemeService],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/components/big-card/big-card.component.css

@@ -1,24 +1,35 @@
 .container__big-card{
-
-  margin-left: 20px;
-  margin-right: 20px;
-  margin-bottom: 40px;
+  cursor: pointer;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: flex-start;
+  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
+  flex: 1;
 
-  @media(min-width: 700px) {
-    width: 200px;
+  @media(min-width: 800px) {
+    width: 100%;
     margin-bottom: 0;
   }
+
   @media(min-width: 1000px) {
-    width: 400px;
+    max-width: 700px;
+  }
+
+  @media(max-width: 900px) {
+    margin-bottom: 1rem;
   }
 }
 
+.container__big-card:hover{
+  transform: scale(1.005);
+}
+
+.card_content{
+  padding: 1rem;
+}
+
 .big-card__title > h1  {
-  margin-top: 15px;
   font-size: 20px;
 }
 
@@ -27,17 +38,10 @@
 }
 
 .big-card__description > p > a {
-  color: grey;
   font-family: Georgia, 'Times New Roman', Times, serif;
 }
 
 .big-card__photo > img{
   width: 100%;
   height: auto;
-  @media(min-width: 700px) {
-    min-width: 200px;
-  }
-  @media(min-width: 1000px) {
-    min-width: 400px;
-  }
 }

src/app/components/big-card/big-card.component.html

@@ -1,24 +1,19 @@
-<div class="container__big-card">
+<div class="container__big-card" [routerLink]="['content', Id]">
 
   <div class="big-card__photo">
-    <img
-      src="{{ photoCover }}"
-      alt=""
-      height="200px"
-      srcset=""
-    >
+    <img src="{{ photoCover }}" alt="" height="200px" srcset="">
   </div>
 
-  <div class="big-card__title">
-    <h1><a [routerLink]="['content', Id]">{{ cardTitle }}</a></h1>
-  </div>
+  <div class="card_content">
+    <div class="big-card__title">
+      <h1><a [routerLink]="['content', Id]">{{ cardTitle }}</a></h1>
+    </div>
 
-  <div class="big-card__description">
-    <p>
-      <a [routerLink]="['content', Id]">
-          {{ cardDescription }}
-      </a>
-    </p>
+    <div class="big-card__description">
+      <p>
+          {{ cardDescription.slice(0,250) + "..." }}
+      </p>
+    </div>
   </div>
 
-</div>
+</div>

src/app/components/menu-bar/menu-bar.component.css

@@ -1,4 +1,14 @@
-
+.logo{
+  cursor: pointer;
+}
+.container__menu-bar{
+  padding: 1rem 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  width: 100%;
+  border: 3px solid grey;
+}
 
 .container__menu-bar > ul{
   display: flex;

src/app/components/menu-bar/menu-bar.component.html

@@ -1,9 +1,11 @@
 <div class="container__menu-bar">
+  <h1 class="logo" [routerLink]="['']">DEV'S BLOG</h1>
   <ul>
-    <li><a href="https://www.linkedin.com/in/flora-martins-299631a3/">Linkedin</a></li>
+    <li><a href="https://www.linkedin.com/in/alisson-gp-lima/" target="_blank">Linkedin</a></li>
     <li><span>•</span></li>
-    <li><a href="https://github.com/codefloracode">Github</a></li>
+    <li><a href="https://github.com/AlissonLimaG" target="_blank">Github</a></li>
     <li><span>•</span></li>
-    <li><a href="https://www.instagram.com/hiimf/">Instagram</a></li>
+    <li><a href="https://www.instagram.com/alisson_g_lima/" target="_blank">Instagram</a></li>
   </ul>
-</div>
+    <app-theme-button class="theme__button"></app-theme-button>
+</div>

src/app/components/menu-bar/menu-bar.component.ts

@@ -3,7 +3,7 @@ import { Component, OnInit } from '@angular/core';
 @Component({
   selector: 'app-menu-bar',
   templateUrl: './menu-bar.component.html',
-  styleUrls: ['./menu-bar.component.css']
+  styleUrls: ['./menu-bar.component.css', './menu-bar.responsive.component.css']
 })
 export class MenuBarComponent implements OnInit {
 

src/app/components/menu-bar/menu-bar.responsive.component.css

@@ -0,0 +1,14 @@
+@media screen and (max-width: 700px) {
+    .logo{
+        display: none;
+    }
+}
+
+@media screen and (max-width: 600px) {
+    .theme__button{
+        position:fixed;
+        top: 60%;
+        right: 10px;
+        background-color: transparent;
+    }
+}

src/app/components/menu-title/menu-title.component.css

@@ -5,7 +5,7 @@
 .container__menu-title > h1{
   margin-top: 15px;
   margin-bottom: 15px;
-  font-size: 135px;
+  font-size: 100px;
   font-family: 'Open Sans', sans-serif;
   display: flex;
   justify-content: center;

src/app/components/menu-title/menu-title.component.html

@@ -1,5 +1,5 @@
 <div class="container__menu-title">
   <hr/>
-  <h1>MARVEL BLOG</h1>
+  <h1>DEV'S BLOG</h1>
   <hr/>
 </div>

src/app/components/menu-title/menu-title.responsive.component.css

@@ -1,5 +1,6 @@
-@media screen and (max-width:600px) {
+@media screen and (max-width:700px) {
   .container__menu-title > h1{
     font-size: 30px;
   }
+
 }

src/app/components/small-card/small-card.component.css

@@ -1,34 +1,51 @@
 .container__small-card{
+  cursor: pointer;
   margin-bottom: 15px;
-
+  padding: 5px;
+  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
   @media(min-width: 1000px) {
-    width: 700px;
+    max-width: 700px;
   }
 }
+.container__small-card:hover{
+  transform: scale(1.02);
+}
 
 .container__small-card-content{
   display: flex;
   flex-direction: row;
   padding: 20px;
   box-sizing: border-box;
+
+  @media(max-width: 1200px) {
+    flex-direction: column;
+    align-items: center;
+  }
+
 }
 
 .small-card__photo > img {
   width: 200px;
   min-width: 200px;
   margin-right: 20px;
+
+  @media screen and (max-width: 1000px) {
+    width: 100%;
+  }
+
 }
 
-.small-card__title {
+.small-card__title{
   display: flex;
-  justify-content: center;
-  align-items: center;
+  flex-direction: column;
+  gap: 10px;
 }
 
 .small-card__title > h1 {
   font-size: 16px;
 }
 
-.container__small-card__separator{
-  margin-top: 10px;
+.small-card__title > p{
+  font-size: 16px;
+  font-family: Georgia, 'Times New Roman', Times, serif;
 }

src/app/components/small-card/small-card.component.html

@@ -1,4 +1,4 @@
-<div class="container__small-card">
+<div class="container__small-card" [routerLink]="['content', Id]">
 
   <div class="container__small-card-content">
     <div class="small-card__photo">
@@ -10,14 +10,10 @@
     </div>
 
     <div class="small-card__title">
-      <h1><a [routerLink]="['content', Id]" >{{ cardTitle }}</a></h1>
+      <h1>{{ cardTitle }}</h1>
+      <p>{{description.slice(0,170) + "..."}}</p>
     </div>
   </div>
-
-  <div class="container__small-card__separator">
-    <hr>
-  </div>
-
 </div>