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

New CSS #1

Merged
Jatus merged 13 commits from feature/material_desing into develop 2023-05-27 15:38:49 +02:00
Conversation 0 Commits 13 Files Changed 97 +394 -445
23 changed files with 394 additions and 445 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 10adaf1613 - Show all commits

17
package-lock.json generated
View File

@ -20,6 +20,7 @@
"devDependencies": { "devDependencies": {
"@playwright/test": "^1.28.1", "@playwright/test": "^1.28.1",
"@sveltejs/adapter-auto": "^1.0.0", "@sveltejs/adapter-auto": "^1.0.0",
"@sveltejs/adapter-static": "^1.0.5",
"@sveltejs/kit": "^1.0.0", "@sveltejs/kit": "^1.0.0",
"@types/markdown-it": "^12.2.3", "@types/markdown-it": "^12.2.3",
"@typescript-eslint/eslint-plugin": "^5.45.0", "@typescript-eslint/eslint-plugin": "^5.45.0",
@ -613,6 +614,15 @@
"@sveltejs/kit": "^1.0.0" "@sveltejs/kit": "^1.0.0"
} }
}, },
"node_modules/@sveltejs/adapter-static": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/@sveltejs/adapter-static/-/adapter-static-1.0.5.tgz",
"integrity": "sha512-W5jbgvy9sbYEHs27NQOSFEun+zQwdcL4kpk5qc2kSHl8cKsP5wfXuWDTDRmD1Co40aFcesi5Az5ZzdnPI8KCVg==",
"dev": true,
"peerDependencies": {
"@sveltejs/kit": "^1.0.0"
}
},
"node_modules/@sveltejs/kit": { "node_modules/@sveltejs/kit": {
"version": "1.1.1", "version": "1.1.1",
"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.1.1.tgz", "resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.1.1.tgz",
@ -4085,6 +4095,13 @@
"import-meta-resolve": "^2.2.0" "import-meta-resolve": "^2.2.0"
} }
}, },
"@sveltejs/adapter-static": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/@sveltejs/adapter-static/-/adapter-static-1.0.5.tgz",
"integrity": "sha512-W5jbgvy9sbYEHs27NQOSFEun+zQwdcL4kpk5qc2kSHl8cKsP5wfXuWDTDRmD1Co40aFcesi5Az5ZzdnPI8KCVg==",
"dev": true,
"requires": {}
},
"@sveltejs/kit": { "@sveltejs/kit": {
"version": "1.1.1", "version": "1.1.1",
"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.1.1.tgz", "resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.1.1.tgz",

1
package.json
View File

@ -16,6 +16,7 @@
"devDependencies": { "devDependencies": {
"@playwright/test": "^1.28.1", "@playwright/test": "^1.28.1",
"@sveltejs/adapter-auto": "^1.0.0", "@sveltejs/adapter-auto": "^1.0.0",
"@sveltejs/adapter-static": "^1.0.5",
"@sveltejs/kit": "^1.0.0", "@sveltejs/kit": "^1.0.0",
"@types/markdown-it": "^12.2.3", "@types/markdown-it": "^12.2.3",
"@typescript-eslint/eslint-plugin": "^5.45.0", "@typescript-eslint/eslint-plugin": "^5.45.0",

2
src/app.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="%lang%"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" /> <link rel="icon" href="%sveltekit.assets%/favicon.png" />

12
src/app.scss
View File

@ -14,10 +14,14 @@ $min-desktop: 1024px;
$min-ultrawide: 1700px; $min-ultrawide: 1700px;
$default-border-radius:5px; $default-border-radius:5px;
$border-hover-color: #999;
$default-main-color: white;
$default-active-color: rgb(176, 176, 176);
:root { :root {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
color: $text-color; color: $text-color;
background-color: $basecolor background-color: $basecolor;
} }
.box-with-shadow { .box-with-shadow {
@ -32,6 +36,7 @@ $default-border-radius:5px;
width: 80%; width: 80%;
max-width: 1024px; max-width: 1024px;
} }
} }
.image-container{ .image-container{
@ -43,9 +48,6 @@ $default-border-radius:5px;
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) {
background-color: $contrast;
}
} }
} }
@ -62,4 +64,4 @@ button{
h1, h2, h3 { h1, h2, h3 {
font-weight: normal; font-weight: normal;
} }

37
src/elements/Skills copy.svelte
View File

@ -1,37 +0,0 @@
<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>

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

@ -1,6 +1,5 @@
<script lang="ts"> <script lang="ts">
import Contacts from './Contacts.svelte'; import Contacts from './Contacts.svelte';
import Skills from './Skills.svelte';
export let currentLanguage: CurrentLanguage = 'it'; export let currentLanguage: CurrentLanguage = 'it';
import { FontAwesomeIcon } from '@fortawesome/svelte-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/svelte-fontawesome';
import { faDownload } from '@fortawesome/free-solid-svg-icons'; import { faDownload } from '@fortawesome/free-solid-svg-icons';
@ -53,12 +52,7 @@
<style lang="scss"> <style lang="scss">
@import '../../app.scss'; @import '../../app.scss';
.cv {
width: 80%;
margin: auto;
display: flex;
justify-content: space-evenly;
}
.whoIAm { .whoIAm {
margin: auto; margin: auto;
text-align: justify; text-align: justify;
@ -67,13 +61,13 @@
background-color: $basecolor2; background-color: $basecolor2;
// border: solid 1px $border-color; // border: solid 1px $border-color;
border-radius: $default-border-radius; border-radius: $default-border-radius;
margin-top: 20px;
padding: 30px; padding: 30px;
margin: 10px; }
.title { .title {
display: none; display: none;
@media (min-width: $min-tablet) { @media (min-width: $min-tablet) {
display: unset; display: unset;
}
} }
} }
</style> </style>

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

@ -57,8 +57,6 @@
// border: solid 1px $border-color; // border: solid 1px $border-color;
} }
.contacts { .contacts {
background-color: $basecolor2;
// border: solid 1px $border-color;
border-radius: $default-border-radius; border-radius: $default-border-radius;
padding: 30px; padding: 30px;
display: flex; display: flex;

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

@ -25,7 +25,6 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;
padding: 10px;
} }
.job-card { .job-card {
background-color: $basecolor2; background-color: $basecolor2;

97
src/lib/elements/LanguageSelector.svelte
View File

@ -1,20 +1,89 @@
<script lang="ts"> <script lang="ts">
import type { Handle, RequestEvent, ResolveOptions } from '@sveltejs/kit';
import type { CurrentLanguage } from '$lib/types'; import type { CurrentLanguage } from '$lib/types';
import { FontAwesomeIcon } from '@fortawesome/svelte-fontawesome';
import * as svgIcons from '@fortawesome/free-solid-svg-icons';
import * as svgCore from '@fortawesome/fontawesome-svg-core';
let langSelectOpen = false;
let langSelect: Element;
export let currentLanguage: CurrentLanguage = 'en';
export let currentLanguage: CurrentLanguage = 'it'; function setOpen() {
langSelectOpen = !langSelectOpen;
const animationLanguage = langSelect.animate([{ width: '0px' }, { width: '200px' }], {
duration: 100,
fill: 'both'
});
if (langSelectOpen) {
animationLanguage.play();
// animateConatiner.play();
} else {
animationLanguage.reverse();
// animateConatiner.reverse();
}
}
function setLanguage(value: CurrentLanguage) {
currentLanguage = value;
({ svelteHTML });
}
svgCore.library.add(svgIcons.faGlobeEurope);
const globeLookup: svgCore.IconLookup = { prefix: 'fas', iconName: 'globe-europe' };
const globeDefinition: svgCore.IconDefinition = svgCore.findIconDefinition(globeLookup);
</script> </script>
<div> <div class="language-selector">
<button <button on:click={setOpen}> <FontAwesomeIcon icon={globeDefinition} size="2x" /> </button>
class="custom-button {currentLanguage == 'it' ? 'custom-button-active' : ''}" <div class="button-container" bind:this={langSelect}>
on:click={() => { <button
currentLanguage = 'it'; class="custom-button {currentLanguage == 'it' ? 'custom-button-active' : ''}"
}}>it</button on:click={() => setLanguage('it')}
> title="attiva lingua italiana">it</button
<button >
class="custom-button {currentLanguage == 'en' ? 'custom-button-active' : ''}" <button
on:click={() => { class="custom-button {currentLanguage == 'en' ? 'custom-button-active' : ''}"
currentLanguage = 'en'; on:click={() => setLanguage('en')}
}}>en</button title="enable english language">en</button
> >
</div>
</div> </div>
<style lang="scss">
@import '../../app.scss';
.language-selector {
display: flex;
position: fixed;
flex-direction: row;
align-items: center;
background-color: $basecolor2;
border-radius: $default-border-radius;
font-size: 50px;
border-bottom: solid $border-hover-color 1px;
border-left: solid $border-hover-color 1px;
bottom: 70px;
right: 0;
}
.button-container {
display: flex;
justify-content: space-evenly;
width: 0px;
overflow: hidden;
}
button {
background: none;
border: none;
width: 50px;
height: 50px;
}
.custom-button {
width: 100px;
font-size: large;
}
.custom-button-active {
background-color: $default-active-color;
outline: solid 1px;
}
</style>

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

@ -1,119 +1,51 @@
<script lang="ts"> <script lang="ts">
import { FontAwesomeIcon } from '@fortawesome/svelte-fontawesome'; import type { CurrentLanguage } from '$lib/types';
import * as svgIcons from '@fortawesome/free-solid-svg-icons'; import MenuBig from './MenuBig.svelte';
import * as svgCore from '@fortawesome/fontawesome-svg-core'; import MenuMobile from './MenuMobile.svelte';
import type { CurrentLanguage, LanguagePair, MenuEntry } from '$lib/types'; export let currentLanguage: CurrentLanguage = 'en';
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' },
blog: { it: 'Blog', en: 'Blog' },
portfolio: { it: 'Portfolio', en: 'Portfolio' }
};
</script> </script>
<div> <div class="menu-container default">
<ul class="wrapper"> <div class="menu menu-desktop">
<li> <MenuBig {currentLanguage} />
<a class="menu-element" href="#top"> </div>
<i> <div class="menu menu-mobile">
<FontAwesomeIcon icon={homeIconDefinition} /> <MenuMobile {currentLanguage} />
</i> </div>
<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> </div>
<style lang="scss"> <style lang="scss">
@import '../../app.scss'; @import '../../app.scss';
$menu-size: 1004px;
.wrapper { .menu {
width: 100%; border-radius: $default-border-radius;
margin: 0;
padding: 0; background-color: $basecolor2;
@media (min-width: $menu-size) { position: sticky;
width: $menu-size; position: -webkit-sticky;
margin: auto; top: 0px;
} border-bottom: solid $border-hover-color 2px;
} }
a {
display: flex; .menu-desktop {
justify-content: center; display: none;
align-items: center; @media (min-width: $min-tablet) {
background-color: white; display: unset;
font-size: larger;
width: 100%;
height: 50px;
outline: 1px solid;
i {
margin-right: 10%;
} }
} }
a:hover { .menu-mobile {
background-color: rgb(176, 176, 176); @media (min-width: $min-tablet) {
outline: 1px solid; display: none;
}
} }
.menu-container {
ul { border-radius: $default-border-radius;
display: flex; padding: 0px;
list-style-type: none; margin: 10px;
width: 100%; position: sticky;
} position: -webkit-sticky;
li { top: 0px;
display: inline-block; margin: auto;
width: 20%;
} }
</style> </style>

143
src/lib/elements/MenuBig.svelte Normal file
View File

@ -0,0 +1,143 @@
<script lang="ts">
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' },
blog: { it: 'Blog', en: 'Blog' },
portfolio: { it: 'Portfolio', en: 'Portfolio' }
};
</script>
<div class="container">
<ul>
<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';
$menu-size: 1004px;
a {
padding: 0;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
font-size: larger;
min-width: 50px;
width: 100%;
height: 50px;
i {
margin-right: 10%;
}
}
a:hover,
a:active {
background-color: $default-active-color;
}
ul {
display: flex;
width: 100%;
height: 100%;
list-style-type: none;
padding: 0;
margin: 0;
margin: auto;
border-radius: $default-border-radius;
}
.container {
border-radius: $default-border-radius;
width: 100%;
border-bottom: solid $border-hover-color 1px;
}
ul li {
background-color: $basecolor2;
flex: 1;
}
li:first-of-type {
background-color: $basecolor2;
border-top-left-radius: $default-border-radius;
border-bottom-left-radius: $default-border-radius;
a:hover,
a:active {
border-top-left-radius: $default-border-radius;
border-bottom-left-radius: $default-border-radius;
}
}
li:last-of-type {
border-top-right-radius: $default-border-radius;
border-bottom-right-radius: $default-border-radius;
a:hover,
a:active {
border-top-right-radius: $default-border-radius;
border-bottom-right-radius: $default-border-radius;
}
}
</style>

