Merge pull request #59 from HideyoshiNakazone/implements-projects-page

Implementation of Projects Page

.github/workflows/vercel-cleanup-pr.yml

@@ -0,0 +1,27 @@
+name: vercel-cleanup-pr
+
+on:
+    pull_request:
+        types: [closed]
+
+env:
+    VERCEL_CLI_TOKEN: ${{ secrets.VERCEL_CLI_TOKEN }}
+    VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
+    GITHUB_PR_ID: ${{ github.event.number }}
+
+jobs:
+    cleanup:
+        runs-on: ubuntu-latest
+        steps:
+            - name: Cleanup Vercel Deployments
+              run: |
+                closed_deployments=$(curl "https://api.vercel.com/v6/deployments?projectId=$VERCEL_PROJECT_ID" \
+                    -H "Accept: application/json" \
+                    -H "Authorization: Bearer ${VERCEL_CLI_TOKEN}" | jq -r ".deployments[] | select(.meta.githubPrId == \"${GITHUB_PR_ID}\") | .uid")
+                for deployment in $closed_deployments; do
+                    echo "Deleting Deployment: $deployment"
+                    curl "https://api.vercel.com/v6/now/deployments/$deployment" \
+                        -X DELETE \
+                        -H "Authorization: Bearer ${VERCEL_CLI_TOKEN}"
+                done
+

.github/workflows/vercel-cleanup-previous-preview.yml

@@ -0,0 +1,33 @@
+name: vercel-cleanup-preview
+
+on:
+    push:
+        branches:
+            - '*'
+            - '!main'
+            - '!devel'
+
+env:
+    VERCEL_CLI_TOKEN: ${{ secrets.VERCEL_CLI_TOKEN }}
+    VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
+    GIT_PREVIOS_COMMIT: ${{ github.event.before }}
+
+
+jobs:
+    cleanup:
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v3
+            - name: Cleanup Vercel Deployments
+              run: |
+
+                invalid_deployments=$(curl "https://api.vercel.com/v6/deployments?projectId=$VERCEL_PROJECT_ID" \
+                    -H "Accept: application/json" \
+                    -H "Authorization: Bearer ${VERCEL_CLI_TOKEN}" | jq -r ".deployments[] | select(.meta.githubCommitSha == \"${GIT_PREVIOS_COMMIT}\") | .uid")
+
+                for deployment in $invalid_deployments; do
+                    echo "Deleting Deployment: $deployment"
+                    curl "https://api.vercel.com/v6/now/deployments/$deployment" \
+                        -X DELETE \
+                        -H "Authorization: Bearer ${VERCEL_CLI_TOKEN}"
+                done

.gitignore

@@ -16,6 +16,7 @@ yarn-error.log
 .project
 .classpath
 .c9/
+.nx/
 *.launch
 .settings/
 *.sublime-workspace
@@ -45,3 +46,5 @@ Thumbs.db
 src/assets/env.js
 
 .env
+
+.secret

package-lock.json

@@ -25,12 +25,14 @@
                 "@fortawesome/free-regular-svg-icons": "^6.1.1",
                 "@fortawesome/free-solid-svg-icons": "^6.1.1",
                 "@glidejs/glide": "^3.6.0",
+                "apexcharts": "^3.45.1",
                 "bootstrap": "^4.6.2",
                 "cookieconsent": "^3.1.1",
                 "cors": "^2.8.5",
                 "envsub": "^4.1.0",
                 "express": "^4.18.1",
                 "jquery": "^3.6.0",
+                "ng-apexcharts": "^1.8.0",
                 "ngx-cookie-service": "^16.0.1",
                 "ngx-cookieconsent": "^4.0.2",
                 "ngx-glide": "^16.0.0",
@@ -5440,6 +5442,11 @@
                 "node": ">=14.15.0"
             }
         },
+        "node_modules/@yr/monotone-cubic-spline": {
+            "version": "1.0.3",
+            "resolved": "https://registry.npmjs.org/@yr/monotone-cubic-spline/-/monotone-cubic-spline-1.0.3.tgz",
+            "integrity": "sha512-FQXkOta0XBSUPHndIKON2Y9JeQz5ZeMqLYZVVK93FliNBFm7LNMIZmY6FrMEB9XPcDbE2bekMbZD6kzDkxwYjA=="
+        },
         "node_modules/@zkochan/js-yaml": {
             "version": "0.0.6",
             "resolved": "https://registry.npmjs.org/@zkochan/js-yaml/-/js-yaml-0.0.6.tgz",
@@ -5722,6 +5729,20 @@
                 "node": ">= 8"
             }
         },
