Conversion of scss into tailwind (#2)
* installed tailwind * updated menu - tailwind * removed old style * updated container size for navigation * updated footer style - tailwind * updated header style - tailwind * updated colors * updated about section - tailwind * updated experiences style - tailwind * WIP * improved responsiveness * updated favorite projects * updated buttons * updated projects view * updated footer style * updated about view * updated project view * updated style for contact form * updated mail contact * final style update * fixed buttons * fix scroll button * added autoscroll for contact form * updated paths in project * empty line added * unnecessary comment removed
This commit is contained in:
GitHub
parent
7475bb5671
commit
7bee728518
9
css/index.css
Normal file
9
css/index.css
Normal file
@ -0,0 +1,9 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
--color-kamilcraft-green: 162 207 0;
|
||||
}
|
||||
}
|
||||
485
package-lock.json
generated
485
package-lock.json
generated
@ -26,10 +26,13 @@
|
||||
"@vue/cli-plugin-babel": "~5.0.0",
|
||||
"@vue/cli-plugin-eslint": "~5.0.0",
|
||||
"@vue/cli-service": "~5.0.0",
|
||||
"autoprefixer": "^10.4.7",
|
||||
"eslint": "^7.32.0",
|
||||
"eslint-plugin-vue": "^8.0.3",
|
||||
"postcss": "^8.4.14",
|
||||
"sass": "^1.53.0",
|
||||
"sass-loader": "^13.0.2"
|
||||
"sass-loader": "^13.0.2",
|
||||
"tailwindcss": "^3.1.6"
|
||||
}
|
||||
},
|
||||
"node_modules/@achrinza/node-ipc": {
|
||||
@ -3227,6 +3230,38 @@
|
||||
"acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/acorn-node": {
|
||||
"version": "1.8.2",
|
||||
"resolved": "https://registry.npmjs.org/acorn-node/-/acorn-node-1.8.2.tgz",
|
||||
"integrity": "sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"acorn": "^7.0.0",
|
||||
"acorn-walk": "^7.0.0",
|
||||
"xtend": "^4.0.2"
|
||||
}
|
||||
},
|
||||
"node_modules/acorn-node/node_modules/acorn": {
|
||||
"version": "7.4.1",
|
||||
"resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
|
||||
"integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
|
||||
"dev": true,
|
||||
"bin": {
|
||||
"acorn": "bin/acorn"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=0.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/acorn-node/node_modules/acorn-walk": {
|
||||
"version": "7.2.0",
|
||||
"resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz",
|
||||
"integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=0.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/acorn-walk": {
|
||||
"version": "8.2.0",
|
||||
"resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.2.0.tgz",
|
||||
@ -3399,6 +3434,12 @@
|
||||
}
|
||||
]
|
||||
},
|
||||
"node_modules/arg": {
|
||||
"version": "5.0.2",
|
||||
"resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
|
||||
"integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/argparse": {
|
||||
"version": "1.0.10",
|
||||
"resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
|
||||
@ -3830,6 +3871,15 @@
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/camelcase-css": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
|
||||
"integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">= 6"
|
||||
}
|
||||
},
|
||||
"node_modules/caniuse-api": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
|
||||
@ -4826,6 +4876,12 @@
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/defined": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/defined/-/defined-1.0.0.tgz",
|
||||
"integrity": "sha512-Y2caI5+ZwS5c3RiNDJ6u53VhQHv+hHKwhkI1iHvceKUHw9Df6EK2zRLfjejRgMuCuxK7PfSWIMwWecceVvThjQ==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/depd": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
|
||||
@ -4851,6 +4907,29 @@
|
||||
"integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/detective": {
|
||||
"version": "5.2.1",
|
||||
"resolved": "https://registry.npmjs.org/detective/-/detective-5.2.1.tgz",
|
||||
"integrity": "sha512-v9XE1zRnz1wRtgurGu0Bs8uHKFSTdteYZNbIPFVhUZ39L/S79ppMpdmVOZAnoz1jfEFodc48n6MX483Xo3t1yw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"acorn-node": "^1.8.2",
|
||||
"defined": "^1.0.0",
|
||||
"minimist": "^1.2.6"
|
||||
},
|
||||
"bin": {
|
||||
"detective": "bin/detective.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=0.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/didyoumean": {
|
||||
"version": "1.2.2",
|
||||
"resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
|
||||
"integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/dir-glob": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
|
||||
@ -4863,6 +4942,12 @@
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/dlv": {
|
||||
"version": "1.1.3",
|
||||
"resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
|
||||
"integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/dns-equal": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz",
|
||||
@ -7888,6 +7973,15 @@
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/object-hash": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
|
||||
"integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">= 6"
|
||||
}
|
||||
},
|
||||
"node_modules/object-inspect": {
|
||||
"version": "1.12.2",
|
||||
"resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.2.tgz",
|
||||
@ -8314,6 +8408,15 @@
|
||||
"url": "https://github.com/sponsors/jonschlinkert"
|
||||
}
|
||||
},
|
||||
"node_modules/pify": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
|
||||
"integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/pkg-dir": {
|
||||
"version": "4.2.0",
|
||||
"resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
|
||||
@ -8467,6 +8570,71 @@
|
||||
"postcss": "^8.2.15"
|
||||
}
|
||||
},
|
||||
"node_modules/postcss-import": {
|
||||
"version": "14.1.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-14.1.0.tgz",
|
||||
"integrity": "sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"postcss-value-parser": "^4.0.0",
|
||||
"read-cache": "^1.0.0",
|
||||
"resolve": "^1.1.7"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"postcss": "^8.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/postcss-js": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.0.tgz",
|
||||
"integrity": "sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"camelcase-css": "^2.0.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^12 || ^14 || >= 16"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/postcss/"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"postcss": "^8.3.3"
|
||||
}
|
||||
},
|
||||
"node_modules/postcss-load-config": {
|
||||
"version": "3.1.4",
|
||||
"resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.4.tgz",
|
||||
"integrity": "sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"lilconfig": "^2.0.5",
|
||||
"yaml": "^1.10.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 10"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/postcss/"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"postcss": ">=8.0.9",
|
||||
"ts-node": ">=9.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"postcss": {
|
||||
"optional": true
|
||||
},
|
||||
"ts-node": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/postcss-loader": {
|
||||
"version": "6.2.1",
|
||||
"resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-6.2.1.tgz",
|
||||
@ -8661,6 +8829,25 @@
|
||||
"postcss": "^8.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/postcss-nested": {
|
||||
"version": "5.0.6",
|
||||
"resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-5.0.6.tgz",
|
||||
"integrity": "sha512-rKqm2Fk0KbA8Vt3AdGN0FB9OBOMDVajMG6ZCf/GoHgdxUJ4sBFp0A/uMIRm+MJUdo33YXEtjqIz8u7DAp8B7DA==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"postcss-selector-parser": "^6.0.6"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/postcss/"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"postcss": "^8.2.14"
|
||||
}
|
||||
},
|
||||
"node_modules/postcss-normalize-charset": {
|
||||
"version": "5.1.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-5.1.0.tgz",
|
||||
@ -9041,6 +9228,18 @@
|
||||
}
|
||||
]
|
||||
},
|
||||
"node_modules/quick-lru": {
|
||||
"version": "5.1.1",
|
||||
"resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz",
|
||||
"integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/randombytes": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
|
||||
@ -9083,6 +9282,15 @@
|
||||
"node": ">= 0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/read-cache": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
|
||||
"integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"pify": "^2.3.0"
|
||||
}
|
||||
},
|
||||
"node_modules/read-pkg": {
|
||||
"version": "5.2.0",
|
||||
"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
|
||||
@ -10130,6 +10338,52 @@
|
||||
"integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/tailwindcss": {
|
||||
"version": "3.1.6",
|
||||
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.1.6.tgz",
|
||||
"integrity": "sha512-7skAOY56erZAFQssT1xkpk+kWt2NrO45kORlxFPXUt3CiGsVPhH1smuH5XoDH6sGPXLyBv+zgCKA2HWBsgCytg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"arg": "^5.0.2",
|
||||
"chokidar": "^3.5.3",
|
||||
"color-name": "^1.1.4",
|
||||
"detective": "^5.2.1",
|
||||
"didyoumean": "^1.2.2",
|
||||
"dlv": "^1.1.3",
|
||||
"fast-glob": "^3.2.11",
|
||||
"glob-parent": "^6.0.2",
|
||||
"is-glob": "^4.0.3",
|
||||
"lilconfig": "^2.0.5",
|
||||
"normalize-path": "^3.0.0",
|
||||
"object-hash": "^3.0.0",
|
||||
"picocolors": "^1.0.0",
|
||||
"postcss": "^8.4.14",
|
||||
"postcss-import": "^14.1.0",
|
||||
"postcss-js": "^4.0.0",
|
||||
"postcss-load-config": "^3.1.4",
|
||||
"postcss-nested": "5.0.6",
|
||||
"postcss-selector-parser": "^6.0.10",
|
||||
"postcss-value-parser": "^4.2.0",
|
||||
"quick-lru": "^5.1.1",
|
||||
"resolve": "^1.22.1"
|
||||
},
|
||||
"bin": {
|
||||
"tailwind": "lib/cli.js",
|
||||
"tailwindcss": "lib/cli.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12.13.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"postcss": "^8.0.9"
|
||||
}
|
||||
},
|
||||
"node_modules/tailwindcss/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/tapable": {
|
||||
"version": "2.2.1",
|
||||
"resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
|
||||
@ -11402,6 +11656,15 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/xtend": {
|
||||
"version": "4.0.2",
|
||||
"resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
|
||||
"integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/y18n": {
|
||||
"version": "5.0.8",
|
||||
"resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
|
||||
@ -12812,8 +13075,7 @@
|
||||
"@fortawesome/vue-fontawesome": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/vue-fontawesome/-/vue-fontawesome-3.0.1.tgz",
|
||||
"integrity": "sha512-CdXZJoCS+aEPec26ZP7hWWU3SaJlQPZSCGdgpQ2qGl2HUmtUUNrI3zC4XWdn1JUmh3t5OuDeRG1qB4eGRNSD4A==",
|
||||
"requires": {}
|
||||
"integrity": "sha512-CdXZJoCS+aEPec26ZP7hWWU3SaJlQPZSCGdgpQ2qGl2HUmtUUNrI3zC4XWdn1JUmh3t5OuDeRG1qB4eGRNSD4A=="
|
||||
},
|
||||
"@hapi/hoek": {
|
||||
"version": "9.3.0",
|
||||
@ -13475,8 +13737,7 @@
|
||||
"version": "5.0.8",
|
||||
"resolved": "https://registry.npmjs.org/@vue/cli-plugin-vuex/-/cli-plugin-vuex-5.0.8.tgz",
|
||||
"integrity": "sha512-HSYWPqrunRE5ZZs8kVwiY6oWcn95qf/OQabwLfprhdpFWAGtLStShjsGED2aDpSSeGAskQETrtR/5h7VqgIlBA==",
|
||||
"dev": true,
|
||||
"requires": {}
|
||||
"dev": true
|
||||
},
|
||||
"@vue/cli-service": {
|
||||
"version": "5.0.8",
|
||||
@ -13987,15 +14248,38 @@
|
||||
"version": "1.8.0",
|
||||
"resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.8.0.tgz",
|
||||
"integrity": "sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw==",
|
||||
"dev": true,
|
||||
"requires": {}
|
||||
"dev": true
|
||||
},
|
||||
"acorn-jsx": {
|
||||
"version": "5.3.2",
|
||||
"resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
|
||||
"integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
|
||||
"dev": true
|
||||
},
|
||||
"acorn-node": {
|
||||
"version": "1.8.2",
|
||||
"resolved": "https://registry.npmjs.org/acorn-node/-/acorn-node-1.8.2.tgz",
|
||||
"integrity": "sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==",
|
||||
"dev": true,
|
||||
"requires": {}
|
||||
"requires": {
|
||||
"acorn": "^7.0.0",
|
||||
"acorn-walk": "^7.0.0",
|
||||
"xtend": "^4.0.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"acorn": {
|
||||
"version": "7.4.1",
|
||||
"resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
|
||||
"integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
|
||||
"dev": true
|
||||
},
|
||||
"acorn-walk": {
|
||||
"version": "7.2.0",
|
||||
"resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz",
|
||||
"integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"acorn-walk": {
|
||||
"version": "8.2.0",
|
||||
@ -14054,8 +14338,7 @@
|
||||
"version": "3.5.2",
|
||||
"resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
|
||||
"integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
|
||||
"dev": true,
|
||||
"requires": {}
|
||||
"dev": true
|
||||
},
|
||||
"ansi-colors": {
|
||||
"version": "4.1.3",
|
||||
@ -14112,6 +14395,12 @@
|
||||
"integrity": "sha512-Of/R0wqp83cgHozfIYLbBMnej79U/SVGOOyuB3VVFv1NRM/PSFMK12x9KVtiYzJqmnU5WR2qp0Z5rHb7sWGnFQ==",
|
||||
"dev": true
|
||||
},
|
||||
"arg": {
|
||||
"version": "5.0.2",
|
||||
"resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
|
||||
"integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
|
||||
"dev": true
|
||||
},
|
||||
"argparse": {
|
||||
"version": "1.0.10",
|
||||
"resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
|
||||
@ -14425,6 +14714,12 @@
|
||||
"integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==",
|
||||
"dev": true
|
||||
},
|
||||
"camelcase-css": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
|
||||
"integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
|
||||
"dev": true
|
||||
},
|
||||
"caniuse-api": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
|
||||
@ -14856,8 +15151,7 @@
|
||||
"version": "6.3.0",
|
||||
"resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.3.0.tgz",
|
||||
"integrity": "sha512-OGT677UGHJTAVMRhPO+HJ4oKln3wkBTwtDFH0ojbqm+MJm6xuDMHp2nkhh/ThaBqq20IbraBQSWKfSLNHQO9Og==",
|
||||
"dev": true,
|
||||
"requires": {}
|
||||
"dev": true
|
||||
},
|
||||
"css-loader": {
|
||||
"version": "6.7.1",
|
||||
@ -15028,8 +15322,7 @@
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/cssnano-utils/-/cssnano-utils-3.1.0.tgz",
|
||||
"integrity": "sha512-JQNR19/YZhz4psLX/rQ9M83e3z2Wf/HdJbryzte4a3NSuafyp9w/I4U+hx5C2S9g41qlstH7DEWnZaaj83OuEA==",
|
||||
"dev": true,
|
||||
"requires": {}
|
||||
"dev": true
|
||||
},
|
||||
"csso": {
|
||||
"version": "4.2.0",
|
||||
@ -15139,6 +15432,12 @@
|
||||
"object-keys": "^1.1.1"
|
||||
}
|
||||
},
|
||||
"defined": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/defined/-/defined-1.0.0.tgz",
|
||||
"integrity": "sha512-Y2caI5+ZwS5c3RiNDJ6u53VhQHv+hHKwhkI1iHvceKUHw9Df6EK2zRLfjejRgMuCuxK7PfSWIMwWecceVvThjQ==",
|
||||
"dev": true
|
||||
},
|
||||
"depd": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
|
||||
@ -15157,6 +15456,23 @@
|
||||
"integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==",
|
||||
"dev": true
|
||||
},
|
||||
"detective": {
|
||||
"version": "5.2.1",
|
||||
"resolved": "https://registry.npmjs.org/detective/-/detective-5.2.1.tgz",
|
||||
"integrity": "sha512-v9XE1zRnz1wRtgurGu0Bs8uHKFSTdteYZNbIPFVhUZ39L/S79ppMpdmVOZAnoz1jfEFodc48n6MX483Xo3t1yw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"acorn-node": "^1.8.2",
|
||||
"defined": "^1.0.0",
|
||||
"minimist": "^1.2.6"
|
||||
}
|
||||
},
|
||||
"didyoumean": {
|
||||
"version": "1.2.2",
|
||||
"resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
|
||||
"integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
|
||||
"dev": true
|
||||
},
|
||||
"dir-glob": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
|
||||
@ -15166,6 +15482,12 @@
|
||||
"path-type": "^4.0.0"
|
||||
}
|
||||
},
|
||||
"dlv": {
|
||||
"version": "1.1.3",
|
||||
"resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
|
||||
"integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
|
||||
"dev": true
|
||||
},
|
||||
"dns-equal": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz",
|
||||
@ -16455,8 +16777,7 @@
|
||||
"version": "5.1.0",
|
||||
"resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz",
|
||||
"integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
|
||||
"dev": true,
|
||||
"requires": {}
|
||||
"dev": true
|
||||
},
|
||||
"ieee754": {
|
||||
"version": "1.2.1",
|
||||
@ -17446,6 +17767,12 @@
|
||||
"integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
|
||||
"dev": true
|
||||
},
|
||||
"object-hash": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
|
||||
"integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
|
||||
"dev": true
|
||||
},
|
||||
"object-inspect": {
|
||||
"version": "1.12.2",
|
||||
"resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.2.tgz",
|
||||
@ -17765,6 +18092,12 @@
|
||||
"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
|
||||
"dev": true
|
||||
},
|
||||
"pify": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
|
||||
"integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
|
||||
"dev": true
|
||||
},
|
||||
"pkg-dir": {
|
||||
"version": "4.2.0",
|
||||
"resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
|
||||
@ -17842,29 +18175,55 @@
|
||||
"version": "5.1.2",
|
||||
"resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-5.1.2.tgz",
|
||||
"integrity": "sha512-+L8208OVbHVF2UQf1iDmRcbdjJkuBF6IS29yBDSiWUIzpYaAhtNl6JYnYm12FnkeCwQqF5LeklOu6rAqgfBZqQ==",
|
||||
"dev": true,
|
||||
"requires": {}
|
||||
"dev": true
|
||||
},
|
||||
"postcss-discard-duplicates": {
|
||||
"version": "5.1.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-5.1.0.tgz",
|
||||
"integrity": "sha512-zmX3IoSI2aoenxHV6C7plngHWWhUOV3sP1T8y2ifzxzbtnuhk1EdPwm0S1bIUNaJ2eNbWeGLEwzw8huPD67aQw==",
|
||||
"dev": true,
|
||||
"requires": {}
|
||||
"dev": true
|
||||
},
|
||||
"postcss-discard-empty": {
|
||||
"version": "5.1.1",
|
||||
"resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-5.1.1.tgz",
|
||||
"integrity": "sha512-zPz4WljiSuLWsI0ir4Mcnr4qQQ5e1Ukc3i7UfE2XcrwKK2LIPIqE5jxMRxO6GbI3cv//ztXDsXwEWT3BHOGh3A==",
|
||||
"dev": true,
|
||||
"requires": {}
|
||||
"dev": true
|
||||
},
|
||||
"postcss-discard-overridden": {
|
||||
"version": "5.1.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-5.1.0.tgz",
|
||||
"integrity": "sha512-21nOL7RqWR1kasIVdKs8HNqQJhFxLsyRfAnUDm4Fe4t4mCWL9OJiHvlHPjcd8zc5Myu89b/7wZDnOSjFgeWRtw==",
|
||||
"dev": true
|
||||
},
|
||||
"postcss-import": {
|
||||
"version": "14.1.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-14.1.0.tgz",
|
||||
"integrity": "sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==",
|
||||
"dev": true,
|
||||
"requires": {}
|
||||
"requires": {
|
||||
"postcss-value-parser": "^4.0.0",
|
||||
"read-cache": "^1.0.0",
|
||||
"resolve": "^1.1.7"
|
||||
}
|
||||
},
|
||||
"postcss-js": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.0.tgz",
|
||||
"integrity": "sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"camelcase-css": "^2.0.1"
|
||||
}
|
||||
},
|
||||
"postcss-load-config": {
|
||||
"version": "3.1.4",
|
||||
"resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.4.tgz",
|
||||
"integrity": "sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"lilconfig": "^2.0.5",
|
||||
"yaml": "^1.10.2"
|
||||
}
|
||||
},
|
||||
"postcss-loader": {
|
||||
"version": "6.2.1",
|
||||
@ -17954,8 +18313,7 @@
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz",
|
||||
"integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==",
|
||||
"dev": true,
|
||||
"requires": {}
|
||||
"dev": true
|
||||
},
|
||||
"postcss-modules-local-by-default": {
|
||||
"version": "4.0.0",
|
||||
@ -17986,12 +18344,20 @@
|
||||
"icss-utils": "^5.0.0"
|
||||
}
|
||||
},
|
||||
"postcss-nested": {
|
||||
"version": "5.0.6",
|
||||
"resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-5.0.6.tgz",
|
||||
"integrity": "sha512-rKqm2Fk0KbA8Vt3AdGN0FB9OBOMDVajMG6ZCf/GoHgdxUJ4sBFp0A/uMIRm+MJUdo33YXEtjqIz8u7DAp8B7DA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"postcss-selector-parser": "^6.0.6"
|
||||
}
|
||||
},
|
||||
"postcss-normalize-charset": {
|
||||
"version": "5.1.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-5.1.0.tgz",
|
||||
"integrity": "sha512-mSgUJ+pd/ldRGVx26p2wz9dNZ7ji6Pn8VWBajMXFf8jk7vUoSrZ2lt/wZR7DtlZYKesmZI680qjr2CeFF2fbUg==",
|
||||
"dev": true,
|
||||
"requires": {}
|
||||
"dev": true
|
||||
},
|
||||
"postcss-normalize-display-values": {
|
||||
"version": "5.1.0",
|
||||
@ -18232,6 +18598,12 @@
|
||||
"integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
|
||||
"dev": true
|
||||
},
|
||||
"quick-lru": {
|
||||
"version": "5.1.1",
|
||||
"resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz",
|
||||
"integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==",
|
||||
"dev": true
|
||||
},
|
||||
"randombytes": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
|
||||
@ -18267,6 +18639,15 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"read-cache": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
|
||||
"integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"pify": "^2.3.0"
|
||||
}
|
||||
},
|
||||
"read-pkg": {
|
||||
"version": "5.2.0",
|
||||
"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
|
||||
@ -19068,6 +19449,44 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"tailwindcss": {
|
||||
"version": "3.1.6",
|
||||
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.1.6.tgz",
|
||||
"integrity": "sha512-7skAOY56erZAFQssT1xkpk+kWt2NrO45kORlxFPXUt3CiGsVPhH1smuH5XoDH6sGPXLyBv+zgCKA2HWBsgCytg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"arg": "^5.0.2",
|
||||
"chokidar": "^3.5.3",
|
||||
"color-name": "^1.1.4",
|
||||
"detective": "^5.2.1",
|
||||
"didyoumean": "^1.2.2",
|
||||
"dlv": "^1.1.3",
|
||||
"fast-glob": "^3.2.11",
|
||||
"glob-parent": "^6.0.2",
|
||||
"is-glob": "^4.0.3",
|
||||
"lilconfig": "^2.0.5",
|
||||
"normalize-path": "^3.0.0",
|
||||
"object-hash": "^3.0.0",
|
||||
"picocolors": "^1.0.0",
|
||||
"postcss": "^8.4.14",
|
||||
"postcss-import": "^14.1.0",
|
||||
"postcss-js": "^4.0.0",
|
||||
"postcss-load-config": "^3.1.4",
|
||||
"postcss-nested": "5.0.6",
|
||||
"postcss-selector-parser": "^6.0.10",
|
||||
"postcss-value-parser": "^4.2.0",
|
||||
"quick-lru": "^5.1.1",
|
||||
"resolve": "^1.22.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"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
|
||||
}
|
||||
}
|
||||
},
|
||||
"tapable": {
|
||||
"version": "2.2.1",
|
||||
"resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
|
||||
@ -19865,8 +20284,7 @@
|
||||
"version": "8.8.0",
|
||||
"resolved": "https://registry.npmjs.org/ws/-/ws-8.8.0.tgz",
|
||||
"integrity": "sha512-JDAgSYQ1ksuwqfChJusw1LSJ8BizJ2e/vVu5Lxjq3YvNJNlROv1ui4i+c/kUUrPheBvQl4c5UbERhTwKa6QBJQ==",
|
||||
"dev": true,
|
||||
"requires": {}
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -19993,8 +20411,13 @@
|
||||
"version": "7.5.8",
|
||||
"resolved": "https://registry.npmjs.org/ws/-/ws-7.5.8.tgz",
|
||||
"integrity": "sha512-ri1Id1WinAX5Jqn9HejiGb8crfRio0Qgu8+MtL36rlTA6RLsMdWt1Az/19A2Qij6uSHUMphEFaTKa4WG+UNHNw==",
|
||||
"dev": true,
|
||||
"requires": {}
|
||||
"dev": true
|
||||
},
|
||||
"xtend": {
|
||||
"version": "4.0.2",
|
||||
"resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
|
||||
"integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
|
||||
"dev": true
|
||||
},
|
||||
"y18n": {
|
||||
"version": "5.0.8",
|
||||
|
||||
@ -26,10 +26,13 @@
|
||||
"@vue/cli-plugin-babel": "~5.0.0",
|
||||
"@vue/cli-plugin-eslint": "~5.0.0",
|
||||
"@vue/cli-service": "~5.0.0",
|
||||
"autoprefixer": "^10.4.7",
|
||||
"eslint": "^7.32.0",
|
||||
"eslint-plugin-vue": "^8.0.3",
|
||||
"postcss": "^8.4.14",
|
||||
"sass": "^1.53.0",
|
||||
"sass-loader": "^13.0.2"
|
||||
"sass-loader": "^13.0.2",
|
||||
"tailwindcss": "^3.1.6"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"root": true,
|
||||
|
||||
6
postcss.config.js
Normal file
6
postcss.config.js
Normal file
@ -0,0 +1,6 @@
|
||||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
@ -20,8 +20,7 @@ $btn-colors: (
|
||||
min-width: 270px;
|
||||
padding: 8px 10px;
|
||||
|
||||
border-radius: 3px;
|
||||
border-width: 3px;
|
||||
@apply border-4 rounded-md;
|
||||
border-style: solid;
|
||||
border-color: $default-color;
|
||||
|
||||
|
||||
@ -1,16 +1,16 @@
|
||||
<template>
|
||||
<SiteHeader />
|
||||
<main
|
||||
rel="main"
|
||||
>
|
||||
<SiteHeader />
|
||||
<RouterView />
|
||||
<FooterComponent />
|
||||
</main>
|
||||
<FooterComponent />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import SiteHeader from './components/SiteHeader'
|
||||
import FooterComponent from './components/FooterComponent'
|
||||
import SiteHeader from '@/components/SiteHeader'
|
||||
import FooterComponent from '@/components/FooterComponent'
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
@ -1,122 +1,47 @@
|
||||
<template>
|
||||
<footer class="footer">
|
||||
<div class="footer_container">
|
||||
<div class="container_logo">
|
||||
Kamil<span class="logo_element">Craft</span>
|
||||
<footer class="bg-neutral-800 py-8">
|
||||
<div class="flex items-center justify-between max-w-screen-xl mx-auto">
|
||||
<div class="bg-neutral-600 text-white pl-10 pr-5 py-2.5 text-logo-size leading-normal font-thasadith">
|
||||
Kamil<span class="text-kamilcraft-green">Craft</span>
|
||||
</div>
|
||||
<ul class="socials">
|
||||
<ul class="flex gap-5 pr-3 text-lg">
|
||||
<li
|
||||
v-for="link in socialLinks"
|
||||
:key="link.title.slug"
|
||||
class="social_link"
|
||||
>
|
||||
<a
|
||||
class="link"
|
||||
class="text-neutral-400 hover:text-neutral-500"
|
||||
:href="link.link"
|
||||
:title="link.title"
|
||||
target="_blank"
|
||||
rel="noopener nofollow noreferrer"
|
||||
>
|
||||
<font-awesome-icon
|
||||
class="icon"
|
||||
<FontAwesomeIcon
|
||||
class="mr-1"
|
||||
:icon="['fab', link.icon]"
|
||||
/>
|
||||
<span class="social_title">{{ link.title }}</span>
|
||||
<span class="social_shortcut">{{ link.shortcut }}</span>
|
||||
<span class="hidden md:inline-block">{{ link.title }}</span>
|
||||
<span class="hidden sm:inline-block md:hidden">{{ link.shortcut }}</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="container" />
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const socialLinks = [
|
||||
{ link: 'https://www.youtube.com/user/kamilniemczycki', icon: 'youtube', title: 'Oglądaj mnie na YouTube', shortcut: 'YouTube' },
|
||||
{ link: 'https://www.facebook.com/nikcamii', icon: 'facebook', title: 'Znajdź mnie na Facebooku', shortcut: 'Facebook' }
|
||||
{
|
||||
link: 'https://www.youtube.com/user/kamilniemczycki',
|
||||
icon: 'youtube',
|
||||
title: 'Oglądaj mnie na YouTube',
|
||||
shortcut: 'YouTube'
|
||||
},
|
||||
{
|
||||
link: 'https://www.facebook.com/nikcamii',
|
||||
icon: 'facebook',
|
||||
title: 'Znajdź mnie na Facebooku',
|
||||
shortcut: 'Facebook'
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "scss/default";
|
||||
|
||||
.footer {
|
||||
background-color: #323232;
|
||||
padding: 35px 0;
|
||||
|
||||
&_container {
|
||||
@extend .container;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.container_logo {
|
||||
padding: 14px 20px 14px 40px;
|
||||
font-family: 'Thasadith', sans-serif;
|
||||
font-size: 2.5em;
|
||||
color: #D4D4D4;
|
||||
background-color: #5B5B5B;
|
||||
|
||||
.logo_element {
|
||||
color: #A2CF00;
|
||||
}
|
||||
}
|
||||
|
||||
.socials {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
|
||||
.social_link {
|
||||
margin-right: 25px;
|
||||
padding-right: 15px;
|
||||
font-size: 1.1em;
|
||||
|
||||
a {
|
||||
color: #A3A3A3;
|
||||
|
||||
.icon {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.social_shortcut {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@include media-tablet {
|
||||
.social_title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.social_shortcut {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-mobile {
|
||||
.social_shortcut {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-mobile {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-tablet {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-mobile {
|
||||
padding: 15px 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,29 +0,0 @@
|
||||
<template>
|
||||
<div class="hello">
|
||||
<h1>{{ route.meta.title }}</h1>
|
||||
<p>Witam na mojej stronie głównej. Wszystkich zainteresowanych oczywiście 😁</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useRoute } from 'vue-router'
|
||||
|
||||
const route = useRoute()
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
h1 {
|
||||
margin: 30px 0 20px;
|
||||
}
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
}
|
||||
a {
|
||||
color: #42b983;
|
||||
}
|
||||
</style>
|
||||
@ -1,19 +1,22 @@
|
||||
<template>
|
||||
<div
|
||||
class="container"
|
||||
:class="{ 'container-menu-active': isClicked }"
|
||||
class="flex relative items-center justify-between md:justify-start max-w-screen-xl mx-auto gap-5"
|
||||
:class="{ 'clicked-menu': isClicked }"
|
||||
>
|
||||
<router-link to="/">
|
||||
<RouterLink to="/">
|
||||
<div
|
||||
class="logo"
|
||||
class="bg-white text-gray-800 pl-10 pr-5 py-2.5 text-logo-size leading-normal font-thasadith"
|
||||
:class="{ 'clicked-logo': isClicked }"
|
||||
@click="linkClicked"
|
||||
>
|
||||
Kamil<span class="logo-element">Craft</span>
|
||||
Kamil<span class="text-kamilcraft-green">Craft</span>
|
||||
</div>
|
||||
</router-link>
|
||||
<nav class="nav">
|
||||
</RouterLink>
|
||||
<nav>
|
||||
<button
|
||||
class="nav-btn"
|
||||
class="md:hidden text-3xl mx-5"
|
||||
:class="[ (isHomePage && !isClicked) ? 'text-white' : 'text-gray-600' ]"
|
||||
title="Menu"
|
||||
@click="clickMenu"
|
||||
>
|
||||
<font-awesome-icon
|
||||
@ -26,17 +29,27 @@
|
||||
/>
|
||||
</button>
|
||||
<ul
|
||||
class="site-menu"
|
||||
:class="{ 'menu-clicked': isClicked }"
|
||||
:class="[ isClicked ? 'absolute top-20 left-0 w-full z-10 text-3xl text-right bg-white shadow-lg' : 'hidden md:flex md:flex-row md:gap-9' ]"
|
||||
>
|
||||
<li
|
||||
v-for="menuItem in menuItems"
|
||||
:key="menuItem.slug"
|
||||
class="menu-element"
|
||||
:class="{ 'py-5 px-3 leading-6': isClicked }"
|
||||
@click="linkClicked"
|
||||
>
|
||||
<RouterLink :to="menuItem.uri">
|
||||
{{ menuItem.title }}
|
||||
<RouterLink
|
||||
v-slot="{ href, navigate, isActive }"
|
||||
:to="menuItem.uri"
|
||||
custom
|
||||
>
|
||||
<a
|
||||
:href="href"
|
||||
class="hover:text-kamilcraft-green"
|
||||
:class="[ (!isActive && isHomePage && !isClicked) ? 'text-white' : (isActive ? 'text-kamilcraft-green' : 'text-gray-500') ]"
|
||||
@click="navigate"
|
||||
>
|
||||
{{ menuItem.title }}
|
||||
</a>
|
||||
</RouterLink>
|
||||
</li>
|
||||
</ul>
|
||||
@ -45,7 +58,14 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
import { defineProps, ref, computed } from 'vue'
|
||||
|
||||
defineProps({
|
||||
isHomePage: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
|
||||
const menuItems = [
|
||||
{
|
||||
@ -88,127 +108,16 @@ function linkClicked() {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "scss/media";
|
||||
|
||||
.sub-page > .container {
|
||||
.nav-btn {
|
||||
color: #8D8D8D;
|
||||
}
|
||||
|
||||
.nav .site-menu .menu-element {
|
||||
a:not([class|=router-link]) {
|
||||
color: #8D8D8D;
|
||||
|
||||
&:hover {
|
||||
color: #A2CF00;
|
||||
}
|
||||
}
|
||||
}
|
||||
<style lang="scss">
|
||||
.clicked-menu {
|
||||
animation: bg-menu-animation 500ms forwards ease-in-out;
|
||||
}
|
||||
.container {
|
||||
display: flex;
|
||||
height: 80px;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
padding: 0;
|
||||
|
||||
div.logo {
|
||||
padding: 14px 20px 14px 40px;
|
||||
font-family: 'Thasadith', sans-serif;
|
||||
font-size: 2.5em;
|
||||
color: #5C5C5C;
|
||||
background-color: white;
|
||||
|
||||
.logo-element {
|
||||
color: #A2CF00;
|
||||
}
|
||||
}
|
||||
|
||||
&-menu-active {
|
||||
color: #8D8D8D;
|
||||
animation: container-active-menu 500ms forwards ease-in-out;
|
||||
|
||||
div.logo {
|
||||
animation: logo-active-menu 500ms forwards ease-in-out;
|
||||
}
|
||||
.nav {
|
||||
.nav-btn {
|
||||
color: #8D8D8D;
|
||||
}
|
||||
.site-menu .menu-element a {
|
||||
color: #8D8D8D;
|
||||
}
|
||||
}
|
||||
}
|
||||
.clicked-logo {
|
||||
animation: bg-logo-animation 500ms forwards ease-in-out;
|
||||
}
|
||||
.nav {
|
||||
margin-left: 20px;
|
||||
z-index: 10;
|
||||
.nav-btn {
|
||||
display: none;
|
||||
margin: 10px 25px;
|
||||
font-size: 2em;
|
||||
color: white;
|
||||
background: transparent !important;
|
||||
border: none;
|
||||
}
|
||||
.site-menu {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
|
||||
.menu-element {
|
||||
margin-right: 30px;
|
||||
|
||||
a {
|
||||
color: #EBEBEB;
|
||||
|
||||
&.router-link-exact-active, &:hover {
|
||||
color: #A2CF00;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include media-tablet {
|
||||
margin-left: 0;
|
||||
|
||||
.nav-btn {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.site-menu {
|
||||
display: none;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 80px;
|
||||
left: 0;
|
||||
background-color: white;
|
||||
box-shadow: 0 10px 10px rgba(0, 0, 0, .1);
|
||||
|
||||
.menu-element {
|
||||
width: 100%;
|
||||
padding: 5px 20px;
|
||||
text-align: right;
|
||||
font-size: 1.8em;
|
||||
line-height: 2em;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-clicked {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include media-tablet {
|
||||
.container {
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
@keyframes container-active-menu {
|
||||
@keyframes bg-menu-animation {
|
||||
0% {
|
||||
background-color: transparent;
|
||||
}
|
||||
@ -216,7 +125,7 @@ function linkClicked() {
|
||||
background-color: #EFEFEF;
|
||||
}
|
||||
}
|
||||
@keyframes logo-active-menu {
|
||||
@keyframes bg-logo-animation {
|
||||
0% {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
@ -1,42 +1,50 @@
|
||||
<template>
|
||||
<div class="projects">
|
||||
<section
|
||||
id="projects"
|
||||
class="max-w-screen-xl mx-auto px-6 xl:px-2 py-10"
|
||||
>
|
||||
<slot />
|
||||
<div class="container">
|
||||
<div class="grid items-start grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-5">
|
||||
<div
|
||||
v-for="project in projects"
|
||||
:key="project.title.slug"
|
||||
class="project"
|
||||
class="flex flex-col lg:grid grid-project relative bg-neutral-100 border border-gray-200 rounded-md"
|
||||
>
|
||||
<img
|
||||
v-if="project.images.small"
|
||||
class="project_image"
|
||||
class="project-image w-full h-[16rem] lg:w-[12.5rem] lg:h-[12.5rem] object-cover object-top rounded-t-md lg:rounded-bl-md lg:rounded-tr-none"
|
||||
:src="project.images.small"
|
||||
:alt="project.title"
|
||||
>
|
||||
<img
|
||||
v-else-if="project.images.large"
|
||||
class="project_image"
|
||||
class="project-image w-[12.5rem] h-[12.5rem] object-cover"
|
||||
:src="project.images.large"
|
||||
:alt="project.title"
|
||||
>
|
||||
<div class="project_content">
|
||||
<h3 class="project_title">
|
||||
{{ project.title }}
|
||||
</h3>
|
||||
<div class="project_release">
|
||||
{{ project.version }}
|
||||
</div>
|
||||
<div
|
||||
class="project_description"
|
||||
<div class="project-content relative p-3 h-[12.5rem] overflow-y-hidden after:absolute after:left-0 after:top-0 after:w-full after:h-full">
|
||||
<header class="pb-2">
|
||||
<h3 class="text-lg font-bold">
|
||||
{{ project.title }}
|
||||
</h3>
|
||||
<p class="text-sm">
|
||||
{{ project.project_version }}
|
||||
</p>
|
||||
</header>
|
||||
<p
|
||||
class="text-sm"
|
||||
v-html="markdownToText(project)"
|
||||
/>
|
||||
</div>
|
||||
<div class="more-button">
|
||||
<div
|
||||
class="project-button lg:flex lg:absolute lg:justify-center lg:items-center lg:left-0 lg:top-0 lg:w-full lg:h-full"
|
||||
>
|
||||
<BaseButton
|
||||
has-icon
|
||||
icon="eye"
|
||||
is-reverse
|
||||
class="btn"
|
||||
class="w-full lg:w-80 rounded-t-none lg:rounded-t-md"
|
||||
title="Pokaż więcej"
|
||||
@click="router.push({ name: 'Project', params: { id: project.id } })"
|
||||
>
|
||||
O projekcie
|
||||
@ -44,14 +52,14 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { defineProps, onMounted } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { useStore } from 'vuex'
|
||||
import BaseButton from './buttons/BaseButton'
|
||||
import BaseButton from '@/components/buttons/BaseButton'
|
||||
import { marked } from 'marked'
|
||||
|
||||
defineProps({
|
||||
@ -83,133 +91,47 @@ function markdownToText (project) {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "scss/media";
|
||||
<style lang="scss" scoped>
|
||||
@import 'scss/media';
|
||||
|
||||
.projects {
|
||||
padding-top: 45px;
|
||||
padding-bottom: 45px;
|
||||
.grid-project {
|
||||
animation: load-project 2s forwards;
|
||||
|
||||
.container {
|
||||
display: grid;
|
||||
align-items: flex-start;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-auto-rows: minmax(80px, auto);
|
||||
column-gap: 25px;
|
||||
row-gap: 20px;
|
||||
.project-image, .project-content {
|
||||
object-position: top center;
|
||||
}
|
||||
|
||||
.project {
|
||||
display: grid;
|
||||
position: relative;
|
||||
grid-template-areas: 'image content';
|
||||
grid-template-columns: 200px 1fr;
|
||||
background-color: #fafafa;
|
||||
border: 1px solid rgba(0, 0, 0, .025);
|
||||
border-radius: 5px;
|
||||
animation: load-project 2s forwards;
|
||||
.project-image {
|
||||
grid-area: image;
|
||||
}
|
||||
|
||||
.project_image {
|
||||
grid-area: image;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
object-fit: cover;
|
||||
object-position: top center;
|
||||
}
|
||||
.project-content {
|
||||
grid-area: content;
|
||||
|
||||
.project_content {
|
||||
grid-area: content;
|
||||
padding: 10px 15px;
|
||||
height: 200px;
|
||||
overflow-y: hidden;
|
||||
position: relative;
|
||||
|
||||
.project_title {
|
||||
font-size: 1.3em;
|
||||
font-weight: normal;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
.project_release {
|
||||
font-size: .9em;
|
||||
font-weight: bold;
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 60%, #fafafa 100%);
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: .9em;
|
||||
}
|
||||
&::after {
|
||||
background: linear-gradient(180deg, hsla(0, 0%, 100%, 0) 60%, #fafafa);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-tablet(true) {
|
||||
.project {
|
||||
.more-button {
|
||||
@screen lg {
|
||||
.grid-project {
|
||||
grid-template-areas: 'image content';
|
||||
grid-template-columns: 200px 1fr;
|
||||
|
||||
.project-button {
|
||||
.btn {
|
||||
display: none;
|
||||
}
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, .3);
|
||||
border-radius: 5px;
|
||||
|
||||
.btn {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.btn {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, .3);
|
||||
border-radius: 5px;
|
||||
|
||||
.btn {
|
||||
display: flex;
|
||||
color: white;
|
||||
border-style: none;
|
||||
&:hover {
|
||||
background-color: #385c8a;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-small {
|
||||
.project {
|
||||
display: block;
|
||||
|
||||
.project_image {
|
||||
width: 100%;
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
.project_content {
|
||||
height: 125px;
|
||||
}
|
||||
|
||||
.more-button {
|
||||
display: block;
|
||||
position: unset;
|
||||
margin-top: 8px;
|
||||
height: auto;
|
||||
left: unset;
|
||||
top: unset;
|
||||
|
||||
.btn {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
border-radius: 0;
|
||||
border-style: solid;
|
||||
background-color: rgba(255, 255, 255, .9);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -227,13 +149,4 @@ function markdownToText (project) {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-tablet {
|
||||
.projects .container {
|
||||
grid-template-columns: 1fr;
|
||||
padding: 25px;
|
||||
column-gap: 0;
|
||||
row-gap: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,12 +1,14 @@
|
||||
<template>
|
||||
<header :class="thisClass">
|
||||
<navigation />
|
||||
<Navigation :is-home-page="isHome" />
|
||||
<div
|
||||
v-if="isTitle"
|
||||
class="header-info"
|
||||
:class="{ 'header-info-home': isHome }"
|
||||
class="max-w-screen-header-content mx-auto text-center px-2.5 py-10"
|
||||
:class="{ 'text-white': isHome }"
|
||||
>
|
||||
<h1>{{ getTitle }}</h1>
|
||||
<h1 class="mb-6 relative font-light text-[2.5rem] leading-[3.5rem] after:block after:absolute after:w-24 after:h-0.5 after:bg-kamilcraft-green after:left-1/2 after:-ml-12">
|
||||
{{ getTitle }}
|
||||
</h1>
|
||||
<p v-if="isDescription && descriptionType === 'string'">
|
||||
{{ getDescription }}
|
||||
</p>
|
||||
@ -25,7 +27,7 @@
|
||||
import { computed } from 'vue'
|
||||
import { useStore } from 'vuex'
|
||||
import { useRoute } from 'vue-router'
|
||||
import Navigation from './NavigationHeader'
|
||||
import Navigation from '@/components/NavigationHeader'
|
||||
|
||||
const store = useStore()
|
||||
const route = useRoute()
|
||||
@ -42,38 +44,11 @@ const descriptionType = computed(() => {
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
<style scoped>
|
||||
.home-page {
|
||||
background: linear-gradient(237.74deg, #1199A5 0%, #436DA7 83%);
|
||||
}
|
||||
.sub-page {
|
||||
background-color: #EFEFEF;
|
||||
}
|
||||
.header-info {
|
||||
text-align: center;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
padding: 40px 10px;
|
||||
h1 {
|
||||
position: relative;
|
||||
font-weight: lighter;
|
||||
font-size: 2.5em;
|
||||
line-height: 1.5em;
|
||||
margin-bottom: 25px;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
height: 2px;
|
||||
background-color: #A2CF00;
|
||||
left: 50%;
|
||||
margin-left: -50px;
|
||||
}
|
||||
}
|
||||
&-home {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -32,8 +32,8 @@ defineProps({
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../../scss/btn";
|
||||
<style lang="scss">
|
||||
@import 'scss/btn';
|
||||
|
||||
.btn {
|
||||
@include button($has-icon: true);
|
||||
|
||||
@ -25,7 +25,7 @@ defineProps({
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../../scss/btn";
|
||||
@import 'scss/btn';
|
||||
|
||||
.btn {
|
||||
@include ghost-button();
|
||||
|
||||
@ -1,24 +1,27 @@
|
||||
<template>
|
||||
<div class="about">
|
||||
<div class="container">
|
||||
<div id="grid">
|
||||
<div id="grid-text">
|
||||
<h2 class="name">
|
||||
<div class="bg-neutral-50">
|
||||
<div class="max-w-screen-xl mx-auto px-6 xl:px-2 py-11">
|
||||
<div
|
||||
id="grid-columns"
|
||||
class="flex flex-col md:grid items-center"
|
||||
>
|
||||
<div id="grid-content">
|
||||
<h2 class="text-[2rem]">
|
||||
Kamil Niemczycki
|
||||
</h2>
|
||||
<div class="tagline">
|
||||
<div class="mb-2 text-[1.5rem]">
|
||||
Web Developer
|
||||
</div>
|
||||
<p>
|
||||
Jestem młodym i ambitnym inżynierem oprogramowania. Specjalizuję się w tworzeniu frontendów i backendów.
|
||||
W projektach wykorzystuję techologie oparte o PHP i JavaScript, tworząc skomplikowane i skalowalne aplikacje internetowe.
|
||||
</p>
|
||||
<div class="buttons">
|
||||
<div class="flex flex-col sm:flex-row justify-center md:justify-start py-6 gap-5">
|
||||
<BaseButton
|
||||
has-icon
|
||||
icon="portrait"
|
||||
is-reverse
|
||||
@click="scrollTo('.selected-projects')"
|
||||
@click="scrollTo('#projects')"
|
||||
>
|
||||
Wybrane projekty
|
||||
</BaseButton>
|
||||
@ -32,9 +35,10 @@
|
||||
</div>
|
||||
</div>
|
||||
<div id="grid-photo">
|
||||
<figure id="about-photo">
|
||||
<figure>
|
||||
<img
|
||||
:src="`${publicPath}assets/me.jpg`"
|
||||
class="mx-auto rounded-full object-cover w-[12.5rem] h-[12.5rem]"
|
||||
alt="Moje zdjęcie"
|
||||
>
|
||||
</figure>
|
||||
@ -45,7 +49,7 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import BaseButton from '../buttons/BaseButton'
|
||||
import BaseButton from '@/components/buttons/BaseButton'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
const router = useRouter()
|
||||
@ -59,97 +63,17 @@ function scrollTo(id) {
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "scss/media";
|
||||
#grid-columns {
|
||||
grid-template-columns: 1fr 1fr .8fr;
|
||||
grid-template-areas:
|
||||
'text text photo';
|
||||
}
|
||||
|
||||
.about {
|
||||
background-color: var(--gray-color) !important;
|
||||
#grid-content {
|
||||
grid-area: text;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding-top: 45px;
|
||||
padding-bottom: 45px;
|
||||
}
|
||||
h2.name {
|
||||
font-size: 2.1em;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
div.tagline {
|
||||
font-size: 1.6em;
|
||||
margin-bottom: .7em;
|
||||
}
|
||||
#grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr .8fr;
|
||||
grid-template-areas:
|
||||
'text text photo';
|
||||
align-items: center;
|
||||
|
||||
#grid-text {
|
||||
grid-area: text;
|
||||
text-align: left;
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
padding: 25px 0;
|
||||
|
||||
.btn {
|
||||
margin-right: 20px;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
@include media-tablet {
|
||||
margin: 0 auto 15px;
|
||||
|
||||
&:last-child {
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-small {
|
||||
justify-content: center;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
@include media-tablet {
|
||||
display: block;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-mobile() {
|
||||
.buttons .btn,
|
||||
.buttons a {
|
||||
min-width: unset;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
#grid-photo {
|
||||
grid-area: photo;
|
||||
|
||||
#about-photo img {
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
figure {
|
||||
text-align: center;
|
||||
img {
|
||||
object-fit: cover;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include media-small {
|
||||
#grid {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-areas:
|
||||
'text text'
|
||||
'photo photo';
|
||||
}
|
||||
}
|
||||
#grid-photo {
|
||||
grid-area: photo;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,20 +1,22 @@
|
||||
<template>
|
||||
<div class="experiences">
|
||||
<div class="container">
|
||||
<h2>Wykorzystywane technologie</h2>
|
||||
<p>
|
||||
<div>
|
||||
<div class="max-w-screen-xl mx-auto px-6 xl:px-2 py-11">
|
||||
<h2 class="text-[2rem] mb-2">
|
||||
Wykorzystywane technologie
|
||||
</h2>
|
||||
<p class="mb-5">
|
||||
Programowaniem stron internetowych zajmuję się najmłodszych lat, czyli od 2011 roku. Pierwsze projekty były
|
||||
proste i najczęściej na użytek własny. Jednakże, doświadczenie zebrane przez lata pomogło mi wyselekcjonować
|
||||
technologie, które wspomagają pisanie i rozwijanie oprogramowania.
|
||||
</p>
|
||||
<div class="skills">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-5">
|
||||
<div
|
||||
v-for="(skill, skillKey) in list"
|
||||
:key="skillKey"
|
||||
class="skill-group"
|
||||
class="p-4 bg-neutral-50 rounded-lg"
|
||||
>
|
||||
<header class="skill-header">
|
||||
<div class="tech-icons">
|
||||
<header>
|
||||
<div class="flex gap-2 text-3xl mb-2">
|
||||
<font-awesome-icon
|
||||
v-for="(icon, iconKey) in skill.icons"
|
||||
:key="iconKey"
|
||||
@ -24,13 +26,25 @@
|
||||
:title="icon.title"
|
||||
/>
|
||||
</div>
|
||||
<h3>{{ skill.header }}</h3>
|
||||
<h3 class="text-lg font-bold">
|
||||
{{ skill.header }}
|
||||
</h3>
|
||||
</header>
|
||||
<p v-if="skill.showMore.value || skill.description.length < 200">
|
||||
<p
|
||||
v-if="skill.showMore.value || skill.description.length < 200"
|
||||
class="text-sm"
|
||||
>
|
||||
{{ skill.description }}
|
||||
</p>
|
||||
<p v-else>
|
||||
{{ parseText(skill.description) }}... <a @click="changeMoreStatus(skill)">Więcej</a>
|
||||
<p
|
||||
v-else
|
||||
class="text-sm"
|
||||
>
|
||||
{{ parseText(skill.description) }}...
|
||||
<a
|
||||
class="text-neutral-500 hover:text-neutral-700 hover:underline cursor-pointer"
|
||||
@click="changeMoreStatus(skill)"
|
||||
>Więcej</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -160,74 +174,7 @@ function changeMoreStatus(skill) {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "scss/media";
|
||||
|
||||
.experiences {
|
||||
.container {
|
||||
padding-top: 45px;
|
||||
padding-bottom: 45px;
|
||||
|
||||
.skills {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
column-gap: 20px;
|
||||
row-gap: 20px;
|
||||
margin-top: 15px;
|
||||
|
||||
.skill-group {
|
||||
background-color: #fafafa;
|
||||
padding: 15px;
|
||||
border-radius: 5px;
|
||||
|
||||
.tech-icons {
|
||||
font-size: 1.8em;
|
||||
margin-bottom: 3px;
|
||||
|
||||
& > svg[class*='icon'] {
|
||||
margin-right: 10px;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
h3 {
|
||||
font-size: 1.2em;
|
||||
line-height: 1.6em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.skill-list {
|
||||
margin-block: auto;
|
||||
padding-inline: inherit;
|
||||
margin-left: 5px;
|
||||
list-style-type: initial;
|
||||
}
|
||||
p {
|
||||
font-size: .9em;
|
||||
|
||||
a {
|
||||
color: #8D8D8D;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, .03);
|
||||
}
|
||||
}
|
||||
|
||||
@include media-small {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
@include media-tablet {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
@include media-mobile {
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
<style scoped>
|
||||
.icon-js {
|
||||
color: #F1DE4F;
|
||||
}
|
||||
|
||||
@ -1,13 +1,20 @@
|
||||
<template>
|
||||
<section class="selected-projects">
|
||||
<section class="bg-neutral-50">
|
||||
<projects :projects="select_projects">
|
||||
<div class="header-container">
|
||||
<h2>Wybrane projekty</h2>
|
||||
<p>Poniżej przedstawiam Państwu, wybraną przeze mnie, listę projektów.</p>
|
||||
</div>
|
||||
<header>
|
||||
<h2 class="text-[2rem] mb-2">
|
||||
Wybrane projekty
|
||||
</h2>
|
||||
<p class="mb-5">
|
||||
Poniżej przedstawiam Państwu, wybraną przeze mnie, listę projektów.
|
||||
</p>
|
||||
</header>
|
||||
</projects>
|
||||
<div class="more-button">
|
||||
<GhostButton @click="router.push('projects')">
|
||||
<div class="w-full -translate-y-5 pb-5 more-button">
|
||||
<GhostButton
|
||||
class="mx-auto"
|
||||
@click="router.push('projects')"
|
||||
>
|
||||
ZOBACZ WIĘCEJ
|
||||
</GhostButton>
|
||||
</div>
|
||||
@ -17,8 +24,8 @@
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import Projects from '../SelectedProjects'
|
||||
import GhostButton from '../buttons/GhostButton'
|
||||
import Projects from '@/components/SelectedProjects'
|
||||
import GhostButton from '@/components/buttons/GhostButton'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
|
||||
@ -1,91 +1,99 @@
|
||||
<template>
|
||||
<div class="contact_container">
|
||||
<div
|
||||
v-if="hasMessageError"
|
||||
class="message message_error"
|
||||
>
|
||||
{{ messageError }}
|
||||
</div>
|
||||
<div
|
||||
v-if="hasMessageOkStatus"
|
||||
class="message message_ok"
|
||||
>
|
||||
{{ messageOk }}
|
||||
</div>
|
||||
<header class="container_head">
|
||||
Formularz kontaktowy:
|
||||
<div
|
||||
id="contact-form"
|
||||
class="contact_container w-full bg-neutral-100 rounded-md border border-gray-200 md:max-w-[500px] p-2 shadow"
|
||||
>
|
||||
<header class="mb-1.5">
|
||||
<h3 class="text-xl">
|
||||
Formularz kontaktowy
|
||||
</h3>
|
||||
</header>
|
||||
<form
|
||||
id="form-point"
|
||||
class="flex flex-col gap-3 justify-start items-start"
|
||||
@submit="formSubmit"
|
||||
>
|
||||
<label
|
||||
class="label-info"
|
||||
:class="{ 'label-error': isEmailError }"
|
||||
for="email"
|
||||
<div
|
||||
v-if="hasMessageError"
|
||||
class="w-full p-2 bg-red-200 text-red-500 text-sm border border-red-300 rounded-md"
|
||||
>
|
||||
E-mail:
|
||||
</label>
|
||||
<input
|
||||
id="email"
|
||||
v-model="emailValue"
|
||||
class="contact_input"
|
||||
:class="{ 'contact_input-error': isEmailError }"
|
||||
type="text"
|
||||
name="email"
|
||||
placeholder="przemek.kowalski@gmail.com"
|
||||
{{ messageError }}
|
||||
</div>
|
||||
<div
|
||||
v-else-if="hasMessageOkStatus"
|
||||
class="w-full p-2 bg-[#27ae60] text-white text-sm border border-lime-600 rounded-md shadow"
|
||||
>
|
||||
<span
|
||||
v-if="isEmailError"
|
||||
class="error-message"
|
||||
>
|
||||
E-mail musi być poprawny, np. przemek.kowalski@gmail.com
|
||||
</span>
|
||||
<label
|
||||
class="label-info"
|
||||
:class="{ 'label-error': isMessageError }"
|
||||
for="message"
|
||||
>
|
||||
Wiadomość:
|
||||
</label>
|
||||
<textarea
|
||||
id="message"
|
||||
v-model="messageValue"
|
||||
class="contact_input"
|
||||
:class="{ 'contact_input-error': isMessageError }"
|
||||
name="message"
|
||||
placeholder="Chciałbym zlecić wykonanie strony..."
|
||||
/>
|
||||
<span
|
||||
v-if="isMessageError"
|
||||
class="error-message"
|
||||
>
|
||||
Wiadomość musi zawierać przynajmniej 3 znaki!
|
||||
</span>
|
||||
<label
|
||||
class="label-info"
|
||||
:class="{ 'label-error': isSenderError }"
|
||||
for="sender"
|
||||
>
|
||||
Podpis nadawcy:
|
||||
</label>
|
||||
<input
|
||||
id="sender"
|
||||
v-model="senderValue"
|
||||
class="contact_input"
|
||||
:class="{ 'contact_input-error': isSenderError }"
|
||||
type="text"
|
||||
name="sender"
|
||||
placeholder="np. Przemek Kowalski"
|
||||
>
|
||||
<span
|
||||
v-if="isSenderError"
|
||||
class="error-message"
|
||||
>
|
||||
Podpis musi zawierać przynajmniej 3 znaki!
|
||||
</span>
|
||||
{{ messageOk }}
|
||||
</div>
|
||||
<div class="flex flex-col gap-1 w-full">
|
||||
<label
|
||||
class="text-gray-500"
|
||||
for="message"
|
||||
>
|
||||
W czym mogę pomóc?
|
||||
</label>
|
||||
<textarea
|
||||
id="message"
|
||||
v-model="messageValue"
|
||||
class="w-full max-w-full min-h-[150px] px-2.5 py-2 border-b-2 border-neutral-300 rounded-md focus:border-neutral-400 hover:border-neutral-500 outline-none"
|
||||
:class="[ isMessageError ? 'border-red-400 text-red-400 placeholder-red-300' : 'text-gray-900 placeholder-gray-400' ]"
|
||||
name="message"
|
||||
placeholder="Chciałbym zlecić wykonanie strony..."
|
||||
/>
|
||||
<span
|
||||
v-if="isMessageError"
|
||||
class="text-red-400"
|
||||
>
|
||||
Wiadomość musi zawierać przynajmniej 3 znaki!
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex flex-col gap-1 w-full">
|
||||
<label
|
||||
class="text-gray-500"
|
||||
for="email"
|
||||
>
|
||||
Gdzie mam odesłać odpowiedź?
|
||||
</label>
|
||||
<input
|
||||
id="email"
|
||||
v-model="emailValue"
|
||||
class="w-full px-2.5 py-2 border-b-2 border-neutral-300 rounded-md focus:border-neutral-400 hover:border-neutral-500 outline-none"
|
||||
:class="[ isEmailError ? 'border-red-400 text-red-400 placeholder-red-300' : 'text-gray-900 placeholder-gray-400' ]"
|
||||
type="text"
|
||||
name="email"
|
||||
placeholder="Twój adres e-mail"
|
||||
>
|
||||
<span
|
||||
v-if="isEmailError"
|
||||
class="text-red-400"
|
||||
>
|
||||
E-mail musi być poprawny, np. przemek.kowalski@gmail.com
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex flex-col gap-1 w-full">
|
||||
<label
|
||||
class="text-gray-500"
|
||||
for="sender"
|
||||
>
|
||||
Podpis
|
||||
</label>
|
||||
<input
|
||||
id="sender"
|
||||
v-model="senderValue"
|
||||
class="w-full px-2.5 py-2 border-b-2 border-neutral-300 rounded-md focus:border-neutral-400 hover:border-neutral-500 outline-none"
|
||||
:class="[ isSenderError ? 'border-red-400 text-red-400 placeholder-red-300' : 'text-gray-900 placeholder-gray-400' ]"
|
||||
type="text"
|
||||
name="sender"
|
||||
>
|
||||
<span
|
||||
v-if="isSenderError"
|
||||
class="text-red-400"
|
||||
>
|
||||
Podpis musi zawierać przynajmniej 3 znaki!
|
||||
</span>
|
||||
</div>
|
||||
<BaseButton
|
||||
is-reverse
|
||||
class="py-1 w-full"
|
||||
:disabled="isButtonDisabled"
|
||||
>
|
||||
Wyślij
|
||||
@ -95,7 +103,7 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import BaseButton from '../../buttons/BaseButton'
|
||||
import BaseButton from '@/components/buttons/BaseButton'
|
||||
import { ref, reactive, watch, computed } from 'vue'
|
||||
|
||||
function emailValidate (mailObj) {
|
||||
@ -199,112 +207,21 @@ function formSubmit(event) {
|
||||
buttonDisabled.value = false
|
||||
})
|
||||
}
|
||||
|
||||
scrollTo('#contact-form')
|
||||
}
|
||||
|
||||
function scrollTo(id) {
|
||||
document.querySelector(id).scrollIntoView({
|
||||
behavior: 'smooth'
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "scss/media";
|
||||
|
||||
.contact_container {
|
||||
flex-basis: 500px;
|
||||
|
||||
#form-point {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
@screen md {
|
||||
.contact_container {
|
||||
flex-basis: 500px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 97%;
|
||||
margin: 0 20px 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.container_head {
|
||||
padding: 10px;
|
||||
line-height: 1.6em;
|
||||
font-size: 1.3em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.contact_container {
|
||||
.label-info {
|
||||
width: 97%;
|
||||
padding-bottom: 5px;
|
||||
color: #7a7a7a;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
width: 97%;
|
||||
padding: 5px 0 10px;
|
||||
color: #d44950;
|
||||
}
|
||||
|
||||
input, textarea {
|
||||
width: 97%;
|
||||
max-width: 97%;
|
||||
border: 0;
|
||||
border-bottom: 2px solid #c9c9c9;
|
||||
padding: 10px 10px 8px;
|
||||
font-size: 1em;
|
||||
font-family: var(--font-family);
|
||||
line-height: 1.3em;
|
||||
margin-bottom: 15px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.contact_input::placeholder {
|
||||
color: #bdbdbd;
|
||||
}
|
||||
|
||||
.contact_input:focus, .contact_input:focus {
|
||||
outline: none;
|
||||
border-color: black;
|
||||
}
|
||||
|
||||
textarea.contact_input {
|
||||
max-width: 97%;
|
||||
min-width: 97%;
|
||||
min-height: 150px;
|
||||
}
|
||||
|
||||
input.contact_input-error, textarea.contact_input-error {
|
||||
border-color: #d44950;
|
||||
color: #d44950;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.contact_input-error::placeholder, .contact_input-error::placeholder {
|
||||
color: #d7626a;
|
||||
}
|
||||
|
||||
input[disabled].contact_input {
|
||||
background-color: #cdcdcd;
|
||||
border-color: gray;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.message {
|
||||
display: none;
|
||||
margin: 5px;
|
||||
padding: 8px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.message_ok, .message_error {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.message_ok {
|
||||
background-color: #4CAF50;
|
||||
border: 1px solid #387d3b;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.message_error {
|
||||
background-color: #f8d7da;
|
||||
border: 1px solid #f5c6cb;
|
||||
color: #721c24;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,82 +1,92 @@
|
||||
<template>
|
||||
<div class="contact_info">
|
||||
<header class="info_head">
|
||||
Inne formy kontaktu:
|
||||
<div class="contact_info w-full bg-neutral-100 rounded-md border border-gray-200 md:max-w-[410px] p-2 shadow">
|
||||
<header class="mb-1.5">
|
||||
<h3 class="text-xl">
|
||||
Inne formy kontaktu:
|
||||
</h3>
|
||||
</header>
|
||||
<div class="contact_element">
|
||||
<img
|
||||
class="contact_element_icon"
|
||||
src="/assets/img/instagram.jpg"
|
||||
alt="Instagram"
|
||||
>
|
||||
<span
|
||||
id="instagram"
|
||||
class="contact_element_text"
|
||||
>
|
||||
<a
|
||||
href="https://www.instagram.com/nikcamii/"
|
||||
target="_blank"
|
||||
rel="noopener nofollow noreferrer"
|
||||
>Instagram: @NiKCamii</a>
|
||||
</span>
|
||||
</div>
|
||||
<div class="contact_element">
|
||||
<img
|
||||
class="contact_element_icon"
|
||||
src="/assets/img/facebook.jpg"
|
||||
alt="Facebook"
|
||||
>
|
||||
<span
|
||||
id="facebook"
|
||||
class="contact_element_text"
|
||||
>
|
||||
<a
|
||||
href="https://www.facebook.com/nikcamii/"
|
||||
target="_blank"
|
||||
rel="noopener nofollow noreferrer"
|
||||
>Facebook: @NiKCamii</a>
|
||||
</span>
|
||||
</div>
|
||||
<div class="contact_element">
|
||||
<img
|
||||
class="contact_element_icon"
|
||||
src="/assets/img/twitter.jpg"
|
||||
alt="Twitter"
|
||||
>
|
||||
<span
|
||||
id="twitter"
|
||||
class="contact_element_text"
|
||||
>
|
||||
<a
|
||||
href="https://twitter.com/nikcamii"
|
||||
target="_blank"
|
||||
rel="noopener nofollow noreferrer"
|
||||
>Twitter: @NiKCamii</a>
|
||||
</span>
|
||||
</div>
|
||||
<div class="contact_element">
|
||||
<img
|
||||
class="contact_element_icon"
|
||||
src="/assets/img/gg.png"
|
||||
alt="Gadu-Gadu"
|
||||
>
|
||||
<span
|
||||
id="gg"
|
||||
class="contact_element_text"
|
||||
>GG: 38429969</span>
|
||||
</div>
|
||||
<div class="contact_element">
|
||||
<img
|
||||
class="contact_element_icon"
|
||||
src="/assets/img/user.jpg"
|
||||
alt="E-mail"
|
||||
>
|
||||
<span
|
||||
id="mailto"
|
||||
class="contact_element_text"
|
||||
>
|
||||
<a href="mailto:contact@kamilcraft.com">Email: contact@kamilcraft.com</a>
|
||||
</span>
|
||||
<div class="flex flex-col gap-2.5 justify-start items-start">
|
||||
<div class="flex items-center gap-2 w-full rounded-md p-1.5 border border-neutral-200 bg-white">
|
||||
<img
|
||||
class="rounded-full w-12 h-12 object-contain border border-neutral-200"
|
||||
src="/assets/img/instagram.jpg"
|
||||
alt="Instagram"
|
||||
>
|
||||
<span
|
||||
id="instagram"
|
||||
class="font-bold"
|
||||
>
|
||||
<a
|
||||
href="https://www.instagram.com/nikcamii/"
|
||||
target="_blank"
|
||||
rel="noopener nofollow noreferrer"
|
||||
class="hover:underline"
|
||||
>Instagram: @NiKCamii</a>
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 w-full rounded-md p-1.5 border border-neutral-200 bg-white">
|
||||
<img
|
||||
class="rounded-full w-12 h-12 object-contain border border-neutral-200"
|
||||
src="/assets/img/facebook.jpg"
|
||||
alt="Facebook"
|
||||
>
|
||||
<span
|
||||
id="facebook"
|
||||
class="font-bold"
|
||||
>
|
||||
<a
|
||||
href="https://www.facebook.com/nikcamii/"
|
||||
target="_blank"
|
||||
rel="noopener nofollow noreferrer"
|
||||
class="hover:text-gray-700 hover:underline"
|
||||
>Facebook: @NiKCamii</a>
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 w-full rounded-md p-1.5 border border-neutral-200 bg-white">
|
||||
<img
|
||||
class="rounded-full w-12 h-12 object-contain border border-neutral-200"
|
||||
src="/assets/img/twitter.jpg"
|
||||
alt="Twitter"
|
||||
>
|
||||
<span
|
||||
id="twitter"
|
||||
class="font-bold"
|
||||
>
|
||||
<a
|
||||
href="https://twitter.com/nikcamii"
|
||||
target="_blank"
|
||||
rel="noopener nofollow noreferrer"
|
||||
class="hover:text-gray-700 hover:underline"
|
||||
>Twitter: @NiKCamii</a>
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 w-full rounded-md p-1.5 border border-neutral-200 bg-white">
|
||||
<img
|
||||
class="rounded-full w-12 h-12 object-contain border border-neutral-200"
|
||||
src="/assets/img/gg.png"
|
||||
alt="Gadu-Gadu"
|
||||
>
|
||||
<span
|
||||
id="gg"
|
||||
class="font-bold"
|
||||
>GG: 38429969</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 w-full rounded-md p-1.5 border border-neutral-200 bg-white">
|
||||
<img
|
||||
class="rounded-full w-12 h-12 object-contain border border-neutral-200"
|
||||
src="/assets/img/user.jpg"
|
||||
alt="E-mail"
|
||||
>
|
||||
<span
|
||||
id="mailto"
|
||||
class="font-bold"
|
||||
>
|
||||
<a
|
||||
href="mailto:contact@kamilcraft.com"
|
||||
class="hover:text-gray-700 hover:underline"
|
||||
>Email: contact@kamilcraft.com</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -84,51 +94,18 @@
|
||||
<style lang="scss" scoped>
|
||||
@import "scss/media";
|
||||
|
||||
.contact_info {
|
||||
flex-basis: 410px;
|
||||
@screen md {
|
||||
.contact_info {
|
||||
flex-basis: 410px;
|
||||
}
|
||||
}
|
||||
|
||||
.info_head {
|
||||
padding: 10px;
|
||||
line-height: 1.6em;
|
||||
font-size: 1.3em;
|
||||
font-weight: bold;
|
||||
}
|
||||
a {
|
||||
color: inherit;
|
||||
|
||||
.contact_element {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 5px;
|
||||
background-color: #fff;
|
||||
border-top: 1px solid #e6e6e6;
|
||||
border-bottom: 1px solid #e6e6e6;
|
||||
margin-bottom: 5px;
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
-webkit-text-fill-color: #444444;
|
||||
color: #444444;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
&_icon {
|
||||
border-radius: 50%;
|
||||
border: 1px solid #e2e2e2;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-right: 10px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
&_text{
|
||||
padding-top: 2px;
|
||||
line-height: 1.6em;
|
||||
font-size: 1.1em;
|
||||
font-weight: bold;
|
||||
&:hover {
|
||||
-webkit-text-fill-color: #374151;
|
||||
color: #374151;
|
||||
}
|
||||
}
|
||||
|
||||
@ -153,11 +130,4 @@
|
||||
#gg {
|
||||
color: #ffa214;
|
||||
}
|
||||
|
||||
@include media-tablet {
|
||||
#instagram, #facebook, #twitter, #mailto, #gg {
|
||||
font-size: 1em;
|
||||
line-height: 1.2em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
import { store } from './store'
|
||||
import App from '@/App.vue'
|
||||
import router from '@/router'
|
||||
import { store } from '@/store'
|
||||
// import VueMeta from 'vue-meta'
|
||||
|
||||
import '../scss/default.scss'
|
||||
import '../css/index.css'
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
import { fas } from '@fortawesome/free-solid-svg-icons'
|
||||
import { fab } from '@fortawesome/free-brands-svg-icons'
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
import Home from '../views/HomeView'
|
||||
import About from '../views/AboutView'
|
||||
import Projects from '../views/ProjectsView'
|
||||
import Project from '../views/ProjectView'
|
||||
import Contact from '../views/ContactView'
|
||||
import NotFound from '../views/NotFound'
|
||||
import Home from '@/views/HomeView'
|
||||
import About from '@/views/AboutView'
|
||||
import Projects from '@/views/ProjectsView'
|
||||
import Project from '@/views/ProjectView'
|
||||
import Contact from '@/views/ContactView'
|
||||
import NotFound from '@/views/NotFound'
|
||||
|
||||
const mainTitle = 'kamilcraft.com'
|
||||
|
||||
@ -77,21 +77,6 @@ const router = createRouter({
|
||||
return { left: 0, top: 0 }
|
||||
}
|
||||
}
|
||||
/*scrollBehavior (to, from, savedPosition) {
|
||||
if (savedPosition) {
|
||||
return savedPosition
|
||||
} else if (to.hash) {
|
||||
return new Promise(resolve => {
|
||||
setTimeout(() => {
|
||||
resolve({
|
||||
selector: to.hash
|
||||
}, 1000)
|
||||
})
|
||||
})
|
||||
} else {
|
||||
return { x: 0, y: 0 }
|
||||
}
|
||||
}*/
|
||||
})
|
||||
|
||||
const title = ' :: ' + mainTitle
|
||||
|
||||
@ -1,39 +1,45 @@
|
||||
<template>
|
||||
<section id="about">
|
||||
<div class="container">
|
||||
<p>
|
||||
<strong>Nazywam się Kamil Niemczycki. Jestem młodym i ambitnym inżynierem oprogramowania. Specjalizuję się w tworzeniu frontendów i backendów.
|
||||
W projektach wykorzystuję techologie oparte o PHP i JavaScript, tworząc skomplikowane i skalowalne aplikacje internetowe.</strong>
|
||||
</p>
|
||||
<h2>Studia</h2>
|
||||
<p>
|
||||
Jestem absolwentem Państwowej Wyższej Szkoły Zawodowej im. Witelona w Legnicy. Studiowałem na kierunku <em>Informatyka</em> o specjalności <em>Programowanie Aplikacji Mobilnych i Internetowych.</em>
|
||||
</p>
|
||||
<p>
|
||||
Podczas studiów zdobyłem niezbędną wiedzę z zakresu projektowania, wdrażania i rozwoju aplikacji internetowych, mobilnych i desktopowych.
|
||||
Zdobyłem także umiejętności pracy w zespole, które owocują tworzeniem merytorycznej dyskusji na temat części lub całości projektu.
|
||||
</p>
|
||||
<h3>Kursy</h3>
|
||||
<p>
|
||||
W ramach studiów uzyskałem zaświadczenie dotyczące ukończenia kursu:
|
||||
<strong><a
|
||||
:href="publicPath + 'download/certyfikat-laravel.pdf'"
|
||||
target="_blank"
|
||||
rel="noopener nofollow noreferrer"
|
||||
>
|
||||
Architektura aplikacji internetowych opartych o framework Laravel</a></strong>.
|
||||
</p>
|
||||
<p>
|
||||
Umożliwiło mi to szersze spojrzenie na możliwości jakie daje nam Laravel i wzbogaconie poprzednio zdobytej
|
||||
wiedzy o nowe doświadczenia.
|
||||
</p>
|
||||
<h2>Moje zainteresowania</h2>
|
||||
<p>
|
||||
W wolnym czasie przyjmuje małe zlecenia na strony lub serwisy internetowe. Uczę się nowych języków
|
||||
programowania lub frameworków w znanych mi już technologiach. Hobbistycznie, tworzę także rozwiązania do
|
||||
problemów przy prywatnych projektach.
|
||||
</p>
|
||||
</div>
|
||||
<section class="max-w-screen-xl mx-auto px-6 xl:px-2 py-11">
|
||||
<p class="font-bold">
|
||||
Nazywam się Kamil Niemczycki. Jestem młodym i ambitnym inżynierem oprogramowania. Specjalizuję się w tworzeniu frontendów i backendów.
|
||||
W projektach wykorzystuję techologie oparte o PHP i JavaScript, tworząc skomplikowane i skalowalne aplikacje internetowe.
|
||||
</p>
|
||||
<h2 class="text-[2rem]">
|
||||
Studia
|
||||
</h2>
|
||||
<p>
|
||||
Jestem absolwentem Państwowej Wyższej Szkoły Zawodowej im. Witelona w Legnicy. Studiowałem na kierunku <em>Informatyka</em> o specjalności <em>Programowanie Aplikacji Mobilnych i Internetowych.</em>
|
||||
</p>
|
||||
<p>
|
||||
Podczas studiów zdobyłem niezbędną wiedzę z zakresu projektowania, wdrażania i rozwoju aplikacji internetowych, mobilnych i desktopowych.
|
||||
Zdobyłem także umiejętności pracy w zespole, które owocują tworzeniem merytorycznej dyskusji na temat części lub całości projektu.
|
||||
</p>
|
||||
<h3 class="text-[1.5rem]">
|
||||
Kursy
|
||||
</h3>
|
||||
<p>
|
||||
W ramach studiów uzyskałem zaświadczenie dotyczące ukończenia kursu:
|
||||
<a
|
||||
:href="publicPath + 'download/certyfikat-laravel.pdf'"
|
||||
class="text-gray-500 underline hover:text-kamilcraft-green hover:no-underline"
|
||||
target="_blank"
|
||||
rel="noopener nofollow noreferrer"
|
||||
>
|
||||
Architektura aplikacji internetowych opartych o framework Laravel
|
||||
</a>.
|
||||
</p>
|
||||
<p>
|
||||
Umożliwiło mi to szersze spojrzenie na możliwości jakie daje nam Laravel i wzbogaconie poprzednio zdobytej
|
||||
wiedzy o nowe doświadczenia.
|
||||
</p>
|
||||
<h2 class="text-[2rem]">
|
||||
Moje zainteresowania
|
||||
</h2>
|
||||
<p>
|
||||
W wolnym czasie przyjmuje małe zlecenia na strony lub serwisy internetowe. Uczę się nowych języków
|
||||
programowania lub frameworków w znanych mi już technologiach. Hobbistycznie, tworzę także rozwiązania do
|
||||
problemów przy prywatnych projektach.
|
||||
</p>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
@ -60,32 +66,3 @@ onUnmounted(() => {
|
||||
store.commit('resetHeaderDescription')
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
section#about {
|
||||
padding: 45px 0;
|
||||
background-color: #fafafa !important;
|
||||
|
||||
h2 {
|
||||
margin-top: 25px;
|
||||
|
||||
&:first-of-type {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.3em;
|
||||
margin-top: 8px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #8D8D8D;
|
||||
|
||||
&:hover {
|
||||
color: #A2CF00;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,9 +1,7 @@
|
||||
<template>
|
||||
<section class="contact">
|
||||
<div class="container">
|
||||
<MailContact />
|
||||
<OtherContact />
|
||||
</div>
|
||||
<section class="flex flex-col px-3 py-6 md:flex-row items-start justify-center mx-auto gap-5">
|
||||
<MailContact />
|
||||
<OtherContact />
|
||||
</section>
|
||||
</template>
|
||||
|
||||
@ -11,8 +9,8 @@
|
||||
import { onMounted } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { useStore } from 'vuex'
|
||||
import MailContact from '../components/sections/contacts/MailContact'
|
||||
import OtherContact from '../components/sections/contacts/OtherContact'
|
||||
import MailContact from '@/components/sections/contacts/MailContact'
|
||||
import OtherContact from '@/components/sections/contacts/OtherContact'
|
||||
|
||||
const route = useRoute()
|
||||
const store = useStore()
|
||||
@ -25,49 +23,3 @@ onMounted(() => {
|
||||
store.commit('setHeader', header)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "scss/media";
|
||||
|
||||
.contact {
|
||||
padding: 25px 0;
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.contact_container, .contact_info {
|
||||
margin: 10px;
|
||||
max-width: 500px;
|
||||
background-color: #eaeaea;
|
||||
border: 2px solid #dadada;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 0 5px rgba(0, 0, 0, .2);
|
||||
}
|
||||
|
||||
@include media-tablet {
|
||||
.container {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
|
||||
.contact_container, .contact_info {
|
||||
margin: 0 auto 25px;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@include media-mobile {
|
||||
.container {
|
||||
padding: 0 10px;
|
||||
|
||||
.contact_container {
|
||||
max-width: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -10,9 +10,9 @@
|
||||
import { onMounted, onUnmounted } from 'vue'
|
||||
import { useStore } from 'vuex'
|
||||
import { useRoute } from 'vue-router'
|
||||
import About from '../components/sections/AboutSection'
|
||||
import ExperiencesSection from '../components/sections/ExperiencesSection'
|
||||
import FavoriteProjects from '../components/sections/FavoriteProjects'
|
||||
import About from '@/components/sections/AboutSection'
|
||||
import ExperiencesSection from '@/components/sections/ExperiencesSection'
|
||||
import FavoriteProjects from '@/components/sections/FavoriteProjects'
|
||||
|
||||
const store = useStore()
|
||||
const route = useRoute()
|
||||
|
||||
@ -1,74 +1,78 @@
|
||||
<template>
|
||||
<section
|
||||
v-if="isLoaded"
|
||||
class="project"
|
||||
class="max-w-screen-xl mx-auto px-6 xl:px-2 py-8"
|
||||
>
|
||||
<header class="project_header">
|
||||
<h1>{{ project.title }}</h1>
|
||||
<ul class="project_info">
|
||||
<li class="info_text">
|
||||
<font-awesome-icon
|
||||
class="icon"
|
||||
<header class="text-neutral-800 font-roboto">
|
||||
<h1 class="text-center text-4xl font-light pb-5">
|
||||
{{ project.title }}
|
||||
</h1>
|
||||
<ul class="grid grid-cols-2 gap-3 md:flex md:gap-5 justify-center list-none">
|
||||
<li class="flex items-center gap-2">
|
||||
<FontAwesomeIcon
|
||||
class="w-4"
|
||||
:icon="['far', 'clock']"
|
||||
/>
|
||||
<span>{{ project.release_date }}</span>
|
||||
</li>
|
||||
<li class="info_text">
|
||||
<font-awesome-icon
|
||||
class="icon"
|
||||
<li class="flex items-center gap-2">
|
||||
<FontAwesomeIcon
|
||||
class="w-4"
|
||||
:icon="['far', 'user']"
|
||||
/>
|
||||
<span>{{ project.author }}</span>
|
||||
</li>
|
||||
<li class="info_text">
|
||||
<font-awesome-icon
|
||||
class="icon"
|
||||
<li class="flex items-center gap-2">
|
||||
<FontAwesomeIcon
|
||||
class="w-4"
|
||||
:icon="['far', 'folder']"
|
||||
/>
|
||||
<span>{{ getCategoryName(project.categories) }}</span>
|
||||
</li>
|
||||
<li class="info_text">
|
||||
<font-awesome-icon
|
||||
class="icon"
|
||||
<li class="flex items-center gap-2">
|
||||
<FontAwesomeIcon
|
||||
class="w-4"
|
||||
:icon="['fas', 'code-branch']"
|
||||
/>
|
||||
<span>{{ project.project_version }}</span>
|
||||
</li>
|
||||
<li
|
||||
v-if="project.project_url"
|
||||
class="info_text"
|
||||
class="flex items-center gap-2"
|
||||
>
|
||||
<font-awesome-icon
|
||||
class="icon"
|
||||
<FontAwesomeIcon
|
||||
class="w-4"
|
||||
:icon="['fas', 'link']"
|
||||
/>
|
||||
<span><a
|
||||
:href="project.project_url"
|
||||
target="_blank"
|
||||
rel="noopener nofollow noreferrer"
|
||||
>Link</a></span>
|
||||
<span>
|
||||
<a
|
||||
:href="project.project_url"
|
||||
target="_blank"
|
||||
rel="noopener nofollow noreferrer"
|
||||
>
|
||||
Link
|
||||
</a>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</header>
|
||||
<div class="container">
|
||||
<component
|
||||
:is="`figure`"
|
||||
class="project-photo"
|
||||
>
|
||||
<div class="pt-5">
|
||||
<figure class="w-full shadow-xl">
|
||||
<img
|
||||
:src="`${project.images.large}`"
|
||||
class="block max-h-[31.25rem] object-cover"
|
||||
:src="project.images.large"
|
||||
:alt="project.title"
|
||||
>
|
||||
</component>
|
||||
</figure>
|
||||
<div
|
||||
class="content"
|
||||
class="markdown mt-9"
|
||||
v-html="markdownToHtml"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
<div
|
||||
v-else
|
||||
class="loading"
|
||||
class="flex items-center"
|
||||
>
|
||||
<div class="loading_animation" />
|
||||
</div>
|
||||
@ -127,143 +131,57 @@ function loadProject(id) {
|
||||
<style lang="scss">
|
||||
@import "scss/default";
|
||||
|
||||
.loading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
a {
|
||||
@apply text-neutral-800 hover:text-kamilcraft-green;
|
||||
}
|
||||
|
||||
.project {
|
||||
.project_header {
|
||||
@extend .container;
|
||||
text-align: center;
|
||||
margin-bottom: 25px;
|
||||
.markdown {
|
||||
h1 {
|
||||
@apply text-4xl;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.2em;
|
||||
font-weight: lighter;
|
||||
line-height: 2.4em;
|
||||
}
|
||||
h2 {
|
||||
@apply text-[2rem];
|
||||
}
|
||||
|
||||
.project_info {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
justify-content: center;
|
||||
h3 {
|
||||
@apply text-[1.5rem];
|
||||
}
|
||||
|
||||
.info_text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
p, ol li, ul li {
|
||||
@apply text-lg;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 2em;
|
||||
}
|
||||
p + ol, p + ul, p + blockquote {
|
||||
@apply -mb-2.5;
|
||||
}
|
||||
|
||||
span {
|
||||
font-weight: lighter;
|
||||
white-space: nowrap;
|
||||
}
|
||||
ol {
|
||||
@apply list-decimal;
|
||||
}
|
||||
|
||||
&:not(&:last-child) {
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
@include media-tablet {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
row-gap: 15px;
|
||||
ul {
|
||||
@apply list-disc;
|
||||
}
|
||||
|
||||
.info-text {
|
||||
&:not(&:last-child) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
ol, ul {
|
||||
@apply mb-2.5;
|
||||
padding-inline-start: 1.75rem;
|
||||
|
||||
li img {
|
||||
@apply block w-full pr-1 pb-1 mt-3.5;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
.project-photo {
|
||||
box-shadow: 5px 5px 10px rgba(0, 0, 0, .3);
|
||||
}
|
||||
p {
|
||||
@apply mb-2.5 text-justify;
|
||||
}
|
||||
|
||||
.project-photo, .project-photo img {
|
||||
width: 100%;
|
||||
}
|
||||
blockquote {
|
||||
@apply pl-6 ml-5 border-neutral-400;
|
||||
|
||||
.project-photo img {
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
max-height: 500px;
|
||||
}
|
||||
|
||||
.content {
|
||||
margin: 35px 0;
|
||||
|
||||
a {
|
||||
color: #8D8D8D;
|
||||
|
||||
&:hover {
|
||||
color: #A2CF00;
|
||||
}
|
||||
}
|
||||
|
||||
h2, h3 {
|
||||
margin-top: 15px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
h2:first-of-type {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.6em;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.4em;
|
||||
}
|
||||
|
||||
p, ol li, ul li {
|
||||
line-height: 1.8em;
|
||||
font-size: 1.1em;
|
||||
|
||||
@include media-tablet {
|
||||
font-size: 1.2em;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
}
|
||||
|
||||
p + ol, p + ul, p + blockquote {
|
||||
margin-top: -10px;
|
||||
}
|
||||
|
||||
ol, ul {
|
||||
margin-bottom: 10px;
|
||||
padding-inline-start: 2.1em;
|
||||
|
||||
li img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0 5px 5px;
|
||||
margin-top: .9em;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 10px;
|
||||
text-align: justify;
|
||||
/* text-indent: 1.5em; */
|
||||
}
|
||||
|
||||
blockquote {
|
||||
padding-left: 25px;
|
||||
margin-left: 1.3em;
|
||||
border-left: 1px solid rgb(116, 116, 116);
|
||||
|
||||
p {
|
||||
text-indent: unset;
|
||||
}
|
||||
}
|
||||
p {
|
||||
text-indent: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,38 +1,38 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="project_categories">
|
||||
<ul class="categories">
|
||||
<SelectedProjects :projects="projects">
|
||||
<div class="pb-9">
|
||||
<ul class="flex justify-center list-none">
|
||||
<li
|
||||
v-for="category in getCategories"
|
||||
:key="category.slug"
|
||||
class="categories_element"
|
||||
:class="{ 'categories_element-active': categories.active === category.slug }"
|
||||
class="relative cursor-pointer mr-3 md:mr-5 last:mr-0 after:translate-y-2"
|
||||
:class="{ 'category-active': selectedCategory(category.slug) }"
|
||||
@click="changeCategory(category.slug)"
|
||||
>
|
||||
<a :title="`Kategoria ${category.name}`">{{ category.name }}</a>
|
||||
<a
|
||||
class="text-gray-500 hover:text-black"
|
||||
:title="`Kategoria ${category.name}`"
|
||||
>{{ category.name }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<SelectedProjects :projects="projects" />
|
||||
<div
|
||||
v-if="projects.length === 0"
|
||||
class="loading"
|
||||
>
|
||||
<div class="loading_animation" />
|
||||
</div>
|
||||
</SelectedProjects>
|
||||
<div
|
||||
v-if="projects.length === 0"
|
||||
class="loading"
|
||||
>
|
||||
<div class="loading_animation" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, computed, onMounted, onUnmounted } from 'vue'
|
||||
import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
|
||||
import { useStore } from 'vuex'
|
||||
import SelectedProjects from '../components/SelectedProjects'
|
||||
import SelectedProjects from '@/components/SelectedProjects'
|
||||
|
||||
const store = useStore()
|
||||
|
||||
const categories = reactive({
|
||||
active: 'all'
|
||||
})
|
||||
const activeCategory = ref('all')
|
||||
const projects = reactive([])
|
||||
|
||||
const getCategories = computed(() => store.getters.getCategories)
|
||||
@ -72,64 +72,22 @@ function loadListWhereCategory(category) {
|
||||
}
|
||||
|
||||
function changeCategory(category) {
|
||||
categories.active = category
|
||||
activeCategory.value = category
|
||||
loadListWhereCategory(category)
|
||||
}
|
||||
|
||||
function selectedCategory(categorySlug) {
|
||||
return activeCategory.value === categorySlug
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "scss/media";
|
||||
|
||||
.project_categories {
|
||||
padding-top: 45px;
|
||||
|
||||
.categories {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
list-style: none;
|
||||
|
||||
.categories_element {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
margin-right: 25px;
|
||||
|
||||
a {
|
||||
color: var(--text-color);
|
||||
&:hover {
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&-active {
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
margin: 0 auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
background-color: #A2CF00;
|
||||
transform: translateY(8px);
|
||||
animation: load-underline 300ms forwards;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-mobile {
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.projects {
|
||||
padding-top: 25px;
|
||||
padding-bottom: 25px;
|
||||
.category-active::after {
|
||||
@apply absolute mx-auto left-0 right-0 bottom-0 h-0.5;
|
||||
background-color: #A2CF00;
|
||||
animation: load-underline 300ms forwards;
|
||||
}
|
||||
|
||||
@keyframes loading-animation {
|
||||
|
||||
26
tailwind.config.js
Normal file
26
tailwind.config.js
Normal file
@ -0,0 +1,26 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: [
|
||||
"./src/**/*.{vue,js}",
|
||||
],
|
||||
darkMode: true,
|
||||
theme: {
|
||||
extend: {
|
||||
fontFamily: {
|
||||
'arial': ['Arial', 'sans-serif'],
|
||||
'roboto': ['Roboto', 'sans-serif'],
|
||||
'thasadith': ['Thasadith', 'sans-serif']
|
||||
},
|
||||
fontSize: {
|
||||
'logo-size': '2.5rem',
|
||||
},
|
||||
screens: {
|
||||
'header-content': '900px'
|
||||
},
|
||||
colors: {
|
||||
'kamilcraft-green': 'rgb(var(--color-kamilcraft-green) / <alpha-value>)'
|
||||
}
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
@ -1,6 +1,14 @@
|
||||
const path = require("path")
|
||||
const { defineConfig } = require('@vue/cli-service')
|
||||
|
||||
module.exports = defineConfig({
|
||||
publicPath: '/',
|
||||
transpileDependencies: true
|
||||
transpileDependencies: true,
|
||||
configureWebpack: {
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': path.resolve(__dirname, 'src/'),
|
||||
}
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user