From f1b35033d0ba186a8bc7dbcd2ed525ec8ba01cf1 Mon Sep 17 00:00:00 2001 From: axherrm Date: Fri, 26 Jan 2024 15:44:00 +0100 Subject: [PATCH] feat: add about section --- package-lock.json | 854 +++++++++++++++++- package.json | 3 +- src/app/app.component.html | 12 +- src/app/app.component.scss | 1 + src/app/app.component.ts | 6 +- .../about-card/about-card.component.html | 26 + .../about-card/about-card.component.scss | 116 +++ .../about-card/about-card.component.ts | 40 + src/app/components/badge/badge.component.html | 9 + src/app/components/badge/badge.component.scss | 75 ++ src/app/components/badge/badge.component.ts | 55 ++ .../custom-button.component.html | 4 + .../custom-button.component.scss | 63 ++ .../custom-button/custom-button.component.ts | 18 + .../heading-card/heading-card.component.scss | 2 +- src/app/data/data.service.ts | 6 +- src/app/data/model.ts | 23 +- src/app/js/global.vars.ts | 5 + src/app/sections/about/about.component.html | 23 + src/app/sections/about/about.component.scss | 14 + src/app/sections/about/about.component.ts | 33 + src/assets/svg/angular.svg | 16 + src/assets/svg/gsap.svg | 1 + src/assets/svg/lenis.svg | 1 + src/assets/svg/primeng.svg | 19 + src/data/about.json | 12 + src/data/general.json | 6 + src/styles.scss | 3 +- tsconfig.json | 1 + 29 files changed, 1418 insertions(+), 29 deletions(-) create mode 100644 src/app/components/about-card/about-card.component.html create mode 100644 src/app/components/about-card/about-card.component.scss create mode 100644 src/app/components/about-card/about-card.component.ts create mode 100644 src/app/components/badge/badge.component.html create mode 100644 src/app/components/badge/badge.component.scss create mode 100644 src/app/components/badge/badge.component.ts create mode 100644 src/app/components/custom-button/custom-button.component.html create mode 100644 src/app/components/custom-button/custom-button.component.scss create mode 100644 src/app/components/custom-button/custom-button.component.ts create mode 100644 src/app/js/global.vars.ts create mode 100644 src/app/sections/about/about.component.html create mode 100644 src/app/sections/about/about.component.scss create mode 100644 src/app/sections/about/about.component.ts create mode 100644 src/assets/svg/angular.svg create mode 100644 src/assets/svg/gsap.svg create mode 100644 src/assets/svg/lenis.svg create mode 100644 src/assets/svg/primeng.svg create mode 100644 src/data/about.json diff --git a/package-lock.json b/package-lock.json index 696239f..1e79b4f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,17 +1,18 @@ { "name": "cv", - "version": "0.0.0", + "version": "0.1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "cv", - "version": "0.0.0", + "version": "0.1", "dependencies": { "@angular/common": "^17.0.7", "@angular/compiler": "^17.0.7", "@angular/core": "^17.0.7", "@angular/forms": "^17.0.7", + "@angular/material": "^17.0.7", "@angular/platform-browser": "^17.0.7", "@angular/platform-browser-dynamic": "^17.0.7", "@angular/router": "^17.0.7", @@ -257,7 +258,6 @@ "version": "17.0.7", "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-17.0.7.tgz", "integrity": "sha512-IjZjPGMxvi2a9o7fzjwNO44FvhTZlVSgcPtqM6Glq0+WVeQcnZxf1Onj68M/FGx2AunS8elRbrgPxTexVeSo7A==", - "optional": true, "peer": true, "dependencies": { "tslib": "^2.3.0" @@ -269,6 +269,23 @@ "@angular/core": "17.0.7" } }, + "node_modules/@angular/cdk": { + "version": "17.1.0", + "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-17.1.0.tgz", + "integrity": "sha512-a2+uqr1s2pCStFs78BM1ViVqi0GnxFHGKHo58hiR9pDV/pyg9cvy+d+rsci1HkuF9AC/UqV5Y6rGLfwayO183g==", + "peer": true, + "dependencies": { + "tslib": "^2.3.0" + }, + "optionalDependencies": { + "parse5": "^7.1.2" + }, + "peerDependencies": { + "@angular/common": "^17.0.0 || ^18.0.0", + "@angular/core": "^17.0.0 || ^18.0.0", + "rxjs": "^6.5.3 || ^7.4.0" + } + }, "node_modules/@angular/cli": { "version": "17.0.7", "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-17.0.7.tgz", @@ -397,6 +414,70 @@ "rxjs": "^6.5.3 || ^7.4.0" } }, + "node_modules/@angular/material": { + "version": "17.1.0", + "resolved": "https://registry.npmjs.org/@angular/material/-/material-17.1.0.tgz", + "integrity": "sha512-PzHTXAHuap4K7fteQhpR5+BCLV3jSpT9mhaN9evDGYqXS6iMcEX/9RBR7jVqtW2/5pnDopUioBc7pf0JWWI4JA==", + "dependencies": { + "@material/animation": "15.0.0-canary.7f224ddd4.0", + "@material/auto-init": "15.0.0-canary.7f224ddd4.0", + "@material/banner": "15.0.0-canary.7f224ddd4.0", + "@material/base": "15.0.0-canary.7f224ddd4.0", + "@material/button": "15.0.0-canary.7f224ddd4.0", + "@material/card": "15.0.0-canary.7f224ddd4.0", + "@material/checkbox": "15.0.0-canary.7f224ddd4.0", + "@material/chips": "15.0.0-canary.7f224ddd4.0", + "@material/circular-progress": "15.0.0-canary.7f224ddd4.0", + "@material/data-table": "15.0.0-canary.7f224ddd4.0", + "@material/density": "15.0.0-canary.7f224ddd4.0", + "@material/dialog": "15.0.0-canary.7f224ddd4.0", + "@material/dom": "15.0.0-canary.7f224ddd4.0", + "@material/drawer": "15.0.0-canary.7f224ddd4.0", + "@material/elevation": "15.0.0-canary.7f224ddd4.0", + "@material/fab": "15.0.0-canary.7f224ddd4.0", + "@material/feature-targeting": "15.0.0-canary.7f224ddd4.0", + "@material/floating-label": "15.0.0-canary.7f224ddd4.0", + "@material/form-field": "15.0.0-canary.7f224ddd4.0", + "@material/icon-button": "15.0.0-canary.7f224ddd4.0", + "@material/image-list": "15.0.0-canary.7f224ddd4.0", + "@material/layout-grid": "15.0.0-canary.7f224ddd4.0", + "@material/line-ripple": "15.0.0-canary.7f224ddd4.0", + "@material/linear-progress": "15.0.0-canary.7f224ddd4.0", + "@material/list": "15.0.0-canary.7f224ddd4.0", + "@material/menu": "15.0.0-canary.7f224ddd4.0", + "@material/menu-surface": "15.0.0-canary.7f224ddd4.0", + "@material/notched-outline": "15.0.0-canary.7f224ddd4.0", + "@material/radio": "15.0.0-canary.7f224ddd4.0", + "@material/ripple": "15.0.0-canary.7f224ddd4.0", + "@material/rtl": "15.0.0-canary.7f224ddd4.0", + "@material/segmented-button": "15.0.0-canary.7f224ddd4.0", + "@material/select": "15.0.0-canary.7f224ddd4.0", + "@material/shape": "15.0.0-canary.7f224ddd4.0", + "@material/slider": "15.0.0-canary.7f224ddd4.0", + "@material/snackbar": "15.0.0-canary.7f224ddd4.0", + "@material/switch": "15.0.0-canary.7f224ddd4.0", + "@material/tab": "15.0.0-canary.7f224ddd4.0", + "@material/tab-bar": "15.0.0-canary.7f224ddd4.0", + "@material/tab-indicator": "15.0.0-canary.7f224ddd4.0", + "@material/tab-scroller": "15.0.0-canary.7f224ddd4.0", + "@material/textfield": "15.0.0-canary.7f224ddd4.0", + "@material/theme": "15.0.0-canary.7f224ddd4.0", + "@material/tooltip": "15.0.0-canary.7f224ddd4.0", + "@material/top-app-bar": "15.0.0-canary.7f224ddd4.0", + "@material/touch-target": "15.0.0-canary.7f224ddd4.0", + "@material/typography": "15.0.0-canary.7f224ddd4.0", + "tslib": "^2.3.0" + }, + "peerDependencies": { + "@angular/animations": "^17.0.0 || ^18.0.0", + "@angular/cdk": "17.1.0", + "@angular/common": "^17.0.0 || ^18.0.0", + "@angular/core": "^17.0.0 || ^18.0.0", + "@angular/forms": "^17.0.0 || ^18.0.0", + "@angular/platform-browser": "^17.0.0 || ^18.0.0", + "rxjs": "^6.5.3 || ^7.4.0" + } + }, "node_modules/@angular/platform-browser": { "version": "17.0.7", "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-17.0.7.tgz", @@ -2768,6 +2849,758 @@ "node": ">= 0.4" } }, + "node_modules/@material/animation": { + "version": "15.0.0-canary.7f224ddd4.0", + "resolved": "https://registry.npmjs.org/@material/animation/-/animation-15.0.0-canary.7f224ddd4.0.tgz", + "integrity": "sha512-1GSJaPKef+7HRuV+HusVZHps64cmZuOItDbt40tjJVaikcaZvwmHlcTxRIqzcRoCdt5ZKHh3NoO7GB9Khg4Jnw==", + "dependencies": { + "tslib": "^2.1.0" + } + }, + "node_modules/@material/auto-init": { + "version": "15.0.0-canary.7f224ddd4.0", + "resolved": "https://registry.npmjs.org/@material/auto-init/-/auto-init-15.0.0-canary.7f224ddd4.0.tgz", + "integrity": "sha512-t7ZGpRJ3ec0QDUO0nJu/SMgLW7qcuG2KqIsEYD1Ej8qhI2xpdR2ydSDQOkVEitXmKoGol1oq4nYSBjTlB65GqA==", + "dependencies": { + "@material/base": "15.0.0-canary.7f224ddd4.0", + "tslib": "^2.1.0" + } + }, + "node_modules/@material/banner": { + "version": "15.0.0-canary.7f224ddd4.0", + "resolved": "https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.7f224ddd4.0.tgz", + "integrity": "sha512-g9wBUZzYBizyBcBQXTIafnRUUPi7efU9gPJfzeGgkynXiccP/vh5XMmH+PBxl5v+4MlP/d4cZ2NUYoAN7UTqSA==", + "dependencies": { + "@material/base": "15.0.0-canary.7f224ddd4.0", + "@material/button": "15.0.0-canary.7f224ddd4.0", + "@material/dom": "15.0.0-canary.7f224ddd4.0", + "@material/elevation": "15.0.0-canary.7f224ddd4.0", + "@material/feature-targeting": "15.0.0-canary.7f224ddd4.0", + "@material/ripple": "15.0.0-canary.7f224ddd4.0", + "@material/rtl": "15.0.0-canary.7f224ddd4.0", + "@material/shape": "15.0.0-canary.7f224ddd4.0", + "@material/theme": "15.0.0-canary.7f224ddd4.0", + "@material/tokens": "15.0.0-canary.7f224ddd4.0", + "@material/typography": "15.0.0-canary.7f224ddd4.0", + "tslib": "^2.1.0" + } + }, + "node_modules/@material/base": { + "version": "15.0.0-canary.7f224ddd4.0", + "resolved": "https://registry.npmjs.org/@material/base/-/base-15.0.0-canary.7f224ddd4.0.tgz", + "integrity": "sha512-I9KQOKXpLfJkP8MqZyr8wZIzdPHrwPjFvGd9zSK91/vPyE4hzHRJc/0njsh9g8Lm9PRYLbifXX+719uTbHxx+A==", + "dependencies": { + "tslib": "^2.1.0" + } + }, + "node_modules/@material/button": { + "version": "15.0.0-canary.7f224ddd4.0", + "resolved": "https://registry.npmjs.org/@material/button/-/button-15.0.0-canary.7f224ddd4.0.tgz", + "integrity": "sha512-BHB7iyHgRVH+JF16+iscR+Qaic+p7LU1FOLgP8KucRlpF9tTwIxQA6mJwGRi5gUtcG+vyCmzVS+hIQ6DqT/7BA==", + "dependencies": { + "@material/density": "15.0.0-canary.7f224ddd4.0", + "@material/dom": "15.0.0-canary.7f224ddd4.0", + "@material/elevation": "15.0.0-canary.7f224ddd4.0", + "@material/feature-targeting": "15.0.0-canary.7f224ddd4.0", + "@material/focus-ring": "15.0.0-canary.7f224ddd4.0", + "@material/ripple": "15.0.0-canary.7f224ddd4.0", + "@material/rtl": "15.0.0-canary.7f224ddd4.0", + "@material/shape": "15.0.0-canary.7f224ddd4.0", + "@material/theme": "15.0.0-canary.7f224ddd4.0", + "@material/tokens": "15.0.0-canary.7f224ddd4.0", + "@material/touch-target": "15.0.0-canary.7f224ddd4.0", + "@material/typography": "15.0.0-canary.7f224ddd4.0", + "tslib": "^2.1.0" + } + }, + "node_modules/@material/card": { + "version": "15.0.0-canary.7f224ddd4.0", + "resolved": "https://registry.npmjs.org/@material/card/-/card-15.0.0-canary.7f224ddd4.0.tgz", + "integrity": "sha512-kt7y9/IWOtJTr3Z/AoWJT3ZLN7CLlzXhx2udCLP9ootZU2bfGK0lzNwmo80bv/pJfrY9ihQKCtuGTtNxUy+vIw==", + "dependencies": { + "@material/dom": "15.0.0-canary.7f224ddd4.0", + "@material/elevation": "15.0.0-canary.7f224ddd4.0", + "@material/feature-targeting": "15.0.0-canary.7f224ddd4.0", + "@material/ripple": "15.0.0-canary.7f224ddd4.0", + "@material/rtl": "15.0.0-canary.7f224ddd4.0", + "@material/shape": "15.0.0-canary.7f224ddd4.0", + "@material/theme": "15.0.0-canary.7f224ddd4.0", + "@material/tokens": "15.0.0-canary.7f224ddd4.0", + "tslib": "^2.1.0" + } + }, + "node_modules/@material/checkbox": { + "version": "15.0.0-canary.7f224ddd4.0", + "resolved": "https://registry.npmjs.org/@material/checkbox/-/checkbox-15.0.0-canary.7f224ddd4.0.tgz", + "integrity": "sha512-rURcrL5O1u6hzWR+dNgiQ/n89vk6tdmdP3mZgnxJx61q4I/k1yijKqNJSLrkXH7Rto3bM5NRKMOlgvMvVd7UMQ==", + "dependencies": { + "@material/animation": "15.0.0-canary.7f224ddd4.0", + "@material/base": "15.0.0-canary.7f224ddd4.0", + "@material/density": "15.0.0-canary.7f224ddd4.0", + "@material/dom": "15.0.0-canary.7f224ddd4.0", + "@material/feature-targeting": "15.0.0-canary.7f224ddd4.0", + "@material/focus-ring": "15.0.0-canary.7f224ddd4.0", + "@material/ripple": "15.0.0-canary.7f224ddd4.0", + "@material/rtl": "15.0.0-canary.7f224ddd4.0", + "@material/theme": "15.0.0-canary.7f224ddd4.0", + "@material/touch-target": "15.0.0-canary.7f224ddd4.0", + "tslib": "^2.1.0" + } + }, + "node_modules/@material/chips": { + "version": "15.0.0-canary.7f224ddd4.0", + "resolved": "https://registry.npmjs.org/@material/chips/-/chips-15.0.0-canary.7f224ddd4.0.tgz", + "integrity": "sha512-AYAivV3GSk/T/nRIpH27sOHFPaSMrE3L0WYbnb5Wa93FgY8a0fbsFYtSH2QmtwnzXveg+B1zGTt7/xIIcynKdQ==", + "dependencies": { + "@material/animation": "15.0.0-canary.7f224ddd4.0", + "@material/base": "15.0.0-canary.7f224ddd4.0", + "@material/checkbox": "15.0.0-canary.7f224ddd4.0", + "@material/density": "15.0.0-canary.7f224ddd4.0", + "@material/dom": "15.0.0-canary.7f224ddd4.0", + "@material/elevation": "15.0.0-canary.7f224ddd4.0", + "@material/feature-targeting": "15.0.0-canary.7f224ddd4.0", + "@material/focus-ring": "15.0.0-canary.7f224ddd4.0", + "@material/ripple": "15.0.0-canary.7f224ddd4.0", + "@material/rtl": "15.0.0-canary.7f224ddd4.0", + "@material/shape": "15.0.0-canary.7f224ddd4.0", + "@material/theme": "15.0.0-canary.7f224ddd4.0", + "@material/tokens": "15.0.0-canary.7f224ddd4.0", + "@material/touch-target": "15.0.0-canary.7f224ddd4.0", + "@material/typography": "15.0.0-canary.7f224ddd4.0", + "safevalues": "^0.3.4", + "tslib": "^2.1.0" + } + }, + "node_modules/@material/circular-progress": { + "version": "15.0.0-canary.7f224ddd4.0", + "resolved": "https://registry.npmjs.org/@material/circular-progress/-/circular-progress-15.0.0-canary.7f224ddd4.0.tgz", + "integrity": "sha512-DJrqCKb+LuGtjNvKl8XigvyK02y36GRkfhMUYTcJEi3PrOE00bwXtyj7ilhzEVshQiXg6AHGWXtf5UqwNrx3Ow==", + "dependencies": { + "@material/animation": "15.0.0-canary.7f224ddd4.0", + "@material/base": "15.0.0-canary.7f224ddd4.0", + "@material/dom": "15.0.0-canary.7f224ddd4.0", + "@material/feature-targeting": "15.0.0-canary.7f224ddd4.0", + "@material/progress-indicator": "15.0.0-canary.7f224ddd4.0", + "@material/rtl": "15.0.0-canary.7f224ddd4.0", + "@material/theme": "15.0.0-canary.7f224ddd4.0", + "tslib": "^2.1.0" + } + }, + "node_modules/@material/data-table": { + "version": "15.0.0-canary.7f224ddd4.0", + "resolved": "https://registry.npmjs.org/@material/data-table/-/data-table-15.0.0-canary.7f224ddd4.0.tgz", + "integrity": "sha512-/2WZsuBIq9z9RWYF5Jo6b7P6u0fwit+29/mN7rmAZ6akqUR54nXyNfoSNiyydMkzPlZZsep5KrSHododDhBZbA==", + "dependencies": { + "@material/animation": "15.0.0-canary.7f224ddd4.0", + "@material/base": "15.0.0-canary.7f224ddd4.0", + "@material/checkbox": "15.0.0-canary.7f224ddd4.0", + "@material/density": "15.0.0-canary.7f224ddd4.0", + "@material/dom": "15.0.0-canary.7f224ddd4.0", + "@material/elevation": "15.0.0-canary.7f224ddd4.0", + "@material/feature-targeting": "15.0.0-canary.7f224ddd4.0", + "@material/icon-button": "15.0.0-canary.7f224ddd4.0", + "@material/linear-progress": "15.0.0-canary.7f224ddd4.0", + "@material/list": "15.0.0-canary.7f224ddd4.0", + "@material/menu": "15.0.0-canary.7f224ddd4.0", + "@material/rtl": "15.0.0-canary.7f224ddd4.0", + "@material/select": "15.0.0-canary.7f224ddd4.0", + "@material/shape": "15.0.0-canary.7f224ddd4.0", + "@material/theme": "15.0.0-canary.7f224ddd4.0", + "@material/tokens": "15.0.0-canary.7f224ddd4.0", + "@material/touch-target": "15.0.0-canary.7f224ddd4.0", + "@material/typography": "15.0.0-canary.7f224ddd4.0", + "tslib": "^2.1.0" + } + }, + "node_modules/@material/density": { + "version": "15.0.0-canary.7f224ddd4.0", + "resolved": "https://registry.npmjs.org/@material/density/-/density-15.0.0-canary.7f224ddd4.0.tgz", + "integrity": "sha512-o9EXmGKVpiQ6mHhyV3oDDzc78Ow3E7v8dlaOhgaDSXgmqaE8v5sIlLNa/LKSyUga83/fpGk3QViSGXotpQx0jA==", + "dependencies": { + "tslib": "^2.1.0" + } + }, + "node_modules/@material/dialog": { + "version": "15.0.0-canary.7f224ddd4.0", + "resolved": "https://registry.npmjs.org/@material/dialog/-/dialog-15.0.0-canary.7f224ddd4.0.tgz", + "integrity": "sha512-u0XpTlv1JqWC/bQ3DavJ1JguofTelLT2wloj59l3/1b60jv42JQ6Am7jU3I8/SIUB1MKaW7dYocXjDWtWJakLA==", + "dependencies": { + "@material/animation": "15.0.0-canary.7f224ddd4.0", + "@material/base": "15.0.0-canary.7f224ddd4.0", + "@material/button": "15.0.0-canary.7f224ddd4.0", + "@material/dom": "15.0.0-canary.7f224ddd4.0", + "@material/elevation": "15.0.0-canary.7f224ddd4.0", + "@material/feature-targeting": "15.0.0-canary.7f224ddd4.0", + "@material/icon-button": "15.0.0-canary.7f224ddd4.0", + "@material/ripple": "15.0.0-canary.7f224ddd4.0", + "@material/rtl": "15.0.0-canary.7f224ddd4.0", + "@material/shape": "15.0.0-canary.7f224ddd4.0", + "@material/theme": "15.0.0-canary.7f224ddd4.0", + "@material/tokens": "15.0.0-canary.7f224ddd4.0", + "@material/touch-target": "15.0.0-canary.7f224ddd4.0", + "@material/typography": "15.0.0-canary.7f224ddd4.0", + "tslib": "^2.1.0" + } + }, + "node_modules/@material/dom": { + "version": "15.0.0-canary.7f224ddd4.0", + "resolved": "https://registry.npmjs.org/@material/dom/-/dom-15.0.0-canary.7f224ddd4.0.tgz", + "integrity": "sha512-mQ1HT186GPQSkRg5S18i70typ5ZytfjL09R0gJ2Qg5/G+MLCGi7TAjZZSH65tuD/QGOjel4rDdWOTmYbPYV6HA==", + "dependencies": { + "@material/feature-targeting": "15.0.0-canary.7f224ddd4.0", + "@material/rtl": "15.0.0-canary.7f224ddd4.0", + "tslib": "^2.1.0" + } + }, + "node_modules/@material/drawer": { + "version": "15.0.0-canary.7f224ddd4.0", + "resolved": "https://registry.npmjs.org/@material/drawer/-/drawer-15.0.0-canary.7f224ddd4.0.tgz", + "integrity": "sha512-qyO0W0KBftfH8dlLR0gVAgv7ZHNvU8ae11Ao6zJif/YxcvK4+gph1z8AO4H410YmC2kZiwpSKyxM1iQCCzbb4g==", + "dependencies": { + "@material/animation": "15.0.0-canary.7f224ddd4.0", + "@material/base": "15.0.0-canary.7f224ddd4.0", + "@material/dom": "15.0.0-canary.7f224ddd4.0", + "@material/elevation": "15.0.0-canary.7f224ddd4.0", + "@material/feature-targeting": "15.0.0-canary.7f224ddd4.0", + "@material/list": "15.0.0-canary.7f224ddd4.0", + "@material/ripple": "15.0.0-canary.7f224ddd4.0", + "@material/rtl": "15.0.0-canary.7f224ddd4.0", + "@material/shape": "15.0.0-canary.7f224ddd4.0", + "@material/theme": "15.0.0-canary.7f224ddd4.0", + "@material/typography": "15.0.0-canary.7f224ddd4.0", + "tslib": "^2.1.0" + } + }, + "node_modules/@material/elevation": { + "version": "15.0.0-canary.7f224ddd4.0", + "resolved": "https://registry.npmjs.org/@material/elevation/-/elevation-15.0.0-canary.7f224ddd4.0.tgz", + "integrity": "sha512-tV6s4/pUBECedaI36Yj18KmRCk1vfue/JP/5yYRlFNnLMRVISePbZaKkn/BHXVf+26I3W879+XqIGlDVdmOoMA==", + "dependencies": { + "@material/animation": "15.0.0-canary.7f224ddd4.0", + "@material/base": "15.0.0-canary.7f224ddd4.0", + "@material/feature-targeting": "15.0.0-canary.7f224ddd4.0", + "@material/rtl": "15.0.0-canary.7f224ddd4.0", + "@material/theme": "15.0.0-canary.7f224ddd4.0", + "tslib": "^2.1.0" + } + }, + "node_modules/@material/fab": { + "version": "15.0.0-canary.7f224ddd4.0", + "resolved": "https://registry.npmjs.org/@material/fab/-/fab-15.0.0-canary.7f224ddd4.0.tgz", + "integrity": "sha512-4h76QrzfZTcPdd+awDPZ4Q0YdSqsXQnS540TPtyXUJ/5G99V6VwGpjMPIxAsW0y+pmI9UkLL/srrMaJec+7r4Q==", + "dependencies": { + "@material/animation": "15.0.0-canary.7f224ddd4.0", + "@material/dom": "15.0.0-canary.7f224ddd4.0", + "@material/elevation": "15.0.0-canary.7f224ddd4.0", + "@material/feature-targeting": "15.0.0-canary.7f224ddd4.0", + "@material/focus-ring": "15.0.0-canary.7f224ddd4.0", + "@material/ripple": "15.0.0-canary.7f224ddd4.0", + "@material/rtl": "15.0.0-canary.7f224ddd4.0", + "@material/shape": "15.0.0-canary.7f224ddd4.0", + "@material/theme": "15.0.0-canary.7f224ddd4.0", + "@material/tokens": "15.0.0-canary.7f224ddd4.0", + "@material/touch-target": "15.0.0-canary.7f224ddd4.0", + "@material/typography": "15.0.0-canary.7f224ddd4.0", + "tslib": "^2.1.0" + } + }, + "node_modules/@material/feature-targeting": { + "version": "15.0.0-canary.7f224ddd4.0", + "resolved": "https://registry.npmjs.org/@material/feature-targeting/-/feature-targeting-15.0.0-canary.7f224ddd4.0.tgz", + "integrity": "sha512-SAjtxYh6YlKZriU83diDEQ7jNSP2MnxKsER0TvFeyG1vX/DWsUyYDOIJTOEa9K1N+fgJEBkNK8hY55QhQaspew==", + "dependencies": { + "tslib": "^2.1.0" + } + }, + "node_modules/@material/floating-label": { + "version": "15.0.0-canary.7f224ddd4.0", + "resolved": "https://registry.npmjs.org/@material/floating-label/-/floating-label-15.0.0-canary.7f224ddd4.0.tgz", + "integrity": "sha512-0KMo5ijjYaEHPiZ2pCVIcbaTS2LycvH9zEhEMKwPPGssBCX7iz5ffYQFk7e5yrQand1r3jnQQgYfHAwtykArnQ==", + "dependencies": { + "@material/animation": "15.0.0-canary.7f224ddd4.0", + "@material/base": "15.0.0-canary.7f224ddd4.0", + "@material/dom": "15.0.0-canary.7f224ddd4.0", + "@material/feature-targeting": "15.0.0-canary.7f224ddd4.0", + "@material/rtl": "15.0.0-canary.7f224ddd4.0", + "@material/theme": "15.0.0-canary.7f224ddd4.0", + "@material/typography": "15.0.0-canary.7f224ddd4.0", + "tslib": "^2.1.0" + } + }, + "node_modules/@material/focus-ring": { + "version": "15.0.0-canary.7f224ddd4.0", + "resolved": "https://registry.npmjs.org/@material/focus-ring/-/focus-ring-15.0.0-canary.7f224ddd4.0.tgz", + "integrity": "sha512-Jmg1nltq4J6S6A10EGMZnvufrvU3YTi+8R8ZD9lkSbun0Fm2TVdICQt/Auyi6An9zP66oQN6c31eqO6KfIPsDg==", + "dependencies": { + "@material/dom": "15.0.0-canary.7f224ddd4.0", + "@material/feature-targeting": "15.0.0-canary.7f224ddd4.0", + "@material/rtl": "15.0.0-canary.7f224ddd4.0" + } + }, + "node_modules/@material/form-field": { + "version": "15.0.0-canary.7f224ddd4.0", + "resolved": "https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.7f224ddd4.0.tgz", + "integrity": "sha512-fEPWgDQEPJ6WF7hNnIStxucHR9LE4DoDSMqCsGWS2Yu+NLZYLuCEecgR0UqQsl1EQdNRaFh8VH93KuxGd2hiPg==", + "dependencies": { + "@material/base": "15.0.0-canary.7f224ddd4.0", + "@material/feature-targeting": "15.0.0-canary.7f224ddd4.0", + "@material/ripple": "15.0.0-canary.7f224ddd4.0", + "@material/rtl": "15.0.0-canary.7f224ddd4.0", + "@material/theme": "15.0.0-canary.7f224ddd4.0", + "@material/typography": "15.0.0-canary.7f224ddd4.0", + "tslib": "^2.1.0" + } + }, + "node_modules/@material/icon-button": { + "version": "15.0.0-canary.7f224ddd4.0", + "resolved": "https://registry.npmjs.org/@material/icon-button/-/icon-button-15.0.0-canary.7f224ddd4.0.tgz", + "integrity": "sha512-DcK7IL4ICY/DW+48YQZZs9g0U1kRaW0Wb0BxhvppDMYziHo/CTpFdle4gjyuTyRxPOdHQz5a97ru48Z9O4muTw==", + "dependencies": { + "@material/base": "15.0.0-canary.7f224ddd4.0", + "@material/density": "15.0.0-canary.7f224ddd4.0", + "@material/dom": "15.0.0-canary.7f224ddd4.0", + "@material/elevation": "15.0.0-canary.7f224ddd4.0", + "@material/feature-targeting": "15.0.0-canary.7f224ddd4.0", + "@material/focus-ring": "15.0.0-canary.7f224ddd4.0", + "@material/ripple": "15.0.0-canary.7f224ddd4.0", + "@material/rtl": "15.0.0-canary.7f224ddd4.0", + "@material/theme": "15.0.0-canary.7f224ddd4.0", + "@material/touch-target": "15.0.0-canary.7f224ddd4.0", + "tslib": "^2.1.0" + } + }, + "node_modules/@material/image-list": { + "version": "15.0.0-canary.7f224ddd4.0", + "resolved": "https://registry.npmjs.org/@material/image-list/-/image-list-15.0.0-canary.7f224ddd4.0.tgz", + "integrity": "sha512-voMjG2p80XbjL1B2lmF65zO5gEgJOVKClLdqh4wbYzYfwY/SR9c8eLvlYG7DLdFaFBl/7gGxD8TvvZ329HUFPw==", + "dependencies": { + "@material/feature-targeting": "15.0.0-canary.7f224ddd4.0", + "@material/shape": "15.0.0-canary.7f224ddd4.0", + "@material/theme": "15.0.0-canary.7f224ddd4.0", + "@material/typography": "15.0.0-canary.7f224ddd4.0", + "tslib": "^2.1.0" + } + }, + "node_modules/@material/layout-grid": { + "version": "15.0.0-canary.7f224ddd4.0", + "resolved": "https://registry.npmjs.org/@material/layout-grid/-/layout-grid-15.0.0-canary.7f224ddd4.0.tgz", + "integrity": "sha512-veDABLxMn2RmvfnUO2RUmC1OFfWr4cU+MrxKPoDD2hl3l3eDYv5fxws6r5T1JoSyXoaN+oEZpheS0+M9Ure8Pg==", + "dependencies": { + "tslib": "^2.1.0" + } + }, + "node_modules/@material/line-ripple": { + "version": "15.0.0-canary.7f224ddd4.0", + "resolved": "https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.7f224ddd4.0.tgz", + "integrity": "sha512-f60hVJhIU6I3/17Tqqzch1emUKEcfVVgHVqADbU14JD+oEIz429ZX9ksZ3VChoU3+eejFl+jVdZMLE/LrAuwpg==", + "dependencies": { + "@material/animation": "15.0.0-canary.7f224ddd4.0", + "@material/base": "15.0.0-canary.7f224ddd4.0", + "@material/feature-targeting": "15.0.0-canary.7f224ddd4.0", + "@material/theme": "15.0.0-canary.7f224ddd4.0", + "tslib": "^2.1.0" + } + }, + "node_modules/@material/linear-progress": { + "version": "15.0.0-canary.7f224ddd4.0", + "resolved": "https://registry.npmjs.org/@material/linear-progress/-/linear-progress-15.0.0-canary.7f224ddd4.0.tgz", + "integrity": "sha512-pRDEwPQielDiC9Sc5XhCXrGxP8wWOnAO8sQlMebfBYHYqy5hhiIzibezS8CSaW4MFQFyXmCmpmqWlbqGYRmiyg==", + "dependencies": { + "@material/animation": "15.0.0-canary.7f224ddd4.0", + "@material/base": "15.0.0-canary.7f224ddd4.0", + "@material/dom": "15.0.0-canary.7f224ddd4.0", + "@material/feature-targeting": "15.0.0-canary.7f224ddd4.0", + "@material/progress-indicator": "15.0.0-canary.7f224ddd4.0", + "@material/rtl": "15.0.0-canary.7f224ddd4.0", + "@material/theme": "15.0.0-canary.7f224ddd4.0", + "tslib": "^2.1.0" + } + }, + "node_modules/@material/list": { + "version": "15.0.0-canary.7f224ddd4.0", + "resolved": "https://registry.npmjs.org/@material/list/-/list-15.0.0-canary.7f224ddd4.0.tgz", + "integrity": "sha512-Is0NV91sJlXF5pOebYAtWLF4wU2MJDbYqztML/zQNENkQxDOvEXu3nWNb3YScMIYJJXvARO0Liur5K4yPagS1Q==", + "dependencies": { + "@material/base": "15.0.0-canary.7f224ddd4.0", + "@material/density": "15.0.0-canary.7f224ddd4.0", + "@material/dom": "15.0.0-canary.7f224ddd4.0", + "@material/feature-targeting": "15.0.0-canary.7f224ddd4.0", + "@material/ripple": "15.0.0-canary.7f224ddd4.0", + "@material/rtl": "15.0.0-canary.7f224ddd4.0", + "@material/shape": "15.0.0-canary.7f224ddd4.0", + "@material/theme": "15.0.0-canary.7f224ddd4.0", + "@material/tokens": "15.0.0-canary.7f224ddd4.0", + "@material/typography": "15.0.0-canary.7f224ddd4.0", + "tslib": "^2.1.0" + } + }, + "node_modules/@material/menu": { + "version": "15.0.0-canary.7f224ddd4.0", + "resolved": "https://registry.npmjs.org/@material/menu/-/menu-15.0.0-canary.7f224ddd4.0.tgz", + "integrity": "sha512-D11QU1dXqLbh5X1zKlEhS3QWh0b5BPNXlafc5MXfkdJHhOiieb7LC9hMJhbrHtj24FadJ7evaFW/T2ugJbJNnQ==", + "dependencies": { + "@material/base": "15.0.0-canary.7f224ddd4.0", + "@material/dom": "15.0.0-canary.7f224ddd4.0", + "@material/elevation": "15.0.0-canary.7f224ddd4.0", + "@material/feature-targeting": "15.0.0-canary.7f224ddd4.0", + "@material/list": "15.0.0-canary.7f224ddd4.0", + "@material/menu-surface": "15.0.0-canary.7f224ddd4.0", + "@material/ripple": "15.0.0-canary.7f224ddd4.0", + "@material/rtl": "15.0.0-canary.7f224ddd4.0", + "@material/shape": "15.0.0-canary.7f224ddd4.0", + "@material/theme": "15.0.0-canary.7f224ddd4.0", + "@material/tokens": "15.0.0-canary.7f224ddd4.0", + "tslib": "^2.1.0" + } + }, + "node_modules/@material/menu-surface": { + "version": "15.0.0-canary.7f224ddd4.0", + "resolved": "https://registry.npmjs.org/@material/menu-surface/-/menu-surface-15.0.0-canary.7f224ddd4.0.tgz", + "integrity": "sha512-7RZHvw0gbwppaAJ/Oh5SWmfAKJ62aw1IMB3+3MRwsb5PLoV666wInYa+zJfE4i7qBeOn904xqT2Nko5hY0ssrg==", + "dependencies": { + "@material/animation": "15.0.0-canary.7f224ddd4.0", + "@material/base": "15.0.0-canary.7f224ddd4.0", + "@material/elevation": "15.0.0-canary.7f224ddd4.0", + "@material/feature-targeting": "15.0.0-canary.7f224ddd4.0", + "@material/rtl": "15.0.0-canary.7f224ddd4.0", + "@material/shape": "15.0.0-canary.7f224ddd4.0", + "@material/theme": "15.0.0-canary.7f224ddd4.0", + "tslib": "^2.1.0" + } + }, + "node_modules/@material/notched-outline": { + "version": "15.0.0-canary.7f224ddd4.0", + "resolved": "https://registry.npmjs.org/@material/notched-outline/-/notched-outline-15.0.0-canary.7f224ddd4.0.tgz", + "integrity": "sha512-Yg2usuKB2DKlKIBISbie9BFsOVuffF71xjbxPbybvqemxqUBd+bD5/t6H1fLE+F8/NCu5JMigho4ewUU+0RCiw==", + "dependencies": { + "@material/base": "15.0.0-canary.7f224ddd4.0", + "@material/feature-targeting": "15.0.0-canary.7f224ddd4.0", + "@material/floating-label": "15.0.0-canary.7f224ddd4.0", + "@material/rtl": "15.0.0-canary.7f224ddd4.0", + "@material/shape": "15.0.0-canary.7f224ddd4.0", + "@material/theme": "15.0.0-canary.7f224ddd4.0", + "tslib": "^2.1.0" + } + }, + "node_modules/@material/progress-indicator": { + "version": "15.0.0-canary.7f224ddd4.0", + "resolved": "https://registry.npmjs.org/@material/progress-indicator/-/progress-indicator-15.0.0-canary.7f224ddd4.0.tgz", + "integrity": "sha512-UPbDjE5CqT+SqTs0mNFG6uFEw7wBlgYmh+noSkQ6ty/EURm8lF125dmi4dv4kW0+octonMXqkGtAoZwLIHKf/w==", + "dependencies": { + "tslib": "^2.1.0" + } + }, + "node_modules/@material/radio": { + "version": "15.0.0-canary.7f224ddd4.0", + "resolved": "https://registry.npmjs.org/@material/radio/-/radio-15.0.0-canary.7f224ddd4.0.tgz", + "integrity": "sha512-wR1X0Sr0KmQLu6+YOFKAI84G3L6psqd7Kys5kfb8WKBM36zxO5HQXC5nJm/Y0rdn22ixzsIz2GBo0MNU4V4k1A==", + "dependencies": { + "@material/animation": "15.0.0-canary.7f224ddd4.0", + "@material/base": "15.0.0-canary.7f224ddd4.0", + "@material/density": "15.0.0-canary.7f224ddd4.0", + "@material/dom": "15.0.0-canary.7f224ddd4.0", + "@material/feature-targeting": "15.0.0-canary.7f224ddd4.0", + "@material/focus-ring": "15.0.0-canary.7f224ddd4.0", + "@material/ripple": "15.0.0-canary.7f224ddd4.0", + "@material/theme": "15.0.0-canary.7f224ddd4.0", + "@material/touch-target": "15.0.0-canary.7f224ddd4.0", + "tslib": "^2.1.0" + } + }, + "node_modules/@material/ripple": { + "version": "15.0.0-canary.7f224ddd4.0", + "resolved": "https://registry.npmjs.org/@material/ripple/-/ripple-15.0.0-canary.7f224ddd4.0.tgz", + "integrity": "sha512-JqOsWM1f4aGdotP0rh1vZlPZTg6lZgh39FIYHFMfOwfhR+LAikUJ+37ciqZuewgzXB6iiRO6a8aUH6HR5SJYPg==", + "dependencies": { + "@material/animation": "15.0.0-canary.7f224ddd4.0", + "@material/base": "15.0.0-canary.7f224ddd4.0", + "@material/dom": "15.0.0-canary.7f224ddd4.0", + "@material/feature-targeting": "15.0.0-canary.7f224ddd4.0", + "@material/rtl": "15.0.0-canary.7f224ddd4.0", + "@material/theme": "15.0.0-canary.7f224ddd4.0", + "tslib": "^2.1.0" + } + }, + "node_modules/@material/rtl": { + "version": "15.0.0-canary.7f224ddd4.0", + "resolved": "https://registry.npmjs.org/@material/rtl/-/rtl-15.0.0-canary.7f224ddd4.0.tgz", + "integrity": "sha512-UVf14qAtmPiaaZjuJtmN36HETyoKWmsZM/qn1L5ciR2URb8O035dFWnz4ZWFMmAYBno/L7JiZaCkPurv2ZNrGA==", + "dependencies": { + "@material/theme": "15.0.0-canary.7f224ddd4.0", + "tslib": "^2.1.0" + } + }, + "node_modules/@material/segmented-button": { + "version": "15.0.0-canary.7f224ddd4.0", + "resolved": "https://registry.npmjs.org/@material/segmented-button/-/segmented-button-15.0.0-canary.7f224ddd4.0.tgz", + "integrity": "sha512-LCnVRUSAhELTKI/9hSvyvIvQIpPpqF29BV+O9yM4WoNNmNWqTulvuiv7grHZl6Z+kJuxSg4BGbsPxxb9dXozPg==", + "dependencies": { + "@material/base": "15.0.0-canary.7f224ddd4.0", + "@material/elevation": "15.0.0-canary.7f224ddd4.0", + "@material/feature-targeting": "15.0.0-canary.7f224ddd4.0", + "@material/ripple": "15.0.0-canary.7f224ddd4.0", + "@material/theme": "15.0.0-canary.7f224ddd4.0", + "@material/touch-target": "15.0.0-canary.7f224ddd4.0", + "@material/typography": "15.0.0-canary.7f224ddd4.0", + "tslib": "^2.1.0" + } + }, + "node_modules/@material/select": { + "version": "15.0.0-canary.7f224ddd4.0", + "resolved": "https://registry.npmjs.org/@material/select/-/select-15.0.0-canary.7f224ddd4.0.tgz", + "integrity": "sha512-WioZtQEXRpglum0cMSzSqocnhsGRr+ZIhvKb3FlaNrTaK8H3Y4QA7rVjv3emRtrLOOjaT6/RiIaUMTo9AGzWQQ==", + "dependencies": { + "@material/animation": "15.0.0-canary.7f224ddd4.0", + "@material/base": "15.0.0-canary.7f224ddd4.0", + "@material/density": "15.0.0-canary.7f224ddd4.0", + "@material/dom": "15.0.0-canary.7f224ddd4.0", + "@material/elevation": "15.0.0-canary.7f224ddd4.0", + "@material/feature-targeting": "15.0.0-canary.7f224ddd4.0", + "@material/floating-label": "15.0.0-canary.7f224ddd4.0", + "@material/line-ripple": "15.0.0-canary.7f224ddd4.0", + "@material/list": "15.0.0-canary.7f224ddd4.0", + "@material/menu": "15.0.0-canary.7f224ddd4.0", + "@material/menu-surface": "15.0.0-canary.7f224ddd4.0", + "@material/notched-outline": "15.0.0-canary.7f224ddd4.0", + "@material/ripple": "15.0.0-canary.7f224ddd4.0", + "@material/rtl": "15.0.0-canary.7f224ddd4.0", + "@material/shape": "15.0.0-canary.7f224ddd4.0", + "@material/theme": "15.0.0-canary.7f224ddd4.0", + "@material/tokens": "15.0.0-canary.7f224ddd4.0", + "@material/typography": "15.0.0-canary.7f224ddd4.0", + "tslib": "^2.1.0" + } + }, + "node_modules/@material/shape": { + "version": "15.0.0-canary.7f224ddd4.0", + "resolved": "https://registry.npmjs.org/@material/shape/-/shape-15.0.0-canary.7f224ddd4.0.tgz", + "integrity": "sha512-8z8l1W3+cymObunJoRhwFPKZ+FyECfJ4MJykNiaZq7XJFZkV6xNmqAVrrbQj93FtLsECn9g4PjjIomguVn/OEw==", + "dependencies": { + "@material/feature-targeting": "15.0.0-canary.7f224ddd4.0", + "@material/rtl": "15.0.0-canary.7f224ddd4.0", + "@material/theme": "15.0.0-canary.7f224ddd4.0", + "tslib": "^2.1.0" + } + }, + "node_modules/@material/slider": { + "version": "15.0.0-canary.7f224ddd4.0", + "resolved": "https://registry.npmjs.org/@material/slider/-/slider-15.0.0-canary.7f224ddd4.0.tgz", + "integrity": "sha512-QU/WSaSWlLKQRqOhJrPgm29wqvvzRusMqwAcrCh1JTrCl+xwJ43q5WLDfjYhubeKtrEEgGu9tekkAiYfMG7EBw==", + "dependencies": { + "@material/animation": "15.0.0-canary.7f224ddd4.0", + "@material/base": "15.0.0-canary.7f224ddd4.0", + "@material/dom": "15.0.0-canary.7f224ddd4.0", + "@material/elevation": "15.0.0-canary.7f224ddd4.0", + "@material/feature-targeting": "15.0.0-canary.7f224ddd4.0", + "@material/ripple": "15.0.0-canary.7f224ddd4.0", + "@material/rtl": "15.0.0-canary.7f224ddd4.0", + "@material/theme": "15.0.0-canary.7f224ddd4.0", + "@material/tokens": "15.0.0-canary.7f224ddd4.0", + "@material/typography": "15.0.0-canary.7f224ddd4.0", + "tslib": "^2.1.0" + } + }, + "node_modules/@material/snackbar": { + "version": "15.0.0-canary.7f224ddd4.0", + "resolved": "https://registry.npmjs.org/@material/snackbar/-/snackbar-15.0.0-canary.7f224ddd4.0.tgz", + "integrity": "sha512-sm7EbVKddaXpT/aXAYBdPoN0k8yeg9+dprgBUkrdqGzWJAeCkxb4fv2B3He88YiCtvkTz2KLY4CThPQBSEsMFQ==", + "dependencies": { + "@material/animation": "15.0.0-canary.7f224ddd4.0", + "@material/base": "15.0.0-canary.7f224ddd4.0", + "@material/button": "15.0.0-canary.7f224ddd4.0", + "@material/dom": "15.0.0-canary.7f224ddd4.0", + "@material/elevation": "15.0.0-canary.7f224ddd4.0", + "@material/feature-targeting": "15.0.0-canary.7f224ddd4.0", + "@material/icon-button": "15.0.0-canary.7f224ddd4.0", + "@material/ripple": "15.0.0-canary.7f224ddd4.0", + "@material/rtl": "15.0.0-canary.7f224ddd4.0", + "@material/shape": "15.0.0-canary.7f224ddd4.0", + "@material/theme": "15.0.0-canary.7f224ddd4.0", + "@material/tokens": "15.0.0-canary.7f224ddd4.0", + "@material/typography": "15.0.0-canary.7f224ddd4.0", + "tslib": "^2.1.0" + } + }, + "node_modules/@material/switch": { + "version": "15.0.0-canary.7f224ddd4.0", + "resolved": "https://registry.npmjs.org/@material/switch/-/switch-15.0.0-canary.7f224ddd4.0.tgz", + "integrity": "sha512-lEDJfRvkVyyeHWIBfoxYjJVl+WlEAE2kZ/+6OqB1FW0OV8ftTODZGhHRSzjVBA1/p4FPuhAtKtoK9jTpa4AZjA==", + "dependencies": { + "@material/animation": "15.0.0-canary.7f224ddd4.0", + "@material/base": "15.0.0-canary.7f224ddd4.0", + "@material/density": "15.0.0-canary.7f224ddd4.0", + "@material/dom": "15.0.0-canary.7f224ddd4.0", + "@material/elevation": "15.0.0-canary.7f224ddd4.0", + "@material/feature-targeting": "15.0.0-canary.7f224ddd4.0", + "@material/focus-ring": "15.0.0-canary.7f224ddd4.0", + "@material/ripple": "15.0.0-canary.7f224ddd4.0", + "@material/rtl": "15.0.0-canary.7f224ddd4.0", + "@material/shape": "15.0.0-canary.7f224ddd4.0", + "@material/theme": "15.0.0-canary.7f224ddd4.0", + "@material/tokens": "15.0.0-canary.7f224ddd4.0", + "safevalues": "^0.3.4", + "tslib": "^2.1.0" + } + }, + "node_modules/@material/tab": { + "version": "15.0.0-canary.7f224ddd4.0", + "resolved": "https://registry.npmjs.org/@material/tab/-/tab-15.0.0-canary.7f224ddd4.0.tgz", + "integrity": "sha512-E1xGACImyCLurhnizyOTCgOiVezce4HlBFAI6YhJo/AyVwjN2Dtas4ZLQMvvWWqpyhITNkeYdOchwCC1mrz3AQ==", + "dependencies": { + "@material/base": "15.0.0-canary.7f224ddd4.0", + "@material/elevation": "15.0.0-canary.7f224ddd4.0", + "@material/feature-targeting": "15.0.0-canary.7f224ddd4.0", + "@material/focus-ring": "15.0.0-canary.7f224ddd4.0", + "@material/ripple": "15.0.0-canary.7f224ddd4.0", + "@material/rtl": "15.0.0-canary.7f224ddd4.0", + "@material/tab-indicator": "15.0.0-canary.7f224ddd4.0", + "@material/theme": "15.0.0-canary.7f224ddd4.0", + "@material/tokens": "15.0.0-canary.7f224ddd4.0", + "@material/typography": "15.0.0-canary.7f224ddd4.0", + "tslib": "^2.1.0" + } + }, + "node_modules/@material/tab-bar": { + "version": "15.0.0-canary.7f224ddd4.0", + "resolved": "https://registry.npmjs.org/@material/tab-bar/-/tab-bar-15.0.0-canary.7f224ddd4.0.tgz", + "integrity": "sha512-p1Asb2NzrcECvAQU3b2SYrpyJGyJLQWR+nXTYzDKE8WOpLIRCXap2audNqD7fvN/A20UJ1J8U01ptrvCkwJ4eA==", + "dependencies": { + "@material/animation": "15.0.0-canary.7f224ddd4.0", + "@material/base": "15.0.0-canary.7f224ddd4.0", + "@material/density": "15.0.0-canary.7f224ddd4.0", + "@material/elevation": "15.0.0-canary.7f224ddd4.0", + "@material/feature-targeting": "15.0.0-canary.7f224ddd4.0", + "@material/tab": "15.0.0-canary.7f224ddd4.0", + "@material/tab-indicator": "15.0.0-canary.7f224ddd4.0", + "@material/tab-scroller": "15.0.0-canary.7f224ddd4.0", + "@material/theme": "15.0.0-canary.7f224ddd4.0", + "@material/tokens": "15.0.0-canary.7f224ddd4.0", + "@material/typography": "15.0.0-canary.7f224ddd4.0", + "tslib": "^2.1.0" + } + }, + "node_modules/@material/tab-indicator": { + "version": "15.0.0-canary.7f224ddd4.0", + "resolved": "https://registry.npmjs.org/@material/tab-indicator/-/tab-indicator-15.0.0-canary.7f224ddd4.0.tgz", + "integrity": "sha512-h9Td3MPqbs33spcPS7ecByRHraYgU4tNCZpZzZXw31RypjKvISDv/PS5wcA4RmWqNGih78T7xg4QIGsZg4Pk4w==", + "dependencies": { + "@material/animation": "15.0.0-canary.7f224ddd4.0", + "@material/base": "15.0.0-canary.7f224ddd4.0", + "@material/feature-targeting": "15.0.0-canary.7f224ddd4.0", + "@material/theme": "15.0.0-canary.7f224ddd4.0", + "tslib": "^2.1.0" + } + }, + "node_modules/@material/tab-scroller": { + "version": "15.0.0-canary.7f224ddd4.0", + "resolved": "https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.7f224ddd4.0.tgz", + "integrity": "sha512-LFeYNjQpdXecwECd8UaqHYbhscDCwhGln5Yh+3ctvcEgvmDPNjhKn/DL3sWprWvG8NAhP6sHMrsGhQFVdCWtTg==", + "dependencies": { + "@material/animation": "15.0.0-canary.7f224ddd4.0", + "@material/base": "15.0.0-canary.7f224ddd4.0", + "@material/dom": "15.0.0-canary.7f224ddd4.0", + "@material/feature-targeting": "15.0.0-canary.7f224ddd4.0", + "@material/tab": "15.0.0-canary.7f224ddd4.0", + "tslib": "^2.1.0" + } + }, + "node_modules/@material/textfield": { + "version": "15.0.0-canary.7f224ddd4.0", + "resolved": "https://registry.npmjs.org/@material/textfield/-/textfield-15.0.0-canary.7f224ddd4.0.tgz", + "integrity": "sha512-AExmFvgE5nNF0UA4l2cSzPghtxSUQeeoyRjFLHLy+oAaE4eKZFrSy0zEpqPeWPQpEMDZk+6Y+6T3cOFYBeSvsw==", + "dependencies": { + "@material/animation": "15.0.0-canary.7f224ddd4.0", + "@material/base": "15.0.0-canary.7f224ddd4.0", + "@material/density": "15.0.0-canary.7f224ddd4.0", + "@material/dom": "15.0.0-canary.7f224ddd4.0", + "@material/feature-targeting": "15.0.0-canary.7f224ddd4.0", + "@material/floating-label": "15.0.0-canary.7f224ddd4.0", + "@material/line-ripple": "15.0.0-canary.7f224ddd4.0", + "@material/notched-outline": "15.0.0-canary.7f224ddd4.0", + "@material/ripple": "15.0.0-canary.7f224ddd4.0", + "@material/rtl": "15.0.0-canary.7f224ddd4.0", + "@material/shape": "15.0.0-canary.7f224ddd4.0", + "@material/theme": "15.0.0-canary.7f224ddd4.0", + "@material/tokens": "15.0.0-canary.7f224ddd4.0", + "@material/typography": "15.0.0-canary.7f224ddd4.0", + "tslib": "^2.1.0" + } + }, + "node_modules/@material/theme": { + "version": "15.0.0-canary.7f224ddd4.0", + "resolved": "https://registry.npmjs.org/@material/theme/-/theme-15.0.0-canary.7f224ddd4.0.tgz", + "integrity": "sha512-hs45hJoE9yVnoVOcsN1jklyOa51U4lzWsEnQEuJTPOk2+0HqCQ0yv/q0InpSnm2i69fNSyZC60+8HADZGF8ugQ==", + "dependencies": { + "@material/feature-targeting": "15.0.0-canary.7f224ddd4.0", + "tslib": "^2.1.0" + } + }, + "node_modules/@material/tokens": { + "version": "15.0.0-canary.7f224ddd4.0", + "resolved": "https://registry.npmjs.org/@material/tokens/-/tokens-15.0.0-canary.7f224ddd4.0.tgz", + "integrity": "sha512-r9TDoicmcT7FhUXC4eYMFnt9TZsz0G8T3wXvkKncLppYvZ517gPyD/1+yhuGfGOxAzxTrM66S/oEc1fFE2q4hw==", + "dependencies": { + "@material/elevation": "15.0.0-canary.7f224ddd4.0" + } + }, + "node_modules/@material/tooltip": { + "version": "15.0.0-canary.7f224ddd4.0", + "resolved": "https://registry.npmjs.org/@material/tooltip/-/tooltip-15.0.0-canary.7f224ddd4.0.tgz", + "integrity": "sha512-8qNk3pmPLTnam3XYC1sZuplQXW9xLn4Z4MI3D+U17Q7pfNZfoOugGr+d2cLA9yWAEjVJYB0mj8Yu86+udo4N9w==", + "dependencies": { + "@material/animation": "15.0.0-canary.7f224ddd4.0", + "@material/base": "15.0.0-canary.7f224ddd4.0", + "@material/button": "15.0.0-canary.7f224ddd4.0", + "@material/dom": "15.0.0-canary.7f224ddd4.0", + "@material/elevation": "15.0.0-canary.7f224ddd4.0", + "@material/feature-targeting": "15.0.0-canary.7f224ddd4.0", + "@material/rtl": "15.0.0-canary.7f224ddd4.0", + "@material/shape": "15.0.0-canary.7f224ddd4.0", + "@material/theme": "15.0.0-canary.7f224ddd4.0", + "@material/tokens": "15.0.0-canary.7f224ddd4.0", + "@material/typography": "15.0.0-canary.7f224ddd4.0", + "safevalues": "^0.3.4", + "tslib": "^2.1.0" + } + }, + "node_modules/@material/top-app-bar": { + "version": "15.0.0-canary.7f224ddd4.0", + "resolved": "https://registry.npmjs.org/@material/top-app-bar/-/top-app-bar-15.0.0-canary.7f224ddd4.0.tgz", + "integrity": "sha512-SARR5/ClYT4CLe9qAXakbr0i0cMY0V3V4pe3ElIJPfL2Z2c4wGR1mTR8m2LxU1MfGKK8aRoUdtfKaxWejp+eNA==", + "dependencies": { + "@material/animation": "15.0.0-canary.7f224ddd4.0", + "@material/base": "15.0.0-canary.7f224ddd4.0", + "@material/elevation": "15.0.0-canary.7f224ddd4.0", + "@material/ripple": "15.0.0-canary.7f224ddd4.0", + "@material/rtl": "15.0.0-canary.7f224ddd4.0", + "@material/shape": "15.0.0-canary.7f224ddd4.0", + "@material/theme": "15.0.0-canary.7f224ddd4.0", + "@material/typography": "15.0.0-canary.7f224ddd4.0", + "tslib": "^2.1.0" + } + }, + "node_modules/@material/touch-target": { + "version": "15.0.0-canary.7f224ddd4.0", + "resolved": "https://registry.npmjs.org/@material/touch-target/-/touch-target-15.0.0-canary.7f224ddd4.0.tgz", + "integrity": "sha512-BJo/wFKHPYLGsRaIpd7vsQwKr02LtO2e89Psv0on/p0OephlNIgeB9dD9W+bQmaeZsZ6liKSKRl6wJWDiK71PA==", + "dependencies": { + "@material/base": "15.0.0-canary.7f224ddd4.0", + "@material/feature-targeting": "15.0.0-canary.7f224ddd4.0", + "@material/rtl": "15.0.0-canary.7f224ddd4.0", + "@material/theme": "15.0.0-canary.7f224ddd4.0", + "tslib": "^2.1.0" + } + }, + "node_modules/@material/typography": { + "version": "15.0.0-canary.7f224ddd4.0", + "resolved": "https://registry.npmjs.org/@material/typography/-/typography-15.0.0-canary.7f224ddd4.0.tgz", + "integrity": "sha512-kBaZeCGD50iq1DeRRH5OM5Jl7Gdk+/NOfKArkY4ksBZvJiStJ7ACAhpvb8MEGm4s3jvDInQFLsDq3hL+SA79sQ==", + "dependencies": { + "@material/feature-targeting": "15.0.0-canary.7f224ddd4.0", + "@material/theme": "15.0.0-canary.7f224ddd4.0", + "tslib": "^2.1.0" + } + }, "node_modules/@ngtools/webpack": { "version": "17.0.7", "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-17.0.7.tgz", @@ -5636,7 +6469,7 @@ "version": "4.5.0", "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz", "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==", - "dev": true, + "devOptional": true, "engines": { "node": ">=0.12" }, @@ -6279,9 +7112,9 @@ "dev": true }, "node_modules/follow-redirects": { - "version": "1.15.3", - "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.3.tgz", - "integrity": "sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q==", + "version": "1.15.5", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.5.tgz", + "integrity": "sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==", "dev": true, "funding": [ { @@ -9502,7 +10335,7 @@ "version": "7.1.2", "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.1.2.tgz", "integrity": "sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==", - "dev": true, + "devOptional": true, "dependencies": { "entities": "^4.4.0" }, @@ -10539,6 +11372,11 @@ "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", "dev": true }, + "node_modules/safevalues": { + "version": "0.3.4", + "resolved": "https://registry.npmjs.org/safevalues/-/safevalues-0.3.4.tgz", + "integrity": "sha512-LRneZZRXNgjzwG4bDQdOTSbze3fHm1EAKN/8bePxnlEZiBmkYEDggaHbuvHI9/hoqHbGfsEA7tWS9GhYHZBBsw==" + }, "node_modules/sass": { "version": "1.69.5", "resolved": "https://registry.npmjs.org/sass/-/sass-1.69.5.tgz", diff --git a/package.json b/package.json index deb6851..05ed2e9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "cv", - "version": "0.0.0", + "version": "0.1.0", "scripts": { "ng": "ng", "start": "ng serve", @@ -17,6 +17,7 @@ "@angular/platform-browser": "^17.0.7", "@angular/platform-browser-dynamic": "^17.0.7", "@angular/router": "^17.0.7", + "@angular/material": "^17.0.7", "@studio-freight/lenis": "^1.0.33", "gsap": "^3.12.2", "js-circle-progress": "^1.0.0-beta.0", diff --git a/src/app/app.component.html b/src/app/app.component.html index 5ddda08..7674a77 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -28,11 +28,11 @@

-
+
- + @@ -47,7 +47,7 @@

- + @@ -62,11 +62,13 @@

-
+
- + + +
diff --git a/src/app/app.component.scss b/src/app/app.component.scss index 75dfcc2..efa2fbf 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -55,6 +55,7 @@ } .content-container { + width: var(--main-content-width); display: flex; flex-direction: column; text-align: center; diff --git a/src/app/app.component.ts b/src/app/app.component.ts index cf1a109..49d761f 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -13,6 +13,8 @@ import {HeadingCardComponent} from "./components/heading-card/heading-card.compo import {SkillsCardComponent} from "./components/skills-card/skills-card.component"; import {NavbarDotComponent} from "./components/navbar-dot/navbar-dot.component"; import {SidebarComponent} from "./sections/sidebar/sidebar.component"; +import {AboutCardComponent} from "./components/about-card/about-card.component"; +import {AboutComponent} from "./sections/about/about.component"; gsap.registerPlugin(ScrollTrigger); @@ -33,7 +35,9 @@ import "./js/lenis.js"; HeadingCardComponent, SkillsCardComponent, NavbarDotComponent, - SidebarComponent + SidebarComponent, + AboutCardComponent, + AboutComponent ], templateUrl: './app.component.html', styleUrl: './app.component.scss' diff --git a/src/app/components/about-card/about-card.component.html b/src/app/components/about-card/about-card.component.html new file mode 100644 index 0000000..b8b8337 --- /dev/null +++ b/src/app/components/about-card/about-card.component.html @@ -0,0 +1,26 @@ +
+
+ +
+ + + +
+
+
+
+
+
+
+
+
+
+ +
+
+ {{ langPack.showMore }} + {{ langPack.showLess }} +
+ +
+
diff --git a/src/app/components/about-card/about-card.component.scss b/src/app/components/about-card/about-card.component.scss new file mode 100644 index 0000000..ecb9c59 --- /dev/null +++ b/src/app/components/about-card/about-card.component.scss @@ -0,0 +1,116 @@ +:host { + display: flex; + flex-direction: var(--flex-row); + gap: 2rem; + transition: max-height 0.8s cubic-bezier(0.9, 0, 0.9, 1.0); +} + +.about-container { + max-height: 20rem; + display: flex; + gap: 2rem; +} + +.card { + width: auto; + min-width: 40rem; + border-radius: 1.5rem; + padding: 2rem; + background: #262626; + + .card-content { + color: white; + height: 100%; + font-family: 'Inter', sans-serif; + font-weight: 200; + text-align: justify; + font-size: 1.4rem; + line-height: 1.8rem; + overflow: hidden + } +} + +.about-control-container { + min-width: 16rem; + display: flex; + flex-direction: column; + justify-content: space-between; + gap: 2rem +} + +.title-card { + border-radius: 1.5rem; + padding: 2rem; + background: #262626; + + .icon-row { + display: flex; + justify-content: flex-end; + flex-direction: var(--flex-row); + margin-bottom: 3rem; + + .icon-container { + background: black; + height: 3rem; + width: 3rem; + border-radius: 50%; + display: flex; + justify-content: center; + align-items: center; + + .icon { + color: white; + font-size: 1.5rem; + } + } + } + + .title { + color: white; + font-family: 'Inter', sans-serif; + font-weight: 400; + letter-spacing: 0.1rem; + font-size: 1.9rem; + text-align: var(--title-align); + } +} + +.heading { + font-weight: 200; + font-size: 2rem; + line-height: 2rem; + letter-spacing: 0.1rem; + background: -webkit-linear-gradient(left, #a445b2, #fa4299); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +.show-more-button { + border-radius: 1.5rem; + padding: 2rem; + background: #262626; + display: flex; + flex-wrap: nowrap; + flex-direction: var(--flex-row); + gap: .5rem; + align-items: center; + justify-content: space-between; + cursor: pointer; + + .show-more { + color: white; + font-family: 'Inter', sans-serif; + font-weight: 400; + letter-spacing: 0.1rem; + font-size: 1.3rem + } + + .icon { + color: white; + font-size: 1.3rem; + transition: transform 1s cubic-bezier(0.6, 0, 0.6, 1.0); + &.extended { + transform: rotateX(180deg); + } + } +} diff --git a/src/app/components/about-card/about-card.component.ts b/src/app/components/about-card/about-card.component.ts new file mode 100644 index 0000000..4a6e33a --- /dev/null +++ b/src/app/components/about-card/about-card.component.ts @@ -0,0 +1,40 @@ +import {Component, ElementRef, HostBinding, Input, ViewChild} from '@angular/core'; +import {NgIf} from "@angular/common"; +import {AboutCard, LanguagePack} from "../../data/model"; +import {ScrollTrigger} from "gsap/ScrollTrigger"; + +@Component({ + selector: 'about-card', + standalone: true, + imports: [ + NgIf + ], + templateUrl: './about-card.component.html', + styleUrl: './about-card.component.scss' +}) +export class AboutCardComponent { + + @Input({required: true}) content: AboutCard; + @Input({required: true}) langPack: LanguagePack; + + @ViewChild("text", {read: ElementRef}) textElement: ElementRef; + + @HostBinding("style.max-height") maxHeight: string = "22rem"; + + extended: boolean = false; + + toggleExtension() { + this.extended = !this.extended; + if (this.extended) { + const height = this.textElement.nativeElement.offsetHeight; + this.maxHeight = `calc(4rem + ${height}px + 1px)`; + } else { + this.maxHeight = "22rem"; + } + // smoothly reset GSAP markers + for (let i = 1; i <= 40; i++) { + setTimeout(() => ScrollTrigger.refresh(), i * 20); + } + } + +} diff --git a/src/app/components/badge/badge.component.html b/src/app/components/badge/badge.component.html new file mode 100644 index 0000000..887bf40 --- /dev/null +++ b/src/app/components/badge/badge.component.html @@ -0,0 +1,9 @@ +
+
+
+ +
+ + + +
diff --git a/src/app/components/badge/badge.component.scss b/src/app/components/badge/badge.component.scss new file mode 100644 index 0000000..c662000 --- /dev/null +++ b/src/app/components/badge/badge.component.scss @@ -0,0 +1,75 @@ +:host { + min-width: 2.25rem; + height: 2.75rem; + line-height: 2.75rem; + border-radius: 1rem; + text-align: center; + padding: .5rem .5rem; + color: black; + + display: inline-block; + position: relative; + + transition-duration: 300ms; + transition-property: transform, box-shadow; + transition-timing-function: ease-out; + + &:hover { + transition-duration: 150ms; + box-shadow: 0 5px 20px 5px #00000044; + } + + a { + border-radius: 1rem; + position: absolute; + width: 100%; + height: 100%; + left: 0; + top: 0; + } +} + +.glow { + border-radius: 1rem; + position: absolute; + width: 100%; + height: 100%; + left: 0; + top: 0; + + background-image: radial-gradient(circle at 50% -20%, #ffffff22, #0000000f); +} + +.container { + display: flex; + flex-wrap: nowrap; + gap: 0.3rem; + align-items: center; + height: 100%; +} + +.icon { + max-height: 100%; + display: flex; + align-items: center; + //margin-right: 0.3rem; + //max-height: 2.25rem; + //height: 100%; + //width: auto; + font-size: 2rem; + + object { + //height: 100%; + //width: auto; + } + + //img { + // height: 100%; + //} +} + +.text { + font-weight: 700; + font-size: 1.25rem; + transform: translateY(2px); +} diff --git a/src/app/components/badge/badge.component.ts b/src/app/components/badge/badge.component.ts new file mode 100644 index 0000000..6d642b0 --- /dev/null +++ b/src/app/components/badge/badge.component.ts @@ -0,0 +1,55 @@ +import {Component, ElementRef, HostBinding, HostListener, Input, Renderer2, ViewChild} from '@angular/core'; +import {NgIf} from "@angular/common"; + +@Component({ + selector: 'badge', + standalone: true, + imports: [ + NgIf, + ], + templateUrl: './badge.component.html', + styleUrl: './badge.component.scss' +}) +export class BadgeComponent { + + @Input() iconClass: string; + @Input() iconRef: string; + + @Input() iconColor: string; + @Input() @HostBinding('style.background') color: string = "linear-gradient(to right, #a445b2, #fa4299)"; + @Input() link: string; + + @ViewChild("glow", {read: ElementRef}) glow: ElementRef; + + constructor(private hostEl: ElementRef, private renderer: Renderer2) {} + + // Inspo: https://codepen.io/markmiro/pen/wbqMPa + @HostListener('mousemove', ['$event']) + rotateToMouse(e: any) { + const bounds = this.hostEl.nativeElement.getBoundingClientRect(); + const mouseX = e.clientX; + const mouseY = e.clientY; + const leftX = mouseX - bounds.x; + const topY = mouseY - bounds.y; + const center = { + x: leftX - bounds.width / 2, + y: topY - bounds.height / 2 + } + + this.renderer.setStyle(this.glow.nativeElement, "background-image", ` + radial-gradient( + circle at + ${center.x * 2 + bounds.width / 2}px + ${center.y * 2 + bounds.height / 2}px, + #ffffff55, + #0000000f + ) + `); + } + + @HostListener('mouseleave') + onMouseLeave() { + this.renderer.removeStyle(this.glow.nativeElement, "background-image"); + } + +} diff --git a/src/app/components/custom-button/custom-button.component.html b/src/app/components/custom-button/custom-button.component.html new file mode 100644 index 0000000..ac052ac --- /dev/null +++ b/src/app/components/custom-button/custom-button.component.html @@ -0,0 +1,4 @@ + diff --git a/src/app/components/custom-button/custom-button.component.scss b/src/app/components/custom-button/custom-button.component.scss new file mode 100644 index 0000000..79f11ef --- /dev/null +++ b/src/app/components/custom-button/custom-button.component.scss @@ -0,0 +1,63 @@ +:host { + --border-radius: 3rem; +} + +a { + position: absolute; + height: 100%; + width: 100%; + top: 0; + left: 0; + border-radius: var(--border-radius); +} + +// Inspo: btn-15 of https://codepen.io/yuhomyan/pen/OJMejWJ +button { + min-width: 2.5rem; + height: 3.25rem; + line-height: 3.25rem; + text-align: center; + padding: 1rem 1.5rem; + color: black; + border-radius: var(--border-radius); + + cursor: pointer; + transition: all 0.3s ease; + position: relative; + display: flex; + flex-wrap: nowrap; + gap: 0.5rem; + align-items: center; + + font-weight: 700; + font-size: 1.25rem; + + background: white; + border: none; + z-index: 1; + + // fix mask for rounded corners, see https://stackoverflow.com/a/10296258/19199839 + -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); + + &:before { + position: absolute; + content: ""; + width: 0; + height: 100%; + top: 0; + right: 0; + z-index: -1; + background: linear-gradient(to right, #a445b2, #fa4299); + border-radius: var(--border-radius); + transition: all 0.3s ease; + } + + &:hover { + color: #fff; + &:before { + left: 0; + width: 100%; + } + } +} + diff --git a/src/app/components/custom-button/custom-button.component.ts b/src/app/components/custom-button/custom-button.component.ts new file mode 100644 index 0000000..baa2b05 --- /dev/null +++ b/src/app/components/custom-button/custom-button.component.ts @@ -0,0 +1,18 @@ +import {Component, EventEmitter, Input, Output} from '@angular/core'; +import {NgIf} from "@angular/common"; + +@Component({ + selector: 'custom-button', + standalone: true, + imports: [ + NgIf + ], + templateUrl: './custom-button.component.html', + styleUrl: './custom-button.component.scss' +}) +export class CustomButtonComponent { + + @Input() link: string; + @Output() click: EventEmitter = new EventEmitter(); + +} diff --git a/src/app/components/heading-card/heading-card.component.scss b/src/app/components/heading-card/heading-card.component.scss index b838950..7558a06 100644 --- a/src/app/components/heading-card/heading-card.component.scss +++ b/src/app/components/heading-card/heading-card.component.scss @@ -1,5 +1,5 @@ :host { - width: 80%; + width: 100%; margin-bottom: 5vh; display: block; } diff --git a/src/app/data/data.service.ts b/src/app/data/data.service.ts index d30aa0c..cd04716 100644 --- a/src/app/data/data.service.ts +++ b/src/app/data/data.service.ts @@ -3,7 +3,8 @@ import * as educationJson from '../../data/education.json'; import * as generalJson from '../../data/general.json'; import * as experienceJson from '../../data/experience.json'; import * as skillsJson from '../../data/skills.json'; -import {EducationItem, ExperienceItem, LanguagePack, Skill, SkillCategory} from "./model"; +import * as aboutJson from '../../data/about.json'; +import {AboutCard, EducationItem, ExperienceItem, LanguagePack, Skill, SkillCategory} from "./model"; import {MenuItem} from "primeng/api"; @Injectable({ @@ -21,6 +22,7 @@ export class DataService { experience: ExperienceItem[]; skillCategories: SkillCategory[]; skills: Skill[]; + about: AboutCard[]; langChange: EventEmitter = new EventEmitter(true); @@ -38,6 +40,8 @@ export class DataService { this.experience = experienceJson[this.lang]; // @ts-ignore this.skillCategories = skillsJson[this.lang]; + // @ts-ignore + this.about = aboutJson[this.lang]; this.skills = []; for (let skillCategory of this.skillCategories) { this.skills = this.skills.concat(skillCategory.skills); diff --git a/src/app/data/model.ts b/src/app/data/model.ts index b3fe537..000c884 100644 --- a/src/app/data/model.ts +++ b/src/app/data/model.ts @@ -46,6 +46,9 @@ export interface ILanguagePack { isoAlpha2: string; heading: string; subheading: string; + showMore: string; + showLess: string; + home: string; education: string; experience: string; @@ -59,6 +62,9 @@ export class LanguagePack implements ILanguagePack { isoAlpha2: string; heading: string; subheading: string; + showMore: string; + showLess: string; + home: string; education: string; experience: string; @@ -68,16 +74,7 @@ export class LanguagePack implements ILanguagePack { sections: Section[]; constructor(langPack: ILanguagePack) { - this.id = langPack.id; - this.name = langPack.name; - this.isoAlpha2 = langPack.isoAlpha2; - this.heading = langPack.heading; - this.subheading = langPack.subheading; - this.home = langPack.home; - this.education = langPack.education; - this.experience = langPack.experience; - this.skills = langPack.skills; - this.about = langPack.about; + Object.assign(this, langPack); this.sections = [ {name: this.home, id: "home-start", position: 0}, @@ -94,3 +91,9 @@ export interface Section { id: string; position: number; } + +export interface AboutCard { + title: string; + heading?: string; + text?: string; +} diff --git a/src/app/js/global.vars.ts b/src/app/js/global.vars.ts new file mode 100644 index 0000000..536db7c --- /dev/null +++ b/src/app/js/global.vars.ts @@ -0,0 +1,5 @@ +import packageJson from '../../../package.json'; + +export const appVersion: string = packageJson.version; +export const appName: string = "WebCVTemplate"; +export const githubURL: string = "https://github.com/axherrm/CV"; diff --git a/src/app/sections/about/about.component.html b/src/app/sections/about/about.component.html new file mode 100644 index 0000000..a26c5e8 --- /dev/null +++ b/src/app/sections/about/about.component.html @@ -0,0 +1,23 @@ + + +
+

+ Folgende Technologien wurden für die Erstellung dieses Projekts verwendet: +
+ GitHub + Angular + PrimeNG + PrimeIcons + GSAP + Lenis +
+
+ + + Zum GitHub Projekt + + + {{ appName }} {{ appVersion }} +
+
+ diff --git a/src/app/sections/about/about.component.scss b/src/app/sections/about/about.component.scss new file mode 100644 index 0000000..b2deef6 --- /dev/null +++ b/src/app/sections/about/about.component.scss @@ -0,0 +1,14 @@ +:host { + width: 80%; + display: flex; + flex-direction: column; + gap: 5rem; + :nth-child(2n) { + --flex-row: row-reverse; + --title-align: left; + } + :nth-child(2n+1) { + --flex-row: row; + --title-align: right; + } +} diff --git a/src/app/sections/about/about.component.ts b/src/app/sections/about/about.component.ts new file mode 100644 index 0000000..6b7a14b --- /dev/null +++ b/src/app/sections/about/about.component.ts @@ -0,0 +1,33 @@ +import {Component, Input} from '@angular/core'; +import {AboutCardComponent} from "../../components/about-card/about-card.component"; +import {AboutCard, LanguagePack} from "../../data/model"; +import {appName, appVersion, githubURL} from "../../js/global.vars"; +import {BadgeModule} from "primeng/badge"; +import {BadgeComponent} from "../../components/badge/badge.component"; +import {NgForOf, NgIf} from "@angular/common"; +import {CustomButtonComponent} from "../../components/custom-button/custom-button.component"; + +@Component({ + selector: 'about', + standalone: true, + imports: [ + AboutCardComponent, + BadgeModule, + BadgeComponent, + NgForOf, + CustomButtonComponent, + NgIf + ], + templateUrl: './about.component.html', + styleUrl: './about.component.scss' +}) +export class AboutComponent { + + @Input({required: true}) content: AboutCard[]; + @Input({required: true}) langPack: LanguagePack; + + appVersion: string = appVersion; + appName: string = appName; + githubURL: string = githubURL; + +} diff --git a/src/assets/svg/angular.svg b/src/assets/svg/angular.svg new file mode 100644 index 0000000..bf081ac --- /dev/null +++ b/src/assets/svg/angular.svg @@ -0,0 +1,16 @@ + + + + + + + + + + diff --git a/src/assets/svg/gsap.svg b/src/assets/svg/gsap.svg new file mode 100644 index 0000000..79015a9 --- /dev/null +++ b/src/assets/svg/gsap.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/svg/lenis.svg b/src/assets/svg/lenis.svg new file mode 100644 index 0000000..555f16a --- /dev/null +++ b/src/assets/svg/lenis.svg @@ -0,0 +1 @@ +Studio Freight Darkroom \ No newline at end of file diff --git a/src/assets/svg/primeng.svg b/src/assets/svg/primeng.svg new file mode 100644 index 0000000..5cce6a1 --- /dev/null +++ b/src/assets/svg/primeng.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/src/data/about.json b/src/data/about.json new file mode 100644 index 0000000..79328d6 --- /dev/null +++ b/src/data/about.json @@ -0,0 +1,12 @@ +{ + "de": [ + { + "title": "Wer ich bin", + "heading": "Axel Herrmann", + "text": " - wer ist das? Momentan bin ich ein 21-jähriger Student an der Universität Stuttgart im Studiengang Software Engineering B.Sc., der seine Bachelorthesis schreibt. Doch meine Geschichte mit Informatik beginnt viel früher, denn ich konnte mich schon früh für Informatik begeistern. Bereits in der 7. Klasse hat mein Vater mir einen Online-Blog über Java gezeigt, durch den ich meine ersten Zeilen Java Code geschrieben habe. Als ich dann in der 10. Klasse das erste Mal die Chance hatte, Informatikunterricht zu besuchen, wusste ich sofort, was ich in Zukunft machen will. Immer auf der Suche nach echten Aufgaben, bei denen ich programmieren kann, habe ich 2018 mit Freunden am #IoT Hackthon meiner Schule teilgenommen. Da mein Informatik-Lehrer sah, wie viel Spaß mir das machte, gab er mir als einzigem Schüler die Möglichkeit, an der Verwaltungssoftware für das Schulprojekt Schule als Staat (SaS) mit ihm zu entwickeln. Als erstes etwas größeres Projekt, an dem ich gearbeitet habe, hat das meine Entscheidung gefestigt, Informatik studieren zu wollen. So habe ich nach der Schule direkt damit angefangen. Besonders viel Spaß haben mir dabei immer die Module gemacht, bei denen ich programmieren konnte.

Um mehr Bezug zur Praxis zu haben und Erfahrung zu sammeln, suchte ich mir bereits im 3. Semester meines Studiums eine Werkstudentenstelle. So bin ich bei levigo solutions gelandet, wo ich ab Beginn 2022 1,5 Jahre am Produkt jadice flow mitentwickelt habe. Hier konnte ich erste Erfahrungen mit renomierten Technologien wie Docker und Kubernetes sammeln und hatte viel Spaß bei der Arbeit." + } + ], + "en": { + + } +} diff --git a/src/data/general.json b/src/data/general.json index fdd23b0..360a7ff 100644 --- a/src/data/general.json +++ b/src/data/general.json @@ -7,6 +7,9 @@ "isoAlpha2": "de", "heading": "Axel Herrmann", "subheading": "Software Engineer", + "showMore": "Mehr anzeigen", + "showLess": "Weniger anzeigen", + "home": "Home", "education": "Bildungsweg", "experience": "Erfahrung", @@ -19,6 +22,9 @@ "isoAlpha2": "us", "heading": "Axel Herrmann", "subheading": "Software Engineer", + "showMore": "Show more", + "showLess": "Show less", + "home": "Home", "education": "Education", "experience": "Experience", diff --git a/src/styles.scss b/src/styles.scss index 4afaf50..02f423a 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -4,7 +4,6 @@ /* You can add global styles to this file, and also import other style files */ -html, body { height: 100% !important } body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; @@ -48,7 +47,7 @@ html { --display-side-elements-flex: none; } @media (min-width: 1000px) { - --main-content-width: max(60vw, 1000px); + --main-content-width: max(80vw, 1000px); --display-side-elements: block; --display-side-elements-flex: flex; } diff --git a/tsconfig.json b/tsconfig.json index 1aa5908..20ff522 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -20,6 +20,7 @@ "useDefineForClassFields": false, "strictPropertyInitialization": false, "resolveJsonModule": true, + "allowSyntheticDefaultImports": true, "lib": [ "ES2022", "dom"