27
src/lib/elements/MenuMobile.svelte
View File

@ -1,5 +1,4 @@
<script lang="ts"> <script lang="ts">
import { tweened } from 'svelte/motion';
import { FontAwesomeIcon } from '@fortawesome/svelte-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/svelte-fontawesome';
import * as svgIcons from '@fortawesome/free-solid-svg-icons'; import * as svgIcons from '@fortawesome/free-solid-svg-icons';
import * as svgCore from '@fortawesome/fontawesome-svg-core'; import * as svgCore from '@fortawesome/fontawesome-svg-core';
@ -43,6 +42,10 @@
blog: { it: 'Blog', en: 'Blog' }, blog: { it: 'Blog', en: 'Blog' },
portfolio: { it: 'Portfolio', en: 'Portfolio' } portfolio: { it: 'Portfolio', en: 'Portfolio' }
}; };
const menuButton: Record<number, LanguagePair> = {
1: { it: 'Apri il menu', en: 'Open menu' },
0: { it: 'Chiudi il menu', en: 'Close menu' }
};
let menuContainer: Element; let menuContainer: Element;
let menuOpen = false; let menuOpen = false;
@ -59,7 +62,7 @@
<div class="menu-container"> <div class="menu-container">
<div class="header"> <div class="header">
<button on:click={setOpen} tabindex="0" title="menu toggle"> <button on:click={setOpen} tabindex="0" title={menuButton[Number(menuOpen)][currentLanguage]}>
{#if !menuOpen}<FontAwesomeIcon icon={barsDefinition} size="lg" /> {#if !menuOpen}<FontAwesomeIcon icon={barsDefinition} size="lg" />
{:else} {:else}
<FontAwesomeIcon icon={xDefinition} size="lg" /> <FontAwesomeIcon icon={xDefinition} size="lg" />
@ -100,13 +103,13 @@
</i><span>{menu.portfolio[currentLanguage]}</span></a </i><span>{menu.portfolio[currentLanguage]}</span></a
> >
</li> </li>
<li> <!-- <li>
<a class="menu-element" href="/blog" <a class="menu-element" href="/blog"
><i> ><i>
<FontAwesomeIcon icon={addressCardDefinition} /> <FontAwesomeIcon icon={addressCardDefinition} />
</i><span>{menu.blog[currentLanguage]}</span></a </i><span>{menu.blog[currentLanguage]}</span></a
> >
</li> </li> -->
</ul> </ul>
</div> </div>
@ -146,17 +149,25 @@
display: flex; display: flex;
justify-content: start; justify-content: start;
align-items: center; align-items: center;
background-color: white; background-color: $basecolor2;
font-size: larger; font-size: larger;
height: 60px; height: 60px;
border: 1px solid;
i { i {
margin-right: 10%; margin-right: 10%;
} }
} }
li {
border-left: 1px solid;
border-right: 1px solid;
border-bottom: 1px solid;
}
li:first-of-type {
border-top: 1px solid;
}
a:hover { a:hover {
background-color: rgb(176, 176, 176); background-color: $default-active-color;
outline: 1px solid; outline: solid 1px;
} }
.wrapper { .wrapper {
height: 0px; height: 0px;

37
src/lib/elements/Skills copy.svelte
View File

@ -1,37 +0,0 @@
<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, #000000 2px, blue 100%);
}
.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>

2
src/lib/elements/Skills.svelte
View File

@ -25,7 +25,7 @@
.inside { .inside {
width: 70px; width: 70px;
height: 70px; height: 70px;
// background-color: white; // background-color:$basecolor2;
border-radius: 50%; border-radius: 50%;
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;

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

@ -13,7 +13,7 @@
const training: Schema[] = data as Schema[]; const training: Schema[] = data as Schema[];
</script> </script>
<div class="training"> <div>
{#each training as school} {#each training as school}
<div class="element"> <div class="element">
<img src={school.images[0]} alt="school logo" /> <img src={school.images[0]} alt="school logo" />
@ -27,13 +27,10 @@
</div> </div>
<style lang="scss"> <style lang="scss">
.training {
padding: 10px;
}
@import '../../app.scss'; @import '../../app.scss';
.element { .element {
border-radius: $default-border-radius; border-radius: $default-border-radius;
background-color: white; background-color: $basecolor2;
padding: 45px; padding: 45px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;

8
src/lib/types.ts
View File

@ -3,11 +3,3 @@ export type MenuEntry = 'home' | 'job' | 'school' | 'blog' | 'portfolio';
export type LanguagePair = { export type LanguagePair = {
[key in CurrentLanguage]: string; [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' }
};

2
src/routes/+layout.ts Normal file
View File

@ -0,0 +1,2 @@
export const ssr = false;
export const prerender = true;

70
src/routes/+page.svelte
View File

@ -8,7 +8,9 @@
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 LanguageSelector from '$lib/elements/LanguageSelector.svelte';
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: CurrentLanguage = 'it'; let currentLanguage: CurrentLanguage = 'it';
@ -32,22 +34,7 @@
url: 'https://pettinato.eu/', url: 'https://pettinato.eu/',
title: 'Gianmarco Pettinato', title: 'Gianmarco Pettinato',
description: "This is the Gianmarco's portfolio site", description: "This is the Gianmarco's portfolio site",
images: [ images: [],
{
url: 'https://www.example.ie/og-image-01.jpg',
width: 800,
height: 600,
alt: 'Og Image Alt'
},
{
url: 'https://www.example.ie/og-image-02.jpg',
width: 900,
height: 800,
alt: 'Og Image Alt Second'
},
{ url: 'https://www.example.ie/og-image-03.jpg' },
{ url: 'https://www.example.ie/og-image-04.jpg' }
],
site_name: 'Gianmarco Pettinato Portfolio' site_name: 'Gianmarco Pettinato Portfolio'
}} }}
twitter={{ twitter={{
@ -63,14 +50,9 @@
<main> <main>
<!-- svelte-ignore a11y-invalid-attribute --> <!-- svelte-ignore a11y-invalid-attribute -->
<LanguageSelector bind:currentLanguage />
<div class="menu menu-desktop"> <Menu {currentLanguage} />
<Menu {currentLanguage} /> <div id="home" class="default test">
</div>
<div class="menu menu-mobile">
<MenuMobile {currentLanguage} />
</div>
<div id="home" class="default">
<AboutMe {currentLanguage} /> <AboutMe {currentLanguage} />
</div> </div>
<div id="jobs" class="default"> <div id="jobs" class="default">
@ -90,46 +72,6 @@
<style lang="scss"> <style lang="scss">
@import '../app.scss'; @import '../app.scss';
.menu {
background-color: $basecolor2;
position: sticky;
position: -webkit-sticky;
top: 0px;
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;
box-shadow: none;
border-radius: $default-border-radius;
border: solid $button-border-color 1px;
width: 40px;
cursor: pointer;
margin-right: 5px;
}
.custom-button:hover {
background-color: $text-color;
color: white;
}
.custom-button-active {
cursor: unset;
background-color: $text-color;
color: white;
}
@media (max-width: $min-tablet) { @media (max-width: $min-tablet) {
.custom-button { .custom-button {
font-size: large; font-size: large;

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

@ -1,134 +0,0 @@
<script lang="ts">
import { MetaTags } from 'svelte-meta-tags';
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>
<MetaTags
title="Gianmarco Pettinato"
description="This is the Gianmarco's portfolio site"
canonical="https://pettinato.eu/"
openGraph={{
url: 'https://pettinato.eu/',
title: 'Gianmarco Pettinato',
description: "This is the Gianmarco's portfolio site",
images: [
{
url: 'https://www.example.ie/og-image-01.jpg',
width: 800,
height: 600,
alt: 'Og Image Alt'
},
{
url: 'https://www.example.ie/og-image-02.jpg',
width: 900,
height: 800,
alt: 'Og Image Alt Second'
},
{ url: 'https://www.example.ie/og-image-03.jpg' },
{ url: 'https://www.example.ie/og-image-04.jpg' }
],
site_name: 'Gianmarco Pettinato Portfolio'
}}
twitter={{
handle: '@jatus_93',
site: '@jatus_93',
cardType: 'summary',
title: 'Gianmarco Pettinato Portfolio',
description: "This is the Gianmarco's portfolio site",
image: 'https://pettinato.eu/profile_pic.webp',
imageAlt: 'Gianmarco Photo'
}}
/>
<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">
<Menu {currentLanguage} />
</div>
<div id="portfolio" class="default">
<h2>{title.it}</h2>
<Jobs {jobs} {currentLanguage} {isBlogContainer} />
</div>
</main>
<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;
}
.custom-button {
border: 0;
background: none;
box-shadow: none;
border-radius: $default-border-radius;
border: solid $button-border-color 1px;
width: 40px;
cursor: pointer;
margin-right: 5px;
}
.custom-button:hover {
background-color: $text-color;
color: white;
}
.custom-button-active {
cursor: unset;
background-color: $text-color;
color: white;
}
@media (max-width: $min-tablet) {
.custom-button {
font-size: large;
}
}
</style>

9
svelte.config.js
View File

@ -1,4 +1,4 @@
import adapter from '@sveltejs/adapter-auto'; import adapter from '@sveltejs/adapter-static';
import { vitePreprocess } from '@sveltejs/kit/vite'; import { vitePreprocess } from '@sveltejs/kit/vite';
import {markdown} from 'svelte-preprocess-markdown'; import {markdown} from 'svelte-preprocess-markdown';
import preprocess from 'svelte-preprocess'; import preprocess from 'svelte-preprocess';
@ -14,7 +14,12 @@ const config = {
})], })],
kit: { kit: {
adapter: adapter() adapter: adapter({
// default options are shown
pages: 'build',
assets: 'build',
fallback: null
})
} }
}; };

56
to-be-done/blog/+page.svelte Normal file
View File

@ -0,0 +1,56 @@
<script lang="ts">
import { MetaTags } from 'svelte-meta-tags';
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/MenuBig.svelte';
import Jobs from '$lib/elements/Jobs.svelte';
import LanguageSelector from '$lib/elements/LanguageSelector.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>
<MetaTags
title="Gianmarco Pettinato"
description="This is the Gianmarco's portfolio site"
canonical="https://pettinato.eu/"
openGraph={{
url: 'https://pettinato.eu/',
title: 'Gianmarco Pettinato',
description: "This is the Gianmarco's portfolio site",
images: [],
site_name: 'Gianmarco Pettinato Portfolio'
}}
twitter={{
handle: '@jatus_93',
site: '@jatus_93',
cardType: 'summary',
title: 'Gianmarco Pettinato Portfolio',
description: "This is the Gianmarco's portfolio site",
image: 'https://pettinato.eu/profile_pic.webp',
imageAlt: 'Gianmarco Photo'
}}
/>
<main>
<!-- svelte-ignore a11y-invalid-attribute -->
<LanguageSelector bind:currentLanguage />
<Menu {currentLanguage} />
<div id="portfolio" class="default">
<h2>{title.it}</h2>
<Jobs {jobs} {currentLanguage} {isBlogContainer} />
</div>
</main>
<style lang="scss">
@import '../../app.scss';
@media (max-width: $min-tablet) {
.custom-button {
font-size: large;
}
}
</style>

8
src/routes/blog/[slug]/+page.svelte → to-be-done/blog/[slug]/+page.svelte
View File

@ -1,6 +1,6 @@
<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/MenuBig.svelte';
let currentLanguage: CurrentLanguage = 'it'; let currentLanguage: CurrentLanguage = 'it';
import { page } from '$app/stores'; import { page } from '$app/stores';
import type { CurrentLanguage } from '$lib/types'; import type { CurrentLanguage } from '$lib/types';
@ -95,7 +95,7 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 10px; padding: 10px;
border-bottom: solid #999 1px; border-bottom: solid $border-hover-color 1px;
} }
.custom-button { .custom-button {
@ -110,12 +110,12 @@
} }
.custom-button:hover { .custom-button:hover {
background-color: $text-color; background-color: $text-color;
color: white; color: $basecolor2;
} }
.custom-button-active { .custom-button-active {
cursor: unset; cursor: unset;
background-color: $text-color; background-color: $text-color;
color: white; color: $basecolor2;
} }
@media (max-width: $min-tablet) { @media (max-width: $min-tablet) {
.custom-button { .custom-button {

5
vite.config.ts
View File

@ -2,10 +2,7 @@ import { sveltekit } from '@sveltejs/kit/vite';
import type { UserConfig } from 'vite'; import type { UserConfig } from 'vite';
const config: UserConfig = { const config: UserConfig = {
plugins: [sveltekit()], plugins: [sveltekit()]
test: {
include: ['src/**/*.{test,spec}.{js,ts}']
}
}; };
export default config; export default config;