diff --git a/README.md b/README.md index 39a1dc7..084bf3d 100644 --- a/README.md +++ b/README.md @@ -1,27 +1,77 @@ -# Portfolio +# yqni13 portfolio +$\texttt{\color{teal}{v1.0.0}}$ + +
+ +
+ +### Technology + +
+ + Google FontsGoogle Fonts +
+

This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.3.6. ## Development server -Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files. +Get startet with `npm install` and to start run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files. +

+ +## Features +
+
:iphone: Responsive design 480px > width < 1440px via flexbox and media queries
+
:book: Multi-Page Layout (main navigation and portfolio menu)
+
:new_moon_with_face:/:sun_with_face: Dark/Light mode
+
:art: Customized style
+
+ +## Portfolio -## Code scaffolding +The portfolio component splits up to different $\textsf{\color{limegreen}{menu options}}$. The overview "all" displays all projects regarding my work as a frontend-developer. Additionally I split the projects to different types like "frontend"-only, "fullstack" and smaller "modules". +
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. +
+ +
+

-## Build +Every project is displayed in card-style, containing a screenshot of the project user-interface and on hovering more information appear. The title, keywords, version and used technology icons will give a quick overview. Additionally, every project-card has a $\textsf{\color{red}{direct link}}$ to the regarding repository $\textsf{\color{red}{via github icon}}$ to open in a new tab. -Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. +
+ +              + +
+

