From 1a414fe9f080177f80d97da95024a373ead7490b Mon Sep 17 00:00:00 2001 From: Yohan Boujon Date: Sun, 19 Nov 2023 18:57:55 +0100 Subject: [PATCH] Frontend: Added Programming Languages section. --- frontend/package-lock.json | 108 +++++++++++++++++++++++- frontend/package.json | 4 +- frontend/src/lib/components/pill.svelte | 28 ++++++ frontend/src/lib/css/base.css | 1 + frontend/src/lib/css/cv.css | 7 ++ frontend/src/lib/css/pill.css | 23 +++++ frontend/src/routes/+page.svelte | 6 ++ 7 files changed, 175 insertions(+), 2 deletions(-) create mode 100644 frontend/src/lib/components/pill.svelte create mode 100644 frontend/src/lib/css/pill.css diff --git a/frontend/package-lock.json b/frontend/package-lock.json index bd393ef..a3f6a8d 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -8,8 +8,10 @@ "name": "curriculum-vitae", "version": "0.0.1", "dependencies": { + "@icons-pack/svelte-simple-icons": "^3.0.0", "@jamescoyle/svelte-icon": "^0.1.1", - "@mdi/js": "^7.3.67" + "@mdi/js": "^7.3.67", + "simple-icons": "^9.21.0" }, "devDependencies": { "@sveltejs/adapter-auto": "^2.0.0", @@ -32,6 +34,30 @@ "node": ">=6.0.0" } }, + "node_modules/@changesets/changelog-github": { + "version": "0.4.8", + "resolved": "https://registry.npmjs.org/@changesets/changelog-github/-/changelog-github-0.4.8.tgz", + "integrity": "sha512-jR1DHibkMAb5v/8ym77E4AMNWZKB5NPzw5a5Wtqm1JepAuIF+hrKp2u04NKM14oBZhHglkCfrla9uq8ORnK/dw==", + "dependencies": { + "@changesets/get-github-info": "^0.5.2", + "@changesets/types": "^5.2.1", + "dotenv": "^8.1.0" + } + }, + "node_modules/@changesets/get-github-info": { + "version": "0.5.2", + "resolved": "https://registry.npmjs.org/@changesets/get-github-info/-/get-github-info-0.5.2.tgz", + "integrity": "sha512-JppheLu7S114aEs157fOZDjFqUDpm7eHdq5E8SSR0gUBTEK0cNSHsrSR5a66xs0z3RWuo46QvA3vawp8BxDHvg==", + "dependencies": { + "dataloader": "^1.4.0", + "node-fetch": "^2.5.0" + } + }, + "node_modules/@changesets/types": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/@changesets/types/-/types-5.2.1.tgz", + "integrity": "sha512-myLfHbVOqaq9UtUKqR/nZA/OY7xFjQMdfgfqeZIBK4d0hA6pgxArvdv8M+6NUzzBsjWLOtvApv8YHr4qM+Kpfg==" + }, "node_modules/@esbuild/android-arm": { "version": "0.18.20", "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.18.20.tgz", @@ -393,6 +419,23 @@ "node": ">=14" } }, + "node_modules/@icons-pack/svelte-simple-icons": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@icons-pack/svelte-simple-icons/-/svelte-simple-icons-3.0.0.tgz", + "integrity": "sha512-jMa219mov56aUieU3n0HujxYc9NEv9aPusFN4B7tF+2+xFNpUNJ/RaHpvXnhEdBYsq8R/HnxCdmYnAx/XPjKIA==", + "dependencies": { + "@changesets/changelog-github": "^0.4.4", + "svelte": "^3.23.2" + } + }, + "node_modules/@icons-pack/svelte-simple-icons/node_modules/svelte": { + "version": "3.59.2", + "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.59.2.tgz", + "integrity": "sha512-vzSyuGr3eEoAtT/A6bmajosJZIUWySzY2CzB3w2pgPvnkUjGqlDnsNnA0PMO+mMAhuyMul6C2uuZzY6ELSkzyA==", + "engines": { + "node": ">= 8" + } + }, "node_modules/@jamescoyle/svelte-icon": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/@jamescoyle/svelte-icon/-/svelte-icon-0.1.1.tgz", @@ -706,6 +749,11 @@ "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0" } }, + "node_modules/dataloader": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/dataloader/-/dataloader-1.4.0.tgz", + "integrity": "sha512-68s5jYdlvasItOJnCuI2Q9s4q98g0pCyL3HrcKJu8KNugUl8ahgmZYg38ysLTgQjjXX3H8CJLkAvWrclWfcalw==" + }, "node_modules/debug": { "version": "4.3.4", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", @@ -747,6 +795,14 @@ "integrity": "sha512-KqFl6pOgOW+Y6wJgu80rHpo2/3H07vr8ntR9rkkFIRETewbf5GaYYcakYfiKz89K+sLsuPkQIZaXDMjUObZwWg==", "dev": true }, + "node_modules/dotenv": { + "version": "8.6.0", + "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.6.0.tgz", + "integrity": "sha512-IrPdXQsk2BbzvCBGBOTmmSH5SodmqZNt4ERAZDmW4CT+tL8VtvinqywuANaFu4bOMWki16nqf0e4oC0QIaDr/g==", + "engines": { + "node": ">=10" + } + }, "node_modules/electron-to-chromium": { "version": "1.4.581", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.581.tgz", @@ -947,6 +1003,25 @@ "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" } }, + "node_modules/node-fetch": { + "version": "2.7.0", + "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz", + "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==", + "dependencies": { + "whatwg-url": "^5.0.0" + }, + "engines": { + "node": "4.x || >=6.0.0" + }, + "peerDependencies": { + "encoding": "^0.1.0" + }, + "peerDependenciesMeta": { + "encoding": { + "optional": true + } + } + }, "node_modules/node-releases": { "version": "2.0.13", "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.13.tgz", @@ -1047,6 +1122,18 @@ "integrity": "sha512-RVnVQxTXuerk653XfuliOxBP81Sf0+qfQE73LIYKcyMYHG94AuH0kgrQpRDuTZnSmjpysHmzxJXKNfa6PjFhyQ==", "dev": true }, + "node_modules/simple-icons": { + "version": "9.21.0", + "resolved": "https://registry.npmjs.org/simple-icons/-/simple-icons-9.21.0.tgz", + "integrity": "sha512-yxjs49nKwff5ozRwPCBVcGG4Ehlg5YiR1g4EJ83zmqc0hYhYb6UQJqiy2WOga2OJ1/qVHaej7q762hYZX/mavA==", + "engines": { + "node": ">=0.12.18" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/simple-icons" + } + }, "node_modules/sirv": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/sirv/-/sirv-2.0.3.tgz", @@ -1125,6 +1212,11 @@ "node": ">=6" } }, + "node_modules/tr46": { + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz", + "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==" + }, "node_modules/undici": { "version": "5.26.5", "resolved": "https://registry.npmjs.org/undici/-/undici-5.26.5.tgz", @@ -1235,6 +1327,20 @@ "optional": true } } + }, + "node_modules/webidl-conversions": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz", + "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==" + }, + "node_modules/whatwg-url": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz", + "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==", + "dependencies": { + "tr46": "~0.0.3", + "webidl-conversions": "^3.0.0" + } } } } diff --git a/frontend/package.json b/frontend/package.json index 504ab6c..c92eae8 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -16,7 +16,9 @@ }, "type": "module", "dependencies": { + "@icons-pack/svelte-simple-icons": "^3.0.0", "@jamescoyle/svelte-icon": "^0.1.1", - "@mdi/js": "^7.3.67" + "@mdi/js": "^7.3.67", + "simple-icons": "^9.21.0" } } diff --git a/frontend/src/lib/components/pill.svelte b/frontend/src/lib/components/pill.svelte new file mode 100644 index 0000000..7de8ed6 --- /dev/null +++ b/frontend/src/lib/components/pill.svelte @@ -0,0 +1,28 @@ + + +
+ {#if type_icon === "simpleicons"} + {name} + {:else} + + {/if} +

{name}

+
diff --git a/frontend/src/lib/css/base.css b/frontend/src/lib/css/base.css index c2bd374..338b44b 100644 --- a/frontend/src/lib/css/base.css +++ b/frontend/src/lib/css/base.css @@ -10,4 +10,5 @@ html { --color-special: #0174BE; --color-text: #261C2C; --color-background: #F8F1F1; + --color-pill: #D0D4CA; } \ No newline at end of file diff --git a/frontend/src/lib/css/cv.css b/frontend/src/lib/css/cv.css index a1bd69a..e95685f 100644 --- a/frontend/src/lib/css/cv.css +++ b/frontend/src/lib/css/cv.css @@ -65,4 +65,11 @@ h2 { font-family: 'Urbanist', sans-serif; font-weight: 500; font-size: 1.5rem; +} + +.subsection { + margin-left: 3rem; + display: flex; + flex-direction: row; + flex-wrap: wrap; } \ No newline at end of file diff --git a/frontend/src/lib/css/pill.css b/frontend/src/lib/css/pill.css new file mode 100644 index 0000000..5579115 --- /dev/null +++ b/frontend/src/lib/css/pill.css @@ -0,0 +1,23 @@ +.pill-container { + margin: 0.5rem; + padding-right: 1rem; + padding-left: 1rem; + border-radius: 3rem; + background-color: #000000; + color: var(--color-background); + display: flex; + flex-direction: row; + width: fit-content; + justify-content: center; + align-items: center; + font-family: 'Urbanist', sans-serif; + font-weight: 700; +} + +.pill-white { + filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(19deg) brightness(116%) contrast(113%); +} + +.pill-container img, svg { + margin: 0.5rem; +} \ No newline at end of file diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte index fc9f3d2..57c2a58 100644 --- a/frontend/src/routes/+page.svelte +++ b/frontend/src/routes/+page.svelte @@ -25,6 +25,7 @@ import Experience from "$lib/components/experience.svelte"; import Projects from "$lib/components/projects.svelte" import SlideShow from "$lib/components/slideshow.svelte"; + import Pill from "$lib/components/pill.svelte" import { mdiSchool, mdiBriefcase, mdiWrench, mdiPencil } from "@mdi/js"; import { onMount } from "svelte"; @@ -114,6 +115,11 @@ />
+
+ {#each cv.skills.programming_languages as pilldata} + + {/each} +