Jatus/cv-site
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

base mobile menu done

Browse Source
This commit is contained in:
Gianmarco Pettinato 2023-01-22 01:17:22 +01:00
parent cd55feca1e
commit 64389fa258
19 changed files with 598 additions and 188 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

125
package-lock.json generated
View File

@ -8,9 +8,14 @@
"name": "mycv", "name": "mycv",
"version": "0.0.1", "version": "0.0.1",
"dependencies": { "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", "json-schema-to-typescript": "^10.1.5",
"markdown-it": "^12.2.0", "markdown-it": "^12.2.0",
"punycode": "^2.1.1" "punycode": "^2.1.1",
"typesafe-i18n": "^5.20.0"
}, },
"devDependencies": { "devDependencies": {
"@playwright/test": "^1.28.1", "@playwright/test": "^1.28.1",
@ -422,6 +427,60 @@
"url": "https://opencollective.com/eslint" "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": { "node_modules/@humanwhocodes/config-array": {
"version": "0.11.8", "version": "0.11.8",
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.8.tgz", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.8.tgz",
@ -3136,7 +3195,6 @@
"version": "3.55.1", "version": "3.55.1",
"resolved": "https://registry.npmjs.org/svelte/-/svelte-3.55.1.tgz", "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.55.1.tgz",
"integrity": "sha512-S+87/P0Ve67HxKkEV23iCdAh/SX1xiSfjF1HOglno/YTbSTW7RniICMCofWGdJJbdjw3S+0PfFb1JtGfTXE0oQ==", "integrity": "sha512-S+87/P0Ve67HxKkEV23iCdAh/SX1xiSfjF1HOglno/YTbSTW7RniICMCofWGdJJbdjw3S+0PfFb1JtGfTXE0oQ==",
"dev": true,
"engines": { "engines": {
"node": ">= 8" "node": ">= 8"
} }
@ -3489,11 +3547,25 @@
"url": "https://github.com/sponsors/sindresorhus" "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": { "node_modules/typescript": {
"version": "4.9.4", "version": "4.9.4",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.4.tgz", "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.4.tgz",
"integrity": "sha512-Uz+dTXYzxXXbsFpM86Wh3dKCxrQqUcVMxwU54orwlJjOpO3ao8L7j5lH+dWfTwgCwIuM9GQ2kvVotzYJMXTBZg==", "integrity": "sha512-Uz+dTXYzxXXbsFpM86Wh3dKCxrQqUcVMxwU54orwlJjOpO3ao8L7j5lH+dWfTwgCwIuM9GQ2kvVotzYJMXTBZg==",
"dev": true,
"bin": { "bin": {
"tsc": "bin/tsc", "tsc": "bin/tsc",
"tsserver": "bin/tsserver" "tsserver": "bin/tsserver"
@ -3877,6 +3949,41 @@
"strip-json-comments": "^3.1.1" "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": { "@humanwhocodes/config-array": {
"version": "0.11.8", "version": "0.11.8",
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.8.tgz", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.8.tgz",
@ -5856,8 +5963,7 @@
"svelte": { "svelte": {
"version": "3.55.1", "version": "3.55.1",
"resolved": "https://registry.npmjs.org/svelte/-/svelte-3.55.1.tgz", "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.55.1.tgz",
"integrity": "sha512-S+87/P0Ve67HxKkEV23iCdAh/SX1xiSfjF1HOglno/YTbSTW7RniICMCofWGdJJbdjw3S+0PfFb1JtGfTXE0oQ==", "integrity": "sha512-S+87/P0Ve67HxKkEV23iCdAh/SX1xiSfjF1HOglno/YTbSTW7RniICMCofWGdJJbdjw3S+0PfFb1JtGfTXE0oQ=="
"dev": true
}, },
"svelte-check": { "svelte-check": {
"version": "3.0.2", "version": "3.0.2",
@ -6065,11 +6171,16 @@
"integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==", "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
"dev": true "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": { "typescript": {
"version": "4.9.4", "version": "4.9.4",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.4.tgz", "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.4.tgz",
"integrity": "sha512-Uz+dTXYzxXXbsFpM86Wh3dKCxrQqUcVMxwU54orwlJjOpO3ao8L7j5lH+dWfTwgCwIuM9GQ2kvVotzYJMXTBZg==", "integrity": "sha512-Uz+dTXYzxXXbsFpM86Wh3dKCxrQqUcVMxwU54orwlJjOpO3ao8L7j5lH+dWfTwgCwIuM9GQ2kvVotzYJMXTBZg=="
"dev": true
}, },
"uc.micro": { "uc.micro": {
"version": "1.0.6", "version": "1.0.6",

9
package.json
View File

@ -2,7 +2,7 @@
"name": "mycv", "name": "mycv",
"version": "0.0.1", "version": "0.0.1",
"scripts": { "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", "dev": "vite dev",
"build": "vite build", "build": "vite build",
"preview": "vite preview", "preview": "vite preview",
@ -38,8 +38,13 @@
}, },
"type": "module", "type": "module",
"dependencies": { "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", "json-schema-to-typescript": "^10.1.5",
"markdown-it": "^12.2.0", "markdown-it": "^12.2.0",
"punycode": "^2.1.1" "punycode": "^2.1.1",
"typesafe-i18n": "^5.20.0"
} }
} }

75
src/app.scss
View File

@ -9,8 +9,9 @@ $text-color: #011936;
$border-color: #256EFF; $border-color: #256EFF;
$button-border-color: #256EFF; $button-border-color: #256EFF;
$min-tablet: 768px; $min-tablet: 900px;
$min-desktop: 1024px; $min-desktop: 1024px;
$min-ultrawide: 1700px;
$default-border-radius:5px; $default-border-radius:5px;
:root { :root {
@ -19,46 +20,46 @@ $default-border-radius:5px;
background-color: $basecolor background-color: $basecolor
} }
// .box-with-shadow { .box-with-shadow {
// border-style: solid; border-style: solid;
// border-width: 0.1px; border-width: 0.1px;
// border-radius: 10px; border-radius: 10px;
// } }
// .default{ .default{
// margin: auto; margin: auto;
// @media (min-width: $min-tablet) { @media (min-width: $min-tablet) {
// width: 80%; width: 80%;
// max-width: 1024px; max-width: 1024px;
// } }
// } }
// .image-container{ .image-container{
// width: 80%; width: 80%;
// margin: auto; margin: auto;
// text-align: center; text-align: center;
// align-items: center; align-items: center;
// img{ img{
// max-width: 100%; max-width: 100%;
// max-height: 300px; max-height: 300px;
// object-fit: scale-down; object-fit: scale-down;
// @media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
// background-color: $contrast; background-color: $contrast;
// } }
// } }
// } }
// a { a {
// text-decoration:none; text-decoration:none;
// color: $text-color; color: $text-color;
// } }
// button{ button{
// color: $text-color; color: $text-color;
// } }
// h1, h2, h3 { h1, h2, h3 {
// font-weight: normal; font-weight: normal;
// } }

37
src/elements/Skills copy.svelte Normal file
View File

@ -0,0 +1,37 @@
<script lang="ts"></script>
<div>
Hello
<div>
<h4>HTML</h4>
<div class="round_base">
<div class="inside"><div>percentage</div></div>
</div>
</div>
</div>
<style lang="scss">
.round_base {
width: 100px;
height: 100px;
background-color: yellow;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
outline: 0.1px solid black;
background-image: linear-gradient(to right, transparent 40px, #000000 2px);
}
.inside {
width: 80px;
height: 80px;
background-color: white;
border-radius: 50%;
text-align: center;
vertical-align: middle;
outline: 0.1px solid black;
display: flex;
align-items: center;
justify-content: center;
}
</style>

33
src/lib/elements/AboutMe.svelte
View File

@ -1,7 +1,13 @@
<script lang="ts"> <script lang="ts">
import Contacts from './Contacts.svelte'; import Contacts from './Contacts.svelte';
import Skills from './Skills.svelte'; import Skills from './Skills.svelte';
export let currentLanguage = 'it'; export let currentLanguage: CurrentLanguage = 'it';
import { FontAwesomeIcon } from '@fortawesome/svelte-fontawesome';
import { faDownload } from '@fortawesome/free-solid-svg-icons';
import { library, findIconDefinition } from '@fortawesome/fontawesome-svg-core';
library.add(faDownload);
const downloadDefinition = findIconDefinition({ prefix: 'fas', iconName: 'download' });
import type { CurrentLanguage, LanguagePair } from '$lib/types';
const whoIt = const whoIt =
"Ciao! Sono Gianmarco Pettinato, mi sono laureato in scienze informatiche e sono uno sviluppatore full-stack.\ "Ciao! Sono Gianmarco Pettinato, mi sono laureato in scienze informatiche e sono uno sviluppatore full-stack.\
Ho famigliarità con diversi linguaggi e framework, sia front-end che back-end.\ Ho famigliarità con diversi linguaggi e framework, sia front-end che back-end.\
@ -17,28 +23,29 @@
Among my skill-set, there is the administration of the CI/CD environment with Docker.\ Among my skill-set, there is the administration of the CI/CD environment with Docker.\
I'm interested in the IoT world and Wearable tech. In my free time, I like to manage my GNU/Linux home server and build PCs."; I'm interested in the IoT world and Wearable tech. In my free time, I like to manage my GNU/Linux home server and build PCs.";
const who = { const who: LanguagePair = {
it: whoIt, it: whoIt,
en: whoEn en: whoEn
}; };
const cvUrl: LanguagePair = { it: '/curriculum_it.pdf', en: '/curriculum_en.pdf' };
</script> </script>
<div class="aboutMe"> <div class="aboutMe">
<div class="title">
<h1>Gianmarco Pettinato</h1>
<h2>Software developer</h2>
</div>
<Contacts /> <Contacts />
<div class="whoIAm"> <div class="whoIAm">
<p> <p>
{who.it} {who[currentLanguage]}
</p> </p>
</div> </div>
<div class="cv"> <div class="cv">
<div> <div>
<a rel="external" href="/curriculum_it.pdf" <a rel="external" href={cvUrl[currentLanguage]}
>curriculum_it.pdf <i class="fas fa-download" /> >curriculum<i><FontAwesomeIcon icon={downloadDefinition} /></i>
</a>
</div>
<div>
<a rel="external" href="/curriculum_en.pdf"
>curriculum_en.pdf <i class="fas fa-download" />
</a> </a>
</div> </div>
</div> </div>
@ -62,5 +69,11 @@
border-radius: $default-border-radius; border-radius: $default-border-radius;
padding: 30px; padding: 30px;
margin: 10px; margin: 10px;
.title {
display: none;
@media (min-width: $min-tablet) {
display: unset;
}
}
} }
</style> </style>

34
src/lib/elements/Contacts.svelte
View File

@ -1,4 +1,24 @@
<script lang="ts"></script> <script lang="ts">
import { FontAwesomeIcon } from '@fortawesome/svelte-fontawesome';
import { faAt } from '@fortawesome/free-solid-svg-icons';
import { faTelegramPlane, faTwitter, faLinkedin } from '@fortawesome/free-brands-svg-icons';
import * as svgCore from '@fortawesome/fontawesome-svg-core';
svgCore.library.add(faTelegramPlane);
svgCore.library.add(faTwitter);
svgCore.library.add(faLinkedin);
svgCore.library.add(faAt);
const telegramLookup: svgCore.IconLookup = { prefix: 'fab', iconName: 'telegram-plane' };
const twitterLookup: svgCore.IconLookup = { prefix: 'fab', iconName: 'twitter' };
const linkedinLookup: svgCore.IconLookup = { prefix: 'fab', iconName: 'linkedin' };
const atLookup: svgCore.IconLookup = { prefix: 'fas', iconName: 'at' };
const telegramIconDefinition: svgCore.IconDefinition = svgCore.findIconDefinition(telegramLookup);
const twitterIconDefinition: svgCore.IconDefinition = svgCore.findIconDefinition(twitterLookup);
const linkedinIconDefinition: svgCore.IconDefinition = svgCore.findIconDefinition(linkedinLookup);
const atIconDefinition: svgCore.IconDefinition = svgCore.findIconDefinition(atLookup);
</script>
<div class="contacts"> <div class="contacts">
<img src="/profile_pic.webp" alt="profile" class="profile" /> <img src="/profile_pic.webp" alt="profile" class="profile" />
@ -6,18 +26,22 @@
<ul> <ul>
<li> <li>
<a href="mailto://gianmarco@pettinato.eu" <a href="mailto://gianmarco@pettinato.eu"
><i class="fas fa-at" /> e-mail: gianmarco@pettinato.eu</a ><i><FontAwesomeIcon icon={atIconDefinition} /></i> e-mail: gianmarco@pettinato.eu</a
> >
</li> </li>
<li> <li>
<a href="https://t.me/jatus_93"><i class="fab fa-telegram-plane" /> telegram: @jatus_93</a> <a href="https://t.me/jatus_93"
><i><FontAwesomeIcon icon={telegramIconDefinition} /></i> telegram: @jatus_93</a
>
</li> </li>
<li> <li>
<a href="https://twitter.com/jatus_93"><i class="fab fa-twitter" /> twitter: @jatus_93</a> <a href="https://twitter.com/jatus_93"
><i><FontAwesomeIcon icon={twitterIconDefinition} /></i> twitter: @jatus_93</a
>
</li> </li>
<li> <li>
<a href="https://www.linkedin.com/in/gianmarco-pettinato/" <a href="https://www.linkedin.com/in/gianmarco-pettinato/"
><i class="fab fa-linkedin-in" /> linkedin: Gianmarco Pettinato</a ><i><FontAwesomeIcon icon={linkedinIconDefinition} /></i> linkedin: Gianmarco Pettinato</a
> >
</li> </li>
</ul> </ul>

9
src/lib/elements/JobElement.svelte
View File

@ -8,22 +8,23 @@
linkify: true linkify: true
}); });
import type { Schema } from '$lib/model/job'; import type { Schema } from '$lib/model/job';
import type { CurrentLanguage } from '$lib/types';
export let job: Schema; export let job: Schema;
export let currentLanguage = ''; export let currentLanguage: CurrentLanguage = 'it';
</script> </script>
<div class="job-container"> <div class="job-container">
<h3>{job.title.it}</h3> <h3>{job.title[currentLanguage]}</h3>
<div class="image-container"> <div class="image-container">
{#each job.images as image} {#each job.images as image}
<img src={image} alt={image} loading="lazy" /> <img src={image} alt={image} loading="lazy" />
{/each} {/each}
</div> </div>
<div class="text-content"> <div class="text-content">
{@html md.render(job.content.it)} {@html md.render(job.content[currentLanguage])}
</div> </div>
<div class="added-info"> <div class="added-info">
{#if job.year.lenght != 0} {#if job.year}
Date: {job.year.start}{#if job.year.end.length != 0}; {job.year.end} {/if} Date: {job.year.start}{#if job.year.end.length != 0}; {job.year.end} {/if}
{/if} {/if}
<div> <div>

3
src/lib/elements/Jobs.svelte
View File

@ -1,7 +1,8 @@
<script lang="ts"> <script lang="ts">
import type { Schema } from '$lib/model/job'; import type { Schema } from '$lib/model/job';
import type { CurrentLanguage } from '$lib/types';
import JobElement from './JobElement.svelte'; import JobElement from './JobElement.svelte';
export let currentLanguage = ''; export let currentLanguage: CurrentLanguage = 'it';
export let isBlogContainer = false; export let isBlogContainer = false;
export let jobs: Schema[] = []; export let jobs: Schema[] = [];
</script> </script>

20
src/lib/elements/LanguageSelector.svelte Normal file
View File

@ -0,0 +1,20 @@
<script lang="ts">
import type { CurrentLanguage } from '$lib/types';
export let currentLanguage: CurrentLanguage = 'it';
</script>
<div>
<button
class="custom-button {currentLanguage == 'it' ? 'custom-button-active' : ''}"
on:click={() => {
currentLanguage = 'it';
}}>it</button
>
<button
class="custom-button {currentLanguage == 'en' ? 'custom-button-active' : ''}"
on:click={() => {
currentLanguage = 'en';
}}>en</button
>
</div>

136
src/lib/elements/Menu.svelte
View File

@ -1,6 +1,32 @@
<script lang="ts"> <script lang="ts">
export let currentLanguage = 'it'; import { FontAwesomeIcon } from '@fortawesome/svelte-fontawesome';
export const menu = { import * as svgIcons from '@fortawesome/free-solid-svg-icons';
import * as svgCore from '@fortawesome/fontawesome-svg-core';
import type { CurrentLanguage, LanguagePair, MenuEntry } from '$lib/types';
svgCore.library.add(svgIcons.faHome);
svgCore.library.add(svgIcons.faUserTie);
svgCore.library.add(svgIcons.faGraduationCap);
svgCore.library.add(svgIcons.faUserClock);
svgCore.library.add(svgIcons.faAddressCard);
svgCore.library.add(svgIcons.faBars);
svgCore.library.add(svgIcons.faGlobeEurope);
const homeLookup: svgCore.IconLookup = { prefix: 'fas', iconName: 'home' };
const userTieLookup: svgCore.IconLookup = { prefix: 'fas', iconName: 'user-tie' };
const graduationCapLookup: svgCore.IconLookup = { prefix: 'fas', iconName: 'graduation-cap' };
const userClockLookUp: svgCore.IconLookup = { prefix: 'fas', iconName: 'user-clock' };
const addressCardLookUp: svgCore.IconLookup = { prefix: 'fas', iconName: 'address-card' };
const homeIconDefinition: svgCore.IconDefinition = svgCore.findIconDefinition(homeLookup);
const userTieDefinition: svgCore.IconDefinition = svgCore.findIconDefinition(userTieLookup);
const graduationDefinition: svgCore.IconDefinition =
svgCore.findIconDefinition(graduationCapLookup);
const userClockDefinition: svgCore.IconDefinition = svgCore.findIconDefinition(userClockLookUp);
const addressCardDefinition: svgCore.IconDefinition =
svgCore.findIconDefinition(addressCardLookUp);
export let currentLanguage: CurrentLanguage = 'it';
const menu: Record<MenuEntry, LanguagePair> = {
home: { it: 'Home', en: 'Home' }, home: { it: 'Home', en: 'Home' },
job: { it: 'Esperienze', en: 'Experiences' }, job: { it: 'Esperienze', en: 'Experiences' },
school: { it: 'Formazione', en: 'Training' }, school: { it: 'Formazione', en: 'Training' },
@ -9,77 +35,85 @@
}; };
</script> </script>
<div class="div-menu"> <div>
<div class="wrapper"> <ul class="wrapper">
<a class="menu-element" href="/#top"> <li>
<span class="hide">{menu.home.it}</span><i class="fas fa-home" /></a <a class="menu-element" href="#top">
<i>
<FontAwesomeIcon icon={homeIconDefinition} />
</i>
<span>{menu.home[currentLanguage]}</span></a
> >
</li>
<li>
<a class="menu-element" href="#jobs" <a class="menu-element" href="#jobs"
><span class="hide">{menu.job.it}</span><i class="fas fa-user-tie" /></a ><i>
<FontAwesomeIcon icon={userTieDefinition} />
</i><span>{menu.job[currentLanguage]}</span></a
> >
</li>
<li>
<a class="menu-element" href="#training" <a class="menu-element" href="#training"
><span class="hide">{menu.school.it}</span><i class="fas fa-graduation-cap" /></a ><i>
<FontAwesomeIcon icon={graduationDefinition} />
</i><span>{menu.school[currentLanguage]}</span></a
> >
</li>
<li>
<a class="menu-element" href="#portfolio" <a class="menu-element" href="#portfolio"
><span class="hide">{menu.portfolio.it}</span><i class="fas fa-user-clock" /></a ><i>
<FontAwesomeIcon icon={userClockDefinition} />
</i><span>{menu.portfolio[currentLanguage]}</span></a
> >
</li>
<li>
<a class="menu-element" href="/blog" <a class="menu-element" href="/blog"
><span class="hide">{menu.blog.it}</span><i class="fas fa-address-card" /></a ><i>
<FontAwesomeIcon icon={addressCardDefinition} />
</i><span>{menu.blog[currentLanguage]}</span></a
> >
</div> </li>
</ul>
</div> </div>
<style lang="scss"> <style lang="scss">
@import '../../app.scss'; @import '../../app.scss';
.hide { $menu-size: 1004px;
@media (max-width: $min-tablet) {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
}
.div-menu {
width: 100%;
max-width: 1024px;
}
.wrapper { .wrapper {
width: 100%; width: 100%;
display: flex; margin: 0;
padding: 0;
@media (min-width: $menu-size) {
width: $menu-size;
margin: auto;
}
} }
a { a {
border-radius: $default-border-radius; display: flex;
width: 50px; justify-content: center;
margin: auto; align-items: center;
text-align: center; background-color: white;
padding: 5px; font-size: larger;
width: 100%;
height: 50px;
outline: 1px solid;
i { i {
font-size: 22px; margin-right: 10%;
margin: 5px;
} }
} }
a:hover {
background-color: $text-color;
color: white;
}
@media (min-width: $min-tablet) { a:hover {
a { background-color: rgb(176, 176, 176);
width: 130px; outline: 1px solid;
i {
font-size: unset;
} }
ul {
display: flex;
list-style-type: none;
width: 100%;
} }
} li {
@media (min-width: $min-desktop) { display: inline-block;
a { width: 20%;
width: 150px;
}
} }
</style> </style>

164
src/lib/elements/MenuMobile.svelte Normal file
View File

@ -0,0 +1,164 @@
<script lang="ts">
import { tweened } from 'svelte/motion';
import { FontAwesomeIcon } from '@fortawesome/svelte-fontawesome';
import * as svgIcons from '@fortawesome/free-solid-svg-icons';
import * as svgCore from '@fortawesome/fontawesome-svg-core';
import type { CurrentLanguage, LanguagePair, MenuEntry } from '$lib/types';
export let currentLanguage: CurrentLanguage = 'it';
svgCore.library.add(svgIcons.faBars);
svgCore.library.add(svgIcons.faHome);
svgCore.library.add(svgIcons.faUserTie);
svgCore.library.add(svgIcons.faGraduationCap);
svgCore.library.add(svgIcons.faUserClock);
svgCore.library.add(svgIcons.faAddressCard);
svgCore.library.add(svgIcons.faBars);
svgCore.library.add(svgIcons.faX);
svgCore.library.add(svgIcons.faGlobeEurope);
const barsLookup: svgCore.IconLookup = { prefix: 'fas', iconName: 'bars' };
const globeLookup: svgCore.IconLookup = { prefix: 'fas', iconName: 'globe-europe' };
const homeLookup: svgCore.IconLookup = { prefix: 'fas', iconName: 'home' };
const userTieLookup: svgCore.IconLookup = { prefix: 'fas', iconName: 'user-tie' };
const graduationCapLookup: svgCore.IconLookup = { prefix: 'fas', iconName: 'graduation-cap' };
const userClockLookUp: svgCore.IconLookup = { prefix: 'fas', iconName: 'user-clock' };
const addressCardLookUp: svgCore.IconLookup = { prefix: 'fas', iconName: 'address-card' };
const xLookUp: svgCore.IconLookup = { prefix: 'fas', iconName: 'x' };
const homeIconDefinition: svgCore.IconDefinition = svgCore.findIconDefinition(homeLookup);
const userTieDefinition: svgCore.IconDefinition = svgCore.findIconDefinition(userTieLookup);
const graduationDefinition: svgCore.IconDefinition =
svgCore.findIconDefinition(graduationCapLookup);
const userClockDefinition: svgCore.IconDefinition = svgCore.findIconDefinition(userClockLookUp);
const addressCardDefinition: svgCore.IconDefinition =
svgCore.findIconDefinition(addressCardLookUp);
const barsDefinition: svgCore.IconDefinition = svgCore.findIconDefinition(barsLookup);
const xDefinition: svgCore.IconDefinition = svgCore.findIconDefinition(xLookUp);
const globeDefinition: svgCore.IconDefinition = svgCore.findIconDefinition(globeLookup);
const menu: Record<MenuEntry, LanguagePair> = {
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' }
};
let menuContainer: Element;
let menuOpen = false;
function setOpen() {
menuOpen = !menuOpen;
const animation = menuContainer.animate([{ height: '0px' }, { height: '360px' }], {
duration: 100,
fill: 'both'
});
if (menuOpen) animation.play();
else animation.reverse();
}
</script>
<div class="menu-container">
<div class="header">
<button on:click={setOpen} tabindex="0" title="menu toggle">
{#if !menuOpen}<FontAwesomeIcon icon={barsDefinition} size="lg" />
{:else}
<FontAwesomeIcon icon={xDefinition} size="lg" />
{/if}
</button>
<div class="title">
<h1>Gianmarco Pettinato</h1>
<h2>Software developer</h2>
</div>
</div>
<ul class="wrapper" bind:this={menuContainer}>
<li>
<a class="menu-element" href="#top">
<i>
<FontAwesomeIcon icon={homeIconDefinition} />
</i>
<span>{menu.home[currentLanguage]}</span></a
>
</li>
<li>
<a class="menu-element" href="#jobs"
><i>
<FontAwesomeIcon icon={userTieDefinition} />
</i><span>{menu.job[currentLanguage]}</span></a
>
</li>
<li>
<a class="menu-element" href="#training"
><i>
<FontAwesomeIcon icon={graduationDefinition} />
</i><span>{menu.school[currentLanguage]}</span></a
>
</li>
<li>
<a class="menu-element" href="#portfolio"
><i>
<FontAwesomeIcon icon={userClockDefinition} />
</i><span>{menu.portfolio[currentLanguage]}</span></a
>
</li>
<li>
<a class="menu-element" href="/blog"
><i>
<FontAwesomeIcon icon={addressCardDefinition} />
</i><span>{menu.blog[currentLanguage]}</span></a
>
</li>
</ul>
</div>
<style lang="scss">
@import '../../app.scss';
.header {
display: flex;
width: 100%;
padding-top: 10px;
height: 10%;
justify-content: space-between;
align-items: center;
button {
height: 80px;
width: 80px;
border: none;
font-size: 40px;
background: none;
}
}
.menu-container {
margin: 0;
padding: 0;
width: 80%;
margin: auto;
}
ul {
list-style-type: none;
overflow: hidden;
margin: 0;
padding: 0;
margin: auto;
}
a {
padding-left: 10px;
display: flex;
justify-content: start;
align-items: center;
background-color: white;
font-size: larger;
height: 60px;
border: 1px solid;
i {
margin-right: 10%;
}
}
a:hover {
background-color: rgb(176, 176, 176);
outline: 1px solid;
}
.wrapper {
height: 0px;
}
</style>

8
src/lib/elements/Training.svelte
View File

@ -1,13 +1,15 @@
<script lang="ts"> <script lang="ts">
import MarkdownIt from 'markdown-it'; import MarkdownIt from 'markdown-it';
import data from '../model/training.json';
import type { Schema } from '$lib/model/job';
import type { CurrentLanguage } from '$lib/types';
const md = new MarkdownIt({ const md = new MarkdownIt({
html: true, html: true,
xhtmlOut: true, xhtmlOut: true,
typographer: true typographer: true
}); });
import data from '../model/training.json'; export let currentLanguage: CurrentLanguage = 'it';
import type { Schema } from '$lib/model/job';
export let currentLanguage = 'it';
const training: Schema[] = data as Schema[]; const training: Schema[] = data as Schema[];
</script> </script>

5
src/lib/model/job.d.ts vendored
View File

@ -10,26 +10,21 @@ export interface Schema {
year: { year: {
start: string; start: string;
end: string; end: string;
[k: string]: unknown;
}; };
title: { title: {
en: string; en: string;
it: string; it: string;
[k: string]: unknown;
}; };
content: { content: {
en: string; en: string;
it: string; it: string;
[k: string]: unknown;
}; };
collaborators: { collaborators: {
name: string; name: string;
surname: string; surname: string;
ref: string; ref: string;
[k: string]: unknown;
}[]; }[];
languages: string[]; languages: string[];
tecnologies: string[]; tecnologies: string[];
images: string[]; images: string[];
[k: string]: unknown;
} }

15
src/lib/model/schema.json
View File

@ -18,7 +18,8 @@
"required": [ "required": [
"start", "start",
"end" "end"
] ],
"additionalProperties": false
}, },
"title": { "title": {
"type": "object", "type": "object",
@ -33,7 +34,8 @@
"required": [ "required": [
"en", "en",
"it" "it"
] ],
"additionalProperties": false
}, },
"content": { "content": {
"type": "object", "type": "object",
@ -48,7 +50,8 @@
"required": [ "required": [
"en", "en",
"it" "it"
] ],
"additionalProperties": false
}, },
"collaborators": { "collaborators": {
"type": "array", "type": "array",
@ -69,7 +72,8 @@
"name", "name",
"surname", "surname",
"ref" "ref"
] ],
"additionalProperties": false
} }
}, },
"languages": { "languages": {
@ -99,5 +103,6 @@
"languages", "languages",
"tecnologies", "tecnologies",
"images" "images"
] ],
"additionalProperties": false
} }

13
src/lib/types.ts Normal file
View File

@ -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<MenuEntry, LanguagePair> = {
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' }
};

66
src/routes/+page.svelte
View File

@ -1,15 +1,17 @@
<script lang="ts"> <script lang="ts">
import { MetaTags } from 'svelte-meta-tags'; import { MetaTags } from 'svelte-meta-tags';
import type { CurrentLanguage } from '$lib/types';
import AboutMe from '$lib/elements/AboutMe.svelte'; import AboutMe from '$lib/elements/AboutMe.svelte';
import Jobs from '$lib/elements/Jobs.svelte'; import Jobs from '$lib/elements/Jobs.svelte';
import Menu from '$lib/elements/Menu.svelte'; import Menu from '$lib/elements/Menu.svelte';
import MenuMobile from '$lib/elements/MenuMobile.svelte';
import Training from '$lib/elements/Training.svelte'; import Training from '$lib/elements/Training.svelte';
import Data_jobs from '$lib/model/jobs.json'; import Data_jobs from '$lib/model/jobs.json';
import Data_portfolio from '$lib/model/portfolio.json'; import Data_portfolio from '$lib/model/portfolio.json';
import type { Schema } from '$lib/model/job'; import type { Schema } from '$lib/model/job';
let jobs: Schema[] = Data_jobs as Schema[]; let jobs: Schema[] = Data_jobs as Schema[];
let portfolio: Schema[] = Data_portfolio as Schema[]; let portfolio: Schema[] = Data_portfolio as Schema[];
let currentLanguage: string = 'it'; let currentLanguage: CurrentLanguage = 'it';
let titles = { let titles = {
home: { home: {
it: 'Gianmarco Pettinato', it: 'Gianmarco Pettinato',
@ -61,39 +63,26 @@
<main> <main>
<!-- svelte-ignore a11y-invalid-attribute --> <!-- svelte-ignore a11y-invalid-attribute -->
<div class="language-selector" id="language-selector">
<button
class="custom-button {currentLanguage == 'it' ? 'custom-button-active' : ''}"
on:click={() => {
currentLanguage = 'it';
}}>it</button
>
<button
class="custom-button {currentLanguage == 'en' ? 'custom-button-active' : ''}"
on:click={() => {
currentLanguage = 'en';
}}>en</button
>
</div>
<div class="menu"> <div class="menu menu-desktop">
<Menu {currentLanguage} /> <Menu {currentLanguage} />
</div> </div>
<div class="menu menu-mobile">
<MenuMobile {currentLanguage} />
</div>
<div id="home" class="default"> <div id="home" class="default">
<h1>{titles.home.it}</h1>
<h2>Software developer</h2>
<AboutMe {currentLanguage} /> <AboutMe {currentLanguage} />
</div> </div>
<div id="jobs" class="default"> <div id="jobs" class="default">
<h2>{titles.job.it}</h2> <h2>{titles.job[currentLanguage]}</h2>
<Jobs {jobs} {currentLanguage} /> <Jobs {jobs} {currentLanguage} />
</div> </div>
<div id="training" class="default"> <div id="training" class="default">
<h2>{titles.school.it}</h2> <h2>{titles.school[currentLanguage]}</h2>
<Training {currentLanguage} /> <Training {currentLanguage} />
</div> </div>
<div id="portfolio" class="default"> <div id="portfolio" class="default">
<h2>{titles.portfolio.it}</h2> <h2>{titles.portfolio[currentLanguage]}</h2>
<Jobs jobs={portfolio} {currentLanguage} /> <Jobs jobs={portfolio} {currentLanguage} />
</div> </div>
</main> </main>
@ -101,36 +90,27 @@
<style lang="scss"> <style lang="scss">
@import '../app.scss'; @import '../app.scss';
.language-selector {
right: 0;
height: 30px;
text-align: center;
text-transform: uppercase;
padding-top: 10px;
display: flex;
flex-direction: row;
justify-content: end;
position: absolute;
z-index: 999;
@media (max-width: $min-desktop) {
width: 100%;
position: unset;
padding-bottom: 10px;
background-color: $basecolor2;
}
}
.menu { .menu {
background-color: $basecolor2; background-color: $basecolor2;
position: sticky; position: sticky;
position: -webkit-sticky; position: -webkit-sticky;
top: 0px; top: 0px;
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
border-bottom: solid #999 1px; border-bottom: solid #999 1px;
} }
.menu-desktop {
display: none;
@media (min-width: $min-tablet) {
display: block;
}
}
.menu-mobile {
@media (min-width: $min-tablet) {
display: none;
}
}
.custom-button { .custom-button {
border: 0; border: 0;
background: none; background: none;

10
src/routes/blog/+page.svelte
View File

@ -1,11 +1,13 @@
<script lang="ts"> <script lang="ts">
import { MetaTags } from 'svelte-meta-tags'; import { MetaTags } from 'svelte-meta-tags';
import Menu from '$lib/elements/Menu.svelte'; import type { CurrentLanguage } from '$lib/types';
import Jobs from '$lib/elements/Jobs.svelte';
let currentLanguage: string = 'it';
let isBlogContainer = true;
import Data_portfolio from '../../lib/model/portfolio.json'; import Data_portfolio from '../../lib/model/portfolio.json';
import type { Schema } from '$lib/model/job'; import type { Schema } from '$lib/model/job';
import Menu from '$lib/elements/Menu.svelte';
import Jobs from '$lib/elements/Jobs.svelte';
let currentLanguage: CurrentLanguage = 'it';
let isBlogContainer = true;
let jobs: Schema[] = Data_portfolio as Schema[]; let jobs: Schema[] = Data_portfolio as Schema[];
let title = { it: 'I miei articoli', en: 'my blog posts' }; let title = { it: 'I miei articoli', en: 'my blog posts' };
</script> </script>

3
src/routes/blog/[slug]/+page.svelte
View File

@ -1,8 +1,9 @@
<script lang="ts"> <script lang="ts">
import { MetaTags } from 'svelte-meta-tags'; import { MetaTags } from 'svelte-meta-tags';
import Menu from '$lib/elements/Menu.svelte'; import Menu from '$lib/elements/Menu.svelte';
let currentLanguage: string = 'it'; let currentLanguage: CurrentLanguage = 'it';
import { page } from '$app/stores'; import { page } from '$app/stores';
import type { CurrentLanguage } from '$lib/types';
console.log($page); console.log($page);
</script> </script>

1
svelte.config.js
View File

@ -10,6 +10,7 @@ const config = {
// for more information about preprocessors // for more information about preprocessors
preprocess: [vitePreprocess(), markdown(),preprocess({ preprocess: [vitePreprocess(), markdown(),preprocess({
sass: true, sass: true,
typescript: true,
})], })],
kit: { kit: {