diff --git a/.github/workflows/main.yml b/.github/workflows/deploy.yml similarity index 79% rename from .github/workflows/main.yml rename to .github/workflows/deploy.yml index d5cdc29..baf1e8d 100644 --- a/.github/workflows/main.yml +++ b/.github/workflows/deploy.yml @@ -29,9 +29,8 @@ jobs: run: npm run build:prod - name: Deploy to GitHub Pages - uses: crazy-max/ghaction-github-pages@v4 - with: - target_branch: gh-pages - build_dir: dist/portfolio + run: + npx angular-cli-ghpages --dir=dist/portfolio --repo=https://github.com/yqni13/portfolio.git --base-href=/portfolio/ --branch=production + env: GH_PAT: ${{ secrets.PORTFOLIO_PAT }} diff --git a/README.md b/README.md index 6c8ba57..8f44503 100644 --- a/README.md +++ b/README.md @@ -1,12 +1,7 @@ # yqni13 portfolio -$\texttt{\color{teal}{v2.5.0}}$ +$\texttt{\color{teal}{v2.5.5}}$ -
-$\texttt{\color{red}{!\ !\ !\ }}$
-Currently deployment via angular-cli-ghpages does NOT work for this portfolio. That is why the deployment is running on the 'production' branch instead of the 'gh-pages' branch, which apparently DOES NOT SUPPORT angular multi page applications. Refreshing the webpage will lead to 404 and homepage must be navigated to https://yqni13.github.io/portfolio again. The new version is build into '/docs' folder (hosting is set to check all necessary files in there) and normally merged into 'production' branch. Please note that I am working on this issue parallel to some security vulnerabilities and updating to Angular 18. -
-$\texttt{\color{red}{!\ !\ !\ }}$