-## Running unit tests +## Theme settings -Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). +My portfolio comes with two theme settings: $\textsf{\color{gray}{Dark mode}}$ & $\textsf{\color{goldenrod}{Light mode}}$. The button to change the theme sits in the nav bar after the last menu option. If dark mode is enabled, the moon symbol is displayed or the sun for the enabled light mode. The local storage saves the setting, so navigating to another webpage and coming back later will still display the user-interface in the previously set theme (default setting: Dark mode). +
-## Running end-to-end tests +
+ +              + +
-Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities. +## Updates -## Further help +### Aimed objectives for next $\textsf{\color{green}minor}$ update: +
+
- changing portfolio cards from description text to keywords
+
- error handling for images failing to load
+
- improve data binding
+
- create portfolio cards in html via *ngFor
+
+
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page. +### Aimed objectives for next $\textsf{\color{cyan}major}$ update: +
+
- translation option to switch between german/english
+
- responsive design > 1440px width
+
- customized error page
+
\ No newline at end of file diff --git a/angular.json b/angular.json index dbda5f9..a781b0e 100644 --- a/angular.json +++ b/angular.json @@ -39,7 +39,8 @@ "styles": [ "src/styles.scss", "src/stylesheets/colors.scss", - "src/stylesheets/media.scss" + "src/stylesheets/media.scss", + "src/stylesheets/icons.scss" ], "scripts": [] }, @@ -48,13 +49,13 @@ "budgets": [ { "type": "initial", - "maximumWarning": "500kb", - "maximumError": "1mb" + "maximumWarning": "4mb", + "maximumError": "5mb" }, { "type": "anyComponentStyle", - "maximumWarning": "2kb", - "maximumError": "4kb" + "maximumWarning": "150kb", + "maximumError": "150kb" } ], "outputHashing": "all" @@ -101,7 +102,8 @@ "styles": [ "src/styles.scss", "src/stylesheets/colors.scss", - "src/stylesheets/media.scss" + "src/stylesheets/media.scss", + "src/stylesheets/icons.scss" ], "scripts": [] } diff --git a/desktop.ini b/desktop.ini index c293c4e..7fac864 100644 --- a/desktop.ini +++ b/desktop.ini @@ -1,5 +1,5 @@ [.ShellClassInfo] -IconResource=D:\Dokumente\GitHub\Private_Projects\portfolio\src\assets\img\folder.ico,0 +IconResource=D:\Dokumente\GitHub\Private_Projects\yqni13\src\assets\img\folder.ico,0 [ViewState] Mode= Vid= diff --git a/package-lock.json b/package-lock.json index f6272c9..4c05857 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,16 +8,20 @@ "name": "portfolio", "version": "0.0.0", "dependencies": { - "@angular/animations": "^17.3.0", + "@angular/animations": "^17.3.6", + "@angular/cdk": "^17.3.6", "@angular/common": "^17.3.0", "@angular/compiler": "^17.3.0", "@angular/core": "^17.3.0", "@angular/forms": "^17.3.0", + "@angular/material": "^17.3.6", "@angular/platform-browser": "^17.3.0", "@angular/platform-browser-dynamic": "^17.3.0", "@angular/router": "^17.3.0", + "@types/node": "^20.12.12", "rxjs": "~7.8.0", "tslib": "^2.3.0", + "underscore": "^1.13.6", "zone.js": "~0.14.3" }, "devDependencies": { @@ -25,6 +29,7 @@ "@angular/cli": "^17.3.6", "@angular/compiler-cli": "^17.3.0", "@types/jasmine": "~5.1.0", + "@types/underscore": "^1.11.15", "jasmine-core": "~5.1.0", "karma": "~6.4.0", "karma-chrome-launcher": "~3.2.0", @@ -269,6 +274,22 @@ "@angular/core": "17.3.6" } }, + "node_modules/@angular/cdk": { + "version": "17.3.6", + "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-17.3.6.tgz", + "integrity": "sha512-7eKrC61/6pmMAxllU/vYKadZRF7x7GxUYpA5G70fNaQsIUUiZvxx/SJN9AuZEoPGAtF6atKlJD8QVmFoDzv/Lw==", + "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.3.6", "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-17.3.6.tgz", @@ -442,6 +463,70 @@ "rxjs": "^6.5.3 || ^7.4.0" } }, + "node_modules/@angular/material": { + "version": "17.3.6", + "resolved": "https://registry.npmjs.org/@angular/material/-/material-17.3.6.tgz", + "integrity": "sha512-sttN0JNvd2QvCCFIsxb5noiy7tgQdWrwvmrkJ+3KguHh5X84jDliA/d8N7Xgy2IBLnS/q/Hl9DdRCOiItWG1bw==", + "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.3.6", + "@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.3.6", "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-17.3.6.tgz", @@ -2877,6 +2962,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.3.6", "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-17.3.6.tgz", @@ -3704,10 +4541,9 @@ "dev": true }, "node_modules/@types/node": { - "version": "20.12.7", - "resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.7.tgz", - "integrity": "sha512-wq0cICSkRLVaf3UGLMGItu/PtdY7oaXaI/RVU+xliKVOtRna3PRY57ZDfztpDL0n11vfymMUnXv8QwYCO7L1wg==", - "dev": true, + "version": "20.12.12", + "resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.12.tgz", + "integrity": "sha512-eWLDGF/FOSPtAvEqeRAQ4C8LSA7M1I7i0ky1I8U7kD1J5ITyW3AsRhQrKVoWf5pFKZ2kILsEGJhsI9r93PYnOw==", "dependencies": { "undici-types": "~5.26.4" } @@ -3778,6 +4614,12 @@ "@types/node": "*" } }, + "node_modules/@types/underscore": { + "version": "1.11.15", + "resolved": "https://registry.npmjs.org/@types/underscore/-/underscore-1.11.15.tgz", + "integrity": "sha512-HP38xE+GuWGlbSRq9WrZkousaQ7dragtZCruBVMi0oX1migFZavZ3OROKHSkNp/9ouq82zrWtZpg18jFnVN96g==", + "dev": true + }, "node_modules/@types/ws": { "version": "8.5.10", "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.10.tgz", @@ -5721,7 +6563,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" }, @@ -9224,7 +10066,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" }, @@ -10192,6 +11034,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.71.1", "resolved": "https://registry.npmjs.org/sass/-/sass-1.71.1.tgz", @@ -11306,6 +12153,11 @@ "node": "*" } }, + "node_modules/underscore": { + "version": "1.13.6", + "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.13.6.tgz", + "integrity": "sha512-+A5Sja4HP1M08MaXya7p5LvjuM7K6q/2EaC0+iovj/wOcMsTzMvDFbasi/oSapiwOlt252IqsKqPjCl7huKS0A==" + }, "node_modules/undici": { "version": "6.11.1", "resolved": "https://registry.npmjs.org/undici/-/undici-6.11.1.tgz", @@ -11318,8 +12170,7 @@ "node_modules/undici-types": { "version": "5.26.5", "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz", - "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==", - "dev": true + "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==" }, "node_modules/unicode-canonical-property-names-ecmascript": { "version": "2.0.0", diff --git a/package.json b/package.json index 4a46865..0bb7d86 100644 --- a/package.json +++ b/package.json @@ -10,16 +10,20 @@ }, "private": true, "dependencies": { - "@angular/animations": "^17.3.0", + "@angular/animations": "^17.3.6", + "@angular/cdk": "^17.3.6", "@angular/common": "^17.3.0", "@angular/compiler": "^17.3.0", "@angular/core": "^17.3.0", "@angular/forms": "^17.3.0", + "@angular/material": "^17.3.6", "@angular/platform-browser": "^17.3.0", "@angular/platform-browser-dynamic": "^17.3.0", "@angular/router": "^17.3.0", + "@types/node": "^20.12.12", "rxjs": "~7.8.0", "tslib": "^2.3.0", + "underscore": "^1.13.6", "zone.js": "~0.14.3" }, "devDependencies": { @@ -27,6 +31,7 @@ "@angular/cli": "^17.3.6", "@angular/compiler-cli": "^17.3.0", "@types/jasmine": "~5.1.0", + "@types/underscore": "^1.11.15", "jasmine-core": "~5.1.0", "karma": "~6.4.0", "karma-chrome-launcher": "~3.2.0", diff --git a/src/app/about/about.component.html b/src/app/about/about.component.html new file mode 100644 index 0000000..2cd6c63 --- /dev/null +++ b/src/app/about/about.component.html @@ -0,0 +1,106 @@ +
+

About.

+ + +
+
+
+ + +
+
+
+
Frontend-Developer
+

+ I'm Lukas, a Junior level Web Developer with a strong focus on frontend design, residing near Vienna, Austria. I find immense joy and pride in taking an idea from conception to a fully realized webpage or application, all while continuously learning and growing along the way. +

+ My passion for software development stems from my commitment to delivering my best work and improving with each project. In my spare time, I love cooking (eating as well), sharing laughs with my mom while poking fun at interior design mishaps on television, and rescuing my plants from the brink of dehydration—sometimes I get so engrossed in perfecting that div layout that I forget to water them. +

+
+
+
Personal Information
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +
+ +
+
+ + +
+
Services
+
+ +
WEB-DEVELOPMENT
+

+ My goal is to enhance the online experience of users by optimized performance and accessibility as well as visually appealing layouts. +

+
+
+ +
RESPONSIVE-DESIGN
+

+ I aim to utilize proper methods and techniques to craft designs that adapt seamlessly to screen sizes and devices, prioritizing an optimal user experience.

+
+
+ +
USABILITY & DETAILS
+

+ Combining my keen eye to detail and knowledge in heuristics, design principles, and other critical elements, I am dedicated to continuously enhancing both new and existing designs. +

+
+
+ + +
+
Interests & Hobbies
+
+ +
Manga
+

I'm a big fan of new stories and developments and I look forward to sharing them with my future family someday.

+
+
+ +
Gaming
+

Despite not being an avid gamer, I enjoy the sense of community and spontaneous conversations with other players. It's a great way to unwind and relax after particularly stressful days.

+
+
+ +
Meditation
+

It took me some time to learn how to focus on my problems and weaknesses to process and improve them.

+
+
+ +
Golf
+

+ I'm a former hcp -2 player who still knows what it takes to make the 1m put 10/10 times under pressure. For years I lived all day long on the golf course and good results do not come from luck and good hope. +

+
+
+
diff --git a/src/app/about/about.component.scss b/src/app/about/about.component.scss new file mode 100644 index 0000000..7b0d44d --- /dev/null +++ b/src/app/about/about.component.scss @@ -0,0 +1,194 @@ +.about { + overflow-y: auto; +} + +h2 { + &:after { + content: 'WHAT I DO'; + } +} + +.column { + display: inline-table; + margin-top: 100px; +} + +.wrapper_about_profile { + margin: 0px 100px; + display: flex; +} + +#about_first_info { + width: 30%; + float: left; + order: 1; +} + +#about_second_info { + width: 40%; + order: 2; +} + +#about_third_info { + width: 30%; + order: 3; +} + +#about_second_info p { + text-align: justify; + font-size: 16px; + margin-left: 50px; + opacity: 0.7; +} + +#about_second_info h5, +#about_third_info h5 { + margin: 0px 0px 25px 50px; +} + +.profile_picture { + text-align: center; +} + +#signature_img { + // TODO: first vers only for 1440px width!! + // width: 200px; + position: absolute; + top: 85%; + left: 30%; + filter: var(--signature-color); +} + +.wrapper_img { + position: relative; + + &:before { + content: ''; + position: absolute; + inset: 5px; + transform: translate(15%, -15px); + z-index: -1; + background: var(--about-shadow); + // background: var(--yqni13-gradient); + filter: blur(15px); + width: 82%; + } +} + +.profile_picture img { + width: 85%; + max-width: 330px; + height: auto; + border-radius: 20px; +} + +#profile_img { + background-image: var(--about-imgbg); +} + +#info_form, +.download_button { + text-align: left; + margin-left: 50px; + font-size: 18px; +} + +#info_form label { + color: var(--header-color); + font-weight: bold; + font-size: 20px; +} + +#info_form input { + color: var(--text-color); + opacity: 0.7; + padding-left: 10px; + border: none; + background-color: transparent; + font-size: 16px; + font-family: TimesNewRoman; +} + +#info_form div { + padding: 5px 0px; + width: max-content; +} + +.download_button { + margin-top: 25px; +} + +.download_button a { + padding: 10px 25px; + border: solid var(--button-color) 3px; + text-decoration: none; + background: transparent; + color: var(--button-color); + border-color: var(--button-color); + border-style: outset; + border-radius: 10px; + font-weight: bold; + cursor: pointer; + letter-spacing: 1px; +} + +.download_button a:hover { + background-color: var(--button-color); + color: var(--alice-blue); + opacity: 0.6; + border: solid var(--button-color) 1px; + border-style: inset; +} + +.about_service, +.about_funfacts { + h5 { + text-align: center; + margin-bottom: 50px; + font-style: italic; + letter-spacing: 3px; + } + margin: 100px 100px 25px 100px; +} + +.column_service h6, +.column_funfacts h6 { + text-transform: uppercase; + font-size:20px; + color: var(--header-color); + margin:10px 0px 20px 0px; +} + +.about_service, +.about_funfacts { + p { + width: 75%; + font-size: 16px; + opacity: 0.7; + text-align: justify; + } +} + +.column_service { + width: 33.33%; + display: inline-table; + text-align: -webkit-center; +} + +.column_service i, +.column_funfacts i { + background-image: var(--yqni13-gradient); + width:50px; + height:50px; +} + +.column_service p { + margin-left: 0px; + max-width: 60%; +} + +.column_funfacts { + width: 25%; + display: inline-table; + text-align: -webkit-center; +} \ No newline at end of file diff --git a/src/app/about/about.component.spec.ts b/src/app/about/about.component.spec.ts new file mode 100644 index 0000000..2765140 --- /dev/null +++ b/src/app/about/about.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { AboutComponent } from './about.component'; + +describe('AboutComponent', () => { + let component: AboutComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [AboutComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(AboutComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/about/about.component.ts b/src/app/about/about.component.ts new file mode 100644 index 0000000..1e2de41 --- /dev/null +++ b/src/app/about/about.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-about', + templateUrl: './about.component.html', + styleUrl: './about.component.scss' +}) +export class AboutComponent { + +} diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 0297262..c94d3ed 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -1,7 +1,69 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; +import { HomeComponent } from './home/home.component'; +import { AboutComponent } from './about/about.component'; +import { CvComponent } from './cv/cv.component'; +import { PortfolioComponent } from './portfolio/portfolio.component'; +import { PortfolioFrontendComponent } from './portfolio/frontend/portfolio-frontend.component'; +import { PortfolioMiniComponent } from './portfolio/mini/portfolio-mini.component'; +import { PortfolioAllComponent } from './portfolio/all/portfolio-all.component'; +import { PortfolioFullstackComponent } from './portfolio/fullstack/portfolio-fullstack.component'; -const routes: Routes = []; +const routes: Routes = [ + { + path: '', + component: HomeComponent, + title: 'Home' + }, + { + path: 'home', + component: HomeComponent, + title: 'Home' + }, + { + path: 'about', + component: AboutComponent, + title: 'About' + }, + { + path: 'cv', + component: CvComponent, + title: 'CV' + }, + { + path: 'portfolio', + component: PortfolioComponent, + title: 'Portfolio', + children: [ + { + path: '', + redirectTo: '/portfolio/all', + pathMatch: 'full' + }, + { + path: 'all', + component: PortfolioAllComponent, + }, + { + path: 'frontend', + component: PortfolioFrontendComponent, + }, + { + path: 'fullstack', + component: PortfolioFullstackComponent, + }, + { + path: 'mini', + component: PortfolioMiniComponent + } + ] + }, + { + path: '**', // if parameter is unknown (manually changed) + redirectTo: '/home', + title: 'Home' + }, +]; @NgModule({ imports: [RouterModule.forRoot(routes)], diff --git a/src/app/app.component.html b/src/app/app.component.html index d5d2fdb..1da6e8e 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,8 +1,42 @@ -
-

{{title}}, welcome!

-
+ - + + diff --git a/src/app/app.component.scss b/src/app/app.component.scss index 97e2113..9c6586d 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -1,3 +1,118 @@ -h1 { - color: var(--phtalo-green); -} \ No newline at end of file +span { + padding: 0px 10px 0px 10px; + font-size: 1.5rem; + color: var(--navbar-text); + opacity: 0.8; +} + +span:hover { + background: var(--active-link); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +.nav-bar { + justify-content: left; + display: block; +} + +.nav-bar ul { + height: 100%; + overflow: auto; + position: fixed; + margin: 0; + padding: 0; + scrollbar-width: none; + background-color: var(--navbar-bg); + border-right: solid var(--navbar-border) 3px; + + display: flex; + flex-direction: column; +} + +.nav-bar span { + text-align:right; +} + +.nav-bar li { + display: block; + text-decoration: none; + cursor: pointer; + padding: 30px 0px 0px 0px; + + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.nav-collapse { + align-self: center; + padding-top: 0px; + color: var(--navbar-text); +} + +#nav-darkmode { + color: var(--darkmode6-grey2); +} + +#nav-lightmode { + color: var(--tangerine-yellow); +} + +ul>:last-child { + margin-top: auto; + margin-bottom: 5%; + text-align: center; +} + +#nav-logo { + cursor: default; +} + +.setVisible { + visibility: visible; + display: inline; +} + +.setHidden { + visibility:hidden; + display: none; +} + +.link_icons i { + color: var(--navbar-content); + width: 20px; + height: 20px; + margin: 5px 8.5px; +} + +.link_icons img { + width: 20px; + height: 20px; + color: var(--navbar-content); + margin: 5px 8.5px; +} + +.link_icons i:hover, +.link_icons img:hover { + opacity: 0.4; +} + +#nav-darkmode { + padding-left: 5px; +} + +#nav-copyright { + width:12px; + height: 12px; + color: var(--navbar-content); + margin-right: 5px; + vertical-align: top; + height: 16px; +} + +ul>:last-child p { + color: var(--navbar-content); + font-size: 12px; +} + diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 5f61533..3fbdf21 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,10 +1,85 @@ -import { Component } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; +import { Router } from '@angular/router'; +import _ from 'underscore'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrl: './app.component.scss' }) -export class AppComponent { +export class AppComponent implements OnInit { + title = 'portfolio'; + setDark: string = ""; + setLight: string = ""; + mobileNavExpended = false; + + constructor(private router: Router) {} + + ngOnInit() { + this.router.navigate(['home']); + this.checkThemeCookie(); + this.setNavWidthDynamically(window.screen.width); + var widthRequestSlowedDown = _.debounce( () => { + this.setNavWidthDynamically(window.screen.width); + }, 125) + window.addEventListener("resize", widthRequestSlowedDown, false); + } + + setDarkMode() { + this.setDark = "setVisible"; + this.setLight = "setHidden"; + localStorage.setItem("theme", "dark"); + document.body.setAttribute("data-theme", 'dark'); + } + + setLightMode() { + this.setDark = "setHidden"; + this.setLight = "setVisible"; + localStorage.setItem("theme", "light"); + document.body.setAttribute("data-theme", 'light'); + } + + setNavWidthDynamically(width: number): void { + // sets data attribute for body and in media.scss style settings are applied + + if(width > 768) { + document.body.setAttribute("data-nav", 'navDesktop'); + } else { + document.body.setAttribute("data-nav", 'navMobileCollapsed'); + } + } + + expandNavMobile(closeAfterRouting = false): void { + const screenWidth = window.screen.width; + if(screenWidth <= 768 && closeAfterRouting) this.mobileNavExpended = true; + if(screenWidth > 768 && !closeAfterRouting) return; + + if(screenWidth <= 768) { + if(this.mobileNavExpended) { + document.body.setAttribute("data-nav", 'navMobileCollapsed') + this.mobileNavExpended = false; + } else { + document.body.setAttribute("data-nav", 'navMobileExtended') + this.mobileNavExpended = true; + } + } + } + + checkThemeCookie() { + let theme = localStorage.getItem("theme"); + if(!theme) { + this.setDarkMode(); + return; + } + + if(theme === 'dark') { + this.setDarkMode(); + } else if (theme === 'light') { + this.setLightMode(); + } + } + + } + diff --git a/src/app/app.module.ts b/src/app/app.module.ts index b1c6c96..b76754e 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,16 +1,29 @@ import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; +import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; +import { MatToolbarModule } from '@angular/material/toolbar'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; +import { HomeComponent } from './home/home.component'; +import { AboutComponent } from './about/about.component'; +import { PortfolioComponent } from './portfolio/portfolio.component'; +import { CvComponent } from './cv/cv.component'; + @NgModule({ declarations: [ - AppComponent + AppComponent, + HomeComponent, + AboutComponent, + PortfolioComponent, + CvComponent ], imports: [ BrowserModule, - AppRoutingModule + AppRoutingModule, + BrowserAnimationsModule, + MatToolbarModule, ], providers: [], bootstrap: [AppComponent] diff --git a/src/app/cv/cv.component.html b/src/app/cv/cv.component.html new file mode 100644 index 0000000..66ad3b4 --- /dev/null +++ b/src/app/cv/cv.component.html @@ -0,0 +1,51 @@ +
+

CV.

+ +
+
+

Experience

+

+ Evolit Consulting GmbH, Vienna
+ 07/2022 - 12/2023
+ Fullstack-Development | Testing +

+
+
+

Education

+

+ UAS Technikum Vienna
+ 2020 - 2023
+ Computer Science, BSc +

+
+
+
+ +

Technical skills

+ +
+
    +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
+
+
+ +
diff --git a/src/app/cv/cv.component.scss b/src/app/cv/cv.component.scss new file mode 100644 index 0000000..20ac9cb --- /dev/null +++ b/src/app/cv/cv.component.scss @@ -0,0 +1,131 @@ +.cv { + overflow-y: auto; +} + +h2 { + &:after { + content: 'RESUME'; + } +} + +.cv_download { + text-align: center; + margin: 50px 100px; + text-transform: uppercase; +} + +.cv_download a { + padding: 10px 25px; + text-decoration: none; + background: transparent; + color: var(--yqni13-pink); + border: solid var(--yqni13-pink) 3px; + border-style: outset; + border-radius: 10px; + font-weight: bold; + cursor: pointer; + letter-spacing: 1px; +} + +.cv_download a:hover { + background-color: var(--yqni13-pink); + color: var(--alice-blue); + opacity: 0.6; + border: solid var(--yqni13-pink) 1px; + border-style: inset; +} + +.block { + margin-bottom: 100px; + h4 { + font-style: italic; + letter-spacing: 3px; + } + p { + opacity: 0.7; + } +} + +h4, p { + padding:0; + margin:0; +} + +.wrapper_cv h4 { + margin-bottom: 25px; +} + +.wrapper_cv { + display: grid; + grid-template-columns: 50% 50%; + margin-left: 100px; + margin-right: 100px; +} + +.left_exp { + margin-left: 50px; + text-align: left; + h4 { + text-align: left; + padding-left: 15px; + } + p { + padding-left: 15px; + border-left-width: 4px; + border-left-color: var(--yqni13-pink); + border-left-style: double; + } +} + +.right_edu { + margin-right: 50px; + text-align: right; + h4 { + text-align: right; + padding-right: 15px; + } + p { + padding-right: 15px; + border-right-width: 4px; + border-right-color: var(--yqni13-pink); + border-right-style: double; + } +} + +.wrapper_techstack { + margin: 0px 100px; +} + +.wrapper_techstack h4 { + text-align: center; +} + +.wrapper_ul { + text-align: -webkit-center; +} + +.wrapper_ul ul { + padding-inline-start: 0; +} + +.wrapper_ul li { + display: inline; +} + +.wrapper_ul i { + width: 60px; + height: 60px; + margin: 25px 25px; +} + +#horizontal { + height: 60px; + width:90px!important; +} + +#black_fill { + background-color: var(--github-color); +} + + + diff --git a/src/app/cv/cv.component.spec.ts b/src/app/cv/cv.component.spec.ts new file mode 100644 index 0000000..bd6cd91 --- /dev/null +++ b/src/app/cv/cv.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { CvComponent } from './cv.component'; + +describe('CvComponent', () => { + let component: CvComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [CvComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(CvComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/cv/cv.component.ts b/src/app/cv/cv.component.ts new file mode 100644 index 0000000..956605d --- /dev/null +++ b/src/app/cv/cv.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-cv', + templateUrl: './cv.component.html', + styleUrl: './cv.component.scss' +}) +export class CvComponent { + +} diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html new file mode 100644 index 0000000..10502f4 --- /dev/null +++ b/src/app/home/home.component.html @@ -0,0 +1,19 @@ +
+
+

+ Hi, I'm {{user.firstname}}!
+ Frontend-Developer +

+

+ "When you take on a task, + finding the best ways to achieve + the desired result is always your responsibility." +
- Gilbert's Law +

+
+
+
+ +
+
+
diff --git a/src/app/home/home.component.scss b/src/app/home/home.component.scss new file mode 100644 index 0000000..3dfa420 --- /dev/null +++ b/src/app/home/home.component.scss @@ -0,0 +1,62 @@ +.home { + height: 100vh; + align-content: center; + overflow: hidden; + display: flex; + flex-direction: row; + flex-wrap: wrap; + + z-index: 1; + background-color: transparent; +} + +// img { +// width:100vw; +// height: 100vh; +// position: fixed; +// z-index:-1; +// mix-blend-mode: screen; +// opacity:0.25; +// } + +.home::before { + background-image: url("../../assets/img/wallpaper3.png"); + background-size: cover; + background-position-y: 20%; + opacity: var(--opacity-bg); + z-index: -1; + width: 100%; + height: 100%; + content: ''; + position: fixed; +} + +.column { + display: flex; + flex-direction: column; +} + +.left { + align-self: center; + text-align: left; +} + +#frontend { + background: var(--home-frontend); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +.left p { + color: var(--header-color); +} + +.profile-picture { + rotate: -5deg; + border-radius: 25px; + img { + background-image: var(--home-img); + border-radius:30px; + border: solid var(--navbar-border) 2px; + } +} \ No newline at end of file diff --git a/src/app/home/home.component.spec.ts b/src/app/home/home.component.spec.ts new file mode 100644 index 0000000..6a570bb --- /dev/null +++ b/src/app/home/home.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { HomeComponent } from './home.component'; + +describe('HomeComponent', () => { + let component: HomeComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [HomeComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(HomeComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts new file mode 100644 index 0000000..445978c --- /dev/null +++ b/src/app/home/home.component.ts @@ -0,0 +1,18 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-home', + templateUrl: './home.component.html', + styleUrl: './home.component.scss' +}) +export class HomeComponent { + user = { + firstname: "Lukas", + lastname: "Varga", + alias: "yqni13" + } + + constructor() {} + + +} diff --git a/src/app/portfolio/all/portfolio-all.component.html b/src/app/portfolio/all/portfolio-all.component.html new file mode 100644 index 0000000..c72c727 --- /dev/null +++ b/src/app/portfolio/all/portfolio-all.component.html @@ -0,0 +1,190 @@ +
+
+ no picture available +
+

{{projectData[0].title}} + + + +

+

+ {{projectData[0].text}} +

+ Version: {{projectData[0].version}} +

+ +
+
+
+ no picture available +
+

{{projectData[1].title}} + + + +

+

+ {{projectData[0].text}} +

+ Version: {{projectData[1].version}}, University Project +

+ +
+
+
+ no picture available +
+

{{projectData[2].title}} + + + +

+

+ {{projectData[2].text}} +

+ Version: {{projectData[2].version}} +

+ +
+
+
+ no picture available +
+

{{projectData[3].title}} + + + +

+

+ {{projectData[3].text}} +

+ Version: {{projectData[3].version}} +

+ +
+
+
+ no picture available +
+

{{projectData[4].title}} + + + +

+

+ {{projectData[4].text}} +

+ Version: {{projectData[4].version}} +

+ +
+
+
+ no picture available +
+

{{projectData[5].title}} + + + +

+

+ {{projectData[5].text}} +

+ Version: {{projectData[5].version}} +

+ +
+
+
+ no picture available +
+

{{projectData[6].title}} + + + +

+

+ {{projectData[6].text}} +

+ Version: {{projectData[6].version}} +

+ +
+
+
diff --git a/src/app/portfolio/all/portfolio-all.component.ts b/src/app/portfolio/all/portfolio-all.component.ts new file mode 100644 index 0000000..8c8dced --- /dev/null +++ b/src/app/portfolio/all/portfolio-all.component.ts @@ -0,0 +1,24 @@ +import { Component } from "@angular/core"; + +interface MyProjectJSON { + order: number + title: string + version: string + type: string + text: string +} +@Component({ + selector: 'app-portfolio-all', + templateUrl: './portfolio-all.component.html', + styleUrl: '../portfolio.component.scss' +}) +export class PortfolioAllComponent { + + projectJSONData = require("../../../json/project-data.json"); + projectData: MyProjectJSON[]; + + constructor() { + this.projectData = this.projectJSONData; + } + +} \ No newline at end of file diff --git a/src/app/portfolio/frontend/portfolio-frontend.component.html b/src/app/portfolio/frontend/portfolio-frontend.component.html new file mode 100644 index 0000000..dcd0785 --- /dev/null +++ b/src/app/portfolio/frontend/portfolio-frontend.component.html @@ -0,0 +1,28 @@ +
+
+ +
+

{{projectData[0].title}} + + + +

+

+ {{projectData[0].text}} +

+ Version: {{projectData[0].version}} +

+ +
+
+
\ No newline at end of file diff --git a/src/app/portfolio/frontend/portfolio-frontend.component.ts b/src/app/portfolio/frontend/portfolio-frontend.component.ts new file mode 100644 index 0000000..0029baa --- /dev/null +++ b/src/app/portfolio/frontend/portfolio-frontend.component.ts @@ -0,0 +1,25 @@ +import { Component } from "@angular/core"; + +interface MyProjectJSON { + order: number + title: string + version: string + type: string + text: string +} + +@Component({ + selector: 'app-portfolio-frontend', + templateUrl: './portfolio-frontend.component.html', + styleUrl: '../portfolio.component.scss' +}) +export class PortfolioFrontendComponent { + + projectJSONData = require("../../../json/project-data.json"); + projectData: MyProjectJSON[]; + + constructor() { + this.projectData = this.projectJSONData; + } + +} \ No newline at end of file diff --git a/src/app/portfolio/fullstack/portfolio-fullstack.component.html b/src/app/portfolio/fullstack/portfolio-fullstack.component.html new file mode 100644 index 0000000..ce98a43 --- /dev/null +++ b/src/app/portfolio/fullstack/portfolio-fullstack.component.html @@ -0,0 +1,34 @@ +
+
+ no picture available +
+

{{projectData[1].title}} + + + +

+

+ {{projectData[1].text}} +

+ Version: {{projectData[1].version}}, University Project +

+ +
+
+
\ No newline at end of file diff --git a/src/app/portfolio/fullstack/portfolio-fullstack.component.ts b/src/app/portfolio/fullstack/portfolio-fullstack.component.ts new file mode 100644 index 0000000..6cea1d7 --- /dev/null +++ b/src/app/portfolio/fullstack/portfolio-fullstack.component.ts @@ -0,0 +1,25 @@ +import { Component } from "@angular/core"; + +interface MyProjectJSON { + order: number + title: string + version: string + type: string + text: string +} + +@Component({ + selector: 'app-portfolio-fullstack', + templateUrl: './portfolio-fullstack.component.html', + styleUrl: '../portfolio.component.scss' +}) +export class PortfolioFullstackComponent { + + projectJSONData = require("../../../json/project-data.json"); + projectData: MyProjectJSON[]; + + constructor() { + this.projectData = this.projectJSONData; + } + +} \ No newline at end of file diff --git a/src/app/portfolio/mini/portfolio-mini.component.html b/src/app/portfolio/mini/portfolio-mini.component.html new file mode 100644 index 0000000..80d841b --- /dev/null +++ b/src/app/portfolio/mini/portfolio-mini.component.html @@ -0,0 +1,132 @@ +
+
+ no picture available +
+

{{projectData[2].title}} + + + +

+

+ {{projectData[2].text}} +

+ Version: {{projectData[2].version}} +

+ +
+
+
+ no picture available +
+

{{projectData[3].title}} + + + +

+

+ {{projectData[3].text}} +

+ Version: {{projectData[3].version}} +

+ +
+
+
+ no picture available +
+

{{projectData[4].title}} + + + +

+

+ {{projectData[4].text}} +

+ Version: {{projectData[4].version}} +

+ +
+
+
+ no picture available +
+

{{projectData[5].title}} + + + +

+

+ {{projectData[5].text}} +

+ Version: {{projectData[5].version}} +

+ +
+
+
+ no picture available +
+

{{projectData[6].title}} + + + +

+

+ {{projectData[6].text}} +

+ Version: {{projectData[6].version}} +

+ +
+
+
\ No newline at end of file diff --git a/src/app/portfolio/mini/portfolio-mini.component.ts b/src/app/portfolio/mini/portfolio-mini.component.ts new file mode 100644 index 0000000..5c17514 --- /dev/null +++ b/src/app/portfolio/mini/portfolio-mini.component.ts @@ -0,0 +1,25 @@ +import { Component } from "@angular/core"; + +interface MyProjectJSON { + order: number + title: string + version: string + type: string + text: string +} + +@Component({ + selector: 'app-portfolio-mini', + templateUrl: './portfolio-mini.component.html', + styleUrl: '../portfolio.component.scss' +}) +export class PortfolioMiniComponent { + + projectJSONData = require("../../../json/project-data.json"); + projectData: MyProjectJSON[]; + + constructor() { + this.projectData = this.projectJSONData; + } + +} \ No newline at end of file diff --git a/src/app/portfolio/portfolio-routing.module.ts b/src/app/portfolio/portfolio-routing.module.ts new file mode 100644 index 0000000..bdea530 --- /dev/null +++ b/src/app/portfolio/portfolio-routing.module.ts @@ -0,0 +1,32 @@ +import { RouterModule, Routes } from "@angular/router"; +import { NgModule } from "@angular/core"; +import { PortfolioMiniComponent } from "./mini/portfolio-mini.component"; +import { PortfolioFrontendComponent } from "./frontend/portfolio-frontend.component"; +import { PortfolioAllComponent } from "./all/portfolio-all.component"; +import { PortfolioFullstackComponent } from "./fullstack/portfolio-fullstack.component"; + + +const routes: Routes = [ + { + path: 'all', + component: PortfolioAllComponent, + }, + { + path: 'frontend', + component: PortfolioFrontendComponent, + }, + { + path: 'fullstack', + component: PortfolioFullstackComponent, + }, + { + path: 'mini', + component: PortfolioMiniComponent, + }, +]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule], +}) +export class PortfolioRoutingModule { } \ No newline at end of file diff --git a/src/app/portfolio/portfolio.component.html b/src/app/portfolio/portfolio.component.html new file mode 100644 index 0000000..430c2f1 --- /dev/null +++ b/src/app/portfolio/portfolio.component.html @@ -0,0 +1,19 @@ +
+

