Frontend: Added Programming Languages section.
This commit is contained in:
parent
3db3f2e129
commit
1a414fe9f0
7 changed files with 175 additions and 2 deletions
108
frontend/package-lock.json
generated
108
frontend/package-lock.json
generated
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
28
frontend/src/lib/components/pill.svelte
Normal file
28
frontend/src/lib/components/pill.svelte
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
<script>
|
||||
import SvgIcon from "@jamescoyle/svelte-icon";
|
||||
import "$lib/css/pill.css";
|
||||
import { mdiHelp } from "@mdi/js";
|
||||
|
||||
export let name = "Unknown";
|
||||
export let icon = mdiHelp;
|
||||
export let color = "#000000";
|
||||
export let type_icon = "mdi";
|
||||
|
||||
const style = `background-color: ${color};
|
||||
box-shadow: 0px 8px 18px -1px ${color}40;`;
|
||||
</script>
|
||||
|
||||
<div class="pill-container" {style}>
|
||||
{#if type_icon === "simpleicons"}
|
||||
<img
|
||||
class="pill-white"
|
||||
height="20"
|
||||
width="20"
|
||||
src="https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/{icon}.svg"
|
||||
alt={name}
|
||||
/>
|
||||
{:else}
|
||||
<SvgIcon type="mdi" path={icon} size="20" />
|
||||
{/if}
|
||||
<p>{name}</p>
|
||||
</div>
|
||||
|
|
@ -10,4 +10,5 @@ html {
|
|||
--color-special: #0174BE;
|
||||
--color-text: #261C2C;
|
||||
--color-background: #F8F1F1;
|
||||
--color-pill: #D0D4CA;
|
||||
}
|
||||
|
|
@ -66,3 +66,10 @@ h2 {
|
|||
font-weight: 500;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.subsection {
|
||||
margin-left: 3rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
23
frontend/src/lib/css/pill.css
Normal file
23
frontend/src/lib/css/pill.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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 @@
|
|||
/>
|
||||
<Section icon={mdiPencil} title="Skills" />
|
||||
<SubSection icon={mdiXml} title="Programming Languages"/>
|
||||
<div class="subsection">
|
||||
{#each cv.skills.programming_languages as pilldata}
|
||||
<Pill name={pilldata.lang} type_icon={pilldata.type_icon} icon={pilldata.icon} color={pilldata.color}/>
|
||||
{/each}
|
||||
</div>
|
||||
<SubSection icon={mdiApplication} title="Softwares"/>
|
||||
<SubSection icon={mdiEarth} title="Languages"/>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue