diff --git a/package-lock.json b/package-lock.json index 20ee168..1cfc249 100644 --- a/package-lock.json +++ b/package-lock.json @@ -191,109 +191,6 @@ } } }, - "node_modules/@angular-devkit/build-angular/node_modules/@babel/core": { - "version": "7.24.0", - "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.24.0.tgz", - "integrity": "sha512-fQfkg0Gjkza3nf0c7/w6Xf34BW4YvzNfACRLmmb7XRLa6XHdR+K9AlJlxneFfWYf6uhOzuzZVTjF/8KfndZANw==", - "dev": true, - "dependencies": { - "@ampproject/remapping": "^2.2.0", - "@babel/code-frame": "^7.23.5", - "@babel/generator": "^7.23.6", - "@babel/helper-compilation-targets": "^7.23.6", - "@babel/helper-module-transforms": "^7.23.3", - "@babel/helpers": "^7.24.0", - "@babel/parser": "^7.24.0", - "@babel/template": "^7.24.0", - "@babel/traverse": "^7.24.0", - "@babel/types": "^7.24.0", - "convert-source-map": "^2.0.0", - "debug": "^4.1.0", - "gensync": "^1.0.0-beta.2", - "json5": "^2.2.3", - "semver": "^6.3.1" - }, - "engines": { - "node": ">=6.9.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/babel" - } - }, - "node_modules/@angular-devkit/build-angular/node_modules/@babel/core/node_modules/semver": { - "version": "6.3.1", - "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz", - "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==", - "dev": true, - "bin": { - "semver": "bin/semver.js" - } - }, - "node_modules/@angular-devkit/build-angular/node_modules/convert-source-map": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz", - "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==", - "dev": true - }, - "node_modules/@angular-devkit/build-angular/node_modules/lru-cache": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", - "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==", - "dev": true, - "dependencies": { - "yallist": "^4.0.0" - }, - "engines": { - "node": ">=10" - } - }, - "node_modules/@angular-devkit/build-angular/node_modules/picomatch": { - "version": "4.0.1", - "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.1.tgz", - "integrity": "sha512-xUXwsxNjwTQ8K3GnT4pCJm+xq3RUPQbmkYJTP5aFIfNIvbcc/4MUxgBaaRSZJ6yGJZiGSyYlM6MzwTsRk8SYCg==", - "dev": true, - "engines": { - "node": ">=12" - }, - "funding": { - "url": "https://github.com/sponsors/jonschlinkert" - } - }, - "node_modules/@angular-devkit/build-angular/node_modules/semver": { - "version": "7.6.0", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.0.tgz", - "integrity": "sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==", - "dev": true, - "dependencies": { - "lru-cache": "^6.0.0" - }, - "bin": { - "semver": "bin/semver.js" - }, - "engines": { - "node": ">=10" - } - }, - "node_modules/@angular-devkit/build-angular/node_modules/watchpack": { - "version": "2.4.0", - "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz", - "integrity": "sha512-Lcvm7MGST/4fup+ifyKi2hjyIAwcdI4HRgtvTpIUxBRhB+RFtUh8XtDOxUfctVCnhVi+QQj49i91OyvzkJl6cg==", - "dev": true, - "dependencies": { - "glob-to-regexp": "^0.4.1", - "graceful-fs": "^4.1.2" - }, - "engines": { - "node": ">=10.13.0" - } - }, - "node_modules/@angular-devkit/build-angular/node_modules/yallist": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", - "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", - "dev": true - }, "node_modules/@angular-devkit/build-webpack": { "version": "0.1703.3", "resolved": "https://registry.npmjs.org/@angular-devkit/build-webpack/-/build-webpack-0.1703.3.tgz", @@ -340,18 +237,6 @@ } } }, - "node_modules/@angular-devkit/core/node_modules/picomatch": { - "version": "4.0.1", - "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.1.tgz", - "integrity": "sha512-xUXwsxNjwTQ8K3GnT4pCJm+xq3RUPQbmkYJTP5aFIfNIvbcc/4MUxgBaaRSZJ6yGJZiGSyYlM6MzwTsRk8SYCg==", - "dev": true, - "engines": { - "node": ">=12" - }, - "funding": { - "url": "https://github.com/sponsors/jonschlinkert" - } - }, "node_modules/@angular-devkit/schematics": { "version": "17.3.3", "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-17.3.3.tgz", @@ -418,39 +303,6 @@ "yarn": ">= 1.13.0" } }, - "node_modules/@angular/cli/node_modules/lru-cache": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", - "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==", - "dev": true, - "dependencies": { - "yallist": "^4.0.0" - }, - "engines": { - "node": ">=10" - } - }, - "node_modules/@angular/cli/node_modules/semver": { - "version": "7.6.0", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.0.tgz", - "integrity": "sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==", - "dev": true, - "dependencies": { - "lru-cache": "^6.0.0" - }, - "bin": { - "semver": "bin/semver.js" - }, - "engines": { - "node": ">=10" - } - }, - "node_modules/@angular/cli/node_modules/yallist": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", - "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", - "dev": true - }, "node_modules/@angular/common": { "version": "17.3.3", "resolved": "https://registry.npmjs.org/@angular/common/-/common-17.3.3.tgz", @@ -513,6 +365,51 @@ "typescript": ">=5.2 <5.5" } }, + "node_modules/@angular/compiler-cli/node_modules/@babel/core": { + "version": "7.23.9", + "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.23.9.tgz", + "integrity": "sha512-5q0175NOjddqpvvzU+kDiSOAk4PfdO6FvwCWoQ6RO7rTzEe8vlo+4HVfcnAREhD4npMs0e9uZypjTwzZPCf/cw==", + "dev": true, + "dependencies": { + "@ampproject/remapping": "^2.2.0", + "@babel/code-frame": "^7.23.5", + "@babel/generator": "^7.23.6", + "@babel/helper-compilation-targets": "^7.23.6", + "@babel/helper-module-transforms": "^7.23.3", + "@babel/helpers": "^7.23.9", + "@babel/parser": "^7.23.9", + "@babel/template": "^7.23.9", + "@babel/traverse": "^7.23.9", + "@babel/types": "^7.23.9", + "convert-source-map": "^2.0.0", + "debug": "^4.1.0", + "gensync": "^1.0.0-beta.2", + "json5": "^2.2.3", + "semver": "^6.3.1" + }, + "engines": { + "node": ">=6.9.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/babel" + } + }, + "node_modules/@angular/compiler-cli/node_modules/@babel/core/node_modules/convert-source-map": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz", + "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==", + "dev": true + }, + "node_modules/@angular/compiler-cli/node_modules/@babel/core/node_modules/semver": { + "version": "6.3.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz", + "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==", + "dev": true, + "bin": { + "semver": "bin/semver.js" + } + }, "node_modules/@angular/core": { "version": "17.3.3", "resolved": "https://registry.npmjs.org/@angular/core/-/core-17.3.3.tgz", @@ -623,9 +520,9 @@ } }, "node_modules/@babel/core": { - "version": "7.23.9", - "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.23.9.tgz", - "integrity": "sha512-5q0175NOjddqpvvzU+kDiSOAk4PfdO6FvwCWoQ6RO7rTzEe8vlo+4HVfcnAREhD4npMs0e9uZypjTwzZPCf/cw==", + "version": "7.24.0", + "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.24.0.tgz", + "integrity": "sha512-fQfkg0Gjkza3nf0c7/w6Xf34BW4YvzNfACRLmmb7XRLa6XHdR+K9AlJlxneFfWYf6uhOzuzZVTjF/8KfndZANw==", "dev": true, "dependencies": { "@ampproject/remapping": "^2.2.0", @@ -633,11 +530,11 @@ "@babel/generator": "^7.23.6", "@babel/helper-compilation-targets": "^7.23.6", "@babel/helper-module-transforms": "^7.23.3", - "@babel/helpers": "^7.23.9", - "@babel/parser": "^7.23.9", - "@babel/template": "^7.23.9", - "@babel/traverse": "^7.23.9", - "@babel/types": "^7.23.9", + "@babel/helpers": "^7.24.0", + "@babel/parser": "^7.24.0", + "@babel/template": "^7.24.0", + "@babel/traverse": "^7.24.0", + "@babel/types": "^7.24.0", "convert-source-map": "^2.0.0", "debug": "^4.1.0", "gensync": "^1.0.0-beta.2", @@ -3146,15 +3043,6 @@ "url": "https://github.com/sponsors/isaacs" } }, - "node_modules/@npmcli/package-json/node_modules/json-parse-even-better-errors": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-3.0.1.tgz", - "integrity": "sha512-aatBvbL26wVUCLmbWdCpeu9iF5wOyWpagiKkInA+kfws3sWdBrTnsvN2CKcyCYyUrc7rebNBlK6+kteg7ksecg==", - "dev": true, - "engines": { - "node": "^14.17.0 || ^16.13.0 || >=18.0.0" - } - }, "node_modules/@npmcli/package-json/node_modules/minimatch": { "version": "9.0.4", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.4.tgz", @@ -4206,6 +4094,18 @@ "node": ">= 8" } }, + "node_modules/anymatch/node_modules/picomatch": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", + "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", + "dev": true, + "engines": { + "node": ">=8.6" + }, + "funding": { + "url": "https://github.com/sponsors/jonschlinkert" + } + }, "node_modules/argparse": { "version": "1.0.10", "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz", @@ -4757,16 +4657,10 @@ "dev": true }, "node_modules/chokidar": { - "version": "3.5.3", - "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz", - "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==", + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz", + "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==", "dev": true, - "funding": [ - { - "type": "individual", - "url": "https://paulmillr.com/funding/" - } - ], "dependencies": { "anymatch": "~3.1.2", "braces": "~3.0.2", @@ -4779,6 +4673,9 @@ "engines": { "node": ">= 8.10.0" }, + "funding": { + "url": "https://paulmillr.com/funding/" + }, "optionalDependencies": { "fsevents": "~2.3.2" } @@ -4857,6 +4754,56 @@ "node": ">=12" } }, + "node_modules/cliui/node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/cliui/node_modules/color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "dependencies": { + "color-name": "~1.1.4" + }, + "engines": { + "node": ">=7.0.0" + } + }, + "node_modules/cliui/node_modules/color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true + }, + "node_modules/cliui/node_modules/wrap-ansi": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz", + "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==", + "dev": true, + "dependencies": { + "ansi-styles": "^4.0.0", + "string-width": "^4.1.0", + "strip-ansi": "^6.0.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/wrap-ansi?sponsor=1" + } + }, "node_modules/clone": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz", @@ -5672,27 +5619,6 @@ "node": ">=10.0.0" } }, - "node_modules/engine.io/node_modules/ws": { - "version": "8.11.0", - "resolved": "https://registry.npmjs.org/ws/-/ws-8.11.0.tgz", - "integrity": "sha512-HPG3wQd9sNQoT9xHyNCXoDUa+Xw/VevmY9FoHyQ+g+rrMn4j6FB4np7Z0OhdTgjx6MgQLK7jwSy1YecU1+4Asg==", - "dev": true, - "engines": { - "node": ">=10.0.0" - }, - "peerDependencies": { - "bufferutil": "^4.0.1", - "utf-8-validate": "^5.0.2" - }, - "peerDependenciesMeta": { - "bufferutil": { - "optional": true - }, - "utf-8-validate": { - "optional": true - } - } - }, "node_modules/enhanced-resolve": { "version": "5.16.0", "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.16.0.tgz", @@ -5876,15 +5802,6 @@ "node": ">=8.0.0" } }, - "node_modules/eslint-scope/node_modules/estraverse": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz", - "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==", - "dev": true, - "engines": { - "node": ">=4.0" - } - }, "node_modules/esprima": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz", @@ -5910,7 +5827,7 @@ "node": ">=4.0" } }, - "node_modules/estraverse": { + "node_modules/esrecurse/node_modules/estraverse": { "version": "5.3.0", "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz", "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==", @@ -5919,6 +5836,15 @@ "node": ">=4.0" } }, + "node_modules/estraverse": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz", + "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==", + "dev": true, + "engines": { + "node": ">=4.0" + } + }, "node_modules/esutils": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz", @@ -7026,21 +6952,6 @@ "node": ">=18" } }, - "node_modules/inquirer/node_modules/ansi-styles": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", - "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", - "dev": true, - "dependencies": { - "color-convert": "^2.0.1" - }, - "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/chalk/ansi-styles?sponsor=1" - } - }, "node_modules/inquirer/node_modules/chalk": { "version": "5.3.0", "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz", @@ -7053,38 +6964,6 @@ "url": "https://github.com/chalk/chalk?sponsor=1" } }, - "node_modules/inquirer/node_modules/color-convert": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", - "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", - "dev": true, - "dependencies": { - "color-name": "~1.1.4" - }, - "engines": { - "node": ">=7.0.0" - } - }, - "node_modules/inquirer/node_modules/color-name": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", - "dev": true - }, - "node_modules/inquirer/node_modules/wrap-ansi": { - "version": "6.2.0", - "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz", - "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==", - "dev": true, - "dependencies": { - "ansi-styles": "^4.0.0", - "string-width": "^4.1.0", - "strip-ansi": "^6.0.0" - }, - "engines": { - "node": ">=8" - } - }, "node_modules/ip-address": { "version": "9.0.5", "resolved": "https://registry.npmjs.org/ip-address/-/ip-address-9.0.5.tgz", @@ -7525,10 +7404,13 @@ } }, "node_modules/json-parse-even-better-errors": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz", - "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==", - "dev": true + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-3.0.1.tgz", + "integrity": "sha512-aatBvbL26wVUCLmbWdCpeu9iF5wOyWpagiKkInA+kfws3sWdBrTnsvN2CKcyCYyUrc7rebNBlK6+kteg7ksecg==", + "dev": true, + "engines": { + "node": "^14.17.0 || ^16.13.0 || >=18.0.0" + } }, "node_modules/json-schema-traverse": { "version": "1.0.0", @@ -7671,6 +7553,21 @@ "source-map-support": "^0.5.5" } }, + "node_modules/karma/node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, "node_modules/karma/node_modules/cliui": { "version": "7.0.4", "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz", @@ -7682,6 +7579,24 @@ "wrap-ansi": "^7.0.0" } }, + "node_modules/karma/node_modules/color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "dependencies": { + "color-name": "~1.1.4" + }, + "engines": { + "node": ">=7.0.0" + } + }, + "node_modules/karma/node_modules/color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true + }, "node_modules/karma/node_modules/source-map": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", @@ -7700,6 +7615,23 @@ "node": ">=14.14" } }, + "node_modules/karma/node_modules/wrap-ansi": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz", + "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==", + "dev": true, + "dependencies": { + "ansi-styles": "^4.0.0", + "string-width": "^4.1.0", + "strip-ansi": "^6.0.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/wrap-ansi?sponsor=1" + } + }, "node_modules/karma/node_modules/yargs": { "version": "16.2.0", "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz", @@ -8137,6 +8069,18 @@ "node": ">=8.6" } }, + "node_modules/micromatch/node_modules/picomatch": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", + "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", + "dev": true, + "engines": { + "node": ">=8.6" + }, + "funding": { + "url": "https://github.com/sponsors/jonschlinkert" + } + }, "node_modules/mime": { "version": "2.6.0", "resolved": "https://registry.npmjs.org/mime/-/mime-2.6.0.tgz", @@ -9157,6 +9101,12 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/parse-json/node_modules/json-parse-even-better-errors": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz", + "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==", + "dev": true + }, "node_modules/parse-node-version": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/parse-node-version/-/parse-node-version-1.0.1.tgz", @@ -9166,6 +9116,18 @@ "node": ">= 0.10" } }, + "node_modules/parse5": { + "version": "7.1.2", + "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.1.2.tgz", + "integrity": "sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==", + "dev": true, + "dependencies": { + "entities": "^4.4.0" + }, + "funding": { + "url": "https://github.com/inikulin/parse5?sponsor=1" + } + }, "node_modules/parse5-html-rewriting-stream": { "version": "7.0.0", "resolved": "https://registry.npmjs.org/parse5-html-rewriting-stream/-/parse5-html-rewriting-stream-7.0.0.tgz", @@ -9180,18 +9142,6 @@ "url": "https://github.com/inikulin/parse5?sponsor=1" } }, - "node_modules/parse5-html-rewriting-stream/node_modules/parse5": { - "version": "7.1.2", - "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.1.2.tgz", - "integrity": "sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==", - "dev": true, - "dependencies": { - "entities": "^4.4.0" - }, - "funding": { - "url": "https://github.com/inikulin/parse5?sponsor=1" - } - }, "node_modules/parse5-sax-parser": { "version": "7.0.0", "resolved": "https://registry.npmjs.org/parse5-sax-parser/-/parse5-sax-parser-7.0.0.tgz", @@ -9204,18 +9154,6 @@ "url": "https://github.com/inikulin/parse5?sponsor=1" } }, - "node_modules/parse5-sax-parser/node_modules/parse5": { - "version": "7.1.2", - "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.1.2.tgz", - "integrity": "sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==", - "dev": true, - "dependencies": { - "entities": "^4.4.0" - }, - "funding": { - "url": "https://github.com/inikulin/parse5?sponsor=1" - } - }, "node_modules/parseurl": { "version": "1.3.3", "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz", @@ -9305,12 +9243,12 @@ "dev": true }, "node_modules/picomatch": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", - "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.1.tgz", + "integrity": "sha512-xUXwsxNjwTQ8K3GnT4pCJm+xq3RUPQbmkYJTP5aFIfNIvbcc/4MUxgBaaRSZJ6yGJZiGSyYlM6MzwTsRk8SYCg==", "dev": true, "engines": { - "node": ">=8.6" + "node": ">=12" }, "funding": { "url": "https://github.com/sponsors/jonschlinkert" @@ -9740,15 +9678,6 @@ "node": "^14.17.0 || ^16.13.0 || >=18.0.0" } }, - "node_modules/read-package-json-fast/node_modules/json-parse-even-better-errors": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-3.0.1.tgz", - "integrity": "sha512-aatBvbL26wVUCLmbWdCpeu9iF5wOyWpagiKkInA+kfws3sWdBrTnsvN2CKcyCYyUrc7rebNBlK6+kteg7ksecg==", - "dev": true, - "engines": { - "node": "^14.17.0 || ^16.13.0 || >=18.0.0" - } - }, "node_modules/read-package-json/node_modules/brace-expansion": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", @@ -9780,15 +9709,6 @@ "url": "https://github.com/sponsors/isaacs" } }, - "node_modules/read-package-json/node_modules/json-parse-even-better-errors": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-3.0.1.tgz", - "integrity": "sha512-aatBvbL26wVUCLmbWdCpeu9iF5wOyWpagiKkInA+kfws3sWdBrTnsvN2CKcyCYyUrc7rebNBlK6+kteg7ksecg==", - "dev": true, - "engines": { - "node": "^14.17.0 || ^16.13.0 || >=18.0.0" - } - }, "node_modules/read-package-json/node_modules/minimatch": { "version": "9.0.4", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.4.tgz", @@ -9830,6 +9750,18 @@ "node": ">=8.10.0" } }, + "node_modules/readdirp/node_modules/picomatch": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", + "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", + "dev": true, + "engines": { + "node": ">=8.6" + }, + "funding": { + "url": "https://github.com/sponsors/jonschlinkert" + } + }, "node_modules/reflect-metadata": { "version": "0.2.2", "resolved": "https://registry.npmjs.org/reflect-metadata/-/reflect-metadata-0.2.2.tgz", @@ -10258,9 +10190,9 @@ } }, "node_modules/semver": { - "version": "7.5.4", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", - "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==", + "version": "7.6.0", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.0.tgz", + "integrity": "sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==", "dev": true, "dependencies": { "lru-cache": "^6.0.0" @@ -10605,27 +10537,6 @@ "ws": "~8.11.0" } }, - "node_modules/socket.io-adapter/node_modules/ws": { - "version": "8.11.0", - "resolved": "https://registry.npmjs.org/ws/-/ws-8.11.0.tgz", - "integrity": "sha512-HPG3wQd9sNQoT9xHyNCXoDUa+Xw/VevmY9FoHyQ+g+rrMn4j6FB4np7Z0OhdTgjx6MgQLK7jwSy1YecU1+4Asg==", - "dev": true, - "engines": { - "node": ">=10.0.0" - }, - "peerDependencies": { - "bufferutil": "^4.0.1", - "utf-8-validate": "^5.0.2" - }, - "peerDependenciesMeta": { - "bufferutil": { - "optional": true - }, - "utf-8-validate": { - "optional": true - } - } - }, "node_modules/socket.io-parser": { "version": "4.2.4", "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.4.tgz", @@ -11133,24 +11044,6 @@ "url": "https://opencollective.com/webpack" } }, - "node_modules/terser-webpack-plugin/node_modules/terser": { - "version": "5.30.3", - "resolved": "https://registry.npmjs.org/terser/-/terser-5.30.3.tgz", - "integrity": "sha512-STdUgOUx8rLbMGO9IOwHLpCqolkDITFFQSMYYwKE1N2lY6MVSaeoi10z/EhWxRc6ybqoVmKSkhKYH/XUpl7vSA==", - "dev": true, - "dependencies": { - "@jridgewell/source-map": "^0.3.3", - "acorn": "^8.8.2", - "commander": "^2.20.0", - "source-map-support": "~0.5.20" - }, - "bin": { - "terser": "bin/terser" - }, - "engines": { - "node": ">=10" - } - }, "node_modules/test-exclude": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/test-exclude/-/test-exclude-6.0.0.tgz", @@ -11970,9 +11863,9 @@ } }, "node_modules/watchpack": { - "version": "2.4.1", - "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.1.tgz", - "integrity": "sha512-8wrBCMtVhqcXP2Sup1ctSkga6uc2Bx0IIvKyT7yTFier5AXHooSI+QyQQAtTb7+E0IUCCKyTFmXqdqgum2XWGg==", + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz", + "integrity": "sha512-Lcvm7MGST/4fup+ifyKi2hjyIAwcdI4HRgtvTpIUxBRhB+RFtUh8XtDOxUfctVCnhVi+QQj49i91OyvzkJl6cg==", "dev": true, "dependencies": { "glob-to-regexp": "^0.4.1", @@ -12157,6 +12050,27 @@ "webpack": "^4.0.0 || ^5.0.0" } }, + "node_modules/webpack-dev-server/node_modules/ws": { + "version": "8.16.0", + "resolved": "https://registry.npmjs.org/ws/-/ws-8.16.0.tgz", + "integrity": "sha512-HS0c//TP7Ina87TfiPUz1rQzMhHrl/SG2guqRcTOIUYD2q8uhUdNHZYJUaQ8aTGPzCh+c6oawMKW35nFl1dxyQ==", + "dev": true, + "engines": { + "node": ">=10.0.0" + }, + "peerDependencies": { + "bufferutil": "^4.0.1", + "utf-8-validate": ">=5.0.2" + }, + "peerDependenciesMeta": { + "bufferutil": { + "optional": true + }, + "utf-8-validate": { + "optional": true + } + } + }, "node_modules/webpack-merge": { "version": "5.10.0", "resolved": "https://registry.npmjs.org/webpack-merge/-/webpack-merge-5.10.0.tgz", @@ -12226,6 +12140,12 @@ "ajv": "^6.9.1" } }, + "node_modules/webpack/node_modules/json-parse-even-better-errors": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz", + "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==", + "dev": true + }, "node_modules/webpack/node_modules/json-schema-traverse": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz", @@ -12292,9 +12212,9 @@ "dev": true }, "node_modules/wrap-ansi": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz", - "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==", + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz", + "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==", "dev": true, "dependencies": { "ansi-styles": "^4.0.0", @@ -12302,10 +12222,7 @@ "strip-ansi": "^6.0.0" }, "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/chalk/wrap-ansi?sponsor=1" + "node": ">=8" } }, "node_modules/wrap-ansi-cjs": { @@ -12399,16 +12316,16 @@ "dev": true }, "node_modules/ws": { - "version": "8.16.0", - "resolved": "https://registry.npmjs.org/ws/-/ws-8.16.0.tgz", - "integrity": "sha512-HS0c//TP7Ina87TfiPUz1rQzMhHrl/SG2guqRcTOIUYD2q8uhUdNHZYJUaQ8aTGPzCh+c6oawMKW35nFl1dxyQ==", + "version": "8.11.0", + "resolved": "https://registry.npmjs.org/ws/-/ws-8.11.0.tgz", + "integrity": "sha512-HPG3wQd9sNQoT9xHyNCXoDUa+Xw/VevmY9FoHyQ+g+rrMn4j6FB4np7Z0OhdTgjx6MgQLK7jwSy1YecU1+4Asg==", "dev": true, "engines": { "node": ">=10.0.0" }, "peerDependencies": { "bufferutil": "^4.0.1", - "utf-8-validate": ">=5.0.2" + "utf-8-validate": "^5.0.2" }, "peerDependenciesMeta": { "bufferutil": { diff --git a/src/app/about/about.component.html b/src/app/about/about.component.html new file mode 100644 index 0000000..af25ff9 --- /dev/null +++ b/src/app/about/about.component.html @@ -0,0 +1,102 @@ +
+
+

About me

+
+ +
+

+ I'm Creative Director and UI/UX Designer from Sydney, Australia, working in web development and print media. + I enjoy + turning complex problems into simple, beautiful and intuitive designs. +

+ +

+ My job is to build your website so that it is functional and user-friendly but at the same time attractive. + Moreover, I + add personal touch to your product and make sure that is eye-catching and easy to use. My aim is to bring + across your + message and identity in the most creative way. I created web design for many famous brand companies. +

+
+ + + + +
+ +

What i'm doing

+ + + +
+ +
\ No newline at end of file diff --git a/src/app/about/about.component.scss b/src/app/about/about.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/about/about.component.spec.ts b/src/app/about/about.component.spec.ts new file mode 100644 index 0000000..da6615d --- /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({ + imports: [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 new file mode 100644 index 0000000..95a4cbd --- /dev/null +++ b/src/app/app-routing.module.ts @@ -0,0 +1,25 @@ +import { NgModule } from '@angular/core'; +import { AboutComponent } from './about/about.component'; +import { RouterModule, Routes } from '@angular/router'; +import { ResumeComponent } from './resume/resume.component'; +import { PortfolioComponent } from './portfolio/portfolio.component'; +import { BlogComponent } from './blog/blog.component'; +import { ContactComponent } from './contact/contact.component'; + +const routes: Routes = [ + { path: 'about', component: AboutComponent, title: "About" }, + { path: 'resume', component: ResumeComponent, title: "Resume" }, + { path: 'portfolio', component: PortfolioComponent, title: "Portfolio" }, + { path: 'blog', component: BlogComponent, title: "Blog" }, + { path: 'contact', component: ContactComponent, title: "Contact" }, + { path: '', redirectTo: '/about', pathMatch: 'full'} +]; + +@NgModule({ + declarations: [], + imports: [ + RouterModule.forRoot(routes) + ], + exports: [RouterModule] +}) +export class AppRoutingModule { } diff --git a/src/app/app.component.html b/src/app/app.component.html index 819d8ee..319b11d 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,483 +1,7 @@ - - - - - - - - - - - - - - -
- - -
- - - Rocket Ship - - - - - - - - - - {{ title }} app is running! - - - Rocket Ship Smoke - - - -
- - -

Resources

-

Here are some links to help you get started:

- -
- - - Learn Angular - - - - - CLI Documentation - - - - - - Angular Material - - - - - - Angular Blog - - - - - - Angular DevTools - - - -
- - -

Next Steps

-

What do you want to do next with your app?

- - - -
- - - - - - - - - - - -
- - -
- 
ng generate component xyz
- 
ng add @angular/material
- 
ng add @angular/pwa
- 
ng add _____
- 
ng test
- 
ng build
-
- - -
- - - Meetup Logo - - - - - - - Discord Logo - - - - -
- - - - - - Gray Clouds Background - - - -
- - - - - - - - - +
+ +
+ + +
+
\ No newline at end of file diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 8dfc1d6..ead99a1 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,15 +1,32 @@ -import { NgModule } from '@angular/core'; +import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; +import { ContactSidebarComponent } from './contact-sidebar/contact-sidebar.component'; +import { NavbarComponent } from './navbar/navbar.component'; +import { AboutComponent } from './about/about.component'; +import { ResumeComponent } from './resume/resume.component'; +import { PortfolioComponent } from './portfolio/portfolio.component'; +import { BlogComponent } from './blog/blog.component'; +import { ContactComponent } from './contact/contact.component'; +import { AppRoutingModule } from './app-routing.module'; @NgModule({ declarations: [ - AppComponent + AppComponent, + ContactSidebarComponent, + NavbarComponent, + AboutComponent, + ResumeComponent, + PortfolioComponent, + BlogComponent, + ContactComponent ], imports: [ - BrowserModule + BrowserModule, + AppRoutingModule ], + schemas: [CUSTOM_ELEMENTS_SCHEMA], providers: [], bootstrap: [AppComponent] }) diff --git a/src/app/blog/blog.component.html b/src/app/blog/blog.component.html new file mode 100644 index 0000000..4cd94fc --- /dev/null +++ b/src/app/blog/blog.component.html @@ -0,0 +1,183 @@ +
+ +
+

Blog

+
+ +
+ + + +
+ +
\ No newline at end of file diff --git a/src/app/blog/blog.component.scss b/src/app/blog/blog.component.scss new file mode 100644 index 0000000..4fbc311 --- /dev/null +++ b/src/app/blog/blog.component.scss @@ -0,0 +1,80 @@ +.blog-posts { margin-bottom: 10px; } + + .blog-posts-list { + display: grid; + grid-template-columns: 1fr; + gap: 20px; + } + + .blog-post-item > a { + position: relative; + background: var(--border-gradient-onyx); + height: 100%; + box-shadow: var(--shadow-4); + border-radius: 16px; + z-index: 1; + } + + .blog-post-item > a::before { + content: ""; + position: absolute; + inset: 1px; + border-radius: inherit; + background: var(--eerie-black-1); + z-index: -1; + } + + .blog-banner-box { + width: 100%; + height: 200px; + border-radius: 12px; + overflow: hidden; + } + + .blog-banner-box img { + width: 100%; + height: 100%; + object-fit: cover; + transition: var(--transition-1); + } + + .blog-post-item > a:hover .blog-banner-box img { transform: scale(1.1); } + + .blog-content { padding: 15px; } + + .blog-meta { + display: flex; + justify-content: flex-start; + align-items: center; + gap: 7px; + margin-bottom: 10px; + } + + .blog-meta :is(.blog-category, time) { + color: var(--light-gray-70); + font-size: var(--fs-6); + font-weight: var(--fw-300); + } + + .blog-meta .dot { + background: var(--light-gray-70); + width: 4px; + height: 4px; + border-radius: 4px; + } + + .blog-item-title { + margin-bottom: 10px; + line-height: 1.3; + transition: var(--transition-1); + } + + .blog-post-item > a:hover .blog-item-title { color: var(--orange-yellow-crayola); } + + .blog-text { + color: var(--light-gray); + font-size: var(--fs-6); + font-weight: var(--fw-300); + line-height: 1.6; + } + \ No newline at end of file diff --git a/src/app/blog/blog.component.spec.ts b/src/app/blog/blog.component.spec.ts new file mode 100644 index 0000000..7f867e8 --- /dev/null +++ b/src/app/blog/blog.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { BlogComponent } from './blog.component'; + +describe('BlogComponent', () => { + let component: BlogComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [BlogComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(BlogComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/blog/blog.component.ts b/src/app/blog/blog.component.ts new file mode 100644 index 0000000..1d582df --- /dev/null +++ b/src/app/blog/blog.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-blog', + templateUrl: './blog.component.html', + styleUrl: './blog.component.scss' +}) +export class BlogComponent { + +} diff --git a/src/app/contact-sidebar/contact-sidebar.component.html b/src/app/contact-sidebar/contact-sidebar.component.html new file mode 100644 index 0000000..7b23d62 --- /dev/null +++ b/src/app/contact-sidebar/contact-sidebar.component.html @@ -0,0 +1,124 @@ + \ No newline at end of file diff --git a/src/app/contact-sidebar/contact-sidebar.component.scss b/src/app/contact-sidebar/contact-sidebar.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/contact-sidebar/contact-sidebar.component.spec.ts b/src/app/contact-sidebar/contact-sidebar.component.spec.ts new file mode 100644 index 0000000..eae0f49 --- /dev/null +++ b/src/app/contact-sidebar/contact-sidebar.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ContactSidebarComponent } from './contact-sidebar.component'; + +describe('ContactSidebarComponent', () => { + let component: ContactSidebarComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [ContactSidebarComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(ContactSidebarComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/contact-sidebar/contact-sidebar.component.ts b/src/app/contact-sidebar/contact-sidebar.component.ts new file mode 100644 index 0000000..8ae63e7 --- /dev/null +++ b/src/app/contact-sidebar/contact-sidebar.component.ts @@ -0,0 +1,11 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-contact-sidebar', + templateUrl: './contact-sidebar.component.html', + styleUrl: './contact-sidebar.component.scss' +}) +export class ContactSidebarComponent { + sideBarExpanded: boolean = false; + +} diff --git a/src/app/contact/contact.component.html b/src/app/contact/contact.component.html new file mode 100644 index 0000000..5b6446b --- /dev/null +++ b/src/app/contact/contact.component.html @@ -0,0 +1,38 @@ +
+ +
+

Contact

+
+ +
+
+ +
+
+ +
+ +

Contact Form

+ +
+ +
+ + + +
+ + + + + +
+ +
+ +
\ No newline at end of file diff --git a/src/app/contact/contact.component.scss b/src/app/contact/contact.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/contact/contact.component.spec.ts b/src/app/contact/contact.component.spec.ts new file mode 100644 index 0000000..fce5169 --- /dev/null +++ b/src/app/contact/contact.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ContactComponent } from './contact.component'; + +describe('ContactComponent', () => { + let component: ContactComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [ContactComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(ContactComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/contact/contact.component.ts b/src/app/contact/contact.component.ts new file mode 100644 index 0000000..f94e50b --- /dev/null +++ b/src/app/contact/contact.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-contact', + templateUrl: './contact.component.html', + styleUrl: './contact.component.scss' +}) +export class ContactComponent { + +} diff --git a/src/app/navbar/navbar.component.html b/src/app/navbar/navbar.component.html new file mode 100644 index 0000000..4831d4b --- /dev/null +++ b/src/app/navbar/navbar.component.html @@ -0,0 +1,27 @@ + \ No newline at end of file diff --git a/src/app/navbar/navbar.component.scss b/src/app/navbar/navbar.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/navbar/navbar.component.spec.ts b/src/app/navbar/navbar.component.spec.ts new file mode 100644 index 0000000..78867a6 --- /dev/null +++ b/src/app/navbar/navbar.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { NavbarComponent } from './navbar.component'; + +describe('NavbarComponent', () => { + let component: NavbarComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [NavbarComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(NavbarComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/navbar/navbar.component.ts b/src/app/navbar/navbar.component.ts new file mode 100644 index 0000000..da50573 --- /dev/null +++ b/src/app/navbar/navbar.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-navbar', + templateUrl: './navbar.component.html', + styleUrl: './navbar.component.scss' +}) +export class NavbarComponent { + +} diff --git a/src/app/portfolio/portfolio.component.html b/src/app/portfolio/portfolio.component.html new file mode 100644 index 0000000..db98d80 --- /dev/null +++ b/src/app/portfolio/portfolio.component.html @@ -0,0 +1,232 @@ +
+ +
+

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..e69de29 diff --git a/src/app/portfolio/portfolio.component.spec.ts b/src/app/portfolio/portfolio.component.spec.ts new file mode 100644 index 0000000..8e039d5 --- /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({ + imports: [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..dba6601 --- /dev/null +++ b/src/app/portfolio/portfolio.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-portfolio', + templateUrl: './portfolio.component.html', + styleUrl: './portfolio.component.scss' +}) +export class PortfolioComponent { + +} diff --git a/src/app/resume/resume.component.html b/src/app/resume/resume.component.html new file mode 100644 index 0000000..4524e97 --- /dev/null +++ b/src/app/resume/resume.component.html @@ -0,0 +1,184 @@ +
+ +
+

Resume

+
+ +
+ +
+
+ +
+ +

Education

+
+ +
    + +
  1. + +

    University school of the arts

    + + 2007 — 2008 + +

    + Nemo enims ipsam voluptatem, blanditiis praesentium voluptum delenit atque corrupti, quos dolores et + quas molestias + exceptur. +

    + +
    2. + +
  2. + +

    New york academy of art

    + + 2006 — 2007 + +

    + Ratione voluptatem sequi nesciunt, facere quisquams facere menda ossimus, omnis voluptas assumenda est + omnis.. +

    + +
    3. + +
  3. + +

    High school of art and design

    + + 2002 — 2004 + +

    + Duis aute irure dolor in reprehenderit in voluptate, quila voluptas mag odit aut fugit, sed consequuntur + magni dolores + eos. +

    + +
    4. + +
+ +
+ +
+ +
+
+ +
+ +

Experience

+
+ +
    + +
  1. + +

    Creative director

    + + 2015 — Present + +

    + Nemo enim ipsam voluptatem blanditiis praesentium voluptum delenit atque corrupti, quos dolores et qvuas + molestias + exceptur. +

    + +
    2. + +
  2. + +

    Art director

    + + 2013 — 2015 + +

    + Nemo enims ipsam voluptatem, blanditiis praesentium voluptum delenit atque corrupti, quos dolores et + quas molestias + exceptur. +

    + +
    3. + +
  3. + +

    Web designer

    + + 2010 — 2013 + +

    + Nemo enims ipsam voluptatem, blanditiis praesentium voluptum delenit atque corrupti, quos dolores et + quas molestias + exceptur. +

    + +
    4. + +
+ +
+ +
+ +

My skills

+ +
    + +
  • + +
    +
    Web design
    + 80% +
    + +
    +
    +
    + +
    • + +
  • + +
    +
    Graphic design
    + 70% +
    + +
    +
    +
    + +
    • + +
  • + +
    +
    Branding
    + 90% +
    + +
    +
    +
    + +
    • + +
  • + +
    +
    WordPress
    + 50% +
    + +
    +
    +
    + +
    • + +
+ +
+ +
\ No newline at end of file diff --git a/src/app/resume/resume.component.scss b/src/app/resume/resume.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/resume/resume.component.spec.ts b/src/app/resume/resume.component.spec.ts new file mode 100644 index 0000000..92f5019 --- /dev/null +++ b/src/app/resume/resume.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ResumeComponent } from './resume.component'; + +describe('ResumeComponent', () => { + let component: ResumeComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [ResumeComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(ResumeComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/resume/resume.component.ts b/src/app/resume/resume.component.ts new file mode 100644 index 0000000..7cc173c --- /dev/null +++ b/src/app/resume/resume.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-resume', + templateUrl: './resume.component.html', + styleUrl: './resume.component.scss' +}) +export class ResumeComponent { + +} diff --git a/src/assets/images/avatar-1.png b/src/assets/images/avatar-1.png new file mode 100644 index 0000000..def748f Binary files /dev/null and b/src/assets/images/avatar-1.png differ diff --git a/src/assets/images/avatar-2.png b/src/assets/images/avatar-2.png new file mode 100644 index 0000000..8168ced Binary files /dev/null and b/src/assets/images/avatar-2.png differ diff --git a/src/assets/images/avatar-3.png b/src/assets/images/avatar-3.png new file mode 100644 index 0000000..d583013 Binary files /dev/null and b/src/assets/images/avatar-3.png differ diff --git a/src/assets/images/avatar-4.png b/src/assets/images/avatar-4.png new file mode 100644 index 0000000..63532f5 Binary files /dev/null and b/src/assets/images/avatar-4.png differ diff --git a/src/assets/images/blog-1.jpg b/src/assets/images/blog-1.jpg new file mode 100644 index 0000000..8b59c46 Binary files /dev/null and b/src/assets/images/blog-1.jpg differ diff --git a/src/assets/images/blog-2.jpg b/src/assets/images/blog-2.jpg new file mode 100644 index 0000000..34cd8f4 Binary files /dev/null and b/src/assets/images/blog-2.jpg differ diff --git a/src/assets/images/blog-3.jpg b/src/assets/images/blog-3.jpg new file mode 100644 index 0000000..eef1c2c Binary files /dev/null and b/src/assets/images/blog-3.jpg differ diff --git a/src/assets/images/blog-4.jpg b/src/assets/images/blog-4.jpg new file mode 100644 index 0000000..5c8e080 Binary files /dev/null and b/src/assets/images/blog-4.jpg differ diff --git a/src/assets/images/blog-5.jpg b/src/assets/images/blog-5.jpg new file mode 100644 index 0000000..cb49416 Binary files /dev/null and b/src/assets/images/blog-5.jpg differ diff --git a/src/assets/images/blog-6.jpg b/src/assets/images/blog-6.jpg new file mode 100644 index 0000000..6aefd82 Binary files /dev/null and b/src/assets/images/blog-6.jpg differ diff --git a/src/assets/images/icon-app.svg b/src/assets/images/icon-app.svg new file mode 100644 index 0000000..5654e9d --- /dev/null +++ b/src/assets/images/icon-app.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/assets/images/icon-design.svg b/src/assets/images/icon-design.svg new file mode 100644 index 0000000..1eedc2f --- /dev/null +++ b/src/assets/images/icon-design.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/icon-dev.svg b/src/assets/images/icon-dev.svg new file mode 100644 index 0000000..bf61a2b --- /dev/null +++ b/src/assets/images/icon-dev.svg @@ -0,0 +1,54 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/icon-photo.svg b/src/assets/images/icon-photo.svg new file mode 100644 index 0000000..86ce321 --- /dev/null +++ b/src/assets/images/icon-photo.svg @@ -0,0 +1,45 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/icon-quote.svg b/src/assets/images/icon-quote.svg new file mode 100644 index 0000000..b751853 --- /dev/null +++ b/src/assets/images/icon-quote.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/images/logo-1-color.png b/src/assets/images/logo-1-color.png new file mode 100644 index 0000000..a6d1b5f Binary files /dev/null and b/src/assets/images/logo-1-color.png differ diff --git a/src/assets/images/logo-2-color.png b/src/assets/images/logo-2-color.png new file mode 100644 index 0000000..ee447ac Binary files /dev/null and b/src/assets/images/logo-2-color.png differ diff --git a/src/assets/images/logo-3-color.png b/src/assets/images/logo-3-color.png new file mode 100644 index 0000000..498c22e Binary files /dev/null and b/src/assets/images/logo-3-color.png differ diff --git a/src/assets/images/logo-4-color.png b/src/assets/images/logo-4-color.png new file mode 100644 index 0000000..acaf2a3 Binary files /dev/null and b/src/assets/images/logo-4-color.png differ diff --git a/src/assets/images/logo-5-color.png b/src/assets/images/logo-5-color.png new file mode 100644 index 0000000..1be4295 Binary files /dev/null and b/src/assets/images/logo-5-color.png differ diff --git a/src/assets/images/logo-6-color.png b/src/assets/images/logo-6-color.png new file mode 100644 index 0000000..d1a0ca5 Binary files /dev/null and b/src/assets/images/logo-6-color.png differ diff --git a/src/assets/images/logo.ico b/src/assets/images/logo.ico new file mode 100644 index 0000000..ea99701 Binary files /dev/null and b/src/assets/images/logo.ico differ diff --git a/src/assets/images/logo.svg b/src/assets/images/logo.svg new file mode 100644 index 0000000..bd5b7de --- /dev/null +++ b/src/assets/images/logo.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/images/my-avatar.png b/src/assets/images/my-avatar.png new file mode 100644 index 0000000..e60a7d7 Binary files /dev/null and b/src/assets/images/my-avatar.png differ diff --git a/src/assets/images/project-1.jpg b/src/assets/images/project-1.jpg new file mode 100644 index 0000000..e4406ed Binary files /dev/null and b/src/assets/images/project-1.jpg differ diff --git a/src/assets/images/project-2.png b/src/assets/images/project-2.png new file mode 100644 index 0000000..d34ecf8 Binary files /dev/null and b/src/assets/images/project-2.png differ diff --git a/src/assets/images/project-3.jpg b/src/assets/images/project-3.jpg new file mode 100644 index 0000000..f674434 Binary files /dev/null and b/src/assets/images/project-3.jpg differ diff --git a/src/assets/images/project-4.png b/src/assets/images/project-4.png new file mode 100644 index 0000000..de07710 Binary files /dev/null and b/src/assets/images/project-4.png differ diff --git a/src/assets/images/project-5.png b/src/assets/images/project-5.png new file mode 100644 index 0000000..7d8d5ab Binary files /dev/null and b/src/assets/images/project-5.png differ diff --git a/src/assets/images/project-6.png b/src/assets/images/project-6.png new file mode 100644 index 0000000..b9d8c9f Binary files /dev/null and b/src/assets/images/project-6.png differ diff --git a/src/assets/images/project-7.png b/src/assets/images/project-7.png new file mode 100644 index 0000000..088083f Binary files /dev/null and b/src/assets/images/project-7.png differ diff --git a/src/assets/images/project-8.jpg b/src/assets/images/project-8.jpg new file mode 100644 index 0000000..21dff05 Binary files /dev/null and b/src/assets/images/project-8.jpg differ diff --git a/src/assets/images/project-9.png b/src/assets/images/project-9.png new file mode 100644 index 0000000..86b624c Binary files /dev/null and b/src/assets/images/project-9.png differ diff --git a/src/assets/js/script.js b/src/assets/js/script.js new file mode 100644 index 0000000..6439a82 --- /dev/null +++ b/src/assets/js/script.js @@ -0,0 +1,159 @@ +'use strict'; + + + +// element toggle function +const elementToggleFunc = function (elem) { elem.classList.toggle("active"); } + + + +// sidebar variables +const sidebar = document.querySelector("[data-sidebar]"); +const sidebarBtn = document.querySelector("[data-sidebar-btn]"); + +// sidebar toggle functionality for mobile +sidebarBtn.addEventListener("click", function () { elementToggleFunc(sidebar); }); + + + +// testimonials variables +const testimonialsItem = document.querySelectorAll("[data-testimonials-item]"); +const modalContainer = document.querySelector("[data-modal-container]"); +const modalCloseBtn = document.querySelector("[data-modal-close-btn]"); +const overlay = document.querySelector("[data-overlay]"); + +// modal variable +const modalImg = document.querySelector("[data-modal-img]"); +const modalTitle = document.querySelector("[data-modal-title]"); +const modalText = document.querySelector("[data-modal-text]"); + +// modal toggle function +const testimonialsModalFunc = function () { + modalContainer.classList.toggle("active"); + overlay.classList.toggle("active"); +} + +// add click event to all modal items +for (let i = 0; i < testimonialsItem.length; i++) { + + testimonialsItem[i].addEventListener("click", function () { + + modalImg.src = this.querySelector("[data-testimonials-avatar]").src; + modalImg.alt = this.querySelector("[data-testimonials-avatar]").alt; + modalTitle.innerHTML = this.querySelector("[data-testimonials-title]").innerHTML; + modalText.innerHTML = this.querySelector("[data-testimonials-text]").innerHTML; + + testimonialsModalFunc(); + + }); + +} + +// add click event to modal close button +modalCloseBtn.addEventListener("click", testimonialsModalFunc); +overlay.addEventListener("click", testimonialsModalFunc); + + + +// custom select variables +const select = document.querySelector("[data-select]"); +const selectItems = document.querySelectorAll("[data-select-item]"); +const selectValue = document.querySelector("[data-selecct-value]"); +const filterBtn = document.querySelectorAll("[data-filter-btn]"); + +select.addEventListener("click", function () { elementToggleFunc(this); }); + +// add event in all select items +for (let i = 0; i < selectItems.length; i++) { + selectItems[i].addEventListener("click", function () { + + let selectedValue = this.innerText.toLowerCase(); + selectValue.innerText = this.innerText; + elementToggleFunc(select); + filterFunc(selectedValue); + + }); +} + +// filter variables +const filterItems = document.querySelectorAll("[data-filter-item]"); + +const filterFunc = function (selectedValue) { + + for (let i = 0; i < filterItems.length; i++) { + + if (selectedValue === "all") { + filterItems[i].classList.add("active"); + } else if (selectedValue === filterItems[i].dataset.category) { + filterItems[i].classList.add("active"); + } else { + filterItems[i].classList.remove("active"); + } + + } + +} + +// add event in all filter button items for large screen +let lastClickedBtn = filterBtn[0]; + +for (let i = 0; i < filterBtn.length; i++) { + + filterBtn[i].addEventListener("click", function () { + + let selectedValue = this.innerText.toLowerCase(); + selectValue.innerText = this.innerText; + filterFunc(selectedValue); + + lastClickedBtn.classList.remove("active"); + this.classList.add("active"); + lastClickedBtn = this; + + }); + +} + + + +// contact form variables +const form = document.querySelector("[data-form]"); +const formInputs = document.querySelectorAll("[data-form-input]"); +const formBtn = document.querySelector("[data-form-btn]"); + +// add event to all form input field +for (let i = 0; i < formInputs.length; i++) { + formInputs[i].addEventListener("input", function () { + + // check form validation + if (form.checkValidity()) { + formBtn.removeAttribute("disabled"); + } else { + formBtn.setAttribute("disabled", ""); + } + + }); +} + + + +// page navigation variables +const navigationLinks = document.querySelectorAll("[data-nav-link]"); +const pages = document.querySelectorAll("[data-page]"); + +// add event to all nav link +for (let i = 0; i < navigationLinks.length; i++) { + navigationLinks[i].addEventListener("click", function () { + + for (let i = 0; i < pages.length; i++) { + if (this.innerHTML.toLowerCase() === pages[i].dataset.page) { + pages[i].classList.add("active"); + navigationLinks[i].classList.add("active"); + window.scrollTo(0, 0); + } else { + pages[i].classList.remove("active"); + navigationLinks[i].classList.remove("active"); + } + } + + }); +} \ No newline at end of file diff --git a/src/index.html b/src/index.html index 143bfe8..e5f0d6c 100644 --- a/src/index.html +++ b/src/index.html @@ -6,8 +6,38 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/src/styles.scss b/src/styles.scss index 90d4ee0..e7402ca 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1 +1,1882 @@ -/* You can add global styles to this file, and also import other style files */ +/*-----------------------------------*\ + #style.css +\*-----------------------------------*/ + + +/** + * copyright 2022 @codewithsadee + */ + + + + + +/*-----------------------------------*\ + #CUSTOM PROPERTY +\*-----------------------------------*/ + +:root { + + /** + * colors + */ + + /* gradient */ + + --bg-gradient-onyx: linear-gradient( + to bottom right, + hsl(240, 1%, 25%) 3%, + hsl(0, 0%, 19%) 97% + ); + --bg-gradient-jet: linear-gradient( + to bottom right, + hsla(240, 1%, 18%, 0.251) 0%, + hsla(240, 2%, 11%, 0) 100% + ), hsl(240, 2%, 13%); + --bg-gradient-yellow-1: linear-gradient( + to bottom right, + hsl(45, 100%, 71%) 0%, + hsla(36, 100%, 69%, 0) 50% + ); + --bg-gradient-yellow-2: linear-gradient( + 135deg, + hsla(45, 100%, 71%, 0.251) 0%, + hsla(35, 100%, 68%, 0) 59.86% + ), hsl(240, 2%, 13%); + --border-gradient-onyx: linear-gradient( + to bottom right, + hsl(0, 0%, 25%) 0%, + hsla(0, 0%, 25%, 0) 50% + ); + --text-gradient-yellow: linear-gradient( + to right, + hsl(45, 100%, 72%), + hsl(35, 100%, 68%) + ); + + /* solid */ + + --jet: hsl(0, 0%, 22%); + --onyx: hsl(240, 1%, 17%); + --eerie-black-1: hsl(240, 2%, 13%); + --eerie-black-2: hsl(240, 2%, 12%); + --smoky-black: hsl(0, 0%, 7%); + --white-1: hsl(0, 0%, 100%); + --white-2: hsl(0, 0%, 98%); + --orange-yellow-crayola: hsl(45, 100%, 72%); + --vegas-gold: hsl(45, 54%, 58%); + --light-gray: hsl(0, 0%, 84%); + --light-gray-70: hsla(0, 0%, 84%, 0.7); + --bittersweet-shimmer: hsl(0, 43%, 51%); + + /** + * typography + */ + + /* font-family */ + --ff-poppins: 'Poppins', sans-serif; + + /* font-size */ + --fs-1: 24px; + --fs-2: 18px; + --fs-3: 17px; + --fs-4: 16px; + --fs-5: 15px; + --fs-6: 14px; + --fs-7: 13px; + --fs-8: 11px; + + /* font-weight */ + --fw-300: 300; + --fw-400: 400; + --fw-500: 500; + --fw-600: 600; + + /** + * shadow + */ + + --shadow-1: -4px 8px 24px hsla(0, 0%, 0%, 0.25); + --shadow-2: 0 16px 30px hsla(0, 0%, 0%, 0.25); + --shadow-3: 0 16px 40px hsla(0, 0%, 0%, 0.25); + --shadow-4: 0 25px 50px hsla(0, 0%, 0%, 0.15); + --shadow-5: 0 24px 80px hsla(0, 0%, 0%, 0.25); + + /** + * transition + */ + + --transition-1: 0.25s ease; + --transition-2: 0.5s ease-in-out; + + } + + + + + + /*-----------------------------------*\ + #RESET + \*-----------------------------------*/ + + *, *::before, *::after { + margin: 0; + padding: 0; + box-sizing: border-box; + } + + a { text-decoration: none; } + + li { list-style: none; } + + img, ion-icon, a, button, time, span { display: block; } + + button { + font: inherit; + background: none; + border: none; + text-align: left; + cursor: pointer; + } + + input, textarea { + display: block; + width: 100%; + background: none; + font: inherit; + } + + ::selection { + background: var(--orange-yellow-crayola); + color: var(--smoky-black); + } + + :focus { outline-color: var(--orange-yellow-crayola); } + + html { font-family: var(--ff-poppins); } + + body { background: var(--smoky-black); } + + + + + + /*-----------------------------------*\ + #REUSED STYLE + \*-----------------------------------*/ + + .sidebar, + article { + background: var(--eerie-black-2); + border: 1px solid var(--jet); + border-radius: 20px; + padding: 15px; + box-shadow: var(--shadow-1); + z-index: 1; + } + + .separator { + width: 100%; + height: 1px; + background: var(--jet); + margin: 16px 0; + } + + .icon-box { + position: relative; + background: var(--border-gradient-onyx); + width: 30px; + height: 30px; + border-radius: 8px; + display: flex; + justify-content: center; + align-items: center; + font-size: 16px; + color: var(--orange-yellow-crayola); + box-shadow: var(--shadow-1); + z-index: 1; + } + + .icon-box::before { + content: ""; + position: absolute; + inset: 1px; + background: var(--eerie-black-1); + border-radius: inherit; + z-index: -1; + } + + .icon-box ion-icon { --ionicon-stroke-width: 35px; } + +// article { display: none; } + + article.active { + display: block; + animation: fade 0.5s ease backwards; + } + + @keyframes fade { + 0% { opacity: 0; } + 100% { opacity: 1; } + } + + .h2, + .h3, + .h4, + .h5 { + color: var(--white-2); + text-transform: capitalize; + } + + .h2 { font-size: var(--fs-1); } + + .h3 { font-size: var(--fs-2); } + + .h4 { font-size: var(--fs-4); } + + .h5 { + font-size: var(--fs-7); + font-weight: var(--fw-500); + } + + .article-title { + position: relative; + padding-bottom: 7px; + } + + .article-title::after { + content: ""; + position: absolute; + bottom: 0; + left: 0; + width: 30px; + height: 3px; + background: var(--text-gradient-yellow); + border-radius: 3px; + } + + .has-scrollbar::-webkit-scrollbar { + width: 5px; /* for vertical scrollbar */ + height: 5px; /* for horizontal scrollbar */ + } + + .has-scrollbar::-webkit-scrollbar-track { + background: var(--onyx); + border-radius: 5px; + } + + .has-scrollbar::-webkit-scrollbar-thumb { + background: var(--orange-yellow-crayola); + border-radius: 5px; + } + + .has-scrollbar::-webkit-scrollbar-button { width: 20px; } + + .content-card { + position: relative; + background: var(--border-gradient-onyx); + padding: 15px; + padding-top: 45px; + border-radius: 14px; + box-shadow: var(--shadow-2); + cursor: pointer; + z-index: 1; + } + + .content-card::before { + content: ""; + position: absolute; + inset: 1px; + background: var(--bg-gradient-jet); + border-radius: inherit; + z-index: -1; + } + + + + + + /*-----------------------------------*\ + #MAIN + \*-----------------------------------*/ + + main { + margin: 15px 12px; + margin-bottom: 75px; + min-width: 259px; + } + + + + + + /*-----------------------------------*\ + #SIDEBAR + \*-----------------------------------*/ + + .sidebar { + margin-bottom: 15px; + max-height: 112px; + overflow: hidden; + transition: var(--transition-2); + } + + .sidebar.active { max-height: 405px; } + + .sidebar-info { + position: relative; + display: flex; + justify-content: flex-start; + align-items: center; + gap: 15px; + } + + .avatar-box { + background: var(--bg-gradient-onyx); + border-radius: 20px; + } + + .info-content .name { + color: var(--white-2); + font-size: var(--fs-3); + font-weight: var(--fw-500); + letter-spacing: -0.25px; + margin-bottom: 10px; + } + + .info-content .title { + color: var(--white-1); + background: var(--onyx); + font-size: var(--fs-8); + font-weight: var(--fw-300); + width: max-content; + padding: 3px 12px; + border-radius: 8px; + } + + .info_more-btn { + position: absolute; + top: -15px; + right: -15px; + border-radius: 0 15px; + font-size: 13px; + color: var(--orange-yellow-crayola); + background: var(--border-gradient-onyx); + padding: 10px; + box-shadow: var(--shadow-2); + transition: var(--transition-1); + z-index: 1; + } + + .info_more-btn::before { + content: ""; + position: absolute; + inset: 1px; + border-radius: inherit; + background: var(--bg-gradient-jet); + transition: var(--transition-1); + z-index: -1; + } + + .info_more-btn:hover, + .info_more-btn:focus { background: var(--bg-gradient-yellow-1); } + + .info_more-btn:hover::before, + .info_more-btn:focus::before { background: var(--bg-gradient-yellow-2); } + + .info_more-btn span { display: none; } + + .sidebar-info_more { + opacity: 0; + visibility: hidden; + transition: var(--transition-2); + } + + .sidebar.active .sidebar-info_more { + opacity: 1; + visibility: visible; + } + + .contacts-list { + display: grid; + grid-template-columns: 1fr; + gap: 16px; + } + + .contact-item { + min-width: 100%; + display: flex; + align-items: center; + gap: 16px; + } + + .contact-info { + max-width: calc(100% - 46px); + width: calc(100% - 46px); + } + + .contact-title { + color: var(--light-gray-70); + font-size: var(--fs-8); + text-transform: uppercase; + margin-bottom: 2px; + } + + .contact-info :is(.contact-link, time, address) { + color: var(--white-2); + font-size: var(--fs-7); + } + + .contact-info address { font-style: normal; } + + .social-list { + display: flex; + justify-content: flex-start; + align-items: center; + gap: 15px; + padding-bottom: 4px; + padding-left: 7px; + } + + .social-item .social-link { + color: var(--light-gray-70); + font-size: 18px; + } + + + .social-item .social-link:hover { color: var(--light-gray); } + + + + + + /*-----------------------------------*\ + #NAVBAR + \*-----------------------------------*/ + + .navbar { + position: fixed; + bottom: 0; + left: 0; + width: 100%; + background: hsla(240, 1%, 17%, 0.75); + backdrop-filter: blur(10px); + border: 1px solid var(--jet); + border-radius: 12px 12px 0 0; + box-shadow: var(--shadow-2); + z-index: 5; + } + + .navbar-list { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; + padding: 0 10px; + } + + .navbar-link { + color: var(--light-gray); + font-size: var(--fs-8); + padding: 20px 7px; + transition: color var(--transition-1); + } + + .navbar-link:hover, + .navbar-link:focus { color: var(--light-gray-70); } + + .navbar-link.active { color: var(--orange-yellow-crayola); } + + + + + + /*-----------------------------------*\ + #ABOUT + \*-----------------------------------*/ + + .about .article-title { margin-bottom: 15px; } + + .about-text { + color: var(--light-gray); + font-size: var(--fs-6); + font-weight: var(--fw-300); + line-height: 1.6; + } + + .about-text p { margin-bottom: 15px; } + + + + /** + * #service + */ + + .service { margin-bottom: 35px; } + + .service-title { margin-bottom: 20px; } + + .service-list { + display: grid; + grid-template-columns: 1fr; + gap: 20px; + } + + .service-item { + position: relative; + background: var(--border-gradient-onyx); + padding: 20px; + border-radius: 14px; + box-shadow: var(--shadow-2); + z-index: 1; + } + + .service-item::before { + content: ""; + position: absolute; + inset: 1px; + background: var(--bg-gradient-jet); + border-radius: inherit; + z-index: -1; + } + + .service-icon-box { margin-bottom: 10px; } + + .service-icon-box img { margin: auto; } + + .service-content-box { text-align: center; } + + .service-item-title { margin-bottom: 7px; } + + .service-item-text { + color: var(--light-gray); + font-size: var(--fs-6); + font-weight: var(--fw-3); + line-height: 1.6; + } + + + /** + * #testimonials + */ + + .testimonials { margin-bottom: 30px; } + + .testimonials-title { margin-bottom: 20px; } + + .testimonials-list { + display: flex; + justify-content: flex-start; + align-items: flex-start; + gap: 15px; + margin: 0 -15px; + padding: 25px 15px; + padding-bottom: 35px; + overflow-x: auto; + scroll-behavior: smooth; + overscroll-behavior-inline: contain; + scroll-snap-type: inline mandatory; + } + + .testimonials-item { + min-width: 100%; + scroll-snap-align: center; + } + + .testimonials-avatar-box { + position: absolute; + top: 0; + left: 0; + transform: translate(15px, -25px); + background: var(--bg-gradient-onyx); + border-radius: 14px; + box-shadow: var(--shadow-1); + } + + .testimonials-item-title { margin-bottom: 7px; } + + .testimonials-text { + color: var(--light-gray); + font-size: var(--fs-6); + font-weight: var(--fw-300); + line-height: 1.6; + display: -webkit-box; + line-clamp: 4; + -webkit-line-clamp: 4; + -webkit-box-orient: vertical; + overflow: hidden; + } + + + /** + * #testimonials-modal + */ + + .modal-container { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + overflow-y: auto; + overscroll-behavior: contain; + z-index: 20; + pointer-events: none; + visibility: hidden; + } + + .modal-container::-webkit-scrollbar { display: none; } + + .modal-container.active { + pointer-events: all; + visibility: visible; + } + + .overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100vh; + background: hsl(0, 0%, 5%); + opacity: 0; + visibility: hidden; + pointer-events: none; + z-index: 1; + transition: var(--transition-1); + } + + .overlay.active { + opacity: 0.8; + visibility: visible; + pointer-events: all; + } + + .testimonials-modal { + background: var(--eerie-black-2); + position: relative; + padding: 15px; + margin: 15px 12px; + border: 1px solid var(--jet); + border-radius: 14px; + box-shadow: var(--shadow-5); + transform: scale(1.2); + opacity: 0; + transition: var(--transition-1); + z-index: 2; + } + + .modal-container.active .testimonials-modal { + transform: scale(1); + opacity: 1; + } + + .modal-close-btn { + position: absolute; + top: 15px; + right: 15px; + background: var(--onyx); + border-radius: 8px; + width: 32px; + height: 32px; + display: flex; + justify-content: center; + align-items: center; + color: var(--white-2); + font-size: 18px; + opacity: 0.7; + } + + .modal-close-btn:hover, + .modal-close-btn:focus { opacity: 1; } + + .modal-close-btn ion-icon { --ionicon-stroke-width: 50px; } + + .modal-avatar-box { + background: var(--bg-gradient-onyx); + width: max-content; + border-radius: 14px; + margin-bottom: 15px; + box-shadow: var(--shadow-2); + } + + .modal-img-wrapper > img { display: none; } + + .modal-title { margin-bottom: 4px; } + + .modal-content time { + font-size: var(--fs-6); + color: var(--light-gray-70); + font-weight: var(--fw-300); + margin-bottom: 10px; + } + + .modal-content p { + color: var(--light-gray); + font-size: var(--fs-6); + font-weight: var(--fw-300); + line-height: 1.6; + } + + + /** + * #clients + */ + + .clients { margin-bottom: 15px; } + + .clients-list { + display: flex; + justify-content: flex-start; + align-items: flex-start; + gap: 15px; + margin: 0 -15px; + padding: 25px; + padding-bottom: 25px; + overflow-x: auto; + scroll-behavior: smooth; + overscroll-behavior-inline: contain; + scroll-snap-type: inline mandatory; + scroll-padding-inline: 25px; + } + + .clients-item { + min-width: 50%; + scroll-snap-align: start; + } + + .clients-item img { + width: 100%; + filter: grayscale(1); + transition: var(--transition-1); + } + + .clients-item img:hover { filter: grayscale(0); } + + + + + + /*-----------------------------------*\ + #RESUME + \*-----------------------------------*/ + + .article-title { margin-bottom: 30px; } + + + /** + * education and experience + */ + + .timeline { margin-bottom: 30px; } + + .timeline .title-wrapper { + display: flex; + align-items: center; + gap: 15px; + margin-bottom: 25px; + } + + .timeline-list { + font-size: var(--fs-6); + margin-left: 45px; + } + + .timeline-item { position: relative; } + + .timeline-item:not(:last-child) { margin-bottom: 20px; } + + .timeline-item-title { + font-size: var(--fs-6); + line-height: 1.3; + margin-bottom: 7px; + } + + .timeline-list span { + color: var(--vegas-gold); + font-weight: var(--fw-400); + line-height: 1.6; + } + + .timeline-item:not(:last-child)::before { + content: ""; + position: absolute; + top: -25px; + left: -30px; + width: 1px; + height: calc(100% + 50px); + background: var(--jet); + } + + .timeline-item::after { + content: ""; + position: absolute; + top: 5px; + left: -33px; + height: 6px; + width: 6px; + background: var(--text-gradient-yellow); + border-radius: 50%; + box-shadow: 0 0 0 4px var(--jet); + } + + .timeline-text { + color: var(--light-gray); + font-weight: var(--fw-300); + line-height: 1.6; + } + + + /** + * skills + */ + + .skills-title { margin-bottom: 20px; } + + .skills-list { padding: 20px; } + + + .skills-item:not(:last-child) { margin-bottom: 15px; } + + .skill .title-wrapper { + display: flex; + align-items: center; + gap: 5px; + margin-bottom: 8px; + } + + .skill .title-wrapper data { + color: var(--light-gray); + font-size: var(--fs-7); + font-weight: var(--fw-300); + } + + .skill-progress-bg { + background: var(--jet); + width: 100%; + height: 8px; + border-radius: 10px; + } + + .skill-progress-fill { + background: var(--text-gradient-yellow); + height: 100%; + border-radius: inherit; + } + + + + + + /*-----------------------------------*\ + #PORTFOLIO + \*-----------------------------------*/ + + .filter-list { display: none; } + + .filter-select-box { + position: relative; + margin-bottom: 25px; + } + + .filter-select { + background: var(--eerie-black-2); + color: var(--light-gray); + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; + padding: 12px 16px; + border: 1px solid var(--jet); + border-radius: 14px; + font-size: var(--fs-6); + font-weight: var(--fw-300); + } + + .filter-select.active .select-icon { transform: rotate(0.5turn); } + + .select-list { + background: var(--eerie-black-2); + position: absolute; + top: calc(100% + 6px); + width: 100%; + padding: 6px; + border: 1px solid var(--jet); + border-radius: 14px; + z-index: 2; + opacity: 0; + visibility: hidden; + pointer-events: none; + transition: 0.15s ease-in-out; + } + + .filter-select.active + .select-list { + opacity: 1; + visibility: visible; + pointer-events: all; + } + + .select-item button { + background: var(--eerie-black-2); + color: var(--light-gray); + font-size: var(--fs-6); + font-weight: var(--fw-300); + text-transform: capitalize; + width: 100%; + padding: 8px 10px; + border-radius: 8px; + } + + .select-item button:hover { --eerie-black-2: hsl(240, 2%, 20%); } + + .project-list { + display: grid; + grid-template-columns: 1fr; + gap: 30px; + margin-bottom: 10px; + } + + .project-item { display: none; } + + .project-item.active { + display: block; + animation: scaleUp 0.25s ease forwards; + } + + @keyframes scaleUp { + 0% { transform: scale(0.5); } + 100% { transform: scale(1); } + } + + .project-item > a { width: 100%; } + + .project-img { + position: relative; + width: 100%; + height: 200px; + border-radius: 16px; + overflow: hidden; + margin-bottom: 15px; + } + + .project-img::before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: transparent; + z-index: 1; + transition: var(--transition-1); + } + + .project-item > a:hover .project-img::before { background: hsla(0, 0%, 0%, 0.5); } + + .project-item-icon-box { + --scale: 0.8; + + background: var(--jet); + color: var(--orange-yellow-crayola); + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%) scale(var(--scale)); + font-size: 20px; + padding: 18px; + border-radius: 12px; + opacity: 0; + z-index: 1; + transition: var(--transition-1); + } + + .project-item > a:hover .project-item-icon-box { + --scale: 1; + opacity: 1; + } + + .project-item-icon-box ion-icon { --ionicon-stroke-width: 50px; } + + .project-img img { + width: 100%; + height: 100%; + object-fit: cover; + transition: var(--transition-1); + } + + .project-item > a:hover img { transform: scale(1.1); } + + .project-title, + .project-category { margin-left: 10px; } + + .project-title { + color: var(--white-2); + font-size: var(--fs-5); + font-weight: var(--fw-400); + text-transform: capitalize; + line-height: 1.3; + } + + .project-category { + color: var(--light-gray-70); + font-size: var(--fs-6); + font-weight: var(--fw-300); + } + + + + + + /*-----------------------------------*\ + #BLOG + \*-----------------------------------*/ + + .blog-posts { margin-bottom: 10px; } + + .blog-posts-list { + display: grid; + grid-template-columns: 1fr; + gap: 20px; + } + + .blog-post-item > a { + position: relative; + background: var(--border-gradient-onyx); + height: 100%; + box-shadow: var(--shadow-4); + border-radius: 16px; + z-index: 1; + } + + .blog-post-item > a::before { + content: ""; + position: absolute; + inset: 1px; + border-radius: inherit; + background: var(--eerie-black-1); + z-index: -1; + } + + .blog-banner-box { + width: 100%; + height: 200px; + border-radius: 12px; + overflow: hidden; + } + + .blog-banner-box img { + width: 100%; + height: 100%; + object-fit: cover; + transition: var(--transition-1); + } + + .blog-post-item > a:hover .blog-banner-box img { transform: scale(1.1); } + + .blog-content { padding: 15px; } + + .blog-meta { + display: flex; + justify-content: flex-start; + align-items: center; + gap: 7px; + margin-bottom: 10px; + } + + .blog-meta :is(.blog-category, time) { + color: var(--light-gray-70); + font-size: var(--fs-6); + font-weight: var(--fw-300); + } + + .blog-meta .dot { + background: var(--light-gray-70); + width: 4px; + height: 4px; + border-radius: 4px; + } + + .blog-item-title { + margin-bottom: 10px; + line-height: 1.3; + transition: var(--transition-1); + } + + .blog-post-item > a:hover .blog-item-title { color: var(--orange-yellow-crayola); } + + .blog-text { + color: var(--light-gray); + font-size: var(--fs-6); + font-weight: var(--fw-300); + line-height: 1.6; + } + + + + + + /*-----------------------------------*\ + #CONTACT + \*-----------------------------------*/ + + .mapbox { + position: relative; + height: 250px; + width: 100%; + border-radius: 16px; + margin-bottom: 30px; + border: 1px solid var(--jet); + overflow: hidden; + } + + .mapbox figure { height: 100%; } + + .mapbox iframe { + width: 100%; + height: 100%; + border: none; + filter: grayscale(1) invert(1); + } + + .contact-form { margin-bottom: 10px; } + + .form-title { margin-bottom: 20px; } + + .input-wrapper { + display: grid; + grid-template-columns: 1fr; + gap: 25px; + margin-bottom: 25px; + } + + .form-input { + color: var(--white-2); + font-size: var(--fs-6); + font-weight: var(--fw-400); + padding: 13px 20px; + border: 1px solid var(--jet); + border-radius: 14px; + outline: none; + } + + .form-input::placeholder { font-weight: var(--fw-500); } + + .form-input:focus { border-color: var(--orange-yellow-crayola); } + + textarea.form-input { + min-height: 100px; + height: 120px; + max-height: 200px; + resize: vertical; + margin-bottom: 25px; + } + + textarea.form-input::-webkit-resizer { display: none; } + + .form-input:focus:invalid { border-color: var(--bittersweet-shimmer); } + + .form-btn { + position: relative; + width: 100%; + background: var(--border-gradient-onyx); + color: var(--orange-yellow-crayola); + display: flex; + justify-content: center; + align-items: center; + gap: 10px; + padding: 13px 20px; + border-radius: 14px; + font-size: var(--fs-6); + text-transform: capitalize; + box-shadow: var(--shadow-3); + z-index: 1; + transition: var(--transition-1); + } + + .form-btn::before { + content: ""; + position: absolute; + inset: 1px; + background: var(--bg-gradient-jet); + border-radius: inherit; + z-index: -1; + transition: var(--transition-1); + } + + .form-btn ion-icon { font-size: 16px; } + + .form-btn:hover { background: var(--bg-gradient-yellow-1); } + + .form-btn:hover::before { background: var(--bg-gradient-yellow-2); } + + .form-btn:disabled { + opacity: 0.7; + cursor: not-allowed; + } + + .form-btn:disabled:hover { background: var(--border-gradient-onyx); } + + .form-btn:disabled:hover::before { background: var(--bg-gradient-jet); } + + + + + + /*-----------------------------------*\ + #RESPONSIVE + \*-----------------------------------*/ + + /** + * responsive larger than 450px screen + */ + + @media (min-width: 450px) { + + /** + * client + */ + + .clients-item { min-width: calc(33.33% - 10px); } + + + + /** + * #PORTFOLIO, BLOG + */ + + .project-img, + .blog-banner-box { height: auto; } + + } + + + + + + /** + * responsive larger than 580px screen + */ + + @media (min-width: 580px) { + + /** + * CUSTOM PROPERTY + */ + + :root { + + /** + * typography + */ + + --fs-1: 32px; + --fs-2: 24px; + --fs-3: 26px; + --fs-4: 18px; + --fs-6: 15px; + --fs-7: 15px; + --fs-8: 12px; + + } + + + + /** + * #REUSED STYLE + */ + + .sidebar, article { + width: 520px; + margin-inline: auto; + padding: 30px; + } + + .article-title { + font-weight: var(--fw-600); + padding-bottom: 15px; + } + + .article-title::after { + width: 40px; + height: 5px; + } + + .icon-box { + width: 48px; + height: 48px; + border-radius: 12px; + font-size: 18px; + } + + + + /** + * #MAIN + */ + + main { + margin-top: 60px; + margin-bottom: 100px; + } + + + + /** + * #SIDEBAR + */ + + .sidebar { + max-height: 180px; + margin-bottom: 30px; + } + + .sidebar.active { max-height: 584px; } + + .sidebar-info { gap: 25px; } + + .avatar-box { border-radius: 30px; } + + .avatar-box img { width: 120px; } + + .info-content .name { margin-bottom: 15px; } + + .info-content .title { padding: 5px 18px; } + + .info_more-btn { + top: -30px; + right: -30px; + padding: 10px 15px; + } + + .info_more-btn span { + display: block; + font-size: var(--fs-8); + } + + .info_more-btn ion-icon { display: none; } + + .separator { margin: 32px 0; } + + .contacts-list { gap: 20px; } + + .contact-info { + max-width: calc(100% - 64px); + width: calc(100% - 64px); + } + + + + /** + * #NAVBAR + */ + + .navbar { border-radius: 20px 20px 0 0; } + + .navbar-list { gap: 20px; } + + .navbar-link { --fs-8: 14px; } + + + + /** + * #ABOUT + */ + + .about .article-title { margin-bottom: 20px; } + + .about-text { margin-bottom: 40px; } + + /* service */ + + .service-item { + display: flex; + justify-content: flex-start; + align-items: flex-start; + gap: 18px; + padding: 30px; + } + + .service-icon-box { + margin-bottom: 0; + margin-top: 5px; + } + + .service-content-box { text-align: left; } + + /* testimonials */ + + .testimonials-title { margin-bottom: 25px; } + + .testimonials-list { + gap: 30px; + margin: 0 -30px; + padding: 30px; + padding-bottom: 35px; + } + + .content-card { + padding: 30px; + padding-top: 25px; + } + + .testimonials-avatar-box { + transform: translate(30px, -30px); + border-radius: 20px; + } + + .testimonials-avatar-box img { width: 80px; } + + .testimonials-item-title { + margin-bottom: 10px; + margin-left: 95px; + } + + .testimonials-text { + line-clamp: 2; + -webkit-line-clamp: 2; + } + + /* testimonials modal */ + + .modal-container { padding: 20px; } + + .testimonials-modal { + display: flex; + justify-content: flex-start; + align-items: stretch; + gap: 25px; + padding: 30px; + border-radius: 20px; + } + + .modal-img-wrapper { + display: flex; + flex-direction: column; + align-items: center; + } + + .modal-avatar-box { + border-radius: 18px; + margin-bottom: 0; + } + + .modal-avatar-box img { width: 65px; } + + .modal-img-wrapper > img { + display: block; + flex-grow: 1; + width: 35px; + } + + /* clients */ + + .clients-list { + gap: 50px; + margin: 0 -30px; + padding: 45px; + scroll-padding-inline: 45px; + } + + .clients-item { min-width: calc(33.33% - 35px); } + + + + /** + * #RESUME + */ + + .timeline-list { margin-left: 65px; } + + .timeline-item:not(:last-child)::before { left: -40px; } + + .timeline-item::after { + height: 8px; + width: 8px; + left: -43px; + } + + .skills-item:not(:last-child) { margin-bottom: 25px; } + + + + /** + * #PORTFOLIO, BLOG + */ + + .project-img, .blog-banner-box { border-radius: 16px; } + + .blog-posts-list { gap: 30px; } + + .blog-content { padding: 25px; } + + + + /** + * #CONTACT + */ + + .mapbox { + height: 380px; + border-radius: 18px; + } + + .input-wrapper { + gap: 30px; + margin-bottom: 30px; + } + + .form-input { padding: 15px 20px; } + + textarea.form-input { margin-bottom: 30px; } + + .form-btn { + --fs-6: 16px; + padding: 16px 20px; + } + + .form-btn ion-icon { font-size: 18px; } + + } + + + + + + /** + * responsive larger than 768px screen + */ + + @media (min-width: 768px) { + + /** + * REUSED STYLE + */ + + .sidebar, article { width: 700px; } + + .has-scrollbar::-webkit-scrollbar-button { width: 100px; } + + + + /** + * SIDEBAR + */ + + .contacts-list { + grid-template-columns: 1fr 1fr; + gap: 30px 15px; + } + + + + /** + * NAVBAR + */ + + .navbar-link { --fs-8: 15px; } + + + + /** + * ABOUT + */ + + /* testimonials modal */ + + .testimonials-modal { + gap: 35px; + max-width: 680px; + } + + .modal-avatar-box img { width: 80px; } + + + + /** + * PORTFOLIO + */ + + .article-title { padding-bottom: 20px; } + + .filter-select-box { display: none; } + + .filter-list { + display: flex; + justify-content: flex-start; + align-items: center; + gap: 25px; + padding-left: 5px; + margin-bottom: 30px; + } + + .filter-item button { + color: var(--light-gray); + font-size: var(--fs-5); + transition: var(--transition-1); + } + + .filter-item button:hover { color: var(--light-gray-70); } + + .filter-item button.active { color: var(--orange-yellow-crayola); } + + /* portfolio and blog grid */ + + .project-list, .blog-posts-list { grid-template-columns: 1fr 1fr; } + + + + /** + * CONTACT + */ + + .input-wrapper { grid-template-columns: 1fr 1fr; } + + .form-btn { + width: max-content; + margin-left: auto; + } + + } + + + + + + /** + * responsive larger than 1024px screen + */ + + @media (min-width: 1024px) { + + /** + * CUSTOM PROPERTY + */ + + :root { + + /** + * shadow + */ + + --shadow-1: -4px 8px 24px hsla(0, 0%, 0%, 0.125); + --shadow-2: 0 16px 30px hsla(0, 0%, 0%, 0.125); + --shadow-3: 0 16px 40px hsla(0, 0%, 0%, 0.125); + + } + + + + /** + * REUSED STYLE + */ + + .sidebar, article { + width: 950px; + box-shadow: var(--shadow-5); + } + + + + /** + * MAIN + */ + + main { margin-bottom: 60px; } + + .main-content { + position: relative; + width: max-content; + margin: auto; + } + + + + /** + * NAVBAR + */ + + .navbar { + position: absolute; + bottom: auto; + top: 0; + left: auto; + right: 0; + width: max-content; + border-radius: 0 20px; + padding: 0 20px; + box-shadow: none; + } + + .navbar-list { + gap: 30px; + padding: 0 20px; + } + + .navbar-link { font-weight: var(--fw-500); } + + + + /** + * ABOUT + */ + + /* service */ + + .service-list { + grid-template-columns: 1fr 1fr; + gap: 20px 25px; + } + + /* testimonials */ + + .testimonials-item { min-width: calc(50% - 15px); } + + /* clients */ + + .clients-item { min-width: calc(25% - 38px); } + + + + /** + * PORTFOLIO + */ + + .project-list { grid-template-columns: repeat(3, 1fr); } + + + + /** + * BLOG + */ + + .blog-banner-box { height: 230px; } + + } + + + + + + /** + * responsive larger than 1250px screen + */ + + @media (min-width: 1250px) { + + /** + * RESET + */ + + body::-webkit-scrollbar { width: 20px; } + + body::-webkit-scrollbar-track { background: var(--smoky-black); } + + body::-webkit-scrollbar-thumb { + border: 5px solid var(--smoky-black); + background: hsla(0, 0%, 100%, 0.1); + border-radius: 20px; + box-shadow: inset 1px 1px 0 hsla(0, 0%, 100%, 0.11), + inset -1px -1px 0 hsla(0, 0%, 100%, 0.11); + } + + body::-webkit-scrollbar-thumb:hover { background: hsla(0, 0%, 100%, 0.15); } + + body::-webkit-scrollbar-button { height: 60px; } + + + + /** + * REUSED STYLE + */ + + .sidebar, article { width: auto; } + + article { min-height: 100%; } + + + + /** + * MAIN + */ + + main { + max-width: 1200px; + margin-inline: auto; + display: flex; + justify-content: center; + align-items: stretch; + gap: 25px; + } + + .main-content { + min-width: 75%; + width: 75%; + margin: 0; + } + + + + /** + * SIDEBAR + */ + + .sidebar { + position: sticky; + top: 60px; + max-height: max-content; + height: 100%; + margin-bottom: 0; + padding-top: 60px; + z-index: 1; + } + + .sidebar-info { flex-direction: column; } + + .avatar-box img { width: 150px; } + + .info-content .name { + white-space: nowrap; + text-align: center; + } + + .info-content .title { margin: auto; } + + .info_more-btn { display: none; } + + .sidebar-info_more { + opacity: 1; + visibility: visible; + } + + .contacts-list { grid-template-columns: 1fr; } + + .contact-info :is(.contact-link) { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + .contact-info :is(.contact-link, time, address) { + --fs-7: 14px; + font-weight: var(--fw-300); + } + + .separator:last-of-type { + margin: 15px 0; + opacity: 0; + } + + .social-list { justify-content: center; } + + + + /** + * RESUME + */ + + .timeline-text { max-width: 700px; } + + } \ No newline at end of file diff --git a/src/theme/variables.css b/src/theme/variables.css new file mode 100644 index 0000000..b442868 --- /dev/null +++ b/src/theme/variables.css @@ -0,0 +1,247 @@ +/* Ionic Variables and Theming. */ +/* This is just a placeholder file For more info, please see: */ +/* https://ionicframework.com/docs/theming/basics */ + +/* To quickly generate your own theme, check out the color generator */ +/* https://ionicframework.com/docs/theming/color-generator */ + +/** Ionic CSS Variables **/ +:root { + /** primary **/ + --ion-color-primary: #3880ff; + --ion-color-primary-rgb: 56, 128, 255; + --ion-color-primary-contrast: #ffffff; + --ion-color-primary-contrast-rgb: 255, 255, 255; + --ion-color-primary-shade: #3171e0; + --ion-color-primary-tint: #4c8dff; + + /** secondary **/ + --ion-color-secondary: #3dc2ff; + --ion-color-secondary-rgb: 61, 194, 255; + --ion-color-secondary-contrast: #ffffff; + --ion-color-secondary-contrast-rgb: 255, 255, 255; + --ion-color-secondary-shade: #36abe0; + --ion-color-secondary-tint: #50c8ff; + + /** tertiary **/ + --ion-color-tertiary: #5260ff; + --ion-color-tertiary-rgb: 82, 96, 255; + --ion-color-tertiary-contrast: #ffffff; + --ion-color-tertiary-contrast-rgb: 255, 255, 255; + --ion-color-tertiary-shade: #4854e0; + --ion-color-tertiary-tint: #6370ff; + + /** success **/ + --ion-color-success: #2dd36f; + --ion-color-success-rgb: 45, 211, 111; + --ion-color-success-contrast: #ffffff; + --ion-color-success-contrast-rgb: 255, 255, 255; + --ion-color-success-shade: #28ba62; + --ion-color-success-tint: #42d77d; + + /** warning **/ + --ion-color-warning: #ffc409; + --ion-color-warning-rgb: 255, 196, 9; + --ion-color-warning-contrast: #000000; + --ion-color-warning-contrast-rgb: 0, 0, 0; + --ion-color-warning-shade: #e0ac08; + --ion-color-warning-tint: #ffca22; + + /** danger **/ + --ion-color-danger: #eb445a; + --ion-color-danger-rgb: 235, 68, 90; + --ion-color-danger-contrast: #ffffff; + --ion-color-danger-contrast-rgb: 255, 255, 255; + --ion-color-danger-shade: #cf3c4f; + --ion-color-danger-tint: #ed576b; + + /** dark **/ + --ion-color-dark: #222428; + --ion-color-dark-rgb: 34, 36, 40; + --ion-color-dark-contrast: #ffffff; + --ion-color-dark-contrast-rgb: 255, 255, 255; + --ion-color-dark-shade: #1e2023; + --ion-color-dark-tint: #383a3e; + + /** medium **/ + --ion-color-medium: #92949c; + --ion-color-medium-rgb: 146, 148, 156; + --ion-color-medium-contrast: #ffffff; + --ion-color-medium-contrast-rgb: 255, 255, 255; + --ion-color-medium-shade: #808289; + --ion-color-medium-tint: #9d9fa6; + + /** light **/ + --ion-color-light: #f4f5f8; + --ion-color-light-rgb: 244, 245, 248; + --ion-color-light-contrast: #000000; + --ion-color-light-contrast-rgb: 0, 0, 0; + --ion-color-light-shade: #d7d8da; + --ion-color-light-tint: #f5f6f9; +} + +@media (prefers-color-scheme: dark) { + /* + * Dark Colors + * ------------------------------------------- + */ + + body { + --ion-color-primary: #428cff; + --ion-color-primary-rgb: 66, 140, 255; + --ion-color-primary-contrast: #ffffff; + --ion-color-primary-contrast-rgb: 255, 255, 255; + --ion-color-primary-shade: #3a7be0; + --ion-color-primary-tint: #5598ff; + + --ion-color-secondary: #50c8ff; + --ion-color-secondary-rgb: 80, 200, 255; + --ion-color-secondary-contrast: #ffffff; + --ion-color-secondary-contrast-rgb: 255, 255, 255; + --ion-color-secondary-shade: #46b0e0; + --ion-color-secondary-tint: #62ceff; + + --ion-color-tertiary: #6a64ff; + --ion-color-tertiary-rgb: 106, 100, 255; + --ion-color-tertiary-contrast: #ffffff; + --ion-color-tertiary-contrast-rgb: 255, 255, 255; + --ion-color-tertiary-shade: #5d58e0; + --ion-color-tertiary-tint: #7974ff; + + --ion-color-success: #2fdf75; + --ion-color-success-rgb: 47, 223, 117; + --ion-color-success-contrast: #000000; + --ion-color-success-contrast-rgb: 0, 0, 0; + --ion-color-success-shade: #29c467; + --ion-color-success-tint: #44e283; + + --ion-color-warning: #ffd534; + --ion-color-warning-rgb: 255, 213, 52; + --ion-color-warning-contrast: #000000; + --ion-color-warning-contrast-rgb: 0, 0, 0; + --ion-color-warning-shade: #e0bb2e; + --ion-color-warning-tint: #ffd948; + + --ion-color-danger: #ff4961; + --ion-color-danger-rgb: 255, 73, 97; + --ion-color-danger-contrast: #ffffff; + --ion-color-danger-contrast-rgb: 255, 255, 255; + --ion-color-danger-shade: #e04055; + --ion-color-danger-tint: #ff5b71; + + --ion-color-dark: #f4f5f8; + --ion-color-dark-rgb: 244, 245, 248; + --ion-color-dark-contrast: #000000; + --ion-color-dark-contrast-rgb: 0, 0, 0; + --ion-color-dark-shade: #d7d8da; + --ion-color-dark-tint: #f5f6f9; + + --ion-color-medium: #989aa2; + --ion-color-medium-rgb: 152, 154, 162; + --ion-color-medium-contrast: #000000; + --ion-color-medium-contrast-rgb: 0, 0, 0; + --ion-color-medium-shade: #86888f; + --ion-color-medium-tint: #a2a4ab; + + --ion-color-light: #222428; + --ion-color-light-rgb: 34, 36, 40; + --ion-color-light-contrast: #ffffff; + --ion-color-light-contrast-rgb: 255, 255, 255; + --ion-color-light-shade: #1e2023; + --ion-color-light-tint: #383a3e; + } + + /* + * iOS Dark Theme + * ------------------------------------------- + */ + + .ios body { + --ion-background-color: #000000; + --ion-background-color-rgb: 0, 0, 0; + + --ion-text-color: #ffffff; + --ion-text-color-rgb: 255, 255, 255; + + --ion-color-step-50: #0d0d0d; + --ion-color-step-100: #1a1a1a; + --ion-color-step-150: #262626; + --ion-color-step-200: #333333; + --ion-color-step-250: #404040; + --ion-color-step-300: #4d4d4d; + --ion-color-step-350: #595959; + --ion-color-step-400: #666666; + --ion-color-step-450: #737373; + --ion-color-step-500: #808080; + --ion-color-step-550: #8c8c8c; + --ion-color-step-600: #999999; + --ion-color-step-650: #a6a6a6; + --ion-color-step-700: #b3b3b3; + --ion-color-step-750: #bfbfbf; + --ion-color-step-800: #cccccc; + --ion-color-step-850: #d9d9d9; + --ion-color-step-900: #e6e6e6; + --ion-color-step-950: #f2f2f2; + + --ion-item-background: #000000; + + --ion-card-background: #1c1c1d; + } + + .ios ion-modal { + --ion-background-color: var(--ion-color-step-100); + --ion-toolbar-background: var(--ion-color-step-150); + --ion-toolbar-border-color: var(--ion-color-step-250); + } + + /* + * Material Design Dark Theme + * ------------------------------------------- + */ + + .md body { + --ion-background-color: #121212; + --ion-background-color-rgb: 18, 18, 18; + + --ion-text-color: #ffffff; + --ion-text-color-rgb: 255, 255, 255; + + --ion-border-color: #222222; + + --ion-color-step-50: #1e1e1e; + --ion-color-step-100: #2a2a2a; + --ion-color-step-150: #363636; + --ion-color-step-200: #414141; + --ion-color-step-250: #4d4d4d; + --ion-color-step-300: #595959; + --ion-color-step-350: #656565; + --ion-color-step-400: #717171; + --ion-color-step-450: #7d7d7d; + --ion-color-step-500: #898989; + --ion-color-step-550: #949494; + --ion-color-step-600: #a0a0a0; + --ion-color-step-650: #acacac; + --ion-color-step-700: #b8b8b8; + --ion-color-step-750: #c4c4c4; + --ion-color-step-800: #d0d0d0; + --ion-color-step-850: #dbdbdb; + --ion-color-step-900: #e7e7e7; + --ion-color-step-950: #f3f3f3; + + --ion-item-background: #1e1e1e; + + --ion-toolbar-background: #1f1f1f; + + --ion-tab-bar-background: #1f1f1f; + + --ion-card-background: #1e1e1e; + } +} + +html { + /* + * For more information on dynamic font scaling, visit the documentation: + * https://ionicframework.com/docs/layout/dynamic-font-scaling + */ + --ion-dynamic-font: var(--ion-default-dynamic-font); +}