translating page

Chudroy · Aug 20, 2022 · 4c74076 · 4c74076
1 parent ca0a09b
commit 4c74076
Show file tree

Hide file tree

Showing 11 changed files with 287 additions and 85 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -21,6 +21,8 @@
     "@angular/platform-browser": "^14.1.0",
     "@angular/platform-browser-dynamic": "^14.1.0",
     "@angular/router": "^14.1.0",
+    "@ngx-translate/core": "^14.0.0",
+    "@ngx-translate/http-loader": "^7.0.0",
     "angular-in-memory-web-api": "^0.14.0",
     "rxjs": "~7.5.0",
     "tslib": "^2.3.0",

diff --git a/frontend/src/app/about-me/about-me.component.html b/frontend/src/app/about-me/about-me.component.html
@@ -12,16 +12,11 @@
       src="../../assets/puppy-development.jpg"
       alt=""
     />
-    <mat-card-title>About</mat-card-title>
-    <mat-card-subtitle>You can call me Nick</mat-card-subtitle>
+    <mat-card-title>{{ "ABOUT.TITLE" | translate }}</mat-card-title>
+    <mat-card-subtitle>{{ "ABOUT.SUBTITLE" | translate }}</mat-card-subtitle>
     <mat-card-content>
       <p>
-        Full stack developer, videogame developer, English teacher, artist,
-        generally curious about everything. Born in London, UK, I've lived in
-        Bilbao since I was 12. I studied Fine Arts at University, and and fell
-        in love with creative coding. Since then, I've gone to study front end,
-        back end, video game development and machine learning, while working as
-        an English teacher. At this point, my favourite art form is code.
+        {{ "ABOUT.DESCRIPTION" | translate }}
       </p>
     </mat-card-content>
   </mat-card>

diff --git a/frontend/src/app/about-me/about-me.component.ts b/frontend/src/app/about-me/about-me.component.ts
@@ -1,5 +1,4 @@
 import { Component, EventEmitter, OnInit, Output } from '@angular/core';
