base mobile menu done
This commit is contained in:
Gianmarco Pettinato
parent
cd55feca1e
commit
64389fa258
125
package-lock.json
generated
125
package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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"
|
||||
}
|
||||
}
|
||||
|
||||
75
src/app.scss
75
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;
|
||||
// }
|
||||
h1, h2, h3 {
|
||||
font-weight: normal;
|
||||
}
|
||||
37
src/elements/Skills copy.svelte
Normal file
37
src/elements/Skills copy.svelte
Normal 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>
|
||||
@ -1,7 +1,13 @@
|
||||
<script lang="ts">
|
||||
import Contacts from './Contacts.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 =
|
||||
"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.\
|
||||
@ -17,28 +23,29 @@
|
||||
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.";
|
||||
|
||||
const who = {
|
||||
const who: LanguagePair = {
|
||||
it: whoIt,
|
||||
en: whoEn
|
||||
};
|
||||
const cvUrl: LanguagePair = { it: '/curriculum_it.pdf', en: '/curriculum_en.pdf' };
|
||||
</script>
|
||||
|
||||
<div class="aboutMe">
|
||||
<div class="title">
|
||||
<h1>Gianmarco Pettinato</h1>
|
||||
<h2>Software developer</h2>
|
||||
</div>
|
||||
|
||||
<Contacts />
|
||||
<div class="whoIAm">
|
||||
<p>
|
||||
{who.it}
|
||||
{who[currentLanguage]}
|
||||
</p>
|
||||
</div>
|
||||
<div class="cv">
|
||||
<div>
|
||||
<a rel="external" href="/curriculum_it.pdf"
|
||||
>curriculum_it.pdf <i class="fas fa-download" />
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<a rel="external" href="/curriculum_en.pdf"
|
||||
>curriculum_en.pdf <i class="fas fa-download" />
|
||||
<a rel="external" href={cvUrl[currentLanguage]}
|
||||
>curriculum<i><FontAwesomeIcon icon={downloadDefinition} /></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@ -62,5 +69,11 @@
|
||||
border-radius: $default-border-radius;
|
||||
padding: 30px;
|
||||
margin: 10px;
|
||||
.title {
|
||||
display: none;
|
||||
@media (min-width: $min-tablet) {
|
||||
display: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -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">
|
||||
<img src="/profile_pic.webp" alt="profile" class="profile" />
|
||||
@ -6,18 +26,22 @@
|
||||
<ul>
|
||||
<li>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
</ul>
|
||||
|
||||
@ -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';
|
||||
</script>
|
||||
|
||||
<div class="job-container">
|
||||
<h3>{job.title.it}</h3>
|
||||
<h3>{job.title[currentLanguage]}</h3>
|
||||
<div class="image-container">
|
||||
{#each job.images as image}
|
||||
<img src={image} alt={image} loading="lazy" />
|
||||
{/each}
|
||||
</div>
|
||||
<div class="text-content">
|
||||
{@html md.render(job.content.it)}
|
||||
{@html md.render(job.content[currentLanguage])}
|
||||
</div>
|
||||
<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}
|
||||
{/if}
|
||||
<div>
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
<script lang="ts">
|
||||
import type { Schema } from '$lib/model/job';
|
||||
import type { CurrentLanguage } from '$lib/types';
|
||||
import JobElement from './JobElement.svelte';
|
||||
export let currentLanguage = '';
|
||||
export let currentLanguage: CurrentLanguage = 'it';
|
||||
export let isBlogContainer = false;
|
||||
export let jobs: Schema[] = [];
|
||||
</script>
|
||||
|
||||
20
src/lib/elements/LanguageSelector.svelte
Normal file
20
src/lib/elements/LanguageSelector.svelte
Normal 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>
|
||||
@ -1,6 +1,32 @@
|
||||
<script lang="ts">
|
||||
export let currentLanguage = 'it';
|
||||
export const menu = {
|
||||
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';
|
||||
|
||||
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' },
|
||||
job: { it: 'Esperienze', en: 'Experiences' },
|
||||
school: { it: 'Formazione', en: 'Training' },
|
||||
@ -9,77 +35,85 @@
|
||||
};
|
||||
</script>
|
||||
|
||||
<div class="div-menu">
|
||||
<div class="wrapper">
|
||||
<a class="menu-element" href="/#top">
|
||||
<span class="hide">{menu.home.it}</span><i class="fas fa-home" /></a
|
||||
>
|
||||
|
||||
<a class="menu-element" href="#jobs"
|
||||
><span class="hide">{menu.job.it}</span><i class="fas fa-user-tie" /></a
|
||||
>
|
||||
|
||||
<a class="menu-element" href="#training"
|
||||
><span class="hide">{menu.school.it}</span><i class="fas fa-graduation-cap" /></a
|
||||
>
|
||||
|
||||
<a class="menu-element" href="#portfolio"
|
||||
><span class="hide">{menu.portfolio.it}</span><i class="fas fa-user-clock" /></a
|
||||
>
|
||||
|
||||
<a class="menu-element" href="/blog"
|
||||
><span class="hide">{menu.blog.it}</span><i class="fas fa-address-card" /></a
|
||||
>
|
||||
</div>
|
||||
<div>
|
||||
<ul class="wrapper">
|
||||
<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';
|
||||
.hide {
|
||||
@media (max-width: $min-tablet) {
|
||||
position: absolute;
|
||||
left: -10000px;
|
||||
top: auto;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
.div-menu {
|
||||
width: 100%;
|
||||
max-width: 1024px;
|
||||
}
|
||||
$menu-size: 1004px;
|
||||
.wrapper {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@media (min-width: $menu-size) {
|
||||
width: $menu-size;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
a {
|
||||
border-radius: $default-border-radius;
|
||||
width: 50px;
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
padding: 5px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: white;
|
||||
font-size: larger;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
outline: 1px solid;
|
||||
i {
|
||||
font-size: 22px;
|
||||
margin: 5px;
|
||||
margin-right: 10%;
|
||||
}
|
||||
}
|
||||
a:hover {
|
||||
background-color: $text-color;
|
||||
color: white;
|
||||
}
|
||||
|
||||
@media (min-width: $min-tablet) {
|
||||
a {
|
||||
width: 130px;
|
||||
i {
|
||||
font-size: unset;
|
||||
}
|
||||
}
|
||||
a:hover {
|
||||
background-color: rgb(176, 176, 176);
|
||||
outline: 1px solid;
|
||||
}
|
||||
@media (min-width: $min-desktop) {
|
||||
a {
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
list-style-type: none;
|
||||
width: 100%;
|
||||
}
|
||||
li {
|
||||
display: inline-block;
|
||||
width: 20%;
|
||||
}
|
||||
</style>
|
||||
|
||||
164
src/lib/elements/MenuMobile.svelte
Normal file
164
src/lib/elements/MenuMobile.svelte
Normal 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>
|
||||
@ -1,13 +1,15 @@
|
||||
<script lang="ts">
|
||||
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({
|
||||
html: true,
|
||||
xhtmlOut: true,
|
||||
typographer: true
|
||||
});
|
||||
import data from '../model/training.json';
|
||||
import type { Schema } from '$lib/model/job';
|
||||
export let currentLanguage = 'it';
|
||||
export let currentLanguage: CurrentLanguage = 'it';
|
||||
const training: Schema[] = data as Schema[];
|
||||
</script>
|
||||
|
||||
|
||||
5
src/lib/model/job.d.ts
vendored
5
src/lib/model/job.d.ts
vendored
@ -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;
|
||||
}
|
||||
|
||||
@ -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
|
||||
}
|
||||
13
src/lib/types.ts
Normal file
13
src/lib/types.ts
Normal 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' }
|
||||
};
|
||||
@ -1,15 +1,17 @@
|
||||
<script lang="ts">
|
||||
import { MetaTags } from 'svelte-meta-tags';
|
||||
import type { CurrentLanguage } from '$lib/types';
|
||||
import AboutMe from '$lib/elements/AboutMe.svelte';
|
||||
import Jobs from '$lib/elements/Jobs.svelte';
|
||||
import Menu from '$lib/elements/Menu.svelte';
|
||||
import MenuMobile from '$lib/elements/MenuMobile.svelte';
|
||||
import Training from '$lib/elements/Training.svelte';
|
||||
import Data_jobs from '$lib/model/jobs.json';
|
||||
import Data_portfolio from '$lib/model/portfolio.json';
|
||||
import type { Schema } from '$lib/model/job';
|
||||
let jobs: Schema[] = Data_jobs as Schema[];
|
||||
let portfolio: Schema[] = Data_portfolio as Schema[];
|
||||
let currentLanguage: string = 'it';
|
||||
let currentLanguage: CurrentLanguage = 'it';
|
||||
let titles = {
|
||||
home: {
|
||||
it: 'Gianmarco Pettinato',
|
||||
@ -61,39 +63,26 @@
|
||||
|
||||
<main>
|
||||
<!-- 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} />
|
||||
</div>
|
||||
<div class="menu menu-mobile">
|
||||
<MenuMobile {currentLanguage} />
|
||||
</div>
|
||||
<div id="home" class="default">
|
||||
<h1>{titles.home.it}</h1>
|
||||
<h2>Software developer</h2>
|
||||
<AboutMe {currentLanguage} />
|
||||
</div>
|
||||
<div id="jobs" class="default">
|
||||
<h2>{titles.job.it}</h2>
|
||||
<h2>{titles.job[currentLanguage]}</h2>
|
||||
<Jobs {jobs} {currentLanguage} />
|
||||
</div>
|
||||
<div id="training" class="default">
|
||||
<h2>{titles.school.it}</h2>
|
||||
<h2>{titles.school[currentLanguage]}</h2>
|
||||
<Training {currentLanguage} />
|
||||
</div>
|
||||
<div id="portfolio" class="default">
|
||||
<h2>{titles.portfolio.it}</h2>
|
||||
<h2>{titles.portfolio[currentLanguage]}</h2>
|
||||
<Jobs jobs={portfolio} {currentLanguage} />
|
||||
</div>
|
||||
</main>
|
||||
@ -101,36 +90,27 @@
|
||||
<style lang="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 {
|
||||
background-color: $basecolor2;
|
||||
position: sticky;
|
||||
position: -webkit-sticky;
|
||||
top: 0px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
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 {
|
||||
border: 0;
|
||||
background: none;
|
||||
|
||||
@ -1,11 +1,13 @@
|
||||
<script lang="ts">
|
||||
import { MetaTags } from 'svelte-meta-tags';
|
||||
import Menu from '$lib/elements/Menu.svelte';
|
||||
import Jobs from '$lib/elements/Jobs.svelte';
|
||||
let currentLanguage: string = 'it';
|
||||
let isBlogContainer = true;
|
||||
import type { CurrentLanguage } from '$lib/types';
|
||||
import Data_portfolio from '../../lib/model/portfolio.json';
|
||||
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 title = { it: 'I miei articoli', en: 'my blog posts' };
|
||||
</script>
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
<script lang="ts">
|
||||
import { MetaTags } from 'svelte-meta-tags';
|
||||
import Menu from '$lib/elements/Menu.svelte';
|
||||
let currentLanguage: string = 'it';
|
||||
let currentLanguage: CurrentLanguage = 'it';
|
||||
import { page } from '$app/stores';
|
||||
import type { CurrentLanguage } from '$lib/types';
|
||||
console.log($page);
|
||||
</script>
|
||||
|
||||
|
||||
@ -10,6 +10,7 @@ const config = {
|
||||
// for more information about preprocessors
|
||||
preprocess: [vitePreprocess(), markdown(),preprocess({
|
||||
sass: true,
|
||||
typescript: true,
|
||||
})],
|
||||
|
||||
kit: {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user