@@ -36,7 +31,12 @@ This project was generated with [Angular CLI](https://github.com/angular/angular Get startet with `npm install` to create necessary modules and run `ng serve` to start on local dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files. ### BUILD & DEPLOY -To host the application on GitHub Pages directly from CLI, install the regarding package via `ng add angular-cli-ghpages`. See list of packages for different hosting platforms deployed by command. Firstly, try the production build locally via command `ng serve --configuration production` to see, if there are differences between development and production build. Run `ng build --configuration production --base-href https://.github.io/` to create a deployable build in the folder /dist. For deployment, run `ng deploy --base-href=//` to push the necessary code automatically and trigger the workflow starting until project on 'https://username.github.io/projectname' is deployed. In contrast to my non-framework projects, the deployment will happen for angular projects on the 'gh-pages' branch due to the CLI-deployment instead of a 'production' branch. +Hosting an Angular project via GitHub-Pages needs a bit more effort. Firstly, install the regarding package via `ng add angular-cli-ghpages`. See list of packages for different hosting platforms deployed by cli. Run tests locally to avoid failed deployments ([see 'Testing'](#testing)). To host the application on GitHub, a customized CI/CD workflow is used which automatically starts when code changes are merged into the 'master' branch. By adding 'deploy.yml' to .github/workflows folder (folder starts from same level as angular.json), the run script will execute tests (ESLint and Angular unit-tests) before building the project and deploying it via angular-cli-ghpages on the predefined 'production' branch. All commands to run are keys in 'deploy.yml' and full commands as value for the keys in 'package.json' to find. +

+build:prod >> `ng build --configuration production --base-href https://.github.com/` +
+deploy >> `npx angular-cli-ghpages --dir=dist/ --repo=https://github.com//.git --base-href=// --branch=production` +

## Features @@ -115,11 +115,21 @@ To optimize work I use the VS Code extension 'ESLint' from Microsoft.
+### Angular unit tests & other tests + +Specified unit tests in xyz.component.spec.ts files or other tests are my last step of testing locally and in the CI/CD workflow. Run the following command in Powershell/Terminal:
+`ng test --browsers=ChromeHeadless --watch=false --code-coverage` + +
+ ## Updates [list of all updates](src/docs/update_protocol.md) -### $\textsf{last\ update\ 2.5.0\ >>\ {\color{pink}2.5.?}}$ +### $\textsf{last\ update\ 2.5.0\ >>\ {\color{pink}2.5.5}}$ +- $\textsf{\color{red}Patch:}$ Addressing webpage stability issues: Disabled error alert because of fixed hosting. +- $\textsf{\color{red}Bugfix:}$ Default unit tests have all necessary declarations and imports. [Before: Template was not recognised as existing component because unit tests were missing the regarding declarations and imports.] +- $\textsf{\color{red}Bugfix:}$ Hosting works again (refreshing does not lead to error 404) and CI/CD pipeline adapted. [Before: Necessary options in deployment command missing. Customized workflow was missing.] - $\textsf{\color{red}Bugfix:}$ Navigating to other page in menu resets scroll to top position (refresh gets back to current scroll position). [Before: Scroll position was used for next page so that it didn't start at top.] - $\textsf{\color{red}Bugfix:}$ The component 'portfolio' shows the correct number of cards with the regarding data. [Before: Due to change of ESLint errors, json data was fetched by import but loaded single objects additional to default collection of objects. Needed adaption in import command to load data only from default.] diff --git a/src/api/json/project-data.json b/src/api/json/project-data.json index 84bc4b9..c11d5a8 100644 --- a/src/api/json/project-data.json +++ b/src/api/json/project-data.json @@ -141,8 +141,8 @@ "Portfolio": { "type": "frontend", "title": "Portfolio", - "version": "2.5.0", - "keywords": "live demo | portfolio | angular framework | english | responsive | custom design | dark/light theme | animation | custom search filter | template | multi page layout | custom alert", + "version": "2.5.5", + "keywords": "live demo | portfolio | angular framework | english | responsive | custom design | dark/light theme | animation | custom search filter | template | multi page layout | custom alert | ESLint | CI/CD Workflow", "technology": "Angular | RxJS | JSON", "cardScreenPath": "assets/img/web_portfolio.jpg", "githublink": "https://github.com/yqni13/portfolio", diff --git a/src/app/app.component.html b/src/app/app.component.html index 9a10f71..283444d 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -30,8 +30,8 @@
  • -

    -current issues-

    +
    # @@ -44,14 +44,14 @@ -
    + diff --git a/src/app/app.component.scss b/src/app/app.component.scss index 7f23098..64646c1 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -129,6 +129,10 @@ ul>:last-child p { font-size: 12px; } +.footer-verification { + cursor: default; +} + /* --- ALERT STYLING --- */ .error-msg-box { diff --git a/src/app/app.component.ts b/src/app/app.component.ts index d0163d1..2c9f207 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -9,11 +9,11 @@ import _ from 'underscore'; }) export class AppComponent implements OnInit { - public version = '2.5.0'; + public version = '2.5.5'; public copyrightYear: number = new Date().getFullYear(); public setDark = ""; public setLight = ""; - public isAccepted = false; + // public isAccepted = false; private mobileNavExpended = false; private collapseNavbarWidth = 768; @@ -29,7 +29,7 @@ export class AppComponent implements OnInit { ngOnInit() { this.checkThemeCookie(); - this.checkAlertCookie(); + // this.checkAlertCookie(); // TODO: disabled unless hotfix necessary this.setNavWidthDynamically(window.screen.width); this.setNavWidthDynamically(document.body.clientWidth); @@ -101,28 +101,28 @@ export class AppComponent implements OnInit { } } - checkAlertCookie() { - const alertCookie = localStorage.getItem("yqni13-alert"); - switch(alertCookie) { - case 'true': - this.isAccepted = true; - break; - case 'false': - this.isAccepted = false; - break; - default: - this.isAccepted = false; - } - } - - openAlertMsg() { - this.isAccepted = false; - } - - closeAlertMsg() { - this.isAccepted = true; - localStorage.setItem('yqni13-alert', 'true'); - } + // checkAlertCookie() { + // const alertCookie = localStorage.getItem("yqni13-alert"); + // switch(alertCookie) { + // case 'true': + // this.isAccepted = true; + // break; + // case 'false': + // this.isAccepted = false; + // break; + // default: + // this.isAccepted = false; + // } + // } + + // openAlertMsg() { + // this.isAccepted = false; + // } + + // closeAlertMsg() { + // this.isAccepted = true; + // localStorage.setItem('yqni13-alert', 'true'); + // } } diff --git a/src/app/cv/cv.component.html b/src/app/cv/cv.component.html index a2ce080..939be3a 100644 --- a/src/app/cv/cv.component.html +++ b/src/app/cv/cv.component.html @@ -1,7 +1,7 @@

    CV.

    - download - cv + download - cv
    @@ -27,36 +27,37 @@

    Technical skills

      -
      • -
      • -
      • -
      • -
      • -
      • -
      • -
      • -
      • -
      • -
      • -
      • -
      • -
      • -
      • -
      • -
      • -
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +

    First Experiences

      -
      • -
      • -
      • -
      • -
      • -
      • -
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
    diff --git a/src/assets/pdf/CV_LukasVarga.pdf b/src/assets/pdf/CV_LukasVarga.pdf new file mode 100644 index 0000000..f7b2f57 Binary files /dev/null and b/src/assets/pdf/CV_LukasVarga.pdf differ diff --git a/src/assets/pdf/Varga_Lebenslauf.pdf b/src/assets/pdf/Varga_Lebenslauf.pdf deleted file mode 100644 index 7c90359..0000000 Binary files a/src/assets/pdf/Varga_Lebenslauf.pdf and /dev/null differ diff --git a/src/docs/update_protocol.md b/src/docs/update_protocol.md index 187c253..d5823f6 100644 --- a/src/docs/update_protocol.md +++ b/src/docs/update_protocol.md @@ -4,40 +4,48 @@
    -### 2024/6/28 - $\textsf{update\ 2.4.3\ >>\ {\color{pink}2.5.0}}$ +### 2024/07/01 - $\textsf{update\ 2.5.0\ >>\ {\color{pink}2.5.5}}$ + +- $\textsf{\color{red}Patch:}$ Addressing webpage stability issues: Disabled error alert because of fixed hosting. +- $\textsf{\color{red}Bugfix:}$ Default unit tests have all necessary declarations and imports. [Before: Template was not recognised as existing component because unit tests were missing the regarding declarations and imports.] +- $\textsf{\color{red}Bugfix:}$ Hosting works again (refreshing does not lead to error 404) and CI/CD pipeline adapted. [Before: Necessary options in deployment command missing. Customized workflow was missing.] +- $\textsf{\color{red}Bugfix:}$ Navigating to other page in menu resets scroll to top position (refresh gets back to current scroll position). [Before: Scroll position was used for next page so that it didn't start at top.] +- $\textsf{\color{red}Bugfix:}$ The component 'portfolio' shows the correct number of cards with the regarding data. [Before: Due to change of ESLint errors, json data was fetched by import but loaded single objects additional to default collection of objects. Needed adaption in import command to load data only from default.] + +### 2024/06/28 - $\textsf{update\ 2.4.3\ >>\ {\color{pink}2.5.0}}$ - $\textsf{\color{green}Change:}$ Added 'angular-eslint' and fixed all lint errors. -### 2024/6/24 - $\textsf{update\ 2.3.2\ >>\ {\color{pink}2.4.3}}$ +### 2024/06/24 - $\textsf{update\ 2.3.2\ >>\ {\color{pink}2.4.3}}$ - $\textsf{\color{green}Change:}$ Upgraded from Angular v17 to Angular v18. - $\textsf{\color{red}Bugfix:}$ Colored text in warning issues have no inherited hover effects. [Before: Text that has used 'span' tags had inherited hover effects from navbar items and misleading styling.] - $\textsf{\color{red}Bugfix:}$ Only the message part from an issue warning has now a background-color and rest of it has blurred effect to see scheme of webpage. [Before: The warning message would cover the complete display and mislead the user to thinking that the webpage would not be working at all.] - $\textsf{\color{red}Bugfix:}$ Clicking on the logo navigates to the 'home' component and closes the unfolded navbar in the mobile version. [Before: The logo was missing logic to close the unfolded navbar in the mobile version, so it navigated to the 'home' component but didn't close.] -### 2024/6/23 - $\textsf{update\ 2.2.2\ >>\ {\color{pink}2.3.2}}$ +### 2024/06/23 - $\textsf{update\ 2.2.2\ >>\ {\color{pink}2.3.2}}$ - $\textsf{\color{green}Change:}$ New issue alert added. Warnings will be shown automatically when webpage is firstly navigated to since a new warning was issued and reading will be saved in local storage. To see if any issue is still ongoing or to re-read the warning, a new menu item '-current issues-' was added to bottom of navigation menu. -### 2024/6/22 - $\textsf{update\ 2.2.1\ >>\ {\color{pink}2.2.2}}$ +### 2024/06/22 - $\textsf{update\ 2.2.1\ >>\ {\color{pink}2.2.2}}$ - $\textsf{\color{teal}Addition:}$ New content added to 'Portfolio' component. - $\textsf{\color{red}Bugfix:}$ An explaining msg is shown if results were empty for searching. [Before: Empty search results did not show anything.] -### 2024/6/22 - $\textsf{update\ 1.3.1\ >>\ {\color{pink}2.2.1}}$ +### 2024/06/22 - $\textsf{update\ 1.3.1\ >>\ {\color{pink}2.2.1}}$ - $\textsf{\color{green}Change:}$ The number for age in 'about' component is now displayed as calculated value. - $\textsf{\color{green}Change:}$ Removed individual portfolio components and implemented template to display portfolio cards via ngFor. - $\textsf{\color{cyan}Change:}$ Portfolio cards/projects can be filtered by type (all/frontend/fullstack/module). Additionally, users can filter by keywords below the type menu. Clicking on magnifier symbol filters data and displays all results containing current keyword. Unless the filter-input is not empty, a red "x" is available to click on and removes keyword and automatically resets filter and displays everything on default settings. - $\textsf{\color{red}Bugfix:}$ Portfolio component is navigated to by pathname 'mywork' in URL. [Before: Pathname for 'portfolio' component was 'portfolio' and misleading due to hosted URL which also ends in 'portfolio' => '...github.io/portfolio/portfolio'.] -### 2024/6/16 - $\textsf{update\ 1.1.2\ >>\ {\color{pink}1.3.1}}$ +### 2024/06/16 - $\textsf{update\ 1.1.2\ >>\ {\color{pink}1.3.1}}$ - $\textsf{\color{green}Change:}$ Navbar in mobile version is displayed on top instead on the left to give more space for the content in smaller viewports. - $\textsf{\color{green}Change:}$ Data binding between components improved. Json data is now handled centralized in portfolio parent component and adapted with project-name as key for the regarding data object for easier maintenance. - $\textsf{\color{red}Bugfix:}$ GitHub link in the projects 'Clock' and 'Rating' from 'Portfolio' component navigate to the regarding repository. [Before: Links were missing and navigating back to Portfolio page.] -### 2024/6/8 - $\textsf{update\ 1.0.0\ >>\ {\color{pink}1.1.2}}$ +### 2024/06/08 - $\textsf{update\ 1.0.0\ >>\ {\color{pink}1.1.2}}$ - $\textsf{\color{teal}Addition:}$ New content added to 'Portfolio' component. - $\textsf{\color{green}Change:}$ Logo in navbar redirects to 'Home' component. diff --git a/src/stylesheets/icons.scss b/src/stylesheets/icons.scss index 1a6ec08..29f0d28 100644 --- a/src/stylesheets/icons.scss +++ b/src/stylesheets/icons.scss @@ -457,4 +457,17 @@ i { mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; +} +.icon-CiCd { + display: inline-block; + width: 30px; + height: 30px; + --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath fill='%23000' d='M23.53 19.81a7.5 7.5 0 0 1-1.65-.18a10.5 10.5 0 0 1 .72 2.13h.93a9.5 9.5 0 0 0 3-.49l-.93-1.81a7.7 7.7 0 0 1-2.07.35m-5.17-1.94l-.36-.38a7.4 7.4 0 0 1-2.2-5.92a7.3 7.3 0 0 1 1.54-4L17.26 9a1 1 0 0 0 .91 1h.09a1 1 0 0 0 1-.91L19.6 5a1 1 0 0 0-.29-.79a1 1 0 0 0-.79-.21l-4.09.35a1 1 0 0 0 .17 2l1.29-.11a9.45 9.45 0 0 0-2.05 5.32a9.28 9.28 0 0 0 2.67 7.26l.31.37a7.33 7.33 0 0 1 2.06 4.91a7.4 7.4 0 0 1-.26 2.47l1.8.91a8.8 8.8 0 0 0 .45-3.51a9.28 9.28 0 0 0-2.51-6.1m14.04.04l-1.21.09a9.65 9.65 0 0 0-7.66-15.55a9.3 9.3 0 0 0-3 .49l.91 1.8a7.67 7.67 0 0 1 9.76 7.39a7.58 7.58 0 0 1-1.65 4.72l.1-1.54a1 1 0 1 0-2-.13l-.28 4.08a1 1 0 0 0 .31.78a.94.94 0 0 0 .69.28h.1l4.08-.42a1 1 0 0 0 .9-1.1a1 1 0 0 0-1.05-.89M4.07 20.44h.08l4.09-.35a1 1 0 1 0-.17-2l-1.39.12a7.63 7.63 0 0 1 4.52-1.49a8 8 0 0 1 1.63.18a10.2 10.2 0 0 1-.71-2.13h-.92a9.66 9.66 0 0 0-5.9 2l.12-1.31a1 1 0 0 0-.92-1.08a1 1 0 0 0-1.08.91l-.35 4.08a1 1 0 0 0 1 1.08Zm14.35 7.79l-4.09.27a1 1 0 0 0 .13 2l1.54-.11a7.71 7.71 0 0 1-12.54-6a7.6 7.6 0 0 1 .29-2L2 21.46a9.6 9.6 0 0 0-.47 2.95A9.7 9.7 0 0 0 17.19 32l-.12 1.18a1 1 0 0 0 .89 1.1h.11a1 1 0 0 0 1-.9l.42-4.06a1 1 0 0 0-1.06-1.1Z'/%3E%3C/svg%3E"); + background-color: currentColor; + -webkit-mask-image: var(--svg); + mask-image: var(--svg); + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-size: 100% 100%; + mask-size: 100% 100%; } \ No newline at end of file