Sweep: Add Hobbies

src/app/app-routing.module.ts

@@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { NotFoundComponent } from './secondary-components/not-found/not-found.component';
 import { PublicationsComponent } from './secondary-components/publications/publications.component';
+import { HobbiesComponent } from './secondary-components/hobbies/hobbies.component';
 import { PortfolioComponent } from './portfolio/portfolio.component';
 import { SeparadorComponent } from './separador/separador.component';
 
@@ -10,6 +11,7 @@ const routes: Routes = [
   { path: 'home', component: SeparadorComponent, title: 'Lucas Brito - Personal Website' },
   { path: 'publications', component: PublicationsComponent, title: 'Lucas Brito - Publications' },
   { path: 'portfolio', component: PortfolioComponent, title: 'Lucas Brito - Portfolio' },
+  { path: 'hobbies', component: HobbiesComponent },
   { path: '404', component: NotFoundComponent, title: '404 - Not Found' },
   { path: '**', redirectTo: '404', pathMatch: 'full', title: '404 - Not Found' }
 ];

src/app/app.module.ts

@@ -26,10 +26,12 @@ import { PublicationsComponent } from './secondary-components/publications/publi
 import { TechnologiesComponent } from './secondary-components/technologies/technologies.component';
 import { RecommendationsComponent } from './secondary-components/recommendations/recommendations.component';
 import { NotFoundComponent } from './secondary-components/not-found/not-found.component';
+import { HobbiesComponent } from './secondary-components/hobbies/hobbies.component';
 import { NavbarComponent } from './secondary-components/navbar/navbar.component';
 import { PortfolioComponent } from './portfolio/portfolio.component';
 import { DisableWhenOfflineDirective } from './services/disable-when-offline.directive';
 import { CookieService } from 'ngx-cookie-service';
+import { StravaService } from './services/strava.service';
 import { OfflineModalComponent } from './secondary-components/offline-modal/offline-modal.component';
 
 export const httpLoaderFactory = (http: HttpClient) => new TranslateHttpLoader(http, './assets/i18n/', '.json');
@@ -79,6 +81,7 @@ const ngxLoaderUiConfig: NgxUiLoaderConfig = {
     NotFoundComponent,
     NavbarComponent,
     PortfolioComponent,
+    HobbiesComponent,
     CookieConsentComponent,
   ],
   imports: [
@@ -101,7 +104,7 @@ const ngxLoaderUiConfig: NgxUiLoaderConfig = {
     NgxSkeletonLoaderModule,
     AppRoutingModule,
   ],
-  providers: [CookieService],
+  providers: [CookieService, StravaService],
   bootstrap: [AppComponent]
 })
 export class AppModule {

src/app/secondary-components/hobbies/hobbies.component.css

@@ -0,0 +1,59 @@
+/* Global Styles */
+body {
+    font-family: 'Open Sans', sans-serif;
+}
+
+/* Section Styling */
+section {
+    margin: 2rem 0;
+    padding: 1rem;
+}
+
+/* Header Styling */
+h2 {
+    font-weight: 700;
+    margin-bottom: 1rem;
+    color: #333;
+}
+
+/* Card Styling */
+.card {
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    border-radius: 10px;
+    overflow: hidden;
+    margin-bottom: 2rem;
+}
+
+.card-body {
+    padding: 1.5rem;
+}
+
+/* Table Styling */
+table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+table, th, td {
+    border: 1px solid #ddd;
+}
+
+th, td {
+    text-align: left;
+    padding: 8px;
+}
+
+tr:nth-child(even) {
+    background-color: #f2f2f2;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    section {
+        padding: 0.5rem;
+    }
+
+    .card-body {
+        padding: 1rem;
+    }
+}

src/app/secondary-components/hobbies/hobbies.component.html

