Skip to content

Commit

Permalink
Merge pull request #51 from guilhermeborgesbastos/implement-gesture-r…
Browse files Browse the repository at this point in the history
…ecognition

Implement gesture recognition for the Experience and Posts sections
  • Loading branch information
guilhermeborgesbastos authored Aug 11, 2021
2 parents 25fd1f1 + 8320406 commit 38843b9
Show file tree
Hide file tree
Showing 14 changed files with 165 additions and 51 deletions.
25 changes: 25 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
#[1.3.0](https://github.com/guilhermeborgesbastos/live-resume/releases/tag/v1.3) (2021-07-29)
###📃 release notes
- Add horizontal gestures to navigate the profile experience.
- Add horizontal gestures to navigate the profile posts.

#[1.2.0](https://github.com/guilhermeborgesbastos/live-resume/releases/tag/v1.2) (2020-06-15)
###📃 release notes
- Add to the header an icon for downloading the resume as PDF file;
- Add the company logo to the Experience section;
- Improv application text's readability.

#[1.1.0](https://github.com/guilhermeborgesbastos/live-resume/releases/tag/v1.1) (2020-06-07)
###📃 release notes
- Solve `websocket-extensions` dependency vulnerability;
- Improve the README instructions;
- Add Google Analytics integration to the repository using ga-beacon;
- Update the footer section to provide the GitHub fork link;
- Create the initial Wiki documentation;
- Improve the skill icons nomenclature, making it generic;
- Remove deprecated test files ( The new Unit and Integration tests are in development ) ;
- Remove CDN assets from the master branch, allowing offline development.

#[1.0.0](https://github.com/guilhermeborgesbastos/live-resume/releases/tag/v1.0) (2020-05-22)
###📃 Initial release
- The Angular application is ready for production using ES6. The ES5 release can be found in the es5 branch.
22 changes: 11 additions & 11 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -26,10 +26,10 @@

Get rid of your old and deprecated text resume by using the first **Open-source Web Application** _(100% free)_, which makes a professional personal website and portfolio easy and quick to build.

## What's included❓
## What is included❓

