feat: create the skill picker page

src/App.vue

@@ -1,6 +1,7 @@
 <template>
 	<div id="app">
 		<Home/>
+		<SkillPicker/>
 		<Timeline/>
 	</div>
 </template>
@@ -9,11 +10,13 @@
 import { Component, Vue } from 'vue-property-decorator';
 import Home from './components/Home.vue';
 import Timeline from './components/Timeline.vue';
+import SkillPicker from './components/SkillPicker.vue';
 
 @Component({
 	components: {
 		Home,
 		Timeline,
+		SkillPicker,
 	},
 })
 export default class App extends Vue {

src/assets/skills/angular.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="13.715mm" height="14.082mm" version="1.1" viewBox="0 0 13.715 14.082" xmlns="http://www.w3.org/2000/svg">
+	<title>Foundation/Logo/Qt-logo</title>
+	<title>wiki:Behnam N</title>
+	<g id="a" transform="matrix(.014701 0 0 .014701 3.0939 3.2778)">
+		<path d="m216.88 268.43h78.241l-39.12-94.054zm39.121-242.42-213.36 76.394 32.652 283.08 180.71 100.52 180.71-100.52 32.653-283.08zm133.69 350.96h-49.904l-26.9-67.153h-113.56l-26.903 67.153h-50.003l133.58-300.13z" fill="#dd0031"/>
+	</g>
+</svg>

src/assets/skills/arduino.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="13.715mm" height="14.082mm" version="1.1" viewBox="0 0 13.715 14.082" xmlns="http://www.w3.org/2000/svg">
+	<title>Foundation/Logo/Qt-logo</title>
+	<title>wiki:Behnam N</title>
+	<path d="m8.9519 5.0074c-0.3845 0.0027763-0.76852 0.10877-1.1037 0.33574-0.42666 0.27074-0.72833 0.63217-0.98178 1.0029-0.38887-0.55865-0.90509-1.088-1.6572-1.2589h-2.43e-5c-0.17889-0.040647-0.35714-0.055483-0.52906-0.055223l-0.030002 4.42e-5 -0.00286 5.128e-4c-1.3845-0.070163-2.4692 1.4787-1.9035 2.7541 0.55622 1.3685 2.5236 1.7213 3.5159 0.62746 0.23078-0.22812 0.41646-0.47911 0.58352-0.73238 0.37988 0.61244 0.94347 1.1493 1.708 1.3222 3.705e-4 8.5e-5 6.993e-4 2.143e-4 0.00104 2.993e-4 1.3616 0.39056 2.7751-0.89233 2.5473-2.2861-0.16819-1.0442-1.1592-1.7178-2.1478-1.7106zm-0.084756 0.71736c0.68248-0.026722 1.4361 0.43077 1.5444 1.1045l9.4e-5 4.659e-4 7.1e-5 5.128e-4c0.13909 0.8497-0.85595 1.7493-1.6821 1.5003l-0.011834-0.00356-0.012042-0.00269c-0.63121-0.14241-1.1311-0.69109-1.4379-1.3184 0.27965-0.44311 0.55994-0.82548 0.95667-1.0762l0.00521-0.0033 0.00512-0.00347c0.18513-0.12643 0.40471-0.18914 0.63221-0.19805zm-4.3017 0.00191c0.02595-1.206e-4 0.052013 8.39e-4 0.078128 0.00286l0.044118 0.00356 0.017057-0.00295c0.12204 0.00113 0.24068 0.011947 0.35 0.036778 0.58924 0.13392 1.0335 0.64324 1.4009 1.2237-0.21908 0.35205-0.43246 0.67976-0.69341 0.93556l-0.00781 0.00763-0.00737 0.00816c-0.61475 0.68346-2.0154 0.43292-2.3594-0.42163l-0.00252-0.00625-0.00278-0.00616c-0.33147-0.73944 0.37847-1.7776 1.183-1.7813zm4.1818 0.65972v0.40169h-0.38988v0.37806h0.38988v0.40169h0.37806v-0.40169h0.41351v-0.37806h-0.41351v-0.40169zm-4.7376 0.44304v0.29536h1.4177v-0.29536z" color="#000000" fill="#00979c" stroke-width=".011814" style="-inkscape-stroke:none"/>
+</svg>

src/assets/skills/blender.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="13.715mm" height="14.082mm" version="1.1" viewBox="0 0 13.715 14.082" xmlns="http://www.w3.org/2000/svg">
+	<g transform="translate(-88.27 -88.449)">
+		<g transform="matrix(.11199 0 0 .11199 88.969 73.863)">
+			<g transform="matrix(.99033 0 0 .99033 53.488 2.2884)">
+				<path d="m2.889 195.94c0.11963-2.1532 1.1757-4.0526 2.7663-5.3989 1.5629-1.3227 3.6635-2.1298 5.9574-2.1299 2.2928 1.5e-4 4.3934 0.80727 5.9564 2.1299 1.5911 1.3463 2.6471 3.2454 2.768 5.3982 0.1217 2.2151-0.76742 4.2733-2.3293 5.7971-1.5915 1.5522-3.8586 2.5268-6.3947 2.5268-2.5368 0-4.8054-0.97453-6.3969-2.5268-1.5618-1.5233-2.4501-3.5817-2.3271-5.7964" enable-background="new" fill="#0d528b"/>
+				<path d="m-11.007 200.3c0.01433 0.8411 0.2858 2.4784 0.68802 3.7619 0.84825 2.7071 2.2862 5.2147 4.2897 7.4249 2.0546 2.2675 4.5809 4.0924 7.5026 5.3862 3.0729 1.36 6.4006 2.0556 9.853 2.0492 3.4532-6e-3 6.7804-0.71297 9.8523-2.0831 2.9192-1.3062 5.4457-3.1354 7.4989-5.4098 1.9994-2.2182 3.4353-4.7299 4.2845-7.4392 0.42882-1.3699 0.69619-2.7574 0.80614-4.1523 0.10709-1.3723 0.06133-2.7495-0.13328-4.1229-0.37988-2.6788-1.3076-5.1919-2.7333-7.4844-1.308-2.1047-2.9897-3.9477-4.9892-5.4998l0.0028-3e-3 -20.186-15.502c-0.01751-0.0139-0.03391-0.0281-0.05155-0.0416-1.3277-1.0154-3.5546-1.0122-5.01 7e-3 -1.4747 1.0304-1.6401 2.7329-0.33129 3.8104l-0.0041 3e-3 8.4197 6.848-25.666 0.0274c-0.0124 0-0.02329-3.4e-4 -0.03501-3.4e-4 -2.1207 1e-3 -4.1585 1.3957-4.5642 3.153-0.41136 1.7925 1.0296 3.2785 3.2333 3.2869l-0.0012 7e-3 13.007-0.0249-23.213 17.817c-0.02936 0.0224-0.05995 0.0435-0.08917 0.0663-2.1867 1.6765-2.8959 4.4658-1.5181 6.2308 1.4013 1.7952 4.3762 1.7963 6.5902 8e-3l12.668-10.366s-0.18361 1.4001-0.16977 2.2414zm32.553 4.6839c-2.6105 2.6626-6.2621 4.1696-10.219 4.176-3.9587 8e-3 -7.6122-1.4874-10.223-4.1428-1.2761-1.2951-2.2135-2.781-2.7919-4.369-0.56616-1.5578-0.78616-3.2095-0.64162-4.878 0.14126-1.6331 0.62325-3.1871 1.4007-4.596 0.76204-1.3837 1.8109-2.6337 3.1057-3.6922 2.5373-2.0691 5.7656-3.1871 9.1469-3.1915 3.3813-5e-3 6.6098 1.1045 9.1469 3.1655 1.2938 1.0527 2.3417 2.2986 3.1044 3.6799 0.77691 1.4066 1.2594 2.9585 1.4015 4.592 0.14428 1.667-0.07567 3.3199-0.64176 4.879-0.57785 1.5889-1.5144 3.0774-2.7888 4.377" enable-background="new" fill="#f5792a"/>
+			</g>
+		</g>
+	</g>
+</svg>

src/assets/skills/c.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="13.715mm" height="14.082mm" version="1.1" viewBox="0 0 13.715 14.082" xmlns="http://www.w3.org/2000/svg">
+	<title>Foundation/Logo/Qt-logo</title>
+	<g transform="matrix(.026144 0 0 .026144 3.5164 3.2794)">
+		<path d="m255.57 84.72c-2e-3 -4.83-1.035-9.098-3.124-12.761-2.052-3.602-5.125-6.621-9.247-9.008-34.025-19.619-68.083-39.178-102.1-58.817-9.17-5.294-18.061-5.101-27.163 0.269-13.543 7.987-81.348 46.834-101.55 58.537-8.321 4.817-12.37 12.189-12.372 21.771-0.013 39.455 0 78.909-0.013 118.36 2e-3 4.724 0.991 8.909 2.988 12.517 2.053 3.711 5.169 6.813 9.386 9.254 20.206 11.703 88.02 50.547 101.56 58.536 9.106 5.373 17.997 5.565 27.17 0.269 34.015-19.64 68.075-39.198 102.1-58.817 4.217-2.44 7.333-5.544 9.386-9.252 1.994-3.608 2.985-7.793 2.987-12.518 0 0 0-78.889-0.013-118.34" fill="#5c8dbc"/>
+		<path d="m128.18 143.51-125.19 72.084c2.053 3.711 5.169 6.813 9.386 9.254 20.206 11.703 88.02 50.547 101.56 58.536 9.106 5.373 17.997 5.565 27.17 0.269 34.015-19.64 68.075-39.198 102.1-58.817 4.217-2.44 7.333-5.544 9.386-9.252l-124.41-72.074" fill="#1a4674"/>
+		<path d="m91.101 164.86c7.285 12.718 20.98 21.296 36.69 21.296 15.807 0 29.58-8.687 36.828-21.541l-36.437-21.107-37.081 21.352" fill="#1a4674"/>
+		<path d="m255.57 84.72c-2e-3 -4.83-1.035-9.098-3.124-12.761l-124.26 71.55 124.41 72.074c1.994-3.608 2.985-7.793 2.987-12.518 0 0 0-78.889-0.013-118.34" fill="#1b598e"/>
+		<path d="m164.62 164.62c-7.248 12.854-21.021 21.541-36.828 21.541-15.71 0-29.405-8.578-36.69-21.296-3.539-6.18-5.574-13.335-5.574-20.968 0-23.341 18.923-42.263 42.264-42.263 15.609 0 29.232 8.471 36.553 21.059l36.941-21.272c-14.683-25.346-42.096-42.398-73.494-42.398-46.876 0-84.875 38-84.875 84.874 0 15.378 4.091 29.799 11.241 42.238 14.646 25.48 42.137 42.637 73.634 42.637 31.555 0 59.089-17.226 73.714-42.781l-36.886-21.371" fill="#fff"/>
+	</g>
+</svg>

src/assets/skills/cordova.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="13.715mm" height="14.082mm" version="1.1" viewBox="0 0 13.715 14.082" xmlns="http://www.w3.org/2000/svg">
+	<title>Foundation/Logo/Qt-logo</title>
+	<title>wiki:Behnam N</title>
+	<g transform="matrix(.029587 0 0 .029587 3.7138 4.0383)" fill="#5e6b8c">
+		<path class="st0" d="m193.2 203h-34.4l2.4-29h-16.9l-2.4 29h-71.3l-2.4-29h-16.9l2.4 29h-34.4l-19.3-125.7 48.3-77.3h115.9l48.3 77.3zm-38.7-164.3h-31l2.1 14.5h-38.7l2.1-14.5h-31l-19.4 38.6 9.7 77.3h115.9l9.7-77.3zm-16.9 90.3c-2.7 0-4.8-8-4.8-18s2.2-18 4.8-18c2.7 0 4.8 8 4.8 18s-2.1 18-4.8 18zm-60.9 1.5c-2.7 0-4.8-8-4.8-18s2.2-18 4.8-18c2.7 0 4.8 8 4.8 18s-2.2 18-4.8 18z" fill="#5e6b8c"/>
+	</g>
+</svg>

src/assets/skills/cpp.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="13.715mm" height="14.082mm" version="1.1" viewBox="0 0 13.715 14.082" xmlns="http://www.w3.org/2000/svg">
+	<title>Foundation/Logo/Qt-logo</title>
+	<g transform="matrix(.026144 0 0 .026144 3.5164 3.2794)">
+		<path d="m255.57 84.72c-2e-3 -4.83-1.035-9.098-3.124-12.761-2.052-3.602-5.125-6.621-9.247-9.008-34.025-19.619-68.083-39.178-102.1-58.817-9.17-5.294-18.061-5.101-27.163 0.269-13.543 7.987-81.348 46.834-101.55 58.537-8.321 4.817-12.37 12.189-12.372 21.771-0.013 39.455 0 78.909-0.013 118.36 2e-3 4.724 0.991 8.909 2.988 12.517 2.053 3.711 5.169 6.813 9.386 9.254 20.206 11.703 88.02 50.547 101.56 58.536 9.106 5.373 17.997 5.565 27.17 0.269 34.015-19.64 68.075-39.198 102.1-58.817 4.217-2.44 7.333-5.544 9.386-9.252 1.994-3.608 2.985-7.793 2.987-12.518 0 0 0-78.889-0.013-118.34" fill="#5c8dbc"/>
+		<path d="m128.18 143.51-125.19 72.084c2.053 3.711 5.169 6.813 9.386 9.254 20.206 11.703 88.02 50.547 101.56 58.536 9.106 5.373 17.997 5.565 27.17 0.269 34.015-19.64 68.075-39.198 102.1-58.817 4.217-2.44 7.333-5.544 9.386-9.252l-124.41-72.074" fill="#1a4674"/>
+		<path d="m91.101 164.86c7.285 12.718 20.98 21.296 36.69 21.296 15.807 0 29.58-8.687 36.828-21.541l-36.437-21.107-37.081 21.352" fill="#1a4674"/>
+		<path d="m255.57 84.72c-2e-3 -4.83-1.035-9.098-3.124-12.761l-124.26 71.55 124.41 72.074c1.994-3.608 2.985-7.793 2.987-12.518 0 0 0-78.889-0.013-118.34" fill="#1b598e"/>
+		<g fill="#fff">
+			<path d="m248.73 148.66h-9.722v9.724h-9.724v-9.724h-9.721v-9.721h9.721v-9.722h9.724v9.722h9.722v9.721"/>
+			<path d="m213.25 148.66h-9.721v9.724h-9.722v-9.724h-9.722v-9.721h9.722v-9.722h9.722v9.722h9.721v9.721"/>
+			<path d="m164.62 164.62c-7.248 12.854-21.021 21.541-36.828 21.541-15.71 0-29.405-8.578-36.69-21.296-3.539-6.18-5.574-13.335-5.574-20.968 0-23.341 18.923-42.263 42.264-42.263 15.609 0 29.232 8.471 36.553 21.059l36.941-21.272c-14.683-25.346-42.096-42.398-73.494-42.398-46.876 0-84.875 38-84.875 84.874 0 15.378 4.091 29.799 11.241 42.238 14.646 25.48 42.137 42.637 73.634 42.637 31.555 0 59.089-17.226 73.714-42.781l-36.886-21.371"/>
+		</g>
+	</g>
+</svg>

src/assets/skills/css.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="13.715mm" height="14.082mm" version="1.1" viewBox="0 0 13.715 14.082" xmlns="http://www.w3.org/2000/svg">
+	<title>Foundation/Logo/Qt-logo</title>
+	<g transform="matrix(.20209 0 0 .20209 3.6237 3.8078)">
+		<polygon points="27.377 28.889 16.001 32 4.625 28.889 2 0 30.002 0" fill="#1f62ae"/>
+		<polygon points="16 29.75 25.232 27.008 27.688 2 16 2" fill="#347dc6"/>
+		<polygon points="8.619 17 19.502 17 19.158 21 16 21.99 12.861 20.984 12.533 19 8.803 19 9.262 23.987 16 25.99 22.728 23.986 23.719 12.99 16.026 12.99 24 10 24.363 6 7.607 6 8 10 16 10 8.25 12.99" fill="#fff"/>
+	</g>
+</svg>

src/assets/skills/docker.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="13.715mm" height="14.082mm" version="1.1" viewBox="0 0 13.715 14.082" xmlns="http://www.w3.org/2000/svg">
+	<g transform="translate(-88.27 -88.449)">
+		<path d="m98.99 95.188a1.6801 1.6801 0 0 0-0.79082-0.25267 0.88598 0.88598 0 0 0-0.14438 0 1.3913 1.3913 0 0 0-0.53816-0.7416 0.16407 0.16407 0 0 0-0.21001 0.02297 1.3323 1.3323 0 0 0-0.23626 1.0763 0.17063 0.17063 0 0 1-0.04266 0.13454 0.14766 0.14766 0 0 1-0.11157 0.04922h-0.14766v-0.80723a0.16407 0.16407 0 0 0-0.16407-0.16407h-0.82035v-1.8048a0.16407 0.16407 0 0 0-0.16407-0.16407h-0.98442a0.16407 0.16407 0 0 0-0.16407 0.16407v0.82035h-1.8048a0.16407 0.16407 0 0 0-0.16407 0.16407v0.82035h-0.82035a0.16407 0.16407 0 0 0-0.16407 0.16407v0.82035h-0.16407a0.16407 0.16407 0 0 0-0.16407 0.16407c0 2.5168 1.8343 2.7892 2.6251 2.7892a4.6891 4.6891 0 0 0 4.0624-2.3232 1.6834 1.6834 0 0 0 1.1649-0.71206 0.16407 0.16407 0 0 0-0.0525-0.21985zm-2.5497 0.30189h-0.65628v-0.65628h0.65628zm-3.6095 0v-0.65628h0.65628v0.65628zm0.98442 0v-0.65628h0.65628v0.65628zm1.6407-1.6407v0.65628h-0.65628v-0.65628zm-0.65628 1.6407v-0.65628h0.65628v0.65628zm0-2.6251h0.65628v0.65628h-0.65628zm-0.32814 1.6407h-0.65628v-0.65628h0.65628zm-1.6407-0.65628h0.65628v0.65628h-0.65628zm-0.98442 0.98442h0.65628v0.65628h-0.65628zm0.98442 2.297a0.32814 0.32814 0 1 1 0.32814-0.32814 0.32814 0.32814 0 0 1-0.32814 0.32814z" fill="#03a8e7" stroke-width=".32814"/>
+	</g>
+</svg>

src/assets/skills/electronics.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="13.715mm" height="14.082mm" version="1.1" viewBox="0 0 13.715 14.082" xmlns="http://www.w3.org/2000/svg">
+	<g transform="translate(-88.27 -88.449)">
+		<g transform="matrix(3.7826 0 0 3.7826 -421.05 -680.81)" shape-rendering="auto">
+			<path d="m136.17 205.72v0.49266h0.0898v-0.49266zm0.48271 0v0.49266h0.0898v-0.49266z" color="#000000" color-rendering="auto" dominant-baseline="auto" fill="#717ea0" image-rendering="auto" solid-color="#000000" style="font-feature-settings:normal;font-variant-alternates:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal;font-variant-position:normal;isolation:auto;mix-blend-mode:normal;shape-padding:0;text-decoration-color:#000000;text-decoration-line:none;text-decoration-style:solid;text-indent:0;text-orientation:mixed;text-transform:none;white-space:normal"/>
+			<path d="m136.21 204.24c-0.0675 0-0.12576 0.022-0.16586 0.0617s-0.0604 0.0952-0.0604 0.15426v0.75433h0.0449c0.0512 0 0.0918 0.0406 0.0918 0.0918s-0.0406 0.0918-0.0918 0.0918h-0.0449v0.32013h0.96239v-0.32013h-0.0449c-0.0512 0-0.0918-0.0406-0.0918-0.0918s0.0406-0.0918 0.0918-0.0918h0.0449v-0.75433c0-0.059-0.0203-0.11456-0.0604-0.15426s-0.0983-0.0617-0.16586-0.0617z" color="#000000" color-rendering="auto" dominant-baseline="auto" fill="#ed9310" image-rendering="auto" solid-color="#000000" style="font-feature-settings:normal;font-variant-alternates:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal;font-variant-position:normal;isolation:auto;mix-blend-mode:normal;shape-padding:0;text-decoration-color:#000000;text-decoration-line:none;text-decoration-style:solid;text-indent:0;text-orientation:mixed;text-transform:none;white-space:normal"/>
+		</g>
+	</g>
+</svg>

src/assets/skills/folder.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="13.715mm" height="14.082mm" version="1.1" viewBox="0 0 13.715 14.082" xmlns="http://www.w3.org/2000/svg">
+	<g transform="translate(-88.27 -88.449)">
+		<path d="m94.495 92.965h-1.8937c-0.3486 0-0.62808 0.28256-0.62808 0.63124l-0.0024 3.7874c0 0.3486 0.28256 0.63124 0.63124 0.63124h5.0499c0.3486 0 0.63124-0.28256 0.63124-0.63124v-3.1562c0-0.3486-0.28256-0.63124-0.63124-0.63124h-2.5249z" fill="#5e6b8c" stroke-width=".15781"/>
+	</g>
+</svg>

src/assets/skills/git.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="13.715mm" height="14.082mm" version="1.1" viewBox="0 0 13.715 14.082" xmlns="http://www.w3.org/2000/svg">
+	<g transform="translate(-88.27 -88.449)">
+		<path d="m96.546 93.126c-0.52166 0-0.9455 0.42364-0.9455 0.94554 0 0.349 0.19131 0.65049 0.47259 0.81459v0.13088s0 0.94554-0.94554 0.94554c-0.39222 0-0.69924 0.08365-0.94558 0.21292v-2.2348c0.28176-0.16409 0.47259-0.46615 0.47259-0.81467 0-0.52194-0.42368-0.94554-0.94554-0.94554-0.52194 0-0.94558 0.42368-0.94558 0.94554 0 0.349 0.19131 0.65049 0.47259 0.81467v3.0987c-0.28176 0.16369-0.47259 0.46559-0.47259 0.81439 0 0.52174 0.42368 0.9455 0.94558 0.9455 0.5219 0 0.94554-0.42368 0.94554-0.9455 0-0.24734-0.09726-0.47107-0.25294-0.63989 0.13768-0.1685 0.36141-0.30578 0.72582-0.30578 1.8763 0 1.891-1.8911 1.891-1.8911v-0.13088c0.28136-0.16409 0.47259-0.46607 0.47259-0.81463 0-0.52198-0.42368-0.9455-0.94558-0.9455zm-2.8366-0.47259c0.26135 0 0.47255 0.21092 0.47255 0.47259 0 0.26135-0.21092 0.47255-0.47255 0.47255-0.26135 0-0.47259-0.21092-0.47259-0.47255 0-0.26135 0.21092-0.47259 0.47259-0.47259zm0 5.6732c-0.26135 0-0.47259-0.21172-0.47259-0.47255 0-0.26055 0.21092-0.47255 0.47259-0.47255 0.26135 0 0.47255 0.21172 0.47255 0.47255 0 0.26135-0.21092 0.47255-0.47255 0.47255zm2.8366-3.7821c-0.26135 0-0.47255-0.21132-0.47255-0.47255 0-0.26135 0.21172-0.47263 0.47255-0.47263 0.26135 0 0.47259 0.21092 0.47259 0.47263 0 0.26135-0.21172 0.47255-0.47259 0.47255z" fill="#5e6b8c" stroke-width=".007387"/>
+	</g>
+</svg>

src/assets/skills/go.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="13.715mm" height="14.082mm" version="1.1" viewBox="0 0 13.715 14.082" xmlns="http://www.w3.org/2000/svg">
+	<g transform="translate(-88.27 -88.449)">
+		<path d="m96.162 94.816c-0.14048 0.036-0.25655 0.0556-0.37542 0.0981-0.09405 0.024-0.18971 0.0504-0.29937 0.0789l-8e-3 1e-3c-0.05403 0.016-0.05923 0.016-0.10966-0.0412-0.06083-0.0684-0.10446-0.11207-0.18851-0.15329-0.25415-0.12407-0.49925-0.0876-0.72758 0.0608-0.27336 0.1765-0.41412 0.43861-0.41028 0.76372 4e-3 0.32259 0.22453 0.58698 0.5315 0.63084 0.28376 0.036 0.51346-0.0592 0.69404-0.26455 0.02802-0.032 0.05163-0.0684 0.07885-0.10686 8e-3 -0.012 0.02001-0.028 0.02802-0.0428h-0.77532c-0.08405 0-0.10446-0.0516-0.07604-0.12006 0.05163-0.12528 0.14848-0.3342 0.20492-0.43862 0.01201-0.024 0.04002-0.0748 0.08885-0.0748h1.3042c0.05803-0.1729 0.15209-0.347 0.27856-0.51213 0.29297-0.38582 0.636-0.58702 1.1249-0.67087 0.41024-0.07204 0.79598-0.03202 1.1469 0.20492 0.31738 0.21692 0.51345 0.51085 0.56632 0.89655 0.0684 0.54312-0.0888 0.98433-0.47343 1.3623-0.25414 0.26975-0.57925 0.43861-0.95335 0.51473-0.072 0.016-0.14328 0.02-0.21252 0.024-0.03602 2e-3 -0.07364 8e-3 -0.10966 8e-3 -0.36501-8e-3 -0.6992-0.11206-0.98044-0.3534-0.19731-0.1713-0.33419-0.38182-0.40119-0.62564-0.04763 0.0941-0.10326 0.1857-0.1805 0.27215-0.27856 0.38182-0.65662 0.6192-1.1339 0.68244-0.39463 0.0528-0.75984-0.024-1.0823-0.26456-0.29657-0.22573-0.46571-0.52246-0.50957-0.89271-0.05283-0.43861 0.07604-0.84368 0.3406-1.1778 0.28656-0.37422 0.66438-0.61152 1.1262-0.69536 0.37782-0.08005 0.73918-0.02401 1.0656 0.19731 0.21292 0.14048 0.36501 0.33299 0.46571 0.56637 0.02401 0.036 8e-3 0.0568-0.04002 0.0684zm-4.5384 0.072c-0.01601 0-0.02001-8e-3 -0.01201-0.02l0.08445-0.10807c8e-3 -0.012 0.02802-0.02 0.04443-0.02h1.4353c0.01601 0 0.02001 0.012 0.01201 0.024l-0.06844 0.10446c-8e-3 0.016-0.02802 0.024-0.04002 0.024zm-0.60703 0.37021c-0.01601 0-0.02001-8e-3 -0.01201-0.02l0.08445-0.10846c8e-3 -0.012 0.02802-0.02 0.04443-0.02h1.8334c0.01601 0 0.02401 0.016 0.02001 0.024l-0.03202 0.0969c-4e-3 0.016-0.02001 0.024-0.03602 0.024zm0.96071 0.3458c-8e-3 0.012-4e-3 0.024 0.01201 0.024l0.87662 4e-3c0.01201 0 0.02802-0.012 0.02802-0.028l8e-3 -0.0969c0-0.016-8e-3 -0.028-0.02401-0.028h-0.8037c-0.01601 0-0.03202 0.012-0.04042 0.024zm6.4694-0.23213c-2e-3 -0.032-4e-3 -0.062-8e-3 -0.0901-0.072-0.39742-0.43861-0.62311-0.82047-0.5341-0.37421 0.0841-0.61535 0.32138-0.70308 0.69924-0.07204 0.31338 0.08005 0.6308 0.36901 0.75983 0.22173 0.0969 0.44254 0.0853 0.65538-0.024 0.31738-0.1757 0.4902-0.42184 0.51085-0.7676-1e-3 -0.016-1e-3 -0.028-2e-3 -0.0424z" fill="#7889b6" stroke-width=".0129"/>
+	</g>
+</svg>

src/assets/skills/html.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="13.715mm" height="14.082mm" version="1.1" viewBox="0 0 13.715 14.082" xmlns="http://www.w3.org/2000/svg">
+	<title>Foundation/Logo/Qt-logo</title>
+	<g transform="matrix(.20209 0 0 .20209 3.6237 3.8078)">
+		<polygon points="4.625 28.889 2 0 30.002 0 27.377 28.889 16.001 32" fill="#e44d26"/>
+		<polygon points="27.688 2 16 2 16 29.75 25.232 27.008" fill="#ff6c39"/>
+		<polygon points="12.857 20.984 12.648 19 8.803 19 9.262 23.987 16 25.99 22.728 23.986 23.718 13 12.252 13 12.002 10 24 10 24.363 6 7.607 6 8 10 8.619 17 19.503 17 19.148 20.984 16 21.99" fill="#fff"/>
+	</g>
+</svg>

src/assets/skills/image-processing.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="13.715mm" height="14.082mm" version="1.1" viewBox="0 0 13.715 14.082" xmlns="http://www.w3.org/2000/svg">
+	<g transform="matrix(.26458 0 0 .26458 3.6824 -268.36)">
+		<path d="m23 1048.4c0 1.1-0.895 2-2 2h-18c-1.1046 0-2-0.9-2-2v-14c0-1.1 0.8954-2 2-2h18c1.105 0 2 0.9 2 2v4z" fill="#95a5a6"/>
+		<path d="m1 1047.4c0 1.1 0.8954 2 2 2h18c1.105 0 2-0.9 2-2v-14c0-1.1-0.895-2-2-2h-18c-1.1046 0-2 0.9-2 2v4z" fill="#bdc3c7"/>
+		<rect transform="translate(0,1028.4)" x="3" y="5" width="18" height="14" fill="#f39c12"/>
+		<path transform="translate(0,1028.4)" d="M 16.625,8.625 6.281,19 H 21 v -6 z" fill="#e67e22"/>
+		<path transform="matrix(1.75,0,0,1.75,-3,1024.4)" d="m8 8a2 2 0 1 1-4 0 2 2 0 1 1 4 0z" fill="#f1c40f"/>
+		<path transform="translate(0,1028.4)" d="M 8.0938,11.094 3,16.188 V 19 h 13 z" fill="#d35400"/>
+	</g>
+</svg>

src/assets/skills/inkscape.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="13.715mm" height="14.082mm" version="1.1" viewBox="0 0 13.715 14.082" xmlns="http://www.w3.org/2000/svg">
+	<path d="m6.8233 3.9168c-0.19711-0.00291-0.38735 0.073554-0.52731 0.21272l-2.3349 2.3913c-0.8845 0.88371 0.57256 0.80989 1.0991 1.1443 0.24395 0.15928-0.78184 0.36274-0.57256 0.57256 0.20399 0.20982 1.2303 0.40243 1.4346 0.60669 0.20399 0.20928-0.41381 0.43048-0.20981 0.63976 0.19844 0.20982 0.67442 0.01138 0.75935 0.48736 0.062177 0.35137 0.87312 0.17621 1.2361-0.12462 0.22595-0.19288-0.39132-0.19288-0.18732-0.40243 0.51038-0.51567 0.96361-0.23151 1.1507-0.70802 0.10239-0.25479-0.77073-0.43656-0.53816-0.60087 0.55589-0.39079 2.5961-0.58923 1.655-1.5298l-2.4201-2.4762c-0.14817-0.13785-0.34264-0.21352-0.54451-0.21272zm0.019844 0.22728c0.13996 7.937e-4 0.28046 0.053181 0.38206 0.15452l0.92392 0.94112c0.08546 0.084931 0.08546 0.26088 0.03413 0.31168l-0.45879-0.37359-0.090752 0.54954-0.37968-0.20426-0.61807 0.39105-0.20399-0.82153-0.32861 0.71385-0.82206-0.0058209c-0.15875 0-0.136-0.16431 0.02831-0.32861 0.32306-0.35719 0.9525-0.96308 1.1509-1.1729 0.10186-0.10478 0.24209-0.15584 0.38232-0.15452zm2.581 4.3064c-0.19579 0.0066-0.39582 0.10451-0.44688 0.28575 0 0.1188 0.92392 0.18706 0.87339-0.02831-0.03731-0.1815-0.23019-0.26511-0.42624-0.25797v5.29e-4zm-4.0603 0.51462c-0.2667 0.01561-0.55245 0.20928-0.32597 0.40005 0.20929 0.1815 0.52705-0.03969 0.62891-0.29448-0.0635-0.08361-0.1815-0.11271-0.30242-0.1053h-5.292e-4zm3.5002 0.02037c-0.26088 0.23812 0.04498 0.48736 0.30004 0.32306 0.06826-0.04577-0.0056-0.26591-0.30004-0.32306z" fill="#5e6b8c" stroke-width=".26458"/>
+</svg>

src/assets/skills/js.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="13.715mm" height="14.082mm" version="1.1" viewBox="0 0 13.715 14.082" xmlns="http://www.w3.org/2000/svg">
+	<title>Foundation/Logo/Qt-logo</title>
+	<path d="m3.6239 3.8078v6.467h6.467v-6.467zm3.4645 5.0235c0 0.62952-0.37185 0.93642-0.91014 0.93642-0.48618 0-0.76839-0.25175-0.91159-0.55561l0.49484-0.29953c0.09543 0.16933 0.1679 0.31252 0.37618 0.31252 0.17323 0 0.31557-0.078096 0.31557-0.38196v-2.0328h0.63515zm1.4341 0.92198c-0.56428 0-0.92891-0.25464-1.1069-0.60628l0.49556-0.28683c0.12992 0.21278 0.29954 0.35453 0.59906 0.35453 0.25176 0 0.39798-0.11144 0.39798-0.2851 0-0.2083-0.15057-0.28207-0.42844-0.40419l-0.15187-0.065247c-0.43853-0.1865-0.72926-0.42093-0.72926-0.91592 0-0.45572 0.34717-0.7886 0.88979-0.7886 0.38643 0 0.66402 0.1201 0.86395 0.47174l-0.47406 0.30473c-0.10422-0.18665-0.21655-0.25983-0.39062-0.25983-0.178 0-0.29088 0.11288-0.29088 0.25983 0 0.18232 0.11289 0.25608 0.3733 0.36897l0.15187 0.065104c0.51664 0.22144 0.80751 0.44749 0.80751 0.95504 1.62e-4 0.5471-0.4296 0.83205-1.007 0.83205z" fill="#e7d34b" stroke-width=".014435"/>
+</svg>

src/assets/skills/linux.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="13.715mm" height="14.082mm" version="1.1" viewBox="0 0 13.715 14.082" xmlns="http://www.w3.org/2000/svg">
+	<title>Foundation/Logo/Qt-logo</title>
+	<title>wiki:Behnam N</title>
+	<g id="a" transform="matrix(.27612 0 0 .27612 3.5487 3.7277)">
+		<path d="m20.93 19.07a3.72 3.72 0 0 1-0.57-0.43c-0.09-0.09 0-0.5 0-0.72a1.45 1.45 0 0 0-0.2-1.17 0.91 0.91 0 0 0-0.16-0.12v-0.64a9.84 9.84 0 0 0-2.7-6.62 4.42 4.42 0 0 1-1.3-2.37v-0.23c0-1.38 0-4.26-1.5-5.77a3.39 3.39 0 0 0-2.5-1c-2.1 0-3.5 1-3.5 6a8 8 0 0 1-1.19 3.68c-0.27 0.52-0.54 1.06-0.78 1.63a24.32 24.32 0 0 0-1.53 4.79 1.59 1.59 0 0 0-0.78 1.2l-0.08 0.33a2.78 2.78 0 0 1-0.54 0.14c-0.6 0.12-1.6 0.32-1.6 1.23a3.82 3.82 0 0 0 0.08 0.73 3.21 3.21 0 0 1-0.08 1.65 0.49 0.49 0 0 0 0 0.13c0 1.19 1.87 1.35 3 1.49h0.44a4.52 4.52 0 0 1 0.79 0.32 5.82 5.82 0 0 0 2.27 0.68 1.17 1.17 0 0 0 0.86-0.39h0.05a5.94 5.94 0 0 1 2.59-0.61h3.06a1.33 1.33 0 0 0 0.29 0.55 1.48 1.48 0 0 0 1.15 0.45 3.2 3.2 0 0 0 2.5-1.32l0.32-0.33a3.54 3.54 0 0 1 1.19-0.59c0.72-0.26 1.46-0.53 1.46-1.26s-0.57-1.11-1.04-1.43zm-7.93-16.07c0.58 0 1 0.62 1 1.48s-0.33 1.34-0.81 1.45a0.82 0.82 0 0 0 0.29-0.68c0-0.41-0.22-0.75-0.48-0.75s-0.48 0.33-0.48 0.75a0.82 0.82 0 0 0 0.29 0.68c-0.48-0.12-0.81-0.7-0.81-1.45s0.42-1.48 1-1.48zm0.44 3.88a5.82 5.82 0 0 1-2.44 1.12 3.74 3.74 0 0 1-1.5-1 3.07 3.07 0 0 1 2-1 3.91 3.91 0 0 1 1.94 0.88zm-3.44-3.88c0.58 0 1 0.62 1 1.48s-0.33 1.33-0.81 1.45a0.82 0.82 0 0 0 0.29-0.68c0-0.41-0.22-0.75-0.48-0.75s-0.48 0.33-0.48 0.75a0.82 0.82 0 0 0 0.29 0.68c-0.48-0.12-0.81-0.69-0.81-1.45s0.42-1.48 1-1.48zm-1.23 19.71c-0.06 0.19-0.15 0.29-0.27 0.29a5.14 5.14 0 0 1-1.87-0.6 4.44 4.44 0 0 0-1-0.4h-0.56c-1.49-0.12-1.95-0.3-2.05-0.44a4.14 4.14 0 0 0 0.05-2 3.36 3.36 0 0 1-0.07-0.56 2.24 2.24 0 0 1 0.83-0.26 2 2 0 0 0 1-0.39 1.66 1.66 0 0 0 0.37-0.82c0.13-0.53 0.18-0.53 0.25-0.53a3.92 3.92 0 0 1 0.7 1.18 5.6 5.6 0 0 0 1.54 2.24 2.27 2.27 0 0 1 1.08 2.29zm6.37-3c-1.47 1.48-4.41 1.38-5.71 1.18a3.64 3.64 0 0 0-1.15-1.29 5 5 0 0 1-1.21-1.85 4 4 0 0 0-1-1.57 23.88 23.88 0 0 1 1.43-4.48c0.21-0.53 0.48-1 0.74-1.55a15.43 15.43 0 0 0 0.94-2.09 3.86 3.86 0 0 0 1.82 0.94 10.05 10.05 0 0 0 2.83-1.2 18.65 18.65 0 0 1 2.17 8.95 6.06 6.06 0 0 0-0.86 2.95zm5.06 1.12a4.19 4.19 0 0 0-1.55 0.83l-0.34 0.35a2.27 2.27 0 0 1-1.81 1 0.55 0.55 0 0 1-0.41-0.12c-0.15-0.17-0.11-0.56-0.1-0.72s0.01-0.17 0.01-0.17c0-0.3 0.28-3.13 0.37-3.58a1.43 1.43 0 0 0 0.13 0.17 1.34 1.34 0 0 0 1 0.42h0.35a2 2 0 0 0 1.47-0.45 1.24 1.24 0 0 0 0.33 0.8 4.53 4.53 0 0 0 0.73 0.56c0.38 0.25 0.62 0.42 0.64 0.53a2.89 2.89 0 0 1-0.82 0.37z" fill="#5e6b8c"/>
+	</g>
+</svg>

src/assets/skills/maths.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="13.715mm" height="14.082mm" version="1.1" viewBox="0 0 13.715 14.082" xmlns="http://www.w3.org/2000/svg">
+	<g transform="translate(-88.27 -88.449)">
+		<path d="m97.136 93.387h-4.0165c-0.05243 0-0.09525 0.04282-0.09525 0.09565v0.57373c0 0.05283 0.04282 0.09526 0.09525 0.09526h0.66914c-0.0031 0.87918-0.07524 2.9303-0.36141 3.2873-0.02401 0.02802-0.02802 0.06804-0.01201 0.10126 0.01601 0.03202 0.04923 0.05403 0.08605 0.05403h0.57381c0.02802 0 0.05643-0.01201 0.07484-0.03602 0.36501-0.45654 0.40023-2.8345 0.40315-3.4068h1.1479v2.7732c0 0.36901 0.30017 0.66942 0.66942 0.66942h0.57377c0.02802 0 0.05963-0.01601 0.07764-0.04002 0.02001-0.02401 0.02401-0.05723 0.01201-0.08605l-0.19131-0.57385c-0.01201-0.04002-0.04963-0.06564-0.09045-0.06564l-0.19091 1.6e-4h-1.19e-4c-0.05243 0-0.09526-0.04282-0.09526-0.09525l-1.6e-4 -2.5822h0.66942c0.05243 0 0.09565-0.04283 0.09565-0.09526v-0.57373c0-0.05243-0.04283-0.09565-0.09565-0.09565z" fill="#e03400" stroke-width=".19126"/>
+	</g>
+</svg>

src/assets/skills/mecanics.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="13.715mm" height="14.082mm" version="1.1" viewBox="0 0 13.715 14.082" xmlns="http://www.w3.org/2000/svg">
+	<g transform="translate(-88.27 -88.449)">
+		<path d="m95.126 94.139c-0.74631 0-1.3519 0.60555-1.3519 1.3524 0 0.74603 0.60555 1.3528 1.3519 1.3528 0.74663 0 1.3477-0.60679 1.3477-1.3528 0-0.74687-0.60106-1.3524-1.3477-1.3524zm2.7105 2.1293-0.24414 0.58702 0.43449 0.85349 0.0576 0.11286-0.60262 0.60263-0.98869-0.46667-0.58698 0.24094-0.29777 0.912-0.03602 0.12087h-0.85173l-0.36861-1.0294-0.58694-0.24174-0.85493 0.43349-0.11246 0.0564-0.60234-0.60206 0.46667-0.98929-0.24174-0.58638-0.91052-0.29737-0.12087-0.04162v-0.85129l1.0302-0.36901 0.24174-0.5859-0.43341-0.85537-0.05723-0.11206 0.60159-0.60158 0.99001 0.46615 0.58614-0.24254 0.29737-0.91148 0.03602-0.12087h0.85149l0.36861 1.0307 0.58542 0.24254 0.85513-0.43393 0.11366-0.05723 0.60207 0.6015-0.46615 0.98849 0.24134 0.58722 0.913 0.29737 0.12007 0.03602v0.85097z" fill="#3d809c" stroke-width=".0083479"/>
+	</g>
+</svg>

src/assets/skills/mongo.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="13.715mm" height="14.082mm" version="1.1" viewBox="0 0 13.715 14.082" xmlns="http://www.w3.org/2000/svg">
+	<g transform="translate(-88.27 -88.449)">
+		<g transform="matrix(.2443 0 0 .2443 91.218 91.582)">
+			<path d="m23.75 15.75c0 6.4893-4.7124 9.5-7.75 9.5s-7.75-3.0107-7.75-9.5 7.75-14 7.75-14 7.75 7.5107 7.75 14z" fill="#88b03c"/>
+			<path d="m15.55 5.953a0.50005 0.50005 0 0 0-0.49219 0.50782v5.0352l-1.8906-1.8906a0.50005 0.50005 0 0 0-0.35938-0.15235 0.50005 0.50005 0 0 0-0.34765 0.85938l2.5976 2.5976v2.8359l-2.3906-2.3906a0.50005 0.50005 0 0 0-0.35938-0.15235 0.50005 0.50005 0 0 0-0.34765 0.85938l3.0976 3.0976v2.8359l-2.6406-2.6406a0.50005 0.50005 0 0 0-0.35938-0.15235 0.50005 0.50005 0 0 0-0.34765 0.85938l3.3476 3.3477v3.7422c0.32495 0.05865 0.64277 0.09766 0.94141 0.09766 0.0189 0 0.0395-0.0037 0.0586-0.0039v-3.8359l3.3496-3.3477a0.50005 0.50005 0 1 0-0.70703-0.70703l-2.6426 2.6406v-2.8359l3.0996-3.0976a0.50005 0.50005 0 1 0-0.70703-0.70703l-2.3926 2.3906v-2.8359l2.5996-2.5976a0.50005 0.50005 0 1 0-0.70703-0.70703l-1.8926 1.8906v-5.0352a0.50005 0.50005 0 0 0-0.50781-0.50782z" color="#000000" color-rendering="auto" fill="#81a53c" fill-rule="evenodd" image-rendering="auto" shape-rendering="auto" solid-color="#000000" style="isolation:auto;mix-blend-mode:normal;text-decoration-color:#000000;text-decoration-line:none;text-decoration-style:solid;text-indent:0;text-transform:none;white-space:normal"/>
+			<path d="m15.992 5.748a0.50005 0.50005 0 0 0-0.49219 0.50781v5.0352l-1.8906-1.8906a0.50005 0.50005 0 0 0-0.35938-0.15234 0.50005 0.50005 0 0 0-0.34766 0.85938l2.5977 2.5977v2.8359l-2.3906-2.3906a0.50005 0.50005 0 0 0-0.35938-0.15234 0.50005 0.50005 0 0 0-0.34766 0.85938l3.0977 3.0977v2.8359l-2.6406-2.6406a0.50005 0.50005 0 0 0-0.35938-0.15234 0.50005 0.50005 0 0 0-0.34766 0.85938l3.3477 3.3477v8.5371a0.50005 0.50005 0 1 0 1 0v-8.5371l3.3496-3.3477a0.50005 0.50005 0 1 0-0.70703-0.70703l-2.6426 2.6406v-2.8359l3.0996-3.0977a0.50005 0.50005 0 1 0-0.70703-0.70703l-2.3926 2.3906v-2.8359l2.5996-2.5977a0.50005 0.50005 0 1 0-0.70703-0.70703l-1.8926 1.8906v-5.0352a0.50005 0.50005 0 0 0-0.50781-0.50781z" color="#000000" color-rendering="auto" fill="#94b84f" fill-rule="evenodd" image-rendering="auto" shape-rendering="auto" solid-color="#000000" style="isolation:auto;mix-blend-mode:normal;text-decoration-color:#000000;text-decoration-line:none;text-decoration-style:solid;text-indent:0;text-transform:none;white-space:normal"/>
+		</g>
+	</g>
+</svg>

src/assets/skills/opti.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="13.715mm" height="14.082mm" version="1.1" viewBox="0 0 13.715 14.082" xmlns="http://www.w3.org/2000/svg">
+	<defs>
+		<linearGradient id="b" x1="18.894" x2="18.894" y1="15.287" y2="22.614" gradientUnits="userSpaceOnUse">
+			<stop stop-color="#5d5c66" offset="0"/>
+			<stop stop-color="#48474f" offset="1"/>
+		</linearGradient>
+		<linearGradient id="a" x1="9.998" x2="9.998" y1="1.149" y2="18.652" gradientUnits="userSpaceOnUse">
+			<stop stop-color="#a6f9ff" offset="0"/>
+			<stop stop-color="#3ed0f7" offset="1"/>
+		</linearGradient>
+	</defs>
+	<g transform="matrix(.26458 0 0 .26458 3.6839 3.8673)">
+		<path class="cls-1" d="m17.607 14.79 4.8 4.8a1.994 1.994 0 0 1-2.82 2.82l-4.8-4.8z" fill="url(#b)"/>
+		<circle class="cls-2" cx="9.998" cy="10" r="9" fill="url(#a)"/>
+		<path class="cls-3" d="m5 11a1 1 0 0 1-1-1 6.006 6.006 0 0 1 6-6 1 1 0 0 1 0 2 4 4 0 0 0-4 4 1 1 0 0 1-1 1z" fill="#cffeff"/>
+	</g>
+</svg>

src/assets/skills/parcel.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="13.715mm" height="14.082mm" version="1.1" viewBox="0 0 13.715 14.082" xmlns="http://www.w3.org/2000/svg">
+	<g transform="translate(-88.27 -88.449)">
+		<g transform="matrix(.11078 0 0 .11078 89.589 89.95)">
+			<path d="m19.985 35 30.001-14.986 30.001 14.986-0.017 1.981-29.984 15.004-29.989-14.98z" fill="#efc75e"/>
+			<path d="m19.986 35 29.977 14.999 30.023-14.999v30l-30.109 15-29.891-15z" fill="#e7bf55"/>
+			<path d="m49.986 79.945v-29.958l-0.023 0.012-29.977-14.999v30l29.891 15z" fill="#dbb551"/>
+			<path d="m61.99 43.991v8.792l2.678 0.216 1.707-2.033 1.607 0.253v-10.222z" fill="#f1d999"/>
+			<path d="m31.967 29.015 30.51 15.279 5.502-3.26-30-15.023z" fill="#f7e3af"/>
+			<path d="m43.979 63.122-9.984-5.01c-0.551-0.277-0.998 0.06-0.998 0.751v6.261c0 0.692 0.447 1.478 0.998 1.754l9.984 5.01c0.551 0.276 0.998-0.061 0.998-0.752v-6.261c0-0.691-0.448-1.477-0.998-1.753zm-2.497 5.009-5.99-3.007c-0.275-0.138-0.499-0.53-0.499-0.876s0.224-0.514 0.499-0.376l5.99 3.006c0.275 0.139 0.499 0.531 0.499 0.877s-0.223 0.514-0.499 0.376zm0.998-2.004-6.988-3.507c-0.275-0.139-0.499-0.531-0.499-0.877s0.224-0.514 0.499-0.376l6.988 3.508c0.276 0.138 0.499 0.531 0.499 0.876 0 0.346-0.222 0.515-0.499 0.376z" fill="#f2f2f2"/>
+		</g>
+	</g>
+</svg>

src/assets/skills/php.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="13.715mm" height="14.082mm" version="1.1" viewBox="0 0 13.715 14.082" xmlns="http://www.w3.org/2000/svg">
+	<title>Foundation/Logo/Qt-logo</title>
+	<path id="a" d="m6.8574 4.0411a3.0002 3.0002 0 0 0-3.0001 3.0001 3.0002 3.0002 0 0 0 3.0001 3.0004 3.0002 3.0002 0 0 0 3.0001-3.0004 3.0002 3.0002 0 0 0-3.0001-3.0001zm-0.31759 2.105h0.30578l-0.072564 0.37598h0.27169c0.1711 0 0.28977 0.030683 0.3554 0.090452 0.065629 0.059769 0.084172 0.15699 0.058389 0.29059l-0.12758 0.65848h-0.31051l0.12184-0.62574c0.014063-0.071489 0.0082511-0.11968-0.015188-0.14547-0.024611-0.025783-0.075046-0.038476-0.15357-0.038476h-0.24503l-0.15694 0.80968h-0.30612zm-1.2846 0.37598h0.593c0.17814 0 0.30812 0.048157 0.39016 0.14074 0.082036 0.092584 0.10673 0.22392 0.073914 0.39151-0.012891 0.069145-0.036196 0.13225-0.067839 0.18968-0.031643 0.057425-0.073987 0.10889-0.12555 0.15694-0.060941 0.057425-0.12986 0.098579-0.20487 0.12319-0.075005 0.024611-0.1712 0.036451-0.28722 0.036451h-0.26359l-0.072902 0.37598h-0.30814zm2.4047 0h0.593c0.17814 0 0.30846 0.046985 0.3905 0.14074 0.082036 0.092584 0.10673 0.22392 0.073914 0.39151-0.012892 0.069145-0.036535 0.13225-0.068176 0.18968-0.031643 0.057425-0.073649 0.10889-0.12522 0.15694-0.062111 0.057425-0.1302 0.098579-0.2052 0.12319-0.075005 0.024611-0.1712 0.036451-0.28722 0.036451h-0.26359l-0.072564 0.37598h-0.30848zm-2.1374 0.22275-0.11475 0.59199h0.18732c0.12423 0 0.21683-0.023661 0.27777-0.070539 0.060941-0.046878 0.1021-0.12524 0.12319-0.23423 0.019923-0.10548 0.010324-0.17939-0.028351-0.22275-0.039846-0.043362-0.11704-0.064464-0.23423-0.064464zm2.4047 0-0.11475 0.59199h0.18732c0.12423 0 0.21683-0.023661 0.27777-0.070539 0.060942-0.046877 0.1021-0.12524 0.12319-0.23423 0.01992-0.10548 0.010659-0.17939-0.028012-0.22275-0.039847-0.043362-0.11737-0.064464-0.23457-0.064464z" fill="#8892be" stroke-width=".01172"/>
+</svg>

src/assets/skills/python.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="13.715mm" height="14.082mm" version="1.1" viewBox="0 0 13.715 14.082" xmlns="http://www.w3.org/2000/svg">
+	<g transform="translate(-88.27 -88.449)">
+		<g transform="matrix(3.7826 0 0 3.7826 -393 -511.06)" stroke-width=".013704">
+			<path d="m129.04 159.58c-0.0628 2.9e-4 -0.1228 6e-3 -0.17558 0.015-0.15548 0.0275-0.18371 0.085-0.18371 0.191v0.14003h0.36743v0.0467h-0.50533c-0.10678 0-0.20028 0.0642-0.22953 0.18628-0.0337 0.13996-0.0352 0.22729 0 0.37343 0.0261 0.10878 0.0885 0.18628 0.19527 0.18628h0.12634v-0.16787c0-0.12127 0.10493-0.22825 0.22953-0.22825h0.367c0.10216 0 0.18372-0.0841 0.18372-0.18671v-0.34987c0-0.0996-0.084-0.17438-0.18372-0.191-0.0631-0.0105-0.12861-0.0153-0.19142-0.015zm-0.1987 0.11262c0.0379 0 0.0689 0.0315 0.0689 0.0702 0 0.0386-0.031 0.0698-0.0689 0.0698-0.0381 0-0.069-0.0312-0.069-0.0698 0-0.0387 0.0309-0.0702 0.069-0.0702z" fill="#498abc"/>
+			<path d="m129.46 159.98v0.16316c0 0.12649-0.10725 0.23296-0.22954 0.23296h-0.367c-0.10053 0-0.18371 0.086-0.18371 0.18671v0.34987c0 0.0996 0.0866 0.15815 0.18371 0.18672 0.11631 0.0342 0.22784 0.0404 0.367 0 0.0925-0.0268 0.18372-0.0807 0.18372-0.18672v-0.14003h-0.367v-0.0467h0.55071c0.10678 0 0.14658-0.0745 0.18371-0.18628 0.0384-0.1151 0.0367-0.22578 0-0.37343-0.0264-0.1063-0.0768-0.18628-0.18371-0.18628zm-0.20641 0.88603c0.0381 0 0.0689 0.0312 0.0689 0.0698 0 0.0387-0.0309 0.0702-0.0689 0.0702s-0.069-0.0315-0.069-0.0702c0-0.0386 0.031-0.0698 0.069-0.0698z" fill="#ffd63f"/>
+		</g>
+	</g>
+</svg>

src/assets/skills/qt.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="13.715mm" height="14.082mm" version="1.1" viewBox="0 0 13.715 14.082" xmlns="http://www.w3.org/2000/svg">
+	<title>Foundation/Logo/Qt-logo</title>
+	<g id="a" transform="matrix(.025787 0 0 .025787 2.9856 4.1403)" fill="none" fill-rule="evenodd">
+		<g id="b" transform="translate(-177,-251)" fill="#41cd52">
+			<g id="c" transform="translate(177,251)">
+				<path d="m111.88 57.447c-11.797 0-19.933 4.0086-24.408 12.131-4.373 8.1227-6.6104 20.992-6.6104 38.82 0 17.722 2.1357 30.487 6.407 38.082s12.509 11.498 24.611 11.498c12.102 0 20.238-3.7976 24.509-11.287 4.1696-7.4898 6.3053-20.254 6.3053-38.082 0-17.933-2.1357-30.909-6.5087-39.031-4.373-8.1227-12.509-12.131-24.306-12.131"/>
+				<path d="m219.23 173.77c-10.746 0-18.115-2.4989-22.108-7.4966-3.9905-4.9977-6.0374-14.474-6.0374-28.424v-44.979h-14.533v-17.908h14.533v-28.112h20.572v28.112h26.201v18.012h-26.201v42.586c0 7.912 0.61408 13.118 1.7399 15.618 1.1248 2.603 4.0939 3.8524 8.6994 3.8524l15.557-0.62576 0.9201 16.868c-8.3914 1.6649-14.84 2.4989-19.342 2.4989zm-59.259 20.198-19.548 9.2676-16.887-28.217c-2.4563 0.72883-6.2431 1.1464-11.565 1.1464-19.753 0-33.57-5.4142-41.348-16.244-7.7783-10.827-11.667-28.007-11.667-51.331 0-23.427 3.9915-40.814 11.872-52.163 7.8807-11.35 21.595-17.077 41.143-17.077 19.548 0 33.263 5.6235 41.041 16.972 7.8807 11.245 11.77 28.633 11.77 52.164 0 15.513-1.6375 28.007-4.8103 37.483-3.2761 9.5789-8.4948 16.867-15.864 21.865zm111.46-193.97h-229.77l-41.655 42.376v182.62h258.63l41.655-42.375v-182.62z"/>
+			</g>
+		</g>
+	</g>
+</svg>

src/assets/skills/security.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="13.715mm" height="14.082mm" version="1.1" viewBox="0 0 13.715 14.082" xmlns="http://www.w3.org/2000/svg">
+	<g transform="translate(-88.27 -88.449)">
+		<g transform="matrix(.057303 .057303 .057303 -.057303 88.824 95.155)">
+			<path d="m75 23-25.208 25.208c-2.124-0.768-4.404-1.208-6.792-1.208-11.046 0-20 8.954-20 20s8.954 20 20 20 20-8.954 20-20c0-2.388-0.44-4.668-1.208-6.792l1.208-1.208v-8h8v-8h8v-8h8v-12zm-27.405 53.204c-0.2 0.955-0.869 1.744-1.777 2.1-3.631 1.422-7.918 0.666-10.853-2.269-2.935-2.934-3.691-7.223-2.268-10.855 0.356-0.909 1.146-1.577 2.102-1.776s1.946 0.098 2.636 0.788l9.375 9.375c0.69 0.69 0.985 1.682 0.785 2.637z" fill="#facb1b"/>
+			<path d="m87 23h-12l-25.208 25.208c-2.124-0.768-4.404-1.208-6.792-1.208-11.046 0-20 8.954-20 20 0 5.701 2.397 10.832 6.224 14.475l5.602-5.602c-2.809-2.929-3.526-7.124-2.128-10.693 0.356-0.909 1.146-1.577 2.102-1.776s1.946 0.098 2.636 0.788l4.536 4.536 45.028-45.03z" fill="#fbe158"/>
+			<path d="m55 49c-0.552-0.552-0.552-1.448 0-2l22-22h4l-24 24c-0.552 0.552-1.448 0.552-2 0z" fill="#f3b607"/>
+		</g>
+	</g>
+</svg>

src/assets/skills/ts.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="13.715mm" height="14.082mm" version="1.1" viewBox="0 0 13.715 14.082" xmlns="http://www.w3.org/2000/svg">
+	<title>Foundation/Logo/Qt-logo</title>
+	<path d="m3.624 3.808h6.4666v6.4666h-6.4666zm4.3111 2.5867c-0.47619 0-0.86222 0.38603-0.86222 0.86222 0 0.47619 0.38603 0.86222 0.86222 0.86222h0.43111c0.2381 0 0.43111 0.19301 0.43111 0.43111 0 0.2381-0.19301 0.43111-0.43111 0.43111h-0.43111c-0.23809 0-0.43111-0.19301-0.43111-0.43111h-0.43111c0 0.4762 0.38603 0.86222 0.86222 0.86222h0.43111c0.4762 0 0.86222-0.38602 0.86222-0.86222 0-0.47619-0.38602-0.86222-0.86222-0.86222h-0.43111c-0.23809 0-0.43111-0.19302-0.43111-0.43111 0-0.23809 0.19302-0.43111 0.43111-0.43111h0.50298c0.1984 0 0.35924 0.16085 0.35924 0.35926v0.071853h0.43111v-0.071853c0-0.43651-0.35385-0.79037-0.79035-0.79037zm-3.0178 0h2.1556v0.43111h-0.86222v2.5867h-0.43111v-2.5867h-0.86222z" clip-rule="evenodd" fill="#0077c8" fill-rule="evenodd" stroke-width=".43111"/>
+</svg>

src/assets/skills/unknown.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="13.715mm" height="14.082mm" version="1.1" viewBox="0 0 13.715 14.082" xmlns="http://www.w3.org/2000/svg">
+	<g transform="translate(-88.27 -88.449)">
+		<circle cx="95.127" cy="95.49" r="1.8937" fill="#5e6b8c" style="paint-order:stroke fill markers"/>
+	</g>
+</svg>

src/assets/skills/vue.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="13.715mm" height="14.082mm" version="1.1" viewBox="0 0 13.715 14.082" xmlns="http://www.w3.org/2000/svg">
+	<g transform="translate(-88.27 -88.449)">
+		<g transform="matrix(.027999 0 0 .027999 91.543 92.399)">
+			<path d="M 204.8,0 H 256 L 128,220.8 0,0 H 97.92 L 128,51.2 157.44,0 Z" fill="#41b883"/>
+			<path d="M 0,0 128,220.8 256,0 H 204.8 L 128,132.48 50.56,0 Z" fill="#41b883"/>
+			<path d="M 50.56,0 128,133.12 204.8,0 H 157.44 L 128,51.2 97.92,0 Z" fill="#35495e"/>
+		</g>
+	</g>
+</svg>

src/assets/skills/webpack.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="13.715mm" height="14.082mm" version="1.1" viewBox="0 0 13.715 14.082" xmlns="http://www.w3.org/2000/svg">
+	<g transform="translate(-88.27 -88.449)">
+		<g transform="matrix(.0067198 0 0 .0067198 91.095 91.458)">
+			<path d="m600 0 530.3 300v600l-530.3 300-530.3-300v-600z" fill="#fff"/>
+			<path d="m1035.6 879.3-418.1 236.5v-184.2l260.5-143.3zm28.6-25.9v-494.6l-153 88.3v317.9zm-901.5 25.9 418.1 236.5v-184.2l-260.5-143.3zm-28.6-25.9v-494.6l153 88.3v317.9zm17.9-526.6 428.8-242.6v178.1l-274.7 151.1-2.1 1.2zm894.3 0-428.8-242.6v178.1l274.7 151.1 2.1 1.2z" fill="#8ed6fb"/>
+			<path d="m580.8 889.7-257-141.3v-280l257 148.4v272.9m36.7 0 257-141.3v-280l-257 148.4v272.9m-276.3-453.7 258-141.9 258 141.9-258 149-258-149" fill="#1c78c0"/>
+		</g>
+	</g>
+</svg>

src/components/Home.vue

@@ -34,7 +34,7 @@
 		width: $width;
 		height: $height;
 
-		background: #07142d;
+		background: #202228;
 	}
 
 	@keyframes wave-x {

src/components/SkillCard.vue

@@ -0,0 +1,160 @@
+<template>
+	<div class='skill-card' ref='root' :data-active='active ? "1" : "0"' @click='onClick()'>
+		<img class='icon' :src='icon()' />
+		<span class='name'>
+			<span v-html='name()'></span>
+		</span>
+	</div>
+</template>
+
+<script lang="ts">
+	import { Component, Prop, Vue } from 'vue-property-decorator';
+	import { tID, Skills } from '@/model/skills';
+
+	@Component({})
+	export default class SkillCard extends Vue {
+		// id of the skill to display (string representation)
+		@Prop(String) readonly id: string|undefined;
+
+		// undefined -> automatic size
+		// value     -> fixed size applied (valid css value with unit)
+		@Prop(String) readonly width: string|undefined;
+
+		// whether it has the active style
+		@Prop(Boolean) active: boolean|undefined;
+
+		// whether id is a folder name to display
+		@Prop(String) folder: string|undefined;
+
+		protected mounted() {
+			if( this.width == undefined ){
+				return;
+			}
+			const el = this.$refs.root as HTMLElement;
+			el.style.width = this.width;
+		}
+
+		private tid(): tID|null {
+			if( this.id == undefined ){
+				return null;
+			}
+			const id = parseInt(this.id!) as tID;
+			if( Skills[id] == undefined ){
+				return null;
+			}
+			return id;
+		}
+
+		protected icon(): string {
+			if( this.folder == '1' ){
+				return require('../assets/skills/folder.svg');
+			}
+			let icon: string|null = null;
+			if( this.tid() != undefined ){
+				icon = Skills[this.tid()!].icon;
+			}
+			if( icon == null ){
+				return require('../assets/skills/unknown.svg');
+			}
+			return require(`../assets/${icon}`);
+		}
+
+		protected name(): string {
+			if( this.folder == '1' ){
+				return this.id!;
+			}
+			if( this.tid() != undefined ){
+				return Skills[this.tid()!].name!;
+			}
+			return '?';
+		}
+
+		private onClick(e: MouseEvent) {
+			this.$emit('pick', !this.active);
+		}
+	}
+
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+
+	$height: 2em;
+	$active-border: .2em;
+
+	.skill-card {
+		display: inline-flex;
+		position: relative;
+			width: auto;
+			height: $height;
+
+		font-size: 1.4rem;
+
+		background: #2a2e36;
+		border-radius: .3rem / .3rem;
+		transition: background .1s ease-in-out;
+
+		flex-flow: row nowrap;
+		align-items: center;
+
+		user-select: none;
+		cursor: pointer;
+
+		.icon {
+			display: block;
+			position: relative;
+				height: $height;
+				width: $height;
+
+			background: #323945;
+			border-radius: .3rem / .3rem;
+			border-top-right-radius: 0;
+			border-bottom-right-radius: 0;
+
+			transition: background .1s ease-in-out;
+		}
+
+		.name {
+			display: flex;
+			position: relative;
+				height: $height;
+
+			color: #fff;
+			font-weight: 400;
+			white-space: nowrap;
+			padding: 0 .6em;
+
+			span {
+				text-overflow: ellipsis;
+				overflow: hidden;
+			}
+			overflow: hidden;
+
+			flex-flow: row nowrap;
+			align-items: center;
+
+			border-left: $active-border solid transparent;
+			transition: border-color .1s ease-in-out;
+		}
+
+		&:hover{
+			background: #383d45;
+			.icon {
+				background: #3c4150;
+			}
+		}
+
+		&[data-active="1"]{
+			background: #444952;
+
+			.icon {
+				background: #3c4150;
+			}
+
+			.name {
+				border-color: #41b883;
+			}
+		}
+	}
+
+</style>

src/components/SkillPicker.vue

@@ -0,0 +1,244 @@
+<template>
+	<div id='skill-picker'>
+
+		<div class='container'>
+
+			<section class='categories'>
+				<SkillCard v-for='(t) of tags'
+					:key='t'
+					:id='t'
+					:active='t == tag'
+					folder='1'
+					width='18rem'
+					@pick='onTag(t, $event)'/>
+			</section>
+
+			<section class='skills'>
+				<SkillCard v-for='(id) of ids'
+					:key='id'
+					v-show='hide.indexOf(id) < 0'
+					:id='id'
+					:active='id == sel'
+					width='18rem'
+					@pick='onPick(id, $event)' />
+			</section>
+
+		</div>
+
+		<button v-show='this.sel != null'>Browse projects</button>
+
+	</div>
+</template>
+
+<script lang="ts">
+	import { Component, Vue } from 'vue-property-decorator';
+	import SkillCard from './SkillCard.vue';
+	import { tID, Skills } from '@/model/skills';
+
+	@Component({
+		components: {
+			SkillCard,
+		},
+	})
+	export default class SkillPicker extends Vue {
+		// list of available skills
+		readonly ids: string[] = Object.keys(Skills);
+		// currently selected skill
+		private sel: string|null = tID.Vue.toString();
+
+		// list of ids to hide according to the current tag
+		private hide: string[] = [];
+
+		// available categories (tags)
+		private tags: string[] = [];
+		// currently selected tag
+		private tag: string|null = "web";
+
+		private mounted() {
+			this.tags = this.fetchTags();
+			this.filterByTag();
+		}
+
+		private fetchTags(): string[] {
+			const tags: string[] = [];
+
+			for( const sid of this.ids ){
+				const id    = parseInt(sid) as tID;
+				const skill = Skills[id];
+				if( skill == undefined ){
+					continue;
+				}
+				for( const tag of skill.tags ){
+					if( tags.indexOf(tag) < 0 ){
+						tags.push(tag);
+					}
+				}
+			}
+			return tags;
+		}
+
+		private onPick(id: string, picked: boolean){
+			if( picked ){ // select
+				this.sel = id;
+				return;
+			}
+			if( !picked && id == this.sel ){ // deselect
+				this.sel = null;
+				return;
+			}
+		}
+		private onTag(t: string, picked: boolean){
+			if( picked ){ // select
+				this.tag = t;
+				this.filterByTag();
+				return;
+			}
+			if( !picked && t == this.tag ){ // deselect
+				this.tag = null;
+				this.filterByTag();
+				return;
+			}
+		}
+
+		// apply filter by tag
+		private filterByTag(){
+			const tag = this.tag;
+
+			// no folder selected -> hide everything
+			if( tag == null || this.tags.indexOf(tag) < 0 ){
+				this.tag = null;
+				this.hide = this.ids;
+
+				// deselect if selection has been filtered out
+				if( this.sel != null && this.hide.indexOf(this.sel) >= 0 ){
+					this.sel = null;
+				}
+				return;
+			}
+
+			// clear filter
+			this.hide = [];
+
+			for( const sid of this.ids ){
+				const id    = parseInt(sid) as tID;
+				const skill = Skills[id];
+				if( skill == undefined ){
+					continue;
+				}
+				if( skill.tags.indexOf(tag) < 0 ){
+					this.hide.push(sid);
+					continue;
+				}
+			}
+			// deselect if selection has been filtered out
+			if( this.sel != null && this.hide.indexOf(this.sel) >= 0 ){
+				this.sel = null;
+			}
+		}
+	}
+
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+
+	$page-margin: 3rem;
+
+	#skill-picker {
+		display: block;
+		position: relative;
+			top: 0;
+			left: 0;
+			width: 100vw;
+			height: 100vh;
+
+		background: linear-gradient(45deg, #564ba4, #745cfc);
+
+		.container {
+			display: flex;
+			position: relative;
+				width:  calc( 100vw - #{2*$page-margin} );
+				height: calc( 100vh - #{2*$page-margin} );
+				margin: $page-margin;
+
+			background: #202228;
+
+			border-radius: 1em / 1em;
+
+			padding: 2em;
+
+			flex-flow: row nowrap;
+		}
+	}
+
+	.categories {
+		display: flex;
+			height: 100%;
+			width: 20em;
+
+		flex-flow: column nowrap;
+		align-items: flex-start;
+		justify-content: flex-start;
+
+		overflow: hidden;
+		overflow-y: visible;
+
+		.skill-card {
+			margin: .3em 0;
+		}
+	}
+
+	.skills {
+		display: flex;
+			height: 100%;
+			width: 20em;
+
+		flex-flow: column nowrap;
+		align-items: flex-start;
+		justify-content: flex-start;
+
+		overflow: hidden;
+		overflow-y: visible;
+
+		.skill-card {
+			margin: .3em 0;
+		}
+	}
+
+	button {
+		display: block;
+		position: absolute;
+			top: calc( 100% - #{$page-margin} );
+			left: 50%;
+
+		padding: .6em 2em;
+
+		color: #202228;
+		font-size: 1.4rem;
+		font-weight: 600;
+		background: #fff;
+
+		border: none;
+		border-radius: 2em;
+
+		box-shadow: 0 0 .5em transparent;
+
+		transform-style: preserve-3d;
+		transform: translateX(-50%) translateY(-50%);
+
+		cursor: pointer;
+
+		transition: box-shadow .2s ease-in-out,
+					transform .2s ease-in-out,
+					color .2s ease-in-out;
+
+		z-index: 10;
+
+		&:hover {
+			color: #000;
+			box-shadow: 0 0 .3em #191b1f;
+			transform: translateX(-50%) translateY(-50%) scale(1.05);
+		}
+	}
+
+</style>

src/components/Timeline.vue

@@ -121,6 +121,7 @@
 
 	$icon-width: 2.3rem;
 	$space-width: 1rem;
+	$bg-color: #202228;
 
 	#timeline {
 		display: grid;
@@ -134,7 +135,7 @@
 		font-size: 1.6rem;
 		font-weight: 400;
 		color: #fff;
-		background: #161619;
+		background: $bg-color;
 
 		padding: 0 5rem;
 
@@ -157,7 +158,7 @@
 			height: #{$icon-width + .3rem};
 			margin-top: .3rem;
 
-			background: #161619;
+			background: $bg-color;
 		}
 		.src-icon, .doc-icon, .end-icon {
 			position: relative;
@@ -166,7 +167,7 @@
 			height: #{$icon-width + .1rem};
 			margin-top: .1rem;
 
-			background: #161619;
+			background: $bg-color;
 		}
 
 		.start {
@@ -183,7 +184,7 @@
 
 			padding-top: -.2rem;
 
-			background: #161619;
+			background: $bg-color;
 		}
 		.name, .end {
 			b {
@@ -232,7 +233,7 @@
 				margin-bottom: .4em;
 
 				color: #fff;
-				background: #28282d;
+				background: #34343b;
 
 				border-radius: .4em / .4em;
 
@@ -251,9 +252,9 @@
 			padding-bottom: 2em;
 			margin-bottom: 1.5em;
 
-			background: #28282d;
+			background: #34343b;
 
-			border: .1rem solid #2f2f33;
+			border: .1rem solid #45454b;
 			border-radius: .4em / .4em;
 			z-index: 100;
 
@@ -269,8 +270,8 @@
 					width: 100%;
 					height: 100%;
 
-				background: #202024;
+				background: darken(#34343b, 4%);
-				border: .1rem solid #2f2f33;
+				border: .1rem solid darken(#45454b, 4%);
 				border-radius: .4em / .4em;
 
 				transform: translateZ(-1px);

src/model/skills.ts

@@ -47,9 +47,10 @@ export enum tID {
 }
 
 interface tSkill {
-	icon: string;
+	icon: string|null;
 	name: string;
 	link: string;
+	tags: string[];
 }
 
 export type tSkills = { [id in tID]: tSkill };
@@ -59,232 +60,277 @@ export const Skills: tSkills = {
 		name: 'MariaDB',
 		link: 'https://mariadb.org',
 		icon: 'skills/mariadb.svg',
+		tags: ['web', 'storage'],
 	},
 	[tID.Postgres]: {
 		name: 'PostgreSQL',
 		link: 'https://postgresql.org',
 		icon: 'skills/postgres.svg',
+		tags: ['web', 'storage'],
 	},
 	[tID.Mongo]: {
 		name: 'MongoDB',
 		link: 'https://mongodb.com',
 		icon: 'skills/mongo.svg',
+		tags: ['web', 'storage'],
 	},
 
 	[tID.Vue]: {
 		name: 'Vue <i>(.js)</i>',
 		link: 'https://vuejs.org',
 		icon: 'skills/vue.svg',
+		tags: ['web', 'UI'],
 	},
 	[tID.Angular]: {
 		name: 'Angular <i>(7+)</i>',
 		link: 'https://angular.io',
 		icon: 'skills/angular.svg',
+		tags: ['web', 'UI'],
 	},
 	[tID.Parcel]: {
 		name: 'Parcel',
 		link: 'https://parceljs.org/',
 		icon: 'skills/parcel.svg',
+		tags: ['web'],
 	},
 	[tID.Cordova]: {
 		name: 'Apache Cordova',
 		link: 'https://cordova.apache.org/',
 		icon: 'skills/cordova.svg',
+		tags: ['system', 'web', 'mobile'],
 	},
 	[tID.Webpack]: {
 		name: 'Webpack',
 		link: 'https://webpack.js.org/',
 		icon: 'skills/webpack.svg',
+		tags: ['web'],
 	},
 
 	[tID.WebGL]: {
 		name: 'WebGL',
 		link: 'https://www.khronos.org/webgl/',
-		icon: 'skills/web-gl.svg',
+		icon: null,
+		tags: ['web'],
 	},
 	[tID.AudioAPI]: {
 		name: 'Audio API',
 		link: 'https://webaudio.github.io/web-audio-api/',
-		icon: 'skills/audio-api.svg',
+		icon: null,
+		tags: ['web'],
 	},
 	[tID.Websocket]: {
 		name: 'Websocket',
 		link: 'https://tools.ietf.org/html/rfc6455',
-		icon: 'skills/websocket.svg',
+		icon: null,
+		tags: ['web', 'networking', 'IoT'],
 	},
 
 	[tID.Docker]: {
 		name: 'Docker',
 		link: 'https://docker.com',
 		icon: 'skills/docker.svg',
+		tags: ['web', 'system'],
 	},
 	[tID.Bash]: {
 		name: 'bash',
 		link: 'https://www.gnu.org/software/bash/',
-		icon: 'skills/bash.svg',
+		icon: null,
+		tags: ['system'],
 	},
 	[tID.Linux]: {
 		name: 'GNU/Linux',
 		link: 'https://www.linux.org',
 		icon: 'skills/linux.svg',
+		tags: ['system'],
 	},
 	[tID.Systemd]: {
 		name: 'systemd',
 		link: 'https://freedesktop.org/wiki/Software/systemd/',
-		icon: 'skills/systemd.svg',
+		icon: null,
+		tags: ['system'],
 	},
 	[tID.Git]: {
 		name: 'Git',
 		link: 'https://git-scm.com/',
 		icon: 'skills/git.svg',
+		tags: ['system', 'organization'],
 	},
 	[tID.Rpm]: {
 		name: 'RPM packaging',
 		link: 'https://rpm.org/',
-		icon: 'skills/rpm.svg',
+		icon: null,
+		tags: ['system'],
 	},
 
 	[tID.RaspBerry]: {
 		name: 'Raspberry',
 		link: 'https://raspberrypi.org',
 		icon: 'skills/raspberry.svg',
+		tags: ['system', 'IoT'],
 	},
 	[tID.Arduino]: {
 		name: 'Arduino',
 		link: 'https://arduino.cc',
 		icon: 'skills/arduino.svg',
+		tags: ['system', 'IoT'],
 	},
 
 	[tID.Php]: {
 		name: 'PHP',
 		link: 'https://www.php.net',
 		icon: 'skills/php.svg',
+		tags: ['language', 'web', 'IoT'],
 	},
 	[tID.Html]: {
 		name: 'HTML5',
 		link: 'https://www.w3.org/standards/webdesign/htmlcss',
 		icon: 'skills/html.svg',
+		tags: ['language', 'web', 'UI'],
 	},
 	[tID.Css]: {
 		name: 'CSS3',
 		link: 'https://www.w3.org/standards/webdesign/htmlcss',
 		icon: 'skills/css.svg',
+		tags: ['language', 'web', 'UI'],
 	},
 	[tID.Js]: {
 		name: 'Javascript',
 		link: 'http://www.ecma-international.org/publications-and-standards/standards/ecma-262/',
 		icon: 'skills/js.svg',
+		tags: ['language', 'web', 'UI'],
 	},
 	[tID.Ajax]: {
 		name: 'AJAX',
 		link: 'https://www.w3schools.com/xml/ajax_intro.asp',
-		icon: 'skills/ajax.svg',
+		icon: null,
+		tags: ['web', 'networking'],
 	},
 	[tID.Ts]: {
 		name: 'Typescript',
 		link: 'https://www.typescript.org/',
 		icon: 'skills/ts.svg',
+		tags: ['language', 'web', 'UI'],
 	},
 	[tID.C]: {
 		name: 'C (lang)',
 		link: 'https://www.open-std.org/jtc1/sc22/wg14/',
 		icon: 'skills/c.svg',
+		tags: ['language', 'system'],
 	},
 	[tID.Cpp]: {
 		name: 'C++',
 		link: 'https://isocpp.org/',
 		icon: 'skills/cpp.svg',
+		tags: ['language', 'system'],
 	},
 	[tID.Python]: {
 		name: 'Python',
 		link: 'https://python.org/',
 		icon: 'skills/python.svg',
+		tags: ['language', 'system'],
 	},
 	[tID.Go]: {
 		name: 'Go (lang)',
 		link: 'https://go.dev',
 		icon: 'skills/go.svg',
+		tags: ['language', 'system', 'IoT', 'networking'],
 	},
 
 	[tID.Qt]: {
 		name: 'Qt',
 		link: 'https://qt.io',
 		icon: 'skills/qt.svg',
+		tags: ['language', 'system', 'IoT', 'networking'],
 	},
 
 	[tID.OpenSource]: {
 		name: 'Open-source',
 		link: 'https://opensource.org/',
-		icon: 'skills/open-source.svg',
+		icon: null,
+		tags: ['human'],
 	},
 	[tID.Electronics]: {
 		name: 'Electronics',
 		link: 'https://en.wikipedia.org/wiki/Electronics',
 		icon: 'skills/electronics.svg',
+		tags: ['other', 'IoT'],
 	},
 	[tID.Web]: {
 		name: 'Web',
 		link: 'https://en.wikipedia.org/wiki/World_Wide_Web',
-		icon: 'skills/web.svg',
+		icon: null,
+		tags: ['web'],
 	},
 	[tID.Rest]: {
 		name: 'REST',
 		link: 'https://en.wikipedia.org/wiki/Representational_state_transfer',
-		icon: 'skills/rest.svg',
+		icon: null,
+		tags: ['web', 'networking'],
 	},
 	[tID.Crypto]: {
-		name: 'Cryptography',
+		name: 'Security/crypto',
 		link: 'https://en.wikipedia.org/wiki/Cryptography',
-		icon: 'skills/crypto.svg',
+		icon: 'skills/security.svg',
+		tags: ['system', 'networking'],
 	},
 	[tID.ImageProcessing]: {
 		name: 'Image processing',
 		link: 'https://en.wikipedia.org/wiki/Digital_image_processing',
 		icon: 'skills/image-processing.svg',
+		tags: ['system'],
 	},
 	[tID.AI]: {
 		name: 'Artificial Intelligence',
 		link: 'https://en.wikipedia.org/wiki/Artificial_intelligence',
-		icon: 'skills/ai.svg',
+		icon: null,
+		tags: ['other'],
 	},
 	[tID.DeepLearning]: {
 		name: 'Deep Learning',
 		link: 'https://en.wikipedia.org/wiki/Deep_learning',
-		icon: 'skills/deep-learning.svg',
+		icon: null,
+		tags: ['other'],
 	},
 	[tID.NeuralNetwork]: {
 		name: 'Neural Networks',
 		link: 'https://en.wikipedia.org/wiki/Artificial_neural_network',
-		icon: 'skills/neural-network.svg',
+		icon: null,
+		tags: ['other'],
 	},
 	[tID.Opti]: {
 		name: 'Program optimization',
 		link: 'https://en.wikipedia.org/wiki/Program_optimization',
 		icon: 'skills/opti.svg',
+		tags: ['system', 'networking'],
 	},
 	[tID.Sockets]: {
 		name: 'Sockets',
 		link: 'https://en.wikipedia.org/wiki/Computer_network_programming',
-		icon: 'skills/sockets.svg',
+		icon: null,
+		tags: ['system', 'networking', 'IoT', 'web'],
 	},
 	[tID.Concurrency]: {
-		name: 'Concurrent programming',
+		name: 'Concurrency',
 		link: 'https://en.wikipedia.org/wiki/Concurrent_computing',
-		icon: 'skills/concurrency.svg',
+		icon: null,
+		tags: ['system', 'networking'],
 	},
 	[tID.UIUX]: {
 		name: 'UI/UX',
 		link: 'https://en.wikipedia.org/wiki/UX',
-		icon: 'skills/ux.svg',
+		icon: null,
+		tags: ['system', 'web', 'IoT'],
 	},
 	[tID.Inkscape]: {
 		name: 'Inkscape',
 		link: 'https://inkscape.org/',
 		icon: 'skills/inkscape.svg',
+		tags: ['UI', 'web', 'organization'],
 	},
 	[tID.RnD]: {
 		name: 'R&D',
 		link: 'https://en.wikipedia.org/wiki/R&D',
-		icon: 'skills/rnd.svg',
+		icon: null,
+		tags: ['organization'],
 	},
 };