From 64389fa2586d9b82be30c239d4ceb8bb91cc712b Mon Sep 17 00:00:00 2001 From: Gianmarco Pettinato Date: Sun, 22 Jan 2023 01:17:22 +0100 Subject: [PATCH] base mobile menu done --- package-lock.json | 125 ++++++++++++++++- package.json | 9 +- src/app.scss | 75 ++++++----- src/elements/Skills copy.svelte | 37 +++++ src/lib/elements/AboutMe.svelte | 33 +++-- src/lib/elements/Contacts.svelte | 34 ++++- src/lib/elements/JobElement.svelte | 9 +- src/lib/elements/Jobs.svelte | 3 +- src/lib/elements/LanguageSelector.svelte | 20 +++ src/lib/elements/Menu.svelte | 156 ++++++++++++--------- src/lib/elements/MenuMobile.svelte | 164 +++++++++++++++++++++++ src/lib/elements/Training.svelte | 8 +- src/lib/model/job.d.ts | 5 - src/lib/model/schema.json | 15 ++- src/lib/types.ts | 13 ++ src/routes/+page.svelte | 66 ++++----- src/routes/blog/+page.svelte | 10 +- src/routes/blog/[slug]/+page.svelte | 3 +- svelte.config.js | 1 + 19 files changed, 598 insertions(+), 188 deletions(-) create mode 100644 src/elements/Skills copy.svelte create mode 100644 src/lib/elements/LanguageSelector.svelte create mode 100644 src/lib/elements/MenuMobile.svelte create mode 100644 src/lib/types.ts diff --git a/package-lock.json b/package-lock.json index 249a036..4ab84a2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,9 +8,14 @@ "name": "mycv", "version": "0.0.1", "dependencies": { + "@fortawesome/fontawesome-svg-core": "^6.2.1", + "@fortawesome/free-brands-svg-icons": "^6.2.1", + "@fortawesome/free-solid-svg-icons": "^6.2.1", + "@fortawesome/svelte-fontawesome": "^0.2.0", "json-schema-to-typescript": "^10.1.5", "markdown-it": "^12.2.0", - "punycode": "^2.1.1" + "punycode": "^2.1.1", + "typesafe-i18n": "^5.20.0" }, "devDependencies": { "@playwright/test": "^1.28.1", @@ -422,6 +427,60 @@ "url": "https://opencollective.com/eslint" } }, + "node_modules/@fortawesome/fontawesome-common-types": { + "version": "6.2.1", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.2.1.tgz", + "integrity": "sha512-Sz07mnQrTekFWLz5BMjOzHl/+NooTdW8F8kDQxjWwbpOJcnoSg4vUDng8d/WR1wOxM0O+CY9Zw0nR054riNYtQ==", + "hasInstallScript": true, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/fontawesome-svg-core": { + "version": "6.2.1", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.2.1.tgz", + "integrity": "sha512-HELwwbCz6C1XEcjzyT1Jugmz2NNklMrSPjZOWMlc+ZsHIVk+XOvOXLGGQtFBwSyqfJDNgRq4xBCwWOaZ/d9DEA==", + "hasInstallScript": true, + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.2.1" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/free-brands-svg-icons": { + "version": "6.2.1", + "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.2.1.tgz", + "integrity": "sha512-L8l4MfdHPmZlJ72PvzdfwOwbwcCAL0vx48tJRnI6u1PJXh+j2f3yDoKyQgO3qjEsgD5Fr2tQV/cPP8F/k6aUig==", + "hasInstallScript": true, + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.2.1" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/free-solid-svg-icons": { + "version": "6.2.1", + "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.2.1.tgz", + "integrity": "sha512-oKuqrP5jbfEPJWTij4sM+/RvgX+RMFwx3QZCZcK9PrBDgxC35zuc7AOFsyMjMd/PIFPeB2JxyqDr5zs/DZFPPw==", + "hasInstallScript": true, + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.2.1" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/svelte-fontawesome": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/@fortawesome/svelte-fontawesome/-/svelte-fontawesome-0.2.0.tgz", + "integrity": "sha512-ri61lOqne8JtftoTW1AEnFAAlrTnKg0JvC8MiUJiEWhLu3wcbh7QwIytfs6YFRImVYOmK/OxcA9EWj+Ei8NM4g==", + "peerDependencies": { + "@fortawesome/fontawesome-svg-core": "~1 || ~6", + "svelte": ">=3.x" + } + }, "node_modules/@humanwhocodes/config-array": { "version": "0.11.8", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.8.tgz", @@ -3136,7 +3195,6 @@ "version": "3.55.1", "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.55.1.tgz", "integrity": "sha512-S+87/P0Ve67HxKkEV23iCdAh/SX1xiSfjF1HOglno/YTbSTW7RniICMCofWGdJJbdjw3S+0PfFb1JtGfTXE0oQ==", - "dev": true, "engines": { "node": ">= 8" } @@ -3489,11 +3547,25 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/typesafe-i18n": { + "version": "5.20.0", + "resolved": "https://registry.npmjs.org/typesafe-i18n/-/typesafe-i18n-5.20.0.tgz", + "integrity": "sha512-uOvKnVkp1tXRDNBz9Aom54qs0LP2xWrtDliMPdKm9Scsnvn0DC7ZqjSGdOWxVplpbFbqYWNZuzx5Q5jWOjnBTA==", + "bin": { + "typesafe-i18n": "cli/typesafe-i18n.mjs" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/ivanhofer" + }, + "peerDependencies": { + "typescript": ">=3.5.1" + } + }, "node_modules/typescript": { "version": "4.9.4", "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.4.tgz", "integrity": "sha512-Uz+dTXYzxXXbsFpM86Wh3dKCxrQqUcVMxwU54orwlJjOpO3ao8L7j5lH+dWfTwgCwIuM9GQ2kvVotzYJMXTBZg==", - "dev": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" @@ -3877,6 +3949,41 @@ "strip-json-comments": "^3.1.1" } }, + "@fortawesome/fontawesome-common-types": { + "version": "6.2.1", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.2.1.tgz", + "integrity": "sha512-Sz07mnQrTekFWLz5BMjOzHl/+NooTdW8F8kDQxjWwbpOJcnoSg4vUDng8d/WR1wOxM0O+CY9Zw0nR054riNYtQ==" + }, + "@fortawesome/fontawesome-svg-core": { + "version": "6.2.1", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.2.1.tgz", + "integrity": "sha512-HELwwbCz6C1XEcjzyT1Jugmz2NNklMrSPjZOWMlc+ZsHIVk+XOvOXLGGQtFBwSyqfJDNgRq4xBCwWOaZ/d9DEA==", + "requires": { + "@fortawesome/fontawesome-common-types": "6.2.1" + } + }, + "@fortawesome/free-brands-svg-icons": { + "version": "6.2.1", + "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.2.1.tgz", + "integrity": "sha512-L8l4MfdHPmZlJ72PvzdfwOwbwcCAL0vx48tJRnI6u1PJXh+j2f3yDoKyQgO3qjEsgD5Fr2tQV/cPP8F/k6aUig==", + "requires": { + "@fortawesome/fontawesome-common-types": "6.2.1" + } + }, + "@fortawesome/free-solid-svg-icons": { + "version": "6.2.1", + "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.2.1.tgz", + "integrity": "sha512-oKuqrP5jbfEPJWTij4sM+/RvgX+RMFwx3QZCZcK9PrBDgxC35zuc7AOFsyMjMd/PIFPeB2JxyqDr5zs/DZFPPw==", + "requires": { + "@fortawesome/fontawesome-common-types": "6.2.1" + } + }, + "@fortawesome/svelte-fontawesome": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/@fortawesome/svelte-fontawesome/-/svelte-fontawesome-0.2.0.tgz", + "integrity": "sha512-ri61lOqne8JtftoTW1AEnFAAlrTnKg0JvC8MiUJiEWhLu3wcbh7QwIytfs6YFRImVYOmK/OxcA9EWj+Ei8NM4g==", + "requires": {} + }, "@humanwhocodes/config-array": { "version": "0.11.8", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.8.tgz", @@ -5856,8 +5963,7 @@ "svelte": { "version": "3.55.1", "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.55.1.tgz", - "integrity": "sha512-S+87/P0Ve67HxKkEV23iCdAh/SX1xiSfjF1HOglno/YTbSTW7RniICMCofWGdJJbdjw3S+0PfFb1JtGfTXE0oQ==", - "dev": true + "integrity": "sha512-S+87/P0Ve67HxKkEV23iCdAh/SX1xiSfjF1HOglno/YTbSTW7RniICMCofWGdJJbdjw3S+0PfFb1JtGfTXE0oQ==" }, "svelte-check": { "version": "3.0.2", @@ -6065,11 +6171,16 @@ "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==", "dev": true }, + "typesafe-i18n": { + "version": "5.20.0", + "resolved": "https://registry.npmjs.org/typesafe-i18n/-/typesafe-i18n-5.20.0.tgz", + "integrity": "sha512-uOvKnVkp1tXRDNBz9Aom54qs0LP2xWrtDliMPdKm9Scsnvn0DC7ZqjSGdOWxVplpbFbqYWNZuzx5Q5jWOjnBTA==", + "requires": {} + }, "typescript": { "version": "4.9.4", "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.4.tgz", - "integrity": "sha512-Uz+dTXYzxXXbsFpM86Wh3dKCxrQqUcVMxwU54orwlJjOpO3ao8L7j5lH+dWfTwgCwIuM9GQ2kvVotzYJMXTBZg==", - "dev": true + "integrity": "sha512-Uz+dTXYzxXXbsFpM86Wh3dKCxrQqUcVMxwU54orwlJjOpO3ao8L7j5lH+dWfTwgCwIuM9GQ2kvVotzYJMXTBZg==" }, "uc.micro": { "version": "1.0.6", diff --git a/package.json b/package.json index 776661b..b7cdeca 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "mycv", "version": "0.0.1", "scripts": { - "update-model": "json2ts ./src/model/schema.json ./$lib/model/job.d.ts", + "update-model": "json2ts ./src/lib/model/schema.json ./src/lib/model/job.d.ts", "dev": "vite dev", "build": "vite build", "preview": "vite preview", @@ -38,8 +38,13 @@ }, "type": "module", "dependencies": { + "@fortawesome/fontawesome-svg-core": "^6.2.1", + "@fortawesome/free-brands-svg-icons": "^6.2.1", + "@fortawesome/free-solid-svg-icons": "^6.2.1", + "@fortawesome/svelte-fontawesome": "^0.2.0", "json-schema-to-typescript": "^10.1.5", "markdown-it": "^12.2.0", - "punycode": "^2.1.1" + "punycode": "^2.1.1", + "typesafe-i18n": "^5.20.0" } } diff --git a/src/app.scss b/src/app.scss index 280da34..b841c7a 100644 --- a/src/app.scss +++ b/src/app.scss @@ -9,8 +9,9 @@ $text-color: #011936; $border-color: #256EFF; $button-border-color: #256EFF; -$min-tablet: 768px; +$min-tablet: 900px; $min-desktop: 1024px; +$min-ultrawide: 1700px; $default-border-radius:5px; :root { @@ -19,46 +20,46 @@ $default-border-radius:5px; background-color: $basecolor } -// .box-with-shadow { -// border-style: solid; -// border-width: 0.1px; -// border-radius: 10px; -// } +.box-with-shadow { + border-style: solid; + border-width: 0.1px; + border-radius: 10px; +} -// .default{ -// margin: auto; -// @media (min-width: $min-tablet) { -// width: 80%; -// max-width: 1024px; -// } -// } +.default{ + margin: auto; + @media (min-width: $min-tablet) { + width: 80%; + max-width: 1024px; + } +} -// .image-container{ -// width: 80%; -// margin: auto; -// text-align: center; -// align-items: center; -// img{ -// max-width: 100%; -// max-height: 300px; -// object-fit: scale-down; -// @media (prefers-color-scheme: light) { -// background-color: $contrast; -// } -// } -// } +.image-container{ + width: 80%; + margin: auto; + text-align: center; + align-items: center; + img{ + max-width: 100%; + max-height: 300px; + object-fit: scale-down; + @media (prefers-color-scheme: light) { + background-color: $contrast; + } + } +} -// a { -// text-decoration:none; -// color: $text-color; -// } +a { + text-decoration:none; + color: $text-color; +} -// button{ -// color: $text-color; -// } +button{ + color: $text-color; +} -// h1, h2, h3 { -// font-weight: normal; -// } \ No newline at end of file +h1, h2, h3 { + font-weight: normal; +} \ No newline at end of file diff --git a/src/elements/Skills copy.svelte b/src/elements/Skills copy.svelte new file mode 100644 index 0000000..23c1697 --- /dev/null +++ b/src/elements/Skills copy.svelte @@ -0,0 +1,37 @@ + + +
+ Hello +
+

HTML

+
+
percentage
+
+
+
+ + diff --git a/src/lib/elements/AboutMe.svelte b/src/lib/elements/AboutMe.svelte index 1e501d4..8d041ab 100644 --- a/src/lib/elements/AboutMe.svelte +++ b/src/lib/elements/AboutMe.svelte @@ -1,7 +1,13 @@
+
+

Gianmarco Pettinato

+

Software developer

+
+

- {who.it} + {who[currentLanguage]}

- curriculum_it.pdf - -
-
@@ -62,5 +69,11 @@ border-radius: $default-border-radius; padding: 30px; margin: 10px; + .title { + display: none; + @media (min-width: $min-tablet) { + display: unset; + } + } } diff --git a/src/lib/elements/Contacts.svelte b/src/lib/elements/Contacts.svelte index 66c896d..da85b93 100644 --- a/src/lib/elements/Contacts.svelte +++ b/src/lib/elements/Contacts.svelte @@ -1,4 +1,24 @@ - +
profile @@ -6,18 +26,22 @@ diff --git a/src/lib/elements/JobElement.svelte b/src/lib/elements/JobElement.svelte index 4cc8fe3..9ca19eb 100644 --- a/src/lib/elements/JobElement.svelte +++ b/src/lib/elements/JobElement.svelte @@ -8,22 +8,23 @@ linkify: true }); import type { Schema } from '$lib/model/job'; + import type { CurrentLanguage } from '$lib/types'; export let job: Schema; - export let currentLanguage = ''; + export let currentLanguage: CurrentLanguage = 'it';
-