@@ -0,0 +1,46 @@
+<div class="container mt-4">
+    <section id="book-list">
+        <h2>Book List</h2>
+        <div class="row">
+            <div class="col-md-4" *ngFor="let book of bookList">
+                <div class="card mb-4">
+                    <div class="card-body">
+                        <h5 class="card-title">{{ book.title }}</h5>
+                        <p class="card-text">Author: {{ book.author }}</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section id="sports-data" class="mt-5">
+        <h2>Sports Data</h2>
+        <div class="row">
+            <div class="col-md-6">
+                <h3>Activity Summary</h3>
+                <iframe height='160' width='300' frameborder='0' allowtransparency='true' scrolling='no'
+                    src='https://www.strava.com/athletes/47005114/activity-summary/ee748cb9798d701b773b8c5f4c0736bcacf2eaeb'></iframe>
+            </div>
+            <div class="col-md-6">
+                <h3>Latest Rides</h3>
+                <iframe height='454' width='300' frameborder='0' allowtransparency='true' scrolling='no'
+                    src='https://www.strava.com/athletes/47005114/latest-rides/ee748cb9798d701b773b8c5f4c0736bcacf2eaeb'></iframe>
+            </div>
+
+        </div>
+    </section>
+
+    <section id="computer-setup" class="mt-5">
+        <h2>Computer Setup</h2>
+        <div class="row">
+            <div class="col-md-4" *ngFor="let item of computerSetup">
+                <div class="card mb-4">
+                    <div class="card-body">
+                        <h5 class="card-title">{{ item.item }}</h5>
+                        <p class="card-text">Model: {{ item.model }}</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+</div>

src/app/secondary-components/hobbies/hobbies.component.spec.ts

@@ -0,0 +1,57 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
+import { HobbiesComponent } from './hobbies.component';
+
+describe('HobbiesComponent', () => {
+  let component: HobbiesComponent;
+  let fixture: ComponentFixture<HobbiesComponent>;
+  let httpMock: HttpTestingController;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HobbiesComponent ],
+      imports: [ HttpClientTestingModule ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HobbiesComponent);
+    component = fixture.componentInstance;
+    httpMock = TestBed.inject(HttpTestingController);
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should fetch and display book list correctly', () => {
+    const expectedBooks = [
+      { title: 'The Pragmatic Programmer', author: 'Andrew Hunt and David Thomas' },
+      { title: 'Clean Code', author: 'Robert C. Martin' }
+    ];
+    component.fetchBookList();
+    expect(component.bookList).toEqual(expectedBooks);
+  });
+
+  it('should fetch and display sports data correctly', () => {
+    const expectedSportsData = { running: '100km', cycling: '200km' };
+    const req = httpMock.expectOne('https://api.strava.com/path/to/user/data');
+    req.flush(expectedSportsData);
+    expect(component.sportsData).toEqual(expectedSportsData);
+  });
+
+  it('should fetch and display computer setup correctly', () => {
+    const expectedSetup = [
+      { item: 'Laptop', model: 'MacBook Pro 16-inch' },
+      { item: 'Monitor', model: 'Dell Ultrasharp 27"' }
+    ];
+    component.fetchComputerSetup();
+    expect(component.computerSetup).toEqual(expectedSetup);
+  });
+
+  afterEach(() => {
+    httpMock.verify();
+  });
+});

src/app/secondary-components/hobbies/hobbies.component.ts

@@ -0,0 +1,45 @@
+import { Component, OnInit } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+
+@Component({
+  selector: 'app-hobbies',
+  templateUrl: './hobbies.component.html',
+  styleUrls: ['./hobbies.component.css']
+})
+export class HobbiesComponent implements OnInit {
+  bookList: any[] = [];
+  sportsData: any = {};
+  computerSetup: any[] = [];
+
+  constructor(private http: HttpClient) {}
+
+  ngOnInit(): void {
+    this.fetchBookList();
+    this.fetchSportsData();
+    this.fetchComputerSetup();
+  }
+
+  fetchBookList() {
+    // Simulate fetching booklist data
+    this.bookList = [
+      { title: 'The Pragmatic Programmer', author: 'Andrew Hunt and David Thomas' },
+      { title: 'Clean Code', author: 'Robert C. Martin' }
+    ];
+  }
+
+  fetchSportsData() {
+    // Simulate fetching sports data from Strava
+    this.http.get('https://api.strava.com/path/to/user/data').subscribe({
+      next: (data) => this.sportsData = data,
+      error: (error) => console.error('Failed to fetch sports data', error)
+    });
+  }
+
+  fetchComputerSetup() {
+    // Simulate fetching computer setup data
+    this.computerSetup = [
+      { item: 'Laptop', model: 'MacBook Pro 16-inch' },
+      { item: 'Monitor', model: 'Dell Ultrasharp 27"' }
+    ];
+  }
+}