* A fully functional _Angular 9_ application with a customizable template and content;
* Totally responsive for the mobile and desktop devices;
* Totally responsive for the mobile and desktop devices _(allow mobile gestures too... ;))_;
* Internationalization for English and Portuguese _(easy for adding/removing new languages - in18 lib)_;
* Mobile navigation sharing _(Share the resume with native apps like Whatsapp, LinkedIn, Facebook, etc...)_;
* A complete [Wiki](https://github.com/guilhermeborgesbastos/live-resume/wiki) that provides support;
Expand All @@ -39,9 +39,12 @@ Get rid of your old and deprecated text resume by using the first **Open-source
* Firebase integration in the contact form;
* Composed of 5 custom sections ([Welcome](https://guilhermeborgesbastos.com/), [About Me](https://guilhermeborgesbastos.com/about), [Experiences](https://guilhermeborgesbastos.com/experience), [Posts](https://guilhermeborgesbastos.com/posts), and [Contact](https://guilhermeborgesbastos.com/contact));
* Router fragment friendly (e.g: https://guilhermeborgesbastos.com/posts );
* Source code verified by static code analyzers (safe and ready for production);
* Source code verified by static code analyzers _(safe and ready for production)_;

## 🗂Wiki Documentation & 💬Community Chat
## Changelog
[Learn about the latest improvements.](https://github.com/guilhermeborgesbastos/live-resume/CHANGELOG.md)

## 🗂 Wiki Documentation & 💬 Community Chat

To get more help on the setup, customization or any other aspect, accessing the following:

Expand All @@ -66,7 +69,7 @@ npm -v

4. If you haven't installed NPM in your machine then go to [this link](https://www.npmjs.com/get-npm) in order to install NPM.

## 📥Installing and 📁Executing locally
## 📥 Installing and Executing locally

> A video tutorial is also available [watch it](https://youtu.be/SmSCux_qx_Q).
Expand Down Expand Up @@ -94,11 +97,11 @@ ng serve --host 0.0.0.0 --configuration=en

> Please, feel free to make improvements, or any sort of changes and send it back via **pull request**. Your contribution is always welcome!
## How to 🔨customize?
## 🔨 How to customize?

In the [Wiki Doc.](https://github.com/guilhermeborgesbastos/live-resume/wiki/applying-customizations) there is a specific page supporting you on how to apply customizations to the layout and more... [See page](https://github.com/guilhermeborgesbastos/live-resume/wiki/applying-customizations)

## 🖋Contribute
## 🖋 Contribute

Feel free to add new features, language supports, fix bugs, or improve the docs. Any kind of help is appreciated! If you make any kind of improvements, please, send them back as a **Pull Request**. Let's keep making it better and up-to-date.

Expand All @@ -117,11 +120,8 @@ This project uses several open source packages:
> LinkedIn [profile](https://www.linkedin.com/in/guilhermeborgesbastos)<br>
> Facebook [profile](https://www.facebook.com/guilherme.borgesbastos)
## 📝License
## 📝 License

The theme is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

[![Analytics](https://ga-beacon.appspot.com/UA-168686195-1/live-resume/home-page?pixel)](https://github.com/igrigorik/ga-beacon)



28 changes: 12 additions & 16 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 3 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "live-resume",
"version": "1.0.0",
"version": "1.3.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
Expand Down Expand Up @@ -36,13 +36,15 @@
"compass-mixins": "^0.12.10",
"elliptic": "^6.5.4",
"firebase": "^7.14.2",
"hammerjs": "^2.0.8",
"http-proxy": "^1.18.1",
"ini": "^1.3.8",
"ng-navigator-share": "^1.0.3",
"node-forge": "^0.10.0",
"rxjs": "^6.5.5",
"serialize-javascript": "^4.0.0",
"socket.io": "^2.4.1",
"tar": "^4.4.15",
"tslib": "^1.13.0",
"webpack-subresource-integrity": "^1.5.2",
"websocket-extensions": "^0.1.4",
Expand Down
22 changes: 19 additions & 3 deletions src/app/app.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,19 @@ import { AngularFireDatabaseModule } from "@angular/fire/database";
import { AngularFireAnalyticsModule } from "@angular/fire/analytics";
import { environment } from "../environments/environment";

import { HammerModule, HammerGestureConfig, HAMMER_GESTURE_CONFIG } from "@angular/platform-browser";
import * as Hammer from "hammerjs";

export class MyHammerConfig extends HammerGestureConfig {
overrides = <any> {
swipe: { direction: Hammer.DIRECTION_ALL },
};
}

registerLocaleData(localeEn, "en");
registerLocaleData(localePt, "pt-BR", localePtExtra);
@NgModule({
imports: [
imports: [
BrowserModule,
AppRoutingModule,
CoreModule,
Expand All @@ -30,10 +39,17 @@ registerLocaleData(localePt, "pt-BR", localePtExtra);
PageNotFoundRoutingModule,
AngularFireModule.initializeApp(environment.firebaseConfig),
AngularFireDatabaseModule,
AngularFireAnalyticsModule
AngularFireAnalyticsModule,
HammerModule
],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
bootstrap: [ AppComponent ],
providers: [
{
provide: HAMMER_GESTURE_CONFIG,
useClass: MyHammerConfig,
},
]
})

export class AppModule {}
43 changes: 43 additions & 0 deletions src/app/core/shared/abstract.swipe.section.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import { SwipeSection } from "./swipe.section";

enum Direction {
LEFT,
RIGHT,
NOT_READABLE
}

export abstract class AbstractSwipeSection implements SwipeSection {

private horizontalSwipeRatio: number;

private readonly horizontalStartPoint = 0;

constructor(horizontalSwipeRatio: number = 40) {
this.horizontalSwipeRatio = horizontalSwipeRatio;
}

onSwipe(event: any): void {
const direction: Direction = this.getEventSwipeDirection(event);
if(!this.disablePreviousNavigation() && direction === Direction.RIGHT) {
this.onClickPrevious();
} else if(!this.disableNextNavigation() && direction === Direction.LEFT) {
this.onClickNext();
}
}

private getEventSwipeDirection(event: any): Direction | undefined {
if(Math.abs(event.deltaX) > this.horizontalSwipeRatio) {
return event.deltaX > this.horizontalStartPoint ? Direction.RIGHT : Direction.LEFT;
}
return Direction.NOT_READABLE;
}

abstract disablePreviousNavigation(): boolean;

abstract disableNextNavigation(): boolean;

abstract onClickPrevious(): void;

abstract onClickNext(): void;

}
12 changes: 12 additions & 0 deletions src/app/core/shared/swipe.section.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
export declare interface SwipeSection {

onSwipe(event: any): void;

disablePreviousNavigation(): boolean;

disableNextNavigation(): boolean;

onClickPrevious(): void;

onClickNext(): void;
}
10 changes: 5 additions & 5 deletions src/app/experience/experience.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -6,27 +6,27 @@
<h1 i18n="nav@@experiences">Experiences</h1>
</div>
<div class="navigation">
<a href="javascript:void(0)" class="previous" (click)="onClickPrevious()" [ngClass]="{'disabled': currentPosition == 1}">
<a href="javascript:void(0)" class="previous" (click)="onClickPrevious()" [ngClass]="{'disabled': disablePreviousNavigation()}">
<fa-icon [icon]="['fas', 'chevron-left']" class="icon" i18n-title="exp.nav@@previous" title="Previous"></fa-icon>
<span i18n="exp.nav@@previous">Previous</span>
</a>
<div class="devider">|</div>
<a href="javascript:void(0)" class="next" (click)="onClickNext()" [ngClass]="{'disabled': currentPosition == experiencesOrdered?.length}">
<a href="javascript:void(0)" class="next" (click)="onClickNext()" [ngClass]="{'disabled': disableNextNavigation()}">
<span i18n="exp.nav@@next">Next</span>
<fa-icon [icon]="['fas', 'chevron-right']" class="icon" i18n-title="exp.nav@@next" title="Next"></fa-icon>
</a>
</div>

<!-- Custom mobile menu active under 600px wide resolution -->
<div class="navigation-mobile">
<a href="javascript:void(0)" class="previous" (click)="onClickPrevious()" [ngClass]="{'disabled': currentPosition == 1}">
<a href="javascript:void(0)" class="previous" (click)="onClickPrevious()" [ngClass]="{'disabled': disablePreviousNavigation()}">
<div class="molding">
<span [innerHtml]="previousYear | safariDateFormatter | localizedDate:'yyyy'"></span>
<fa-icon [icon]="['fas', 'chevron-left']" class="icon" i18n-title="exp.nav@@previous" title="Previous"></fa-icon>
</div>
</a>
<div class="current"><span [innerHtml]="currentYear | safariDateFormatter | localizedDate:'yyyy'"></span></div>
<a href="javascript:void(0)" class="next" (click)="onClickNext()" [ngClass]="{'disabled': currentPosition == experiencesOrdered?.length}">
<a href="javascript:void(0)" class="next" (click)="onClickNext()" [ngClass]="{'disabled': disableNextNavigation()}">
<div class="molding">
<fa-icon [icon]="['fas', 'chevron-right']" class="icon" i18n-title="exp.nav@@next" title="Next"></fa-icon>
<span [innerHtml]="nextYear | safariDateFormatter | localizedDate:'yyyy'"></span>
Expand All @@ -35,7 +35,7 @@ <h1 i18n="nav@@experiences">Experiences</h1>
</div>
</div>

<div class="middle-container">
<div class="middle-container" (swipe)="onSwipe($event)">
<div class="events-content">
<ol #orderedList>
<li *ngFor="let exp of experiencesOrdered; let i = index" [ngClass]="{'selected': i == 0}" data-id="{{ exp.id }}">
Expand Down
1 change: 1 addition & 0 deletions src/app/experience/experience.component.scss
Original file line number Diff line number Diff line change
Expand Up @@ -142,6 +142,7 @@
.middle-container {
@include display-flex;

touch-action: pan-y !important;
flex-direction: column;
text-align: right;
color: #fff;
Expand Down
Loading

0 comments on commit 38843b9

Please sign in to comment.