d0peCode · d0peCode · Oct 23, 2019 · Oct 23, 2019 · Oct 23, 2019 · Oct 23, 2019
diff --git a/public/package-lock.json b/public/package-lock.json
diff --git a/public/package.json b/public/package.json
@@ -7,7 +7,8 @@
     "build": "ng build",
     "test": "ng test",
     "lint": "ng lint",
-    "e2e": "ng e2e"
+    "e2e": "ng e2e",
+    "int:extract": "ng xi18n --output-path ./locale"
   },
   "private": true,
   "dependencies": {
@@ -20,6 +21,8 @@
     "@angular/platform-browser-dynamic": "~7.2.0",
     "@angular/router": "~7.2.0",
     "@ngx-prism/core": "^2.0.1",
+    "@ngx-translate/core": "^11.0.1",
+    "@ngx-translate/http-loader": "^4.0.0",
     "@types/prismjs": "^1.9.0",
     "core-js": "^2.5.4",
     "lodash-es": "^4.17.15",

diff --git a/public/src/app/app.module.ts b/public/src/app/app.module.ts
@@ -1,9 +1,11 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { HttpClientModule } from '@angular/common/http';
+import { HttpClientModule, HttpClient } from '@angular/common/http';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 import { AppRoutingModule } from './app-routing.module';
 import { PrismModule } from '@ngx-prism/core';
+import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
 import { AppComponent } from './components/app.component';
 
 // blog
@@ -27,6 +29,11 @@ import { ModesComponent } from './components/landing/top/tools/modes/modes.compo
 // services
 import { StoreService } from './services/store.service';
 
+// AoT requires an exported function for factories
+export function HttpLoaderFactory(http: HttpClient) {
+  return new TranslateHttpLoader(http);
+}
+
 @NgModule({
     declarations: [
         AppComponent,
@@ -52,7 +59,14 @@ import { StoreService } from './services/store.service';
         AppRoutingModule,
         FormsModule,
         HttpClientModule,
-        PrismModule
+        PrismModule,
+        TranslateModule.forRoot({
+          loader: {
+            provide: TranslateLoader,
+            useFactory: HttpLoaderFactory,
+            deps: [HttpClient]
+          }
+        })
     ],
     providers: [StoreService],
     bootstrap: [AppComponent]

diff --git a/public/src/app/components/app.component.ts b/public/src/app/components/app.component.ts
@@ -1,10 +1,15 @@
 import { Component } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
 
 @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.scss'],
+    providers: [TranslateService]
 })
 export class AppComponent  {
-    title = 'tymdev-new';
+  constructor(private translate: TranslateService) {
+    translate.setDefaultLang('en');
+    translate.use('pl');
+  }
 }
diff --git a/public/src/app/components/landing/contact/contact.component.html b/public/src/app/components/landing/contact/contact.component.html
@@ -1,8 +1,8 @@
 <section class="contact" id="contact">
     <div class="contact__col">
         <header class="contact__header">
-            <h2 class="heading heading--primary">Kontakt / Wycena</h2>
-            <p class="contact__header-paragraph">Zapraszam do kontaktu jeśli chcesz podjąć współpracę lub wycenić swój projekt.</p>
+            <h2 class="heading heading--primary">{{ 'contact-header' | translate }}</h2>
+            <p class="contact__header-paragraph">{{ 'contact-text' | translate }}</p>
             <div class="contact__links">
                 <a href="mailto:kontakt@tymdev.pl" target="_top">kontakt@tymdev.pl</a>
                 <a href="tel:123-456-7890">+48 795 691 258</a>
@@ -13,19 +13,19 @@ <h2 class="heading heading--primary">Kontakt / Wycena</h2>
     <div class="contact__col">
         <form class="contact__form" (ngSubmit)="sendMessage()">
             <div class="contact__input-box">
-                <label for="email" class="contact__input-label">adres e-mail</label>
-                <input type="email" id="email" class="contact__input-input" placeholder="przyklad@gmail.com" [(ngModel)]="email" name="email" required="">
+                <label for="email" class="contact__input-label">{{ 'email' | translate }}</label>
+                <input type="email" id="email" class="contact__input-input" placeholder="{{ 'email-placeholder' | translate }}" [(ngModel)]="email" name="email" required>
             </div>
             <div class="contact__input-box">
-                <label for="phone" class="contact__input-label">numer telefonu (opcjonalne)</label>
+                <label for="phone" class="contact__input-label">{{ 'phone' | translate }}</label>
                 <input type="tel" id="phone" class="contact__input-input" placeholder="+48 795 691 258" [(ngModel)]="phone" name="phone">
             </div>
             <div class="contact__input-box">
-                <label for="message" class="contact__input-label">wiadomość</label>
-                <textarea id="message" class="contact__input-textarea" placeholder="Twoja wiadomość..." [(ngModel)]="message" name="message"></textarea>
+                <label for="message" class="contact__input-label">{{ 'message' | translate }}</label>
+                <textarea id="message" class="contact__input-textarea" placeholder="{{ 'message-placeholder' | translate }}" [(ngModel)]="message" name="message"></textarea>
             </div>
             <button type="submit" class="button button--primary">
-                <span class="button-text">Wyślij</span>
+                <span class="button-text">{{ 'send' | translate }}</span>
                 <span class="button-icon button-icon--right">&#9660;</span>
             </button>
         </form>

diff --git a/public/src/app/components/landing/footer/footer.component.html b/public/src/app/components/landing/footer/footer.component.html
@@ -6,23 +6,23 @@
                 <span class="footer__logo">TymDev</span>
             </div>
             <div>
-                <span class="footer__text">2019 TymDev sp. z o. o. ®</span>
+                <span class="footer__text">2019 TymDev {{ 'company' | translate }} ®</span>
                 <span class="footer__text">all rights reserved ©</span>
             </div>
         </div>
         <div class="footer__col">
             <ul class="footer__list">
                 <li>
-                    <span (click)="scrollToElement('skills')">umiejętności</span>
+                    <span (click)="scrollToElement('skills')">{{ 'skillsInNav' | translate }}</span>
                 </li>
                 <li>
-                    <span (click)="scrollToElement('portfolio')">portfolio</span>
+                    <span (click)="scrollToElement('portfolio')">Portfolio</span>
                 </li>
                 <li>
-                    <span (click)="scrollToElement('contact')">kontakt</span>
+                    <span (click)="scrollToElement('contact')">{{ 'contact' | translate }}</span>
                 </li>
                 <li>
-                    <a href="http://tymdev.pl/admin">dla klientów</a>
+                    <a href="http://tymdev.pl/admin">{{ 'clientsInNav' | translate }}</a>
                 </li>
             </ul>
         </div>

diff --git a/public/src/app/components/landing/portfolio/portfolio.component.html b/public/src/app/components/landing/portfolio/portfolio.component.html
@@ -2,7 +2,7 @@
     <header class="portfolio__header">
         <div class="portfolio__header-container">
             <h2 class="heading heading--primary">Portfolio</h2>
-            <p class="portfolio__header-paragraph">Poniżej przedstawione są moje wybrane projekty. Niektóre projekty posiadają link do kodu na GitHubie jednakże większość z nich są projektami komercyjnymi, wykonanymi dla klientów dlatego nie mogę udostępnić ich kodu źródłowego. Przeciągnij aby przewinąć.</p>
+            <p class="portfolio__header-paragraph">{{ 'skills-intro' | translate }}</p>
         </div>
     </header>
     <section class="nav-light">
@@ -12,12 +12,12 @@ <h2 class="heading heading--primary">Portfolio</h2>
                 <div class="portfolio__content">
                     <h3 [attr.data-index]="'0' + i" class="heading heading--secondary">{{ item.name }}</h3>
                     <time class="portfolio__date"> {{ item.date }} </time>
-                    <p class="portfolio__content-paragraph">{{ item.description }}</p>
+                    <p class="portfolio__content-paragraph">{{ item.description | translate }}</p>
                     <div>
                         <img *ngFor="let n of item.icons" [src]="n" alt="" class="portfolio__content-icon">
                     </div>
                     <a *ngIf="item.live" [href]="item.link.live" target="_blank" class="button button--primary portfolio__button">
-                        <span class="button-text">Zobacz</span>
+                        <span class="button-text"> {{ 'see' | translate }}</span>
                         <span class="button-icon button-icon--right">&#9660;</span>
                     </a>
                     <a *ngIf="item.git" [href]="item.link.git" target="_blank" class="button button--primary portfolio__button">

diff --git a/public/src/app/components/landing/portfolio/portfolio.component.ts b/public/src/app/components/landing/portfolio/portfolio.component.ts
@@ -14,19 +14,19 @@ export class PortfolioComponent implements OnInit {
             name: 'TwoHouse',
             date: '15.10.2018',
             icons: ['https://res.cloudinary.com/drngyvbmc/image/upload/v1565875158/php.png', 'https://res.cloudinary.com/drngyvbmc/image/upload/v1565875158/mysql.png', 'https://res.cloudinary.com/drngyvbmc/image/upload/v1565875158/pdo.png', 'https://res.cloudinary.com/drngyvbmc/image/upload/v1564679586/vue.png'],
-            description: 'Responsywna aplikacja internetowa biura nieruchomości z Wilanowa. Została stworzona w frameworku Vue2JS. Backend w formie REST API napisany jest w PHP, kod jest zorientowany obiektowo, do połączenia z bazą danych MySQL użyłem biblioteki PDO. Backend posiada takie opcje jak dodawanie, edycja, usuwanie nieruchomości, zarządzanie typami, cechami oraz lokalizacjami nieruchomości. Aplikacja posiada autorski CMS, który korzysta z jej endpointów.',
+            description: 'two-house-text',
             bg: '../../../../assets/projects/th.png',
             live: true,
             git: false,
             link: {
-                live: 'http://twohouse.pl'
+                live: 'https://twohouse.pl'
             }
         },
         {
             name: 'ActiveYachtClub',
             date: '10.01.2019',
             icons: ['https://res.cloudinary.com/drngyvbmc/image/upload/v1565875158/php.png', 'https://res.cloudinary.com/drngyvbmc/image/upload/v1565875158/mysql.png', 'https://res.cloudinary.com/drngyvbmc/image/upload/v1565875158/pdo.png', 'https://res.cloudinary.com/drngyvbmc/image/upload/v1564679586/vue.png'],
-            description: 'Responsywna aplikacja internetowa poświęcona czarterowi eksuzywnych jachtów na Majorce. Została stworzona w frameworku Vue2JS. Backend w formie REST API napisany jest w PHP, kod jest zorientowany obiektowo, do połączenia z bazą danych MySQL użyłem biblioteki PDO.',
+            description: 'ayc-text',
             bg: '../../../../assets/projects/ayc.png',
             live: true,
             git: false,
@@ -38,7 +38,7 @@ export class PortfolioComponent implements OnInit {
             name: 'QuickMargo',
             date: '01.09.2019',
             icons: ['https://res.cloudinary.com/drngyvbmc/image/upload/v1564679586/node.png', 'https://res.cloudinary.com/drngyvbmc/image/upload/v1564679586/express.png', 'https://res.cloudinary.com/drngyvbmc/image/upload/v1564679586/puppeteer.png', 'https://res.cloudinary.com/drngyvbmc/image/upload/v1565875158/socket.png', 'https://res.cloudinary.com/drngyvbmc/image/upload/v1564679586/vue.png', 'https://res.cloudinary.com/drngyvbmc/image/upload/v1565875158/atom.png', 'https://res.cloudinary.com/drngyvbmc/image/upload/v1564679586/ionic.jpg', 'https://res.cloudinary.com/drngyvbmc/image/upload/v1564679585/angular.png'],
-            description: 'Mój najbardziej skomplikowany projekt. Jest to bot w pełni automatyzujący największą polską dynamiczną przeglądarkową grę RPG. Bot automatyzuje wszystkie obszary gry oraz pozwala się zarządzać z poziomu telefonu. Składa się z trzech aplikacji - mobilnej, desktopowej i webowej oraz backendu, który umożliwia współpracę między nimi. Do stworzenia projektu skorzystałem z takich technologii jak NodeJS, Express, MongoDB, Puppeteer, Socket.io, Vue2JS, Electron, Ionic, Angular.',
+            description: 'quickmargo-text',
             bg: '../../../../assets/projects/quickmargo2.png',
             live: true,
             git: false,
@@ -50,7 +50,7 @@ export class PortfolioComponent implements OnInit {
             name: 'AdminPanel',
             date: '30.10.2018',
             icons: ['https://res.cloudinary.com/drngyvbmc/image/upload/v1565875158/php.png', 'https://res.cloudinary.com/drngyvbmc/image/upload/v1565875158/mysql.png', 'https://res.cloudinary.com/drngyvbmc/image/upload/v1565875158/pdo.png', 'https://res.cloudinary.com/drngyvbmc/image/upload/v1564679586/vue.png'],
-            description: 'Admin panel jest to prosty autorski CMS służący do zarządzania treściami w wykonanych przeze mnie aplikacjach. Posiada różne najbardziej przydatne funkcje jak dodawanie, usuwanie, modyfikowanie artykułów widocznych w aplikacjach, bazy klientów, wysyłanie newsletterów itd. Do jego stworzenia wykorzystałem Vue2JS, PHP',
+            description: 'adminpanel-text',
             live: true,
             bg: '../../../../assets/projects/adminpanel.png',
             git: false,
@@ -61,7 +61,7 @@ export class PortfolioComponent implements OnInit {
         {
             name: 'ScreenRecorder',
             date: '05.09.2019',
-            description: 'Aplikacja do nagrywania ekranu. Jest stworzona z Electronem oraz AngularJS. Aplikacja może zapisać nagranie zarówno na dysku jak i w chmurze i wystawić link. Używa cloudinary API w celu zapisania nagrania. Projekt open source kod jest dostępny na githubie.',
+            description: 'screenrecorder-text',
             image: '../../../../assets/projects/screenrecorder.png',
             git: true,
             live: false,
@@ -79,7 +79,7 @@ export class PortfolioComponent implements OnInit {
                 live: 'http://colorchanger.tymdev.pl',
                 git: 'https://github.com/d0peCode/colorReader'
             },
-            description: 'Mała aplikacja do wyboru koloru napisana w AngularJS. Pokazuje odcienie wybranego koloru. Kolory można zapisać do palety i pozostanąone w pamięci podręcznej. Można przekonwertować formaty kolorów RGB, HEX, HSL.',
+            description: 'colorreader-text',
             bg: '../../../../assets/projects/colorchanger.png',
         }
     ];

diff --git a/public/src/app/components/landing/skills/skills.component.html b/public/src/app/components/landing/skills/skills.component.html
@@ -1,9 +1,7 @@
 <section class="skills" id="skills">
     <header class="skills__top">
-        <h2 class="heading heading--primary">Umiejętności</h2>
-        <p class="skills__top-paragraph">Tworzę aplikacje desktopowe, webowe oraz mobilne w JavaScript.
-
-            Zapraszam do kontaktu po więcej szczegółów na temat moich umiejętności technicznych.</p>
+        <h2 class="heading heading--primary">{{ 'skills' | translate }}</h2>
+        <p class="skills__top-paragraph">{{ 'skills-text' | translate }}</p>
     </header>
     <div class="skills__body">
         <div class="swiper-wrapper">
@@ -18,10 +16,11 @@ <h2 class="heading heading--primary">Umiejętności</h2>
                         <img [src]="item.image.src" [alt]="item.image.alt">
                     </div>
                     <div class="skills__body-box-header">
-                        <h3>{{ item.header }}</h3>
+                        <h3 *ngIf="item.header === 'responsiveness'">{{ item.header | translate }}</h3>
+                        <h3 *ngIf="item.header !== 'responsiveness'">{{ item.header }}</h3>
                     </div>
                     <div class="skills__body-box-text">
-                        <p>{{ item.text }}</p>
+                        <p>{{ item.text | translate }}</p>
                     </div>
                 </div>
             </section>

diff --git a/public/src/app/components/landing/skills/skills.component.ts b/public/src/app/components/landing/skills/skills.component.ts
@@ -13,50 +13,42 @@ export class SkillsComponent implements OnInit {
         {
             image: {
                 src:  '../../assets/icons/laptop.png',
-                alt: 'Responsive'
+                alt: 'responsiveness'
             },
-            header: 'Responsywność',
-            text: 'Każda strona i aplikacja, którą tworzę jest responsywna i dopasowuje się do każdego urządzenia.'
+            header: 'responsiveness',
+            text: 'responsiveness-text'
         },
         {
             image: {
                 src:  '../../assets/icons/fe-be.png',
                 alt: 'Frontend/Backend'
             },
             header: 'Frontend/Backend',
-            text: 'W javascripcie znam zarówno technologie frontendowe jak i backendowe dzięki czemu jestem w stanie pracować nad wieloma rzeczami.'
+            text: 'fe-be-text'
         },
         {
             image: {
                 src:  '../../assets/icons/seo.png',
                 alt: 'Search engine optimization'
             },
             header: 'SEO',
-            text: 'Dbam o semantykę HTMLa dzięki czemu aplikacje, które tworze są wstępnie przygotowane pod pozycjonowanie.'
+            text: 'seo-text'
         },
         {
             image: {
                 src:  '../../assets/icons/fe-be.png',
                 alt: 'Javascript'
             },
             header: 'Javascript',
-            text: 'ES6+, Vue2JS, Ionic, Angular, AngularJS, Electron, NodeJS, ExpressJS'
+            text: 'ES6+, Vue2JS, AngularJS, Angular 2+, Electron, Ionic, NodeJS, ExpressJS, Jest, Puppeteer, Selenium, Quasar...'
         },
         {
             image: {
                 src:  '../../assets/icons/laptop.png',
                 alt: 'CSS'
             },
             header: 'CSS',
-            text: 'CSS3, SCSS, BEM, Bootstrap 3, Bootstrap 4, keyframes, animations'
-        },
-        {
-            image: {
-                src:  '../../assets/icons/seo.png',
-                alt: 'Search engine optimization'
-            },
-            header: 'HTML',
-            text: 'Dbam o semantykę HTMLa dzięki czemu aplikacje, które tworze są wstępnie przygotowane pod pozycjonowanie.'
+            text: 'CSS3, SCSS, BEM, Grid, Flexbox, Bootstrap 3 & 4 :('
         }
     ];
 

diff --git a/public/src/app/components/landing/top/greeting/greeting.component.html b/public/src/app/components/landing/top/greeting/greeting.component.html
@@ -1,10 +1,10 @@
 <header class="greeting">
     <h2 class="greeting__header">
-        Miło Cię widzieć na mojej stronie! Zapraszam do przejrzenia moich prac oraz do współpracy.
+        {{ 'greeting' | translate }}
     </h2>
     <div class="greeting__button">
         <button type="button" class="button button--primary" (click)="goPortfolio()">
-            <span class="button-text">Projekty</span>
+            <span class="button-text">{{ 'projects' | translate }}</span>
             <span class="button-icon">&#9660;</span>
         </button>
     </div>

diff --git a/public/src/app/components/landing/top/greeting/greeting.component.ts b/public/src/app/components/landing/top/greeting/greeting.component.ts
@@ -1,9 +1,9 @@
 import { Component, OnInit } from '@angular/core';
 
 @Component({
-selector: 'app-greeting',
-templateUrl: './greeting.component.html',
-styleUrls: ['./greeting.component.scss']
+  selector: 'app-greeting',
+  templateUrl: './greeting.component.html',
+  styleUrls: ['./greeting.component.scss']
 })
 export class GreetingComponent implements OnInit {