src/app/secondary-components/navbar/navbar.component.ts

@@ -68,6 +68,12 @@ export class NavbarComponent implements OnInit {
         mobile: false,
         desktop: false
       },
+      {
+        name: firstValueFrom(this.translate.get('nav.hobbies')),
+        ref: ['/hobbies'],
+        mobile: true,
+        desktop: true
+      },
     ];
   }
 

src/app/services/strava.service.ts

@@ -0,0 +1,21 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class StravaService {
+  private annualGoalsUrl = 'https://api.strava.com/path/to/annual/goals';
+  private weeklyProgressUrl = 'https://api.strava.com/path/to/weekly/progress';
+
+  constructor(private http: HttpClient) {}
+
+  getAnnualGoals(): Observable<any> {
+    return this.http.get(this.annualGoalsUrl);
+  }
+
+  getWeeklyProgress(): Observable<any> {
+    return this.http.get(this.weeklyProgressUrl);
+  }
+}

src/assets/i18n/en.json

@@ -19,5 +19,14 @@
     "publi.blog-not-found": "No blog posts matched your search criteria.",
     "publi.sci-not-found": "No scientific publications matched your search criteria.",
     "publi.tip": "Tip: If you can't find a specific text, try adding \"?search=tag\" after /publication in the URL.",
-    "recommendations.title": "Recommendations"
+    "recommendations.title": "Recommendations",
+    "nav.hobbies": "Hobbies",
+    "hobbies.title": "Hobbies",
+    "hobbies.description": "A glimpse into the activities that fuel my creativity and keep me energized.",
+    "hobbies.booklist.title": "Booklist",
+    "hobbies.booklist.description": "A collection of books that have influenced my thinking and broadened my perspectives.",
+    "hobbies.sports.title": "Sports",
+    "hobbies.sports.description": "Tracking my annual sports goals and weekly progress with data from Strava.",
+    "hobbies.setup.title": "Setup",
+    "hobbies.setup.description": "The gadgets and gear that power my digital life and productivity."
 }

src/assets/i18n/pt.json

@@ -19,5 +19,14 @@
     "publi.blog-not-found": "Nenhuma publicação de blog correspondeu aos seus critérios de pesquisa.",
     "publi.sci-not-found": "Nenhuma publicação científica correspondeu aos seus critérios de pesquisa.",
     "publi.tip": "Dica: Se você não encontrar o que procura, tente buscar adicionando \"?search=palavra-chave\" depois de /publication na URL.",
-    "recommendations.title": "Recomendações"
+    "recommendations.title": "Recomendações",
+    "nav.hobbies": "Hobbies",
+    "hobbies.title": "Hobbies",
+    "hobbies.description": "Um vislumbre das atividades que alimentam minha criatividade e me mantêm energizado.",
+    "hobbies.booklist.title": "Lista de Livros",
+    "hobbies.booklist.description": "Uma coleção de livros que influenciaram meu pensamento e ampliaram minhas perspectivas.",
+    "hobbies.sports.title": "Esportes",
+    "hobbies.sports.description": "Acompanhando meus objetivos anuais de esportes e progresso semanal com dados do Strava.",
+    "hobbies.setup.title": "Configuração",
+    "hobbies.setup.description": "Os gadgets e equipamentos que potencializam minha vida digital e produtividade."
 }