Skip to content

Commit fc69380

Browse files
d0peCoded0peCode
authored
Merge pull request #4 from d0peCode/internationalization
Bring internationalization intro project
2 parents 80d9f1c + 82ee0c7 commit fc69380

20 files changed

Lines changed: 229 additions & 68 deletions

‎public/package-lock.json‎

Lines changed: 16 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/package.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@
77
"build": "ng build",
88
"test": "ng test",
99
"lint": "ng lint",
10-
"e2e": "ng e2e"
10+
"e2e": "ng e2e",
11+
"int:extract": "ng xi18n --output-path ./locale"
1112
},
1213
"private": true,
1314
"dependencies": {
@@ -20,6 +21,8 @@
2021
"@angular/platform-browser-dynamic": "~7.2.0",
2122
"@angular/router": "~7.2.0",
2223
"@ngx-prism/core": "^2.0.1",
24+
"@ngx-translate/core": "^11.0.1",
25+
"@ngx-translate/http-loader": "^4.0.0",
2326
"@types/prismjs": "^1.9.0",
2427
"core-js": "^2.5.4",
2528
"lodash-es": "^4.17.15",

‎public/src/app/app.module.ts‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
import { BrowserModule } from '@angular/platform-browser';
22
import { NgModule } from '@angular/core';
33
import { FormsModule } from '@angular/forms';
4-
import { HttpClientModule } from '@angular/common/http';
4+
import { HttpClientModule, HttpClient } from '@angular/common/http';
5+
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
56
import { AppRoutingModule } from './app-routing.module';
67
import { PrismModule } from '@ngx-prism/core';
8+
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
79
import { AppComponent } from './components/app.component';
810

911
// blog
@@ -27,6 +29,11 @@ import { ModesComponent } from './components/landing/top/tools/modes/modes.compo
2729
// services
2830
import { StoreService } from './services/store.service';
2931

32+
// AoT requires an exported function for factories
33+
export function HttpLoaderFactory(http: HttpClient) {
34+
return new TranslateHttpLoader(http);
35+
}
36+
3037
@NgModule({
3138
declarations: [
3239
AppComponent,
@@ -52,7 +59,14 @@ import { StoreService } from './services/store.service';
5259
AppRoutingModule,
5360
FormsModule,
5461
HttpClientModule,
55-
PrismModule
62+
PrismModule,
63+
TranslateModule.forRoot({
64+
loader: {
65+
provide: TranslateLoader,
66+
useFactory: HttpLoaderFactory,
67+
deps: [HttpClient]
68+
}
69+
})
5670
],
5771
providers: [StoreService],
5872
bootstrap: [AppComponent]

‎public/src/app/components/app.component.ts‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,15 @@
11
import { Component } from '@angular/core';
2+
import { TranslateService } from '@ngx-translate/core';
23

34
@Component({
45
selector: 'app-root',
56
templateUrl: './app.component.html',
67
styleUrls: ['./app.component.scss'],
8+
providers: [TranslateService]
79
})
810
export class AppComponent {
9-
title = 'tymdev-new';
11+
constructor(private translate: TranslateService) {
12+
translate.setDefaultLang('en');
13+
translate.use('pl');
14+
}
1015
}

‎public/src/app/components/landing/contact/contact.component.html‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<section class="contact" id="contact">
22
<div class="contact__col">
33
<header class="contact__header">
4-
<h2 class="heading heading--primary">Kontakt / Wycena</h2>
5-
<p class="contact__header-paragraph">Zapraszam do kontaktu jeśli chcesz podjąć współpracę lub wycenić swój projekt.</p>
4+
<h2 class="heading heading--primary">{{ 'contact-header' | translate }}</h2>
5+
<p class="contact__header-paragraph">{{ 'contact-text' | translate }}</p>
66
<div class="contact__links">
77
<a href="mailto:kontakt@tymdev.pl" target="_top">kontakt@tymdev.pl</a>
88
<a href="tel:123-456-7890">+48 795 691 258</a>
@@ -13,19 +13,19 @@ <h2 class="heading heading--primary">Kontakt / Wycena</h2>
1313
<div class="contact__col">
1414
<form class="contact__form" (ngSubmit)="sendMessage()">
1515
<div class="contact__input-box">
16-
<label for="email" class="contact__input-label">adres e-mail</label>
17-
<input type="email" id="email" class="contact__input-input" placeholder="przyklad@gmail.com" [(ngModel)]="email" name="email" required="">
16+
<label for="email" class="contact__input-label">{{ 'email' | translate }}</label>
17+
<input type="email" id="email" class="contact__input-input" placeholder="{{ 'email-placeholder' | translate }}" [(ngModel)]="email" name="email" required>
1818
</div>
1919
<div class="contact__input-box">
20-
<label for="phone" class="contact__input-label">numer telefonu (opcjonalne)</label>
20+
<label for="phone" class="contact__input-label">{{ 'phone' | translate }}</label>
2121
<input type="tel" id="phone" class="contact__input-input" placeholder="+48 795 691 258" [(ngModel)]="phone" name="phone">
2222
</div>
2323
<div class="contact__input-box">
24-
<label for="message" class="contact__input-label">wiadomość</label>
25-
<textarea id="message" class="contact__input-textarea" placeholder="Twoja wiadomość..." [(ngModel)]="message" name="message"></textarea>
24+
<label for="message" class="contact__input-label">{{ 'message' | translate }}</label>
25+
<textarea id="message" class="contact__input-textarea" placeholder="{{ 'message-placeholder' | translate }}" [(ngModel)]="message" name="message"></textarea>
2626
</div>
2727
<button type="submit" class="button button--primary">
28-
<span class="button-text">Wyślij</span>
28+
<span class="button-text">{{ 'send' | translate }}</span>
2929
<span class="button-icon button-icon--right">&#9660;</span>
3030
</button>
3131
</form>

‎public/src/app/components/landing/footer/footer.component.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,23 +6,23 @@
66
<span class="footer__logo">TymDev</span>
77
</div>
88
<div>
9-
<span class="footer__text">2019 TymDev sp. z o. o. ®</span>
9+
<span class="footer__text">2019 TymDev {{ 'company' | translate }} ®</span>
1010
<span class="footer__text">all rights reserved ©</span>
1111
</div>
1212
</div>
1313
<div class="footer__col">
1414
<ul class="footer__list">
1515
<li>
16-
<span (click)="scrollToElement('skills')">umiejętności</span>
16+
<span (click)="scrollToElement('skills')">{{ 'skillsInNav' | translate }}</span>
1717
</li>
1818
<li>
19-
<span (click)="scrollToElement('portfolio')">portfolio</span>
19+
<span (click)="scrollToElement('portfolio')">Portfolio</span>
2020
</li>
2121
<li>
22-
<span (click)="scrollToElement('contact')">kontakt</span>
22+
<span (click)="scrollToElement('contact')">{{ 'contact' | translate }}</span>
2323
</li>
2424
<li>
25-
<a href="http://tymdev.pl/admin">dla klientów</a>
25+
<a href="http://tymdev.pl/admin">{{ 'clientsInNav' | translate }}</a>
2626
</li>
2727
</ul>
2828
</div>

‎public/src/app/components/landing/portfolio/portfolio.component.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<header class="portfolio__header">
33
<div class="portfolio__header-container">
44
<h2 class="heading heading--primary">Portfolio</h2>
5-
<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>
5+
<p class="portfolio__header-paragraph">{{ 'skills-intro' | translate }}</p>
66
</div>
77
</header>
88
<section class="nav-light">
@@ -12,12 +12,12 @@ <h2 class="heading heading--primary">Portfolio</h2>
1212
<div class="portfolio__content">
1313
<h3 [attr.data-index]="'0' + i" class="heading heading--secondary">{{ item.name }}</h3>
1414
<time class="portfolio__date"> {{ item.date }} </time>
15-
<p class="portfolio__content-paragraph">{{ item.description }}</p>
15+
<p class="portfolio__content-paragraph">{{ item.description | translate }}</p>
1616
<div>
1717
<img *ngFor="let n of item.icons" [src]="n" alt="" class="portfolio__content-icon">
1818
</div>
1919
<a *ngIf="item.live" [href]="item.link.live" target="_blank" class="button button--primary portfolio__button">
20-
<span class="button-text">Zobacz</span>
20+
<span class="button-text"> {{ 'see' | translate }}</span>
2121
<span class="button-icon button-icon--right">&#9660;</span>
2222
</a>
2323
<a *ngIf="item.git" [href]="item.link.git" target="_blank" class="button button--primary portfolio__button">

‎public/src/app/components/landing/portfolio/portfolio.component.ts‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -14,19 +14,19 @@ export class PortfolioComponent implements OnInit {
1414
name: 'TwoHouse',
1515
date: '15.10.2018',
1616
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'],
17-
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.',
17+
description: 'two-house-text',
1818
bg: '../../../../assets/projects/th.png',
1919
live: true,
2020
git: false,
2121
link: {
22-
live: 'http://twohouse.pl'
22+
live: 'https://twohouse.pl'
2323
}
2424
},
2525
{
2626
name: 'ActiveYachtClub',
2727
date: '10.01.2019',
2828
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'],
29-
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.',
29+
description: 'ayc-text',
3030
bg: '../../../../assets/projects/ayc.png',
3131
live: true,
3232
git: false,
@@ -38,7 +38,7 @@ export class PortfolioComponent implements OnInit {
3838
name: 'QuickMargo',
3939
date: '01.09.2019',
4040
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'],
41-
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.',
41+
description: 'quickmargo-text',
4242
bg: '../../../../assets/projects/quickmargo2.png',
4343
live: true,
4444
git: false,
@@ -50,7 +50,7 @@ export class PortfolioComponent implements OnInit {
5050
name: 'AdminPanel',
5151
date: '30.10.2018',
5252
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'],
53-
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',
53+
description: 'adminpanel-text',
5454
live: true,
5555
bg: '../../../../assets/projects/adminpanel.png',
5656
git: false,
@@ -61,7 +61,7 @@ export class PortfolioComponent implements OnInit {
6161
{
6262
name: 'ScreenRecorder',
6363
date: '05.09.2019',
64-
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.',
64+
description: 'screenrecorder-text',
6565
image: '../../../../assets/projects/screenrecorder.png',
6666
git: true,
6767
live: false,
@@ -79,7 +79,7 @@ export class PortfolioComponent implements OnInit {
7979
live: 'http://colorchanger.tymdev.pl',
8080
git: 'https://github.com/d0peCode/colorReader'
8181
},
82-
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.',
82+
description: 'colorreader-text',
8383
bg: '../../../../assets/projects/colorchanger.png',
8484
}
8585
];

‎public/src/app/components/landing/skills/skills.component.html‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
11
<section class="skills" id="skills">
22
<header class="skills__top">
3-
<h2 class="heading heading--primary">Umiejętności</h2>
4-
<p class="skills__top-paragraph">Tworzę aplikacje desktopowe, webowe oraz mobilne w JavaScript.
5-
6-
Zapraszam do kontaktu po więcej szczegółów na temat moich umiejętności technicznych.</p>
3+
<h2 class="heading heading--primary">{{ 'skills' | translate }}</h2>
4+
<p class="skills__top-paragraph">{{ 'skills-text' | translate }}</p>
75
</header>
86
<div class="skills__body">
97
<div class="swiper-wrapper">
@@ -18,10 +16,11 @@ <h2 class="heading heading--primary">Umiejętności</h2>
1816
<img [src]="item.image.src" [alt]="item.image.alt">
1917
</div>
2018
<div class="skills__body-box-header">
21-
<h3>{{ item.header }}</h3>
19+
<h3 *ngIf="item.header === 'responsiveness'">{{ item.header | translate }}</h3>
20+
<h3 *ngIf="item.header !== 'responsiveness'">{{ item.header }}</h3>
2221
</div>
2322
<div class="skills__body-box-text">
24-
<p>{{ item.text }}</p>
23+
<p>{{ item.text | translate }}</p>
2524
</div>
2625
</div>
2726
</section>

‎public/src/app/components/landing/skills/skills.component.ts‎

Lines changed: 7 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -13,50 +13,42 @@ export class SkillsComponent implements OnInit {
1313
{
1414
image: {
1515
src: '../../assets/icons/laptop.png',
16-
alt: 'Responsive'
16+
alt: 'responsiveness'
1717
},
18-
header: 'Responsywność',
19-
text: 'Każda strona i aplikacja, którą tworzę jest responsywna i dopasowuje się do każdego urządzenia.'
18+
header: 'responsiveness',
19+
text: 'responsiveness-text'
2020
},
2121
{
2222
image: {
2323
src: '../../assets/icons/fe-be.png',
2424
alt: 'Frontend/Backend'
2525
},
2626
header: 'Frontend/Backend',
27-
text: 'W javascripcie znam zarówno technologie frontendowe jak i backendowe dzięki czemu jestem w stanie pracować nad wieloma rzeczami.'
27+
text: 'fe-be-text'
2828
},
2929
{
3030
image: {
3131
src: '../../assets/icons/seo.png',
3232
alt: 'Search engine optimization'
3333
},
3434
header: 'SEO',
35-
text: 'Dbam o semantykę HTMLa dzięki czemu aplikacje, które tworze są wstępnie przygotowane pod pozycjonowanie.'
35+
text: 'seo-text'
3636
},
3737
{
3838
image: {
3939
src: '../../assets/icons/fe-be.png',
4040
alt: 'Javascript'
4141
},
4242
header: 'Javascript',
43-
text: 'ES6+, Vue2JS, Ionic, Angular, AngularJS, Electron, NodeJS, ExpressJS'
43+
text: 'ES6+, Vue2JS, AngularJS, Angular 2+, Electron, Ionic, NodeJS, ExpressJS, Jest, Puppeteer, Selenium, Quasar...'
4444
},
4545
{
4646
image: {
4747
src: '../../assets/icons/laptop.png',
4848
alt: 'CSS'
4949
},
5050
header: 'CSS',
51-
text: 'CSS3, SCSS, BEM, Bootstrap 3, Bootstrap 4, keyframes, animations'
52-
},
53-
{
54-
image: {
55-
src: '../../assets/icons/seo.png',
56-
alt: 'Search engine optimization'
57-
},
58-
header: 'HTML',
59-
text: 'Dbam o semantykę HTMLa dzięki czemu aplikacje, które tworze są wstępnie przygotowane pod pozycjonowanie.'
51+
text: 'CSS3, SCSS, BEM, Grid, Flexbox, Bootstrap 3 & 4 :('
6052
}
6153
];
6254

0 commit comments

Comments
 (0)