{job.title.it}

+

{job.title[currentLanguage]}

{#each job.images as image} {image} {/each}
- {@html md.render(job.content.it)} + {@html md.render(job.content[currentLanguage])}
- {#if job.year.lenght != 0} + {#if job.year} Date: {job.year.start}{#if job.year.end.length != 0}; {job.year.end} {/if} {/if}
diff --git a/src/lib/elements/Jobs.svelte b/src/lib/elements/Jobs.svelte index 09363fd..7f25606 100644 --- a/src/lib/elements/Jobs.svelte +++ b/src/lib/elements/Jobs.svelte @@ -1,7 +1,8 @@ diff --git a/src/lib/elements/LanguageSelector.svelte b/src/lib/elements/LanguageSelector.svelte new file mode 100644 index 0000000..c8bcb80 --- /dev/null +++ b/src/lib/elements/LanguageSelector.svelte @@ -0,0 +1,20 @@ + + +
+ + +
diff --git a/src/lib/elements/Menu.svelte b/src/lib/elements/Menu.svelte index 61df69f..c5ca566 100644 --- a/src/lib/elements/Menu.svelte +++ b/src/lib/elements/Menu.svelte @@ -1,6 +1,32 @@ -
-
- - {menu.home.it} - - {menu.job.it} - - {menu.school.it} - - {menu.portfolio.it} - - {menu.blog.it} -
+ diff --git a/src/lib/elements/MenuMobile.svelte b/src/lib/elements/MenuMobile.svelte new file mode 100644 index 0000000..2a957a7 --- /dev/null +++ b/src/lib/elements/MenuMobile.svelte @@ -0,0 +1,164 @@ + + +
+
+ +
+

Gianmarco Pettinato

+

Software developer

+
+
+ +
+ + diff --git a/src/lib/elements/Training.svelte b/src/lib/elements/Training.svelte index 8b035d1..ad6af28 100644 --- a/src/lib/elements/Training.svelte +++ b/src/lib/elements/Training.svelte @@ -1,13 +1,15 @@ diff --git a/src/lib/model/job.d.ts b/src/lib/model/job.d.ts index 6853252..8ac39ed 100644 --- a/src/lib/model/job.d.ts +++ b/src/lib/model/job.d.ts @@ -10,26 +10,21 @@ export interface Schema { year: { start: string; end: string; - [k: string]: unknown; }; title: { en: string; it: string; - [k: string]: unknown; }; content: { en: string; it: string; - [k: string]: unknown; }; collaborators: { name: string; surname: string; ref: string; - [k: string]: unknown; }[]; languages: string[]; tecnologies: string[]; images: string[]; - [k: string]: unknown; } diff --git a/src/lib/model/schema.json b/src/lib/model/schema.json index b5869c7..2b99699 100644 --- a/src/lib/model/schema.json +++ b/src/lib/model/schema.json @@ -18,7 +18,8 @@ "required": [ "start", "end" - ] + ], + "additionalProperties": false }, "title": { "type": "object", @@ -33,7 +34,8 @@ "required": [ "en", "it" - ] + ], + "additionalProperties": false }, "content": { "type": "object", @@ -48,7 +50,8 @@ "required": [ "en", "it" - ] + ], + "additionalProperties": false }, "collaborators": { "type": "array", @@ -69,7 +72,8 @@ "name", "surname", "ref" - ] + ], + "additionalProperties": false } }, "languages": { @@ -99,5 +103,6 @@ "languages", "tecnologies", "images" - ] + ], + "additionalProperties": false } \ No newline at end of file diff --git a/src/lib/types.ts b/src/lib/types.ts new file mode 100644 index 0000000..2248705 --- /dev/null +++ b/src/lib/types.ts @@ -0,0 +1,13 @@ +export type CurrentLanguage = 'it' | 'en'; +export type MenuEntry = 'home' | 'job' | 'school' | 'blog' | 'portfolio'; +export type LanguagePair = { + [key in CurrentLanguage]: string; +}; + +const e: Record = { + home: { it: 'Home', en: 'Home' }, + job: { it: 'Esperienze', en: 'Experiences' }, + school: { it: 'Formazione', en: 'Training' }, + blog: { it: 'Blog', en: 'Blog' }, + portfolio: { it: 'Portfolio', en: 'Portfolio' } +}; diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 8bdec52..c8717c4 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -1,15 +1,17 @@ diff --git a/src/routes/blog/[slug]/+page.svelte b/src/routes/blog/[slug]/+page.svelte index 0c199fb..477941f 100644 --- a/src/routes/blog/[slug]/+page.svelte +++ b/src/routes/blog/[slug]/+page.svelte @@ -1,8 +1,9 @@ diff --git a/svelte.config.js b/svelte.config.js index c46d9ea..1768ddf 100644 --- a/svelte.config.js +++ b/svelte.config.js @@ -10,6 +10,7 @@ const config = { // for more information about preprocessors preprocess: [vitePreprocess(), markdown(),preprocess({ sass: true, + typescript: true, })], kit: {