+        "node_modules/apexcharts": {
+            "version": "3.45.1",
+            "resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-3.45.1.tgz",
+            "integrity": "sha512-pPjj/SA6dfPvR/IKRZF0STdfBGpBh3WRt7K0DFuW9P8erypYkX17EHu3/molPRfo2zSiQwTVpshHC5ncysqfkA==",
+            "dependencies": {
+                "@yr/monotone-cubic-spline": "^1.0.3",
+                "svg.draggable.js": "^2.2.2",
+                "svg.easing.js": "^2.0.0",
+                "svg.filter.js": "^2.0.2",
+                "svg.pathmorphing.js": "^0.1.3",
+                "svg.resize.js": "^1.4.3",
+                "svg.select.js": "^3.0.1"
+            }
+        },
         "node_modules/aproba": {
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/aproba/-/aproba-2.0.0.tgz",
@@ -12063,6 +12084,20 @@
             "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
             "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw=="
         },
+        "node_modules/ng-apexcharts": {
+            "version": "1.8.0",
+            "resolved": "https://registry.npmjs.org/ng-apexcharts/-/ng-apexcharts-1.8.0.tgz",
+            "integrity": "sha512-NwJuMLHoLm52LSzM08RXV6oOOTyUYREAV53WHVGs+L2qi8UWbxCz19hX0kk+F/xFLEhhuiLegO3T1v30jLbKSQ==",
+            "dependencies": {
+                "tslib": "^2.0.0"
+            },
+            "peerDependencies": {
+                "@angular/common": ">=13.0.0",
+                "@angular/core": ">=13.0.0",
+                "apexcharts": "^3.41.0",
+                "rxjs": "^6.5.3 || ^7.4.0"
+            }
+        },
         "node_modules/ngx-cookie-service": {
             "version": "16.0.1",
             "resolved": "https://registry.npmjs.org/ngx-cookie-service/-/ngx-cookie-service-16.0.1.tgz",
@@ -15233,6 +15268,89 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
+        "node_modules/svg.draggable.js": {
+            "version": "2.2.2",
+            "resolved": "https://registry.npmjs.org/svg.draggable.js/-/svg.draggable.js-2.2.2.tgz",
+            "integrity": "sha512-JzNHBc2fLQMzYCZ90KZHN2ohXL0BQJGQimK1kGk6AvSeibuKcIdDX9Kr0dT9+UJ5O8nYA0RB839Lhvk4CY4MZw==",
+            "dependencies": {
+                "svg.js": "^2.0.1"
+            },
+            "engines": {
+                "node": ">= 0.8.0"
+            }
+        },
+        "node_modules/svg.easing.js": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/svg.easing.js/-/svg.easing.js-2.0.0.tgz",
+            "integrity": "sha512-//ctPdJMGy22YoYGV+3HEfHbm6/69LJUTAqI2/5qBvaNHZ9uUFVC82B0Pl299HzgH13rKrBgi4+XyXXyVWWthA==",
+            "dependencies": {
+                "svg.js": ">=2.3.x"
+            },
+            "engines": {
+                "node": ">= 0.8.0"
+            }
+        },
+        "node_modules/svg.filter.js": {
+            "version": "2.0.2",
+            "resolved": "https://registry.npmjs.org/svg.filter.js/-/svg.filter.js-2.0.2.tgz",
+            "integrity": "sha512-xkGBwU+dKBzqg5PtilaTb0EYPqPfJ9Q6saVldX+5vCRy31P6TlRCP3U9NxH3HEufkKkpNgdTLBJnmhDHeTqAkw==",
+            "dependencies": {
+                "svg.js": "^2.2.5"
+            },
+            "engines": {
+                "node": ">= 0.8.0"
+            }
+        },
+        "node_modules/svg.js": {
+            "version": "2.7.1",
+            "resolved": "https://registry.npmjs.org/svg.js/-/svg.js-2.7.1.tgz",
+            "integrity": "sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA=="
+        },
+        "node_modules/svg.pathmorphing.js": {
+            "version": "0.1.3",
+            "resolved": "https://registry.npmjs.org/svg.pathmorphing.js/-/svg.pathmorphing.js-0.1.3.tgz",
+            "integrity": "sha512-49HWI9X4XQR/JG1qXkSDV8xViuTLIWm/B/7YuQELV5KMOPtXjiwH4XPJvr/ghEDibmLQ9Oc22dpWpG0vUDDNww==",
+            "dependencies": {
+                "svg.js": "^2.4.0"
+            },
+            "engines": {
+                "node": ">= 0.8.0"
+            }
+        },
+        "node_modules/svg.resize.js": {
+            "version": "1.4.3",
+            "resolved": "https://registry.npmjs.org/svg.resize.js/-/svg.resize.js-1.4.3.tgz",
+            "integrity": "sha512-9k5sXJuPKp+mVzXNvxz7U0uC9oVMQrrf7cFsETznzUDDm0x8+77dtZkWdMfRlmbkEEYvUn9btKuZ3n41oNA+uw==",
+            "dependencies": {
+                "svg.js": "^2.6.5",
+                "svg.select.js": "^2.1.2"
+            },
+            "engines": {
+                "node": ">= 0.8.0"
+            }
+        },
+        "node_modules/svg.resize.js/node_modules/svg.select.js": {
+            "version": "2.1.2",
+            "resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-2.1.2.tgz",
+            "integrity": "sha512-tH6ABEyJsAOVAhwcCjF8mw4crjXSI1aa7j2VQR8ZuJ37H2MBUbyeqYr5nEO7sSN3cy9AR9DUwNg0t/962HlDbQ==",
+            "dependencies": {
+                "svg.js": "^2.2.5"
+            },
+            "engines": {
+                "node": ">= 0.8.0"
+            }
+        },
+        "node_modules/svg.select.js": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-3.0.1.tgz",
+            "integrity": "sha512-h5IS/hKkuVCbKSieR9uQCj9w+zLHoPh+ce19bBYyqF53g6mnPB8sAtIbe1s9dh2S2fCmYX2xel1Ln3PJBbK4kw==",
+            "dependencies": {
+                "svg.js": "^2.6.5"
+            },
+            "engines": {
+                "node": ">= 0.8.0"
+            }
+        },
         "node_modules/symbol-observable": {
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-4.0.0.tgz",

package.json

@@ -33,12 +33,14 @@
         "@fortawesome/free-regular-svg-icons": "^6.1.1",
         "@fortawesome/free-solid-svg-icons": "^6.1.1",
         "@glidejs/glide": "^3.6.0",
+        "apexcharts": "^3.45.1",
         "bootstrap": "^4.6.2",
         "cookieconsent": "^3.1.1",
         "cors": "^2.8.5",
         "envsub": "^4.1.0",
         "express": "^4.18.1",
         "jquery": "^3.6.0",
+        "ng-apexcharts": "^1.8.0",
         "ngx-cookie-service": "^16.0.1",
         "ngx-cookieconsent": "^4.0.2",
         "ngx-glide": "^16.0.0",

src/app/app-router.module.ts

@@ -1,9 +1,9 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule, Routes } from '@angular/router';
-import { HomeComponent } from './home/home.component';
 import { CallbackComponent } from './header/header-popup/callback/callback.component';
 