Portfolio.

+ + + +
\ No newline at end of file diff --git a/src/app/portfolio/portfolio.component.scss b/src/app/portfolio/portfolio.component.scss new file mode 100644 index 0000000..c35f9fc --- /dev/null +++ b/src/app/portfolio/portfolio.component.scss @@ -0,0 +1,135 @@ +$card-border: 10px; + +.portfolio { + overflow-y: auto; +} + +h2 { + &:after { + content: 'MY WORK'; + } +} + +h4 { + // portfolio cards h4 always stay white due to structure! + color: var(--alice-blue)!important; +} + +.portfolio-wrapper { + display: flex; + flex-wrap: wrap; + margin: 0px 100px 25px 100px; + justify-content: center; +} + +.page-header { + display: inline-flex; + margin: 25px 0px; +} + +.page-header span { + font-weight: bold; + font-size: 20px; +} + +.page-header span:hover { + background: var(--active-link); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +.portfolio-page { + padding: 15px; + cursor: pointer; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; +} + +span { + color: var(--header-color); +} + +.card { + position: relative; + display:flex; + flex-direction: column; + text-align: left; /* added technology symbols otherwise centered */ + align-items: center; + justify-content: end; + margin: 4px; + + $border-width: 2px; + background-clip: padding-box; + border: solid $border-width transparent; + border-radius: 10px; + + &:before { + content: ''; + position: absolute; + top: 0; right: 0; bottom: 0; left: 0; + z-index: -1; + margin: -$border-width; + border-radius: inherit; + background: var(--portfolio-card); + // background: var(--yqni13-gradient); + } +} + +.card img { + height: auto; + margin: 0px 2px 0px 2px; + color: var(--alice-blue); + border-radius: $card-border; +} + +.card img:hover +{ + opacity: 0.25; +} + +.card:hover .card-text { + opacity: 1; +} + +.card-text a.a-github { + margin-left: 10px; +} + + +.card-text { + opacity: 0; + position: absolute; + width: 100%; + height: 100%; + align-content: end; + backdrop-filter: blur(2px) brightness(0.5); + border-radius: $card-border; +} + +.card-text p { + color: var(--alice-blue); + text-align: justify; +} + +.card-technology i { + margin: 10px 20px 10px 0px; +} + +.card:hover .icon-GitHub { + animation-name: github-animation; + animation-duration: 2s; +} + +@keyframes github-animation { + to { transform: scale(1.5) }; + to { transform: rotate(360deg) }; +} + +.icon-GitHub:hover { + opacity:0.4; +} + +.a-github { + color: var(--alice-blue); +} \ No newline at end of file diff --git a/src/app/portfolio/portfolio.component.spec.ts b/src/app/portfolio/portfolio.component.spec.ts new file mode 100644 index 0000000..aff3647 --- /dev/null +++ b/src/app/portfolio/portfolio.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PortfolioComponent } from './portfolio.component'; + +describe('PortfolioComponent', () => { + let component: PortfolioComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [PortfolioComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(PortfolioComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/portfolio/portfolio.component.ts b/src/app/portfolio/portfolio.component.ts new file mode 100644 index 0000000..e93c146 --- /dev/null +++ b/src/app/portfolio/portfolio.component.ts @@ -0,0 +1,11 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-portfolio', + templateUrl: './portfolio.component.html', + styleUrl: './portfolio.component.scss' +}) +export class PortfolioComponent { + + constructor() {} +} diff --git a/src/app/portfolio/portfolio.module.ts b/src/app/portfolio/portfolio.module.ts new file mode 100644 index 0000000..c71d7f6 --- /dev/null +++ b/src/app/portfolio/portfolio.module.ts @@ -0,0 +1,21 @@ +import { NgModule } from "@angular/core"; +import { PortfolioMiniComponent } from "./mini/portfolio-mini.component"; +import { PortfolioFrontendComponent } from "./frontend/portfolio-frontend.component"; +import { PortfolioRoutingModule } from "./portfolio-routing.module"; +import { CommonModule } from "@angular/common"; +import { PortfolioAllComponent } from "./all/portfolio-all.component"; +import { PortfolioFullstackComponent } from "./fullstack/portfolio-fullstack.component"; + +@NgModule({ + declarations: [ + PortfolioAllComponent, + PortfolioMiniComponent, + PortfolioFrontendComponent, + PortfolioFullstackComponent + ], + imports: [ + CommonModule, + PortfolioRoutingModule + ] +}) +export class PortfolioModule {} \ No newline at end of file diff --git a/src/assets/img/be_tourplanner.jpg b/src/assets/img/be_tourplanner.jpg new file mode 100644 index 0000000..76bc0fd Binary files /dev/null and b/src/assets/img/be_tourplanner.jpg differ diff --git a/src/assets/img/dailydev.png b/src/assets/img/dailydev.png new file mode 100644 index 0000000..1b9af95 Binary files /dev/null and b/src/assets/img/dailydev.png differ diff --git a/src/assets/img/ink4.png b/src/assets/img/ink4.png new file mode 100644 index 0000000..afeabb2 Binary files /dev/null and b/src/assets/img/ink4.png differ diff --git a/src/assets/img/transparent_profile_about.png b/src/assets/img/transparent_profile_about.png new file mode 100644 index 0000000..c6e48b0 Binary files /dev/null and b/src/assets/img/transparent_profile_about.png differ diff --git a/src/assets/img/transparent_profile_home.png b/src/assets/img/transparent_profile_home.png new file mode 100644 index 0000000..6f53b14 Binary files /dev/null and b/src/assets/img/transparent_profile_home.png differ diff --git a/src/assets/img/transparent_signature.png b/src/assets/img/transparent_signature.png new file mode 100644 index 0000000..10ae3a8 Binary files /dev/null and b/src/assets/img/transparent_signature.png differ diff --git a/src/assets/img/wallpaper3.png b/src/assets/img/wallpaper3.png new file mode 100644 index 0000000..8907d2a Binary files /dev/null and b/src/assets/img/wallpaper3.png differ diff --git a/src/assets/img/web_clock.jpg b/src/assets/img/web_clock.jpg new file mode 100644 index 0000000..c719d9c Binary files /dev/null and b/src/assets/img/web_clock.jpg differ diff --git a/src/assets/img/web_game1.jpg b/src/assets/img/web_game1.jpg new file mode 100644 index 0000000..9d5f64f Binary files /dev/null and b/src/assets/img/web_game1.jpg differ diff --git a/src/assets/img/web_music.jpg b/src/assets/img/web_music.jpg new file mode 100644 index 0000000..304d4c5 Binary files /dev/null and b/src/assets/img/web_music.jpg differ diff --git a/src/assets/img/web_rating.jpg b/src/assets/img/web_rating.jpg new file mode 100644 index 0000000..cd0d0d5 Binary files /dev/null and b/src/assets/img/web_rating.jpg differ diff --git a/src/assets/img/web_stopwatch.jpg b/src/assets/img/web_stopwatch.jpg new file mode 100644 index 0000000..b4a9ec3 Binary files /dev/null and b/src/assets/img/web_stopwatch.jpg differ diff --git a/src/assets/img/web_todo.jpg b/src/assets/img/web_todo.jpg new file mode 100644 index 0000000..85dedf8 Binary files /dev/null and b/src/assets/img/web_todo.jpg differ diff --git a/src/assets/pdf/Varga_Lebenslauf.pdf b/src/assets/pdf/Varga_Lebenslauf.pdf new file mode 100644 index 0000000..eed9d5f Binary files /dev/null and b/src/assets/pdf/Varga_Lebenslauf.pdf differ diff --git a/src/assets/readme_img/readme_dark_mode.png b/src/assets/readme_img/readme_dark_mode.png new file mode 100644 index 0000000..5c5176e Binary files /dev/null and b/src/assets/readme_img/readme_dark_mode.png differ diff --git a/src/assets/readme_img/readme_light_mode.png b/src/assets/readme_img/readme_light_mode.png new file mode 100644 index 0000000..027bc68 Binary files /dev/null and b/src/assets/readme_img/readme_light_mode.png differ diff --git a/src/assets/readme_img/readme_portfolio_card_hover.png b/src/assets/readme_img/readme_portfolio_card_hover.png new file mode 100644 index 0000000..e7c0c52 Binary files /dev/null and b/src/assets/readme_img/readme_portfolio_card_hover.png differ diff --git a/src/assets/readme_img/readme_portfolio_card_normal.png b/src/assets/readme_img/readme_portfolio_card_normal.png new file mode 100644 index 0000000..823f8db Binary files /dev/null and b/src/assets/readme_img/readme_portfolio_card_normal.png differ diff --git a/src/assets/readme_img/readme_portfolio_menu.png b/src/assets/readme_img/readme_portfolio_menu.png new file mode 100644 index 0000000..d613b65 Binary files /dev/null and b/src/assets/readme_img/readme_portfolio_menu.png differ diff --git a/src/assets/readme_img/readme_responsive_demonstration.png b/src/assets/readme_img/readme_responsive_demonstration.png new file mode 100644 index 0000000..4a4ada0 Binary files /dev/null and b/src/assets/readme_img/readme_responsive_demonstration.png differ diff --git a/src/docs/update_protocol.md b/src/docs/update_protocol.md new file mode 100644 index 0000000..e69de29 diff --git a/src/index.html b/src/index.html index d417ee3..1ed5e35 100644 --- a/src/index.html +++ b/src/index.html @@ -2,13 +2,13 @@ - Portfolio + yqni13 - + diff --git a/src/json/project-data.json b/src/json/project-data.json new file mode 100644 index 0000000..8e07a25 --- /dev/null +++ b/src/json/project-data.json @@ -0,0 +1,51 @@ +[ + { + "order": 0, + "title": "Music Player", + "version": "1.0", + "type": "frontend", + "text": "Simple music player, displaying playlist and current playing song in seperate areas. Songs can be played randomly or in loop while pausing and adjusting time and volume." + }, + { + "order": 1, + "title": "Tourplanner", + "version": "1.0", + "type": "fullstack", + "text": "App to plan tours was built with C# in a layer-based architecture meanwhile the UI was implemented via WPF. It enables to create tours with some information, multiple logs for a single tour and a graphical visualization." + }, + { + "order": 2, + "title": "ToDo-List", + "version": "1.2", + "type": "mini", + "text": "Mini web-project for a tool: the todo-list. Tasks can be entered via the input field by clicking the 'add'-button or hit enter key. Created tasks or whole list can be removed or highlighted as done by clicking on the entry itself." + }, + { + "order": 3, + "title": "Game", + "version": "1.0", + "type": "mini", + "text": "Mini web-project for a game user vs. random-generator. The user can choose a 'figure' and play against random choice. A counter shows the score of user and the system and additionally a message for win, loose or draw is shown after each game play." + }, + { + "order": 4, + "title": "Rating", + "version": "1.0", + "type": "mini", + "text": "Mini web-project to take a rating from 1 to 5 stars. Rating can be done by clicking on a star from left to right which fill up the stars with color (white equals not selected)." + }, + { + "order": 5, + "title": "Tik Tak", + "version": "1.0", + "type": "mini", + "text": "Mini web-project to show the current time of your time-zone and date." + }, + { + "order": 6, + "title": "Stopwatch", + "version": "1.0", + "type": "mini", + "text": "Mini web-project to stop the time you take to do anything. For a simple logic the user can start the timer, pause it and reset." + } +] \ No newline at end of file diff --git a/src/styles.scss b/src/styles.scss index 78e6a21..41a0c5d 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1,4 +1,90 @@ /* You can add global styles to this file, and also import other style files */ +@import "./stylesheets/media.scss"; +@import "./stylesheets/icons.scss"; +@import "./stylesheets/defines.scss"; @import "./stylesheets/colors.scss"; -@import "./stylesheets/media.scss"; \ No newline at end of file + +$font-selection: system-ui; + +html { + scrollbar-width: none; + cursor: context-menu; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; + font-family: $font-selection; +} + +body { + text-align: center; + width:100vw; + height:100vh; + margin:0; + background: var(--body-bg); + background-attachment: fixed; + background-repeat: no-repeat; +} + +mat-toolbar { + justify-content: center; +} + +h1, h2, h3, h4, h5 { + margin-block-start: 0px; + margin-block-end: 0px; + color: var(--header-color); +} + +h1 { + font-size: 50px; + text-align: left; + text-transform: uppercase; +} + +h2 { + font-size: 48px; + text-align: left; + margin: 50px 100px 0px 100px; + border-bottom: solid var(--border-line); + &:after { + font-size: 80px; + color: var(--highlight-grey); + position: absolute; + top: 17px; + left: 210px; + z-index: -1; + } +} + +/* only for portfolio card-text */ +h4 { + font-size:34px; + margin-block-end: -10px; + text-align: left; + margin-left: 50px; +} + +h5 { + font-size:28px; + text-align:left; +} + +.container { + margin-left: 12.5%; +} + +p { + color: var(--text-color); +} + +input { + font-family: $font-selection!important; +} + +.active-route { + background: var(--active-link); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + font-weight: bolder; +} diff --git a/src/stylesheets/colors.scss b/src/stylesheets/colors.scss index 946bac0..8b975f5 100644 --- a/src/stylesheets/colors.scss +++ b/src/stylesheets/colors.scss @@ -12,6 +12,17 @@ --off-white: #FBFBFB; --ivory-white: #FFFFF0; + /* black type colors */ + --obsidian-black: #0B1215; // nr 1 + --charcoal-grey: #171717; + --oil-black: #0C0C0C; + --darkslate-grey: #0D1717; + + /* dark blue type colors */ + --midnight-blue: #101720; + --deepnavy-blue: #011222; + --rich-black: #020D19; + /* dark mode theme#1 dark-red */ --darkmode1-black1: #000000; --darkmode1-red1: #3D0000; @@ -48,8 +59,74 @@ --darkmode6-grey2: #5C5470; --darkmode6-grey3: #DBD8E3; + /* white mode theme1 grey/brown/beige */ + --whitemode1-champagne: #8fd0b8; + --whitemode1-sand: #EECAAB; + --whitemode1-grey: #E9E6DB; + --whitemode1-cultured: #FBF7F4; + --whitemode1-pink: #ca7394; + /* other defined colors */ --phtalo-green: #0D413A; --bordeau-red: #420116; - --formel1-red: #910001; -} \ No newline at end of file + --tangerine-yellow: #f3b20e; + --acting-grey: #7e7e7e; + --highlight-grey: rgba(128, 128, 128, 0.4); + --tyrian-purple: #33002A; + + /* BACKGROUND-IMAGE LINEAR-GRADIENT */ + --yqni13-gradient: linear-gradient(167deg, #650D88 42%, #BC0C79 90%); + --portfolio-deepnavyblue: conic-gradient(from 0deg at 0% 0%,#f0f8ff 2% 6%, 7%, #011222 47% 9%); + --bg-gradientdark: conic-gradient(from 0deg at 0% 0%,#f0f8ff 2% 6%, 7%, #101720 47% 9%); + --gradient-tyrianpurple: conic-gradient(from 0deg at 0% 0%,#f0f8ff 0%, 25%, #33002a 47% 0%); + + /* filter to change color of png */ + // white --alice-blue + --signature-aliceblue: invert(100%) sepia(59%) saturate(5190%) hue-rotate(179deg) brightness(107%) contrast(107%); + // grey --highlight-grey + --signature-grey: invert(33%) sepia(9%) saturate(1336%) hue-rotate(216deg) brightness(94%) contrast(85%); +} + +[data-theme="light"] { + --navbar-bg: var(--tyrian-purple); + --navbar-content: var(--acting-grey); + --navbar-text: var(--alice-blue); + --navbar-border: var(--yqni13-pink); + --body-bg: var(--alice-blue); + --header-color: var(--darkmode6-grey1); + --text-color: var(--darkmode6-grey2); + --button-color: var(--whitemode1-pink); + --border-line: var(--yqni13-pink); + --home-img: var(--gradient-tyrianpurple); + --home-frontend: var(--yqni13-gradient); + --about-imgbg: var(--gradient-tyrianpurple); + --about-shadow: var(--portfolio-deepnavyblue); + --portfolio-card: var(--yqni13-gradient); + --signature-color: var(--signature-grey); + --github-color: var(--rich-black); + --active-link: var(--yqni13-pink); + --opacity-bg: 0.45; +} + +[data-theme="dark"] { + --navbar-bg: var(--deepnavy-blue); + --navbar-content: var(--acting-grey); + --navbar-text: var(--alice-blue); + --navbar-border: var(--highlight-grey); + --body-bg: var(--bg-gradientdark); + --header-color: var(--alice-blue); + --text-color: var(--alice-blue); + --button-color: var(--yqni13-pink); + --border-line: var(--alice-blue); + --home-img: var(--portfolio-deepnavyblue); + --home-frontend: var(--yqni13-gradient); + --about-imgbg: var(--portfolio-deepnavyblue); + --about-shadow: var(--yqni13-gradient); + --portfolio-card: var(--portfolio-deepnavyblue); + --signature-color: var(--signature-aliceblue); + --github-color: var(--alice-blue); + --active-link: var(--yqni13-gradient); + --opacity-bg: 0.25; +} + + diff --git a/src/stylesheets/defines.scss b/src/stylesheets/defines.scss new file mode 100644 index 0000000..74a6f87 --- /dev/null +++ b/src/stylesheets/defines.scss @@ -0,0 +1,38 @@ + + +/* width devices */ +$desktop-width: 1439px; +$tablet-landscape-width: 1024px; +$phone-landscape-width: 768px; +$phone-portrait-width: 480px; + + +/* window.screen.width <= 768px */ +[data-nav="navMobileExtended"] { + --nav-width: 100%; + --nav-z: 1; + --nav-copyright: 0 0 5px 0; + --nav-full: block; + --block-margin: 60px; + --nav-logo: 100px; +} + +/* window.screen.width <= 768px */ +[data-nav="navMobileCollapsed"] { + --nav-width: 60px; + --nav-z: 0; + --nav-copyright: 5px; + --nav-full: none; + --block-margin: 60px; +} + +[data-nav="navDesktop"] { + --nav-width: 180px; + --nav-z: 0; + --nav-copyright: 0 0 5px 0; + --nav-full: block; + --block-margin: 180px; + --nav-logo: 100px; +} + + diff --git a/src/stylesheets/icons.scss b/src/stylesheets/icons.scss new file mode 100644 index 0000000..1b134f1 --- /dev/null +++ b/src/stylesheets/icons.scss @@ -0,0 +1,362 @@ +/* Google Fonts Icons */ + +i { + font-style: normal; + font-weight: normal; + font-size: 25px; +} + +.icon-DarkMode:before { + font-family: "Material Icons"; + content: "\ea46"; +} +.icon-LightMode:before { + font-family: "Material Icons"; + content: "\e518"; +} +.icon-Language:before { + font-family: "Material Icons"; + content: "\e894"; +} +.icon-Translate:before { + font-family: "Material Icons"; + content: "\e8e2"; +} +.icon-Meditation { + display: inline-block; + width: 30px; + height: 30px; + --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M14.5 4.5a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Z'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m3 17l2.589-1.308A.752.752 0 0 0 6 15.02c0-2.94 2.138-5.454 5.007-5.937a6.02 6.02 0 0 1 1.986 0C15.863 9.566 18 12.08 18 15.02c0 .284.16.545.411.672L21 17'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m9.5 16l-1.042 1.389l-.063.084a2 2 0 0 1-1.034.686l-.102.026l-1.485.371A2.342 2.342 0 0 0 4 20.83c0 .646.524 1.17 1.171 1.17h1.556c.6 0 .9 0 1.19-.034a5 5 0 0 0 1.929-.643c.253-.147.493-.327.972-.687L11 20.5m0 0l2-1.5m-2 1.5l2.54.952c.61.229.914.343 1.229.417c.163.038.328.068.493.09c.321.041.647.041 1.298.041h2.269A1.17 1.17 0 0 0 20 20.829a2.342 2.342 0 0 0-1.774-2.273l-1.485-.37l-.102-.027a2 2 0 0 1-1.034-.686l-.063-.084L14.5 16'/%3E%3C/g%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%; +} +.icon-Golf { + display: inline-block; + width: 30px; + height: 30px; + --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23000' d='M378.841 342.034C339.372 327.825 287.223 320 232 320a537.769 537.769 0 0 0-80 5.793V211.157l152-56v-38.131l-152-71.2V16h-32v400h32v-57.834A501.048 501.048 0 0 1 232 352c51.621 0 99.921 7.153 136 20.143C403.43 384.9 416 399.43 416 408s-12.57 23.1-48 35.857C331.921 456.847 283.621 464 232 464s-99.921-7.153-136-20.143C60.57 431.1 48 416.57 48 408c0-7.89 10.669-20.832 40-32.788v-34.176c-.952.33-1.9.661-2.841 1C28 362.612 16 389.265 16 408s12 45.388 69.159 65.966C124.628 488.175 176.777 496 232 496s107.372-7.825 146.841-22.034C436 453.388 448 426.735 448 408s-12-45.388-69.159-65.966M152 81.163l114.586 53.675L152 177.054Z'/%3E%3Ccircle cx='432' cy='280' r='32' fill='%23000'/%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%; +} +.icon-Gaming { + display: inline-block; + width: 30px; + height: 30px; + --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='%23000'%3E%3Cpath d='M11.5 6.027a.5.5 0 1 1-1 0a.5.5 0 0 1 1 0m-1.5 1.5a.5.5 0 1 0 0-1a.5.5 0 0 0 0 1m2.5-.5a.5.5 0 1 1-1 0a.5.5 0 0 1 1 0m-1.5 1.5a.5.5 0 1 0 0-1a.5.5 0 0 0 0 1m-6.5-3h1v1h1v1h-1v1h-1v-1h-1v-1h1z'/%3E%3Cpath d='M3.051 3.26a.5.5 0 0 1 .354-.613l1.932-.518a.5.5 0 0 1 .62.39c.655-.079 1.35-.117 2.043-.117c.72 0 1.443.041 2.12.126a.5.5 0 0 1 .622-.399l1.932.518a.5.5 0 0 1 .306.729q.211.136.373.297c.408.408.78 1.05 1.095 1.772c.32.733.599 1.591.805 2.466s.34 1.78.364 2.606c.024.816-.059 1.602-.328 2.21a1.42 1.42 0 0 1-1.445.83c-.636-.067-1.115-.394-1.513-.773c-.245-.232-.496-.526-.739-.808c-.126-.148-.25-.292-.368-.423c-.728-.804-1.597-1.527-3.224-1.527s-2.496.723-3.224 1.527c-.119.131-.242.275-.368.423c-.243.282-.494.575-.739.808c-.398.38-.877.706-1.513.773a1.42 1.42 0 0 1-1.445-.83c-.27-.608-.352-1.395-.329-2.21c.024-.826.16-1.73.365-2.606c.206-.875.486-1.733.805-2.466c.315-.722.687-1.364 1.094-1.772a2.3 2.3 0 0 1 .433-.335l-.028-.079zm2.036.412c-.877.185-1.469.443-1.733.708c-.276.276-.587.783-.885 1.465a14 14 0 0 0-.748 2.295a12.4 12.4 0 0 0-.339 2.406c-.022.755.062 1.368.243 1.776a.42.42 0 0 0 .426.24c.327-.034.61-.199.929-.502c.212-.202.4-.423.615-.674c.133-.156.276-.323.44-.504C4.861 9.969 5.978 9.027 8 9.027s3.139.942 3.965 1.855c.164.181.307.348.44.504c.214.251.403.472.615.674c.318.303.601.468.929.503a.42.42 0 0 0 .426-.241c.18-.408.265-1.02.243-1.776a12.4 12.4 0 0 0-.339-2.406a14 14 0 0 0-.748-2.295c-.298-.682-.61-1.19-.885-1.465c-.264-.265-.856-.523-1.733-.708c-.85-.179-1.877-.27-2.913-.27s-2.063.091-2.913.27'/%3E%3C/g%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%; +} +.icon-Reading { + display: inline-block; + width: 30px; + height: 30px; + --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath fill='%23000' d='M928 161H699.2c-49.1 0-97.1 14.1-138.4 40.7L512 233l-48.8-31.3A255.2 255.2 0 0 0 324.8 161H96c-17.7 0-32 14.3-32 32v568c0 17.7 14.3 32 32 32h228.8c49.1 0 97.1 14.1 138.4 40.7l44.4 28.6c1.3.8 2.8 1.3 4.3 1.3s3-.4 4.3-1.3l44.4-28.6C602 807.1 650.1 793 699.2 793H928c17.7 0 32-14.3 32-32V193c0-17.7-14.3-32-32-32M324.8 721H136V233h188.8c35.4 0 69.8 10.1 99.5 29.2l48.8 31.3l6.9 4.5v462c-47.6-25.6-100.8-39-155.2-39m563.2 0H699.2c-54.4 0-107.6 13.4-155.2 39V298l6.9-4.5l48.8-31.3c29.7-19.1 64.1-29.2 99.5-29.2H888zM396.9 361H211.1c-3.9 0-7.1 3.4-7.1 7.5v45c0 4.1 3.2 7.5 7.1 7.5h185.7c3.9 0 7.1-3.4 7.1-7.5v-45c.1-4.1-3.1-7.5-7-7.5m223.1 7.5v45c0 4.1 3.2 7.5 7.1 7.5h185.7c3.9 0 7.1-3.4 7.1-7.5v-45c0-4.1-3.2-7.5-7.1-7.5H627.1c-3.9 0-7.1 3.4-7.1 7.5M396.9 501H211.1c-3.9 0-7.1 3.4-7.1 7.5v45c0 4.1 3.2 7.5 7.1 7.5h185.7c3.9 0 7.1-3.4 7.1-7.5v-45c.1-4.1-3.1-7.5-7-7.5m416 0H627.1c-3.9 0-7.1 3.4-7.1 7.5v45c0 4.1 3.2 7.5 7.1 7.5h185.7c3.9 0 7.1-3.4 7.1-7.5v-45c.1-4.1-3.1-7.5-7-7.5'/%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%; +} +.icon-GitHub { + display: inline-block; + width: 30px; + height: 30px; + --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2'/%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%; +} +.icon-GitLab { + display: inline-block; + width: 30px; + height: 30px; + background-repeat: no-repeat; + background-size: 100% 100%; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128'%3E%3Cpath fill='%23e24329' d='m124.755 51.382l-.177-.452L107.47 6.282a4.46 4.46 0 0 0-1.761-2.121a4.58 4.58 0 0 0-5.236.281a4.6 4.6 0 0 0-1.518 2.304L87.404 42.088H40.629L29.077 6.746a4.5 4.5 0 0 0-1.518-2.31a4.58 4.58 0 0 0-5.236-.281a4.5 4.5 0 0 0-1.761 2.121L3.422 50.904l-.17.452c-5.059 13.219-.763 28.192 10.537 36.716l.059.046l.157.111l26.061 19.516l12.893 9.758l7.854 5.93a5.28 5.28 0 0 0 6.388 0l7.854-5.93l12.893-9.758l26.218-19.634l.065-.052c11.273-8.526 15.562-23.472 10.524-36.677'/%3E%3Cpath fill='%23fc6d26' d='m124.755 51.382l-.177-.452a57.8 57.8 0 0 0-23.005 10.341L64 89.682c12.795 9.68 23.934 18.09 23.934 18.09l26.218-19.634l.065-.052c11.291-8.527 15.586-23.488 10.538-36.704'/%3E%3Cpath fill='%23fca326' d='m40.066 107.771l12.893 9.758l7.854 5.93a5.28 5.28 0 0 0 6.388 0l7.854-5.93l12.893-9.758s-11.152-8.436-23.947-18.09a18379 18379 0 0 0-23.935 18.09'/%3E%3Cpath fill='%23fc6d26' d='M26.42 61.271A57.7 57.7 0 0 0 3.422 50.904l-.17.452c-5.059 13.219-.763 28.192 10.537 36.716l.059.046l.157.111l26.061 19.516L64 89.655z'/%3E%3C/svg%3E"); +} +.icon-HTML5 { + display: inline-block; + width: 30px; + height: 30px; + background-repeat: no-repeat; + background-size: 100% 100%; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23e44f26' d='M5.902 27.201L3.655 2h24.69l-2.25 25.197L15.985 30z'/%3E%3Cpath fill='%23f1662a' d='m16 27.858l8.17-2.265l1.922-21.532H16z'/%3E%3Cpath fill='%23ebebeb' d='M16 13.407h-4.09l-.282-3.165H16V7.151H8.25l.074.83l.759 8.517H16zm0 8.027l-.014.004l-3.442-.929l-.22-2.465H9.221l.433 4.852l6.332 1.758l.014-.004z'/%3E%3Cpath fill='%23fff' d='M15.989 13.407v3.091h3.806l-.358 4.009l-3.448.93v3.216l6.337-1.757l.046-.522l.726-8.137l.076-.83h-.833zm0-6.256v3.091h7.466l.062-.694l.141-1.567l.074-.83z'/%3E%3C/svg%3E"); +} +.icon-CSS3 { + display: inline-block; + width: 30px; + height: 30px; + background-repeat: no-repeat; + background-size: 100% 100%; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%231572b6' d='M5.902 27.201L3.656 2h24.688l-2.249 25.197L15.985 30z'/%3E%3Cpath fill='%2333a9dc' d='m16 27.858l8.17-2.265l1.922-21.532H16z'/%3E%3Cpath fill='%23fff' d='M16 13.191h4.09l.282-3.165H16V6.935h7.75l-.074.829l-.759 8.518H16z'/%3E%3Cpath fill='%23ebebeb' d='m16.019 21.218l-.014.004l-3.442-.93l-.22-2.465H9.24l.433 4.853l6.331 1.758l.015-.004z'/%3E%3Cpath fill='%23fff' d='m19.827 16.151l-.372 4.139l-3.447.93v3.216l6.336-1.756l.047-.522l.537-6.007z'/%3E%3Cpath fill='%23ebebeb' d='M16.011 6.935v3.091H8.545l-.062-.695l-.141-1.567l-.074-.829zM16 13.191v3.091h-3.399l-.062-.695l-.14-1.567l-.074-.829z'/%3E%3C/svg%3E"); +} +.icon-Javascript { + display: inline-block; + width: 30px; + height: 30px; + background-repeat: no-repeat; + background-size: 100% 100%; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%23f7df1e' d='M0 0h256v256H0z'/%3E%3Cpath d='m67.312 213.932l19.59-11.856c3.78 6.701 7.218 12.371 15.465 12.371c7.905 0 12.89-3.092 12.89-15.12v-81.798h24.057v82.138c0 24.917-14.606 36.259-35.916 36.259c-19.245 0-30.416-9.967-36.087-21.996m85.07-2.576l19.588-11.341c5.157 8.421 11.859 14.607 23.715 14.607c9.969 0 16.325-4.984 16.325-11.858c0-8.248-6.53-11.17-17.528-15.98l-6.013-2.58c-17.357-7.387-28.87-16.667-28.87-36.257c0-18.044 13.747-31.792 35.228-31.792c15.294 0 26.292 5.328 34.196 19.247l-18.732 12.03c-4.125-7.389-8.591-10.31-15.465-10.31c-7.046 0-11.514 4.468-11.514 10.31c0 7.217 4.468 10.14 14.778 14.608l6.014 2.577c20.45 8.765 31.963 17.7 31.963 37.804c0 21.654-17.012 33.51-39.867 33.51c-22.339 0-36.774-10.654-43.819-24.574'/%3E%3C/svg%3E"); +} +.icon-Angular { + display: inline-block; + width: 30px; + height: 30px; + background-repeat: no-repeat; + background-size: 100% 100%; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23dd0031' d='M16 2L2.966 6.648l1.988 17.234L16 30l11.046-6.118l1.988-17.234z'/%3E%3Cpath fill='%23c3002f' d='M16 2v3.108v-.014V30l11.046-6.118l1.988-17.234z'/%3E%3Cpath fill='%23fff' d='m16 5.094l-8.148 18.27h3.038l1.638-4.088h6.916l1.638 4.088h3.038zm2.38 11.662h-4.76L16 11.03Z'/%3E%3C/svg%3E"); +} +.icon-CSharp { + display: inline-block; + width: 30px; + height: 30px; + background-repeat: no-repeat; + background-size: 100% 100%; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128'%3E%3Cpath fill='%239b4f96' d='M115.4 30.7L67.1 2.9c-.8-.5-1.9-.7-3.1-.7s-2.3.3-3.1.7l-48 27.9c-1.7 1-2.9 3.5-2.9 5.4v55.7c0 1.1.2 2.4 1 3.5l106.8-62c-.6-1.2-1.5-2.1-2.4-2.7'/%3E%3Cpath fill='%2368217a' d='M10.7 95.3c.5.8 1.2 1.5 1.9 1.9l48.2 27.9c.8.5 1.9.7 3.1.7s2.3-.3 3.1-.7l48-27.9c1.7-1 2.9-3.5 2.9-5.4V36.1c0-.9-.1-1.9-.6-2.8z'/%3E%3Cpath fill='%23fff' d='M85.3 76.1C81.1 83.5 73.1 88.5 64 88.5c-13.5 0-24.5-11-24.5-24.5s11-24.5 24.5-24.5c9.1 0 17.1 5 21.3 12.5l13-7.5c-6.8-11.9-19.6-20-34.3-20c-21.8 0-39.5 17.7-39.5 39.5s17.7 39.5 39.5 39.5c14.6 0 27.4-8 34.2-19.8zM97 66.2l.9-4.3h-4.2v-4.7h5.1L100 51h4.9l-1.2 6.1h3.8l1.2-6.1h4.8l-1.2 6.1h2.4v4.7h-3.3l-.9 4.3h4.2v4.7h-5.1l-1.2 6h-4.9l1.2-6h-3.8l-1.2 6h-4.8l1.2-6h-2.4v-4.7H97zm4.8 0h3.8l.9-4.3h-3.8z'/%3E%3C/svg%3E"); +} +.icon-Cplusplus { + display: inline-block; + width: 30px; + height: 30px; + background-repeat: no-repeat; + background-size: 100% 100%; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128'%3E%3Cpath fill='%2300599c' d='M118.766 95.82c.89-1.543 1.441-3.28 1.441-4.843V36.78c0-1.558-.55-3.297-1.441-4.84l-55.32 31.94Zm0 0'/%3E%3Cpath fill='%23004482' d='m68.36 126.586l46.933-27.094c1.352-.781 2.582-2.129 3.473-3.672l-55.32-31.94L8.12 95.82c.89 1.543 2.121 2.89 3.473 3.672l46.933 27.094c2.703 1.562 7.13 1.562 9.832 0Zm0 0'/%3E%3Cpath fill='%23659ad2' d='M118.766 31.941c-.891-1.546-2.121-2.894-3.473-3.671L68.359 1.172c-2.703-1.563-7.129-1.563-9.832 0L11.594 28.27C8.89 29.828 6.68 33.66 6.68 36.78v54.196c0 1.562.55 3.3 1.441 4.843L63.445 63.88Zm0 0'/%3E%3Cpath fill='%23fff' d='M63.445 26.035c-20.867 0-37.843 16.977-37.843 37.844s16.976 37.844 37.843 37.844c13.465 0 26.024-7.247 32.77-18.91L79.84 73.335c-3.38 5.84-9.66 9.465-16.395 9.465c-10.433 0-18.922-8.488-18.922-18.922s8.49-18.922 18.922-18.922c6.73 0 13.017 3.629 16.39 9.465l16.38-9.477c-6.75-11.664-19.305-18.91-32.77-18.91zM92.88 57.57v4.207h-4.207v4.203h4.207v4.207h4.203V65.98h4.203v-4.203h-4.203V57.57zm15.766 0v4.207h-4.204v4.203h4.204v4.207h4.207V65.98h4.203v-4.203h-4.203V57.57z'/%3E%3C/svg%3E"); +} +.icon-PostgreSQL { + display: inline-block; + width: 30px; + height: 30px; + background-repeat: no-repeat; + background-size: 100% 100%; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128'%3E%3Cpath d='M93.809 92.112c.785-6.533.55-7.492 5.416-6.433l1.235.108c3.742.17 8.637-.602 11.513-1.938c6.191-2.873 9.861-7.668 3.758-6.409c-13.924 2.873-14.881-1.842-14.881-1.842c14.703-21.815 20.849-49.508 15.543-56.287c-14.47-18.489-39.517-9.746-39.936-9.52l-.134.025c-2.751-.571-5.83-.912-9.289-.968c-6.301-.104-11.082 1.652-14.709 4.402c0 0-44.683-18.409-42.604 23.151c.442 8.841 12.672 66.898 27.26 49.362c5.332-6.412 10.484-11.834 10.484-11.834c2.558 1.699 5.622 2.567 8.834 2.255l.249-.212c-.078.796-.044 1.575.099 2.497c-3.757 4.199-2.653 4.936-10.166 6.482c-7.602 1.566-3.136 4.355-.221 5.084c3.535.884 11.712 2.136 17.238-5.598l-.22.882c1.474 1.18 1.375 8.477 1.583 13.69c.209 5.214.558 10.079 1.621 12.948s2.317 10.256 12.191 8.14c8.252-1.764 14.561-4.309 15.136-27.985'/%3E%3Cpath d='M75.458 125.256c-4.367 0-7.211-1.689-8.938-3.32c-2.607-2.46-3.641-5.629-4.259-7.522l-.267-.79c-1.244-3.358-1.666-8.193-1.916-14.419c-.038-.935-.064-1.898-.093-2.919c-.021-.747-.047-1.684-.085-2.664a18.8 18.8 0 0 1-4.962 1.568c-3.079.526-6.389.356-9.84-.507c-2.435-.609-4.965-1.871-6.407-3.82c-4.203 3.681-8.212 3.182-10.396 2.453c-3.853-1.285-7.301-4.896-10.542-11.037c-2.309-4.375-4.542-10.075-6.638-16.943c-3.65-11.96-5.969-24.557-6.175-28.693C4.292 23.698 7.777 14.44 15.296 9.129C27.157.751 45.128 5.678 51.68 7.915c4.402-2.653 9.581-3.944 15.433-3.851c3.143.051 6.136.327 8.916.823c2.9-.912 8.628-2.221 15.185-2.139c12.081.144 22.092 4.852 28.949 13.615c4.894 6.252 2.474 19.381.597 26.651c-2.642 10.226-7.271 21.102-12.957 30.57c1.544.011 3.781-.174 6.961-.831c6.274-1.295 8.109 2.069 8.607 3.575c1.995 6.042-6.677 10.608-9.382 11.864c-3.466 1.609-9.117 2.589-13.745 2.377l-.202-.013l-1.216-.107l-.12 1.014l-.116.991c-.311 11.999-2.025 19.598-5.552 24.619c-3.697 5.264-8.835 6.739-13.361 7.709c-1.544.33-2.947.474-4.219.474m-9.19-43.671c2.819 2.256 3.066 6.501 3.287 14.434c.028.99.054 1.927.089 2.802c.106 2.65.355 8.855 1.327 11.477c.137.371.26.747.39 1.146c1.083 3.316 1.626 4.979 6.309 3.978c3.931-.843 5.952-1.599 7.534-3.851c2.299-3.274 3.585-9.86 3.821-19.575l4.783.116l-4.75-.57l.14-1.186c.455-3.91.783-6.734 3.396-8.602c2.097-1.498 4.486-1.353 6.389-1.01c-2.091-1.58-2.669-3.433-2.823-4.193l-.399-1.965l1.121-1.663c6.457-9.58 11.781-21.354 14.609-32.304c2.906-11.251 2.02-17.226 1.134-18.356c-11.729-14.987-32.068-8.799-34.192-8.097l-.359.194l-1.8.335l-.922-.191c-2.542-.528-5.366-.82-8.393-.869c-4.756-.08-8.593 1.044-11.739 3.431l-2.183 1.655l-2.533-1.043c-5.412-2.213-21.308-6.662-29.696-.721c-4.656 3.298-6.777 9.76-6.305 19.207c.156 3.119 2.275 14.926 5.771 26.377c4.831 15.825 9.221 21.082 11.054 21.693c.32.108 1.15-.537 1.976-1.529a271 271 0 0 1 10.694-12.07l2.77-2.915l3.349 2.225c1.35.897 2.839 1.406 4.368 1.502l7.987-6.812l-1.157 11.808c-.026.265-.039.626.065 1.296l.348 2.238l-1.51 1.688l-.174.196l4.388 2.025z'/%3E%3Cpath fill='%23336791' d='M115.731 77.44c-13.925 2.873-14.882-1.842-14.882-1.842c14.703-21.816 20.849-49.51 15.545-56.287C101.924.823 76.875 9.566 76.457 9.793l-.135.024c-2.751-.571-5.83-.911-9.291-.967c-6.301-.103-11.08 1.652-14.707 4.402c0 0-44.684-18.408-42.606 23.151c.442 8.842 12.672 66.899 27.26 49.363c5.332-6.412 10.483-11.834 10.483-11.834c2.559 1.699 5.622 2.567 8.833 2.255l.25-.212c-.078.796-.042 1.575.1 2.497c-3.758 4.199-2.654 4.936-10.167 6.482c-7.602 1.566-3.136 4.355-.22 5.084c3.534.884 11.712 2.136 17.237-5.598l-.221.882c1.473 1.18 2.507 7.672 2.334 13.557s-.29 9.926.871 13.082c1.16 3.156 2.316 10.256 12.192 8.14c8.252-1.768 12.528-6.351 13.124-13.995c.422-5.435 1.377-4.631 1.438-9.49l.767-2.3c.884-7.367.14-9.743 5.225-8.638l1.235.108c3.742.17 8.639-.602 11.514-1.938c6.19-2.871 9.861-7.667 3.758-6.408'/%3E%3Cpath fill='%23fff' d='M75.957 122.307c-8.232 0-10.84-6.519-11.907-9.185c-1.562-3.907-1.899-19.069-1.551-31.503a1.59 1.59 0 0 1 1.64-1.55a1.594 1.594 0 0 1 1.55 1.639c-.401 14.341.168 27.337 1.324 30.229c1.804 4.509 4.54 8.453 12.275 6.796c7.343-1.575 10.093-4.359 11.318-11.46c.94-5.449 2.799-20.951 3.028-24.01a1.593 1.593 0 0 1 1.71-1.472a1.597 1.597 0 0 1 1.472 1.71c-.239 3.185-2.089 18.657-3.065 24.315c-1.446 8.387-5.185 12.191-13.794 14.037c-1.463.313-2.792.453-4 .454M31.321 90.466a6.7 6.7 0 0 1-2.116-.35c-5.347-1.784-10.44-10.492-15.138-25.885c-3.576-11.717-5.842-23.947-6.041-27.922c-.589-11.784 2.445-20.121 9.02-24.778c13.007-9.216 34.888-.44 35.813-.062a1.596 1.596 0 0 1-1.207 2.955c-.211-.086-21.193-8.492-32.768-.285c-5.622 3.986-8.203 11.392-7.672 22.011c.167 3.349 2.284 15.285 5.906 27.149c4.194 13.742 8.967 22.413 13.096 23.79c.648.216 2.62.873 5.439-2.517A245 245 0 0 1 45.88 73.046a1.596 1.596 0 0 1 2.304 2.208c-.048.05-4.847 5.067-10.077 11.359c-2.477 2.979-4.851 3.853-6.786 3.853m69.429-13.445a1.596 1.596 0 0 1-1.322-2.487c14.863-22.055 20.08-48.704 15.612-54.414c-5.624-7.186-13.565-10.939-23.604-11.156c-7.433-.16-13.341 1.738-14.307 2.069l-.243.099c-.971.305-1.716-.227-1.997-.849a1.6 1.6 0 0 1 .631-2.025c.046-.027.192-.089.429-.176l-.021.006l.021-.007c1.641-.601 7.639-2.4 15.068-2.315c11.108.118 20.284 4.401 26.534 12.388c2.957 3.779 2.964 12.485.019 23.887c-3.002 11.625-8.651 24.118-15.497 34.277c-.306.457-.81.703-1.323.703m.76 10.21c-2.538 0-4.813-.358-6.175-1.174c-1.4-.839-1.667-1.979-1.702-2.584c-.382-6.71 3.32-7.878 5.208-8.411c-.263-.398-.637-.866-1.024-1.349c-1.101-1.376-2.609-3.26-3.771-6.078c-.182-.44-.752-1.463-1.412-2.648c-3.579-6.418-11.026-19.773-6.242-26.612c2.214-3.165 6.623-4.411 13.119-3.716C97.6 28.837 88.5 10.625 66.907 10.271c-6.494-.108-11.82 1.889-15.822 5.93c-8.96 9.049-8.636 25.422-8.631 25.586a1.595 1.595 0 1 1-3.19.084c-.02-.727-.354-17.909 9.554-27.916C53.455 9.272 59.559 6.96 66.96 7.081c13.814.227 22.706 7.25 27.732 13.101c5.479 6.377 8.165 13.411 8.386 15.759c.165 1.746-1.088 2.095-1.341 2.147l-.576.013c-6.375-1.021-10.465-.312-12.156 2.104c-3.639 5.201 3.406 17.834 6.414 23.229c.768 1.376 1.322 2.371 1.576 2.985c.988 2.396 2.277 4.006 3.312 5.3c.911 1.138 1.7 2.125 1.982 3.283c.131.23 1.99 2.98 13.021.703c2.765-.57 4.423-.083 4.93 1.45c.997 3.015-4.597 6.532-7.694 7.97c-2.775 1.29-7.204 2.106-11.036 2.106m-4.696-4.021c.35.353 2.101.962 5.727.806c3.224-.138 6.624-.839 8.664-1.786c2.609-1.212 4.351-2.567 5.253-3.492l-.5.092c-7.053 1.456-12.042 1.262-14.828-.577a6 6 0 0 1-.54-.401c-.302.119-.581.197-.78.253c-1.58.443-3.214.902-2.996 5.105m-45.562 8.915c-1.752 0-3.596-.239-5.479-.71c-1.951-.488-5.24-1.957-5.19-4.37c.057-2.707 3.994-3.519 5.476-3.824c5.354-1.103 5.703-1.545 7.376-3.67c.488-.619 1.095-1.39 1.923-2.314c1.229-1.376 2.572-2.073 3.992-2.073c.989 0 1.8.335 2.336.558c1.708.708 3.133 2.42 3.719 4.467c.529 1.847.276 3.625-.71 5.006c-3.237 4.533-7.886 6.93-13.443 6.93m-7.222-4.943c.481.372 1.445.869 2.518 1.137c1.631.408 3.213.615 4.705.615c4.546 0 8.196-1.882 10.847-5.594c.553-.774.387-1.757.239-2.274c-.31-1.083-1.08-2.068-1.873-2.397c-.43-.178-.787-.314-1.115-.314c-.176 0-.712 0-1.614 1.009a41 41 0 0 0-1.794 2.162c-2.084 2.646-3.039 3.544-9.239 4.821c-1.513.31-2.289.626-2.674.835m12.269-7.36a1.596 1.596 0 0 1-1.575-1.354a8 8 0 0 1-.08-.799c-4.064-.076-7.985-1.82-10.962-4.926c-3.764-3.927-5.477-9.368-4.699-14.927c.845-6.037.529-11.366.359-14.229c-.047-.796-.081-1.371-.079-1.769c.003-.505.013-1.844 4.489-4.113c1.592-.807 4.784-2.215 8.271-2.576c5.777-.597 9.585 1.976 10.725 7.246c3.077 14.228.244 20.521-1.825 25.117c-.385.856-.749 1.664-1.04 2.447l-.257.69c-1.093 2.931-2.038 5.463-1.748 7.354a1.595 1.595 0 0 1-1.335 1.819zM42.464 42.26l.062 1.139c.176 2.974.504 8.508-.384 14.86c-.641 4.585.759 9.06 3.843 12.276c2.437 2.542 5.644 3.945 8.94 3.945h.068c.369-1.555.982-3.197 1.642-4.966l.255-.686c.329-.884.714-1.74 1.122-2.646c1.991-4.424 4.47-9.931 1.615-23.132c-.565-2.615-1.936-4.128-4.189-4.627c-4.628-1.022-11.525 2.459-12.974 3.837m9.63-.677c-.08.564 1.033 2.07 2.485 2.271c1.449.203 2.689-.975 2.768-1.539s-1.033-1.186-2.485-1.388s-2.691.092-2.768.656m2.818 2.826l-.407-.028c-.9-.125-1.81-.692-2.433-1.518c-.219-.29-.576-.852-.505-1.354c.101-.736.999-1.177 2.4-1.177c.313 0 .639.023.967.069c.766.106 1.477.327 2.002.62c.91.508.977 1.075.936 1.368c-.112.813-1.405 2.02-2.96 2.02m-2.289-2.732c.045.348.907 1.496 2.029 1.651l.261.018c1.036 0 1.81-.815 1.901-1.082c-.096-.182-.762-.634-2.025-.81a6 6 0 0 0-.821-.059c-.812 0-1.243.183-1.345.282m43.605-1.245c.079.564-1.033 2.07-2.484 2.272c-1.45.202-2.691-.975-2.771-1.539c-.076-.564 1.036-1.187 2.486-1.388c1.45-.203 2.689.092 2.769.655m-2.819 2.56c-1.396 0-2.601-1.086-2.7-1.791c-.115-.846 1.278-1.489 2.712-1.688c.316-.044.629-.066.93-.066c1.238 0 2.058.363 2.14.949c.053.379-.238.964-.739 1.492c-.331.347-1.026.948-1.973 1.079zm.943-3.013q-.416 0-.856.061c-1.441.201-2.301.779-2.259 1.089c.048.341.968 1.332 2.173 1.332l.297-.021c.787-.109 1.378-.623 1.66-.919c.443-.465.619-.903.598-1.052c-.028-.198-.56-.49-1.613-.49m3.965 32.843a1.594 1.594 0 0 1-1.324-2.483c3.398-5.075 2.776-10.25 2.175-15.255c-.257-2.132-.521-4.337-.453-6.453c.07-2.177.347-3.973.614-5.71c.317-2.058.617-4.002.493-6.31a1.595 1.595 0 1 1 3.186-.172c.142 2.638-.197 4.838-.525 6.967c-.253 1.643-.515 3.342-.578 5.327c-.061 1.874.178 3.864.431 5.97c.64 5.322 1.365 11.354-2.691 17.411a1.6 1.6 0 0 1-1.328.708'/%3E%3C/svg%3E"); +} +.icon-MicrosoftWPF { + display: inline-block; + width: 30px; + height: 30px; + background-repeat: no-repeat; + background-size: 100% 100%; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%23f1511b' d='M121.666 121.666H0V0h121.666z'/%3E%3Cpath fill='%2380cc28' d='M256 121.666H134.335V0H256z'/%3E%3Cpath fill='%2300adef' d='M121.663 256.002H0V134.336h121.663z'/%3E%3Cpath fill='%23fbbc09' d='M256 256.002H134.335V134.336H256z'/%3E%3C/svg%3E"); +} +.icon-JSON { + display: inline-block; + width: 30px; + height: 30px; + background-repeat: no-repeat; + background-size: 100% 100%; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128'%3E%3ClinearGradient id='deviconJson0' x1='-670.564' x2='-583.105' y1='-280.831' y2='-368.306' gradientTransform='matrix(.9988 0 0 -.9987 689.011 -259.008)' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0'/%3E%3Cstop offset='1' stop-color='%23fff'/%3E%3C/linearGradient%3E%3Cpath fill='url(%23deviconJson0)' fill-rule='evenodd' d='M63.895 94.303c27.433 37.398 54.281-10.438 54.241-39.205c-.046-34.012-34.518-53.021-54.263-53.021C32.182 2.077 2 28.269 2 64.105C2 103.937 36.596 126 63.873 126c-6.172-.889-26.742-5.296-27.019-52.674c-.186-32.044 10.453-44.846 26.974-39.214c.37.137 18.223 7.18 18.223 30.187c0 22.908-18.156 30.004-18.156 30.004' clip-rule='evenodd'/%3E%3ClinearGradient id='deviconJson1' x1='-579.148' x2='-666.607' y1='-364.34' y2='-276.873' gradientTransform='matrix(.9988 0 0 -.9987 689.011 -259.008)' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0'/%3E%3Cstop offset='1' stop-color='%23fff'/%3E%3C/linearGradient%3E%3Cpath fill='url(%23deviconJson1)' fill-rule='evenodd' d='M63.863 34.086C45.736 27.838 23.53 42.778 23.53 72.703C23.53 121.565 59.739 126 64.128 126C95.818 126 126 99.808 126 63.972C126 24.14 91.404 2.077 64.127 2.077c7.555-1.046 40.719 8.176 40.719 53.504c0 29.559-24.764 45.651-40.87 38.776c-.37-.137-18.223-7.18-18.223-30.187c0-22.91 18.11-30.085 18.11-30.084' clip-rule='evenodd'/%3E%3C/svg%3E"); +} +.icon-MapQuest { + display: inline-block; + width: 30px; + height: 30px; + background-repeat: no-repeat; + background-size: 100% 100%; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2371c9e4' d='M9 10a1 1 0 0 0-1 1v4h2v-3h3v2.5l3.5-3.5L13 7.5V10zm3.707-8.607l9.9 9.9a1 1 0 0 1 0 1.414l-9.9 9.9a1 1 0 0 1-1.414 0l-9.9-9.9a1 1 0 0 1 0-1.414l9.9-9.9a1 1 0 0 1 1.414 0'/%3E%3C/svg%3E"); +} +.icon-Usability { + display: inline-block; + width: 30px; + height: 30px; + --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23000' d='M6.813 2.406L5.405 3.812L7.5 5.906L8.906 4.5zm18.375 0L23.093 4.5L24.5 5.906l2.094-2.093zM16 3.03c-.33.004-.664.023-1 .064c-.01 0-.02-.002-.03 0c-4.056.465-7.284 3.742-7.845 7.78c-.448 3.25.892 6.197 3.125 8.095a5.238 5.238 0 0 1 1.75 3.03v6h2.28c.348.597.983 1 1.72 1s1.372-.403 1.72-1H20v-4h.094v-1.188c0-1.466.762-2.944 2-4.093C23.75 17.06 25 14.705 25 12c0-4.94-4.066-9.016-9-8.97m0 2c3.865-.054 7 3.11 7 6.97c0 2.094-.97 3.938-2.313 5.28l.032.032A7.792 7.792 0 0 0 18.279 22h-4.374c-.22-1.714-.955-3.373-2.344-4.563c-1.767-1.5-2.82-3.76-2.468-6.312c.437-3.15 2.993-5.683 6.125-6.03a6.91 6.91 0 0 1 .78-.064zM2 12v2h3v-2zm25 0v2h3v-2zM7.5 20.094l-2.094 2.093l1.407 1.407L8.905 21.5zm17 0L23.094 21.5l2.093 2.094l1.407-1.407zM14 24h4v2h-4z'/%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%; +} +.icon-Development { + display: inline-block; + width: 30px; + height: 30px; + --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath fill='%23000' d='M956.9 845.1L896.4 632V168c0-17.7-14.3-32-32-32h-704c-17.7 0-32 14.3-32 32v464L67.9 845.1C60.4 866 75.8 888 98 888h828.8c22.2 0 37.6-22 30.1-42.9M200.4 208h624v395h-624zm228.3 608l8.1-37h150.3l8.1 37zm224 0l-19.1-86.7c-.8-3.7-4.1-6.3-7.8-6.3H398.2c-3.8 0-7 2.6-7.8 6.3L371.3 816H151l42.3-149h638.2l42.3 149z'/%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%; +} +.icon-Responsive { + display: inline-block; + width: 30px; + height: 30px; + --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath stroke-linecap='round' d='M10 22c-3.771 0-5.657 0-6.828-1.172C2 19.657 2 18.771 2 15m20 0c0 3.771 0 4.657-1.172 5.828C19.657 22 17.771 22 14 22m0-20c3.771 0 5.657 0 6.828 1.172C22 4.343 22 5.229 22 9M10 2C6.229 2 4.343 2 3.172 3.172C2 4.343 2 5.229 2 9'/%3E%3Cpath d='M5.892 14.06C5.297 13.37 5 13.025 5 12c0-1.025.297-1.37.892-2.06C7.08 8.562 9.072 7 12 7c2.927 0 4.92 1.562 6.108 2.94c.595.69.892 1.035.892 2.06c0 1.025-.297 1.37-.892 2.06C16.92 15.438 14.928 17 12 17c-2.927 0-4.92-1.562-6.108-2.94Z'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/g%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%; +} +.icon-DailyDev { + display: inline-block; + width: 53.34px; + height: 30px; + background-repeat: no-repeat; + background-size: 100% 100%; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 144'%3E%3Cpath fill='%237c7c7d' d='m219.833 71.7l-28.26-28.32l14.123-28.309l45.916 46.013c5.85 5.863 5.85 15.368 0 21.23l-56.514 56.634c-5.85 5.862-15.336 5.862-21.187 0c-5.85-5.863-5.85-15.368 0-21.23z'/%3E%3Cpath fill='%23151618' d='M173.922 4.396c5.85-5.863 15.338-5.86 21.189.002l10.595 10.618L82.09 138.892c-5.85 5.863-15.339 5.86-21.189-.002l-10.596-10.618zm-52.98 38.934L99.75 64.566l-28.26-28.32l-35.323 35.398l28.26 28.319l-14.123 28.309L4.388 82.259c-5.85-5.862-5.85-15.368 0-21.23L60.9 4.399c5.85-5.863 15.338-5.866 21.189-.003z'/%3E%3C/svg%3E"); +} +.icon-LeetCode { + display: inline-block; + width: 30px; + height: 30px; + --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M13.483 0a1.37 1.37 0 0 0-.961.438L7.116 6.226l-3.854 4.126a5.3 5.3 0 0 0-1.209 2.104a5 5 0 0 0-.125.513a5.5 5.5 0 0 0 .062 2.362a6 6 0 0 0 .349 1.017a5.9 5.9 0 0 0 1.271 1.818l4.277 4.193l.039.038c2.248 2.165 5.852 2.133 8.063-.074l2.396-2.392c.54-.54.54-1.414.003-1.955a1.38 1.38 0 0 0-1.951-.003l-2.396 2.392a3.02 3.02 0 0 1-4.205.038l-.02-.019l-4.276-4.193c-.652-.64-.972-1.469-.948-2.263a2.7 2.7 0 0 1 .066-.523a2.55 2.55 0 0 1 .619-1.164L9.13 8.114c1.058-1.134 3.204-1.27 4.43-.278l3.501 2.831c.593.48 1.461.387 1.94-.207a1.384 1.384 0 0 0-.207-1.943l-3.5-2.831c-.8-.647-1.766-1.045-2.774-1.202l2.015-2.158A1.384 1.384 0 0 0 13.483 0m-2.866 12.815a1.38 1.38 0 0 0-1.38 1.382a1.38 1.38 0 0 0 1.38 1.382H20.79a1.38 1.38 0 0 0 1.38-1.382a1.38 1.38 0 0 0-1.38-1.382z'/%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%; +} +.icon-LinkedIn { + display: inline-block; + width: 30px; + height: 30px; + --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248c-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586c.173-.431.568-.878 1.232-.878c.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252c-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z'/%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%; +} +.icon-DailyDev2 { + --svg: url("../assets/img/dailydev.png"); + background-color: grey; + color: white; + display: inline-block; + width: 30px; + height: 30px; + -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%; +} +.icon-CopyRight { + display: inline-block; + width: 30px; + height: 30px; + --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M8 1.5c3.6 0 6.5 2.9 6.5 6.5s-2.9 6.5-6.5 6.5S1.5 11.6 1.5 8S4.4 1.5 8 1.5M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8s8-3.6 8-8s-3.6-8-8-8'/%3E%3Cpath fill='%23000' d='M9.9 10.3c-.5.4-1.2.7-1.9.7c-1.7 0-3-1.3-3-3s1.3-3 3-3c.8 0 1.6.3 2.1.9l1.1-1.1c-.8-.8-2-1.3-3.2-1.3c-2.5 0-4.5 2-4.5 4.5s2 4.5 4.5 4.5c1.1 0 2-.4 2.8-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%; +} +.icon-Notion { + display: inline-block; + width: 30px; + height: 30px; + background-repeat: no-repeat; + background-size: 100% 100%; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128'%3E%3Cpath fill='%23fff' d='m76.25.25l13.059.086c.246.191.445.316.656.41c2.367 1.07 4.933 1.836 7.066 3.258c6.184 4.11 12.223 8.441 18.258 12.77c2.805 2.007 5.57 4.097 8.156 6.37c1.922 1.688 2.785 4.083 2.79 6.637l-.005 80.371c-.003 1.121-.195 2.274-.507 3.352c-1.418 4.914-4.563 8.277-9.512 9.59c-2.61.691-5.367.906-8.074 1.129c-4.223.351-8.461.523-12.692.777l-8.004.5l-12.816.754l-7.879.492l-12.941.75l-6.688.274c-.215.011-.414.312-.617.48c-5.09 0-10.176 0-15.309-.082c-.246-.195-.433-.352-.652-.414c-3.102-.899-5.703-2.613-7.703-5.102c-2.77-3.441-5.402-6.988-8.066-10.511c-3.274-4.329-6.633-8.594-9.727-13.047a15.47 15.47 0 0 1-2.79-8.875a72122 72122 0 0 1 .009-71.211c0-.684.12-1.375.238-2.055C3.742 9.645 9.152 5.746 15.586 5.023c3.34-.375 6.703-.543 10.059-.765l8.87-.512l3.813-.25l11.5-.992l6.375-.5l10.559-.75l8.87-.524c.216-.015.415-.312.618-.48M25.945 114.184c.532.691 1.125 1.347 1.59 2.082c2.254 3.527 5.485 4.808 9.59 4.535l27.809-1.656l31.296-1.891l15.582-1.004c4.618-.371 6.848-2.867 6.938-7.5v-1l.035-75.863c.004-2.285-.785-3.883-2.613-5.16l-22.024-15.52c-3.543-2.578-7.304-3.781-11.66-3.437L57.824 9.594l-25.789 1.902l-16.187 1.262c-3.27.3-5.297 2.3-5.883 5.508a14 14 0 0 0-.207 2.48l-.067 66.242c-.023 4.34 1.305 7.95 3.903 11.27zm0 0'/%3E%3Cpath d='m25.887 114.117l-12.293-15.86c-2.598-3.32-3.926-6.929-3.903-11.269l.067-66.242c0-.828.062-1.668.207-2.48c.586-3.207 2.613-5.207 5.883-5.508l16.187-1.262l25.79-1.902L82.488 7.77c4.356-.344 8.117.859 11.66 3.437c7.262 5.285 14.66 10.383 22.024 15.52c1.828 1.277 2.617 2.875 2.613 5.16l-.035 75.867v1c-.09 4.629-2.32 7.125-6.938 7.496c-5.187.418-10.386.688-15.582 1.004l-31.296 1.89l-27.809 1.657c-4.105.273-7.336-1.008-9.59-4.535c-.465-.735-1.058-1.391-1.648-2.149m6.406-45.992v33.488l.008 6.246c.054 2.801 1.426 4.196 4.226 4.356c.703.039 1.414.015 2.121-.028l23.442-1.382l44.765-2.559c2.79-.156 4.079-1.379 4.34-4.144c.051-.497.035-1 .035-1.5l.004-64.477c0-.375.012-.75-.011-1.125c-.168-2.566-1.27-3.613-3.82-3.477l-23.071 1.329a43791 43791 0 0 0-32.418 1.898l-16.207.973c-2.066.132-3 1.023-3.312 3.043a10.6 10.6 0 0 0-.098 1.617zm57.172-52.727c-1.957-1.062-4.082-1.414-6.27-1.293c-3.363.184-6.726.461-10.09.704l-47.949 3.484c-1.449.105-2.906.21-4.336.469c-.48.086-1.086.57-1.234 1.008c-.11.308.375.93.73 1.27c.657.628 1.414 1.155 2.13 1.722c1.699 1.34 3.507 2.562 5.066 4.043c2.957 2.808 6.398 3.457 10.34 3.172l31.035-1.946l33.41-2.004c.305-.015.61-.109 1.281-.234c-.613-.637-.969-1.125-1.433-1.469a234 234 0 0 0-4.957-3.562a698 698 0 0 0-7.723-5.364m0 0'/%3E%3Cpath fill='%23fff' d='m32.293 68l.004-25.617c0-.54.016-1.086.098-1.617c.312-2.02 1.246-2.91 3.312-3.043l16.207-.973l32.418-1.898l23.07-1.329c2.551-.136 3.653.914 3.82 3.477c.024.375.012.75.012 1.125l-.004 64.477l-.035 1.5c-.261 2.765-1.55 3.988-4.34 4.144l-44.765 2.559l-23.442 1.382l-2.12.028c-2.801-.16-4.173-1.555-4.227-4.352l-.008-6.25zm45.766.066L65.191 48.461c-.449-.684-.89-.91-1.718-.82l-5.485.37l-10.09.739c-2.48.227-3.98 2.559-3.293 4.977l5.344.457v43.293l-3.64 1.027c-1.614.476-2.305 1.836-1.762 3.574l12.308-.707l4.848-.398c2.09-.344 3.215-1.625 3.496-3.715l-6.73-1.535V63.16l.5.7l15.468 24.152a361 361 0 0 0 7.004 10.46c1.707 2.45 4.223 3.2 7.051 2.59c1.77-.378 3.469-1.097 5.203-1.656c.903-.293 1.211-.832 1.207-1.844l-.03-44.5c0-2.601 0-2.601 2.573-3.12c2.602-.524 3.254-1.563 2.66-4.344l-15.55.945c-1.692.121-2.973 1.535-3.23 3.18c-.126.793.038 1.23.987 1.285l4.708.52v30.179a7435 7435 0 0 0-8.961-13.637zM89.55 15.441a1123 1123 0 0 1 7.636 5.32a234 234 0 0 1 4.958 3.563c.464.344.82.832 1.433 1.469l-1.281.234l-33.41 2.004l-31.035 1.946c-3.942.285-7.383-.364-10.34-3.172c-1.559-1.48-3.367-2.703-5.067-4.043c-.715-.567-1.472-1.094-2.129-1.723c-.355-.34-.84-.96-.73-1.27c.148-.437.758-.921 1.234-1.007c1.43-.258 2.887-.364 4.336-.469l47.95-3.484l10.09-.704c2.187-.12 4.312.23 6.355 1.336m0 0'/%3E%3Cpath d='m78.113 68.14l8.907 13.567v-30.18l-4.707-.52c-.95-.054-1.114-.491-.989-1.284c.258-1.645 1.54-3.059 3.23-3.18l15.551-.945c.594 2.78-.058 3.82-2.66 4.343c-2.574.516-2.574.516-2.574 3.121l.031 44.5c.004 1.012-.304 1.551-1.207 1.844l-5.203 1.656c-2.828.606-5.344-.14-7.05-2.59a367 367 0 0 1-7.004-10.46l-15.47-24.153c-.109-.172-.234-.332-.5-.699v32.563l6.731 1.535c-.281 2.09-1.406 3.37-3.496 3.715c-1.594.261-3.23.3-4.848.398l-12.308.707c-.543-1.738.148-3.098 1.762-3.574l3.64-1.027V54.184l-5.344-.457c-.687-2.418.813-4.75 3.293-4.977c3.356-.313 6.727-.504 10.09-.738c1.828-.125 3.664-.172 5.485-.371c.828-.09 1.27.136 1.718.82zm0 0'/%3E%3C/svg%3E"); +} +.icon-Atlassian { + display: inline-block; + width: 30px; + height: 30px; + background-repeat: no-repeat; + background-size: 100% 100%; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cdefs%3E%3ClinearGradient id='logosAtlassian0' x1='99.687%25' x2='39.836%25' y1='15.801%25' y2='97.438%25'%3E%3Cstop offset='0%25' stop-color='%230052cc'/%3E%3Cstop offset='92.3%25' stop-color='%232684ff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23logosAtlassian0)' d='M75.793 117.95c-3.82-4.08-9.77-3.85-12.367 1.342L.791 244.565a7.488 7.488 0 0 0 6.697 10.838h87.228a7.22 7.22 0 0 0 6.699-4.14c18.808-38.89 7.413-98.018-25.622-133.314'/%3E%3Cpath fill='%232681ff' d='M121.756 4.011c-35.033 55.505-32.721 116.979-9.646 163.13l42.06 84.121a7.488 7.488 0 0 0 6.697 4.14h87.227a7.488 7.488 0 0 0 6.697-10.838S137.445 9.837 134.493 3.964c-2.64-5.258-9.344-5.33-12.737.047'/%3E%3C/svg%3E"); +} +.icon-Docker { + display: inline-block; + width: 41.52px; + height: 30px; + background-repeat: no-repeat; + background-size: 100% 100%; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 185'%3E%3Cpath fill='%232396ed' d='M250.716 70.497c-5.765-4-18.976-5.5-29.304-3.5c-1.2-10-6.725-18.749-16.333-26.499l-5.524-4l-3.844 5.75c-4.803 7.5-7.205 18-6.485 28c.24 3.499 1.441 9.749 5.044 15.249c-3.362 2-10.328 4.5-19.455 4.5H1.155l-.48 2c-1.682 9.999-1.682 41.248 18.014 65.247c14.892 18.249 36.99 27.499 66.053 27.499c62.93 0 109.528-30.25 131.386-84.997c8.647.25 27.142 0 36.51-18.75c.24-.5.72-1.5 2.401-5.249l.961-2zM139.986 0h-26.42v24.999h26.42zm0 29.999h-26.42v24.999h26.42zm-31.225 0h-26.42v24.999h26.42zm-31.225 0H51.115v24.999h26.421zM46.311 59.998H19.89v24.999h26.42zm31.225 0H51.115v24.999h26.421zm31.225 0h-26.42v24.999h26.42zm31.226 0h-26.422v24.999h26.422zm31.225 0H144.79v24.999h26.422z'/%3E%3C/svg%3E"); +} +.icon-MySQL { + display: inline-block; + width: 44.02px; + height: 30px; + background-repeat: no-repeat; + background-size: 100% 100%; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 349'%3E%3Cpath fill='%2300758f' d='m152.31 230.297l15.56 50.487c3.496 11.463 4.954 19.465 4.37 24.026c8.51-22.792 14.456-47.63 17.839-74.513h18.71c-8.045 43.766-18.656 75.57-31.827 95.41c-10.262 15.289-21.504 22.933-33.746 22.933c-3.264 0-7.288-.986-12.063-2.944v-10.55c2.333.342 5.07.525 8.218.525c5.711 0 10.314-1.583 13.816-4.742c4.193-3.849 6.292-8.175 6.292-12.97c0-3.274-1.637-9.993-4.896-20.157l-21.68-67.505zM33.223 199.266l28.5 86.956h.176l28.675-86.956h23.428c5.13 43.124 8.16 82.581 9.09 118.346H103.34c-.695-33.433-2.62-64.871-5.768-94.32H97.4l-30.078 94.32H52.28l-29.896-94.32h-.176c-2.218 28.282-3.614 59.72-4.196 94.32H0c1.164-42.08 4.077-81.525 8.739-118.346z'/%3E%3Cpath fill='%23f29111' d='M352.498 197.51c30.657 0 45.986 19.586 45.986 58.739c0 21.276-4.61 37.347-13.821 48.204c-1.66 1.984-3.495 3.698-5.427 5.286l21.695 10.727l-.021-.001l-7.703 13.302l-28.253-16.485c-4.683 1.387-9.836 2.08-15.451 2.08c-15.053 0-26.297-4.387-33.731-13.15c-8.16-9.694-12.238-24.955-12.238-45.757c0-21.156 4.602-37.166 13.816-48.037c8.392-9.944 20.11-14.909 35.148-14.909m-93.88.172c10.957 0 20.92 2.932 29.894 8.775l-4.558 10.157c-7.679-3.264-15.25-4.903-22.716-4.903c-6.058 0-10.726 1.458-13.98 4.392c-3.272 2.908-5.296 6.65-5.296 11.212c0 7.01 4.994 13.089 14.215 18.225a816.32 816.32 0 0 1 9.031 5.011l.688.387l.345.194l.689.387l.344.194l.688.388c6.98 3.935 13.548 7.691 13.548 7.691c9.22 6.545 13.816 13.523 13.816 25.016c0 10.037-3.678 18.276-11.01 24.723c-7.337 6.418-17.194 9.636-29.538 9.636c-11.545 0-22.734-3.704-33.572-11.05l5.07-10.166c9.327 4.675 17.767 7.01 25.346 7.01c7.108 0 12.672-1.587 16.697-4.721c4.017-3.157 6.424-7.56 6.424-13.143c0-7.027-4.888-13.034-13.855-18.073a897.982 897.982 0 0 1-8.395-4.697l-.687-.389c-1.262-.713-2.533-1.435-3.778-2.142l-.675-.384c-6.055-3.444-11.29-6.453-11.29-6.453c-8.964-6.557-13.459-13.592-13.459-25.184c0-9.587 3.352-17.336 10.046-23.231c6.71-5.908 15.367-8.862 25.968-8.862m175.895 1.584v103.788h37.238v14.558h-56.124V199.266zm57.93 103.833v2.46h-4.094v12.04h-3.13v-12.04h-4.253v-2.46zm7.56 0l3.931 9.884l3.611-9.884h4.437v14.5h-2.95v-11.035l-4.11 11.035h-2.127l-4.117-11.035h-.158v11.035h-2.791v-14.5zM350.57 212.064c-18.066 0-27.104 14.91-27.104 44.71c0 17.07 2.395 29.448 7.176 37.163c4.428 7.14 11.363 10.703 20.806 10.703c18.066 0 27.103-15.026 27.103-45.064c0-16.831-2.395-29.103-7.17-36.822c-4.433-7.124-11.365-10.69-20.81-10.69'/%3E%3Cpath fill='%2300758f' d='M303.218 7.333c5.993-14.726 26.948-3.574 35.08 1.57c1.993 1.287 4.279 4.006 6.564 5.011c3.565.14 7.127.419 10.698.568c6.698 1.574 12.972 2.86 18.25 5.866c24.528 14.445 40.495 29.165 55.19 53.479c3.14 5.15 4.709 10.723 7.274 16.296c3.56 8.307 7.56 17.027 11.692 24.882c1.85 3.724 3.281 7.865 5.85 11.01c1.003 1.438 3.852 1.862 5.555 2.721c4.708 2.437 10.412 4.287 14.84 7.147c8.269 5.156 16.264 11.3 23.532 17.59c2.709 2.428 4.555 5.865 7.136 8.433v1.296c-2.291.703-4.574 1.423-6.859 2c-4.991 1.282-9.412.992-14.254 2.275c-2.992.868-6.707 2.013-9.845 2.304l.29.292c1.846 5.275 11.834 9.565 16.402 12.72c5.548 4.004 10.689 8.86 14.827 14.437c1.429 1.423 2.858 2.718 4.28 4.137c.994 1.438 1.274 3.298 2.28 4.58v.434c-1.114-.393-1.915-1.143-2.674-1.927l-.453-.473c-.453-.47-.91-.932-1.431-1.313c-3.148-2.15-6.274-4.722-9.422-6.721c-5.412-3.434-11.689-5.427-17.246-8.874c-3.142-2.001-6.137-4.28-9.132-6.57c-2.715-2.007-5.705-5.861-7.411-8.721c-1.005-1.58-1.143-3.437-2.291-4.58c.205-1.909 1.954-2.476 3.719-2.942l.406-.107c.609-.158 1.205-.316 1.725-.525c7.414-3.148 16.253-4.29 27.667-4.004c-.43-2.866-7.562-6.437-9.839-8.153c-4.57-3.294-9.409-6.731-14.257-9.729c-2.569-1.57-6.996-2.716-9.842-3.999c-3.851-1.574-12.41-3.147-14.544-6.145c-3.625-4.726-6.229-10.363-8.757-16.057l-.688-1.554a803.85 803.85 0 0 0-.69-1.553c-2.988-6.857-6.7-14.006-9.695-21.027c-1.566-3.425-2.285-6.431-4-9.716c-10.407-20.158-25.81-37.035-44.485-48.904c-6.137-3.862-12.98-7.436-20.534-9.865c-4.281-1.293-9.419-.578-13.98-1.57h-3.002c-2.562-.722-4.701-3.438-6.7-4.87c-4.415-2.998-8.837-5.011-14.117-7.15c-1.85-.858-7.133-2.856-8.977-1.283c-1.142.287-1.721.718-2.002 1.864c-1.136 1.71-.137 4.286.57 5.863c2.142 4.57 5.134 7.286 7.85 11.148c2.416 3.425 5.417 7.287 7.13 11.011c3.696 8.005 5.417 16.874 8.842 24.878c1.27 3.01 3.279 6.435 5.128 9.15c1.567 2.155 4.416 3.713 5.278 6.441c1.718 2.86-2.572 12.297-3.565 15.294c-3.715 11.727-2.995 28.028 1.283 38.193l.228.536l.228.543c1.562 3.723 3.234 7.732 7.387 8.773c.286-.284 0-.135.567-.284c1.005-7.868 1.288-15.445 4-21.601c1.567-3.849 4.696-6.57 6.841-9.712c1.43.856 1.43 3.437 2.282 5.145c1.856 4.43 3.849 9.287 6.137 13.73c4.696 9.15 9.98 18.021 15.967 26.025c2.005 2.859 4.85 6.006 7.416 8.581c1.143.997 2.423 1.573 3.282 2.856h.28v.432c-4.278-1.577-6.99-6.003-10.402-8.587c-6.424-4.857-14.117-12.151-18.545-19.15c-1.852-4.018-3.854-7.869-5.85-11.867v-.289c-.853 1.142-.567 2.276-.994 4.004c-1.852 7.145-.426 15.296-6.843 17.866c-7.274 3.01-12.7-4.857-14.977-8.432c-7.276-11.866-9.269-31.884-4.138-48.043c1.14-3.577 1.295-7.867 3.285-10.723c-.43-2.582-2.42-3.288-3.571-4.87c-1.996-2.704-3.705-5.854-5.268-8.857c-3.002-5.866-5.138-12.875-7.417-19.166c-1.002-2.569-1.289-5.148-2.288-7.58c-1.704-3.712-4.845-7.436-7.268-10.72c-3.281-4.72-12.837-13.868-8.985-23.168m46.772 28.015c.381.382.841.716 1.317 1.045l.574.394c.765.53 1.506 1.088 1.96 1.848c.72 1.006.854 1.999 1.716 3.007c0 3.437-.996 5.722-3.007 7.146c0 0-.137.15-.278.29c-1.14-2.291-2.139-4.57-3.287-6.859c-1.414-1.998-3.413-3.583-4.565-5.866h-.277v-.287c1.721-.425 3.428-.718 5.847-.718'/%3E%3C/svg%3E"); +} +.icon-jQuery { + display: inline-block; + width: 30px; + height: 30px; + background-repeat: no-repeat; + background-size: 100% 100%; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128'%3E%3Cpath fill='%230868ac' d='M9.625 32.181C-1.404 48.032-.031 68.657 8.394 85.501c.2.404.41.801.617 1.198l.394.759l.246.437l.439.786q.393.691.804 1.379l.459.756q.456.735.933 1.46l.398.614c.439.655.888 1.309 1.352 1.951l.039.05l.228.308q.603.83 1.232 1.639l.464.59q.56.703 1.138 1.399l.435.52a75 75 0 0 0 1.586 1.812l.033.033l.061.068a80 80 0 0 0 1.612 1.699l.517.521q.635.638 1.287 1.262l.527.5q.869.82 1.764 1.607l.028.022l.307.262q.792.686 1.603 1.353l.664.529q.662.531 1.336 1.044l.714.543q.744.548 1.499 1.075l.546.387l.15.107c.478.329.967.646 1.456.963l.63.42c.75.474 1.51.943 2.279 1.396l.63.355q.847.49 1.71.959c.312.168.632.327.946.488c.407.213.811.429 1.225.636l.283.137l.501.242q.961.46 1.94.897l.41.184a67 67 0 0 0 2.263.941l.551.217c.704.271 1.418.539 2.135.791l.268.093c.787.275 1.581.53 2.381.779l.575.172c.814.245 1.619.538 2.458.693c53.339 9.727 68.833-32.053 68.833-32.053c-13.013 16.953-36.111 21.425-57.996 16.446c-.829-.187-1.633-.446-2.442-.685l-.609-.185a73 73 0 0 1-2.352-.765l-.323-.117a72 72 0 0 1-2.074-.769l-.582-.229q-1.13-.445-2.239-.931l-.447-.198a93 93 0 0 1-1.889-.879l-.546-.262c-.491-.239-.977-.493-1.461-.743c-.324-.171-.654-.332-.975-.51a59 59 0 0 1-1.751-.982l-.591-.33a81 81 0 0 1-2.28-1.397l-.615-.41a59 59 0 0 1-1.623-1.079l-.522-.367a89 89 0 0 1-1.534-1.109l-.679-.514a65 65 0 0 1-1.384-1.082l-.617-.495a83 83 0 0 1-1.724-1.453l-.189-.159a84 84 0 0 1-1.812-1.647l-.511-.491c-.441-.42-.875-.843-1.302-1.277l-.51-.509a71 71 0 0 1-1.598-1.69l-.079-.084a67 67 0 0 1-1.621-1.844l-.424-.504a71 71 0 0 1-1.167-1.442l-.427-.532a78 78 0 0 1-1.347-1.794c-12.15-16.574-16.516-39.432-6.805-58.204m25.629-2.434c-7.977 11.478-7.543 26.844-1.321 38.983a51 51 0 0 0 3.528 5.889c1.195 1.713 2.52 3.751 4.106 5.127a48 48 0 0 0 1.79 1.858l.472.465a52 52 0 0 0 1.828 1.698l.074.064l.018.018a55 55 0 0 0 2.135 1.767l.485.378a54 54 0 0 0 2.233 1.631l.065.049c.336.232.678.448 1.019.672l.483.319q.816.525 1.655 1.015l.235.136q.726.418 1.463.818l.521.271c.339.177.678.358 1.023.53l.155.07c.703.346 1.412.68 2.136.995l.472.194c.579.246 1.164.486 1.75.71l.75.275c.533.198 1.068.378 1.607.559l.727.233c.767.238 1.525.539 2.324.672c41.183 6.823 50.691-24.886 50.691-24.886c-8.57 12.343-25.168 18.233-42.879 13.635a50 50 0 0 1-2.333-.674l-.701-.227a45 45 0 0 1-1.631-.562l-.736-.274a56 56 0 0 1-1.756-.708l-.473-.2a48 48 0 0 1-2.148-.999c-.363-.177-.72-.364-1.078-.548l-.622-.32a45 45 0 0 1-1.363-.77l-.326-.185a48 48 0 0 1-1.651-1.008l-.498-.332a62 62 0 0 1-1.069-.707a58 58 0 0 1-2.226-1.628l-.501-.395c-7.752-6.12-13.898-14.486-16.819-23.971c-3.062-9.836-2.402-20.878 2.903-29.84m22.278-.775c-4.702 6.92-5.164 15.514-1.901 23.156c3.441 8.113 10.491 14.476 18.72 17.495c.339.125.679.237 1.022.354l.451.143c.485.152.966.329 1.467.424c22.74 4.394 28.908-11.669 30.549-14.034c-5.402 7.779-14.482 9.646-25.623 6.942c-.88-.213-1.847-.531-2.695-.832a33 33 0 0 1-3.201-1.329a33 33 0 0 1-5.612-3.424c-9.969-7.565-16.162-21.994-9.657-33.745'/%3E%3C/svg%3E"); +} +.icon-Bootstrap { + display: inline-block; + width: 30px; + height: 30px; + background-repeat: no-repeat; + background-size: 100% 100%; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cg fill='none'%3E%3Crect width='256' height='256' fill='url(%23skillIconsBootstrap0)' rx='60'/%3E%3Cg filter='url(%23skillIconsBootstrap2)'%3E%3Cpath fill='url(%23skillIconsBootstrap1)' d='M131.97 196.157c29.676 0 47.559-14.531 47.559-38.497c0-18.117-12.759-31.232-31.706-33.309v-.754c13.92-2.265 24.843-15.192 24.843-29.628c0-20.57-16.239-33.969-40.986-33.969H76v136.157zM97.653 77.267h28.807c15.66 0 24.553 6.983 24.553 19.627c0 13.493-10.343 21.041-29.096 21.041H97.653zm0 101.623v-44.819h28.613c20.494 0 31.127 7.548 31.127 22.268c0 14.719-10.343 22.551-29.87 22.551z'/%3E%3Cpath stroke='%23fff' stroke-width='2' d='M131.97 196.157c29.676 0 47.559-14.531 47.559-38.497c0-18.117-12.759-31.232-31.706-33.309v-.754c13.92-2.265 24.843-15.192 24.843-29.628c0-20.57-16.239-33.969-40.986-33.969H76v136.157zM97.653 77.267h28.807c15.66 0 24.553 6.983 24.553 19.627c0 13.493-10.343 21.041-29.096 21.041H97.653zm0 101.623v-44.819h28.613c20.494 0 31.127 7.548 31.127 22.268c0 14.719-10.343 22.551-29.87 22.551z'/%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id='skillIconsBootstrap0' x1='0' x2='256' y1='0' y2='256' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%239013fe'/%3E%3Cstop offset='1' stop-color='%236b11f4'/%3E%3C/linearGradient%3E%3ClinearGradient id='skillIconsBootstrap1' x1='85.793' x2='148.541' y1='68.962' y2='175.084' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23fff'/%3E%3Cstop offset='1' stop-color='%23f1e5fc'/%3E%3C/linearGradient%3E%3Cfilter id='skillIconsBootstrap2' width='137.529' height='170.157' x='59' y='47' color-interpolation-filters='sRGB' filterUnits='userSpaceOnUse'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' result='hardAlpha' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dy='4'/%3E%3CfeGaussianBlur stdDeviation='8'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0'/%3E%3CfeBlend in2='BackgroundImageFix' result='effect1_dropShadow_158_100'/%3E%3CfeBlend in='SourceGraphic' in2='effect1_dropShadow_158_100' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/g%3E%3C/svg%3E"); +} +.icon-Nodejs { + display: inline-block; + width: 30px; + height: 30px; + background-repeat: no-repeat; + background-size: 100% 100%; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128'%3E%3Cpath fill='url(%23deviconNodejs0)' d='M66.958.825a6.07 6.07 0 0 0-6.035 0L11.103 29.76c-1.895 1.072-2.96 3.095-2.96 5.24v57.988c0 2.143 1.183 4.167 2.958 5.24l49.82 28.934a6.07 6.07 0 0 0 6.036 0l49.82-28.935c1.894-1.072 2.958-3.096 2.958-5.24V35c0-2.144-1.183-4.167-2.958-5.24z'/%3E%3Cpath fill='url(%23deviconNodejs1)' d='M116.897 29.76L66.841.825A8 8 0 0 0 65.302.23L9.21 96.798a6.3 6.3 0 0 0 1.657 1.43l50.057 28.934c1.42.833 3.076 1.072 4.615.595l52.66-96.925a3.7 3.7 0 0 0-1.302-1.072'/%3E%3Cpath fill='url(%23deviconNodejs2)' d='M116.898 98.225c1.42-.833 2.485-2.262 2.958-3.81L65.066.108c-1.42-.238-2.959-.119-4.26.715L11.104 29.639l53.606 98.355c.71-.12 1.54-.358 2.25-.715z'/%3E%3Cdefs%3E%3ClinearGradient id='deviconNodejs0' x1='34.513' x2='27.157' y1='15.535' y2='30.448' gradientTransform='translate(-129.242 -73.715)scale(6.18523)' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%233f873f'/%3E%3Cstop offset='.33' stop-color='%233f8b3d'/%3E%3Cstop offset='.637' stop-color='%233e9638'/%3E%3Cstop offset='.934' stop-color='%233da92e'/%3E%3Cstop offset='1' stop-color='%233dae2b'/%3E%3C/linearGradient%3E%3ClinearGradient id='deviconNodejs1' x1='30.009' x2='50.533' y1='23.359' y2='8.288' gradientTransform='translate(-129.242 -73.715)scale(6.18523)' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.138' stop-color='%233f873f'/%3E%3Cstop offset='.402' stop-color='%2352a044'/%3E%3Cstop offset='.713' stop-color='%2364b749'/%3E%3Cstop offset='.908' stop-color='%236abf4b'/%3E%3C/linearGradient%3E%3ClinearGradient id='deviconNodejs2' x1='21.917' x2='40.555' y1='22.261' y2='22.261' gradientTransform='translate(-129.242 -73.715)scale(6.18523)' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.092' stop-color='%236abf4b'/%3E%3Cstop offset='.287' stop-color='%2364b749'/%3E%3Cstop offset='.598' stop-color='%2352a044'/%3E%3Cstop offset='.862' stop-color='%233f873f'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E"); +} +.icon-npm { + display: inline-block; + width: 30px; + height: 30px; + background-repeat: no-repeat; + background-size: 100% 100%; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%23c12127' d='M0 256V0h256v256z'/%3E%3Cpath fill='%23fff' d='M48 48h160v160h-32V80h-48v128H48z'/%3E%3C/svg%3E"); +} +.icon-RxJS { + display: inline-block; + width: 30px; + height: 30px; + background-repeat: no-repeat; + background-size: 100% 100%; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128'%3E%3Cdefs%3E%3ClinearGradient id='deviconRxjs0' x1='53.496' x2='177.93' y1='247.7' y2='115.32' gradientTransform='translate(-7.564 -7.544)scale(.50472)' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23df1c84'/%3E%3Cstop offset='.401' stop-color='%23de1c85'/%3E%3Cstop offset='.77' stop-color='%23932c86'/%3E%3Cstop offset='1' stop-color='%235c2f87'/%3E%3C/linearGradient%3E%3ClinearGradient id='deviconRxjs1' x1='83.212' x2='137.37' y1='62.336' y2='62.336' gradientTransform='translate(-7.564 -7.544)scale(.50472)' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23df1c84'/%3E%3Cstop offset='.238' stop-color='%23d91e85'/%3E%3Cstop offset='.658' stop-color='%23c72085'/%3E%3Cstop offset='.999' stop-color='%23b42184'/%3E%3C/linearGradient%3E%3CradialGradient id='deviconRxjs2' cx='190.46' cy='80.2' r='121.58' gradientTransform='matrix(.50472 .0012 -.001 .42204 -7.483 -1.141)' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23df1c84'/%3E%3Cstop offset='.139' stop-color='%23de1e85'/%3E%3Cstop offset='.285' stop-color='%23d62085'/%3E%3Cstop offset='.434' stop-color='%23c82286'/%3E%3Cstop offset='.586' stop-color='%23b72786'/%3E%3Cstop offset='.739' stop-color='%239c2a86'/%3E%3Cstop offset='.891' stop-color='%237c2e87'/%3E%3Cstop offset='1' stop-color='%235c2f87'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath fill='%23e32186' d='M7.375 80.934C4.75 72.758 3.996 64.125 5.508 55.243c.656-3.684 1.668-7.219 2.777-10.801c0 0 6.965-22.863 30.535-33.312c0 0 8.125-4.29 20.34-4.59c0 0-1.664-1.617-2.726-2.324C50.68.38 42.102-.882 36.903 4.521c-1.567 1.613-2.88 3.382-4.34 4.996c-1.668 1.816-3.688 3.332-6.008 4.187c-2.02.758-4.04.606-6.106.961c-2.12.352-4.293 1.11-6.007 2.473c-1.868 1.516-2.625 3.531-2.825 5.855c-.203 1.817-.152 3.684-.254 5.5c-.253 5.352-1.968 6.864-5.804 9.844c-1.614 1.211-2.977 2.824-3.989 4.543c-3.027 5.348 1.82 10.898 2.07 16.301c.052 1.11-.05 2.219-.452 3.281c-.407 1.16-1.211 1.918-1.868 2.875C.41 66.6-.195 68.115.06 69.677c.25 1.567 1.058 3.031 1.816 4.395c1.465 2.422 3.281 4.59 5.2 6.66c.1 0 .199.101.3.203'/%3E%3Cpath fill='url(%23deviconRxjs0)' d='M103.68 100.31c11.609-5.047 16.555-13.777 16.555-13.777c10.852-14.789 7.168-30.383 7.168-30.383c-6.914 15.039-13.227 19.18-13.227 19.18c17.012-25.895.102-41.539.102-41.539c6.914 14.738-2.27 32.703-2.27 32.703c-7.723 16.254-18.676 22.059-18.676 22.059c12.215 2.27 21.2-5.957 21.2-5.957c-17.517 18.926-36.493 18.02-36.493 18.02c7.977 8.934 19.938 8.176 19.938 8.176c-15.645 3.683-30.332-1.516-42.395-11.56a67 67 0 0 1-6.46-6.054s-1.817-1.918-2.173-2.422l-.05-.05c-.25 9.335 9.488 18.015 9.488 18.015c-12.215-5.046-17.816-16-17.816-16s-8.227-14.03-2.27-30.027c5.953-16 23.973-19.434 23.973-19.434c14.891 7.22 27.508 9.489 27.508 9.489c26.598 4.441 25.086-8.578 25.086-8.578c.25-11.207-16.656-23.117-16.656-23.117c-30.133-22.36-57.387-7.926-57.387-7.926C15.255 21.577 8.29 44.44 8.29 44.44c-1.11 3.582-2.12 7.117-2.777 10.8c-2.574 14.993 1.312 29.173 9.742 41.794c13.121 19.582 34.422 26.344 34.422 26.344c31.543 10.699 53.094-5.047 53.094-5.047c19.836-13.63 23.824-29.375 23.824-29.375c-16 12.52-22.914 11.355-22.914 11.355zM79.051 26.673a2.713 2.713 0 0 1 2.723 2.727a2.71 2.71 0 0 1-2.723 2.722a2.713 2.713 0 0 1-2.727-2.722a2.714 2.714 0 0 1 2.727-2.727'/%3E%3Cpath fill='url(%23deviconRxjs2)' d='M112.81 42.121c.25-11.207-16.656-23.117-16.656-23.117c-30.133-22.309-57.387-7.875-57.387-7.875C15.197 21.578 8.232 44.441 8.232 44.441c-1.363 3.887-2.574 9.844-2.574 9.844c-1.465 7.469-.809 14.383-.809 14.383c.606 6.613 2.07 11.055 2.07 11.055c1.516 4.742 2.22 6.207 2.22 6.207c-.048-.153-.301-1.262-.301-1.262S6.716 74.473 8.685 64.68c0 0 1.715-10.195 8.684-18.066c0 0 11.305-16.102 32.352-9.793c0 0 4.543 1.617 6.105 2.422c1.567.758 4.29 1.918 4.29 1.918c14.89 7.219 27.507 9.488 27.507 9.488c26.7 4.492 25.188-8.527 25.188-8.527zm-33.766-9.945a2.713 2.713 0 0 1-2.727-2.723a2.714 2.714 0 0 1 2.727-2.727a2.713 2.713 0 0 1 2.723 2.727a2.71 2.71 0 0 1-2.723 2.723'/%3E%3Cpath fill='url(%23deviconRxjs1)' d='M61.785 21.832L44.574 16.48c-.102 0-.605-.254-1.516 0c0 0-10.145 2.575-8.378 8.125c0 0 1.062 3.485 3.937 6.864l18.926-.907z'/%3E%3C/svg%3E"); +} +.icon-BurgerMenu { + display: inline-block; + width: 30px; + height: 30px; + --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 6.001h18m-18 6h18m-18 6h18'/%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 diff --git a/src/stylesheets/media.scss b/src/stylesheets/media.scss index fe8c261..23a5e24 100644 --- a/src/stylesheets/media.scss +++ b/src/stylesheets/media.scss @@ -1,31 +1,590 @@ /* media queries for responsive design regarding devices */ -@media screen and (min-width: 1440px) { /* large desktop devices */ - body { - background-color: #4A516D; +@import "./defines.scss"; + +@media screen and (min-width: $desktop-width) { + + // BASIC + .box { + margin-left: var(--block-margin); + } + p { + font-size: 16px; + } + + .nav-bar { + #nav-logo { + width: var(--nav-logo); + } + ul { + width: var(--nav-width); + } + .nav-collapse { + display: none!important; + } + } + + .home { + .left { + max-width: 55%; + h1 { + margin:0px 0px 12px 100px; + } + p { + margin: 0px 0px 0px 100px; + font-size: 24px; + } + } + .profile-picture { + img { + width: 400px; + height: auto; + margin-left: 50px; + } + } + } + + .about { + #signature_img { + width: 200px; + } + } + + .cv { + .wrapper_cv { + p { + font-size: 24px; + } + } + .left_exp { + margin-left: 150px!important; + } + .right_edu { + margin-right: 150px!important; + } + .wrapper_techstack h4 { + margin: 0px 100px; + } + .wrapper_ul { + margin: 0px 100px; + ul { + width: 75%; + } + } + } + + .portfolio { + .card { + h4 { + margin-bottom: 10px!important; + } + p { + font-size:16px; + margin: 10px 50px 0px 50px; + } + img { + width: 400px; + } + i { + width: 24px; + height: 24px; + } + .card-technology { + margin-left: 50px; + } + } } } -@media screen and (max-width: 1440px) { /* small desktop devices */ - body { - background-color: #d6f5d6; +@media screen and (max-width: $desktop-width) { + + // BASIC + .box { + margin-left: var(--block-margin); + } + p { + font-size: 14px; + } + + .nav-bar { + #nav-logo { + width: var(--nav-logo); + } + ul { + width: var(--nav-width); + } + .nav-collapse { + display: none!important; + } + .nav-full { + display: var(--nav-full)!important; + } + } + + .home { + .left { + max-width: 55%; + h1 { + font-size: 45px; + margin:0px 0px 12px 100px; + } + p { + margin: 0px 0px 0px 100px; + font-size: 22px; + } + } + .profile-picture { + img { + width: 350px; + height: auto; + margin-left: 50px; + } + } + } + + .about { + .wrapper_about_profile { + display: flex; + flex-wrap: wrap; + h5 { + margin: 0px 50px 25px 50px!important; + } + p, form, img { + font-size: 20px!important; + margin: 0px 50px!important; + } + label { + font-size:24px!important; + } + input { + font-size: 20px!important; + } + } + #about_first_info { + width: 50%!important; + order: 1!important; + text-align: center!important; + } + #about_second_info { + width: 100%!important; + order: 3!important; + } + #about_third_info { + width: 50%!important; + order: 2!important; + } + #signature_img { + width:200px; + } + } + + .cv { + .wrapper_cv { + p { + font-size: 20px; + } + } + .left_exp { + margin-left: 100px!important; + } + .right_edu { + margin-right: 100px!important; + } + .wrapper_techstack h4 { + margin: 0px 100px; + } + .wrapper_ul { + margin: 0px 100px; + ul { + width: 100%; + } + } + } + + .portfolio { + .card { + h4 { + font-size: 24px!important; + margin: 0px 25px 10px 25px!important; + } + p { + font-size:12px; + margin: 5px 25px 0px 25px; + } + img { + width: 300px; + } + i { + width: 20px; + height: 20px; + } + a.a-github { + vertical-align: middle; + } + .card-technology { + margin-left: 25px; + } + } } } -@media screen and (max-width: 1024px) { /* tablet device [landscape] */ - body { - background-color: #9999ff; +@media screen and (max-width: $tablet-landscape-width) { + + // BASIC + .box { + margin-left: var(--block-margin); + } + p { + font-size: 14px; + } + + .nav-bar { + #nav-logo { + width: var(--nav-logo); + } + ul { + width: var(--nav-width); + } + .nav-collapse { + display: none!important; + } + .nav-full { + display: var(--nav-full)!important; + } + } + + .home { + justify-content: center; + .left { + max-width: 75%; + padding-bottom: 50px; + h1 { + font-size: 40px; + margin: 0px 50px 12px 50px; + } + p { + margin: 0px 50px; + font-size: 20px; + text-align: justify; + } + } + .profile-picture { + img { + width: 300px; + height: auto; + margin-left: 0; + } + } + } + + .about { + .wrapper_about_profile { + h5 { + margin: 0px 0px 25px 50px!important; + } + p, form { + font-size: 18px!important; + margin: 0px 0px 0px 50px!important; + } + img { + margin: 0px!important; + } + label { + font-size:20px!important; + } + input { + font-size: 16px!important; + } + } + #about_first_info { + width: 40%!important; + } + #about_second_info { + h5 { + margin: 0px 50px 25px 50px!important; + } + p { + margin: 0px 50px!important; + } + } + #about_third_info { + width: 60%!important; + } + #signature_img { + width: 150px; + } + .about_service, + .about_funfacts { + margin: 100px 50px 25px 50px!important; + h6 { + font-size: 18px!important; + } + p { + font-size: 16px!important; + } + i { + width: 40px!important; + height: 40px!important; + } + } + } + + .cv { + .left_exp { + margin-left: 50px!important; + } + .right_edu { + margin-right: 50px!important; + } + .wrapper_techstack h4 { + margin: 0px 100px; + } + .wrapper_ul { + margin: 0px 50px; + ul { + width: 100%; + } + } + .wrapper_ul i { + width: 50px!important; + height: 50px!important; + } } } -@media screen and (max-width: 768px) { /* mobile devices [landscape] */ - body { - background-color: #ffb3cc; +@media screen and (max-width: $phone-landscape-width) { + + // BASIC + .box { + margin-left: var(--block-margin); + } + h2 { + font-size: 35px; + &::after { + font-size: 70px!important; + top: 13px!important; + left: 85px; + } + } + + .nav-bar { + #nav-unfold { + display: block!important; + } + #nav-copyright { + margin: var(--nav-copyright); + } + #nav-logo { + width: var(--nav-logo); + } + ul { + width: var(--nav-width); + z-index: var(--nav-z); + } + .nav-full { + display: var(--nav-full)!important; + } + .nav-bar li { + padding: 30px 0px 0px 0px!important; + } + ul>:last-child p { + padding: 0 10px!important; + } + } + + .home { + &::before { + background-position-x:25%; + } + .left { + max-width: 100%; + padding-bottom: 50px; + h1 { + font-size: 35px; + margin: 0px 50px 12px 50px; + } + p { + margin: 0px 50px; + font-size: 18px; + text-align: justify; + } + } + } + + .about { + h2 { + margin: 50px 50px 0px 50px!important; + } + .wrapper_about_profile { + margin: 0px 50px!important; + } + #about_second_info { + h5 { + margin: 0px 0px 25px 0px!important; + } + p { + margin: 0!important; + } + } + .about_service, + .about_funfacts { + h6 { + font-size: 16px!important; + } + p { + font-size: 14px!important; + } + } + .about_funfacts { + display: flex!important; + flex-wrap: wrap!important; + h5 { + width: 100%!important; + } + .column_funfacts { + width: 50%!important; + } + #about_fact1 { order: 1; } + #about_fact2 { order: 2; } + #about_fact3 { order: 4; } + #about_fact4 { order: 3; } + } } + .cv { + h2 { + margin: 50px 50px 0px 50px!important; + } + .cv_download { + margin: 50px 0px!important; + } + .wrapper_cv { + margin: 0!important; + display: inline-block!important; + } + .left_exp { + margin: 0px 0px 50px 0px!important; + } + .right_edu { + margin: 0px 0px 100px 0px!important; + text-align: left!important; + h4 { + text-align: left!important; + padding: 0 0 0 15px!important; + } + p { + padding: 0 0 0 15px!important; + border-right: none!important; + border-left-width: 4px!important; + border-left-color: var(--yqni13-pink)!important; + border-left-style: double!important; + } + } + .wrapper_techstack { + margin: 0 50px!important; + } + .wrapper_ul { + margin: 0; + ul { + width: 100%; + } + } + .wrapper_ul i { + width: 40px!important; + height: 40px!important; + } + } + + .portfolio { + h2 { + margin: 50px 50px 0px 50px!important; + } + .page-header { + display: flex!important; + flex-wrap: wrap!important; + justify-content: center; + margin: 0px 50px!important; + } + .portfolio-wrapper { + margin: 0px 50px 25px 50px!important; + } + } } -@media screen and (max-width: 480px) { /* mobile devices [portrait] */ - body { - background-color: #ffcc99; + +@media screen and (max-width: $phone-portrait-width) { + + .nav-bar { + #nav-copyright { + margin: var(--nav-copyright); + } + #nav-logo { + width: var(--nav-logo); + } + ul { + width: var(--nav-width); + z-index: var(--nav-z); + } + .nav-full { + display: var(--nav-full)!important; + } + } + + .home { + .profile-picture { + img { + width: 200px; + height: auto; + margin-left: 0; + } + } } -} \ No newline at end of file + + .about { + #about_first_info { + width: 100%!important; + margin-top: 50px!important; + } + #about_third_info { + width: 100%!important; + h5 { + margin-left: 0px!important; + } + form { + margin: 0px!important; + } + .download_button { + text-align: center!important; + margin-left: 0px!important; + } + } + #signature_img { + width: 200px; + } + .about_service, + .about_funfacts { + margin: 100px 25px 25px 25px!important; + h5 { + margin-bottom: 25px!important; + } + i { + margin-top: 25px!important; + } + } + .about_service { + #about_service1, + #about_service2 { + width: 50%!important; + } + #about_service3 { + width: 100%!important; + } + } + } + + .cv { + .wrapper_techstack h4 { + margin: 0!important; + } + } +} + diff --git a/tsconfig.app.json b/tsconfig.app.json index 374cc9d..2e8c04b 100644 --- a/tsconfig.app.json +++ b/tsconfig.app.json @@ -3,7 +3,8 @@ "extends": "./tsconfig.json", "compilerOptions": { "outDir": "./out-tsc/app", - "types": [] + "types": ["node"], + "typeRoots": ["./node_modules/@types"] }, "files": [ "src/main.ts" diff --git a/tsconfig.json b/tsconfig.json index eb49734..710d338 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -9,6 +9,7 @@ "noImplicitReturns": true, "noFallthroughCasesInSwitch": true, "skipLibCheck": true, + "resolveJsonModule": true, "esModuleInterop": true, "sourceMap": true, "declaration": false,