-
 @Component({
   selector: 'app-about-me',
   templateUrl: './about-me.component.html',
@@ -11,9 +10,4 @@ export class AboutMeComponent implements OnInit {
   constructor() {}
 
   ngOnInit(): void {}
-
-  testFunction() {
-    console.log('emitting');
-    this.testEvent.emit(null);
-  }
 }
diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts
@@ -2,6 +2,7 @@ import { OverlayContainer } from '@angular/cdk/overlay';
 import { Component, HostBinding, OnInit } from '@angular/core';
 import { DarkModeService } from './shared/services/dark-mode.service';
 import { Router } from '@angular/router';
+import { TranslateService } from '@ngx-translate/core';
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
@@ -13,8 +14,12 @@ export class AppComponent implements OnInit {
   constructor(
     private darkModeService: DarkModeService,
     private overlay: OverlayContainer,
-    private router: Router
-  ) {}
+    private router: Router,
+    private translateService: TranslateService
+  ) {
+    translateService.addLangs(['en', 'esp']);
+    translateService.use('en');
+  }
 
   ngOnInit(): void {
     this.router.navigate(['']);

diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
@@ -1,11 +1,16 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { HttpClientModule } from '@angular/common/http';
-
 import { AppRoutingModule } from './app-routing.module';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
+// Translation
+
+import { HttpClient } from '@angular/common/http';
+import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+
 //CRUD SIMULATION
 import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api';
 import { InMemoryDataService } from './shared/services/in-memory-data.service';
@@ -43,6 +48,11 @@ import { MatMenuModule } from '@angular/material/menu';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 
+// AoT requires an exported function for factories
+export function HttpLoaderFactory(http: HttpClient) {
+  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
+}
+
 @NgModule({
   declarations: [
     AppComponent,
@@ -57,6 +67,14 @@ import { MatSnackBarModule } from '@angular/material/snack-bar';
   ],
   imports: [
     BrowserModule,
+    TranslateModule.forRoot({
+      defaultLanguage: 'en',
+      loader: {
+        provide: TranslateLoader,
+        useFactory: HttpLoaderFactory,
+        deps: [HttpClient],
+      },
+    }),
     HttpClientModule,
     // HttpClientInMemoryWebApiModule.forRoot(InMemoryDataService),
     AppRoutingModule,

diff --git a/frontend/src/app/navigation/navigation.component.html b/frontend/src/app/navigation/navigation.component.html
@@ -18,15 +18,18 @@ <h1 class="example-app-name">Nicolás Garitagoitia</h1>
         class="menu-toggle-div"
         (click)="$event.stopPropagation()"
       >
-        <i class="fa-solid fa-moon fa-lg menu-icon"></i>Dark Mode
+        <i class="fa-solid fa-moon fa-lg menu-icon"></i
+        >{{ "NAVIGATION.DARK_MODE" | translate }}
         <mat-slide-toggle (change)="toggleDarkMode($event)" class="menu-toggle">
         </mat-slide-toggle>
       </div>
 
-      <button mat-menu-item [matMenuTriggerFor]="language">Language</button>
+      <button mat-menu-item [matMenuTriggerFor]="language">
+        {{ "NAVIGATION.LANGUAGE_BUTTON" | translate }}
+      </button>
       <mat-menu #language="matMenu">
-        <button mat-menu-item>ENG</button>
-        <button mat-menu-item>ESP</button>
+        <button mat-menu-item (click)="changeLanguage('en')">ENG</button>
+        <button mat-menu-item (click)="changeLanguage('esp')">ESP</button>
       </mat-menu>
     </mat-menu>
 
@@ -43,31 +46,31 @@ <h1 class="example-app-name">Nicolás Garitagoitia</h1>
         aria-label="Example icon-button with heart icon"
         (click)="scroll('app-about-me')"
       >
-        About
+        {{ "NAVIGATION.ABOUT_BUTTON" | translate }}
       </button>
       <button
         mat-button
         class="example-icon"
         aria-label="Example icon-button with share icon"
         (click)="scroll('work')"
       >
-        Work
+        {{ "NAVIGATION.WORK_BUTTON" | translate }}
       </button>
       <button
         mat-button
         class="example-icon"
         aria-label="Example icon-button with share icon"
         (click)="scroll('contact')"
       >
-        Contact
+        {{ "NAVIGATION.CONTACT_BUTTON" | translate }}
       </button>
       <button
         mat-flat-button
         class="example-icon"
         aria-label="Example icon-button with share icon"
         color="accent"
       >
-        Curriculum
+        {{ "NAVIGATION.CURRICULUM_BUTTON" | translate }}
       </button>
     </div>
   </mat-toolbar>

diff --git a/frontend/src/app/navigation/navigation.component.ts b/frontend/src/app/navigation/navigation.component.ts
@@ -5,6 +5,8 @@ import { Location } from '@angular/common';
 import { DarkModeService } from '../shared/services/dark-mode.service';
 import { Router } from '@angular/router';
 import { ActivatedRoute } from '@angular/router';
+import { TranslateService } from '@ngx-translate/core';
+
 @Component({
   selector: 'app-navigation',
   templateUrl: './navigation.component.html',
@@ -33,7 +35,8 @@ export class NavigationComponent implements OnDestroy {
     private location: Location,
     private darkModeService: DarkModeService,
     private router: Router,
-    private activatedRoute: ActivatedRoute
+    private activatedRoute: ActivatedRoute,
+    private translateService: TranslateService
   ) {
     this.mobileQuery = media.matchMedia('(max-width: 600px)');
     this._mobileQueryListener = () => changeDetectorRef.detectChanges();
@@ -60,4 +63,8 @@ export class NavigationComponent implements OnDestroy {
   toggleDarkMode($event: any) {
     this.darkModeService.toggleDarkMode();
   }
+
+  changeLanguage(language: string) {
+    this.translateService.use(language);
+  }
 }
diff --git a/frontend/src/app/work/work.component.html b/frontend/src/app/work/work.component.html
@@ -1,28 +1,16 @@
 <div id="work">
   <div id="work-description">
-    <h2>Work</h2>
+    <h2>{{ "WORK.TITLE" | translate }}</h2>
+    <p>{{ "WORK.DESCRIPTION.P1" | translate }}</p>
     <p>
-      Here's a showcase of some projects I'm proud of. Since first becoming
-      interested in coding in 2020, I've explored a lot of different fields,
-      trying to find what I have an affinity for and what I'm motivated by (and
-      what I'm not! 😀). During this time, I've discovered design patterns and
-      the SOLID principles, which I'm very interested in, and I've also learned
-      a lot about structuring the code of a project.
-    </p>
-    <p>
-      At the same time, I've dived into data structures and algorithms,
-      balancing the study of computer science fundamentals with project based
-      learning. Currently, I'm challenging myself to learn new concepts using
-      just documentation, without courses, to try and maximize learning
-      efficiency, and to become independent of tutorials and courses as much as
-      possible (i.e: escaping tutorial hell).
+      {{ "WORK.DESCRIPTION.P2" | translate }}
     </p>
   </div>
 
   <div id="projects">
-    <h2 id="projects-title">Highlighted Projects</h2>
+    <h2 id="projects-title">{{ "HIGHLIGHTED.TITLE" | translate }}</h2>
     <mat-tab-group mat-align-tabs="center">
-      <mat-tab label="Web Development">
+      <mat-tab [label]="'HIGHLIGHTED.WEB_DEV.TITLE' | translate">
         <mat-card class="work-card">
           <div mat-card-image id="web-dev-bg" class="img-bg">
             <img
@@ -32,17 +20,12 @@ <h2 id="projects-title">Highlighted Projects</h2>
             />
           </div>
           <mat-card-title>Bilbao Barrios</mat-card-title>
-          <mat-card-subtitle
-            >Dedicated to the neighbourhoods of central
-            Bilbao</mat-card-subtitle
-          >
+          <mat-card-subtitle>{{
+            "HIGHLIGHTED.WEB_DEV.SUBTITLE" | translate
+          }}</mat-card-subtitle>
           <mat-card-content>
             <p>
-              A forum aimed towards connecting the citizens of where I currently
-              live: Bilbao, Basque Country. A user can create a post linked to a
-              specific neighbourhood, and filter posts by neighbourhood or the
-              encompassing district. This website contains all features for a
-              fully functional, secure website.
+              {{ "HIGHLIGHTED.WEB_DEV.DESCRIPTION" | translate }}
             </p>
           </mat-card-content>
           <mat-divider inset></mat-divider>
@@ -57,7 +40,8 @@ <h2 id="projects-title">Highlighted Projects</h2>
               href="https://bilbao-barrios.herokuapp.com/"
               mat-button
               target="_blank"
-              >LIVE WEBSITE</a
+            >
+              {{ "HIGHLIGHTED.WEB_DEV.WEBSITE_BUTTON" | translate }}</a
             >
           </mat-card-actions>
           <mat-chip-list
@@ -72,7 +56,7 @@ <h2 id="projects-title">Highlighted Projects</h2>
           </mat-chip-list>
         </mat-card>
       </mat-tab>
-      <mat-tab label="Game Development">
+      <mat-tab [label]="'HIGHLIGHTED.GAME_DEV.TITLE' | translate">
         <mat-card class="work-card">
           <div mat-card-image id="game-dev-bg" class="img-bg">
             <img
@@ -82,14 +66,12 @@ <h2 id="projects-title">Highlighted Projects</h2>
             />
           </div>
           <mat-card-title>Get Inside</mat-card-title>
-          <mat-card-subtitle>2D Horror Shooter</mat-card-subtitle>
+          <mat-card-subtitle>{{
+            "HIGHLIGHTED.GAME_DEV.SUBTITLE" | translate
+          }}</mat-card-subtitle>
           <mat-card-content>
             <p>
-              Get Inside was my first indie video-game. Everything in this game
-              was made by me, except for the music and concept art. The
-              objective is to make it to your home, traversing isolated villages
-              in a heavily forested area, while being attacked by paranormal
-              entities.
+              {{ "HIGHLIGHTED.GAME_DEV.DESCRIPTION" | translate }}
             </p>
           </mat-card-content>
           <mat-divider inset></mat-divider>
@@ -104,7 +86,8 @@ <h2 id="projects-title">Highlighted Projects</h2>
               href="https://play.unity.com/mg/other/get-inside-finished"
               target="_blank"
               mat-button
-              >PLAY</a
+            >
+              {{ "HIGHLIGHTED.GAME_DEV.PLAY_BUTTON" | translate }}</a
             >
           </mat-card-actions>
           <mat-chip-list
@@ -124,14 +107,15 @@ <h2 id="projects-title">Highlighted Projects</h2>
             />
           </div>
           <mat-card-title>Particle Attraction</mat-card-title>
-          <mat-card-subtitle>Particle Simulations</mat-card-subtitle>
+          <mat-card-subtitle
+            >{{ "HIGHLIGHTED.CREATIVE_CODING.SUBTITLE" | translate }}
+          </mat-card-subtitle>
           <mat-card-content>
-            <p>
-              Procedurally Generated animation using the
-              <a href="https://p5js.org/"> P5.js </a>
-              library. Semi-translucent particles are attracted to gravitational
-              focal points, producing surprisingly complex symmetrical imagery.
-            </p>
+            <p
+              [innerHTML]="
+                'HIGHLIGHTED.CREATIVE_CODING.DESCRIPTION' | translate
+              "
+            ></p>
           </mat-card-content>
           <mat-divider inset></mat-divider>
           <mat-card-actions>
@@ -160,7 +144,7 @@ <h2 id="projects-title">Highlighted Projects</h2>
           </mat-chip-list>
         </mat-card>
       </mat-tab>
-      <mat-tab label="Art">
+      <mat-tab [label]="'HIGHLIGHTED.ART.TITLE' | translate">
         <mat-card class="work-card">
           <div mat-card-image id="art-bg" class="img-bg">
             <img
@@ -170,30 +154,20 @@ <h2 id="projects-title">Highlighted Projects</h2>
             />
           </div>
           <mat-card-title>Strange Attractors</mat-card-title>
-          <mat-card-subtitle>3D Mathematical models</mat-card-subtitle>
+          <mat-card-subtitle>{{
+            "HIGHLIGHTED.ART.SUBTITLE" | translate
+          }}</mat-card-subtitle>
           <mat-card-content>
-            <p>
-              A Collection of ~17
-              <a href="https://en.wikipedia.org/wiki/Attractor"
-                >Strange Attractors</a
-              >
-              made using Animation Nodes in Blender, subsequently used in the
-              art for the boardgame
-              <a
-                href="https://boardgamegeek.com/boardgame/344575/outside-beyond-scp-facilities"
-                >Outside: Beyond the SCP facilities (2022)</a
-              >
-              and for video animations of my own personal creation, also.
-            </p>
+            <p [innerHTML]="'HIGHLIGHTED.ART.DESCRIPTION' | translate"></p>
           </mat-card-content>
           <mat-divider inset></mat-divider>
           <mat-card-actions>
             <a
               mat-button
               href="https://drive.google.com/drive/folders/19JMqf1qW8T1ymEqFjQ7wXLm2bG3m6BmV?usp=sharing"
               target="_blank"
-              >BLENDER FILES</a
-            >
+              >{{ "HIGHLIGHTED.ART.BLENDER" | translate }}
+            </a>
             <a
               href="https://www.instagram.com/p/CNTDF3JnHEN/?utm_source=ig_web_copy_link"
               target="_blank"