+
 const routes: Routes = [
     {
         path: '',
@@ -12,7 +12,11 @@ const routes: Routes = [
     },
     {
         path: 'home',
-        component: HomeComponent,
+        loadChildren: () => import('./home/home.module').then(mod => mod.HomeModule),
+    },
+    {
+        path: 'projects',
+        loadChildren: () => import('./projects/projects.module').then(mod => mod.ProjectsModule),
     },
     {
         path: 'callback',

src/app/app.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
-import { AuthService } from './shared/auth/auth.service';
+import { AuthService } from './shared/service/auth.service';
 import { UpdateService } from './shared/service-worker/update.service';
 import {
     NgcCookieConsentService,

src/app/app.module.ts

@@ -4,21 +4,18 @@ import { BrowserModule } from '@angular/platform-browser';
 import { AppComponent } from './app.component';
 import { HeaderModule } from './header/header.module';
 import { SharedModule } from './shared/shared.module';
-import { HomeComponent } from './home/home.component';
 import { AppRouterModule } from './app-router.module';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { AppServiceWorkerModule } from './app-service-worker.module';
 import { ServiceWorkerModule } from '@angular/service-worker';
 import { environment } from '../environments/environment';
 import { FooterComponent } from './footer/footer.component';
-import {HomeModule} from "./home/home.module";
 
 @NgModule({
     declarations: [AppComponent, FooterComponent],
     imports: [
         BrowserModule,
         HeaderModule,
-        HomeModule,
         AppRouterModule,
         AppServiceWorkerModule,
         SharedModule,

src/app/header/header-dropdown/header-dropdown.component.ts

@@ -22,7 +22,7 @@ import {
     faUser,
 } from '@fortawesome/free-solid-svg-icons';
 import { Subscription } from 'rxjs';
-import { AuthService } from 'src/app/shared/auth/auth.service';
+import { AuthService } from 'src/app/shared/service/auth.service';
 import { User } from '../../shared/model/user/user.model';
 import UserChecker from '../../shared/model/user/user.checker';
 import { HelpComponent } from '../header-popup/help/help.component';

src/app/header/header-popup/callback/callback.component.ts

@@ -1,6 +1,6 @@
 import { ActivatedRoute, Router } from '@angular/router';
 import { Component, OnInit } from '@angular/core';
-import { AuthService } from 'src/app/shared/auth/auth.service';
+import { AuthService } from 'src/app/shared/service/auth.service';
 
 @Component({
     selector: 'app-callback',

src/app/header/header-popup/login/login.component.ts

@@ -13,7 +13,7 @@ import { MatIconRegistry } from '@angular/material/icon';
 import { DomSanitizer } from '@angular/platform-browser';
 import { faLock, faUser } from '@fortawesome/free-solid-svg-icons';
 import { Subscription } from 'rxjs';
-import { AuthService } from 'src/app/shared/auth/auth.service';
+import { AuthService } from 'src/app/shared/service/auth.service';
 import { HttpError } from 'src/app/shared/model/httpError/httpError.model';
 import HttpErrorChecker from 'src/app/shared/model/httpError/httpErrorChecker';
 import UserChecker from 'src/app/shared/model/user/user.checker';

src/app/header/header-popup/my-profile/my-profile.component.ts

@@ -6,7 +6,7 @@ import {
     OnInit,
     Output,
 } from '@angular/core';
-import { AuthService } from '../../../shared/auth/auth.service';
+import { AuthService } from '../../../shared/service/auth.service';
 import { User } from '../../../shared/model/user/user.model';
 import {
     animate,

src/app/header/header-popup/my-profile/profile-picture-picker/profile-picture-picker.component.ts

@@ -1,5 +1,5 @@
 import { Component, EventEmitter, Output } from '@angular/core';
-import { AuthService } from '../../../../shared/auth/auth.service';
+import { AuthService } from '../../../../shared/service/auth.service';
 
 @Component({
     selector: 'app-profile-picture-picker',

src/app/header/header-popup/signup/signup.component.ts

@@ -9,7 +9,7 @@ import {
     faUser,
 } from '@fortawesome/free-solid-svg-icons';
 import { Subscription } from 'rxjs';
-import { AuthService } from 'src/app/shared/auth/auth.service';
+import { AuthService } from 'src/app/shared/service/auth.service';
 import { HttpError } from 'src/app/shared/model/httpError/httpError.model';
 import HttpErrorChecker from 'src/app/shared/model/httpError/httpErrorChecker';
 import UserChecker from 'src/app/shared/model/user/user.checker';

src/app/header/header-slider/nav-slider/nav-slider.component.ts

@@ -10,7 +10,7 @@ import { faUser } from '@fortawesome/free-solid-svg-icons';
 import { SliderItemComponent } from 'src/app/shared/components/slider-item/slider-item.component';
 import UserChecker from '../../../shared/model/user/user.checker';
 import { User } from '../../../shared/model/user/user.model';
-import { AuthService } from '../../../shared/auth/auth.service';
+import { AuthService } from '../../../shared/service/auth.service';
 import { Subscription } from 'rxjs';
 
 @Component({

src/app/header/header-slider/user-slider/user-slider.component.ts

@@ -1,6 +1,6 @@
 import { Component, EventEmitter, OnInit, Output } from '@angular/core';
 import { Subscription } from 'rxjs';
-import { AuthService } from 'src/app/shared/auth/auth.service';
+import { AuthService } from 'src/app/shared/service/auth.service';
 import { SliderItemComponent } from 'src/app/shared/components/slider-item/slider-item.component';
 import UserChecker from 'src/app/shared/model/user/user.checker';
 import { User } from 'src/app/shared/model/user/user.model';

src/app/header/header.component.ts

@@ -10,7 +10,7 @@ import {
 import { faUser } from '@fortawesome/free-solid-svg-icons';
 import { LoginComponent } from './header-popup/login/login.component';
 import { SignupComponent } from './header-popup/signup/signup.component';
-import { AuthService } from '../shared/auth/auth.service';
+import { AuthService } from '../shared/service/auth.service';
 import UserChecker from '../shared/model/user/user.checker';
 import { User } from '../shared/model/user/user.model';
 import { Subscription } from 'rxjs';
@@ -25,7 +25,7 @@ import { MyProfileComponent } from './header-popup/my-profile/my-profile.compone
 export class HeaderComponent implements OnInit, OnDestroy {
     pages: { name: string; route: string }[] = [
         { name: 'Home', route: '/home' },
-        { name: 'Projects', route: '/home' },
+        { name: 'Projects', route: '/projects' },
         { name: 'Contact', route: '/home' },
     ];
 

src/app/home/home-router.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule, Routes } from '@angular/router';
+import {HomeComponent} from "./home.component";
+
+const routes: Routes = [
+    {
+        path: '',
+        component: HomeComponent,
+    },
+];
+
+@NgModule({
+    declarations: [],
+    imports: [CommonModule, RouterModule.forChild(routes)],
+    exports: [RouterModule],
+})
+export class HomeRouterModule {}

src/app/home/home.module.ts

@@ -4,6 +4,7 @@ import {HomeComponent} from "./home.component";
 import {StackSliderComponent} from "./stack-slider/stack-slider.component";
 import {StackCardComponent} from "./stack-slider/stack-card/stack-card.component";
 import {NgxGlideComponent} from "ngx-glide";
+import {HomeRouterModule} from "./home-router.module";
 
 
 
@@ -16,7 +17,8 @@ import {NgxGlideComponent} from "ngx-glide";
     imports: [
         CommonModule,
         NgxGlideComponent,
-        NgOptimizedImage
+        NgOptimizedImage,
+        HomeRouterModule
     ]
 })
 export class HomeModule { }

src/app/home/stack-slider/stack-card/stack-card.component.css

@@ -14,6 +14,10 @@
     display: flex;
     align-items: center;
 }
+.stack-card-image::selection,
+.stack-card-image *::selection {
+    background: transparent;
+}
 
 .stack-card-body {
     padding: 10px;

src/app/projects/project-card/project-card.component.css

@@ -0,0 +1,94 @@
+.card .inverse-card-image {
+    flex-direction: row-reverse;
+}
+
+.card .card-content {
+    width: 100%;
+    padding: 40px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+}
+.card .card-content > * {
+    margin: 10px;
+}
+
+.card .card-content .card-content-h {
+    width: 80%;
+}
+
+.card .card-content .card-title a {
+    font-size: 2rem;
+    font-weight: 600;
+    justify-content: left;
+    color: #767676;
+    text-decoration: none;
+}
+
+.card .card-content .card-text {
+    font-size: 1.2rem;
+    font-weight: 400;
+    color: #919294;
+}
+
+
+.card .card-content .card-content-f {
+    display: flex;
+    justify-content: center;
+    flex-direction: row;
+}
+.card .card-content .card-content-f .card-stats {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+}
+
+
+.stat-item {
+    margin: 5px 0px 5px 0px;
+    display: flex;
+    flex-direction: row;
+    align-items: start;
+    align-content: start;
+
+    color: #919294;
+}
+.stat-item .stat-icon {
+    margin: 0px 15px 0px 0px;
+    width: 20px;
+    height: 20px;
+    font-size: 1rem;
+
+    display: flex;
+}
+.stat-item span {
+    font-size: 1rem;
+    font-weight: 300;
+    margin: 0;
+    justify-content: left;
+}
+
+.stats-inline {
+    margin: 0;
+    width: 100%;
+    flex-direction: row !important;
+}
+
+.card-languages {
+    padding: 0;
+    margin-top: 25px;
+    margin-bottom: 25px;
+}
+
+/* COMPUTER FORMAT */
+@media only screen and (min-width: 770px) {
+    .card-languages {
+        margin: 0;
+    }
+
+    .card .card-content .card-content-f .card-stats {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+    }
+}

src/app/projects/project-card/project-card.component.html

@@ -0,0 +1,49 @@
+  <div class="card container">
+        <div class="card-content">
+            <div class="card-content-h">
+                <h2 class="card-title">
+                    <a [href]="project.link">{{project.name}}</a>
+                </h2>
+                <p class="card-text">{{project.description}}</p>
+            </div>
+            <div class="card-content-f row">
+                <div class="card-languages col-md-9" *ngIf="hasLanguage" id="language-chart">
+                    <apx-chart *ngIf="chartOptions !== undefined"
+                        [series]="chartOptions.series"
+                        [colors]="chartOptions.colors"
+                        [chart]="chartOptions.chart"
+                        [labels]="chartOptions.labels"
+                        [responsive]="chartOptions.responsive"
+                        [plotOptions]="chartOptions.plotOptions"
+                        [dataLabels]="chartOptions.dataLabels">
+                    </apx-chart>
+                </div>
+                <div class="card-stats" [ngClass]="hasLanguage ? 'col-md-3' : 'stats-inline'">
+                    <div class="stat-item" *ngIf="hasLicense">
+                        <div class="stat-icon">
+                            <fa-icon [icon]="faLicense"></fa-icon>
+                        </div>
+                        <span>{{project.license}}</span>
+                    </div>
+                    <div class="stat-item">
+                        <div class="stat-icon">
+                            <fa-icon [icon]="faStars"></fa-icon>
+                        </div>
+                        <span>{{project.stars}}</span>
+                    </div>
+                    <div class="stat-item">
+                        <div class="stat-icon">
+                            <fa-icon [icon]="faCodeFork"></fa-icon>
+                        </div>
+                        <span>{{project.forks}}</span>
+                    </div>
+                    <div class="stat-item">
+                        <div class="stat-icon">
+                            <fa-icon [icon]="faEye"></fa-icon>
+                        </div>
+                        <span>{{project.watchers}}</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+  </div>

src/app/projects/project-card/project-card.component.ts

@@ -0,0 +1,114 @@
+import {Component, HostListener, Input, OnInit, ViewChild} from '@angular/core';
+import {faCodeFork, faEye, faScaleBalanced, faStar} from '@fortawesome/free-solid-svg-icons';
+import {Language, Project} from "../../shared/model/project/project.model";
+import {
+    ApexChart, ApexDataLabels,
+    ApexNonAxisChartSeries,
+    ApexPlotOptions,
+    ApexResponsive,
+    ChartComponent
+} from "ng-apexcharts";
+
+
+export type ChartOptions = {
+  series: ApexNonAxisChartSeries;
+  colors: string[];
+  chart: ApexChart;
+  responsive: ApexResponsive[];
+  labels: string[];
+  plotOptions: ApexPlotOptions;
+  dataLabels: ApexDataLabels;
+};
+
+@Component({
+    selector: 'app-project-card',
+    templateUrl: './project-card.component.html',
+    styleUrls: ['./project-card.component.css']
+})
+export class ProjectCardComponent implements OnInit {
+    @Input() inverted: boolean = false;
+
+    @Input() project!: Project;
+
+    @ViewChild('language-chart')
+        languageChart: ChartComponent | undefined;
+
+    chartOptions: ChartOptions | undefined;
+
+    // Stats Icons Definitions
+    faLicense = faScaleBalanced;
+
+    faStars = faStar;
+
+    faCodeFork = faCodeFork;
+
+    faEye = faEye;
+
+    private windowResizeTimeout: any;
+
+    ngOnInit() {
+        if (!!this.project.languages) {
+            const windowWidth = window.innerWidth;
+            this.chartOptions = this.generateChart(this.project.languages, windowWidth);
+        }
+
+    }
+
+    @HostListener('window:resize', ['$event'])
+    getScreenSize(event: Event) {
+        clearTimeout(this.windowResizeTimeout);
+
+        this.windowResizeTimeout = setTimeout(() => {
+            if (!this.project.languages) return;
+            this.chartOptions = this.generateChart(
+                this.project.languages, window.innerWidth
+            );
+        }, 100);
+    }
+
+    get hasLicense(): boolean {
+        return this.project.license !== undefined;
+    }
+
+    get hasLanguage(): boolean {
+        return this.project.languages !== undefined &&
+            this.project.languages?.length > 0;
+    }
+
+    private generateChart(languages: Language[], windowWidth: number): ChartOptions {
+        const responsiveWindowWidth = windowWidth >= 530 ?
+            300 : (windowWidth*.8 - 80);
+
+        return {
+            series: languages.map(value => value.percentage),
+            colors: languages.map(value => value.color),
+            chart: {
+                width: 380,
+                type: "donut"
+            },
+            labels: languages.map(value => value.name),
+            responsive: [
+                {
+                    breakpoint: 530,
+                    options: {
+                        chart: {
+                            width: responsiveWindowWidth
+                        },
+                        legend: {
+                            position: "bottom"
+                        }
+                    }
+                }
+            ],
+            plotOptions: {
+                pie: {
+                    expandOnClick: true,
+
+                }
+            },
+            dataLabels: {
+                enabled: false
+            }
+        };
+    }
+}

src/app/projects/projects-router.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule, Routes } from '@angular/router';
+import {ProjectsComponent} from "./projects.component";
+
+const routes: Routes = [
+    {
+        path: '',
+        component: ProjectsComponent
+    },
+];
+
+@NgModule({
+    declarations: [],
+    imports: [CommonModule, RouterModule.forChild(routes)],
+    exports: [RouterModule],
+})
+export class ProjectsRouterModule {}

src/app/projects/projects.component.css

@@ -0,0 +1,8 @@
+app-project-card {
+    display: flex;
+    flex-direction: column;
+    margin-top: 25px;
+}
+app-project-card:last-child {
+    margin-bottom: 25px;
+}

src/app/projects/projects.component.html

@@ -0,0 +1,6 @@
+<div class="container">
+    <div *ngFor="let p of projects; index as i;trackBy: identifyProject">
+        <app-project-card [project]="p" [inverted]="i % 2 !== 0">
+        </app-project-card>
+    </div>
+</div>

src/app/projects/projects.component.ts

@@ -0,0 +1,27 @@
+import {Component, OnInit} from '@angular/core';
+import {GithubService} from "../shared/service/github.service";
+import {Project} from "../shared/model/project/project.model";
+
+@Component({
+    selector: 'app-projects',
+    templateUrl: './projects.component.html',
+    styleUrls: ['./projects.component.css']
+})
+export class ProjectsComponent implements OnInit {
+    projects!: Project[];
+
+    constructor(private githubService: GithubService) {
+    }
+
+    ngOnInit(): void {
+        this.projects = [];
+        this.githubService.getProjects().subscribe((project: Project) => {
+            this.projects.push(project);
+        });
+    }
+
+    identifyProject(index: number, project: Project) {
+        return project.name;
+    }
+
+}

src/app/projects/projects.module.ts

@@ -0,0 +1,25 @@
+import {NgModule} from "@angular/core";
+import {ProjectsComponent} from "./projects.component";
+import {CommonModule, NgOptimizedImage} from "@angular/common";
+import { ProjectCardComponent } from './project-card/project-card.component';
+import {MatIconModule} from "@angular/material/icon";
+import {FontAwesomeModule} from "@fortawesome/angular-fontawesome";
+import {NgApexchartsModule} from "ng-apexcharts";
+import {ProjectsRouterModule} from "./projects-router.module";
+
+@NgModule({
+    declarations: [
+        ProjectsComponent,
+        ProjectCardComponent
+    ],
+    imports: [
+        CommonModule,
+        NgOptimizedImage,
+        MatIconModule,
+        FontAwesomeModule,
+        NgApexchartsModule,
+        ProjectsRouterModule
+    ],
+    exports: []
+})
+export class ProjectsModule { }

src/app/shared/model/project/project.model.ts

@@ -0,0 +1,18 @@
+export type Language = {
+    name: string;
+    color: string;
+    percentage: number;
+}
+
+export type Project = {
+    name: string;
+    description: string;
+    link: string;
+
+    license?: string;
+    languages?: Language[];
+
+    stars: number;
+    forks: number;
+    watchers: number;
+}

src/app/shared/service/auth.service.ts

@@ -2,19 +2,15 @@ import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import {
     first,
-    firstValueFrom,
     map,
     Observable,
     of,
     Subject,
-    take,
-    tap,
 } from 'rxjs';
 import { catchError } from 'rxjs/operators';
 import { environment } from 'src/environments/environment';
 import { HttpError } from '../model/httpError/httpError.model';
 import { User } from '../model/user/user.model';
-import * as http from 'http';
 
 @Injectable({
     providedIn: 'root',

src/app/shared/service/github.service.ts

@@ -0,0 +1,155 @@
+import { Injectable } from '@angular/core';
+import {Language, Project} from "../model/project/project.model";
+import {HttpClient} from "@angular/common/http";
+import {
+    map, mergeMap,
+    Observable,
+    pipe, switchMap, take, tap
+} from 'rxjs';
+import { environment } from 'src/environments/environment';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class GithubService {
+
+    GITHUB_API_URL = 'https://api.github.com';
+
+    GITHUB_API_COLORS = 'https://raw.githubusercontent.com/ozh/github-colors/master/colors.json';
+
+    GITHUB_USER = environment.githubUser;
+
+    colors!: Map<string, string>;
+
+    constructor(private http: HttpClient) {
+        this.getLanguageColor().subscribe((colors: Map<string, string>) => {
+            this.colors = colors;
+        });
+    }
+
+    getProjects(): Observable<Project> {
+        if (this.isLocalStorageValid()) {
+            console.log('Fetching projects from local storage')
+            return this.getProjectsFromLocalStorage();
+        }
+
+        console.log('Fetching projects from Github API')
+        return this.getProjectsFromGithub()
+    }
+
+    private isLocalStorageValid(): boolean {
+        const projects = localStorage.getItem('github-projects');
+        let status = !!projects
+
+        if (!status) {
+            return false;
+        }
+
+        const timestamp = localStorage.getItem('github-projects-timestamp');
+        if (timestamp) {
+            const diff = new Date().getTime() - parseInt(timestamp);
+            status = diff < 86400000;
+        } else {
+            status = false;
+        }
+
+        return status;
+    }
+
+    private saveProjectsToLocalStorage(project: Project) {
+        const p = localStorage.getItem('github-projects');
+        if (p) {
+            const projects = JSON.parse(p);
+            projects.push(project);
+            localStorage.setItem('github-projects', JSON.stringify(projects));
+        } else {
+            localStorage.setItem('github-projects', JSON.stringify([project]));
+        }
+
+        localStorage.setItem('github-projects-timestamp', new Date().getTime().toString());
+    }
+
+    private getProjectsFromLocalStorage(): Observable<Project> {
+        const projects = localStorage.getItem('github-projects') || '[]';
+        return new Observable<Project>((observer) => {
+            JSON.parse(projects).forEach((project: Project) => {
+                observer.next(project);
+            });
+        });
+    }
+
+    private getProjectsFromGithub(): Observable<Project> {
+        return this.http.get(this.apiReposString()).pipe(
+            map((projects: any) => {
+                return projects.map((project: any) => {
+                    return {
+                        name: project.name,
+                        description: project.description,
+                        license: project.license?.key,
+                        link: project.html_url,
+
+                        stars: project.stargazers_count,
+                        forks: project.forks_count,
+                        watchers: project.watchers_count
+                    } as Project;
+                }).filter((project: Project) => {
+                    return project.name !== this.GITHUB_USER;
+                });
+            }),
+            switchMap((projects: Project[]) => {
+                return new Observable<Project>((observer) => {
+                    projects.forEach((project: Project, index: number) => {
+                        this.getProjectLanguage(project).subscribe((languages: Language[]) => {
+                            project.languages = languages;
+                            observer.next(project);
+                        });
+                    });
+                });
+            }),
+            tap((project: Project) => this.saveProjectsToLocalStorage(project))
+        )
+    }
+
+    private getProjectLanguage(project: Project): Observable<Language[]> {
+        return this.http.get(this.apiRepoLanguagesString(project.name)).pipe(
+            map((languages: any) => {
+                let totalBytes = 0;
+                Object.keys(languages).forEach((language: string) => {
+                    totalBytes += languages[language];
+                });
+
+                return Object.keys(languages).map((language: string) => {
+                    return {
+                        name: language,
+                        color: this.colors.get(language) || this.getRandColor(),
+                        percentage: (languages[language]/totalBytes)*100
+                    } as Language;
+                });
+            })
+        );
+    }
+
+    private getLanguageColor(): Observable<Map<string, string>> {
+        return this.http.get(this.GITHUB_API_COLORS).pipe(
+            map((colors: any) => {
+                const colorMap = new Map<string, string>();
+                Object.keys(colors).forEach((language: string) => {
+                    colorMap.set(language, colors[language].color);
+                });
+                return colorMap;
+            })
+        );
+    }
+
+    private getRandColor(): string {
+        return `#${Math.floor(Math.random()*16777215).toString(16)}`;
+    }
+
+    private apiReposString() {
+        return `${this.GITHUB_API_URL}/users/${this.GITHUB_USER}/repos`;
+    }
+
+    private apiRepoLanguagesString(repoName: string) {
+        return `${this.GITHUB_API_URL}/repos/${this.GITHUB_USER}/${repoName}/languages`;
+    }
+}

src/assets/env.sample.js

@@ -4,4 +4,5 @@
     // Environment variables
     window["env"]["BACKEND_URL"] = "${BACKEND_URL}";
     window["env"]["BACKEND_OAUTH_URL"] = "${BACKEND_OAUTH_URL}";
+    window["env"]["GITHUB_USER"] = "${GITHUB_USER}";
 })(this);

src/environments/environment.prod.ts

@@ -2,4 +2,5 @@ export const environment = {
     production: true,
     backendPath: (<any>window)['env']['BACKEND_URL'],
     backendOAuthPath: (<any>window)['env']['BACKEND_OAUTH_URL'],
+    githubUser: (<any>window)['env']['GITHUB_USER'],
 };

src/environments/environment.ts

@@ -6,6 +6,7 @@ export const environment = {
     production: false,
     backendPath: 'http://localhost:8070',
     backendOAuthPath: 'http://localhost:8070',
+    githubUser: 'HideyoshiNakazone',
 };
 
 /*